MediaWiki:Common.css: Difference between revisions

Revision as of 16:14, 16 August 2026

/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@300;400;500;600;700&display=swap');
/* everything defaults to the grotesk/sans-serif system font stack */
*,
*::before,
*::after {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
/* page titles only: serif */
#firstHeading,
.firstHeading,
.mw-page-title-main {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
/* ============================================================
   BASE DARK THEME (site-wide, outside the content column)
   ============================================================ */
#p-logo,
.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}
body {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.mw-body {
    background-color: #000 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.mw-headline, .firstHeading, .mw-title {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: "" !important;
    display: none !important;
}
/* remove every divider line MediaWiki draws (headings, menus, tables, footer) */
hr,
.mw-parser-output hr,
.mw-body hr,
.vector-menu-content ul,
.vector-menu-content li,
.vector-menu-tabs li,
.vector-menu-tabs a,
table, th, td,
.mw-panel,
.vector-dropdown,
#footer {
    border: none !important;
    box-shadow: none !important;
}
hr {
    display: none !important;
    height: 0 !important;
}
#mw-head,
#p-personal,
#mw-panel,
#left-navigation,
#right-navigation {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.vector-menu-content,
.vector-menu-content ul {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
input, textarea {
    background-color: #222 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-search input {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
a {
    color: #4aa5ff !important;
}
a:visited {
    color: #9c77ff !important;
}
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
    border: none !important;
    background: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
.vector-dropdown {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#footer, #footer li, #footer a {
    background-color: #000 !important;
    color: #fff !important;
}
/* top tabs (Read / Discussion / Views) */
#p-views .vector-menu-content ul {
    background-color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-views li {
    background-color: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-views a,
#p-views li a,
#p-namespaces li a,
#p-variants li a {
    color: #4aa5ff !important;
    text-decoration: none !important;
}
#p-views a:hover,
#p-views li a:hover,
#p-namespaces li a:hover,
#p-variants li a:hover {
    color: #9c77ff !important;
}
.vector-menu-tabs li,
.vector-menu-tabs a {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
#p-tb {
    display: none;
}
.mw-footer .poweredby {
    display: none !important;
}
#p-navigation h3,
#p-navigation .vector-menu-heading,
#p-navigation .vector-pinnable-header-label {
    display: none !important;
}
/* ============================================================
   TEXT SIZES — content area and sidebar
   ============================================================ */
#content,
.mw-body,
.mw-body-content {
    font-size: 18px !important;
}
#firstHeading, .firstHeading { font-size: 38px !important; }
.mw-body-content h2 { font-size: 32px !important; }
.mw-body-content h3 { font-size: 30px !important; }
.mw-body-content h4 { font-size: 28px !important; }
.vector-legacy-sidebar a,
.portlet a,
.pBody a,
#mw-panel a {
    font-size: 18px !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.portlet h3,
.portlet h5,
.vector-menu-heading,
.mw-portlet .vector-menu-heading,
.vector-pinnable-header-label {
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    margin-left: 0.5em !important;
}
/* ============================================================
   UI CHROME: hide dark-mode toggle, account/login links, talk tab
   ============================================================ */
#pt-darkmode,
#pt-darkmode-sticky-header,
#pt-createaccount,
#pt-login,
#ca-talk {
    display: none !important;
}
/* ============================================================
   PAGE TITLE / TOP SPACING
   ============================================================ */
#content {
    padding-top: 0.6em !important;
    max-width: 1400px !important;
}
#firstHeading, .firstHeading {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    overflow: visible !important;
}
#siteSub, #contentSub, #contentSub2, .mw-indicators {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mw-content-text,
#mw-content-text > .mw-parser-output,
.mw-parser-output > p:first-of-type,
.mw-parser-output > p:first-child,
#mw-content-text p:first-of-type,
#firstHeading + p,
.firstHeading + p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ============================================================
   PRINT: force black-on-white
   ============================================================ */
@media print {
    body, .mw-body, .mw-body-content,
    p, li, td, th, dd, dt,
    h1, h2, h3, h4, h5, h6, .firstHeading,
    a, a:visited {
        color: #000 !important;
        background: #fff !important;
    }
    /* Flattersatz (linksbündig), kein Blocksatz */
    #content, .mw-parser-output,
    #content p, #content li, #content dd, #content dt,
    .mw-parser-output p, .mw-parser-output li {
        text-align: left !important;
    }
}
/* ============================================================================
   CONTENT COLUMN — dark, serif titles, two-column body text, images
   pinned into a right-hand rail.
   This section only restyles #content and what's inside it. The left
   sidebar (#mw-panel / .vector-legacy-sidebar) is untouched on purpose,
   so nav links stay exactly where they are.
   ============================================================================ */
