MediaWiki:Common.css: Unterschied zwischen den Versionen

Hilfe

Version vom 12. November 2025, 22:51 Uhr

/* =========================================================
   KLUBNIKA-LOOK für MediaWiki • SKIN: COSMOS
   Ziel: wie mikeklubnika.com – dunkler Stripe-BG, zentrierte
   schmale Seite, eigene Boxen/Topbar. Keine Transparenz-Probleme.
   ========================================================= */

/* ---------- Farb-/Layout-Variablen ---------- */
:root{
  --bg-a:#0b0b0b;         /* diagonale Streifen */
  --bg-b:#101010;
  --content-bg:#0e0e0e;   /* Hauptfläche (nicht transparent) */
  --panel:#121212;
  --panel2:#0d0d0d;
  --border:#1b1b1b;
  --text:#e8e8e8;
  --muted:#a6a6a6;
  --accent:#9fd2ff;
  --accent2:#76b2ff;
  --radius:6px;
  --shadow:rgba(0,0,0,.6);
  --maxw:980px;
  --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Globaler Hintergrund + Text ---------- */
html, body{
  background: repeating-linear-gradient(135deg,var(--bg-a) 0 18px,var(--bg-b) 18px 36px);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
}

/* ---------- Cosmos-Chrome runterdrehen ---------- */
/* Header/Top-Leiste ausblenden */
.skin-cosmos .page-header,
.skin-cosmos .page-toolbar,
.skin-cosmos .page-header__inner { display:none !important; }

/* Sidebar ausblenden (Cosmos bezeichnet sie je nach Version unterschiedlich) */
.skin-cosmos .page-sidebar,
.skin-cosmos .cosmos-sidebar,
.skin-cosmos [class*="sidebar"] { display:none !important; }

/* Footer dezent oder aus */
.skin-cosmos .page-footer { display:none !important; }

/* ---------- Content-Schale: zentriert & dunkel ---------- */
/* Äußere Container aufräumen */
.skin-cosmos .page,
.skin-cosmos .page__body,
.skin-cosmos .mw-body,
.skin-cosmos .content,
.skin-cosmos .page-content,
.skin-cosmos .page-content__inner{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Eigentliche Inhaltsspur */
.skin-cosmos .mw-parser-output,
.skin-cosmos .page-content .mw-body,
.skin-cosmos #content{
  background: var(--content-bg) !important;       /* NICHT transparent */
  border: 1px solid #111 !important;
  border-radius: var(--radius);
  box-shadow: 0 0 24px var(--shadow);
  max-width: var(--maxw);
  margin: 32px auto !important;
  padding: 26px 28px 72px !important;
}

/* ---------- Typografie ---------- */
.skin-cosmos h1, .skin-cosmos h2, .skin-cosmos h3, .skin-cosmos h4{ 
  font-family: var(--mono); color:#fff; 
}
.skin-cosmos h1.firstHeading{
  font-size:1.6em; border-bottom:1px solid #222; padding-bottom:.3em;
}
.skin-cosmos p, .skin-cosmos li{ color:var(--text); }

/* Links */
.skin-cosmos a{ color:var(--accent); text-decoration:none; }
.skin-cosmos a:hover{ color:var(--accent2); text-decoration:underline; }
.skin-cosmos a:active{ color:#fff; }

/* ---------- TOC / Tabellen / Infobox ---------- */
.skin-cosmos #toc, .skin-cosmos .toc{
  background:var(--panel2) !important; color:var(--text) !important;
  border:1px solid #222 !important; border-radius:var(--radius);
  padding:10px 12px !important;
}
.skin-cosmos table.wikitable, .skin-cosmos .infobox{
  background:var(--panel) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:var(--radius);
}
.skin-cosmos table.wikitable th, .skin-cosmos table.wikitable td,
.skin-cosmos .infobox th, .skin-cosmos .infobox td{
  border:1px solid #262626 !important; padding:6px 8px !important;
}

/* ---------- Reusable UI (Topbar, Panels, Katalog, Listen) ---------- */
.mw-klub-topbar{
  display:flex; gap:8px; align-items:center;
  background: linear-gradient(#151515,#0e0e0e);
  border:1px solid #1c1c1c; border-radius:var(--radius);
  padding:10px; margin:6px 0 18px;
  box-shadow: inset 0 1px 0 #000, 0 1px 10px var(--shadow);
}
.mw-klub-pill{
  font:12px/1 var(--mono);
  border:1px solid #262626; background:#0b0b0b;
  padding:6px 10px; border-radius:4px; box-shadow: inset 0 1px 0 #000;
}
.mw-klub-pill:hover{ border-color:#333; color:#fff; }

.klub-panel{
  background: linear-gradient(#121212,#0d0d0d);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: inset 0 1px 0 #000, 0 0 0 1px #000, 0 8px 24px var(--shadow);
  padding:14px 16px; margin:20px 0;
}
.klub-panel h2{
  margin:0 0 10px; color:#cfcfcf;
  font:600 14px var(--mono); text-transform:uppercase; letter-spacing:.4px;
}
.klub-muted{ color:var(--muted); }

.klub-columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .klub-columns{ grid-template-columns:1fr; } }

.klub-list{ list-style:none; margin:0; padding:0; }
.klub-list li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #222; }
.klub-date{ color:var(--muted); font-size:12px; white-space:nowrap; }

/* Katalog-Gitter */
.klub-catalog{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
.klub-catalog .item{
  background:#0b0b0b; border:1px solid #252525; border-radius:6px;
  box-shadow: inset 0 1px 0 #000, 0 0 0 1px #000;
  display:grid; place-items:center; height:120px; transition:transform .08s;
}
.klub-catalog .item:hover{ transform:translateY(-2px); border-color:#2f2f2f; }
.klub-catalog .item img{ width:100px; height:100px; object-fit:cover; opacity:.9; }

/* Code/Kleinteile */
.small{ font-size:12px; color:var(--muted); }
code, pre{ background:#0b0b0b; border:1px solid #242424; border-radius:4px; padding:2px 4px; }

/* Optional: Hauptseiten-Titel ausblenden, wenn Seite „Hauptseite“ heißt */
.page-Hauptseite h1.firstHeading{ display:none; }
/* --- COSMOS: den Artikel-Header/Chrome wirklich komplett weg --- */
.skin-cosmos .page-header,
.skin-cosmos .page-header__inner,
.skin-cosmos .page-header__meta,
.skin-cosmos .page-header__stats,
.skin-cosmos .page-header__actions,
.skin-cosmos .page-header__tabs,
.skin-cosmos .page-toolbar {
  display: none !important;
}

/* --- COSMOS: Seitenränder/Gutter & Innenabstände neutralisieren --- */
.skin-cosmos .page,
.skin-cosmos .page__body,
.skin-cosmos .page-content,
.skin-cosmos .page-content__inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;      /* nimmt die dicken Innenabstände raus */
  margin: 0 !important;
}

/* --- Unser eigentlicher Content-Block bleibt (zentriert & dunkel) --- */
.skin-cosmos #content, 
.skin-cosmos .mw-parser-output {
  max-width: 980px !important;
  margin: 32px auto !important;
  padding: 26px 28px 72px !important;
  background: var(--content-bg) !important;
  border: 1px solid #111 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 24px rgba(0,0,0,.6) !important;
}

/* Optional: ganz oben die globale Cosmos-Bar auch ausblenden
   (Suche/Profil). Wenn du sie behalten willst: diesen Block weglassen. */
/*
.skin-cosmos .global-header,
.skin-cosmos .cosmos-globalHeader,
.skin-cosmos [class*="global-header"] {
  display: none !important;
}
*/
/* ============================================================
   ✦  COSMOS – alle blauen Flächen auf schwarz/dunkelgrau setzen
   ============================================================ */

/* Header (Kopfbereich oben) */
.skin-cosmos .page-header,
.skin-cosmos .page-header__inner,
.skin-cosmos .page-header__meta,
.skin-cosmos .page-header__stats,
.skin-cosmos .page-header__actions,
.skin-cosmos .page-header__tabs {
  background: #0b0b0b !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #e6e6e6 !important;
}

/* Seitenkörper / Hintergründe */
.skin-cosmos .page,
.skin-cosmos .page__body,
.skin-cosmos .page-content,
.skin-cosmos .page-content__inner,
.skin-cosmos .mw-body {
  background: #0e0e0e !important;   /* tiefes Schwarzgrau */
  border: 0 !important;
  box-shadow: none !important;
}

/* Sidebar, wenn du sie eingeblendet hast */
.skin-cosmos .page-sidebar,
.skin-cosmos .cosmos-sidebar {
  background: #0b0b0b !important;
  border-right: 1px solid #111 !important;
}

/* Such- und User-Bar ganz oben */
.skin-cosmos .global-header,
.skin-cosmos .cosmos-globalHeader,
.skin-cosmos [class*="global-header"] {
  background: #080808 !important;
  color: #e6e6e6 !important;
  border-bottom: 1px solid #111 !important;
}

/* Buttons, Tabs, Leisten */
.skin-cosmos .cosmos-button,
.skin-cosmos .cosmos-tab,
.skin-cosmos .cosmos-toolbar {
  background: #0d0d0d !important;
  color: #e6e6e6 !important;
  border: 1px solid #1a1a1a !important;
}
.skin-cosmos .cosmos-button:hover,
.skin-cosmos .cosmos-tab:hover {
  background: #151515 !important;
  border-color: #2a2a2a !important;
}

/* Links oben in der Topbar */
.skin-cosmos .page-header a,
.skin-cosmos .global-header a {
  color: #9fd2ff !important;
}
.skin-cosmos .page-header a:hover,
.skin-cosmos .global-header a:hover {
  color: #76b2ff !important;
}