|
|
| Zeile 1: |
Zeile 1: |
| /************************************************************ | | /* Global */ |
| MIKE-KLUBNIKA-STYLE für MediaWiki
| | body { |
| - Schwarzer Hintergrund, diagonale Seitenstreifen
| | background-color: #000; |
| - 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; | | color: #f5f5f5; |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; | | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 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 */ | | /* Content-Box im Zentrum, mit brutalistischem Rahmen */ |
| .mw-body, #content { | | .mw-body, #content { |
| max-width: 980px; | | max-width: 960px; |
| margin: 24px auto 40px auto; | | margin: 2.5rem auto 3rem auto; |
| padding: 18px 22px 26px 22px; | | padding: 1.8rem 2rem; |
| background: #050505; | | border: 2px solid #f5f5f5; |
| border: 2px solid #444; | | background: #000; |
| box-shadow: 0 0 16px #000; | | box-shadow: 0 0 0 2px #000; /* wirkt wie doppelte Linie */ |
| } | | } |
|
| |
|
| /* Seitentitel */ | | /* Seitentitel */ |
| .firstHeading { | | .firstHeading { |
| | font-weight: 700; |
| font-size: 2.1rem; | | font-size: 2.1rem; |
| font-weight: 800;
| |
| text-transform: uppercase; | | text-transform: uppercase; |
| letter-spacing: 0.08em; | | letter-spacing: 0.08em; |
| margin-bottom: 0.4rem; | | margin-bottom: 1rem; |
| } | | } |
|
| |
|
| /* Fließtext */ | | /* Untertitel / Einleitung */ |
| .mw-body p { | | #siteSub, |
| line-height: 1.55;
| | .mw-body h1 + .mw-parser-output > p:first-of-type { |
| font-size: 0.96rem;
| | color: #b3b3b3; |
| color: #e3e3e3; | |
| margin: 0.6rem 0 0.9rem;
| |
| } | | } |
|
| |
|
| /* Links (Terminal-Grün) */ | | /* Links: Terminal / Cybergrün */ |
| a, .mw-body a { | | a, |
| | .mw-body a { |
| color: #00ff88; | | color: #00ff88; |
| text-decoration: none; | | text-decoration: none; |
| } | | } |
| a:hover, .mw-body a:hover { text-decoration: underline; } | | a:hover, |
| | .mw-body a:hover { |
| | text-decoration: underline; |
| | } |
|
| |
|
| /* Überschriften-Trennlinie */ | | /* Überschriften */ |
| .mw-body h2, .mw-body h3, .mw-body h4 { | | .mw-body h2, |
| | .mw-body h3, |
| | .mw-body h4 { |
| | text-transform: uppercase; |
| | font-weight: 600; |
| | border-bottom: 1px solid #f5f5f5; |
| | padding-bottom: 0.15rem; |
| margin-top: 1.8rem; | | 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 */ | | /* Listen & Tabellen kompakt */ |
| .mw-body hr { | | .mw-body ul, |
| border: 0;
| | .mw-body ol { |
| border-top: 1px solid #333;
| | margin-left: 1.1rem; |
| margin: 14px 0; | |
| } | | } |
|
| |
| /* Listen & Tabellen kompakt */
| |
| .mw-body ul, .mw-body ol { margin-left: 1.2rem; }
| |
| .mw-body table { | | .mw-body table { |
| border-collapse: collapse; | | border-collapse: collapse; |
| font-size: 0.88rem;
| | border: 1px solid #f5f5f5; |
| margin: 0.6rem 0;
| | font-size: 0.9rem; |
| }
| |
| .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;
| |
| } | | } |
| | | .mw-body th, |
| /* TOC, Tabs, Navigationsleiste minimal */
| | .mw-body td { |
| #toc {
| | border: 1px solid #f5f5f5; |
| background: #080808; border: 1px solid #333; | | padding: 0.3rem 0.5rem; |
| } | | } |
| #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 */ | | /* Footer & Kram entschlacken */ |
| #catlinks, #footer { | | #footer, |
| background: transparent; border: none; color: #777; | | #catlinks { |
| | border: none; |
| | background: transparent; |
| | color: #777; |
| } | | } |
|
| |
|
| /* ====== TOP-LINKLEISTE (wie "homepage · contact · about") ====== */ | | /* Sidebar (falls du maximal clean willst, ausblenden oder minimieren) */ |
| #top-nav {
| | /* auskommentieren, wenn du deine Sidebar behalten willst */ |
| font-size: 0.82rem;
| | /* |
| text-transform: lowercase;
| | #mw-panel, #left-navigation { |
| letter-spacing: 0.08em;
| | display: none; |
| 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) {
| | #mw-head { |
| .catalogue-grid { grid-template-columns: repeat(4, 1fr); } | | padding-top: 0.5rem; |
| } | | } |
| | */ |
