MediaWiki:Timeless.css
Aus The Alchenomicon Wiki
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
/* =====================================================================
MediaWiki:Timeless.css — The Alchenomicon Wiki
Skin: Timeless
Token-System: Alle Farben als CSS Custom Properties.
Light Mode ist Standard (cremefarbenes Papier-Theme).
Dark Mode via prefers-color-scheme: dark.
color-scheme: dark im Dark Mode → Dark Reader deaktiviert sich automatisch.
Spezialseiten & Editor: Immer dunkel, unabhängig vom Theme.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
/* =====================================================================
TOKENS — LIGHT MODE (Standard)
===================================================================== */
:root
{
color-scheme: light;
/* Hintergrundbild */
--bi-body: url('https://thealchenomiconwiki.com/images/8/8e/BackgroundImage_Main.png?v=4');
/* Hintergründe */
--bg-body: #c8b89a; /* Hintergrundfarbe hinter dem Content (sichtbar nur außerhalb) */
--bg-content: #c9b59c; /* Cremefarbener Papier-Hintergrund Hauptinhalt */
--bg-content-alt: #ede4d8; /* Leicht dunkler: Sidebar-Panels, Infoboxen */
--bg-header: #2a1f14; /* Header: dunkel, kontraststark */
--bg-editor: #111111; /* Editor/Quelltext: immer dunkel */
/* Text */
--text-primary: #cccccc; /* Haupttext */
--text-heading: #2e2010; /* Überschriften */
--text-muted: #6b5c47; /* Sekundärtext, Beschriftungen */
--text-link: #5a3a1a; /* Links */
--text-link-hover: #3d2208;
--text-header: #e8dfc8; /* Text im dunklen Header */
--text-editor: #cccccc; /* Text im Editor */
/* Rahmen */
--border-color: #c9b99a;
--border-strong: #a8906e;
--border-header: #4a3520;
/* Sidebar */
--bg-sidebar-panel: rgba(240, 232, 218, 0.92);
--sidebar-link: #5a3a1a;
/* Akzent */
--accent: #7a4f2a;
/* Typografie */
--ff-wiki-title: "Object Sans", serif;
--ff-header-box: "Rubik", serif;
--fw-wiki-title: 300;
--fw-sidebar-panel-header: 700;
--fs-wiki-title: clamp(0, 1.4rem);
--fs-sidebar-panel-header: 1.2rem;
--lh-wiki-title: 1;
/* Spezialseiten (immer dunkel — eigene Tokens, nie überschreiben) */
--bg-special: #111111;
--text-special: #cccccc;
--border-special: #333333;
--bg-special-panel: #1a1a1a;
--link-special: #8ab4f8;
}
/* =====================================================================
TOKENS — DARK MODE
Aktiviert via prefers-color-scheme: dark.
color-scheme: dark → Dark Reader erkennt nativen Dark Mode
und deaktiviert sich automatisch.
===================================================================== */
body.dark
{
color-scheme: dark;
--bg-body: #0d0d0d;
--bg-content: #1a1a1a;
--bg-content-alt: #111111;
--bg-header: #1a1a1a;
--text-primary: #cccccc;
--text-heading: #e8dfc8;
--text-muted: #888888;
--text-link: #8ab4f8;
--text-link-hover: #aaccff;
--text-header: #e8dfc8;
--border-color: #444444;
--border-strong: #555555;
--border-header: #330077;
--bg-sidebar-panel: rgba(23, 16, 31, 0.75);
--sidebar-link: #8ab4f8;
--accent: #8ab4f8;
}
/* =====================================================================
BODY & WRAPPER
===================================================================== */
body.mediawiki
{
margin: 0 !important;
padding: 0 !important;
background-color: var(--bg-body) !important;
background-image: none !important; /* Kein Hintergrundbild im Light Mode */
}
@media (prefers-color-scheme: dark)
{
body.mediawiki
{
background-image: var(--bi-body) !important;
background-size: cover !important;
background-attachment: fixed !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
#mw-wrapper
{
padding-top: 0px !important;
}
/* =====================================================================
HEADER (immer dunkel — ist so gewünscht)
===================================================================== */
#mw-header-container
{
position: fixed !important;
margin: 0 !important;
padding: 0 15% !important;
z-index: 100 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--bg-header) !important;
border-bottom: 2px solid var(--border-header) !important;
}
#mw-header
{
width: 100%;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: stretch !important;
border-left: 4px solid var(--bg-content) !important;
border-right: 4px solid var(--bg-content) !important;
}
@media (prefers-color-scheme: dark)
{
#mw-header
{
border-left-color: #1a1a1a !important;
border-right-color: #1a1a1a !important;
}
}
#p-logo-text
{
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
color: var(--text-header) !important;
font-family: var(--ff-wiki-title) !important;
font-weight: var(--fw-wiki-title) !important;
}
#p-banner
{
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--text-header) !important;
font-size: var(--fs-wiki-title) !important;
line-height: var(--lh-wiki-title) !important;
text-align: center !important;
}
#p-banner a
{
color: var(--text-header) !important;
}
#p-search
{
flex: 4 !important;
}
/* Suchfeld im Header */
#searchInput
{
background: #3a2d1e !important;
color: #e8dfc8 !important;
border: 1px solid #5a4530 !important;
}
#searchInput::placeholder
{
color: #8a7a60 !important;
}
@media (prefers-color-scheme: dark)
{
#searchInput
{
background: #222 !important;
color: #ccc !important;
border-color: #444 !important;
}
#searchInput::placeholder
{
color: #666 !important;
}
}
#user-tools
{
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--text-header) !important;
}
#user-tools a,
#personal a
{
color: #c8b89a !important;
}
/* Verstecke Timeless-Farbbalken */
#mw-header-hack,
#mw-header-nav-hack
{
display: none !important;
}
/* =====================================================================
HAUPTINHALT
===================================================================== */
#mw-content-container
{
display: flex !important;
justify-content: center !important;
background: transparent !important;
}
#mw-content-block
{
width: 80%;
margin: 0;
padding: 0;
display: flex !important;
justify-content: center !important;
background: transparent !important;
}
#mw-content-wrapper
{
margin: 0;
padding: 0;
background: var(--bg-content) !important;
border: 2px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
#mw-content,
#content
{
background: transparent !important;
color: var(--text-primary) !important;
}
/* Seitenüberschrift */
h1.firstHeading
{
color: var(--text-heading) !important;
border-bottom: 1px solid var(--border-strong) !important;
}
/* Wiki-Überschriften im Artikel */
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4
{
color: var(--text-heading) !important;
border-bottom: 1px solid var(--border-color) !important;
}
/* Fließtext Links */
.mw-parser-output a,
#bodyContent a
{
color: var(--text-link) !important;
}
.mw-parser-output a:hover,
#bodyContent a:hover
{
color: var(--text-link-hover) !important;
}
/* Tabs (Lesen / Quelltext / Geschichte) */
.ca-nstab-main,
#p-views a,
#p-namespaces a
{
color: var(--text-primary) !important;
}
/* "Aus The Alchenomicon Wiki" Unterzeile */
#siteSub
{
color: var(--text-muted) !important;
}
/* Inhaltsverzeichnis */
#toc
{
background: var(--bg-content-alt) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
#toc a
{
color: var(--text-link) !important;
}
/* Tabellen im Artikel (wikitable) */
.wikitable
{
background: var(--bg-content-alt) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
}
.wikitable th
{
background: var(--bg-content-alt) !important;
color: var(--text-heading) !important;
border-color: var(--border-strong) !important;
}
.wikitable td
{
border-color: var(--border-color) !important;
}
/* Kategorie-Leiste */
#catlinks
{
background: var(--bg-content-alt) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-muted) !important;
}
#catlinks a
{
color: var(--text-link) !important;
}
/* Druckfußnote */
.printfooter
{
color: var(--text-muted) !important;
border-top: 1px solid var(--border-color) !important;
}
/* =====================================================================
SIDEBAR
===================================================================== */
#mw-site-navigation
{
background: transparent !important;
}
.sidebar-chunk
{
background: var(--bg-sidebar-panel) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
.sidebar-chunk h2
{
color: var(--text-heading) !important;
}
.mw-portlet
{
background: transparent !important;
}
#p-pagemisc-label,
#p-navigation-label
{
color: var(--text-muted) !important;
font-family: var(--ff-header-box) !important;
font-weight: var(--fw-sidebar-panel-header) !important;
font-size: var(--fs-sidebar-panel-header) !important;
}
#mw-site-navigation a,
#mw-related-navigation a
{
color: var(--sidebar-link) !important;
}
/* Leere Sidebar-Boxen ausblenden */
#site-tools .emptyPortlet
{
display: none !important;
}
#site-tools:has(.emptyPortlet:only-child)
{
display: none !important;
}
/* =====================================================================
FOOTER
===================================================================== */
#mw-footer-container
{
background: var(--bg-content-alt) !important;
border-top: 1px solid var(--border-strong) !important;
color: var(--text-muted) !important;
}
#mw-footer a
{
color: var(--text-link) !important;
}
/* =====================================================================
EDITOR & QUELLTEXT — IMMER DUNKEL
Gilt für: Bearbeiten-Seiten, Quelltext-Ansicht, WikiEditor, VisualEditor
===================================================================== */
/* Alle Bearbeiten-Seiten (action=edit, action=submit) */
body.action-edit,
body.action-submit
{
background-color: var(--bg-editor) !important;
color: var(--text-editor) !important;
}
body.action-edit #mw-content-wrapper,
body.action-submit #mw-content-wrapper
{
background: #1a1a1a !important;
color: var(--text-editor) !important;
border-color: #333 !important;
}
body.action-edit h1.firstHeading,
body.action-submit h1.firstHeading
{
color: #e8dfc8 !important;
border-color: #444 !important;
}
/* Das eigentliche Textfeld */
#wpTextbox1,
.mw-editfont-monospace,
.CodeMirror,
.CodeMirror-scroll,
.ve-ce-surface,
.wikiEditor-ui-text textarea
{
background: #0d0d0d !important;
color: #cccccc !important;
border: 1px solid #333 !important;
caret-color: #e8dfc8 !important;
}
/* WikiEditor Toolbar */
.wikiEditor-ui-toolbar,
.wikiEditor-ui
{
background: #222 !important;
border-color: #333 !important;
color: #ccc !important;
}
.wikiEditor-ui-toolbar .group
{
border-color: #444 !important;
}
/* Edit-Buttons (Speichern, Vorschau etc.) */
body.action-edit .editButtons,
body.action-submit .editButtons
{
background: #1a1a1a !important;
}
/* Edit-Zusammenfassungsfeld */
#wpSummary
{
background: #111 !important;
color: #ccc !important;
border-color: #333 !important;
}
/* Checkboxen und Labels im Edit-Formular */
body.action-edit .editCheckboxes label,
body.action-submit .editCheckboxes label
{
color: #aaa !important;
}
/* Vorschaubereich beim Bearbeiten */
#wikiPreview
{
background: #1a1a1a !important;
color: #ccc !important;
border: 1px solid #333 !important;
}
/* Edit-Seite: Links in der Sidebar ebenfalls hell */
body.action-edit #mw-site-navigation a,
body.action-submit #mw-site-navigation a
{
color: #8ab4f8 !important;
}
/* =====================================================================
SPEZIALSEITEN — IMMER DUNKEL
Gilt für alle Seiten im Special:-Namensraum
===================================================================== */
body.ns-special
{
background-color: var(--bg-special) !important;
color: var(--text-special) !important;
}
body.ns-special #mw-content-wrapper
{
background: var(--bg-special-panel) !important;
color: var(--text-special) !important;
border-color: var(--border-special) !important;
}
body.ns-special h1.firstHeading
{
color: #e8dfc8 !important;
border-color: #444 !important;
}
body.ns-special .mw-parser-output,
body.ns-special #bodyContent
{
color: var(--text-special) !important;
}
body.ns-special a
{
color: var(--link-special) !important;
}
body.ns-special .wikitable
{
background: #1f1f1f !important;
border-color: #444 !important;
color: #ccc !important;
}
body.ns-special .wikitable th
{
background: #2a2a2a !important;
color: #e8dfc8 !important;
border-color: #444 !important;
}
body.ns-special .sidebar-chunk
{
background: rgba(23, 16, 31, 0.75) !important;
border-color: #444 !important;
color: #ccc !important;
}
body.ns-special #mw-site-navigation a,
body.ns-special #mw-related-navigation a
{
color: var(--link-special) !important;
}
body.ns-special #catlinks
{
background: #1a1a1a !important;
border-color: #333 !important;
color: #888 !important;
}
body.ns-special #mw-footer-container
{
background: #111 !important;
border-color: #333 !important;
color: #666 !important;
}
body.ns-8 div.mw-highlight,
body.ns-8 div.mw-highlight pre
{
background: #0d0d0d !important;
color: #cccccc !important;
}
/* =====================================================================
QUELLTEXT-ANZEIGE (Highlight-Ansicht auf CSS/JS/Lua-Seiten)
Betrifft: div.mw-highlight, pre — die Seite wo Code angezeigt wird
Immer dunkel, unabhängig vom Theme.
===================================================================== */
div.mw-highlight,
div.mw-highlight pre,
div.mw-code,
#content div.mw-highlight,
#bodyContent div.mw-highlight,
.mw-parser-output div.mw-highlight,
.mw-highlight
{
background: #0d0d0d !important;
color: #cccccc !important;
border: 1px solid #333 !important;
}
/* Zeilennummern */
div.mw-highlight td.mw-linenos,
div.mw-highlight .ln
{
background: #1e1e1e !important;
color: #606060 !important;
border-right: 1px solid #333 !important;
}
#mw-content-text div.mw-highlight,
#mw-content-text div.mw-highlight pre,
#mw-content-text div.mw-highlight td {
background: #0d0d0d !important;
color: #cccccc !important;
border: 1px solid #333 !important;
}
#mw-content-text div.mw-highlight td.mw-linenos {
background: #1e1e1e !important;
color: #606060 !important;
border-right: 1px solid #333 !important;
}
/* Syntax-Highlighting Farben im Dark Context erhalten */
div.mw-highlight .c,
div.mw-highlight .c1,
div.mw-highlight .cm { color: #6a9955 !important; } /* Kommentare: Grün */
div.mw-highlight .s,
div.mw-highlight .s1,
div.mw-highlight .s2 { color: #ce9178 !important; } /* Strings: Orange */
div.mw-highlight .k,
div.mw-highlight .kd { color: #569cd6 !important; } /* Keywords: Blau */
div.mw-highlight .nt { color: #4ec9b0 !important; } /* Tag names */
div.mw-highlight .na { color: #9cdcfe !important; } /* Attribute names */
div.mw-highlight .nv { color: #9cdcfe !important; } /* Variablen */
div.mw-highlight .mi { color: #b5cea8 !important; } /* Zahlen */
div.mw-highlight .err { color: #f44747 !important; } /* Fehler */
/* Zeilennummern */
div.mw-highlight .ln,
div.mw-highlight td.ln
{
color: #555 !important;
border-right: 1px solid #333 !important;
background: #111 !important;
user-select: none;
}
/* Auch plain <pre>-Blöcke im Artikel immer dunkel */
.mw-parser-output pre
{
background: #0d0d0d !important;
color: #cccccc !important;
border: 1px solid #333 !important;
}
/* =====================================================================
SONSTIGES
===================================================================== */
/* Bildchronik-Container (bestehendes Feature) */
.bildchronik-container figure,
.bildchronik-container figure a,
.bildchronik-container figure img
{
height: 100% !important;
width: auto !important;
max-width: none !important;
display: block !important;
}
/* Infoboxen: im Light Mode anpassen */
/* Die Inline-Styles in den Infobox-Templates überschreiben wir hier */
.infobox-charakter,
.infobox-staat,
.infobox-stadt,
.infobox-fraktion,
.infobox-stern
{
background: var(--bg-content-alt) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
}
/* Infobox Tabellenzellen */
.infobox-charakter th,
.infobox-staat th,
.infobox-stadt th,
.infobox-fraktion th,
.infobox-stern th
{
color: var(--text-muted) !important;
border-color: var(--border-color) !important;
}
.infobox-charakter td,
.infobox-staat td,
.infobox-stadt td,
.infobox-fraktion td,
.infobox-stern td
{
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
/* Infobox Kopfzeile (Name) */
.infobox-charakter tr:first-child td,
.infobox-staat tr:first-child td,
.infobox-stadt tr:first-child td,
.infobox-fraktion tr:first-child td,
.infobox-stern tr:first-child td
{
color: var(--text-heading) !important;
border-color: var(--border-strong) !important;
}
