155 lines
No EOL
4 KiB
CSS
155 lines
No EOL
4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--primary-50: 327.3 73.3% 97.1%;
|
|
--primary-100: 325.7 77.8% 94.7%;
|
|
--primary-200: 325.9 84.6% 89.8%;
|
|
--primary-300: 327.4 87.1% 81.8%;
|
|
--primary-400: 328.6 85.5% 70.2%;
|
|
--primary-500: 330.4 81.2% 60.4%;
|
|
--primary-600: 333.3 71.4% 50.6%;
|
|
--primary-700: 335.1 77.6% 42%;
|
|
--primary-800: 335.8 74.4% 35.3%;
|
|
--primary-900: 335.9 69% 30.4%;
|
|
--primary-950: 336.2 83.9% 17.1%;
|
|
|
|
--secondary-50: 280 60% 98%;
|
|
--secondary-100: 282 55% 94%;
|
|
--secondary-200: 280 57% 92%;
|
|
--secondary-300: 282 53% 85%;
|
|
--secondary-400: 284 52% 75%;
|
|
--secondary-500: 284 49% 65%;
|
|
--secondary-600: 285 45% 56%;
|
|
--secondary-700: 285 39% 47%;
|
|
--secondary-800: 286 37% 39%;
|
|
--secondary-900: 287 36% 32%;
|
|
--secondary-950: 288 48% 21%;
|
|
|
|
--destructive-50: 0 85.7% 97.3%;
|
|
--destructive-100: 0 93.3% 94.1%;
|
|
--destructive-200: 0 96.3% 89.4%;
|
|
--destructive-300: 0 93.5% 81.8%;
|
|
--destructive-400: 0 90.6% 70.8%;
|
|
--destructive-500: 0 84.2% 60.2%;
|
|
--destructive-600: 0 72.2% 50.6%;
|
|
--destructive-700: 0 73.7% 41.8%;
|
|
--destructive-800: 0 70% 35.3%;
|
|
--destructive-900: 0 62.8% 30.6%;
|
|
--destructive-950: 0 74.7% 15.5%;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: var(--secondary-950);
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: var(--secondary-950);
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: var(--secondary-950);
|
|
|
|
--primary: var(--primary-600);
|
|
--primary-foreground: 0 0% 100%;
|
|
--primary-text: 335.1 77.6% 42%;
|
|
/* Primary text color with good contrast when standing alone, directly over background color */
|
|
|
|
--secondary: var(--secondary-100);
|
|
--secondary-foreground: var(--secondary-900);
|
|
|
|
--muted: var(--secondary-100);
|
|
--muted-foreground: var(--secondary-500);
|
|
|
|
--accent: var(--secondary-100);
|
|
--accent-foreground: var(--secondary-900);
|
|
|
|
--destructive: var(--destructive-500);
|
|
--destructive-foreground: var(--destructive-50);
|
|
|
|
--border: var(--secondary-200);
|
|
|
|
--input: var(--secondary-200);
|
|
|
|
--ring: var(--primary-600);
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
|
|
--selection: var(--primary-200);
|
|
--selection-foreground: var(--primary-950);
|
|
|
|
input:is(:-webkit-autofill, :autofill),
|
|
input:is(:-webkit-autofill, :autofill):hover,
|
|
input:is(:-webkit-autofill, :autofill):focus,
|
|
input:is(:-webkit-autofill, :autofill):active {
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: hsl(var(--foreground));
|
|
color: hsl(var(--foreground));
|
|
caret-color: hsl(var(--foreground));
|
|
box-shadow: inset 0 0 20px 20px hsl(var(--background) / 50%);
|
|
}
|
|
|
|
input:is(:-webkit-autofill, :autofill) {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
input:is(:-webkit-autofill, :autofill):focus {
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--background: 288 48% 11%;
|
|
--foreground: var(--secondary-50);
|
|
|
|
--card: 288 48% 16%;
|
|
--card-foreground: var(--secondary-50);
|
|
|
|
--popover: 288 48% 16%;
|
|
--popover-foreground: var(--secondary-50);
|
|
|
|
--primary: var(--primary-500);
|
|
--primary-foreground: 336 84% 12%;
|
|
--primary-text: 328.6 85.5% 70.2%;
|
|
/* Primary text color with good contrast when standing alone, directly over background color */
|
|
|
|
--secondary: 286 37% 29%;
|
|
--secondary-foreground: var(--secondary-50);
|
|
|
|
--muted: 286 37% 29%;
|
|
--muted-foreground: var(--secondary-400);
|
|
|
|
--accent: 286 37% 29%;
|
|
--accent-foreground: var(--secondary-50);
|
|
|
|
--destructive: var(--destructive-900);
|
|
--destructive-foreground: var(--destructive-50);
|
|
|
|
--border: var(--secondary-800);
|
|
|
|
--input: var(--secondary-800);
|
|
|
|
--ring: var(--primary-500);
|
|
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
} |