MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 1,074:
--wt-xl: 24em;
--wt-xxl: 39em;
/* line/text shades used by the table rules — DEFAULTS (cool). Section 12
/* palette (section 12 re-points these onto the warm ramp) *and adds --text-dark / --text-light /
--wt-border: #eceef1;
--line-dark; keeping defaults here means §11 still renders if §12 is
--wt-rule: #72777d;
deleted (the same standalone-then-theme split as before). */
--wt-edge: #dadde1;
--line-light: #eceef1; /* interior grid (was --wt-border) */
--wt-th-bg: #f6f7f9;
--line-medium: #72777d; /* frame + header-row rule (was --wt-rule) */
--wt-th-text: #54595d;
--text-medium: #54595d; /* table header text (was --wt-th-text)*/
--wt-th-bg: #f6f7f9; /* header fill tint (a surface, not a gray line/text) */
--wt-pad-y: 0.5em;
}
Line 1,089 ⟶ 1,091:
font-size: 0.85em;
background-color: #fff;
border: 1px solid var(--wtline-borderlight);
font-variant-numeric: tabular-nums;
margin-top: 0.3em;
Line 1,105 ⟶ 1,107:
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
border: 1px solid var(--wtline-borderlight);
padding: var(--wt-pad-y) 0.6em;
}
table.wikitable > * > tr > th {
background-color: var(--wt-th-bg);
color: var(--wttext-th-textmedium);
}
table.wikitable > * > tr:first-child > th,
table.wikitable > * > tr:first-child > td { border-top: 1px solid var(--wtline-rulemedium); }
table.wikitable > * > tr:has(> th):has(+ tr > td) > th { border-bottom: 1px solid var(--wtline-rulemedium); }
table.wikitable > * > tr:last-child > td,
table.wikitable > * > tr:last-child > th { border-bottom: 1px solid var(--wtline-rulemedium); }
 
table.wikitable > tbody > tr:hover > td { background-color: #f8f9fa; }
Line 1,165 ⟶ 1,167:
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--wtline-edgelight);
}
table.wikitable.fintable td:first-child,
Line 1,188 ⟶ 1,190:
left: var(--wt-xs);
z-index: 1;
box-shadow: 1px 0 0 var(--wtline-edgelight);
background-color: #fff;
}
Line 1,218 ⟶ 1,220:
table.wikitable > tbody > tr > th,
table.wikitable > tbody > tr > td {
border: 1px solid var(--wtline-borderlight);
}
}
Line 1,258 ⟶ 1,260:
}
 
/* ── Design knobs. THREE text shades + THREE line shades, region-based, each
with a plain light/medium/dark name.
ONE gray ramp (3 grays + 2 hairlines), ONE small size, ONE sans.
TheTEXT: DARK --wttext-*dark lines re-point section= 11'sbody tableprose palette+ ontoall theheadings
same warm ramp (this :root is later, soMEDIUM it--text-medium wins= the tie).structured-data ──regions */(wikitable
cells, TOC, infobox) + labels/captions
LIGHT --text-light = faint annotations (page-ref superscripts,
list markers, footnote chip)
LINE: DARK --line-dark = heading underlines (h1 + h2 only) + footer
& TOC-header rules
MEDIUM --line-medium = table + infobox OUTER borders, table
header-row underline, container frames
LIGHT --line-light = inside-table grid + panel interior dividers
ONE small size, ONE sans. DARK is shared (#2b2926); text-medium/-light and
line-medium/-light are DIFFERENT hexes (readable label greys vs thin
hairlines). h3 has NO underline (bold text only). ── */
:root {
--ed-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--ed-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Inter", Helvetica, Arial, sans-serif; /* = Vector/Codex chrome stack */
--edtext-inkdark: #2b2926; /* DARK text,: headings,body strongprose rules+ all headings */
--edtext-secondarymedium: #66605c; /* labels,MEDIUM standfirst,text: data regions (table/TOC,/infobox) footer+ linkslabels */
--edtext-faintlight: #807973; /* pageLIGHT text: refssuperscripts, list markers, footerfootnote bodychip */
--edline-hairlinedark: #e7e2db2b2926; /* light warmDARK line: (infoboxh1/h2 underline + footer & TOC-header frame)rules */
--ed-hairlineline-strongmedium: #d6d0c8b3aca3; /* stronger warmMEDIUM line: (paneltable/infobox outer border, header-row, frame)frames */
--line-light: #e7e2db; /* LIGHT line: inside-table grid + panel interior dividers */
--ed-link: #0d7680; /* interactive teal: links, focus, send */
--ed-underline: #ccc1b7; /* resting link underline tint */
Line 1,290 ⟶ 1,304:
resolve against each marker's own font-size. */
 
/* sectiontable 11'sheader tablefill palettetint — a warm surface, warmednot part ontoof the samegray ramp.line/text
ramps (also consumed by the scrollbar thumb). The table line/text greys
--wt-rule is the table FRAME: deliberately lighter than the ink
now live in the --line-*/--text-* tokens above: warm finals that override
h2 rules so tables sit below section structure in the hierarchy */
the §11 cool defaults. */
--wt-border: #ece8e1;
--wt-rule: #b3aca3;
--wt-edge: var(--wt-border); /* ONE hairline tone for interior edges */
--wt-th-bg: #f3efe8;
--wt-th-text: var(--ed-secondary);
}
 
Line 1,345 ⟶ 1,356:
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--wtline-rulemedium) !important; }
::-webkit-scrollbar-corner { background: transparent !important; }
/* Minerva (mobile skin) paints its own white wrappers over body */
Line 1,365 ⟶ 1,376:
 
