MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 577: / Zeile 577: @@
    * { animation: none !important; transition: none !important; }
 }
+-------------------------------------------------
+/* ================================
+   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) {
+  html, body { background: var(--bg) !important; color: var(--text) !important; }
+  .card, .card-muted,
+  .whisky-rating__item,
+  .mw-popup-modal,
+  .whisky-top5 { background: var(--card) !important; color: var(--text) !important; }
+  .card-muted { background: var(--muted) !important; }
+  .whisky-summary__table th { background: var(--muted) !important; color: var(--text) !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 */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #121212;
+    --card: #1c1c1c;
+    --muted: #181818;
+    --border: #313131;
+    --text: #e8e8e8;
+    --text-sub: #b4b4b4;
+    --link: #86c2ff;
+    --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); }
+}
+/* 4) Harte Farben deiner Komponenten entkoppeln (immer Variablen nutzen) */
+.whisky-rating__item,
+.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; }