MediaWiki:Common.css: Unterschied zwischen den Versionen

Hilfe

Version vom 12. November 2025, 22:37 Uhr

/* ====== Mike-Klubnika-inspirierter MediaWiki-Theme ======
   Einfach in MediaWiki:Common.css einfügen.
   Du kannst Farben/Abstände in :root ändern.
=========================================================== */

:root{
  --bg: #0b0b0b;
  --bg-alt:#121212;
  --panel:#111;
  --panel-2:#0d0d0d;
  --text:#e6e6e6;
  --muted:#a8a8a8;
  --accent:#9fd2ff;     /* Linkfarbe hellblau */
  --accent-2:#76b2ff;
  --danger:#ff5151;
  --ok:#9cff9c;
  --shadow: rgba(0,0,0,.6);
  --maxw: 980px;         /* Breite der Mittelspalte */
  --radius: 6px;
  --gap: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Hintergrund: diagonale dunkle Streifen + leichte Vignette */
html,body{
  background:
    repeating-linear-gradient(135deg,#0b0b0b 0 18px,#101010 18px 36px);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.45;
}

/* Mittelspalte, zentriert */
body .mw-body, #content, #mw-content-text{
  background: transparent !important;
  box-shadow: none !important;
}
#mw-page-base, #mw-head-base{ display:none; }
#content{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 12px 60px;
}

