MediaWiki:Common.css: Difference between revisions

From Mona Mahall / Asli Serbest
Jump to navigation Jump to search
← Older editNewer edit →

Cmfiy (talk | contribs)

3 user groups
938 edits
No edit summary
No edit summary
Line 1: Line 1:
/* =========================================================================
  Column-balance fix for Safari/WebKit.
  Append this ENTIRE block to the END of your existing MediaWiki:Common.js
  (don't replace anything already there — just add this after it).
  WHY THIS IS NEEDED:
  The two-column article text in MediaWiki:Common.css uses
  `column-count: 2` with `column-fill: balance`, which is supposed to
  split content evenly (roughly 50/50) between the two columns. Safari
  has a long-standing bug where it ignores `column-fill: balance` for
  any multi-column container whose height is `auto` (i.e. not an
  explicit pixel value) — it just fills column 1 completely, then
  overflows whatever's left into column 2. That's why one column was
  much fuller than the other.
  THE FIX:
  Safari's balancing DOES work correctly once the container has an
  explicit height. This script measures how tall the article would be
  as a single column, then sets the container's height to roughly half
  that — giving Safari (and every other browser) the explicit height it
  needs to actually balance the two columns.
  ========================================================================= */
( function () {
'use strict';
function balanceColumns() {
var el = document.querySelector( '#content .mw-parser-output' );
if ( !el ) {
return;
}
// reset first, so re-measuring on resize starts from a clean state
el.style.height = 'auto';
var prevColumnCount = el.style.columnCount;
// briefly force single-column to measure the TRUE total content height
el.style.columnCount = '1';
var fullHeight = el.scrollHeight;
el.style.columnCount = prevColumnCount || '';
// small buffer so rounding/font differences don't force a 3rd
// implicit overflow column
el.style.height = Math.ceil( ( fullHeight / 2 ) * 1.06 ) + 'px';
}
function onReady( fn ) {
if ( document.readyState !== 'loading' ) {
fn();
} else {
document.addEventListener( 'DOMContentLoaded', fn );
}
}
onReady( function () {
balanceColumns();
// re-balance on resize (column width — and therefore how much
// text fits per column — changes with window size)
var resizeTimer;
window.addEventListener( 'resize', function () {
clearTimeout( resizeTimer );
resizeTimer = setTimeout( balanceColumns, 200 );
} );
// web fonts finishing loading can change text height slightly —
// re-check once they're ready
if ( document.fonts && document.fonts.ready ) {
document.fonts.ready.then( balanceColumns );
}
} );
}() );
/* 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)
   FONTS
  body text — matches MediaWiki's own default font pairing.
   ============================================================ */
   ============================================================ */
/* everything defaults to the grotesk/sans-serif body font */
@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,
*::before,
Line 79: Line 10:
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     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 */
/* page titles only: serif */
#firstHeading,
#firstHeading,
.firstHeading,
.firstHeading,
Line 85: Line 16:
     font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
     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" */
  BASE DARK THEME (site-wide, outside the content column)
   ============================================================ */