#content,
.mw-body,
.mw-body-content,
#mw-content-text,
#bodyContent {
    background-color: #000000 !important;
    color: #ffffff !important;
}
#content,
#content * {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
#content #firstHeading,
#content .firstHeading {
    font-weight: normal !important;
    font-size: 48px !important;
    color: #ffffff !important;
    background: none !important;
    border-bottom: 3px double #54595d !important;
    padding: 0 0 0.2em 0 !important;
    margin: 0.4em 0 0.3em 0 !important;
    display: block !important;
}
#content h2,
#content .mw-heading2 {
    font-size: 32px !important;
    font-weight: normal !important;
    color: #ffffff !important;
    background: none !important;
    border-bottom: 1px solid #54595d !important;
    padding-bottom: 0.2em !important;
    margin: 1em 0 0.4em 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}
#content .mw-editsection {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
}
#content .mw-editsection a {
    color: #34d399 !important;
}
#content #toc,
#content .toc {
    background: #000000 !important;
    border: 1px solid #54595d !important;
    color: #ffffff !important;
    padding: 0.5em 1.2em !important;
    display: inline-block !important;
    font-size: 19px !important;
}
#content #toc a,
#content .toc a {
    color: #4aa5ff !important;
}
/* --- two-column body text, flowing linearly (column 1 fills before
       column 2 starts) --- */
#content .mw-parser-output {
    position: relative !important; /* anchor for the pinned lead image below */
    column-count: 2 !important;
    column-gap: 2.8em !important;
    column-fill: balance !important;
    width: calc(100% - 340px) !important; /* reserves the right-hand image rail */
}
#content .mw-parser-output > p,
#content .mw-parser-output > ul,
#content .mw-parser-output > ol,
#content .mw-parser-output > dl,
#content .mw-parser-output > table,
#content .mw-parser-output > blockquote {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
    color: #ffffff !important;
    background: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
}
#content .mw-parser-output > ul > li,
#content .mw-parser-output > ol > li {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    break-inside: avoid !important;
    margin: 0 0 1em 0 !important;
}
#content table,
#content th,
#content td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}
#content .mw-parser-output a:link {
    color: #4aa5ff !important;
    text-decoration: none !important;
}
#content .mw-parser-output a:visited {
    color: #9c77ff !important;
}
#content .mw-parser-output a:hover {
    text-decoration: underline !important;
}
/* --- images: no frame, floated into the right-hand rail --- */
#content .thumb,
#content .thumbinner {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
#content .magnify {
    background: transparent !important;
}
#content figure,
#content .mw-default-size,
#content a.mw-file-description {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#content figure img,
#content img.mw-file-element {
    border: none !important;
    width: 100% !important;
    height: auto !important;
}
#content figcaption,
#content .thumbcaption {
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-style: italic !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding: 0.4em 0 0 0 !important;
    margin: 0 !important;
}
/* remove the thin line under thumbnails / captions */
#content .thumb,
#content .thumbinner,
#content figure,
#content figure.mw-halign-right,
#content figure.mw-halign-left,
#content figure.mw-halign-none,
#content figcaption,
#content .thumbcaption,
#content .mw-default-size,
#content a.mw-file-description,
#content a.image,
#content img,
#content img.mw-file-element {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
/* The FIRST image in the article is pinned to the very top of the
   right-hand rail (instead of floating wherever it happens to sit in
   the text flow), matching where a lead image usually belongs. Later
   images/galleries still float into the rail near their own place in
   the text — see below. */
#content .mw-parser-output > figure:first-of-type {
    position: absolute !important;
    top: 0 !important;
    right: -340px !important;
    float: none !important;
    margin: 0 !important;
    width: 300px !important;
    max-width: 300px !important;
}
#content .mw-parser-output > figure:not(:first-of-type) {
    float: right !important;
    clear: right !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 -340px 1.5em 1.5em !important;
}
/* <gallery> blocks (e.g. mode="packed") use different markup
   (ul.gallery > li.gallerybox) than a single <figure>. Earlier this
   pinned them into the right rail; now the FINAL block below moves the
   gallery to the bottom, full width. */