/* Globale Link-Optik */
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-2); text-decoration: underline; }
a:active{ color: #fff; }

/* Obere schmale Header-Leiste mit kleinen "Pills" */
.mw-klub-topbar{
  display:flex; gap:8px; align-items:center;
  background: linear-gradient(#151515,#0e0e0e);
  border: 1px solid #1c1c1c;
  box-shadow: 0 1px 0 #000 inset, 0 1px 10px var(--shadow);
  padding: 10px;
  border-radius: var(--radius);
  margin: 8px 0 16px;
}
.mw-klub-topbar .brand{
  font-weight:700; letter-spacing:.5px;
  background:#000; padding:6px 10px; border-radius:4px;
  border:1px solid #262626;
}
.mw-klub-pill{
  font: 12px/1 var(--mono);
  border:1px solid #262626;
  background:#0b0b0b;
  padding:6px 10px;
  border-radius:4px;
  box-shadow: 0 1px 0 #000 inset;
  white-space:nowrap;
}

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

/* Featured-Bildschirm (alter TV-Rahmen-Look) */
.klub-featured{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.klub-crt{
  width: 360px; max-width:100%;
  aspect-ratio: 4 / 3;
  background:#050505;
  border: 2px solid #222;
  border-radius: 8px;
  box-shadow: 0 1px 0 #000 inset, 0 0 0 1px #000, 0 8px 24px var(--shadow);
  position: relative; overflow:hidden;
}
.klub-crt img{ width:100%; height:100%; object-fit:cover; opacity:.92; }
.klub-crt::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: screen; pointer-events:none;
}
.klub-featured .desc{ flex:1 1 260px; }

/* Katalog: kleine Items rechts vom Featured */
.klub-catalog{
  display:grid; grid-template-columns: repeat(auto-fill, 64px);
  gap: 12px;
}
.klub-catalog .item{
  width:64px; height:64px; background:#0b0b0b;
  border:1px solid #252525; border-radius:6px;
  box-shadow: 0 1px 0 #000 inset, 0 0 0 1px #000;
  display:grid; place-items:center;
  transition: transform .08s ease;
}
.klub-catalog .item img{ width:48px; height:48px; object-fit:contain; opacity:.9; }
.klub-catalog .item:hover{ transform: translateY(-2px); border-color:#2f2f2f; }

/* Zweispaltige Sektion: Registry / Updates */
.klub-columns{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
@media (max-width: 900px){ .klub-columns{ grid-template-columns: 1fr; } }

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

/* Tabellen/Infoboxen dunkel */
.infobox, table.wikitable{
  background: var(--panel) !important;
  color: var(--text);
  border:1px solid #242424;
}
.infobox th, .infobox td, table.wikitable th, table.wikitable td{
  border:1px solid #262626; padding:6px 8px;
}

/* Kopf-/Fußleisten von MediaWiki stark reduzieren */
#mw-page-base, #mw-head, #left-navigation, #right-navigation,
#p-personal, #p-logo, .mw-portlet.vector-user-menu-legacy,
.vector-header-container{ display:none !important; }
.mw-body{ margin-top: 0 !important; }

/* Fußnote/kleiner Text */
.small{ font-size:12px; color:var(--muted); }

/* Code-Blöcke */
pre, code{ background:#0b0b0b; border:1px solid #242424; border-radius:4px; }

/* Buttons */
.klub-btn{
  display:inline-block; font: 12px var(--mono);
  padding:6px 10px; border-radius:4px;
  border:1px solid #262626; background:#0b0b0b;
  box-shadow: 0 1px 0 #000 inset;
}
.klub-btn:hover{ border-color:#2e2e2e; text-decoration:none; }

/* Optional: Kategorie-/Seiten-Titel ausblenden auf Hauptseite */
.page-Hauptseite h1.firstHeading{ display:none; }

/* ==== CLEAN VECTOR RESET (macht Vector wie eine normale Website) ==== */

/* Hintergrund (diagonale Streifen bleibt) */
html,body{
  background: repeating-linear-gradient(135deg,#0b0b0b 0 18px,#101010 18px 36px);
  color:#e6e6e6;
}

/* Linke Sidebar + Logo ausblenden */
#mw-panel, #p-logo { display:none !important; }

/* Gesamtlayout zentrieren */
#page-base, #head-base, #mw-head, #footer, #mw-data-after-content {
  background: transparent !important; box-shadow:none !important;
}
#content, .mw-body, .mw-content-ltr{
  background: transparent !important;
  max-width: 980px;                /* Breite der Mittelspalte */
  margin: 0 auto !important;       /* zentrieren */
  padding: 20px 12px 80px !important;
  border: 0 !important;
  box-shadow: none !important;
}
body { min-width: unset !important; }
#left-navigation, #right-navigation { display:none !important; } /* Vector-Topmenü optional aus */

/* Titel & Typo */
.firstHeading { color:#fff; font-weight:800; letter-spacing:.3px; }
.mw-body { font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Links */
a{ color:#9fd2ff; text-decoration:none; }
a:hover{ color:#76b2ff; text-decoration:underline; }

/* Pane/Boxen */
.klub-panel{
  background: linear-gradient(#121212,#0d0d0d);
  border: 1px solid #1b1b1b;
  border-radius: 6px;
  box-shadow: 0 1px 0 #000 inset, 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.55);
  padding: 12px 14px; margin: 18px 0;
}
.klub-panel h2{
  margin:0 0 10px; font: 600 14px ui-monospace,Consolas,Menlo,monospace;
  text-transform:uppercase; color:#cfcfcf; letter-spacing:.4px;
}
.klub-muted{ color:#a8a8a8; }

/* Inhaltsverzeichnis „TOC“ dunkel */
#toc, .toc{
  background:#111 !important; color:#e6e6e6 !important;
  border:1px solid #242424 !important; border-radius:6px;
}
#toc a{ color:#cfe7ff; }

/* Tabellen/Infobox */
table.wikitable, .infobox{
  background:#111 !important; color:#e6e6e6 !important;
  border:1px solid #242424 !important;
}
table.wikitable th, table.wikitable td, .infobox th, .infobox td{
  border:1px solid #262626 !important; padding:6px 8px !important;
}

/* Mini-Topbar wie beim Vorbild (frei belegbar) */
.mw-klub-topbar{
  display:flex; gap:8px; align-items:center;
  background: linear-gradient(#151515,#0e0e0e);
  border:1px solid #1c1c1c; border-radius:6px;
  padding:10px; margin:8px 0 16px;
  box-shadow: 0 1px 0 #000 inset, 0 1px 10px rgba(0,0,0,.6);
}
.mw-klub-pill{
  font:12px/1 ui-monospace,Consolas,Menlo,monospace;
  border:1px solid #262626; background:#0b0b0b;
  padding:6px 10px; border-radius:4px; box-shadow: inset 0 1px 0 #000;
}

/* 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:#2e2e2e; }

/* Zweispaltige Listen (Registry/Updates) */
.klub-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@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:16px; padding:8px 0; border-bottom:1px dashed #222; }
.klub-date{ color:#a8a8a8; font-size:12px; white-space:nowrap; }

/* Hauptseiten-Titel ausblenden (optional: wenn Seite "Hauptseite" heißt) */
.page-Hauptseite h1.firstHeading{ display:none; }