MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 330: / Zeile 330: @@
+-----------------------------------------------------------------------------------
@@ Zeile 385: / Zeile 381: @@
+-----------------------------------------------------------------------------------
@@ Zeile 467: / Zeile 443: @@
 /* Typo tweaks */
 h2, h3 { scroll-margin-top: 80px; }
+-----------------------------------------------------------------------------------
+/* ===== ADOS: Mobile-first Layout & Styles ===== */
+/* Typografie & Basis */
+:root {
+  --bg: #fafafa;
+  --card: #ffffff;
+  --muted: #f6f7f8;
+  --border: #e6e6e6;
+  --text: #222;
+  --text-sub: #666;
+  --link: #2d6ca2;
+  --link-hover: #1c4d7d;
+  --radius: 14px;
+  --shadow: 0 1px 3px rgba(0,0,0,.06);
+}
+body { background: var(--bg); color: var(--text); line-height: 1.6; }
+a { color: var(--link); text-decoration: none; }
+a:hover { color: var(--link-hover); text-decoration: underline; }
+img { max-width: 100%; height: auto; border-radius: 8px; }
+/* Hero */
+.ados-hero { text-align: center; padding: .8rem .5rem .3rem; }
+.ados-hero h1 { margin: 0 0 .3rem; font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
+.ados-hero p { margin: 0 auto .7rem; max-width: 64ch; text-align: justify; }
+/* Chips (horizontales Scrollen auf Handy) */
+.ados-chips {
+  display: flex; gap: .5rem; overflow-x: auto; padding: .4rem .2rem .6rem;
+  scrollbar-width: thin;
+}
+.ados-chips a, .ados-chips span {
+  white-space: nowrap; border: 1px solid var(--border); background: var(--card);
+  padding: .45rem .7rem; border-radius: 999px; box-shadow: var(--shadow);
+}
+.ados-chips a:hover { background: var(--muted); }
+/* Grid (1 Spalte mobil, 2 Spalten ab 900px) */
+.ados-grid { display: grid; gap: 12px; }
+.col { display: flex; flex-direction: column; gap: 10px; }
+@media (min-width: 900px) {
+  .ados-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
+}
+/* Cards */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 12px 14px;
+}
+.card h2 {
+  margin: 0 0 .5rem; padding-bottom: .25rem;
+  border-bottom: 1px solid #eee; font-size: 1.12rem;
+}
+.card-muted { background: var(--muted); }
+/* Listen + News */
+.list.compact .news-item {
+  display: flex; gap: .6rem; padding: .36rem 0;
+  border-bottom: 1px dashed #eaeaea;
+}
+.list.compact .news-item:last-child { border-bottom: 0; }
+.news-item .date { color: var(--text-sub); min-width: 7ch; font-variant-numeric: tabular-nums; }
+/* Pill-Row (Kategorien als Wrap-Zeile) */
+.pill-row {
+  display: flex; flex-wrap: wrap; gap: .45rem .55rem; align-items: center;
+}
+.pill-row a {
+  border: 1px solid var(--border); padding: .35rem .6rem; border-radius: 999px; background: var(--card);
+}
+.pill-row a:hover { background: var(--muted); }
+/* Teaser grid */
+.teaser-grid { display: grid; gap: .35rem; grid-template-columns: 1fr; }
+@media (min-width: 700px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }
+/* Meta/Hinweis */
+.meta, .hint { font-size: 90%; color: var(--text-sub); margin-top: .35rem; }
+/* Navigation Einzeiler */
+.navline { margin: 0; }
+/* Footer */
+.ados-footerdate { font-size: 80%; color: #777; margin-top: .6rem; }
+.ados-footerinfo {
+  border-top: 1px solid var(--border); margin-top: .8rem; padding-top: .5rem;
+  font-size: 92%; color: var(--text-sub);
+}
+.ados-footernote { text-align: center; font-size: 90%; margin-top: .8rem; color: var(--text-sub); }
+/* Touch-friendly auf sehr kleinen Displays */
+@media (max-width: 480px) {
+  .card { padding: 12px; }
+  .card h2 { font-size: 1.05rem; }
+  .ados-chips { gap: .4rem; }
+  .ados-hero p { font-size: .98em; }
+}
+/* Leichtes Hover-Feedback (nur Desktop) */
+@media (pointer: fine) {
+  .card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transition: box-shadow .2s; }
+}
+/* Top-5 Widget (neutral, passt egal wie das JS ausgibt) */
+.whisky-top5 { padding: .25rem 0; }
+.whisky-top5 .item, .whisky-top5 li {
+  display: flex; justify-content: space-between; align-items: baseline;
+  gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed #eaeaea;
+}
+.whisky-top5 .item:last-child, .whisky-top5 li:last-child { border-bottom: 0; }
+/* Bevorzugt dunkles Farbschema */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #121212; --card: #1c1c1c; --muted: #181818; --border: #313131;
+    --text: #e8e8e8; --text-sub: #b4b4b4; --link: #86c2ff; --link-hover: #c5e1ff;
+    --shadow: 0 1px 4px rgba(0,0,0,.6);
+  }
+  img { filter: brightness(.95) contrast(1.05); }
+}
+/* Respektiere reduzierte Animationen */
+@media (prefers-reduced-motion: reduce) {
+  * { animation: none !important; transition: none !important; }
+}