MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Previous style. Roll back if needed. |
No edit summary |
||
Line 4:
Logged-in overrides live in MediaWiki:Group-user.css
MANAGED WHOLESALE: replace the entire page from the canonical file
(
block pastes.
Color/typography authority: SECTION 12 owns all heading, link,
footer, table and AI-panel colors; earlier sections are structure.
Line 115 ⟶ 116:
by section 12) --- */
.infobox {
line-height: 1.5em; border-spacing: 3px;
}
Line 243 ⟶ 244:
font-weight: 700;
line-height: 1.4;
color:
text-decoration: none !important;
cursor: pointer;
Line 1,077 ⟶ 1,078:
(not baked inline), so a change applies to every class-based page, no re-render */
--wt-indent-step: 1.5em;
/*
accent, --wt-th-bg) lives in section 12's :root, the single color
--wt-pad-y: 0.5em;
}
Line 1,093 ⟶ 1,090:
table.wikitable {
font-size: 0.85em;
border: 1px solid var(--text-dark);
font-variant-numeric: tabular-nums;
margin-top: 0.3em;
margin-bottom: 2em;
}
/* (td/caption backgrounds + caption typography are owned by §12) */
table.wikitable > tr > th,
table.wikitable > tr > td,
Line 1,121 ⟶ 1,111:
}
table.wikitable > * > tr:first-child > th,
table.wikitable > * > tr:first-child > td { border-top: 1px solid var(--
table.wikitable > * > tr:has(> th):has(+ tr > td) > th { border-bottom: 1px solid var(--
table.wikitable > * > tr:last-child > td,
table.wikitable > * > tr:last-child > th { border-bottom: 1px solid var(--
/* a top rule ABOVE emphasized (strong/bold) rows — they are sums or section
headers, so a hairline above them improves readability. :has() gives it a
higher specificity than the base border:0, so it wins on the interior; the
first-row frame (
keeps the medium frame rather than a doubled line. Collapses cleanly with the
header divider (
Every pipeline now marks a bold row the same way — '''bold''' -> <b>/<strong>
(wikitable.py wraps total rows; the SEC path no longer emits inline
Line 1,136 ⟶ 1,126:
table.wikitable > * > tr:has(b, strong) > th,
table.wikitable > * > tr:has(b, strong) > td {
border-top: 1px solid var(--
}
Line 1,186 ⟶ 1,176:
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--
}
table.wikitable.fintable td:first-child,
Line 1,209 ⟶ 1,199:
left: var(--wt-xs);
z-index: 1;
box-shadow: 1px 0 0 var(--
background-color: #fff;
}
Line 1,244 ⟶ 1,234:
/* =================================================================
12. EDITORIAL DESIGN SYSTEM
Appended LAST deliberately: later rules of equal specificity win,
so this section restyles typography / color / spacing WITHOUT
editing sections 1-11.
every color
v12: ONE font (STIX Two Text), ONE ink (#0d0d0d for all text AND
lines), coral for interaction only, square corners, flat controls.
2026-07 — see git history for the old system.
================================================================= */
Line 1,280 ⟶ 1,269:
}
/* ── Design knobs
accent:
chrome). There is no serif/sans split anymore.
--text-dark = THE ink: all text AND all lines/borders/frames.
Hierarchy is carried by size, weight, and space —
never by gray
--ed-accent = coral, INTERACTION ONLY: link-underline hover,
focus rings, control hover
--ed-underline = the one non-ink gray: resting link underlines,
quiet by design so the coral hover reads as a
ONE body size, ONE small size. h3+ have NO rules (h1 carries the one
ramp and a serif/sans split — collapsed 2026-07 (see git history for
the old values). ── */
:root {
--ed-
--text-dark: #0d0d0d; /* THE ink: all text + all lines */
--ed-underline: #ccc1b7; /* resting link underline tint */
--ed-accent: #f07662; /* house coral —
--ed-paper: #fff; /* page canvas
--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
Line 1,335 ⟶ 1,308:
resolve against each marker's own font-size. */
/* table header fill —
--wt-th-bg: #fff;
}
/* ── Canvas:
paints white on its own, the TOC column, and the TOC's
scroll-fade overlay ── */
Line 1,371 ⟶ 1,343:
}
::-webkit-scrollbar-thumb {
background: var(--
border-radius: 0 !important; /* square, like the buttons */
}
::-webkit-scrollbar-corner { background: transparent !important; }
/* Minerva (mobile skin) paints its own white wrappers over body */
Line 1,393 ⟶ 1,364:
.vector-column-end { display: none !important; }
/* ──
--ed-font (form controls don't inherit it — they get it explicitly
/* ── Tagline ("Unleashing intelligence", the .mw-logo::after): NO underline —
unusual on a tagline — hover feedback is the text itself warming to
coral
.mw-logo:hover::after { color: var(--ed-accent) !important; }
Line 1,422 ⟶ 1,387:
.mw-body-content,
.skin-minerva #bodyContent.content {
font-family: var(--ed-
font-size: var(--ed-body);
line-height: 1.6;
Line 1,440 ⟶ 1,405:
every em-based column width) */
table.wikitable, .infobox {
font-family: var(--ed-
font-size: var(--ed-small);
color: var(--text-
}
/* lighter bold in tables: the browser default 700 (header th + the <b>/<strong>
Line 1,455 ⟶ 1,420:
in a FINTABLE only the sticky first column stays opaque (it
must cover scrolling content) in the paper color; hover warms.
2. Full frame in
border on the last-column cells. On a NEUTRAL table the LEFT
rail is a plain table border (nothing is sticky); on a
Line 1,466 ⟶ 1,431:
of "financial table", repeated verbatim.
3. The table's outer margins move to the scroll WRAPPER so the
horizontal scrollbar hugs the bottom rule
table.wikitable,
table.wikitable td,
table.wikitable caption { background-color: transparent; }
/* row hover comes from §11 (#f8f9fa); the frozen first column carries its
table.wikitable.fintable > tbody > tr:hover > td:first-child,
table.wikitable:has(.col, .col-wide) > tbody > tr:hover > td:first-child {
Line 1,488 ⟶ 1,452:
table.wikitable:has(.col, .col-wide) td:first-child {
border-left: none;
box-shadow: inset 1px 0 0 var(--
1px 0 0 var(--
}
/* LEFT + RIGHT frame edges drawn on the CELLS
Fintable overrides first-child border-left → none + box-shadow rail
(higher specificity, above). NB: in the v11 multi-shade system these
collapse ties could pick the WRONG (lighter) line — with one ink every
tie resolves to the same color, so the old !important right-edge
enforcement rule is gone. */
.wikitable th:first-child,
.wikitable td:first-child { border-left: 1px solid var(--
.wikitable th:last-child,
.wikitable td:last-child { border-right: 1px solid var(--
/* row labels MEET the bullets: the first column's text starts at the SAME indent
Line 1,527 ⟶ 1,486:
table.wikitable td.wt-indent-4 { padding-left: calc(var(--ed-list-indent) + var(--wt-indent-step) * 4); }
table.wikitable { margin: 0; border-left: 1px solid var(--
table.wikitable.fintable,
table.wikitable:has(.col, .col-wide) { border-left: none; }
Line 1,550 ⟶ 1,509:
secondary ink, with air below before the grid. No glyph. */
table.wikitable caption {
font-family: var(--ed-
font-size: var(--ed-small);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-
text-align: left;
padding-bottom: 0.7em;
Line 1,602 ⟶ 1,561:
left: calc(-1 * var(--ed-list-indent));
color: var(--text-dark); /* markers match the body text */
font-family: var(--ed-
font-size: 0.95em;
line-height: 1.68;
Line 1,613 ⟶ 1,572:
font-size: 68%;
line-height: 0;
font-family: var(--ed-
color: var(--text-
}
Line 1,620 ⟶ 1,579:
knob lands its rule on the CONTENTS rule's line ── */
h1#firstHeading, .mw-first-heading {
font-family: var(--ed-
font-size: 2.4rem;
line-height: 1.15;
Line 1,626 ⟶ 1,585:
letter-spacing: -0.01em;
color: var(--text-dark) !important;
border-bottom: 2px solid var(--
margin-top: var(--ed-title-gap) !important;
padding-bottom: 0.3em;
Line 1,633 ⟶ 1,592:
/* breadcrumb under the title rule — the shared eyebrow treatment */
#contentSub .subpages {
font-family: var(--ed-
font-size: var(--ed-small);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-
margin-bottom: 1.4em;
}
#contentSub .subpages a,
#contentSub .subpages a:visited { color: var(--text-
/* breadcrumb links join the house link convention (it sits among plain
text, so it must look clickable like body links do) */
Line 1,662 ⟶ 1,621:
.mw-body-content h2, .mw-body-content .mw-heading2, .section-heading,
.skin-minerva .content h2 {
font-family: var(--ed-
font-size: 1.875rem; /* 30px */
line-height: 1.25;
Line 1,677 ⟶ 1,636:
.mw-body-content h3,
.skin-minerva .content h3 {
font-family: var(--ed-
font-size: 1.5rem; /* 24px */
font-weight: 600;
Line 1,686 ⟶ 1,645:
}
.mw-body-content h4, .mw-body-content h5 {
font-family: var(--ed-
font-size: var(--ed-body); /* body-size headings track the body token */
font-weight: 600;
Line 1,693 ⟶ 1,652:
/* h6 = bold BODY text (serif, body size), not a sans heading */
.mw-body-content h6 {
font-family: var(--ed-
font-size: var(--ed-body);
font-weight: 700;
Line 1,746 ⟶ 1,705:
a.mw-ui-button, a.mw-ui-button:visited { color: #fff !important; }
.mw-editsection, .mw-editsection a, .mw-editsection a:visited {
color: var(--text-
text-decoration: none;
opacity: 0.7;
Line 1,762 ⟶ 1,721:
.cdx-button:enabled:focus,
.cdx-button--fake-button:focus {
box-shadow: inset 0 0 0 2px var(--ed-
}
:focus-visible { outline-color: var(--ed-
/* ── Header search.
Codex input rules below — only the search-specific pieces live here. ── */
/* search bar on the BODY-TEXT axis. Measured on the live DOM (1120px
viewport): form x=294, title/body axis x=264 → pull 30px left (24px is
Line 1,778 ⟶ 1,734:
tagline or its font ever changes. */
#p-search #searchform { margin-left: -30px; }
.cdx-search-input
/* the bar hovers as ONE unit — pointing at the attached Search button warms
the input border too. !important is required: the generic input rules pin
border-color with !important, and only equal importance + higher
specificity beats them. */
.cdx-search-input:hover .cdx-text-input__input {
border-color: var(--ed-accent) !important;
}
.cdx-search-input .cdx-search-input__end-button,
Line 1,804 ⟶ 1,751:
box-shadow: none !important;
border-radius: 0 !important; /* square corners */
font-family: var(--ed-
}
/* ── ALL Codex form inputs (Special:UserLogin etc.) follow the search-bar
Line 1,824 ⟶ 1,771:
.cdx-text-input__input:enabled {
border-color: var(--text-dark) !important;
font-family: var(--ed-
}
.cdx-text-input__input:hover,
Line 1,863 ⟶ 1,810:
color: #fff !important;
border-radius: 0 !important;
font-family: var(--ed-
}
/* the TOC "hide" / "move to sidebar" pill (pin/unpin) joins the same flat
Line 1,876 ⟶ 1,823:
box-shadow: none !important;
border-radius: 0 !important; /* square corners */
font-family: var(--ed-
font-size: var(--ed-small); /* joins the ONE small size */
}
Line 1,899 ⟶ 1,846:
~"2.2. "); the 0.22rem row rhythm is unchanged. ── */
.vector-toc {
font-family: var(--ed-
--toc-header-inset: 0; /* CONTENTS label sits on the number axis */
}
Line 1,907 ⟶ 1,854:
rule only), inset onto the number axis */
.vector-toc .vector-pinnable-header {
border-bottom: 1px solid var(--
padding-top: 0.35rem;
padding-bottom: calc(0.95rem - 3px); /* calibrated against the title rule:
Line 1,921 ⟶ 1,868:
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-
margin-left: 0;
}
/* entries:
feedback = the house link convention (grey underline → coral); the
current section = the one bold row. */
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
color: var(--text-
font-size: var(--ed-small);
text-decoration: underline;
text-decoration-color: var(--ed-underline);
Line 1,944 ⟶ 1,885:
}
.vector-toc .vector-toc-link:hover {
text-decoration-color: var(--ed-accent);
text-decoration-thickness: 2px;
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
font-weight: 500 !important; /* the "current" cue (one bold row) */
}
/* NB: hiding h6 from the TOC is done in Common.js (pruneTocH6) — MediaWiki's
Line 2,024 ⟶ 1,963:
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--text-
}
.vector-toc #toc-mw-content-text.vector-toc-list-item-active .vector-toc-text::before {
Line 2,072 ⟶ 2,011:
content: "▸"; /* collapsed — the house triangle */
font-size: 0.65rem;
color: var(--text-
}
.vector-toc .vector-toc-list-item-expanded > .vector-toc-toggle::before {
content: "▾"; /* expanded */
}
/* ── Infobox: the page's ONE white card, in the data voice; its width
Line 2,088 ⟶ 2,026:
}
.mw-parser-output table.infobox {
font-family: var(--ed-
font-size: var(--ed-small);
background-color: #fff !important;
border: 1px solid var(--
border-spacing: 0; /* kill §1's 3px so the row rhythm is EXACTLY the
cell padding — shared with the wikitable below */
Line 2,099 ⟶ 2,037:
.infobox .infobox-above { /* the shared uppercase eyebrow */
background-color: #fff !important; /* beats the template's inline #cee0f2 */
color: var(--text-
text-align: left !important;
font-size: var(--ed-small); /* the shared eyebrow size */
Line 2,105 ⟶ 2,043:
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--
padding: 0.2em 0.2em 0.55em;
}
.infobox .infobox-label {
color: var(--text-
font-weight: 600; /* semibold labels, like the band variant and table headers */
padding: var(--wt-pad-y) 0.8em var(--wt-pad-y) 0.2em; /* row rhythm = the wikitable's */
}
.infobox .infobox-data { color: var(--text-
/* ── Infobox BAND variant — Template:Infobox doc archive `wide=yes` wraps
Line 2,158 ⟶ 2,096:
distinguishes labels from values */
font-weight: 600;
color: var(--text-
margin-bottom: 0.15em;
}
Line 2,176 ⟶ 2,114:
margin: 1.2em 0;
margin-left: calc(-1 * var(--ed-list-indent)) !important;
color: var(--text-
font-style: italic;
}
Line 2,201 ⟶ 2,139:
.thumbcaption {
background-color: #fff;
color: var(--text-
font-family: var(--ed-
font-size: var(--ed-small);
border: none !important; /* MW core frames the caption in gray #c8ccd1 —
Line 2,216 ⟶ 2,154:
}
#footer, .mw-footer, .minerva-footer {
font-family: var(--ed-
color: var(--text-
border-top: 1px solid var(--
}
#footer li, .mw-footer li { font-size: var(--ed-small); }
#footer a, #footer a:visited,
.mw-footer a, .mw-footer a:visited { color: var(--text-
/* footer links follow the house link convention: grey resting underline
warming to coral on hover (the .mw-parser-output rule doesn't reach here) */
Line 2,238 ⟶ 2,176:
/* ── AI assistant panel on the theme: warm card, serif answers,
teal send button (later !important wins the ties vs section 8) ── */
.ext-aiassistant-panel { border: 1px solid var(--
/* ONE sans for the whole panel UI (the extension ships its own stack);
the assistant-message serif rule below this still wins for answers */
Line 2,244 ⟶ 2,182:
.ext-aiassistant-panel input,
.ext-aiassistant-panel textarea,
.ext-aiassistant-panel button { font-family: var(--ed-
.ext-aiassistant-header { border-bottom: 1px solid var(--
.ext-aiassistant-message-user .ext-aiassistant-message__content {
background-color: var(--text-dark) !important;
}
.ext-aiassistant-message-assistant {
font-family: var(--ed-
color: var(--text-dark) !important;
}
Line 2,311 ⟶ 2,249:
}
.ext-aiassistant-panel .cdx-button--weight-quiet:not(.cdx-button--icon-only)::before {
color: var(--
}
/* citation chips in
.ext-aiassistant-cite,
.ext-aiassistant-cite a { color: var(--
/* ── Inline footnotes ({{footnote}} → <span class="ed-fn" title="…">).
Line 2,331 ⟶ 2,269:
.ed-fn-chip::after {
content: "note";
font-family: var(--ed-
font-size: 0.7em;
vertical-align: super;
color: var(--text-
/* the house link convention: grey resting underline → coral on hover */
text-decoration: underline;
Line 2,367 ⟶ 2,305:
background: rgba(20, 18, 16, 0.92); /* near-black, slightly transparent */
color: #fff;
font-family: var(--ed-
font-size: 0.95rem;
line-height: 1.5;
Line 2,404 ⟶ 2,342:
.mwe-popups:after { display: none !important; }
.mwe-popups .mwe-popups-container { clip-path: none !important; }
/* The desktop hover popover (also created in Common.js, appended to <body>).
Line 2,425 ⟶ 2,358:
border-radius: 0;
box-shadow: 0 4px 16px rgba(43, 41, 38, 0.18);
font-family: var(--ed-
font-size: 0.9rem;
line-height: 1.45;
Line 2,441 ⟶ 2,374:
h1#firstHeading, .mw-first-heading { font-size: 1.7rem; }
.mw-body-content h2, .mw-body-content .mw-heading2 { font-size: 1.22rem; }
.ext-aiassistant-prompt-composer { border-bottom: 1px solid var(--
/* restate the mobile keyboard clearance — the desktop 12px inset above
would otherwise override section 9's padding-bottom (later source wins) */
Line 2,456 ⟶ 2,389:
padding: 1px 9px;
border-radius: 999px;
font-family: var(--ed-
font-size: 0.82em;
white-space: nowrap;
background: var(--wt-th-bg);
color: var(--text-
}
.rt-status-confirmed { background: #e6f3ea; color: #137333; }
Line 2,469 ⟶ 2,402:
.rt-btn {
font-family: var(--ed-
font-size: 0.95em;
line-height: 1;
padding: 5px 12px;
border: 1px solid var(--
border-radius: 5px;
background: #fff;
color: var(--text-
cursor: pointer;
}
.rt-btn:hover { background: var(--wt-th-bg); border-color: var(--text-
.rt-btn:active { transform: translateY(0.5px); }
.rt-btn.is-active.rt-btn--confirm { background: #137333; border-color: #137333; color: #fff; }
Line 2,497 ⟶ 2,430:
box-sizing: border-box;
width: var(--ed-infobox-w);
border: 1px solid var(--
border-collapse: separate; /* the INFOBOX box model: separate + table
padding (collapse ignores table padding) —
Line 2,505 ⟶ 2,438:
padding: 0.55em 0.9em 0.75em; /* = table.infobox padding */
background: #fff;
font-family: var(--ed-
font-size: var(--ed-small);
line-height: 1.5;
Line 2,517 ⟶ 2,450:
.key-figures .key-figures-above { /* = .infobox-above eyebrow — an INSIDE cell now */
text-align: left;
color: var(--text-
font-size: var(--ed-small);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--
padding: 0.2em 0.2em 0.55em; /* = .infobox-above padding */
}
.key-figures th { /* = .infobox-label */
text-align: left;
color: var(--text-
font-weight: 600; /* semibold labels — tracks .infobox-label */
padding: var(--wt-pad-y) 0.8em var(--wt-pad-y) 0.2em; /* = .infobox-label (wikitable rhythm) */
Line 2,534 ⟶ 2,467:
.key-figures td { /* = .infobox-data (left-aligned value) */
text-align: left;
color: var(--text-
padding: var(--wt-pad-y) 0.2em; /* = .infobox-data (wikitable rhythm) */
vertical-align: top;
| |||