feat : new ui et message discord
This commit is contained in:
@@ -13,15 +13,147 @@
|
||||
--color-m-bg: rgb(var(--m-bg));
|
||||
--color-m-error: rgb(var(--m-error));
|
||||
--color-m-success: rgb(var(--m-success));
|
||||
/* Alias pour la faute de frappe courante "m-succes" */
|
||||
--color-m-accent: rgb(var(--m-accent));
|
||||
--color-m-warning: rgb(var(--m-warning));
|
||||
--color-m-succes: rgb(var(--m-success));
|
||||
--font-display: "Outfit", system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-display);
|
||||
background: rgb(var(--m-bg));
|
||||
color: rgb(var(--m-text));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-grid {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
|
||||
linear-gradient(to right, rgb(var(--m-accent) / 0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgb(var(--m-accent) / 0.04) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.bg-noise {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-noise::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.025;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--m-accent) / var(--m-card-border-opacity)),
|
||||
0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity)),
|
||||
0 0 48px -12px rgb(var(--m-accent) / 0.06);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-glow-success {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--m-success) / 0.15),
|
||||
0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity));
|
||||
}
|
||||
|
||||
.card-glow-error {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--m-error) / 0.15),
|
||||
0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity));
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, rgb(var(--m-accent)), rgb(var(--m-success)));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.5s ease-out both;
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--m-shimmer-from) 0%,
|
||||
var(--m-shimmer-to) 50%,
|
||||
var(--m-shimmer-from) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(var(--m-bg));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--m-border));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--m-muted));
|
||||
}
|
||||
|
||||
@@ -3,17 +3,26 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Couleurs en RGB “space separated” pour Tailwind */
|
||||
--m-primary: 34 39 131; /* Couleur principal*/
|
||||
--m-secondary: 48 73 152; /* Couleur secondaire */
|
||||
--m-tertiary: 243 244 248; /* Couleur tertiaire (background) */
|
||||
--m-border: 203 213 225; /* Couleur des bordures */
|
||||
--m-text: 15 23 42; /* Couleur du texte */
|
||||
--m-muted: 100 116 139; /* Couleur pour les éléments désactivés ou secondaires */
|
||||
--m-bg: 243 244 248; /* Couleur de fond générale */
|
||||
|
||||
--m-error: 212 0 21; /* rouge pour les erreurs */
|
||||
--m-success: 15 200 73; /* vert pour les succès */
|
||||
}
|
||||
:root {
|
||||
--m-primary: 15 20 40;
|
||||
--m-secondary: 22 30 55;
|
||||
--m-tertiary: 30 41 72;
|
||||
--m-border: 55 70 110;
|
||||
--m-text: 220 225 240;
|
||||
--m-muted: 130 145 175;
|
||||
--m-bg: 10 14 30;
|
||||
--m-error: 255 70 70;
|
||||
--m-success: 0 220 180;
|
||||
--m-accent: 80 140 255;
|
||||
--m-warning: 255 180 50;
|
||||
--m-shadow-opacity: 0.4;
|
||||
--m-glow-opacity: 0.1;
|
||||
--m-card-border-opacity: 0.1;
|
||||
--m-shimmer-from: rgba(80, 140, 255, 0.05);
|
||||
--m-shimmer-to: rgba(80, 140, 255, 0.12);
|
||||
--m-sidebar-from: 15 20 40;
|
||||
--m-sidebar-to: 15 18 35;
|
||||
--m-sidebar-border: rgba(80, 140, 255, 0.08);
|
||||
--m-sidebar-divider: rgba(80, 140, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user