This commit is contained in:
MOH
+126
-217
@@ -3,98 +3,131 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 220 23% 97%;
|
||||
--foreground: 222 22% 11%;
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 222 30% 12%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 22% 11%;
|
||||
--card-foreground: 222 30% 12%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 22% 11%;
|
||||
--popover-foreground: 222 30% 12%;
|
||||
|
||||
--primary: 10 74% 50%;
|
||||
--primary: 214 84% 42%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 214 19% 93%;
|
||||
--secondary-foreground: 222 22% 11%;
|
||||
--muted: 215 20% 92%;
|
||||
--muted-foreground: 219 15% 35%;
|
||||
--accent: 44 93% 55%;
|
||||
--accent-foreground: 222 22% 11%;
|
||||
--destructive: 0 72% 45%;
|
||||
--secondary: 210 24% 94%;
|
||||
--secondary-foreground: 222 30% 12%;
|
||||
--muted: 210 20% 95%;
|
||||
--muted-foreground: 215 16% 38%;
|
||||
--accent: 191 78% 42%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 72% 47%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--surface: 0 0% 100%;
|
||||
--surface-soft: 215 18% 93%;
|
||||
--surface-elevated: 0 0% 99%;
|
||||
--border: 215 20% 88%;
|
||||
--input: 215 20% 83%;
|
||||
--ring: 10 74% 50%;
|
||||
--surface-1: 0 0% 100%;
|
||||
--surface-2: 210 20% 96%;
|
||||
--surface-3: 210 24% 93%;
|
||||
--surface-inverse: 222 34% 14%;
|
||||
--surface-inverse-foreground: 210 40% 98%;
|
||||
|
||||
--radius: 0.85rem;
|
||||
--radius-card: 1rem;
|
||||
--radius-input: 0.7rem;
|
||||
--radius-sidebar: 1rem;
|
||||
--border: 214 22% 88%;
|
||||
--border-strong: 214 20% 80%;
|
||||
--input: 214 20% 84%;
|
||||
--ring: 214 84% 42%;
|
||||
|
||||
--shadow-xs: 0 1px 2px 0 hsl(220 30% 10% / 0.06);
|
||||
--shadow-sm: 0 6px 18px -14px hsl(220 32% 20% / 0.18);
|
||||
--shadow-md: 0 18px 35px -24px hsl(220 32% 20% / 0.24);
|
||||
--shadow-lg: 0 24px 55px -30px hsl(220 32% 20% / 0.3);
|
||||
--shadow-card: 0 10px 30px -20px hsl(220 35% 10% / 0.22);
|
||||
--shadow-sidebar: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
|
||||
--status-success: 145 63% 42%;
|
||||
--status-success-soft: 145 58% 92%;
|
||||
--status-warning: 36 92% 44%;
|
||||
--status-warning-soft: 41 96% 90%;
|
||||
|
||||
--sidebar-background: 220 27% 96%;
|
||||
--sidebar-foreground: 223 18% 24%;
|
||||
--sidebar-primary: 10 74% 50%;
|
||||
--brand-primary: 214 84% 42%;
|
||||
--brand-secondary: 191 78% 42%;
|
||||
|
||||
--radius-surface: 0rem;
|
||||
--radius-nested: 0rem;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
|
||||
--shadow-sm: 0 12px 30px -20px hsl(220 32% 18% / 0.16);
|
||||
--shadow-md: 0 22px 48px -28px hsl(220 32% 18% / 0.2);
|
||||
--shadow-lg: 0 28px 70px -34px hsl(220 32% 18% / 0.28);
|
||||
--shadow-card: 0 20px 46px -30px hsl(220 32% 18% / 0.2);
|
||||
--shadow-panel: 0 18px 50px -32px hsl(220 32% 18% / 0.18);
|
||||
--shadow-sidebar: inset 0 1px 0 hsl(0 0% 100% / 0.7);
|
||||
|
||||
--focus-ring: 0 0 0 3px hsl(var(--ring) / 0.18);
|
||||
|
||||
--container-narrow: 48rem;
|
||||
--container-default: 72rem;
|
||||
--container-wide: 80rem;
|
||||
--container-admin: 88rem;
|
||||
--header-height: 4.5rem;
|
||||
--section-space: 3.5rem;
|
||||
--content-space: 1.5rem;
|
||||
|
||||
--sidebar-background: 210 22% 95%;
|
||||
--sidebar-foreground: 222 24% 18%;
|
||||
--sidebar-primary: 214 84% 42%;
|
||||
--sidebar-primary-foreground: 210 40% 98%;
|
||||
--sidebar-accent: 220 24% 91%;
|
||||
--sidebar-accent-foreground: 222 20% 15%;
|
||||
--sidebar-border: 216 20% 85%;
|
||||
--sidebar-ring: 10 74% 50%;
|
||||
|
||||
--focus-ring: 0 0 0 2px hsl(var(--ring) / 0.35);
|
||||
--sidebar-accent: 210 20% 90%;
|
||||
--sidebar-accent-foreground: 222 24% 18%;
|
||||
--sidebar-border: 214 20% 84%;
|
||||
--sidebar-ring: 214 84% 42%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 223 32% 7%;
|
||||
--foreground: 216 36% 93%;
|
||||
--background: 222 33% 8%;
|
||||
--foreground: 210 25% 92%;
|
||||
|
||||
--card: 221 29% 11%;
|
||||
--card-foreground: 216 36% 93%;
|
||||
--popover: 221 29% 11%;
|
||||
--popover-foreground: 216 36% 93%;
|
||||
--card: 222 28% 11%;
|
||||
--card-foreground: 210 25% 92%;
|
||||
--popover: 222 28% 11%;
|
||||
--popover-foreground: 210 25% 92%;
|
||||
|
||||
--primary: 10 80% 56%;
|
||||
--primary-foreground: 216 36% 93%;
|
||||
--secondary: 221 23% 18%;
|
||||
--secondary-foreground: 216 36% 93%;
|
||||
--muted: 221 21% 20%;
|
||||
--muted-foreground: 218 17% 76%;
|
||||
--accent: 44 92% 52%;
|
||||
--accent-foreground: 221 29% 11%;
|
||||
--destructive: 0 72% 50%;
|
||||
--destructive-foreground: 216 36% 93%;
|
||||
--primary: 205 88% 64%;
|
||||
--primary-foreground: 222 33% 8%;
|
||||
--secondary: 222 18% 18%;
|
||||
--secondary-foreground: 210 25% 92%;
|
||||
--muted: 222 18% 16%;
|
||||
--muted-foreground: 215 16% 72%;
|
||||
--accent: 190 76% 57%;
|
||||
--accent-foreground: 222 33% 8%;
|
||||
--destructive: 0 72% 58%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--surface: 221 29% 11%;
|
||||
--surface-soft: 220 24% 15%;
|
||||
--surface-elevated: 220 21% 20%;
|
||||
--border: 221 21% 24%;
|
||||
--input: 221 20% 27%;
|
||||
--ring: 10 80% 56%;
|
||||
--surface-1: 222 28% 11%;
|
||||
--surface-2: 222 22% 14%;
|
||||
--surface-3: 222 18% 17%;
|
||||
--surface-inverse: 210 40% 98%;
|
||||
--surface-inverse-foreground: 222 33% 8%;
|
||||
|
||||
--shadow-xs: 0 1px 2px 0 hsl(220 40% 2% / 0.5);
|
||||
--shadow-sm: 0 8px 20px -12px hsl(220 40% 2% / 0.65);
|
||||
--shadow-md: 0 18px 36px -20px hsl(220 40% 2% / 0.75);
|
||||
--shadow-lg: 0 28px 60px -28px hsl(220 40% 2% / 0.85);
|
||||
--shadow-card: 0 16px 34px -24px hsl(220 40% 2% / 0.8);
|
||||
--shadow-sidebar: inset 0 1px 0 0 hsl(216 36% 93% / 0.05);
|
||||
--border: 221 18% 21%;
|
||||
--border-strong: 221 18% 28%;
|
||||
--input: 221 18% 26%;
|
||||
--ring: 205 88% 64%;
|
||||
|
||||
--sidebar-background: 223 30% 9%;
|
||||
--sidebar-foreground: 216 28% 86%;
|
||||
--sidebar-primary: 10 80% 56%;
|
||||
--sidebar-primary-foreground: 216 36% 93%;
|
||||
--sidebar-accent: 221 23% 17%;
|
||||
--sidebar-accent-foreground: 216 36% 93%;
|
||||
--sidebar-border: 221 20% 21%;
|
||||
--sidebar-ring: 10 80% 56%;
|
||||
--status-success: 145 68% 66%;
|
||||
--status-success-soft: 145 36% 18%;
|
||||
--status-warning: 42 96% 66%;
|
||||
--status-warning-soft: 35 40% 18%;
|
||||
|
||||
--brand-primary: 205 88% 64%;
|
||||
--brand-secondary: 190 76% 57%;
|
||||
|
||||
--shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
|
||||
--shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
|
||||
--shadow-md: 0 24px 48px -28px hsl(220 50% 2% / 0.58);
|
||||
--shadow-lg: 0 34px 78px -34px hsl(220 50% 2% / 0.72);
|
||||
--shadow-card: 0 20px 52px -28px hsl(220 50% 2% / 0.55);
|
||||
--shadow-panel: 0 22px 56px -32px hsl(220 50% 2% / 0.52);
|
||||
--shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);
|
||||
|
||||
--sidebar-background: 222 25% 10%;
|
||||
--sidebar-foreground: 210 18% 86%;
|
||||
--sidebar-primary: 205 88% 64%;
|
||||
--sidebar-primary-foreground: 222 33% 8%;
|
||||
--sidebar-accent: 221 18% 18%;
|
||||
--sidebar-accent-foreground: 210 25% 92%;
|
||||
--sidebar-border: 221 18% 22%;
|
||||
--sidebar-ring: 205 88% 64%;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -114,132 +147,28 @@ html.dark {
|
||||
body {
|
||||
@apply min-h-screen bg-background text-foreground antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--background));
|
||||
a {
|
||||
@apply transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: hsl(var(--primary) / 0.82);
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: hsl(var(--primary) / 0.2);
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-app {
|
||||
background-color: hsl(var(--background));
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.bg-surface {
|
||||
background-color: hsl(var(--surface));
|
||||
}
|
||||
|
||||
.bg-surface-soft {
|
||||
background-color: hsl(var(--surface-soft));
|
||||
}
|
||||
|
||||
.bg-surface-elevated {
|
||||
background-color: hsl(var(--surface-elevated));
|
||||
}
|
||||
|
||||
.bg-inverse {
|
||||
background-color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.text-fg {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.text-muted-strong {
|
||||
color: hsl(var(--foreground) / 0.86);
|
||||
}
|
||||
|
||||
.text-subtle {
|
||||
color: hsl(var(--muted-foreground) / 0.88);
|
||||
}
|
||||
|
||||
.text-inverse {
|
||||
color: hsl(var(--background));
|
||||
}
|
||||
|
||||
.border-default {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
.border-strong {
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: hsl(142 70% 45% / 0.15);
|
||||
color: hsl(142 72% 34%);
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: hsl(38 92% 56% / 0.17);
|
||||
color: hsl(33 92% 34%);
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background-color: hsl(var(--destructive) / 0.18);
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.hover-surface-soft:hover {
|
||||
background-color: hsl(var(--surface-soft));
|
||||
}
|
||||
|
||||
.hover-fg:hover {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.group:hover .group-hover-fg {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.group:hover .group-hover-border-strong {
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border: 1px solid hsl(var(--input));
|
||||
color: hsl(var(--foreground) / 0.88);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: hsl(var(--surface-soft));
|
||||
}
|
||||
|
||||
.field-surface {
|
||||
border: 1px solid hsl(var(--input));
|
||||
background-color: hsl(var(--surface));
|
||||
color: hsl(var(--foreground));
|
||||
border-radius: var(--radius-input);
|
||||
}
|
||||
|
||||
.field-surface:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
|
||||
.brand-gradient-text {
|
||||
background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--accent)));
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
hsl(var(--brand-primary)),
|
||||
hsl(var(--brand-secondary))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
@@ -247,35 +176,15 @@ body {
|
||||
|
||||
.brand-glow {
|
||||
box-shadow:
|
||||
0 10px 40px -16px hsl(var(--primary) / 0.45),
|
||||
0 8px 32px -18px hsl(var(--accent) / 0.45);
|
||||
0 22px 60px -34px hsl(var(--brand-primary) / 0.38),
|
||||
0 18px 44px -32px hsl(var(--brand-secondary) / 0.28);
|
||||
}
|
||||
|
||||
.float-slow {
|
||||
animation: float-slow 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-medium {
|
||||
animation: float-medium 7s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) translateX(10px) scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px) translateX(-8px) scale(1.03);
|
||||
.surface-grid {
|
||||
background-image:
|
||||
linear-gradient(hsl(var(--border) / 0.45) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--border) / 0.45) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user