/* ── Mobile (Minerva) keeps ONE light line tone in tables — every
structural table line consumes --wtline-rulemedium, so one override
simplifies frame, header rule, and side rails at once ── */
.skin-minerva { --wtline-rulemedium: var(--wtline-borderlight); }
 
/* ── ONE sans: the whole interface (header, search, tagline, buttons,
Line 1,388 ⟶ 1,399:
font-size: var(--ed-body);
line-height: 1.6;
color: var(--edtext-inkdark);
font-variant-numeric: lining-nums;
}
Line 1,405 ⟶ 1,416:
font-family: var(--ed-sans);
font-size: var(--ed-small);
color: var(--text-medium); /* data regions render MEDIUM (table cells, infobox labels + values) */
}
 
Line 1,411 ⟶ 1,423:
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 --wtline-rulemedium. Sides: the RIGHT rail is a plain
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,444 ⟶ 1,456:
table.wikitable:has(.col, .col-wide) td:first-child {
border-left: none;
box-shadow: inset 1px 0 0 var(--wtline-rulemedium), /* left rail — sticks with the cell */
1px 0 0 var(--wtline-edgelight); /* right edge of the frozen column */
}
/* LEFT + RIGHT frame edges drawn on the CELLS in --wtline-rulemedium, matching the
top/bottom edges (section 11). The left edge MUST be on the first cell, not
only the table: with border-collapse a cell border outranks the table border,
so the first column's --wtline-borderlight (light) cell border would otherwise win the
left edge and render it lighter than the other three sides. Fintable overrides
first-child border-left → none + box-shadow rail (higher specificity, above). */
.wikitable th:first-child,
.wikitable td:first-child { border-left: 1px solid var(--wtline-rulemedium); }
.wikitable th:last-child,
.wikitable td:last-child { border-right: 1px solid var(--wtline-rulemedium); }
 
