91 lines
1.7 KiB
CSS
91 lines
1.7 KiB
CSS
@import './fonts.css';
|
|
@import './animations.css';
|
|
@import './typography.css';
|
|
|
|
:root {
|
|
--color-primary: 12 76% 48%;
|
|
--color-accent: 36 80% 52%;
|
|
--color-bg: 20 8% 3.5%;
|
|
--color-surface: 20 8% 8%;
|
|
--color-surface-light: 20 8% 13%;
|
|
--color-text: 0 0% 100%;
|
|
--color-text-muted: 0 0% 100% / 0.6;
|
|
|
|
--header-height: 4rem;
|
|
--player-height: 5rem;
|
|
--sidebar-width: 280px;
|
|
|
|
--font-display: 'Syne', sans-serif;
|
|
--font-sans: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
background-color: hsl(var(--color-bg));
|
|
color: hsl(var(--color-text));
|
|
color-scheme: dark;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
::selection {
|
|
background-color: hsl(var(--color-primary) / 0.3);
|
|
color: white;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid hsl(var(--color-primary));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--color-text) / 0.15);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--color-text) / 0.25);
|
|
}
|
|
|
|
/* Page transitions */
|
|
.page-enter-active,
|
|
.page-leave-active {
|
|
transition: opacity 300ms var(--ease-out-expo),
|
|
transform 300ms var(--ease-out-expo);
|
|
}
|
|
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|