#p-logo,
#p-logo,
.mw-wiki-logo,
.mw-wiki-logo,
Line 99: Line 31:
     width: 0 !important;
     width: 0 !important;
}
}
/* Gesamte Seite schwarz machen */
body {
body {
     background-color: #000 !important;
     background-color: #000 !important;
Line 107: Line 38:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Inhaltsbereich (Artikel) */
.mw-body {
.mw-body {
     background-color: #000 !important;
     background-color: #000 !important;
     color: #fff !important;
     color: #fff !important;
     border: 0px solid #444 !important;
     border: 0 !important;
     box-shadow: none !important;
     box-shadow: none !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Überschriften weiß machen */
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
     color: #fff !important;
     color: #fff !important;
Line 121: Line 50:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Spezielle MediaWiki-Trennlinien entfernen */
.mw-headline, .firstHeading, .mw-title {
.mw-headline, .firstHeading, .mw-title {
     border: none !important;
     border: none !important;
Line 127: Line 55:
     text-decoration: 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 {
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
     content: "" !important;
     content: "" !important;
     display: none !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;
     box-shadow: none !important;
    text-decoration: none !important;
}
}
/* Entfernt alle möglichen Linien in MediaWiki */
hr {
hr, .mw-content-ltr hr, .mw-parser-output hr {
     display: none !important;
     display: none !important;
    border: none !important;
     height: 0 !important;
     height: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
}
/* Kopfzeile und Navigation */
#mw-head,
#mw-head,
#p-personal,
#p-personal,
#mw-panel {
#mw-panel,
#left-navigation,
#right-navigation {
     background-color: #000 !important;
     background-color: #000 !important;
     color: #fff !important;
     color: #fff !important;
Line 151: Line 88:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Menüleisten und Boxen */
.vector-menu-content,
.vector-menu-content,
.vector-menu-content ul {
.vector-menu-content ul {
Line 159: Line 95:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Eingabefelder, Suchbox */
input, textarea {
input, textarea {
     background-color: #222 !important;
     background-color: #222 !important;
     color: #fff !important;
     color: #fff !important;
     border: 0px solid #444 !important;
     border: 0 !important;
     box-shadow: none !important;
     box-shadow: none !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Links */
#p-search input {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
a {
a {
     color: #4aa5ff !important;
     color: #4aa5ff !important;
Line 174: Line 113:
     color: #9c77ff !important;
     color: #9c77ff !important;
}
}
/* Tabellen, Boxen, Panels ohne Ränder */
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
     border: none !important;
     border: none !important;
     background-color: #000 !important;
     background: #000 !important;
     box-shadow: none !important;
     box-shadow: none !important;
     text-decoration: none !important;
     text-decoration: none !important;
     background-image: none !important;
     background-image: none !important;
    background: none !important;
}
}
/* Dropdown-Menüs */
.vector-dropdown {
.vector-dropdown {
     background-color: #000 !important;
     background-color: #000 !important;
Line 190: Line 126:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Footer (unten) */
#footer, #footer li, #footer a {
#footer, #footer li, #footer a {
     background-color: #000 !important;
     background-color: #000 !important;
     color: #fff !important;
     color: #fff !important;
}
}
/* Hauptnavigation oben */
/* top tabs (Read / Discussion / Views) */
#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 {
#p-views .vector-menu-content ul {
     background-color: #000 !important;
     background-color: #000 !important;
Line 211: Line 136:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Einzelne Tabs */
#p-views li {
#p-views li {
     background-color: #000 !important;
     background-color: #000 !important;
     border: 0px solid #444 !important; /* Optional: Dunkle Ränder */
     border: 0 !important;
     box-shadow: none !important;
     box-shadow: none !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Ensure "Main Page" and "Discussion" links match the sidebar links */
#p-views a,
#p-views li a,
#p-views li a,
#p-namespaces li a,
#p-namespaces li a,
#p-variants li a {
#p-variants li a {
     color: #4aa5ff !important; /* Same blue as sidebar links */
     color: #4aa5ff !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}
/* Hover effect */
#p-views a:hover,
#p-views li a:hover,
#p-views li a:hover,
#p-namespaces li a:hover,
#p-namespaces li a:hover,
#p-variants li a:hover {
#p-variants li a:hover {
     color: #9c77ff !important; /* Same as visited links */
     color: #9c77ff !important;
}
}
/* 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 li,
.vector-menu-tabs a {
.vector-menu-tabs a {
Line 251: Line 162:
     text-decoration: none !important;
     text-decoration: none !important;
     background-image: 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,
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
Line 259: Line 168:
     background: 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 {
#p-tb {
     display: none;
     display: none;
}
}
/* Hide "Powered by MediaWiki" */
.mw-footer .poweredby {
.mw-footer .poweredby {
     display: none !important;
     display: none !important;
}
}
/* Hide the "navigation" heading in the sidebar */
#p-navigation h3,
#p-navigation h3,
#p-navigation .vector-menu-heading,
#p-navigation .vector-menu-heading,
Line 306: Line 179:
     display: none !important;
     display: none !important;
}
}
/* ============================================================
/* ============================================================
   ADDED 2: text sizes — content area and sidebar.
   TEXT SIZES — content area and sidebar
   ============================================================ */
   ============================================================ */
#content,
#content,
Line 337: Line 211:
     margin-left: 0.5em !important;
     margin-left: 0.5em !important;
}
}
/* ============================================================
/* ============================================================
   ADDED 3: turn off dark mode toggle, Create account, Log in
   UI CHROME: hide dark-mode toggle, account/login links, talk tab
   ============================================================ */
   ============================================================ */
#pt-darkmode,
#pt-darkmode,
#pt-darkmode-sticky-header,
#pt-darkmode-sticky-header,
#pt-createaccount,
#pt-createaccount,
#pt-login {
#pt-login,
    display: none !important;
}
#ca-talk {
#ca-talk {
     display: none !important;
     display: none !important;
}
}
/* ============================================================
/* ============================================================
   ADDED 4: gap above the page title / below the black header bar,
   PAGE TITLE / TOP SPACING
  and cap the content width so right-floated images keep
  overlapping the text boxes even on wide/maximized windows.
   ============================================================ */
   ============================================================ */
#content {
#content {
Line 370: Line 242:
}
}
#mw-content-text,
#mw-content-text,
#mw-content-text > .mw-parser-output {
#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-of-type,
.mw-parser-output > p:first-child,
.mw-parser-output > p:first-child,
Line 382: Line 251:
     padding-top: 0 !important;
     padding-top: 0 !important;
}
}
/* ============================================================
/* ============================================================
   ADDED 5: force black text on the printable version
   PRINT: force black-on-white
   ============================================================ */
   ============================================================ */
