MediaWiki:Common.css: Difference between revisions

Revision as of 09:42, 11 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: each paragraph/list is individually split into 2 columns.
   (Reverted from CSS Grid — Grid ties an image's ROW to wherever it
   falls in the source order relative to the text, which is what
   produced the big gap / images-pushed-to-the-end bugs. Floats don't
   have that row-locking problem: a floated image just occupies space
   in the margin of whatever text is next to it in normal flow.) */
#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;
    column-count: 2 !important;
    column-gap: 2.8em !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: floated into their own right-hand rail. Since figures are
   NOT nested inside the columned p/ul/ol boxes above (they're plain
   siblings in the article), the float isn't trapped inside a column —
   it just sits in the margin, forming a consistent right-side rail. */
#content .mw-parser-output > figure,
#content .mw-parser-output figure {
    float: right !important;
    clear: right !important;
    margin: 0 0 2em 2em !important;
    width: 380px !important;
    max-width: 380px !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;
}