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=4');

    /* Hintergründe */
    --bg-body:            #333333;          /* Hintergrundfarbe hinter dem Content (sichtbar nur außerhalb) */
    --bg-header:          #a1a1a1;
    --bg-content:         #999999;          /* Cremefarbener Papier-Hintergrund Hauptinhalt */
    --bg-content-alt:     #ede4d8;

    --bg-editor: #111111;
    --bg-editor-base: #111111;
    --bg-highlight: #00ff0000;


    --height-wiki-header: 5vh;


    /* Text */
    --color-dedault: #222222;
    --color-primary:       #333333;          /* Haupttext */
    --color-heading:       #2e2010;          /* Überschriften */
    --color-muted:         #6b5c47;          /* Sekundärtext, Beschriftungen */
    --color-link:          #112266;
    --color-link-hover:    #3d2208;
    --color-header:        #222222;          /* Text im dunklen Header */
    --color-editor:        #cccccc;          /* Text im Editor */

    /* Rahmen */
    --border-color:       #c9b99a;
    --border-strong:      #a8906e;
    --border-header:      #4a3520;

    --border-header: 5px solid #666666;
    --border-wrapper: 3px solid #333333;

    /* Page Actions */
    
    --bg-page-header-link: #bbbbbb;
    --border-page-header-link: 2px solid #333333;
    --br-page-header-link: 5px;

    --color-page-header-link: #333333;
    --ff-page-header-link: "Inter", serif;
    --fs-page-header-link: 0.8rem;
    --fw-page-header-link: 500;

    /* Sidebar */
    --bg-sidebar-panel: #67676767;
    --border-sidebar-panel: 5px solid #cccccc99;
    --color-sidebar-panel-label:  #101010;
    --color-sidebar-panel: #111111;/* #00ff00; */

    /* Akzent */
    --accent:             #7a4f2a;

    /* Typografie */
    --ff-body: "Rubik", serif;
    --ff-wiki-title: "Object Sans", serif;
    --ff-header-box: "Rubik", serif;

    --fw-body: 400;
    --fw-wiki-title: 300;
    --fw-sidebar-panel-header: 700;

    --fs-body: 1.0rem;
    --fs-wiki-title: clamp(0, 1.4rem);
    --fs-sidebar-panel-header: 1.2rem;
    --fs-content-intro: 1.5rem;

    --lh-body: 1.7;
    --lh-wiki-title: 1;

    /* Spezialseiten (immer dunkel — eigene Tokens, nie überschreiben) */
    --bg-special:         #111111;
    --color-special:       #cccccc;
    --border-special:     #333333;
    --bg-special-panel:   #1a1a1a;
    --link-special:       #8ab4f8;



    /* Hyper Box */
    --bg-hyper-box: #333a33;
    --border-hyper-box: 3px solid #333333;
    --br-hyper-box: 10px;
    --pad-hyper-box: 5% 0%;
    --gap-hyper-box: 30px;

    --mar-hyper-box-text: 0 30px;

    --bg-hyper-box-icon: #ffffffcc;

    --color-hyper-box-title: #d0aaaa;
    --fs-hyper-box-title: 1.5rem;
    --fw-hyper-box-title: 700;

    --color-hyper-box-desc: #cccccc;
    --fs-hyper-box-desc: 1.2rem;
    --fw-hyper-box-desc: 550;
}


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

    --color-primary:       #cccccc;
    --color-heading:       #e8dfc8;
    --color-muted:         #888888;
    --color-link:          #8ab4f8;
    --color-link-hover:    #aaccff;
    --color-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 */
}

#mw-wrapper
{
    padding-top: 0px !important;
}


/* =====================================================================
   EDITOR
===================================================================== */


.mw-editform
{
    background: var(--bg-editor-base) !important;
}

.editOptions
{
    background: var(--bg-editor-base) !important;
    border: 10px solid #dd6666;

}


/* =====================================================================
   HEADER (immer dunkel — ist so gewünscht)
===================================================================== */

#mw-header-container 
{
    height: var(--height-wiki-header) !important;
    
    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: var(--border-header) !important;
}

#mw-header 
{
    width: 100% !important;
    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;
}

#p-logo-text 
{
    min-width: 0 !important;
    max-width: none !important;
    width: 0 !important;

    flex: 1 1 0 !important;
    overflow: hidden !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;


    color: var(--color-header) !important;
    font-family: var(--ff-wiki-title) !important;
    font-weight: var(--fw-wiki-title) !important;

    /* background: #ff0000 !important; */
}

#p-banner 
{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-header) !important;
    font-size: var(--fs-wiki-title) !important;
    line-height: var(--lh-wiki-title) !important;
    text-align: center !important;
}

#p-search 
{
    flex: 3 1 0 !important;
    min-width: 0 !important;

    /* background: #00ff00 !important; */
}

/* Suchfeld im Header */
#searchInput 
{
    background: #3a2d1e !important;
    color: #e8dfc8 !important;
    border: 1px solid #5a4530 !important;
}

#searchInput::placeholder 
{
    color: #8a7a60 !important;
}

#user-tools 
{
    min-width: 0 !important;
    width: 0 !important;

    flex: 1 1 0 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--color-header) !important;

    /* background: #0000ff !important; */
}

/* Verstecke Timeless-Farbbalken */
#mw-header-hack,
#mw-header-nav-hack 
{
    display: none !important;
}


