Hauptseite
/* =====================================================================
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-default: serif; --ff-wiki-title: "Object Sans", serif; --ff-header-box: "Rubik", serif;
--fw-body: 400; --fw-wiki-title: 300; --fw-sidebar-panel-header: 700; --fw-content-intro: 500;
--fs-body: 1.0rem; --fs-wiki-title: clamp(0, 1.4rem); --fs-sidebar-panel-header: 1.2rem; --fs-content-intro: 1.25rem;
--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: #d0cccc; --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 {
color: var(--color-default); font-family: var(--ff-default); font-size: var(--fs-content-intro); font-weight: var(--fw-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
-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;
}
