MediaWiki:Common.css: Unterschied zwischen den Versionen

Hilfe

Version vom 12. November 2025, 22:02 Uhr

/************************************************************
  MIKE-KLUBNIKA-STYLE für MediaWiki
  - Schwarzer Hintergrund, diagonale Seitenstreifen
  - Zentraler "Kasten", harte Ränder, Terminal-Grün
  - 88x31-Buttons, Log-/Registry-Listen, animiertes Catalogue-Grid
  - Infobox-Dossiers im dunklen Panel-Look
  - Sanftes responsives Verhalten
************************************************************/

/* ====== BASIS ====== */
html, body {
  margin: 0; padding: 0;
  background: #000;
  color: #f5f5f5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Diagonale Randstreifen links/rechts */
body::before, body::after {
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  width: 120px;
  z-index: -1;
  background-image: repeating-linear-gradient(
    135deg,
    #111 0, #111 12px,
    #000 12px, #000 24px
  );
}
body::before { left: 0; }
body::after  { right: 0; }

/* Haupt-Content-Container */
.mw-body, #content {
  max-width: 980px;
  margin: 24px auto 40px auto;
  padding: 18px 22px 26px 22px;
  background: #050505;
  border: 2px solid #444;
  box-shadow: 0 0 16px #000;
}

/* Seitentitel */
.firstHeading {
  font-size: 2.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

/* Fließtext */
.mw-body p {
  line-height: 1.55;
  font-size: 0.96rem;
  color: #e3e3e3;
  margin: 0.6rem 0 0.9rem;
}

/* Links (Terminal-Grün) */
a, .mw-body a {
  color: #00ff88;
  text-decoration: none;
}
a:hover, .mw-body a:hover { text-decoration: underline; }

/* Überschriften-Trennlinie */
.mw-body h2, .mw-body h3, .mw-body h4 {
  margin-top: 1.8rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #555;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Dünne HR */
.mw-body hr {
  border: 0;
  border-top: 1px solid #333;
  margin: 14px 0;
}

/* Listen & Tabellen kompakt */
.mw-body ul, .mw-body ol { margin-left: 1.2rem; }
.mw-body table {
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 0.6rem 0;
}
.mw-body th, .mw-body td {
  border: 1px solid #444;
  padding: 0.35rem 0.55rem;
}
.mw-body th {
  background: #0a0a0a;
  font-weight: 700;
}

/* Code, Zitate */
pre, code, kbd {
  font-family: "JetBrains Mono","Fira Mono","Consolas",monospace;
  background: #0a0a0a; border: 1px solid #333; color: #d6fbe6;
}
pre { padding: 10px; overflow: auto; }
blockquote {
  border-left: 3px solid #444;
  margin: 0.6rem 0; padding: 0.4rem 0.8rem;
  color: #cfcfcf; background: #080808;
}

/* TOC, Tabs, Navigationsleiste minimal */
#toc {
  background: #080808; border: 1px solid #333;
}
#toc .toctitle { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
#p-views, #right-navigation, #left-navigation { filter: saturate(0.8) brightness(0.95); }

/* Kategorien & Footer dezent */
#catlinks, #footer {
  background: transparent; border: none; color: #777;
}

/* ====== TOP-LINKLEISTE (wie "homepage · contact · about") ====== */
#top-nav {
  font-size: 0.82rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
#top-nav a { color: #f5f5f5; margin-right: 12px; }
#top-nav a:hover { color: #00ff88; }

/* ====== 88x31-BUTTON-LEISTE ====== */
#buttons-88x31 { margin: 10px 0 16px 0; }
#buttons-88x31 img {
  width: 88px; height: 31px;
  margin: 2px; border: 1px solid #333;
  image-rendering: pixelated;
}

/* ====== SECTION-LABELS (Log/Dossier-Vibe) ====== */
.char-section-label {
  font-family: "JetBrains Mono","Fira Mono","Consolas",monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  display: block;
  margin: 0.2rem 0 2px;
}

