MediaWiki:Common.css: Difference between revisions

Revision as of 14:01, 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;
    }
}

/* ============================================================================
   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;
}

/* 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>, so they need
   their own rule to land in the same rail, re-flowed to stack
   vertically (one image per row) instead of side-by-side. */
#content .mw-parser-output ul.gallery,
#content .mw-parser-output .mw-gallery-packed {
    display: block !important;
    float: right !important;
    clear: right !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 -340px 1.5em 1.5em !important;
    padding: 0 !important;
    list-style: none !important;
}
#content .mw-parser-output ul.gallery li.gallerybox {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 1.5em 0 !important;
    padding: 0 !important;
}
#content .mw-parser-output ul.gallery li.gallerybox .thumb,
#content .mw-parser-output ul.gallery li.gallerybox .thumb > div {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    text-align: left !important;
}
#content .mw-parser-output ul.gallery li.gallerybox img {
    width: 100% !important;
    height: auto !important;
}
#content .mw-parser-output ul.gallery .gallerytext {
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 0.3em 0 0 0 !important;
}