mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-11-03 22:03:54 +01:00
b7c8187aef
- Filter (key/strings/fret window) collapsed behind Filter button with active-count badge; opens the unified TargetNoteControls panel - Display key signature moved into the filter panel (all modes) - Instrument + Tuning selects moved into Settings modal (Instrument section); removed from footer - Settings modal restructured into collapsible sections: Instrument, Appearance, Audio, Microphone - Phrase setup panel: removed cross-reference hint texts - PracticeFilter is now the single source of truth: removed mirrored keyTonic/keyMode/fretWindow fields from PhraseSettings - Dark mode: neutral gray with slight blue tint (was warm brown)
105 lines
2.8 KiB
CSS
105 lines
2.8 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
/* Native form controls (select dropdowns, checkboxes, number spinners,
|
|
range sliders) follow this instead of keeping black-on-black in dark mode */
|
|
color-scheme: light;
|
|
|
|
/* HSL Colors for easy manipulation */
|
|
/* Dark Red / Brownish Tone */
|
|
--hue-primary: 0;
|
|
--hue-success: 150;
|
|
--hue-error: 10;
|
|
--hue-text: 30;
|
|
/* Warmer text */
|
|
|
|
/* Default Light Theme */
|
|
--color-bg: hsl(30, 20%, 97%);
|
|
/* Warm paper-like bg */
|
|
--color-surface: hsl(0, 0%, 100%);
|
|
--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;
|
|
}
|
|
|
|
|
|
|
|
/* Auto Dark Mode (System Preference) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: dark;
|
|
--color-bg: hsl(220, 6%, 10%);
|
|
--color-surface: hsl(220, 6%, 15%);
|
|
--color-text-main: hsl(220, 4%, 90%);
|
|
--color-text-muted: hsl(220, 4%, 60%);
|
|
--color-primary: hsl(220, 4%, 90%);
|
|
--color-primary-dark: hsl(220, 4%, 100%);
|
|
}
|
|
}
|
|
|
|
/* Manual Dark Mode Override */
|
|
html[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--color-bg: hsl(220, 6%, 10%);
|
|
--color-surface: hsl(220, 6%, 15%);
|
|
--color-text-main: hsl(220, 4%, 90%);
|
|
--color-text-muted: hsl(220, 4%, 60%);
|
|
--color-primary: hsl(220, 4%, 90%);
|
|
--color-primary-dark: hsl(220, 4%, 100%);
|
|
}
|
|
|
|
/* Manual Light Mode Override */
|
|
html[data-theme="light"] {
|
|
--color-bg: hsl(30, 20%, 97%);
|
|
--color-surface: hsl(0, 0%, 100%);
|
|
--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%);
|
|
}
|
|
|
|
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;
|
|
} |