/* row labels MEET the bullets: the first column's text starts at the SAME indent
Line 1,465 ⟶ 1,477:
.wikitable td:first-child { padding-left: var(--ed-list-indent); }
 
table.wikitable { margin: 0; border-left: 1px solid var(--wtline-rulemedium); }
table.wikitable.fintable,
table.wikitable:has(.col, .col-wide) { border-left: none; }
Line 1,489 ⟶ 1,501:
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--edtext-secondarymedium);
text-align: left;
padding-bottom: 0.7em;
Line 1,502 ⟶ 1,514:
font-size: 0.97em;
line-height: 1.55;
color: var(--edtext-secondarymedium);
}
 
Line 1,537 ⟶ 1,549:
position: absolute;
left: calc(-1 * var(--ed-list-indent));
color: var(--edtext-faintlight);
font-family: var(--ed-sans);
font-size: 0.95em;
Line 1,552 ⟶ 1,564:
line-height: 0;
font-family: var(--ed-sans);
color: var(--edtext-faintlight);
}
 
Line 1,563 ⟶ 1,575:
font-weight: 400;
letter-spacing: -0.01em;
color: var(--edtext-inkdark) !important;
border-bottom: 2px solid var(--edline-inkdark) !important;
margin-top: var(--ed-title-gap) !important;
padding-bottom: 0.3em;
Line 1,576 ⟶ 1,588:
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--edtext-secondarymedium);
margin-bottom: 1.4em;
}
#contentSub .subpages a,
#contentSub .subpages a:visited { color: var(--edtext-secondarymedium) !important; }
 
/* ── Section headings: sans semibold on the house rules. Scoped to
Line 1,593 ⟶ 1,605:
font-weight: 600;
letter-spacing: -0.005em;
color: var(--edtext-inkdark) !important;
border-bottom: 1px solid var(--edline-inkdark) !important;
margin-top: var(--ed-heading-gap); /* same space before h2 and h3 */
margin-bottom: 0.7em;
Line 1,604 ⟶ 1,616:
font-size: 1.5rem; /* 24px */
font-weight: 600;
color: var(--edtext-inkdark) !important;
/* NO underline — h3 is bold sans text only (dark heading rules are h1 + h2) */
/* a FULL-WIDTH rule like h2 — but in the TABLE-FRAME tone (--wt-rule) rather
than h2's ink, so it reads one level down and rhymes with the table borders */
border-bottom: 1px solid var(--wt-rule);
margin-top: var(--ed-heading-gap); /* doubled vs the old 1.8em; same as h2 */
margin-bottom: 0.6em;
padding-bottom: 0.25em;
}
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
Line 1,616 ⟶ 1,625:
font-size: 1rem;
font-weight: 600;
color: var(--edtext-inkdark) !important;
}
/* the inner spans are pinned #202122 !important by old skin CSS — make
Line 1,644 ⟶ 1,653:
a.mw-ui-button, a.mw-ui-button:visited { color: #fff !important; }
.mw-editsection, .mw-editsection a, .mw-editsection a:visited {
color: var(--edtext-secondarymedium) !important;
text-decoration: none;
opacity: 0.7;
Line 1,691 ⟶ 1,700:
rule only), inset onto the number axis */
.vector-toc .vector-pinnable-header {
border-bottom: 1px solid var(--edline-inkdark) !important;
padding-top: 0.35rem;
padding-bottom: 0.95rem;
Line 1,703 ⟶ 1,712:
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--edtext-secondarymedium) !important;
margin-left: 0;
}
 
/* entries: TOP-LEVELALL rowslevels inuniform fullMEDIUM body inkthe soTOC theis a data sectionregion spine(like readsa astable),
stronglyso asparent theand article; CHILDchild rows (levelshare 2+)one droptone; todepth theis faintcarried inkby the thenumbers, not
colour. The ONLY emphasis is the current section: active = dark + bold, and
parent↔child contrast is now ink↔faint (the widest gap on the ramp), so
hover darkens to dark as pointer feedback.
subsections clearly recede and group under their parent WITHOUT any indent.
CASCADE: the base is a (0,2,0) non-visited + (0,3,0) :visited PAIR; thehover/active childare
Hover + active go to ink: a child darkens, a top-level row is already ink so
(0,3,0) !important and sit AFTER the child blockbase so source order hands them the tie for a hovered/active
its "current" cue is the weight bump on active.
childfor a hovered/active row. Keep this order: base → children → hover → active. */
CASCADE: the base is a (0,2,0) non-visited + (0,3,0) :visited PAIR; the child
rules carry their own :visited arm so they reach (0,4,0) and win for visited
child links regardless of order; hover/active are (0,3,0) !important and sit
AFTER the child block so source order hands them the tie for a hovered/active
child. Keep this order: base → children → hover → active. */
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
color: var(--edtext-inkmedium) !important;
font-size: var(--ed-small);
text-decoration: none;
}
.vector-toc .vector-toc-level-2link:hover >{ .vectorcolor: var(-toc-link,text-dark) !important; }
.vector-toc .vector-toc-level-2 > .vector-toc-link:visited,
.vector-toc .vector-toc-level-3 > .vector-toc-link,
.vector-toc .vector-toc-level-3 > .vector-toc-link:visited,
.vector-toc .vector-toc-level-4 > .vector-toc-link,
.vector-toc .vector-toc-level-4 > .vector-toc-link:visited {
color: var(--ed-faint) !important;
}
.vector-toc .vector-toc-link:hover { color: var(--ed-ink) !important; }
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: var(--edtext-inkdark) !important;
font-weight: 500 !important; /* the "current" cue (top-leveldark is+ alreadybold inkon one row) */
}
 
Line 1,800 ⟶ 1,797:
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--edtext-inkmedium);
}
.vector-toc #toc-mw-content-text.vector-toc-list-item-active .vector-toc-text::before {
Line 1,848 ⟶ 1,845:
content: "▸"; /* collapsed — the house triangle */
font-size: 0.65rem;
color: var(--edtext-faintmedium);
}
.vector-toc .vector-toc-list-item-expanded > .vector-toc-toggle::before {
content: "▾"; /* expanded */
}
.vector-toc .vector-toc-toggle:hover::before { color: var(--edtext-inkdark); }
 