/* ====== INFOBOX (dunkles Dossier-Panel) ====== */
/* greift gängige Infobox-Klassen/Tabellen ab */
.infobox, table.infobox, .infobox-character, .infobox-charakter {
  background: #050505;
  border: 2px solid #444;
  box-shadow: 0 0 8px #000;
  color: #f5f5f5;
  font-size: 0.82rem;
  margin: 0 0 12px 18px;
  float: right;
  width: 260px;
}
.infobox caption {
  caption-side: top;
  padding: 6px 8px;
  background: #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #444;
}
.infobox th, .infobox td, table.infobox th, table.infobox td {
  border: none; padding: 3px 8px;
}
.infobox th, table.infobox th {
  text-align: left; font-weight: 700; color: #bdbdbd;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em;
}
.infobox td { color: #f5f5f5; }
.infobox img, table.infobox img {
  width: 100%; max-height: 220px; object-fit: cover;
  margin: 6px 0; border: 1px solid #333;
}

/* Status-Badges für |Status= */
.infobox .status-alive,
.infobox .status-dead,
.infobox .status-unknown {
  display: inline-block; padding: 1px 6px;
  font-size: 0.66rem; text-transform: uppercase;
  border: 1px solid currentColor;
}
.infobox .status-alive   { color: #00ff88; }
.infobox .status-dead    { color: #ff4444; }
.infobox .status-unknown { color: #ffaa00; }

/* ====== CATALOGUE (Feature + animiertes Icon-Grid) ====== */
.catalogue-wrapper {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 20px; align-items: flex-start;
}
.section-link-right { float: right; font-size: 0.74rem; text-transform: lowercase; }

.catalogue-feature {
  border: 1px solid #333; padding: 10px;
  background: #020202; box-shadow: 0 0 6px #000;
}

/* Grid für die kleinen „Objekt-Icons“ */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px; justify-items: center;
}
.catalogue-item img {
  display: block; width: 56px; height: 56px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 2px #000);
  animation: float 3s ease-in-out infinite;
}
.catalogue-item:nth-child(3n) img { animation-duration: 3.6s; }
.catalogue-item:nth-child(4n) img { animation-duration: 2.6s; }

.catalogue-item:hover img {
  transform: translateY(-4px) scale(1.05) rotate(-3deg);
  transition: transform 0.15s;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ====== REGISTRY / UPDATES (Logliste) ====== */
.log-list {
  font-family: "JetBrains Mono","Fira Mono","Consolas",monospace;
  font-size: 0.82rem; margin-top: 6px;
}
.log-item {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: 2px;
}
.log-date { width: 60px; color: #888; }
.log-label { color: #ff4444; margin-right: 4px; }
.log-link a { color: #f5f5f5; }
.log-link a:hover { color: #00ff88; }

/* ====== MEDIAWIKI-KOMPAT (Galerien/Thumbs/Formulare) ====== */
.thumb { background: transparent; border: none; }
.thumb .thumbinner {
  background: #070707; border: 1px solid #333; color: #ddd;
}
.gallerybox, .gallerytext {
  background: #080808; border: 1px solid #333; color: #ddd;
}
input, textarea, select {
  background: #0b0b0b; color: #e8e8e8;
  border: 1px solid #333; outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: #00ff88; box-shadow: 0 0 0 2px rgba(0,255,136,0.15);
}

/* ====== RESPONSIVE (kleinere Screens) ====== */
@media (max-width: 1200px) {
  body::before, body::after { width: 70px; }
}
@media (max-width: 980px) {
  body::before, body::after { display: none; }
  .mw-body, #content { margin: 12px auto 24px; padding: 14px 14px 20px; }
  .infobox, table.infobox, .infobox-character, .infobox-charakter {
    float: none; margin: 10px 0; width: 100%;
  }
  .catalogue-wrapper {
    grid-template-columns: 1fr; gap: 14px;
  }
  .catalogue-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 520px) {
  .catalogue-grid { grid-template-columns: repeat(4, 1fr); }
}