#content .mw-parser-output ul.gallery li.gallerybox .thumb,
#content .mw-parser-output ul.gallery li.gallerybox .thumb > div {
    text-align: left !important;
}
#content .mw-parser-output ul.gallery .gallerytext {
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 0.3em 0 0 0 !important;
}
/* ===== Galerie: unten, volle Breite, MASONRY (lockerer, verschiedene
   Bildhöhen mit Abständen — wie Monoskop, statt starrer Reihen).
   STELLSCHRAUBEN:
     column-count            = Anzahl der Galerie-Spalten (3 → 2 oder 4 ändern)
     column-gap              = horizontaler Abstand zwischen den Spalten
     .gallerybox margin-bottom = vertikaler Abstand zwischen den Bildern
   ===== */
#content .mw-parser-output ul.gallery,
#content .mw-parser-output .mw-gallery-packed {
    /* aus den Seiten-2-Spalten ausbrechen + volle Breite */
    -webkit-column-span: all !important;
    column-span: all !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 1.5em -340px 1em 0 !important;   /* -340px holt den rechten Rail-Platz zurück → volle Breite */
    padding: 0 !important;
    text-align: left !important;
    /* Masonry: Bilder fließen in Spalten mit ihren echten Höhen */
    column-count: 3 !important;
    column-gap: 1.6em !important;
}
#content .mw-parser-output ul.gallery li.gallerybox {
    display: inline-block !important;   /* füllt die Spaltenbreite */
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 1.6em 0 !important;      /* vertikaler Abstand zwischen den Bildern */
    padding: 0 !important;
    vertical-align: top !important;
    break-inside: avoid !important;      /* ein Bild nicht über die Spaltenkante brechen */
}
#content .mw-parser-output ul.gallery li.gallerybox .thumb,
#content .mw-parser-output ul.gallery li.gallerybox .thumb > div,
#content .mw-parser-output ul.gallery li.gallerybox img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
/* ============================================================================
   SPALTEN-UTILITIES  —  pro Abschnitt die Spaltenzahl steuern
   ----------------------------------------------------------------------------
   SCHNELLREFERENZ:
     <div class="onecol">  einspaltig… </div>
     <div class="cols3">   dreispaltig… </div>
     Verfügbar: onecol (1), cols2 (2), cols3 (3), cols4 (4).
   ----------------------------------------------------------------------------
   STANDARD bleibt wie bisher: die GANZE Seite ist 2-spaltig
   (siehe "#content .mw-parser-output { column-count: 2 }" weiter oben).

   Wenn du NUR EINEN Abschnitt anders haben willst, wickle ihn im Wikitext
   in ein <div> mit einer dieser Klassen. Der <div> muss auf einer EIGENEN
   Zeile stehen. Alles davor und danach bleibt normal 2-spaltig.

     <div class="onecol">
     Dieser Abschnitt steht einspaltig über die volle Breite …
     </div>

     <div class="cols3">
     Dieser Abschnitt steht dreispaltig …
     </div>

   Verfügbare Klassen:
     onecol  = 1 Spalte (volle Breite)
     cols2   = 2 Spalten (volle Breite, falls du mitten im Text 2 erzwingen willst)
     cols3   = 3 Spalten
     cols4   = 4 Spalten

   TIPP: Für RANDLOS volle Breite (bis in den rechten Bildstreifen) zusätzlich
   im style des <div>:  style="margin-right:-340px"  — z. B.
     <div class="onecol" style="margin-right:-340px"> … </div>
   ============================================================================ */
/* 1 Spalte, volle Breite */
#content .mw-parser-output .onecol {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 1 !important;
}
/* 2 Spalten (volle Breite) */
#content .mw-parser-output .cols2 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 2 !important;
    column-gap: 2.8em !important;
}
/* 3 Spalten */
#content .mw-parser-output .cols3 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 3 !important;
    column-gap: 2.8em !important;
}
/* 4 Spalten */
#content .mw-parser-output .cols4 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 4 !important;
    column-gap: 2.2em !important;
}
/* Absätze/Listen INNERHALB der Utility-Spalten bekommen denselben
   Fließtext-Stil (Atkinson, 22px) wie der übrige Text, und brechen
   nicht über die Spaltenkante */
#content .mw-parser-output .onecol p,
#content .mw-parser-output .onecol li,
#content .mw-parser-output .cols2 p,
#content .mw-parser-output .cols2 li,
#content .mw-parser-output .cols3 p,
#content .mw-parser-output .cols3 li,
#content .mw-parser-output .cols4 p,
#content .mw-parser-output .cols4 li {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
    color: #ffffff !important;
    background: none !important;
    margin: 0 0 1em 0 !important;
    break-inside: avoid !important;
}