/* ── Infobox: the page's ONE white card, in the data voice; its width
Line 1,867 ⟶ 1,864:
font-size: var(--ed-small);
background-color: #fff !important;
border: 1px solid var(--edline-hairlinemedium) !important; /* infobox OUTER border = medium */
padding: 0.55em 0.9em 0.75em;
line-height: 1.5;
Line 1,873 ⟶ 1,870:
.infobox .infobox-above {
background-color: #fff !important; /* beats the template's inline #cee0f2 */
color: var(--edtext-secondarymedium) !important; /* beats inline color:inherit */
text-align: left !important;
font-size: 0.75rem; /* the shared eyebrow size */
Line 1,879 ⟶ 1,876:
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--edline-inkmedium); /* infobox header-row underline = medium */
padding: 0.2em 0.2em 0.55em;
}
.infobox .infobox-label {
color: var(--edtext-secondarymedium);
font-weight: 400;
padding: 0.22em 0.8em 0.22em 0.2em;
}
.infobox .infobox-data { color: var(--edtext-inkmedium); padding: 0.22em 0.2em; }
 
/* ── Blockquotes: coral bar, serif italic (future-proofing — the emitter
Line 1,902 ⟶ 1,899:
left edge (a bar and a dot share no geometric
edge). Dial to 1px if it ever overshoots */
color: var(--edtext-secondarymedium);
font-style: italic;
}
Line 1,915 ⟶ 1,912:
#footer, .mw-footer, .minerva-footer {
font-family: var(--ed-sans);
color: var(--edtext-faintlight);
border-top: 1px solid var(--edline-inkdark) !important;
}
#footer li, .mw-footer li { font-size: var(--ed-small); }
#footer a, #footer a:visited,
.mw-footer a, .mw-footer a:visited { color: var(--edtext-secondarymedium) !important; }
 
/* ── 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(--edline-hairline-strongmedium) !important; }
/* 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 1,931 ⟶ 1,928:
.ext-aiassistant-panel textarea,
.ext-aiassistant-panel button { font-family: var(--ed-sans) !important; }
.ext-aiassistant-header { border-bottom: 1px solid var(--edline-hairlinelight) !important; }
.ext-aiassistant-message-user .ext-aiassistant-message__content {
background-color: var(--edtext-inkdark) !important;
}
.ext-aiassistant-message-assistant {
font-family: var(--ed-serif) !important;
color: var(--edtext-inkdark) !important;
}
.ext-aiassistant-footer {
border-top: 1px solid var(--edline-hairlinelight) !important;
background-color: var(--ed-paper) !important;
}
Line 1,965 ⟶ 1,962:
}
.ext-aiassistant-prompt-composer__send:disabled {
background-color: var(--edline-hairlinelight) !important;
border-color: var(--edline-hairlinelight) !important;
}
.ext-aiassistant-panel .cdx-button--weight-quiet:not(.cdx-button--icon-only)::before {
Line 1,992 ⟶ 1,989:
font-size: 0.7em;
vertical-align: super;
color: var(--edtext-faintlight);
text-decoration: underline dotted;
text-underline-offset: 2px;
Line 2,038 ⟶ 2,035:
padding: 0.6em 0.8em;
background: #fff;
color: var(--edtext-inkdark);
border: 1px solid var(--edline-hairline-strongmedium);
border-left: 3px solid var(--ed-accent);
border-radius: 4px;
Line 2,059 ⟶ 2,056:
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(--edline-hairlinelight) !important; }
}
 
Line 2,073 ⟶ 2,070:
white-space: nowrap;
background: var(--wt-th-bg);
color: var(--edtext-secondarymedium);
}
.rt-status-confirmed { background: #e6f3ea; color: #137333; }
Line 2,086 ⟶ 2,083:
line-height: 1;
padding: 5px 12px;
border: 1px solid var(--edline-hairline-strongmedium);
border-radius: 5px;
background: #fff;
color: var(--edtext-secondarymedium);
cursor: pointer;
}
.rt-btn:hover { background: var(--wt-th-bg); border-color: var(--edtext-faintlight); }
.rt-btn:active { transform: translateY(0.5px); }
.rt-btn.is-active.rt-btn--confirm { background: #137333; border-color: #137333; color: #fff; }