/* ODUO SongBook — global styles + light theme overrides. The app is built with hardcoded dark Tailwind utility classes throughout (no design-token abstraction). Rather than rewriting every component, the light theme is applied as a global override: when `.light-theme` is on , the most common dark-surface / light-text utility classes used across the app are swapped for light equivalents. Less common one-off colors may not be perfectly inverted everywhere — flag anything that looks off and it can be patched. */ html.light-theme { color-scheme: light; } /* Solid dark surfaces -> white */ .light-theme .bg-black, .light-theme .bg-\[\#050505\], .light-theme .bg-\[\#09090b\], .light-theme .bg-\[\#0c0c0e\], .light-theme .bg-\[\#121214\], .light-theme .bg-zinc-950, .light-theme .bg-zinc-900 { background-color: #ffffff !important; } .light-theme .bg-zinc-800 { background-color: #eef2f6 !important; } .light-theme .bg-zinc-600 { background-color: #e2e8f0 !important; } /* Translucent dark overlays -> translucent light equivalents */ .light-theme .bg-black\/20 { background-color: rgba(15, 23, 42, 0.05) !important; } .light-theme .bg-black\/40 { background-color: rgba(15, 23, 42, 0.07) !important; } .light-theme .bg-black\/60 { background-color: rgba(15, 23, 42, 0.09) !important; } .light-theme .bg-black\/70 { background-color: rgba(255, 255, 255, 0.85) !important; } .light-theme .bg-black\/80 { background-color: rgba(255, 255, 255, 0.9) !important; } .light-theme .bg-black\/90 { background-color: rgba(255, 255, 255, 0.95) !important; } .light-theme .bg-black\/95 { background-color: rgba(255, 255, 255, 0.97) !important; } .light-theme .bg-black\/98 { background-color: rgba(255, 255, 255, 0.98) !important; } .light-theme .bg-zinc-900\/10, .light-theme .bg-zinc-900\/20, .light-theme .bg-zinc-900\/30, .light-theme .bg-zinc-900\/40 { background-color: rgba(15, 23, 42, 0.04) !important; } .light-theme .bg-zinc-900\/50, .light-theme .bg-zinc-900\/60 { background-color: rgba(15, 23, 42, 0.06) !important; } .light-theme .bg-zinc-900\/80, .light-theme .bg-zinc-900\/90 { background-color: #f8fafc !important; } .light-theme .bg-zinc-800\/40, .light-theme .bg-zinc-800\/50 { background-color: rgba(15, 23, 42, 0.05) !important; } .light-theme .bg-zinc-950\/30 { background-color: rgba(15, 23, 42, 0.05) !important; } .light-theme .bg-zinc-950\/75 { background-color: rgba(255, 255, 255, 0.9) !important; } .light-theme .bg-white\/5 { background-color: rgba(15, 23, 42, 0.03) !important; } /* Text colors: light-on-dark -> dark-on-light */ .light-theme .text-white, .light-theme .text-zinc-100, .light-theme .text-zinc-200, .light-theme .text-zinc-300 { color: #0f172a !important; } .light-theme .text-zinc-400, .light-theme .text-zinc-500 { color: #475569 !important; } .light-theme .text-zinc-600, .light-theme .text-zinc-700 { color: #64748b !important; } .light-theme .text-zinc-800, .light-theme .text-zinc-900 { color: #94a3b8 !important; } /* Borders */ .light-theme .border-white\/5, .light-theme .border-white\/10 { border-color: rgba(15, 23, 42, 0.08) !important; } .light-theme .border-zinc-600, .light-theme .border-zinc-700, .light-theme .border-zinc-800, .light-theme .border-zinc-900 { border-color: #e2e8f0 !important; } /* Scrollbars */ .light-theme ::-webkit-scrollbar-track { background: #f1f5f9 !important; } .light-theme ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } /* Shadows read as pure black glow in dark mode; soften for light mode */ .light-theme [class*="shadow-"] { --tw-shadow-color: rgba(15, 23, 42, 0.12); } /* Main sidebar and Settings panel get a celeste outline matching the ODUO brand blue, in both themes (dark theme uses a dimmer tint to stay subtle against the near-black bg). */ .main-sidebar-shell, .settings-panel-shell { border-color: rgba(125, 211, 252, 0.4) !important; } .settings-panel-sidebar { border-right-color: rgba(125, 211, 252, 0.25) !important; } .light-theme .main-sidebar-shell, .light-theme .settings-panel-shell { border-color: #93c5fd !important; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15) !important; } .light-theme .settings-panel-sidebar { border-right-color: #bfdbfe !important; } /* --- Colored alert / status boxes ----------------------------------------------- These pair a very dark tinted background with light pastel text, readable on near-black. On light theme both halves need inverting or they become illegible (light text disappears against a now-light background). */ /* Blue */ .light-theme .bg-blue-950\/20, .light-theme .bg-blue-950\/30, .light-theme .bg-blue-950\/40, .light-theme .bg-blue-900\/40 { background-color: #eff6ff !important; } .light-theme .border-blue-900\/40, .light-theme .border-blue-900\/50, .light-theme .border-blue-800\/40 { border-color: #93c5fd !important; } .light-theme .text-blue-200, .light-theme .text-blue-300 { color: #1d4ed8 !important; } .light-theme .text-blue-400 { color: #2563eb !important; } /* Amber */ .light-theme .bg-amber-950\/20, .light-theme .bg-amber-950\/50 { background-color: #fffbeb !important; } .light-theme .border-amber-900\/40, .light-theme .border-amber-500\/20, .light-theme .border-amber-500\/30, .light-theme .border-amber-400\/20 { border-color: #fcd34d !important; } .light-theme .text-amber-200, .light-theme .text-amber-300, .light-theme .text-amber-400 { color: #b45309 !important; } .light-theme .text-amber-500 { color: #92400e !important; } /* Green */ .light-theme .bg-green-950\/20, .light-theme .bg-green-950\/30, .light-theme .bg-green-900\/50 { background-color: #f0fdf4 !important; } .light-theme .border-green-900\/50, .light-theme .border-green-500\/20, .light-theme .border-green-800, .light-theme .border-green-400 { border-color: #86efac !important; } .light-theme .text-green-300, .light-theme .text-green-400 { color: #15803d !important; } .light-theme .text-green-500 { color: #166534 !important; } /* Red */ .light-theme .bg-red-950\/10, .light-theme .bg-red-950\/20, .light-theme .bg-red-950\/30, .light-theme .bg-red-950\/40, .light-theme .bg-red-900\/20, .light-theme .bg-red-900\/30, .light-theme .bg-red-900\/40, .light-theme .bg-red-900\/50 { background-color: #fef2f2 !important; } .light-theme .border-red-900\/20, .light-theme .border-red-900\/40, .light-theme .border-red-900\/50, .light-theme .border-red-500\/10, .light-theme .border-red-500\/20, .light-theme .border-red-800 { border-color: #fca5a5 !important; } .light-theme .text-red-200, .light-theme .text-red-300, .light-theme .text-red-400 { color: #b91c1c !important; } .light-theme .text-red-900 { color: #7f1d1d !important; } /* Purple */ .light-theme .bg-purple-950\/40 { background-color: #faf5ff !important; } .light-theme .border-purple-900\/40 { border-color: #d8b4fe !important; } .light-theme .text-purple-400 { color: #7e22ce !important; } /* Orange */ .light-theme .border-orange-500\/50 { border-color: #fdba74 !important; } .light-theme .text-orange-400 { color: #c2410c !important; } .light-theme .text-orange-500 { color: #9a3412 !important; } .light-theme .text-orange-500\/90 { color: #9a3412 !important; } /* Opacity-suffixed variants of the above (Tailwind generates these as distinct classes, e.g. text-amber-300/90 is NOT covered by a .text-amber-300 rule) */ .light-theme .text-amber-300\/90 { color: #b45309 !important; } .light-theme .text-blue-300\/90 { color: #1d4ed8 !important; } .light-theme .text-blue-500\/50 { color: #2563eb !important; } .light-theme .text-green-300\/90 { color: #15803d !important; } .light-theme .text-red-500\/70 { color: #b91c1c !important; } /* Solid-color buttons (blue/red/green) always keep WHITE text regardless of theme — the general "text-white -> dark" light-theme rule above is for text sitting on card surfaces, not for text sitting on a colored button, so it must not apply here. */ .light-theme .bg-blue-600.text-white, .light-theme .bg-blue-500.text-white, .light-theme .bg-red-600.text-white, .light-theme .bg-green-600.text-white, .light-theme .bg-amber-600.text-white { color: #ffffff !important; } /* Disabled buttons: opacity-40 on an already-light background reads as nearly invisible in light theme. Use a clearly "disabled gray" look instead. */ .light-theme button:disabled { opacity: 1 !important; background-color: #e2e8f0 !important; color: #94a3b8 !important; border-color: #cbd5e1 !important; } /* Card panels (Settings sections use a shared bg-[#0c0c0e] "card surface" color) get a visible celeste border in both themes, instead of the near-invisible border-white/5. */ .bg-\[\#0c0c0e\].border-white\/5, .bg-\[\#0c0c0e\].border-white\/10 { border-color: rgba(125, 211, 252, 0.35) !important; } .light-theme .bg-\[\#0c0c0e\].border-white\/5, .light-theme .bg-\[\#0c0c0e\].border-white\/10 { border-color: #7dd3fc !important; } /* Button micro-interactions: subtle brightness lift on hover and a visible focus ring, in both themes. Per-button active:scale-95 (already used throughout) still handles the press-down feedback, so this only adds hover/focus. */ button:not(:disabled) { transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } button:not(:disabled):hover { filter: brightness(1.08); } button:not(:disabled):focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; } /* Toggle switches: text pill (ATTIVO / INATTIVO) — green border+text when on, red border+text when off, in both themes. The tinted background stays subtle enough to read on both a near-black card and a white one. */ .toggle-switch.border-green-500 { background-color: rgba(34, 197, 94, 0.12) !important; } .toggle-switch.border-red-500 { background-color: rgba(239, 68, 68, 0.12) !important; } /* Gradient banners (AI settings header, app logo badges): the dark-mode gradients go from a dark blue tint into pure black — override with light celeste/gray/white tones. */ .light-theme .ai-settings-banner { background-image: linear-gradient(to right, #dbeafe, #eff6ff, #ffffff) !important; border-color: #93c5fd !important; } .light-theme .app-logo-badge { background-image: linear-gradient(to bottom right, #dbeafe, #eff6ff, #ffffff) !important; border-color: #93c5fd !important; } /* Custom "oduo-*" color palette (used in SetLists / OduoGroups / SetEditor — an older part of the codebase with its own dark-only color aliases, separate from the standard zinc/black classes handled above) */ .light-theme .bg-oduo-950, .light-theme .bg-oduo-950\/50, .light-theme .bg-oduo-900, .light-theme .bg-oduo-900\/50, .light-theme .bg-oduo-800, .light-theme .bg-oduo-800\/30, .light-theme .bg-oduo-800\/50 { background-color: #ffffff !important; } .light-theme .bg-oduo-700, .light-theme .bg-oduo-700\/50, .light-theme .bg-oduo-600 { background-color: #eef2f6 !important; } .light-theme .border-oduo-800, .light-theme .border-oduo-700, .light-theme .border-oduo-700\/50, .light-theme .border-oduo-600, .light-theme .border-oduo-500 { border-color: #93c5fd !important; } .light-theme body.bg-oduo-900 { background-color: #ffffff !important; } /* Standard Tailwind "gray-*" scale (separate from "zinc-*", used in a few older components) — same light/dark inversion treatment as the zinc rules above. */ .light-theme .text-gray-200, .light-theme .text-gray-300 { color: #0f172a !important; } .light-theme .text-gray-400, .light-theme .text-gray-500 { color: #475569 !important; } .light-theme .text-gray-600 { color: #64748b !important; } .light-theme .bg-gray-600 { background-color: #eef2f6 !important; } .light-theme .border-gray-600, .light-theme .border-gray-700 { border-color: #93c5fd !important; } /* Sidebar "selected item" highlight (song/set currently open): needs a distinct tint in light theme, since plain bg-zinc-900 would otherwise resolve to the same white as the sidebar background itself, making the selection invisible. */ .light-theme .bg-zinc-900.shadow-lg.border-white\/5 { background-color: #eff6ff !important; border-color: #93c5fd !important; } /* Login screen: keep the card visually centered even if a scrollbar appears on very short viewports (scrollbar-gutter reserves the space so it doesn't shift the flex-centered content sideways), and make sure it can always shrink/scroll rather than get clipped on small phones. */ .login-shell { scrollbar-gutter: stable both-edges; }