mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-09-02 09:34:33 +02:00
80 lines
2.0 KiB
CSS
80 lines
2.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
/* HSL Colors for easy manipulation */
|
|
/* Dark Red / Brownish Tone */
|
|
--hue-primary: 0;
|
|
--hue-success: 150;
|
|
--hue-error: 10;
|
|
--hue-text: 30;
|
|
/* Warmer text */
|
|
|
|
--color-bg: hsl(30, 20%, 97%);
|
|
/* Warm paper-like bg */
|
|
--color-surface: hsl(0, 0%, 100%);
|
|
|
|
/* Neutral / Black Accent */
|
|
--color-primary: hsl(0, 0%, 20%);
|
|
--color-primary-dark: hsl(0, 0%, 0%);
|
|
|
|
--color-text-main: hsl(var(--hue-text), 10%, 20%);
|
|
--color-text-muted: hsl(var(--hue-text), 5%, 60%);
|
|
|
|
--color-success: hsl(var(--hue-success), 60%, 45%);
|
|
--color-error: hsl(var(--hue-error), 70%, 55%);
|
|
--color-warning: hsl(35, 90%, 50%);
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-2xl: 48px;
|
|
|
|
/* Typography */
|
|
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-family-serif: 'Playfair Display', serif;
|
|
|
|
--font-size-base: 16px;
|
|
--font-size-lg: 1.25rem;
|
|
--font-size-xl: 1.5rem;
|
|
--font-size-2xl: 2rem;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.02);
|
|
|
|
/* Radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 24px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg: hsl(30, 20%, 10%);
|
|
--color-surface: hsl(30, 20%, 15%);
|
|
--color-text-main: hsl(30, 10%, 90%);
|
|
--color-text-muted: hsl(30, 10%, 60%);
|
|
/* In dark mode, 'primary' (black) matches background too much, so we invert or use white */
|
|
--color-primary: hsl(0, 0%, 90%);
|
|
--color-primary-dark: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-family);
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text-main);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#root {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
} |