MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1,094:
margin-bottom: 2em;
}
table.wikitable td { background-color: var(--ed-ink)#fff; } /* data text == infobox data ink (bg set below) */
table.wikitable caption {
text-align: left;
Line 1,114:
table.wikitable > * > tr:first-child > th,
table.wikitable > * > tr:first-child > td { border-top: 1px solid var(--wt-rule); }
table.wikitable > * > tr:has(> th):has(+ tr > td) > th { border-bottom: 1px solid var(--edwt-inkrule); } /* header rule == infobox title underline (ink) */
table.wikitable > * > tr:last-child > td,
table.wikitable > * > tr:last-child > th { border-bottom: 1px solid var(--wt-rule); }
Line 1,218:
================================================================= */
 
/* ── Webfont: Source Serif 4 (variable; ONE file covers 400-600).
/* ── Typeface policy: WEB-SAFE, zero webfont download. ─────────────────
@font-face is safe anywhere in ResourceLoader output — never use
Many corporate networks (AXA's, very plausibly) and privacy extensions
@import here (gadget CSS is concatenated BEFORE Common.css and
block Google Fonts (fonts.gstatic.com) on GDPR/privacy grounds, so a
breaks it, per T165040). If the font fails to load, Georgia
gstatic-hosted Spectral/Inter would silently fall back for much of the
takes over seamlessly. Production hardening: copy the two woff2
audience — leaving most readers on an *untuned* fallback. To give EVERY
readerfiles to the SAMES3 tunedbucket resultand withswap nothe dependency to block, theURLs. design── is*/
@font-face {
built on fonts already present on every OS:
font-family: "Source Serif 4";
• body → Georgia: Matthew Carter's screen serif (Windows, macOS, iOS,
font-style: normal;
Android) — warm, sturdy, genuinely editorial, real bold + italic.
font-weight: 400 600;
• sans → the OS-native UI sans (San Francisco / Segoe UI / Roboto) for
font-display: swap;
headings, tables, TOC, footer, chrome. This IS the Codex/Wikimedia
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFF2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6kDXr4.woff2) format("woff2");
system stack, so it matches the surrounding MediaWiki UI.
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
Nothing downloads, nothing can be blocked, and it renders identically
}
whether or not gstatic is reachable.
@font-face {
 
font-family: "Source Serif 4";
To restore the branded Spectral + Inter later, SELF-HOST the woff2 files
font-style: italic;
same-origin (e.g. the S3 bucket), re-add @font-face blocks pointing at
font-weight: 400 600;
those URLs, and name "Spectral" / "Inter" first in the stacks below. ── */
font-display: swap;
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEF02_tTDB4M7-auWDN0ahZJW1ge6NmXpVAHV83Bfb_US2D2QYxoUKIkn98pRl9tDMQC.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
/* ── Design knobs.
Line 1,242 ⟶ 1,246:
same warm ramp (this :root is later, so it wins the tie). ── */
:root {
--ed-serif: "TimesSource NewSerif Roman4", Georgia, serif;"Times New /* bodyRoman", serif — web-safe, on every OS;
--ed-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Georgia is the fallback. Body sits at
"Inter", Helvetica, Arial, sans-serif; /* = Vector/Codex chrome stack */
17px to suit Times' small x-height. */
--ed-sans: Arial, "Helvetica Neue", Helvetica, sans-serif; /* Arial-first: ONE uniform
sans across devices (headings, data, chrome), pairs with the Times body.
Android/Linux (no Arial) fall to their sans-serif ≈ Roboto/Liberation. */
--ed-ink: #2b2926; /* text, headings, strong rules */
--ed-secondary: #66605c; /* labels, standfirst, TOC, footer links */
Line 1,256 ⟶ 1,257:
--ed-underline: #ccc1b7; /* resting link underline tint */
--ed-accent: #f07662; /* house coral — hover underline, sparing */
--ed-paper: #ffffbfaf7; /* page canvas (set pure#fff whiteto (warmdisable the tint disabled) */
--ed-infobox-w: 18.5rem; /* infobox total width (border-box) */
--ed-measure: calc((100% - var(--ed-infobox-w)) * 0.9); /* prose stops ~10% short of
the infobox — tighter readable line + a gutter before the card */
--ed-body: 1.0625rem1rem; /* body size (17px)16pxsizedthe for"90% Timeszoom" Newpreference) Roman's small*/
x-height (Times runs smaller than Georgia at equal px) */
--ed-flow: 0.6rem; /* THE intra-section gap: between paragraphs, list
items, and ABOVE/BELOW tables — ONE uniform rhythm
WITHIN a section. Section BREAKS (the space before a
heading) are the larger em margin-tops on h2/h3, so
separation reads as contrast: tight inside, airy before. */
--ed-small: 0.8125rem; /* THE small size: tables, infobox, TOC, footer */
--ed-title-gap: 2.1rem; /* CALIBRATION: moves the title rule DOWN */
Line 1,273 ⟶ 1,268:
against each marker's own font-size) */
 
/* section 11's table palette, nowwarmed MAPPED ONTOonto the infobox tokens so thesame tableramp.
--wt-rule is the infobox'stable twinFRAME: samedeliberately whitelighter surface,than same hairline frame,the sameink
h2 rules so tables sit below section structure in the hierarchy */
label/data ink, and a single INK rule under the header — exactly the
--wt-border: #ece8e1;
infobox's title underline. That header rule is the ONE strong line; every
--wt-rule: #b3aca3;
other table line is the quiet infobox-border hairline. */
--wt-borderedge: var(--edwt-hairlineborder); /* interiorONE cellhairline linestone ==for infoboxinterior border (#e7e2db)edges */
--wt-th-bg: #f3efe8;
--wt-rule: var(--ed-hairline); /* table FRAME == infobox border (#e7e2db) */
--wt-edgeth-text: var(--wted-bordersecondary); /* ONE hairline tone for interior edges */
--wt-th-bg: #fff; /* header is WHITE like the infobox title — no fill;
the ink underline + secondary label set it apart */
--wt-th-text: var(--ed-secondary); /* header label color == infobox label */
}
 
Line 1,347 ⟶ 1,339:
.mw-parser-output > dl { max-width: var(--ed-measure); }
/* nested paragraphs too (hand-written page structures); table cells released */
.mw-parser-output p { max-width: var(--ed-measure); margin: var(--ed-flow) 0; }
.mw-parser-output .infoboxtable p { max-width: none; margin: 0; }
/* cells + infobox sit OUTSIDE the prose flow — kill the inherited gap so it
doesn't pad table cells / the infobox open from inside */
.mw-parser-output table p,
.mw-parser-output .infobox p { max-width: none; margin: 0; }
/* guards: the data voice stays sans at the ONE small size — otherwise the
serif body size would silently scale section 11's 0.85em tables (and
Line 1,361 ⟶ 1,350:
 
/* ── The table BLOCK ──
1. Printed ON the paper (not white cards): surfaces transparent;
1. A WHITE card (#fff) matching the infobox surface; in a FINTABLE the
in a FINTABLE only the sticky first column stays opaque #fff (it must cover scrolling
must cover scrolling content) in the paper color; hover warms.
2. Full frame in --wt-rule. Sides: the RIGHT rail is a plain
border on the last-column cells. On a NEUTRAL table the LEFT
Line 1,379 ⟶ 1,368:
table.wikitable,
table.wikitable td,
table.wikitable caption { background-color: #ffftransparent; } /* white card == infobox surface */
table.wikitable > tbody > tr:hover > td { background-color: #f2ede5; }
/* the frozen first column carries its own paper bg (below) at higher
Line 1,390 ⟶ 1,379:
table.wikitable.fintable td:first-child,
table.wikitable:has(.col, .col-wide) td:first-child {
background-color: #fffvar(--ed-paper); /* opaque white to cover scroll content, == the card */
}
table.wikitable.fintable th:first-child,
Line 1,416 ⟶ 1,405:
 
/* the table's outer margins live on the scroll WRAPPER (the emitter wraps
every table in <div style="overflow-x:auto">): thetop tablemargin JOINSgives theair
before the eyebrow caption + separates consecutive tables; the scrollbar
intra-section flow — same gap above and below as paragraphs and list items,
goes thin and quiet in the header-row tint */
so it no longer punches a hole in the rhythm; the scrollbar goes thin and
quiet in the header-row tint */
.mw-parser-output div[style*="overflow-x"],
.copy-table-scroll {
margin: var(--ed-flow)1.8em 0 2em;
scrollbar-width: thin;
scrollbar-color: var(--wt-th-bg) transparent;
Line 1,467 ⟶ 1,455:
 
/* list rhythm: air between points, predictable nesting */
.mw-parser-output ul, { margin-top: 0.4em; }
.mw-parser-output olli { margin-top: var(--ed-flow); margin-bottom: var(--ed-flow)0.45em; }
.mw-parser-output li { margin-bottom: var(--ed-flow); }
.mw-parser-output li li { margin-top: 0.3em; margin-bottom: 0.3em; }
.mw-parser-output li > ul { margin-top: 0.3em; }
Line 1,537 ⟶ 1,524:
.skin-minerva .content h2 {
font-family: var(--ed-sans);
font-size: 1.875rem4rem; /* 30px */
line-height: 1.25;
font-weight: 600;
font-weight: 600; /* semibold — Segoe UI's 700 reads heavy/obese at this size */
letter-spacing: -0.005em;
color: var(--ed-ink) !important;
border-bottom: 1px solid var(--ed-ink) !important;
margin-top: 2.2em;
margin-top: 2.6em; /* SECTION break BEFORE h2 — the air that says "new section" */
margin-bottom: var(--ed-flow)0.7em; /* AFTER the heading = the intra-section flow gap */
padding-bottom: 0.3em;
}
Line 1,550 ⟶ 1,537:
.skin-minerva .content h3 {
font-family: var(--ed-sans);
font-size: 1.5rem13rem; /* 24pxa touch larger than body so scale alone helps */
font-weight: 600;
color: var(--ed-ink) !important;
/* a FULL-WIDTH rule like h2 — but in the TABLE-FRAME tone (--wt-rule) rather
/* NO underline: at 24px the size alone separates h3 from body bold. The
full-widththan ruleh2's (addedink, whenso h3it wasreads 20pxone level down and blendedrhymes with in)the istable nowborders just*/
border-bottom: 1px solid var(--wt-rule);
clutter — h2 keeps its rule, h3 stands on size + sans weight. */
margin-top: 1.8em;
margin-top: 2.3em; /* SECTION break BEFORE h3 — bigger, so subsections separate */
margin-bottom: var(--ed-flow)0.6em; /* AFTER the heading = the intra-section flow gap */
padding-bottom: 0.25em;
}
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {