/* * Hell-Modus-Override für die THS Timing Console. * * Die App ist komplett mit fest verdrahteten dunklen Tailwind-Utility-Klassen * gebaut (Tailwind wird per CDN ohne Build-Schritt eingebunden, kein * bestehendes dark:/light:-Theming). Statt jede einzelne Klasse in jedem * Template umzuschreiben, überschreibt dieses Stylesheet gezielt die * tatsächlich verwendeten Farb-Klassen, sobald * gesetzt ist (siehe base.html für den Umschalter). * * Der Präfix ":is([data-theme="light"], [data-theme="light"] *)" statt eines * einfachen Nachfahren-Selektors ("[data-theme="light"] .X") ist bewusst so * gewählt: base.html setzt data-theme UND z.B. bg-slate-950 auf demselben * -Element - ein reiner Nachfahren-Selektor (Leerzeichen) matcht ein * Element nicht gegen sich selbst, nur echte Kind-Elemente. :is(...) deckt * beide Fälle ab (Element selbst trägt data-theme, ODER ist Nachfahre eines * Elements mit data-theme) und behält dabei genug Spezifität, um Tailwinds * generierte Einzel-Klassen-Regeln ohne !important zu schlagen. * * Bewusst NICHT angefasst: kräftige, deckende Akzentfarben (Buttons wie * bg-sky-600/bg-emerald-600 mit weißer Schrift, halbtransparente Badge- * Hintergründe wie bg-emerald-500/10) - die funktionieren mit weißer bzw. * eigens angepasster Textfarbe auf hellem Grund genauso gut wie auf dunklem. */ [data-theme="light"] { color-scheme: light; } /* ---- Grundgerüst: Hintergründe ---- */ :is([data-theme="light"], [data-theme="light"] *).bg-slate-950 { background-color: #f1f5f9; } :is([data-theme="light"], [data-theme="light"] *).bg-slate-900 { background-color: #ffffff; } :is([data-theme="light"], [data-theme="light"] *).bg-slate-800 { background-color: #e2e8f0; } :is([data-theme="light"], [data-theme="light"] *).bg-slate-700 { background-color: #cbd5e1; } :is([data-theme="light"], [data-theme="light"] *).bg-slate-600 { background-color: #94a3b8; } :is([data-theme="light"], [data-theme="light"] *).bg-white { background-color: #ffffff; } :is([data-theme="light"], [data-theme="light"] *).bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.7); } :is([data-theme="light"], [data-theme="light"] *).bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.85); } :is([data-theme="light"], [data-theme="light"] *).bg-slate-900\/90 { background-color: rgba(255, 255, 255, 0.92); } :is([data-theme="light"], [data-theme="light"] *).bg-slate-950\/80 { background-color: rgba(203, 213, 225, 0.85); } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-900:hover { background-color: #f1f5f9; } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-800:hover { background-color: #e2e8f0; } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-700:hover { background-color: #b6c3d4; } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-600:hover { background-color: #64748b; } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-800\/40:hover { background-color: rgba(203, 213, 225, 0.6); } :is([data-theme="light"], [data-theme="light"] *).hover\:bg-slate-800\/50:hover { background-color: rgba(203, 213, 225, 0.7); } /* ---- Grundgerüst: Ränder / Trennlinien ---- */ :is([data-theme="light"], [data-theme="light"] *).border-slate-800 { border-color: #cbd5e1; } :is([data-theme="light"], [data-theme="light"] *).border-slate-800\/40 { border-color: rgba(148, 163, 184, 0.5); } :is([data-theme="light"], [data-theme="light"] *).border-slate-700 { border-color: #94a3b8; } :is([data-theme="light"], [data-theme="light"] *).border-slate-600 { border-color: #64748b; } :is([data-theme="light"], [data-theme="light"] *).border-slate-300 { border-color: #64748b; } :is([data-theme="light"], [data-theme="light"] *).border-white { border-color: #cbd5e1; } :is([data-theme="light"], [data-theme="light"] *).hover\:border-slate-700:hover { border-color: #64748b; } :is([data-theme="light"], [data-theme="light"] *).divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; } :is([data-theme="light"], [data-theme="light"] *).ring-slate-900 { --tw-ring-color: #ffffff; } /* ---- Grundgerüst: Text ---- */ :is([data-theme="light"], [data-theme="light"] *).text-slate-100 { color: #0f172a; } :is([data-theme="light"], [data-theme="light"] *).text-slate-200 { color: #1e293b; } :is([data-theme="light"], [data-theme="light"] *).text-slate-300 { color: #334155; } :is([data-theme="light"], [data-theme="light"] *).text-slate-400 { color: #475569; } :is([data-theme="light"], [data-theme="light"] *).text-slate-500 { color: #64748b; } :is([data-theme="light"], [data-theme="light"] *).text-slate-600 { color: #475569; } :is([data-theme="light"], [data-theme="light"] *).text-white { color: #0f172a; } :is([data-theme="light"], [data-theme="light"] *).hover\:text-white:hover { color: #0f172a; } :is([data-theme="light"], [data-theme="light"] *).hover\:text-slate-200:hover { color: #1e293b; } :is([data-theme="light"], [data-theme="light"] *).hover\:text-slate-300:hover { color: #334155; } /* ---- Akzentfarben: helle Schattierungen abdunkeln für Kontrast auf weiß ---- */ :is([data-theme="light"], [data-theme="light"] *).text-amber-200 { color: #92400e; } :is([data-theme="light"], [data-theme="light"] *).text-amber-300 { color: #b45309; } :is([data-theme="light"], [data-theme="light"] *).text-amber-400 { color: #b45309; } :is([data-theme="light"], [data-theme="light"] *).text-blue-300 { color: #1d4ed8; } :is([data-theme="light"], [data-theme="light"] *).text-blue-400 { color: #2563eb; } :is([data-theme="light"], [data-theme="light"] *).text-emerald-200 { color: #065f46; } :is([data-theme="light"], [data-theme="light"] *).text-emerald-300 { color: #047857; } :is([data-theme="light"], [data-theme="light"] *).text-emerald-400 { color: #047857; } :is([data-theme="light"], [data-theme="light"] *).text-indigo-300 { color: #4338ca; } :is([data-theme="light"], [data-theme="light"] *).text-indigo-400 { color: #4338ca; } :is([data-theme="light"], [data-theme="light"] *).text-orange-300 { color: #c2410c; } :is([data-theme="light"], [data-theme="light"] *).text-orange-400 { color: #c2410c; } :is([data-theme="light"], [data-theme="light"] *).text-purple-400 { color: #7e22ce; } :is([data-theme="light"], [data-theme="light"] *).text-rose-200 { color: #9f1239; } :is([data-theme="light"], [data-theme="light"] *).text-rose-300 { color: #be123c; } :is([data-theme="light"], [data-theme="light"] *).text-rose-400 { color: #be123c; } :is([data-theme="light"], [data-theme="light"] *).text-sky-200 { color: #075985; } :is([data-theme="light"], [data-theme="light"] *).text-sky-300 { color: #0369a1; } :is([data-theme="light"], [data-theme="light"] *).text-sky-400 { color: #0369a1; } /* ---- Theme-Umschalter-Button ---- */ .theme-toggle-btn { transition: none; }