|
|
| Zeile 1: |
Zeile 1: |
| /* =========================================================
| |
| 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;
| |
| }
| |
| /* ========= COSMOS: Primär-Farbvariablen auf dunkel setzen ========= */
| |
| .skin-cosmos {
| |
| /* Hauptfarb-Tokens, die Cosmos intern verwendet */
| |
| --cosmos-color-primary: #0b0b0b;
| |
| --cosmos-color-secondary: #0d0d0d;
| |
| --cosmos-color-surface: #0e0e0e;
| |
| --cosmos-color-surface-2: #121212;
| |
| --cosmos-header-background: #0b0b0b;
| |
| --cosmos-toolbar-background: #0d0d0d;
| |
| --cosmos-sidebar-background: #0b0b0b;
| |
| --cosmos-border-color: #111;
| |
|
| |
| /* manche Builds nutzen diese Namen */
| |
| --theme-primary: #0b0b0b;
| |
| --theme-secondary: #0d0d0d;
| |
| --theme-surface: #0e0e0e;
| |
| }
| |
|
| |
| /* ========= COSMOS: alle Header-/Toolbar-Varianten schwärzen ========= */
| |
| /* article header (manche Versionen nennen ihn "articleHeader") */
| |
| .skin-cosmos .cosmos-articleHeader,
| |
| .skin-cosmos .cosmos-articleHeader__inner,
| |
| .skin-cosmos .cosmos-articleHeader__meta,
| |
| .skin-cosmos .cosmos-articleHeader__stats,
| |
| .skin-cosmos .cosmos-articleHeader__actions,
| |
| .skin-cosmos .cosmos-articleHeader__tabs {
| |
| background:#0b0b0b !important;
| |
| border:0 !important;
| |
| box-shadow:none !important;
| |
| color:#e6e6e6 !important;
| |
| }
| |
|
| |
| /* generisch: alles mit "header"/"toolbar"/"banner" im Klassennamen */
| |
| .skin-cosmos [class*="header"],
| |
| .skin-cosmos [class*="Header"],
| |
| .skin-cosmos [class*="toolbar"],
| |
| .skin-cosmos [class*="Toolbar"],
| |
| .skin-cosmos [class*="banner"],
| |
| .skin-cosmos [class*="Banner"]{
| |
| background:#0b0b0b !important;
| |
| border:0 !important;
| |
| box-shadow:none !important;
| |
| color:#e6e6e6 !important;
| |
| }
| |
|
| |
| /* globale Topbar (Suche/Profil), falls sichtbar */
| |
| .skin-cosmos .global-header,
| |
| .skin-cosmos .cosmos-globalHeader{
| |
| background:#080808 !important;
| |
| color:#e6e6e6 !important;
| |
| border-bottom:1px solid #111 !important;
| |
| }
| |
|
| |
| /* Falls Cosmos noch einen Wrapper färbt */
| |
| .skin-cosmos .cosmos-page,
| |
| .skin-cosmos .cosmos-page__inner,
| |
| .skin-cosmos .cosmos-page-header,
| |
| .skin-cosmos .cosmos-page-toolbar{
| |
| background:#0e0e0e !important;
| |
| border:0 !important;
| |
| box-shadow:none !important;
| |
| }
| |
|
| |
| /* Buttons/Tabs, die blau waren */
| |
| .skin-cosmos .cosmos-button,
| |
| .skin-cosmos .cosmos-tab,
| |
| .skin-cosmos .cosmos-toolbar,
| |
| .skin-cosmos .mw-ui-button {
| |
| background:#0d0d0d !important;
| |
| color:#e6e6e6 !important;
| |
| border:1px solid #1a1a1a !important;
| |
| }
| |
| .skin-cosmos .cosmos-button:hover,
| |
| .skin-cosmos .cosmos-tab:hover,
| |
| .skin-cosmos .mw-ui-button:hover{
| |
| background:#151515 !important;
| |
| border-color:#2a2a2a !important;
| |
| }
| |
| /* ULTIMATE: entferne ALLE Cosmos/Fandom Header-/Toolbar-Varianten */
| |
| .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,
| |
| .skin-cosmos .cosmos-articleHeader,
| |
| .skin-cosmos .cosmos-articleHeader__inner,
| |
| .skin-cosmos .cosmos-articleHeader__meta,
| |
| .skin-cosmos .fandom-community-header,
| |
| .skin-cosmos .fandom-sticky-header,
| |
| .skin-cosmos [id*="PageHeader"],
| |
| .skin-cosmos [class*="CommunityHeader"],
| |
| .skin-cosmos [class*="StickyHeader"],
| |
| .skin-cosmos [class*="Header"],
| |
| .skin-cosmos [class*="header"],
| |
| .skin-cosmos [class*="toolbar"],
| |
| .skin-cosmos [class*="Toolbar"]{
| |
| display: none !important;
| |
| }
| |
| /* Headings sicher: keine Überlappung mit TOC/Tools */
| |
| .skin-cosmos h1.firstHeading{
| |
| position: relative; z-index: 2;
| |
| margin: 0 0 .9em !important;
| |
| line-height: 1.25;
| |
| }
| |
| .skin-cosmos .mw-parser-output h2,
| |
| .skin-cosmos .mw-parser-output h3,
| |
| .skin-cosmos .mw-parser-output h4{
| |
| clear: both;
| |
| margin: 1.2em 0 .55em !important;
| |
| line-height: 1.25;
| |
| }
| |
| /* TOC schwebt manchmal – fest setzen */
| |
| .skin-cosmos #toc, .skin-cosmos .toc{
| |
| float: none !important;
| |
| margin: 0 0 1rem !important;
| |
| }
| |
| /* =========================================================
| |
| FINAL FIX: Cosmos-Hintergrund (blauer Schleier) → tiefschwarz
| |
| ========================================================= */
| |
|
| |
| /* 1️⃣ Grundfläche (Browser & Cosmos-Root) */
| |
| html, body,
| |
| .skin-cosmos,
| |
| .skin-cosmos body,
| |
| .skin-cosmos .cosmos-root,
| |
| .skin-cosmos .page,
| |
| .skin-cosmos .page__body,
| |
| .skin-cosmos .page-background,
| |
| .skin-cosmos .cosmos-page-background {
| |
| background: #000 !important; /* echtes Schwarz */
| |
| background-image: none !important; /* keine Verlaufstexturen */
| |
| background-color: #000 !important;
| |
| filter: none !important; /* falls Cosmos dunkle Filter nutzt */
| |
| }
| |
|
| |
| /* 2️⃣ Fallback-Ebenen, falls Cosmos Overlay-Effekte setzt */
| |
| .skin-cosmos::before,
| |
| .skin-cosmos::after,
| |
| .skin-cosmos .page::before,
| |
| .skin-cosmos .page::after,
| |
| .skin-cosmos .cosmos-root::before,
| |
| .skin-cosmos .cosmos-root::after {
| |
| background: none !important;
| |
| content: none !important;
| |
| }
| |
|
| |
| /* 3️⃣ Stripe-Hintergrund wieder aktivieren (deins überschreibt das Schwarz) */
| |
| html, body {
| |
| background: repeating-linear-gradient(
| |
| 135deg,
| |
| #0b0b0b 0 18px,
| |
| #101010 18px 36px
| |
| ) !important;
| |
| }
| |
|
| |
| /* 3) Stripe-BG (wenn du willst). Für reines Schwarz diese 3 Zeilen löschen. */
| |
| html, body {
| |
| background: repeating-linear-gradient(135deg,#0b0b0b 0 18px,#101010 18px 36px) !important;
| |
| }
| |