/* =====================================================================
   SIDEBAR
===================================================================== */

#mw-site-navigation 
{
    background: transparent !important;
}

.sidebar-chunk 
{
    background: var(--bg-sidebar-panel) !important;
    border: var(--border-sidebar-panel) !important;

    color: var(--color-sidebar-panel) !important;
}

.sidebar-chunk h2 
{
    color: var(--color-heading) !important;
}

.mw-portlet
{
    background: transparent !important;
}

.mw-page-header-link .tools-inline
{
    background: var(--bg-page-header-link) !important;
    border: var(--border-page-header-link) !important;
    border-radius: var(--br-page-header-link) !important;

    color: var(--color-page-header-link) !important;
    font-family: var(--ff-page-header-link) !important;
    font-size: var(--fs-page-header-link) !important;
    font-weight: var(--fw-page-header-link) !important;
}

#p-pagemisc-label,
#p-navigation-label,
#p-tb-label,
#p-cactions-label
{
    color: var(--color-sidebar-panel-label) !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;
}


/* =====================================================================
   HAUPTINHALT
===================================================================== */

#mw-content-container 
{
    margin: var(--height-wiki-header) !important;

    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(--color-primary) !important;
    font-family: var(--ff-body) !important;
    font-weight: var(--fw-body) !important;
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
}

#mw-content,
#content 
{
    background: transparent !important;
    color: var(--color-primary) !important;
}

/* Seitenüberschrift */
h1.firstHeading 
{
    color: var(--color-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(--color-heading) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Fließtext Links */
.mw-parser-output a,
#bodyContent a 
{
    color: var(--color-link) !important;
}

.mw-parser-output a:hover,
#bodyContent a:hover 
{
    color: var(--color-link-hover) !important;
}

/* Tabs (Lesen / Quelltext / Geschichte) */
.ca-nstab-main,
#p-views a,
#p-namespaces a 
{
    color: var(--color-primary) !important;
}

/* "Aus The Alchenomicon Wiki" Unterzeile */
#siteSub 
{
    color: var(--color-muted) !important;
}

/* Inhaltsverzeichnis */
#toc 
{
    background: var(--bg-content-alt) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--color-primary) !important;
}

#toc a 
{
    color: var(--color-link) !important;
}

/* Tabellen im Artikel (wikitable) */
.wikitable 
{
    background: var(--bg-content-alt) !important;
    border-color: var(--border-strong) !important;
    color: var(--color-primary) !important;
}

.wikitable th 
{
    background: var(--bg-content-alt) !important;
    color: var(--color-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(--color-muted) !important;
}

#catlinks a 
{
    color: var(--color-link) !important;
}

/* Druckfußnote */
.printfooter 
{
    color: var(--color-muted) !important;
    border-top: 1px solid var(--border-color) !important;
}

.content-block-container
{
    background: var(--bg-highlight);
}

.content-text-intro
{
    font-size: var(--fs-content-intro);
}



/* =====================================================================
   FOOTER
===================================================================== */

#mw-footer-container 
{
    background: var(--bg-content-alt) !important;
    border-top: 1px solid var(--border-strong) !important;
    color: var(--color-muted) !important;
}

#mw-footer a 
{
    color: var(--color-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(--color-editor) !important;
}

body.action-edit #mw-content-wrapper,
body.action-submit #mw-content-wrapper 
{
    background: #1a1a1a !important;
    color: var(--color-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;
}


/* =====================================================================
   HYPER BOXES (Hauptseite Kästchen)
===================================================================== */

.content-block-heading {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3em;
}

.hyper-grid 
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    margin-top: 1em;
}

.hyper-box 
{
    background: var(--bg-hyper-box);
    border: var(--border-hyper-box);
    border-radius: var(--br-hyper-box);

    padding: var(--pad-hyper-box);
    gap: var(--gap-hyper-box);
    text-align: center;
    text-decoration: none;
    display: block;
}

.hyper-box-icon 
{

    background: var(--bg-hyper-box-icon);

    font-size: 2.3em;
}

.hyper-box-title 
{
    margin: var(--mar-hyper-box-text);

    font-weight: var(--fw-hyper-box-title);
    font-size: var(--fs-hyper-box-title);
    color: var(--color-hyper-box-title);
}

.hyper-box-desc 
{
    margin: var(--mar-hyper-box-text);

    font-weight: var(--fw-hyper-box-desc);
    font-size: var(--fs-hyper-box-desc);
    color: var(--color-hyper-box-desc);
}


/* =====================================================================
   SPEZIALSEITEN — IMMER DUNKEL
   Gilt für alle Seiten im Special:-Namensraum
===================================================================== */

body.ns-special 
{
    background-color: var(--bg-special) !important;
    color: var(--color-special) !important;
}

body.ns-special #mw-content-wrapper 
{
    background: var(--bg-special-panel) !important;
    color: var(--color-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(--color-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;
}

.mw-parser-output .mw-editsection a
{
    color: var(--color-page-header-link) !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(--color-primary) !important;
}

/* Infobox Tabellenzellen */
.infobox-charakter th,
.infobox-staat th,
.infobox-stadt th,
.infobox-fraktion th,
.infobox-stern th 
{
    color: var(--color-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(--color-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(--color-heading) !important;
    border-color: var(--border-strong) !important;
}