MediaWiki:Cosmos.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* =========================================================
   KLUBNIKA-LOOK für MediaWiki Cosmos
   Inspiriert von mikeklubnika.com
   ========================================================= */

/* ---------- Variablen ---------- */
:root {
  --klub-bg-dark: #0b0b0b;
  --klub-bg-light: #101010;
  --klub-content: #0e0e0e;
  --klub-panel: #121212;
  --klub-border: #1b1b1b;
  --klub-text: #e8e8e8;
  --klub-muted: #a6a6a6;
  --klub-accent: #9fd2ff;
  --klub-accent-hover: #76b2ff;
  --klub-radius: 6px;
  --klub-max-width: 980px;
  --klub-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

/* ---------- Basis: Gestreifter Hintergrund ---------- */
html,
body {
  background: repeating-linear-gradient(
    135deg,
    var(--klub-bg-dark) 0 18px,
    var(--klub-bg-light) 18px 36px
  ) !important;
  color: var(--klub-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* ---------- Cosmos Chrome komplett entfernen ---------- */
/* Header, Toolbar, Sidebar weg */
.page-header,
.page-toolbar,
.cosmos-header,
.cosmos-toolbar,
.page-sidebar,
.cosmos-sidebar,
.mw-sidebar,
.global-header,
#mw-navigation,
#p-logo {
  display: none !important;
}

/* Footer optional ausblenden */
.page-footer {
  display: none !important;
}

/* ---------- ALLE Cosmos Wrapper transparent machen ---------- */
/* Das ist der wichtigste Teil gegen den blauen Hintergrund! */
.page,
.page__body,
.page-content,
.cosmos-pageBody,
.cosmos-pageBody-content,
.page-wrapper,
.content-wrapper,
#mw-content-container,
.mw-page-container,
.mw-page-container-inner,
div[class*="cosmos"]:not(#content):not(.mw-body),
div[class*="page"]:not(#content):not(.mw-body),
div[class*="content"]:not(#content):not(.mw-body),
div[class*="wrapper"]:not(#content):not(.mw-body) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Hauptinhalt: Zentrierte dunkle Box ---------- */
/* NUR diese Box soll den dunklen Hintergrund haben */
#content,
.mw-body {
  max-width: var(--klub-max-width) !important;
  margin: 40px auto !important;
  padding: 32px 40px 60px !important;
  background: var(--klub-content) !important;
  border: 1px solid #111 !important;
  border-radius: var(--klub-radius) !important;
  box-shadow: var(--klub-shadow) !important;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1.firstHeading {
  font-size: 1.8em;
  border-bottom: 1px solid #222;
  padding-bottom: 0.4em;
  margin-bottom: 1.2em;
}

h2 {
  font-size: 1.4em;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 0.3em;
}

h3 {
  font-size: 1.2em;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

p, li, td {
  color: var(--klub-text);
}

/* ---------- Links ---------- */
a {
  color: var(--klub-accent);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--klub-accent-hover);
  text-decoration: underline;
}

a:active,
a:focus {
  color: #fff;
}

/* Besuchte Links nicht lila */
a:visited {
  color: var(--klub-accent);
}

/* ---------- Inhaltsverzeichnis (TOC) ---------- */
#toc,
.toc {
  background: var(--klub-panel) !important;
  border: 1px solid var(--klub-border) !important;
  border-radius: var(--klub-radius);
  padding: 16px 20px !important;
  margin: 1.5em 0;
  float: none !important;
}

#toc .toctitle,
.toc .toctitle {
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 0.5em;
}

#toc ul,
.toc ul {
  margin: 0;
  padding-left: 1.5em;
}

#toc a,
.toc a {
  color: var(--klub-text);
}

#toc a:hover,
.toc a:hover {
  color: var(--klub-accent);
}

/* ---------- Tabellen ---------- */
table.wikitable {
  background: var(--klub-panel) !important;
  border: 1px solid var(--klub-border) !important;
  border-radius: var(--klub-radius);
  border-collapse: separate;
  border-spacing: 0;
  color: var(--klub-text) !important;
}

table.wikitable th {
  background: #0b0b0b !important;
  color: #fff !important;
  border: 1px solid #262626 !important;
  padding: 10px 12px !important;
  font-weight: 600;
}

table.wikitable td {
  border: 1px solid #262626 !important;
  padding: 8px 12px !important;
}

table.wikitable tr:hover {
  background: #151515 !important;
}

/* ---------- Infoboxen ---------- */
.infobox {
  background: var(--klub-panel) !important;
  border: 1px solid var(--klub-border) !important;
  border-radius: var(--klub-radius);
  color: var(--klub-text) !important;
  float: right;
  margin: 0 0 1em 1em;
  padding: 8px;
  width: 280px;
}

.infobox th,
.infobox td {
  border: 1px solid #262626 !important;
  padding: 6px 10px !important;
}

.infobox th {
  background: #0b0b0b !important;
  color: #fff !important;
  font-weight: 600;
}

/* ---------- Code-Blöcke ---------- */
code,
pre {
  background: #0b0b0b;
  border: 1px solid #242424;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
}

code {
  padding: 2px 6px;
}

pre {
  padding: 12px 16px;
  overflow-x: auto;
}

/* ---------- Kategorien am Seitenende ---------- */
#catlinks {
  background: var(--klub-panel);
  border: 1px solid var(--klub-border);
  border-radius: var(--klub-radius);
  padding: 12px 16px;
  margin-top: 2em;
}

#catlinks a {
  color: var(--klub-muted);
}

#catlinks a:hover {
  color: var(--klub-accent);
}

/* ---------- Bearbeitungs-Buttons ---------- */
.mw-editsection {
  font-family: system-ui, sans-serif;
  font-size: 0.8em;
}

.mw-editsection a {
  color: var(--klub-muted) !important;
}

.mw-editsection a:hover {
  color: var(--klub-accent) !important;
}

/* ---------- Bilder ---------- */
.thumbinner {
  background: var(--klub-panel) !important;
  border: 1px solid var(--klub-border) !important;
  border-radius: var(--klub-radius);
  padding: 6px;
}

.thumbcaption {
  color: var(--klub-muted);
  font-size: 0.9em;
}

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

/* ---------- Mobile Responsiveness ---------- */
@media (max-width: 1024px) {
  #content,
  .mw-body {
    margin: 20px 16px !important;
    padding: 24px 20px 40px !important;
  }
}

@media (max-width: 640px) {
  #content,
  .mw-body {
    margin: 10px 8px !important;
    padding: 20px 16px 32px !important;
    border-radius: 4px !important;
  }

  h1.firstHeading {
    font-size: 1.5em;
  }

  .infobox {
    float: none;
    width: 100%;
    margin: 0 0 1em 0;
  }
}