133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--background: 210 32% 95%;
|
|
--foreground: 214 35% 16%;
|
|
--surface: 210 35% 99%;
|
|
--surface-muted: 210 26% 92%;
|
|
--surface-raised: 0 0% 100%;
|
|
--border: 214 20% 82%;
|
|
--muted: 215 14% 43%;
|
|
--accent: 207 48% 34%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--warning: 38 58% 42%;
|
|
--chart-temperature: 207 48% 36%;
|
|
--chart-feels-like: 216 24% 48%;
|
|
--chart-rainfall: 202 38% 45%;
|
|
--chart-probability: 214 28% 38%;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--background: 214 37% 9%;
|
|
--foreground: 210 31% 94%;
|
|
--surface: 214 33% 13%;
|
|
--surface-muted: 215 27% 17%;
|
|
--surface-raised: 214 29% 16%;
|
|
--border: 214 19% 27%;
|
|
--muted: 214 15% 70%;
|
|
--accent: 204 44% 66%;
|
|
--accent-foreground: 214 37% 9%;
|
|
--warning: 39 64% 63%;
|
|
--chart-temperature: 204 44% 66%;
|
|
--chart-feels-like: 216 22% 73%;
|
|
--chart-rainfall: 202 42% 68%;
|
|
--chart-probability: 214 26% 76%;
|
|
}
|
|
|
|
* {
|
|
border-color: hsl(var(--border) / 0.72);
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.dark body {
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
button,
|
|
a,
|
|
input,
|
|
select {
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
@layer utilities {
|
|
.glass {
|
|
@apply border border-border/70 bg-surface/80 shadow-card backdrop-blur-xl dark:bg-surface/75;
|
|
}
|
|
|
|
.glass-subtle {
|
|
@apply border border-border/60 bg-surface-muted/65 backdrop-blur-xl dark:bg-surface-muted/55;
|
|
}
|
|
|
|
.surface-control {
|
|
@apply border border-border/70 bg-surface/80 shadow-soft backdrop-blur-xl dark:bg-surface-muted/70;
|
|
}
|
|
|
|
.section-kicker {
|
|
@apply text-xs font-semibold uppercase tracking-[0.16em] text-accent;
|
|
}
|
|
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.weather-scrollbar {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
.weather-scrollbar {
|
|
scrollbar-color: hsl(var(--accent) / 0.62) hsl(var(--border) / 0.32);
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
|
|
.weather-scrollbar::-webkit-scrollbar {
|
|
height: 0.65rem;
|
|
width: 0.65rem;
|
|
}
|
|
|
|
.weather-scrollbar::-webkit-scrollbar-track {
|
|
border-radius: 9999px;
|
|
background: hsl(var(--border) / 0.28);
|
|
}
|
|
|
|
.weather-scrollbar::-webkit-scrollbar-thumb {
|
|
border: 2px solid hsl(var(--surface) / 0.78);
|
|
border-radius: 9999px;
|
|
background: hsl(var(--accent) / 0.68);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.weather-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--accent) / 0.82);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dark .weather-scrollbar::-webkit-scrollbar-track {
|
|
background: hsl(var(--border) / 0.35);
|
|
}
|
|
|
|
.dark .weather-scrollbar::-webkit-scrollbar-thumb {
|
|
border-color: hsl(var(--surface) / 0.72);
|
|
background: hsl(var(--accent) / 0.7);
|
|
background-clip: padding-box;
|
|
}
|