|
|
| Zeile 581: |
Zeile 581: |
| ------------------------------------------------- | | ------------------------------------------------- |
|
| |
|
| /* ================================ | | /* --- SAFETY: harte Vorgaben für Hellmodus, falls iOS kurz switcht --- */ |
| ADOS – iOS/Dark-Mode Fix & Harmonisierung
| |
| ================================ */
| |
| | |
| /* 0) Signal an Browser: beide Schemes werden unterstützt */
| |
| :root { color-scheme: light dark; }
| |
| | |
| /* 1) Farb-Variablen (Light) */
| |
| :root { | |
| --bg: #fafafa;
| |
| --card: #ffffff;
| |
| --muted: #f6f7f8;
| |
| --border: #e6e6e6;
| |
| --text: #222;
| |
| --text-sub: #666;
| |
| --link: #2d6ca2;
| |
| --link-hover: #1c4d7d;
| |
| --highlight: #fff9e6; /* z.B. Tabellen-Gesamtzeile */
| |
| }
| |
| | |
| /* 2) Light-Mode: harte Sicherheit gegen „grauen“ Text */
| |
| @media (prefers-color-scheme: light) { | | @media (prefers-color-scheme: light) { |
| html, body { background: var(--bg) !important; color: var(--text) !important; } | | html, body { background: #fafafa !important; color: #222 !important; } |
| .card, .card-muted, | | .card, .card-muted { background: #fff !important; color: #222 !important; } |
| .whisky-rating__item,
| | .card-muted { background: #f6f7f8 !important; } |
| .mw-popup-modal,
| | .card h2 { color: #222 !important; } |
| .whisky-top5 { background: var(--card) !important; color: var(--text) !important; }
| | .meta, .hint { color: #666 !important; } |
| .card-muted { background: var(--muted) !important; } | | .list.compact .news-item { color: #222 !important; } |
| .whisky-summary__table th { background: var(--muted) !important; color: var(--text) !important; } | | .pill-row a, .ados-chips a { color: #2d6ca2 !important; } |
| .whisky-summary__table tr:nth-child(even) td { background: var(--bg) !important; } | |
| .whisky-summary__table tr:last-child td { background: var(--highlight) !important; color: var(--text) !important; } | |
| .meta, .hint, .whisky-rating__meta { color: var(--text-sub) !important; } | |
| } | | } |
|
| |
|
| /* 3) Dark-Mode: Flächen & Text gemeinsam umschalten */ | | /* --- DARKMODE: nur aktiv, wenn HINTERGRUND mit wechselt --- */ |
| @media (prefers-color-scheme: dark) { | | @media (prefers-color-scheme: dark) { |
| :root {
| | html, body { background: #121212 !important; color: #e8e8e8 !important; } |
| --bg: #121212;
| | .card, .card-muted { background: #1c1c1c !important; color: #e8e8e8 !important; } |
| --card: #1c1c1c;
| | .card-muted { background: #181818 !important; } |
| --muted: #181818;
| | .card h2 { color: #ffffff !important; border-bottom-color: #313131 !important; } |
| --border: #313131;
| | .meta, .hint { color: #b4b4b4 !important; } |
| --text: #e8e8e8;
| | .list.compact .news-item { color: #e8e8e8 !important; border-bottom-color: #2a2a2a !important; } |
| --text-sub: #b4b4b4;
| | .pill-row a, .ados-chips a { background:#1c1c1c; border-color:#313131; color:#86c2ff !important; } |
| --link: #86c2ff;
| | a { color: #86c2ff; } a:hover { color: #c5e1ff; } |
| --link-hover: #c5e1ff;
| |
| --highlight: #2a230f; /* angenehm warm für „Gesamt“-Zeile */
| |
| }
| |
| | |
| html, body { background: var(--bg) !important; color: var(--text) !important; } | |
| | |
| /* Karten & Module */
| |
| .card, .card-muted, | |
| .whisky-rating__item,
| |
| .mw-popup-modal,
| |
| .whisky-top5 {
| |
| background: var(--card) !important;
| |
| color: var(--text) !important;
| |
| border-color: var(--border) !important;
| |
| box-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
| |
| }
| |
| .card-muted { background: var(--muted) !important; } | |
| | |
| /* Texte/Meta */
| |
| .meta, .hint, .whisky-rating__meta { color: var(--text-sub) !important; } | |
| | |
| /* Listen/News-Trenner */
| |
| .list.compact .news-item { border-bottom-color: #2a2a2a !important; }
| |
| | |
| /* Tabelle */
| |
| .whisky-summary__table th { background: #202020 !important; color: var(--text) !important; } | |
| .whisky-summary__table tr:nth-child(even) td { background: #161616 !important; } | |
| .whisky-summary__table tr:last-child td { background: var(--highlight) !important; color: #f7f2e2 !important; border-top-color: #5a4a1d !important; }
| |
| | |
| /* Tracks/Balken */
| |
| .whisky-bar__track, | |
| .whisky-mini__track { background: #2a2a2a !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4) !important; }
| |
| | |
| /* Links & Chips */
| |
| a { color: var(--link) !important; }
| |
| a:hover { color: var(--link-hover) !important; } | |
| .pill-list a, .pill-row a { background: var(--card) !important; border-color: var(--border) !important; }
| |
| | |
| /* Bilder leicht abdunkeln */
| |
| img { filter: brightness(.95) contrast(1.05); } | | img { filter: brightness(.95) contrast(1.05); } |
| } | | } |
|
| |
|
| /* 4) Harte Farben deiner Komponenten entkoppeln (immer Variablen nutzen) */ | | /* --- iOS: verhindere ungewollte Auto-Invert/Graustufen-Effekte --- */ |
| .whisky-rating__item,
| | :root { color-scheme: light dark; } /* signalisiert, dass beide Schemes sauber gestylt sind */ |
| .whisky-top5,
| |
| .whisky-summary__table th,
| |
| .whisky-summary__table tr:nth-child(even) td,
| |
| .mw-popup-modal {
| |
| background: var(--card);
| |
| color: var(--text);
| |
| border-color: var(--border);
| |
| }
| |
| .whisky-rating__label { color: var(--text); }
| |
| .whisky-rating__meta { color: var(--text-sub); }
| |
| .whisky-summary__table th { background: var(--muted); }
| |
| .whisky-summary__table tr:nth-child(even) td { background: #fafafa; } /* Light fallback – wird im Dark-Block überschrieben */
| |
| | |
| /* 5) Optional: doppelte/alte Regeln neutralisieren (verhindert Überschattung) */
| |
| /* Entferne bei Gelegenheit Duplikate deiner .mw-popup-* Blöcke. Bis dahin: */
| |
| .mw-popup-modal { background: var(--card) !important; color: var(--text) !important; }
| |
| .mw-popup-content p { color: var(--text) !important; }
| |