mirror of
https://github.com/lumina-rocks/lumina.git
synced 2026-04-07 14:06:56 +02:00
d1802df8fc
* feat: add purple light and dark themes to theme selection * feat: add vintage light and dark theme options to DropdownThemeMode * feat: add vintage light and dark theme options to theme selection * add even more designs --------- Co-authored-by: highperfocused <highperfocused@pm.me>
484 lines
20 KiB
CSS
484 lines
20 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 224 71.4% 4.1%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 224 71.4% 4.1%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 224 71.4% 4.1%;
|
|
--primary: 262.1 83.3% 57.8%;
|
|
--primary-foreground: 210 20% 98%;
|
|
--secondary: 220 14.3% 95.9%;
|
|
--secondary-foreground: 220.9 39.3% 11%;
|
|
--muted: 220 14.3% 95.9%;
|
|
--muted-foreground: 220 8.9% 46.1%;
|
|
--accent: 220 14.3% 95.9%;
|
|
--accent-foreground: 220.9 39.3% 11%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 20% 98%;
|
|
--border: 220 13% 91%;
|
|
--input: 220 13% 91%;
|
|
--ring: 262.1 83.3% 57.8%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 224 71.4% 4.1%;
|
|
--foreground: 210 20% 98%;
|
|
--card: 224 71.4% 4.1%;
|
|
--card-foreground: 210 20% 98%;
|
|
--popover: 224 71.4% 4.1%;
|
|
--popover-foreground: 210 20% 98%;
|
|
--primary: 263.4 70% 50.4%;
|
|
--primary-foreground: 210 20% 98%;
|
|
--secondary: 215 27.9% 16.9%;
|
|
--secondary-foreground: 210 20% 98%;
|
|
--muted: 215 27.9% 16.9%;
|
|
--muted-foreground: 217.9 10.6% 64.9%;
|
|
--accent: 215 27.9% 16.9%;
|
|
--accent-foreground: 210 20% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 20% 98%;
|
|
--border: 215 27.9% 16.9%;
|
|
--input: 215 27.9% 16.9%;
|
|
--ring: 263.4 70% 50.4%;
|
|
}
|
|
|
|
.purple-light {
|
|
--background: 260 23.0769% 97.4510%;
|
|
--foreground: 243.1579 13.6691% 27.2549%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 243.1579 13.6691% 27.2549%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 243.1579 13.6691% 27.2549%;
|
|
--primary: 260.4000 22.9358% 57.2549%;
|
|
--primary-foreground: 260 23.0769% 97.4510%;
|
|
--secondary: 258.9474 33.3333% 88.8235%;
|
|
--secondary-foreground: 243.1579 13.6691% 27.2549%;
|
|
--muted: 258.0000 15.1515% 87.0588%;
|
|
--muted-foreground: 247.5000 10.3448% 45.4902%;
|
|
--accent: 342.4615 56.5217% 77.4510%;
|
|
--accent-foreground: 343.4483 23.9669% 23.7255%;
|
|
--destructive: 0 62.1891% 60.5882%;
|
|
--destructive-foreground: 260 23.0769% 97.4510%;
|
|
--border: 258.7500 17.3913% 81.9608%;
|
|
--input: 260.0000 23.0769% 92.3529%;
|
|
--ring: 260.4000 22.9358% 57.2549%;
|
|
--chart-1: 260.4000 22.9358% 57.2549%;
|
|
--chart-2: 342.4615 56.5217% 77.4510%;
|
|
--chart-3: 158.7692 31.4010% 59.4118%;
|
|
--chart-4: 35.7576 76.7442% 74.7059%;
|
|
--chart-5: 215.8209 54.4715% 75.8824%;
|
|
--sidebar: 260.0000 23.0769% 94.9020%;
|
|
--sidebar-foreground: 243.1579 13.6691% 27.2549%;
|
|
--sidebar-primary: 260.4000 22.9358% 57.2549%;
|
|
--sidebar-primary-foreground: 260 23.0769% 97.4510%;
|
|
--sidebar-accent: 342.4615 56.5217% 77.4510%;
|
|
--sidebar-accent-foreground: 343.4483 23.9669% 23.7255%;
|
|
--sidebar-border: 261.4286 18.4211% 85.0980%;
|
|
--sidebar-ring: 260.4000 22.9358% 57.2549%;
|
|
--font-sans: Geist, sans-serif;
|
|
--font-serif: "Lora", Georgia, serif;
|
|
--font-mono: "Fira Code", "Courier New", monospace;
|
|
--radius: 0.5rem;
|
|
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
|
|
}
|
|
|
|
.purple-dark {
|
|
--background: 250.9091 18.6441% 11.5686%;
|
|
--foreground: 250.0000 36.0000% 90.1961%;
|
|
--card: 251.2500 20% 15.6863%;
|
|
--card-foreground: 250.0000 36.0000% 90.1961%;
|
|
--popover: 251.2500 20% 15.6863%;
|
|
--popover-foreground: 250.0000 36.0000% 90.1961%;
|
|
--primary: 263.0769 32.5000% 68.6275%;
|
|
--primary-foreground: 250.9091 18.6441% 11.5686%;
|
|
--secondary: 254.4828 14.8718% 38.2353%;
|
|
--secondary-foreground: 250.0000 36.0000% 90.1961%;
|
|
--muted: 254.1176 20.9877% 15.8824%;
|
|
--muted-foreground: 258.9474 10.3825% 64.1176%;
|
|
--accent: 271.7647 15.5963% 21.3725%;
|
|
--accent-foreground: 345.5172 69.0476% 83.5294%;
|
|
--destructive: 0 68.6747% 67.4510%;
|
|
--destructive-foreground: 250.9091 18.6441% 11.5686%;
|
|
--border: 252 18.5185% 21.1765%;
|
|
--input: 249.4737 19.5876% 19.0196%;
|
|
--ring: 263.0769 32.5000% 68.6275%;
|
|
--chart-1: 263.0769 32.5000% 68.6275%;
|
|
--chart-2: 345.5172 69.0476% 83.5294%;
|
|
--chart-3: 158.7692 31.4010% 59.4118%;
|
|
--chart-4: 35.7576 76.7442% 74.7059%;
|
|
--chart-5: 215.8209 54.4715% 75.8824%;
|
|
--sidebar: 252 20.0000% 9.8039%;
|
|
--sidebar-foreground: 250.0000 36.0000% 90.1961%;
|
|
--sidebar-primary: 263.0769 32.5000% 68.6275%;
|
|
--sidebar-primary-foreground: 250.9091 18.6441% 11.5686%;
|
|
--sidebar-accent: 271.7647 15.5963% 21.3725%;
|
|
--sidebar-accent-foreground: 345.5172 69.0476% 83.5294%;
|
|
--sidebar-border: 249.4737 19.5876% 19.0196%;
|
|
--sidebar-ring: 263.0769 32.5000% 68.6275%;
|
|
--font-sans: Geist, sans-serif;
|
|
--font-serif: "Lora", Georgia, serif;
|
|
--font-mono: "Fira Code", "Courier New", monospace;
|
|
--radius: 0.5rem;
|
|
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
|
|
}
|
|
|
|
.vintage-light {
|
|
--background: 44.0000 42.8571% 93.1373%;
|
|
--foreground: 28.5714 16.5354% 24.9020%;
|
|
--card: 42.0000 100.0000% 98.0392%;
|
|
--card-foreground: 28.5714 16.5354% 24.9020%;
|
|
--popover: 42.0000 100.0000% 98.0392%;
|
|
--popover-foreground: 28.5714 16.5354% 24.9020%;
|
|
--primary: 30.0000 33.8710% 48.6275%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 40.6452 34.8315% 82.5490%;
|
|
--secondary-foreground: 28.9655 18.7097% 30.3922%;
|
|
--muted: 39 34.4828% 88.6275%;
|
|
--muted-foreground: 32.3077 18.4834% 41.3725%;
|
|
--accent: 42.8571 32.8125% 74.9020%;
|
|
--accent-foreground: 28.5714 16.5354% 24.9020%;
|
|
--destructive: 9.8438 54.7009% 45.8824%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 40.0000 31.4286% 79.4118%;
|
|
--input: 40.0000 31.4286% 79.4118%;
|
|
--ring: 30.0000 33.8710% 48.6275%;
|
|
--chart-1: 30.0000 33.8710% 48.6275%;
|
|
--chart-2: 31.3846 29.9539% 42.5490%;
|
|
--chart-3: 33.6842 32.9480% 33.9216%;
|
|
--chart-4: 29.1176 30.9091% 56.8627%;
|
|
--chart-5: 30 33.6842% 62.7451%;
|
|
--sidebar: 39 34.4828% 88.6275%;
|
|
--sidebar-foreground: 28.5714 16.5354% 24.9020%;
|
|
--sidebar-primary: 30.0000 33.8710% 48.6275%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 42.8571 32.8125% 74.9020%;
|
|
--sidebar-accent-foreground: 28.5714 16.5354% 24.9020%;
|
|
--sidebar-border: 40.0000 31.4286% 79.4118%;
|
|
--sidebar-ring: 30.0000 33.8710% 48.6275%;
|
|
--font-sans: Libre Baskerville, serif;
|
|
--font-serif: Lora, serif;
|
|
--font-mono: IBM Plex Mono, monospace;
|
|
--radius: 0.25rem;
|
|
--shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
|
|
--shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
|
|
--shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30);
|
|
}
|
|
|
|
.vintage-dark {
|
|
--background: 25.0000 15.3846% 15.2941%;
|
|
--foreground: 39 34.4828% 88.6275%;
|
|
--card: 25.7143 13.7255% 20%;
|
|
--card-foreground: 39 34.4828% 88.6275%;
|
|
--popover: 25.7143 13.7255% 20%;
|
|
--popover-foreground: 39 34.4828% 88.6275%;
|
|
--primary: 30 33.6842% 62.7451%;
|
|
--primary-foreground: 25.0000 15.3846% 15.2941%;
|
|
--secondary: 24.7059 12.9771% 25.6863%;
|
|
--secondary-foreground: 39 34.4828% 88.6275%;
|
|
--muted: 25.7143 13.7255% 20%;
|
|
--muted-foreground: 38.4000 17.7305% 72.3529%;
|
|
--accent: 24.4444 17.8808% 29.6078%;
|
|
--accent-foreground: 39 34.4828% 88.6275%;
|
|
--destructive: 9.8438 54.7009% 45.8824%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 24.7059 12.9771% 25.6863%;
|
|
--input: 24.7059 12.9771% 25.6863%;
|
|
--ring: 30 33.6842% 62.7451%;
|
|
--chart-1: 30 33.6842% 62.7451%;
|
|
--chart-2: 29.1176 30.9091% 56.8627%;
|
|
--chart-3: 30.0000 33.8710% 48.6275%;
|
|
--chart-4: 31.3846 29.9539% 42.5490%;
|
|
--chart-5: 33.6842 32.9480% 33.9216%;
|
|
--sidebar: 25.0000 15.3846% 15.2941%;
|
|
--sidebar-foreground: 39 34.4828% 88.6275%;
|
|
--sidebar-primary: 30 33.6842% 62.7451%;
|
|
--sidebar-primary-foreground: 25.0000 15.3846% 15.2941%;
|
|
--sidebar-accent: 24.4444 17.8808% 29.6078%;
|
|
--sidebar-accent-foreground: 39 34.4828% 88.6275%;
|
|
--sidebar-border: 24.7059 12.9771% 25.6863%;
|
|
--sidebar-ring: 30 33.6842% 62.7451%;
|
|
--font-sans: Libre Baskerville, serif;
|
|
--font-serif: Lora, serif;
|
|
--font-mono: IBM Plex Mono, monospace;
|
|
--radius: 0.25rem;
|
|
--shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
|
|
--shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
|
|
--shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12);
|
|
--shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30);
|
|
}
|
|
|
|
.neo-brutalism-light {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 0%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 0%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 0%;
|
|
--primary: 0 100% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 60 100% 50%;
|
|
--secondary-foreground: 0 0% 0%;
|
|
--muted: 0 0% 94.1176%;
|
|
--muted-foreground: 0 0% 20%;
|
|
--accent: 216 100% 50%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 0% 0%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 0%;
|
|
--input: 0 0% 0%;
|
|
--ring: 0 100% 60%;
|
|
--chart-1: 0 100% 60%;
|
|
--chart-2: 60 100% 50%;
|
|
--chart-3: 216 100% 50%;
|
|
--chart-4: 120 100% 40%;
|
|
--chart-5: 300 100% 40%;
|
|
--sidebar: 0 0% 94.1176%;
|
|
--sidebar-foreground: 0 0% 0%;
|
|
--sidebar-primary: 0 100% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 216 100% 50%;
|
|
--sidebar-accent-foreground: 0 0% 100%;
|
|
--sidebar-border: 0 0% 0%;
|
|
--sidebar-ring: 0 100% 60%;
|
|
--font-sans: DM Sans, sans-serif;
|
|
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
--font-mono: Space Mono, monospace;
|
|
--radius: 0px;
|
|
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
|
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
|
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
|
}
|
|
|
|
.neo-brutalism-dark {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 100%;
|
|
--card: 0 0% 20%;
|
|
--card-foreground: 0 0% 100%;
|
|
--popover: 0 0% 20%;
|
|
--popover-foreground: 0 0% 100%;
|
|
--primary: 0 100.0000% 70%;
|
|
--primary-foreground: 0 0% 0%;
|
|
--secondary: 60 100% 60%;
|
|
--secondary-foreground: 0 0% 0%;
|
|
--muted: 0 0% 20%;
|
|
--muted-foreground: 0 0% 80%;
|
|
--accent: 210 100% 60%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--destructive: 0 0% 100%;
|
|
--destructive-foreground: 0 0% 0%;
|
|
--border: 0 0% 100%;
|
|
--input: 0 0% 100%;
|
|
--ring: 0 100.0000% 70%;
|
|
--chart-1: 0 100.0000% 70%;
|
|
--chart-2: 60 100% 60%;
|
|
--chart-3: 210 100% 60%;
|
|
--chart-4: 120 60.0000% 50%;
|
|
--chart-5: 300 60.0000% 50%;
|
|
--sidebar: 0 0% 0%;
|
|
--sidebar-foreground: 0 0% 100%;
|
|
--sidebar-primary: 0 100.0000% 70%;
|
|
--sidebar-primary-foreground: 0 0% 0%;
|
|
--sidebar-accent: 210 100% 60%;
|
|
--sidebar-accent-foreground: 0 0% 0%;
|
|
--sidebar-border: 0 0% 100%;
|
|
--sidebar-ring: 0 100.0000% 70%;
|
|
--font-sans: DM Sans, sans-serif;
|
|
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
--font-mono: Space Mono, monospace;
|
|
--radius: 0px;
|
|
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
|
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
|
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
|
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
|
}
|
|
|
|
.nature-light {
|
|
--background: 37.5000 36.3636% 95.6863%;
|
|
--foreground: 8.8889 27.8351% 19.0196%;
|
|
--card: 37.5000 36.3636% 95.6863%;
|
|
--card-foreground: 8.8889 27.8351% 19.0196%;
|
|
--popover: 37.5000 36.3636% 95.6863%;
|
|
--popover-foreground: 8.8889 27.8351% 19.0196%;
|
|
--primary: 123.0380 46.1988% 33.5294%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 124.6154 39.3939% 93.5294%;
|
|
--secondary-foreground: 124.4776 55.3719% 23.7255%;
|
|
--muted: 33.7500 34.7826% 90.9804%;
|
|
--muted-foreground: 15.0000 25.2874% 34.1176%;
|
|
--accent: 122 37.5000% 84.3137%;
|
|
--accent-foreground: 124.4776 55.3719% 23.7255%;
|
|
--destructive: 0 66.3866% 46.6667%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 33.9130 27.0588% 83.3333%;
|
|
--input: 33.9130 27.0588% 83.3333%;
|
|
--ring: 123.0380 46.1988% 33.5294%;
|
|
--chart-1: 122.4242 39.4422% 49.2157%;
|
|
--chart-2: 122.7907 43.4343% 38.8235%;
|
|
--chart-3: 123.0380 46.1988% 33.5294%;
|
|
--chart-4: 124.4776 55.3719% 23.7255%;
|
|
--chart-5: 125.7143 51.2195% 8.0392%;
|
|
--sidebar: 33.7500 34.7826% 90.9804%;
|
|
--sidebar-foreground: 8.8889 27.8351% 19.0196%;
|
|
--sidebar-primary: 123.0380 46.1988% 33.5294%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 122 37.5000% 84.3137%;
|
|
--sidebar-accent-foreground: 124.4776 55.3719% 23.7255%;
|
|
--sidebar-border: 33.9130 27.0588% 83.3333%;
|
|
--sidebar-ring: 123.0380 46.1988% 33.5294%;
|
|
--font-sans: Montserrat, sans-serif;
|
|
--font-serif: Merriweather, serif;
|
|
--font-mono: Source Code Pro, monospace;
|
|
--radius: 0.5rem;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
}
|
|
|
|
.nature-dark {
|
|
--background: 132.8571 20% 13.7255%;
|
|
--foreground: 32.7273 26.8293% 91.9608%;
|
|
--card: 124.6154 12.6214% 20.1961%;
|
|
--card-foreground: 32.7273 26.8293% 91.9608%;
|
|
--popover: 124.6154 12.6214% 20.1961%;
|
|
--popover-foreground: 32.7273 26.8293% 91.9608%;
|
|
--primary: 122.4242 39.4422% 49.2157%;
|
|
--primary-foreground: 125.7143 51.2195% 8.0392%;
|
|
--secondary: 115.3846 9.6296% 26.4706%;
|
|
--secondary-foreground: 114.0000 13.8889% 85.8824%;
|
|
--muted: 124.6154 12.6214% 20.1961%;
|
|
--muted-foreground: 34.7368 19.1919% 80.5882%;
|
|
--accent: 122.7907 43.4343% 38.8235%;
|
|
--accent-foreground: 32.7273 26.8293% 91.9608%;
|
|
--destructive: 0 66.3866% 46.6667%;
|
|
--destructive-foreground: 32.7273 26.8293% 91.9608%;
|
|
--border: 115.3846 9.6296% 26.4706%;
|
|
--input: 115.3846 9.6296% 26.4706%;
|
|
--ring: 122.4242 39.4422% 49.2157%;
|
|
--chart-1: 122.5714 38.4615% 64.3137%;
|
|
--chart-2: 122.8235 38.4615% 56.6667%;
|
|
--chart-3: 122.4242 39.4422% 49.2157%;
|
|
--chart-4: 122.5806 40.9692% 44.5098%;
|
|
--chart-5: 122.7907 43.4343% 38.8235%;
|
|
--sidebar: 132.8571 20% 13.7255%;
|
|
--sidebar-foreground: 32.7273 26.8293% 91.9608%;
|
|
--sidebar-primary: 122.4242 39.4422% 49.2157%;
|
|
--sidebar-primary-foreground: 125.7143 51.2195% 8.0392%;
|
|
--sidebar-accent: 122.7907 43.4343% 38.8235%;
|
|
--sidebar-accent-foreground: 32.7273 26.8293% 91.9608%;
|
|
--sidebar-border: 115.3846 9.6296% 26.4706%;
|
|
--sidebar-ring: 122.4242 39.4422% 49.2157%;
|
|
--font-sans: Montserrat, sans-serif;
|
|
--font-serif: Merriweather, serif;
|
|
--font-mono: Source Code Pro, monospace;
|
|
--radius: 0.5rem;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
}
|
|
}
|
|
|
|
/* @layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
--primary: 142.1 76.2% 36.3%;
|
|
--primary-foreground: 355.7 100% 97.3%;
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 142.1 76.2% 36.3%;
|
|
--radius: 0.3rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 20 14.3% 4.1%;
|
|
--foreground: 0 0% 95%;
|
|
--card: 24 9.8% 10%;
|
|
--card-foreground: 0 0% 95%;
|
|
--popover: 0 0% 9%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--primary: 142.1 70.6% 45.3%;
|
|
--primary-foreground: 144.9 80.4% 10%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 15%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 12 6.5% 15.1%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 85.7% 97.3%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 142.4 71.8% 29.2%;
|
|
}
|
|
} */
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
} |