MediaWiki:Common.css: Difference between revisions

Revision as of 10:55, 16 August 2026

/* Pull in Atkinson Hyperlegible Next for the main body text */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@300;400;500;600;700&display=swap');
/* ============================================================
   Wiki-style typography: serif page titles, grotesk (sans-serif)
   body text — matches MediaWiki's own default font pairing.
   ============================================================ */
/* everything defaults to the grotesk/sans-serif body font */
*,
*::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 — same stack MediaWiki uses for #firstHeading */
#firstHeading,
.firstHeading,
.mw-page-title-main {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
/* Logo ausblenden — dieser Block (#p-logo, 200x160px) saß ganz
   oben im Sidebar und war die eigentliche Ursache des großen
   Abstands über "About" */
#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;
}
/* Gesamte Seite schwarz machen */
body {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Inhaltsbereich (Artikel) */
.mw-body {
    background-color: #000 !important;
    color: #fff !important;
    border: 0px solid #444 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Überschriften weiß machen */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Spezielle MediaWiki-Trennlinien entfernen */
.mw-headline, .firstHeading, .mw-title {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Pseudo-Elemente, die Linien erzeugen könnten, entfernen */
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: "" !important;
    display: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Entfernt alle möglichen Linien in MediaWiki */
hr, .mw-content-ltr hr, .mw-parser-output hr {
    display: none !important;
    border: none !important;
    height: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Kopfzeile und Navigation */
#mw-head,
#p-personal,
#mw-panel {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Menüleisten und Boxen */
.vector-menu-content,
.vector-menu-content ul {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Eingabefelder, Suchbox */
input, textarea {
    background-color: #222 !important;
    color: #fff !important;
    border: 0px solid #444 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Links */
a {
    color: #4aa5ff !important;
}
a:visited {
    color: #9c77ff !important;
}
/* Tabellen, Boxen, Panels ohne Ränder */
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
    border: none !important;
    background-color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    background: none !important;
}
/* Dropdown-Menüs */
.vector-dropdown {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Footer (unten) */
#footer, #footer li, #footer a {
    background-color: #000 !important;
    color: #fff !important;
}
/* Hauptnavigation oben */
#mw-head,
#p-personal,
#left-navigation,
#right-navigation {
    background-color: #000 !important; /* Schwarzer Hintergrund */
    color: #fff !important; /* Weiße Schrift */
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Tabs ("Read", "Discussion", etc.) */
#p-views .vector-menu-content ul {
    background-color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Einzelne Tabs */
#p-views li {
    background-color: #000 !important;
    border: 0px solid #444 !important; /* Optional: Dunkle Ränder */
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Ensure "Main Page" and "Discussion" links match the sidebar links */
#p-views li a,
#p-namespaces li a,
#p-variants li a {
    color: #4aa5ff !important; /* Same blue as sidebar links */
    text-decoration: none !important;
}
/* Hover effect */
#p-views li a:hover,
#p-namespaces li a:hover,
#p-variants li a:hover {
    color: #9c77ff !important; /* Same as visited links */
}
/* Make the top navigation links match the sidebar link colors */
#p-views a,
#p-views a:visited,
#p-views a:active,
#p-views a:hover {
    color: #4aa5ff !important; /* Same blue as sidebar links */
    text-decoration: none !important;
}
/* If you want a hover effect */
#p-views a:hover {
    color: #9c77ff !important; /* Same as visited links */
}
/* Falls noch weiß auftaucht, versuche dies für spezifische Skins */
.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;
    background: none !important;
}
/* Remove background gradients from menu tabs and headings */
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
/* Dropdown-Menüs (z. B. "Mehr") */
.vector-dropdown {
    background-color: #000 !important;
}
/* Suchleiste */
#p-search input {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
/* ALLE Trennlinien entfernen */
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;
}
/* Tabellen ohne Linien */
table, th, td {
    border: none !important;
    background-color: #000 !important;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
/* Hide Tools box that Vector 2022 renders itself */
#p-tb {
    display: none;
}
/* Hide "Powered by MediaWiki" */
.mw-footer .poweredby {
    display: none !important;
}
/* Hide the "navigation" heading in the sidebar */
#p-navigation h3,
#p-navigation .vector-menu-heading,
#p-navigation .vector-pinnable-header-label {
    display: none !important;
}
/* ============================================================
   ADDED 2: 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;
}
/* ============================================================
   ADDED 3: turn off dark mode toggle, Create account, Log in
   ============================================================ */
#pt-darkmode,
#pt-darkmode-sticky-header,
#pt-createaccount,
#pt-login {
    display: none !important;
}
#ca-talk {
    display: none !important;
}
/* ============================================================
   ADDED 4: gap above the page title / below the black header bar,
   and cap the content width so right-floated images keep
   overlapping the text boxes even on wide/maximized windows.
   ============================================================ */
#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 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.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;
}
/* ============================================================
   ADDED 5: force black text on the printable version
   ============================================================ */