@media print {
@media print {
Line 394: Line 264:
     }
     }
}
}
/* ============================================================
 
  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
   CONTENT COLUMN — dark, serif titles, two-column body text, images
  Black background, serif type, TOC box, underlined section headings
   pinned into a right-hand rail.
  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
   This section only restyles #content and what's inside it. The left
  inside it). The left sidebar (#mw-panel / .vector-legacy-sidebar) is
  sidebar (#mw-panel / .vector-legacy-sidebar) is untouched on purpose,
  untouched on purpose, so your nav links stay exactly where they are.
  so nav links stay exactly where they are.
   ============================================================================ */
   ============================================================================ */
/* content area: black background, white text */
#content,
#content,
.mw-body,
.mw-body,
Line 492: Line 281:
     color: #ffffff !important;
     color: #ffffff !important;
}
}
/* serif type throughout the content column, like monoskop */
#content,
#content,
#content * {
#content * {
     font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
     font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
}
/* page title */
#content #firstHeading,
#content #firstHeading,
#content .firstHeading {
#content .firstHeading {
Line 509: Line 296:
     display: block !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 h2,
#content .mw-heading2 {
#content .mw-heading2 {
Line 535: Line 317:
     color: #34d399 !important;
     color: #34d399 !important;
}
}
/* table of contents box */
#content #toc,
#content #toc,
#content .toc {
#content .toc {
Line 549: Line 330:
     color: #4aa5ff !important;
     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
/* --- two-column body text, flowing linearly (column 1 fills before
  only continues into column 2 once column 1 runs out of room. This
      column 2 starts) --- */
  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 {
#content .mw-parser-output {
    position: relative !important; /* anchor for the pinned lead image below */
     column-count: 2 !important;
     column-count: 2 !important;
     column-gap: 2.8em !important;
     column-gap: 2.8em !important;
    /* explicitly request balanced columns (roughly 50/50 by height),
      not sequential fill-then-overflow */
     column-fill: balance !important;
     column-fill: balance !important;
    /* narrower than the full content width, leaving a reserved gutter
     width: calc(100% - 340px) !important; /* reserves the right-hand image rail */
      on the right for images (see the figure rule below) */
     width: calc(100% - 340px) !important;
}
}
#content .mw-parser-output > p,
#content .mw-parser-output > p,
Line 589: Line 364:
     margin: 0 0 1em 0 !important;
     margin: 0 0 1em 0 !important;
}
}
/* Images float right, at their natural position in the text flow.
#content table,
  NOTE (tradeoff, being upfront about it): because column-count is
#content th,
  now on the shared parent, a floated image is confined to the width
#content td {
   of whichever single column it falls in — it can't span a dedicated
    background-color: #000000 !important;
   rail outside both columns while text still flows continuously
    color: #ffffff !important;
  between them. That combination isn't achievable in CSS without
    border: none !important;
   restructuring the page's HTML. This version prioritizes correct,
}
  linear 2-column text and images appearing near their actual place
#content .mw-parser-output a:link {
   in the article (not stuck at the bottom) over a separate rail. */
    color: #4aa5ff !important;
#content .mw-parser-output > figure,
    text-decoration: none !important;
#content .mw-parser-output figure {
}
#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;
     float: right !important;
     clear: right !important;
     clear: right !important;
     width: 300px !important;
     width: 300px !important;
     max-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;
     margin: 0 -340px 1.5em 1.5em !important;
}
}
/* <gallery> blocks (e.g. mode="packed") use completely different
 
   markup (ul.gallery > li.gallerybox) than a single figure, so the
/* <gallery> blocks (e.g. mode="packed") use different markup
   rule above never touched them — that's why they were rendering as
   (ul.gallery > li.gallerybox) than a single <figure>, so they need
  a full-width grid inside the text column instead of the right
   their own rule to land in the same rail, re-flowed to stack
  rail. Pull the whole gallery into the same rail, and re-flow its
   vertically (one image per row) instead of side-by-side. */
   items to stack vertically (one per row) instead of side-by-side,
  so it reads as one continuous image column, like a single image. */
#content .mw-parser-output ul.gallery,
#content .mw-parser-output ul.gallery,
#content .mw-parser-output .mw-gallery-packed {
#content .mw-parser-output .mw-gallery-packed {
Line 651: Line 478:
     font-size: 14px !important;
     font-size: 14px !important;
     padding: 0.3em 0 0 0 !important;
     padding: 0.3em 0 0 0 !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;
}
}

Revision as of 11:02, 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;
}
Retrieved from "https://aslimona.xyz/index.php?title=MediaWiki:Common.css&oldid=643"