MediaWiki:Common.css

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

/* ── Happylab Berlin – Dark Theme für Vector 2022 ── */

/* MW Vector 2022 CSS Custom Properties überschreiben */
:root,
.skin-vector-2022 {
    --background-color-base: #0a0a0a !important;
    --background-color-interactive: #111111 !important;
    --background-color-interactive-subtle: #1a1a1a !important;
    --background-color-neutral: #111111 !important;
    --background-color-neutral-subtle: #0a0a0a !important;
    --color-base: #e0e0e0 !important;
    --color-subtle: #888888 !important;
    --color-link: #39ff14 !important;
    --color-link-visited: #39ff14 !important;
    --color-link-red: #ff6b6b !important;
    --border-color-base: #2a2a2a !important;
    --border-color-interactive: #333333 !important;
    --background-color-button-quiet--hover: #1a1a1a !important;
}

/* Night-mode-Klassen deaktivieren */
html.skin-vector-feature-night-mode-clientpref-1,
html.skin-vector-feature-night-mode-clientpref-0 {
    --background-color-base: #0a0a0a !important;
    --color-base: #e0e0e0 !important;
    --color-link: #39ff14 !important;
    --border-color-base: #2a2a2a !important;
}


:root {
    --hl-bg: #0a0a0a;
    --hl-bg2: #111111;
    --hl-bg3: #1a1a1a;
    --hl-border: #2a2a2a;
    --hl-accent: #39ff14;
    --hl-text: #e0e0e0;
    --hl-muted: #666;
}

/* ── Haupt-Container ── */
html, body,
.skin-vector,
.skin-vector-2022,
.vector-page-container,
.mw-page-container,
.mw-page-container-inner,
.vector-body,
.mw-body,
#content,
#mw-content-text {
    background: var(--hl-bg) !important;
    color: var(--hl-text) !important;
}

/* ── Header ── */
.vector-header-container,
.vector-header,
#mw-header,
header.mw-header {
    background: var(--hl-bg2) !important;
    border-bottom: 1px solid var(--hl-border) !important;
    box-shadow: none !important;
}

/* ── Suchfeld ── */
.cdx-search-input,
.cdx-text-input,
.cdx-text-input__input,
#searchInput {
    background: var(--hl-bg3) !important;
    color: var(--hl-text) !important;
    border-color: var(--hl-border) !important;
}
.cdx-search-input__start-icon {
    color: var(--hl-muted) !important;
}

/* ── Suchbutton ── */
.cdx-button--action-progressive,
.cdx-button--weight-primary {
    background: var(--hl-accent) !important;
    color: #000 !important;
    border: none !important;
    font-weight: bold !important;
}
.cdx-button--action-progressive:hover {
    background: #fff !important;
    color: #000 !important;
}

/* ── Sidebar / Navigation ── */
.vector-column-start,
.mw-portlet,
#mw-panel,
.vector-main-menu-container,
.vector-toc-container,
.vector-sticky-header {
    background: var(--hl-bg2) !important;
    border-color: var(--hl-border) !important;
}

/* ── Seitenleisten-Menü ── */
.vector-menu-heading,
.mw-portlet-label,
.vector-main-menu .vector-menu-heading {
    color: var(--hl-muted) !important;
    font-family: monospace !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--hl-border) !important;
}

/* ── Tabs (Lesen / Bearbeiten etc.) ── */
.vector-page-toolbar,
.vector-page-toolbar-container {
    background: var(--hl-bg2) !important;
    border-bottom: 1px solid var(--hl-border) !important;
    box-shadow: none !important;
}
.mw-list-item a,
.vector-menu-tabs .mw-list-item a {
    color: var(--hl-muted) !important;
}
.mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a {
    color: var(--hl-accent) !important;
    border-bottom: 2px solid var(--hl-accent) !important;
}

/* ── Links ── */
a, a:visited,
.mw-body-content a,
.vector-main-menu a {
    color: var(--hl-accent) !important;
    text-decoration: none !important;
}
a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}
a.new { color: #ff6b6b !important; } /* Rotlink = fehlende Seite */

/* ── Überschriften ── */
h1, h2, h3, h4, h5, h6,
.mw-first-heading,
.mw-page-title-main {
    font-family: monospace !important;
    color: #fff !important;
    border-bottom: 1px solid var(--hl-border) !important;
}

/* ── Inhaltsverzeichnis ── */
.vector-toc,
.mw-table-of-contents-container {
    background: var(--hl-bg2) !important;
    border: 1px solid var(--hl-border) !important;
}
.vector-toc a { color: var(--hl-accent) !important; }
.vector-toc .vector-toc-numb { color: var(--hl-muted) !important; }

/* ── Tabellen ── */
table.wikitable,
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: var(--hl-bg2) !important;
    border-color: var(--hl-border) !important;
    color: var(--hl-text) !important;
}
table.wikitable > * > tr > td {
    border-color: var(--hl-border) !important;
}
table.wikitable tr:hover td {
    background: var(--hl-bg3) !important;
}

/* ── Code / Pre ── */
code, pre, .mw-code {
    background: var(--hl-bg3) !important;
    color: var(--hl-accent) !important;
    border: 1px solid var(--hl-border) !important;
}

/* ── Hinweisboxen ── */
.mw-message-box-notice { background: #0d1a0d !important; border-color: var(--hl-accent) !important; }
.mw-message-box-warning { background: #1a1400 !important; border-color: #ffaa00 !important; }
.mw-message-box-error { background: #1a0000 !important; border-color: #ff4444 !important; }

/* ── Kategorie-Box ── */
.catlinks {
    background: var(--hl-bg2) !important;
    border: 1px solid var(--hl-border) !important;
    color: var(--hl-muted) !important;
}

/* ── Footer ── */
.mw-footer, #footer {
    background: var(--hl-bg2) !important;
    border-top: 1px solid var(--hl-border) !important;
    color: var(--hl-muted) !important;
}
.mw-footer a, #footer a {
    color: var(--hl-muted) !important;
}
.mw-footer a:hover, #footer a:hover {
    color: var(--hl-accent) !important;
}

/* ── Bearbeitungsformular ── */
#wpTextbox1, .mw-editfont-monospace {
    background: var(--hl-bg3) !important;
    color: var(--hl-text) !important;
    border: 1px solid var(--hl-border) !important;
}
.editOptions, .editCheckboxes {
    background: var(--hl-bg2) !important;
    border: 1px solid var(--hl-border) !important;
}

/* ── User-Menü oben rechts ── */
.vector-user-menu,
.mw-portlet-personal {
    background: transparent !important;
}
.vector-user-menu a {
    color: var(--hl-muted) !important;
}

/* ── Sticky Header ── */
.vector-sticky-header {
    background: var(--hl-bg2) !important;
    border-bottom: 1px solid var(--hl-border) !important;
}