116 lines
2.8 KiB
CSS
116 lines
2.8 KiB
CSS
@import "@sun-typeface/suit/fonts/variable/woff2/SUIT-Variable.css";
|
|
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-border: var(--border);
|
|
--color-ring: var(--ring);
|
|
--font-sans: "SUIT Variable", "SUIT", system-ui, sans-serif;
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--light-background: hsl(340 40% 98%);
|
|
--light-foreground: hsl(315 21% 8%);
|
|
--light-muted: hsl(340 20% 95%);
|
|
--light-muted-foreground: hsl(340 10% 60%);
|
|
--light-border: hsl(340 25% 90%);
|
|
--light-ring: hsl(315 21% 8%);
|
|
|
|
--dark-background: hsl(315 21% 8%);
|
|
--dark-foreground: hsl(0 0% 98%);
|
|
--dark-muted: hsl(296 18% 15%);
|
|
--dark-muted-foreground: hsl(240 5% 68%);
|
|
--dark-border: hsl(296 18% 15%);
|
|
--dark-ring: hsl(240 4.9% 83.9%);
|
|
|
|
--background: var(--light-background);
|
|
--foreground: var(--light-foreground);
|
|
--muted: var(--light-muted);
|
|
--muted-foreground: var(--light-muted-foreground);
|
|
--border: var(--light-border);
|
|
--ring: var(--light-ring);
|
|
--radius: 0.625rem;
|
|
|
|
--scrollbar: hsla(340 10% 60% / 0.5);
|
|
--scrollbar-hover: hsla(340 10% 60% / 0.8);
|
|
--mono-filter: none;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--background: var(--dark-background);
|
|
--foreground: var(--dark-foreground);
|
|
--muted: var(--dark-muted);
|
|
--muted-foreground: var(--dark-muted-foreground);
|
|
--border: var(--dark-border);
|
|
--ring: var(--dark-ring);
|
|
--mono-filter: invert(1);
|
|
}
|
|
|
|
.light {
|
|
color-scheme: light;
|
|
--background: var(--light-background);
|
|
--foreground: var(--light-foreground);
|
|
--muted: var(--light-muted);
|
|
--muted-foreground: var(--light-muted-foreground);
|
|
--border: var(--light-border);
|
|
--ring: var(--light-ring);
|
|
--mono-filter: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not(.light) {
|
|
color-scheme: dark;
|
|
--background: var(--dark-background);
|
|
--foreground: var(--dark-foreground);
|
|
--muted: var(--dark-muted);
|
|
--muted-foreground: var(--dark-muted-foreground);
|
|
--border: var(--dark-border);
|
|
--ring: var(--dark-ring);
|
|
--mono-filter: invert(1);
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 64px;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
width: 19px;
|
|
height: 11px;
|
|
}
|
|
|
|
html::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
html::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar);
|
|
border: 5px solid var(--background);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
html::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-hover);
|
|
}
|
|
|
|
html {
|
|
scrollbar-color: var(--scrollbar) var(--background);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|