waveform/app/globals.css

61 lines
1.2 KiB
CSS

@import "tailwindcss";
@theme {
--color-background: hsl(220 13% 13%);
--color-surface: hsl(223 13% 10%);
--color-accent: hsl(235 86% 65%);
--color-accent-hover: hsl(235 86% 58%);
--color-destructive: hsl(0 84% 60%);
--color-foreground: hsl(210 11% 93%);
--color-muted: hsl(215 8% 55%);
--font-sans:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
@layer base {
body {
@apply bg-background text-foreground font-sans antialiased;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
@layer utilities {
* {
scrollbar-width: thin;
scrollbar-color: var(--color-surface) transparent;
}
*:hover {
scrollbar-color: var(--color-muted) transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-surface);
border-radius: 9999px;
transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-muted);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--color-accent);
}
}