@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;
    }
}
/* ============================================================
   ADDED 6: lead/thumbnail images — swap MediaWiki's default
   white frame (border + padding + light background) for the
   thin dark-mode-style border real Wikipedia uses, with a plain
   (non-boxed) caption underneath.
   ============================================================ */
.thumb,
.thumbinner {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}
/* thin grey border hugging the image itself, like Wikipedia's dark theme */
.thumbinner img,
.thumb img,
a.image img {
    border: 1px solid #54595d !important;
    box-sizing: border-box !important;
}
.thumbcaption {
    background: transparent !important;
    color: #eaecf0 !important;
    text-align: left !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 0.5em 0 0 0 !important;
    margin: 0 !important;
}
.magnify {
    /* keep the little enlarge icon, but let it sit on transparent, not a white box */
    background: transparent !important;
}
/* Modern MediaWiki (Parsoid) markup uses <figure>/<figcaption> instead
   of the old .thumb/.thumbinner divs — this is very likely what your
   wiki actually renders, which is why the frame didn't change above.
   Same treatment, correct selectors: */
figure,
figure.mw-default-size,
figure[typeof*="mw:File"],
.mw-halign-right,
.mw-halign-left,
a.mw-file-description {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}
/* nuke ANY leftover background/border on every element inside the figure
   (covers the caption wrapper regardless of what exact class it has) */
figure *,
figure *::before,
figure *::after,
.mw-default-size,
.mw-default-size * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* then give just the image itself back its thin border */
figure img,
a.mw-file-description img,
img.mw-file-element {
    border: 1px solid #54595d !important;
    box-sizing: border-box !important;
}
figcaption {
    background: transparent !important;
    color: #eaecf0 !important;
    text-align: left !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 0.5em 0 0 0 !important;
    margin: 0 !important;
}
/* ============================================================================
   MONOSKOP-STYLE CONTENT AREA (modeled on monoskop.org) — DARK VERSION
   Black background, serif type, TOC box, underlined section headings
   with a right-aligned "edit" link, two-column body text (whole article,
   not just lists), and right-floated images with plain italic captions.

   IMPORTANT: this only restyles the CONTENT column (#content and what's
   inside it). The left sidebar (#mw-panel / .vector-legacy-sidebar) is
   untouched on purpose, so your nav links stay exactly where they are.
   ============================================================================ */
/* content area: black background, white text */
#content,
.mw-body,
.mw-body-content,
#mw-content-text,
#bodyContent {
    background-color: #000000 !important;
    color: #ffffff !important;
}
/* serif type throughout the content column, like monoskop */
#content,
#content * {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
/* page title */
#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;
}
/* the small italic subtitle line under the title, e.g. "Resource on video art" */
#content .mw-parser-output > p:first-of-type {
    font-style: normal !important;
}
/* section headings, underlined, with the "edit" link pushed to the right */
#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;
}
/* table of contents box */
#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;
}
/* Text: column-count is on the WHOLE article container, so text flows
   linearly — column 1 fills with paragraph 1, then 2, then 3... and
   only continues into column 2 once column 1 runs out of room. This
   is the only way to get that continuous fill behavior (putting
   column-count on each paragraph individually, like before, was
   wrong — it split every single paragraph's own text in half). */
#content .mw-parser-output {
    column-count: 2 !important;
    column-gap: 2.8em !important;
    /* narrower than the full content width, leaving a reserved gutter
       on the right for images (see the figure rule below) */
    width: calc(100% - 340px) !important;
}
#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;
    break-inside: avoid !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;
}
/* Images float right, at their natural position in the text flow.
   NOTE (tradeoff, being upfront about it): because column-count is
   now on the shared parent, a floated image is confined to the width
   of whichever single column it falls in — it can't span a dedicated
   rail outside both columns while text still flows continuously
   between them. That combination isn't achievable in CSS without
   restructuring the page's HTML. This version prioritizes correct,
   linear 2-column text and images appearing near their actual place
   in the article (not stuck at the bottom) over a separate rail. */
#content .mw-parser-output > figure,
#content .mw-parser-output figure {
    float: right !important;
    clear: right !important;
    width: 300px !important;
    max-width: 300px !important;
    /* negative right margin pulls the image out of the narrowed
       text box and into the reserved 340px gutter on the right,
       so it sits beside the columns instead of squeezed inside one */
    margin: 0 -340px 1.5em 1.5em !important;
}
/* tables: black background too */
#content table,
#content th,
#content td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}
/* links: same blue/purple used elsewhere on your site */
#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, plain italic caption below. Placement (grid
   no frame, floated into the right-hand rail (float direction/size
   is set above; this block just handles the visual frame removal). */
#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 {
    font-style: italic !important;
    font-size: 17px !important;
    color: #ffffff !important;
    text-align: left !important;
    padding: 0.4em 0 0 0 !important;
    margin: 0 !important;
}