MediaWiki:Timeless.css: Unterschied zwischen den Versionen

/* =====================================================================
   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=2');

    /* Hintergründe */
    --bg-body:            #c8b89a;          /* Hintergrundfarbe hinter dem Content (sichtbar nur außerhalb) */
    --bg-content:         #f5efe6;          /* 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:       #1e1a14;          /* 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.
===================================================================== */

@media (prefers-color-scheme: dark) 
{
    :root 
{
        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;
}


/* =====================================================================
   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;
}

/* 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;
}