highperfocused/zelo-news
1
0
Fork 0
mirror of https://github.com/mroxso/zelo-news.git synced 2026-06-04 09:31:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update color variables and improve styling in index.css (#63)

Browse Source 
Co-authored-by: highperfocused <highperfocused@pm.me>
This commit is contained in:
mroxso
2026-03-04 19:11:32 +01:00
committed by GitHub
parent a7f8e91ad6
commit e3020fb0be
1 changed files with 120 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/index.css
View File

@@ -3,112 +3,128 @@
@tailwind utilities;
@layer base {
:root {
--background: 240 100.0000% 98.0392%;
--foreground: 240 27.5862% 22.7451%;
--card: 0 0% 100%;
--card-foreground: 240 27.5862% 22.7451%;
--popover: 0 0% 100%;
--popover-foreground: 240 27.5862% 22.7451%;
--primary: 251.9008 55.7604% 57.4510%;
--primary-foreground: 0 0% 100%;
--secondary: 249.3750 100% 93.7255%;
--secondary-foreground: 249.3750 33.3333% 37.6471%;
--muted: 240 50.0000% 96.0784%;
--muted-foreground: 240 12.1951% 48.2353%;
--accent: 218.4615 100.0000% 92.3529%;
--accent-foreground: 240 27.5862% 22.7451%;
--destructive: 350.1754 100% 66.4706%;
--destructive-foreground: 0 0% 100%;
--border: 240 34.7826% 90.9804%;
--input: 240 34.7826% 90.9804%;
--ring: 251.9008 55.7604% 57.4510%;
--chart-1: 251.9008 55.7604% 57.4510%;
--chart-2: 249.6429 94.9153% 76.8627%;
--chart-3: 239.1781 82.0225% 65.0980%;
--chart-4: 243.1579 93.0070% 71.9608%;
--chart-5: 243.6522 47.3251% 47.6471%;
--sidebar: 240 50.0000% 96.0784%;
--sidebar-foreground: 240 27.5862% 22.7451%;
--sidebar-primary: 251.9008 55.7604% 57.4510%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 218.4615 100.0000% 92.3529%;
--sidebar-accent-foreground: 240 27.5862% 22.7451%;
--sidebar-border: 240 34.7826% 90.9804%;
--sidebar-ring: 251.9008 55.7604% 57.4510%;
--font-sans: Inter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.5rem;
--shadow-x: 0px;
--shadow-y: 4px;
--shadow-blur: 10px;
--shadow-spread: 0px;
--shadow-opacity: 0.12;
--shadow-color: hsl(240 30% 25%);
--shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
--shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
--shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
--shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
--shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
--shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
--shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
--shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
--tracking-normal: 0em;
--spacing: 0.25rem;
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 97.6471%;
--foreground: 0 0% 12.5490%;
--card: 0 0% 98.8235%;
--card-foreground: 0 0% 12.5490%;
--popover: 0 0% 98.8235%;
--popover-foreground: 0 0% 12.5490%;
--primary: 16.6667 21.9512% 32.1569%;
--primary-foreground: 0 0% 100%;
--secondary: 34.0541 100.0000% 85.4902%;
--secondary-foreground: 16.2712 50.4274% 22.9412%;
--muted: 0 0% 93.7255%;
--muted-foreground: 0 0% 39.2157%;
--accent: 0 0% 90.9804%;
--accent-foreground: 0 0% 12.5490%;
--destructive: 10.1639 77.8723% 53.9216%;
--destructive-foreground: 0 0% 100%;
--border: 0 0% 84.7059%;
--input: 0 0% 84.7059%;
--ring: 16.6667 21.9512% 32.1569%;
--chart-1: 16.6667 21.9512% 32.1569%;
--chart-2: 34.0541 100.0000% 85.4902%;
--chart-3: 0 0% 90.9804%;
--chart-4: 34.5763 100.0000% 88.4314%;
--chart-5: 16.5000 24.3902% 32.1569%;
--sidebar: 0 0% 98.4314%;
--sidebar-foreground: 0 0% 14.5098%;
--sidebar-primary: 0 0% 20.3922%;
--sidebar-primary-foreground: 0 0% 98.4314%;
--sidebar-accent: 0 0% 96.8627%;
--sidebar-accent-foreground: 0 0% 20.3922%;
--sidebar-border: 0 0% 92.1569%;
--sidebar-ring: 0 0% 70.9804%;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-x: 0;
--shadow-y: 1px;
--shadow-blur: 3px;
--shadow-spread: 0px;
--shadow-opacity: 0.1;
--shadow-color: oklch(0 0 0);
--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);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: 0 0% 6.6667%;
--foreground: 0 0% 93.3333%;
--card: 0 0% 9.8039%;
--card-foreground: 0 0% 93.3333%;
--popover: 0 0% 9.8039%;
--popover-foreground: 0 0% 93.3333%;
--primary: 29.5082 100% 88.0392%;
--primary-foreground: 183.1579 54.2857% 6.8627%;
--secondary: 28.2353 17.5258% 19.0196%;
--secondary-foreground: 29.5082 100% 88.0392%;
--muted: 0 0% 13.3333%;
--muted-foreground: 0 0% 70.5882%;
--accent: 0 0% 16.4706%;
--accent-foreground: 0 0% 93.3333%;
--destructive: 10.1639 77.8723% 53.9216%;
--destructive-foreground: 0 0% 100%;
--border: 45 14.2857% 10.9804%;
--input: 0 0% 28.2353%;
--ring: 29.5082 100% 88.0392%;
--chart-1: 29.5082 100% 88.0392%;
--chart-2: 28.2353 17.5258% 19.0196%;
--chart-3: 0 0% 16.4706%;
--chart-4: 30.0000 17.8571% 21.9608%;
--chart-5: 30 100% 87.8431%;
--sidebar: 240 5.8824% 10%;
--sidebar-foreground: 240 4.7619% 95.8824%;
--sidebar-primary: 224.2781 76.3265% 48.0392%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7037% 15.8824%;
--sidebar-accent-foreground: 240 4.7619% 95.8824%;
--sidebar-border: 240 3.7037% 15.8824%;
--sidebar-ring: 240 4.8780% 83.9216%;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-x: 0;
--shadow-y: 1px;
--shadow-blur: 3px;
--shadow-spread: 0px;
--shadow-opacity: 0.1;
--shadow-color: oklch(0 0 0);
--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);
}
}
.dark {
--background: 240 26.8293% 8.0392%;
--foreground: 240 48.7179% 92.3529%;
--card: 240 27.7778% 14.1176%;
--card-foreground: 240 48.7179% 92.3529%;
--popover: 240 27.7778% 14.1176%;
--popover-foreground: 240 48.7179% 92.3529%;
--primary: 251.2500 100% 78.0392%;
--primary-foreground: 240 26.8293% 8.0392%;
--secondary: 242.8571 32.8125% 25.0980%;
--secondary-foreground: 241.9672 100% 88.0392%;
--muted: 240 33.3333% 20%;
--muted-foreground: 240 20.2532% 69.0196%;
--accent: 240 33.3333% 28.2353%;
--accent-foreground: 240 48.7179% 92.3529%;
--destructive: 350.1754 100% 66.4706%;
--destructive-foreground: 0 0% 100%;
--border: 240 26.1538% 25.4902%;
--input: 240 26.1538% 25.4902%;
--ring: 251.2500 100% 78.0392%;
--chart-1: 251.2500 100% 78.0392%;
--chart-2: 230.4878 44.0860% 63.5294%;
--chart-3: 206.7123 89.0244% 67.8431%;
--chart-4: 174.2857 41.8327% 50.7843%;
--chart-5: 325.5224 100.0000% 73.7255%;
--sidebar: 240 27.7778% 14.1176%;
--sidebar-foreground: 240 48.7179% 92.3529%;
--sidebar-primary: 251.2500 100% 78.0392%;
--sidebar-primary-foreground: 240 26.8293% 8.0392%;
--sidebar-accent: 240 33.3333% 28.2353%;
--sidebar-accent-foreground: 240 48.7179% 92.3529%;
--sidebar-border: 240 26.1538% 25.4902%;
--sidebar-ring: 251.2500 100% 78.0392%;
--font-sans: Inter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.5rem;
--shadow-x: 0px;
--shadow-y: 4px;
--shadow-blur: 10px;
--shadow-spread: 0px;
--shadow-opacity: 0.12;
--shadow-color: hsl(240 30% 25%);
--shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
--shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
--shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
--shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
--shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
--shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
--shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
--shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
}