MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Manual revert |
No edit summary |
||
| (41 intermediate revisions by the same user not shown) | |||
Line 3:
Applies read-only mode, branding, navigation, and AI assistant.
Logged-in overrides live in MediaWiki:Group-user.css
MANAGED WHOLESALE: replace the entire page from the canonical file
(temp/design/common_css_clean.css) — no incremental block pastes.
Color/typography authority: SECTION 12 owns all heading, link,
footer, table and AI-panel colors; earlier sections are structure.
================================================================= */
Line 108 ⟶ 112:
.mw-special-Book #coll-downloadbox { display: none; }
/* --- Infoboxes
by section 12) --- */
.infobox {
}
@media
@media (min-width: 640px) {
.infobox { margin: 0.5em 0 0.5em 1em; float: right; clear: right
}
.infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data,
Line 165 ⟶ 169:
}
/* --- Header reset (invisible fixed container for floating buttons) --- */
.header-container.header-chrome {
position: fixed !important;
Line 172 ⟶ 176:
z-index: 1000 !important;
pointer-events: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.minerva-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
Line 647 ⟶ 650:
#p-vector-user-menu-preferences { display: none !important; }
.vector-main-menu-landmark { display: none !important; }
/* --- Mobile: history bar --- */
Line 678:
/* =================================================================
7.
(Heading, link, and footer COLORS are owned by section 12 —
this section keeps only structural chrome fixes.)
================================================================= */
/* Remove Vector 2022 default title underline */
Line 713 ⟶ 688:
display: none !important;
height: 0 !important;
}
Line 806 ⟶ 745:
padding: 0 4px;
border-radius: 3px;
}
/* =================================================================
8. AI ASSISTANT PANEL — STRUCTURE
(Panel colors — borders, bubbles, send button, citations — are
owned by section 12's theme block.)
================================================================= */
Line 830 ⟶ 760:
}
.ext-aiassistant-panel { box-shadow: none !important; }
/* --- Header --- */
.ext-aiassistant-header {
margin-left: 0 !important;
margin-right: 0 !important;
Line 869 ⟶ 794:
.ext-aiassistant-message-user .ext-aiassistant-message__content {
color: white !important;
border-radius: 18px !important;
Line 881 ⟶ 805:
}
/* --- Assistant typography (
.ext-aiassistant-message-assistant {
font-size: 1em !important;
overflow-wrap: break-word !important;
white-space: normal !important;
Line 946 ⟶ 868:
}
/* --- Citations (color set by section 12) --- */
.ext-aiassistant-cite {
line-height: 1 !important;
Line 962 ⟶ 884:
}
/* --- "New Chat" label (color set by section 12) --- */
.ext-aiassistant-panel .cdx-button--weight-quiet:not(.cdx-button--icon-only) {
font-size: 0 !important;
Line 970 ⟶ 892:
font-size: 0.875rem !important;
font-weight: bold !important;
visibility: visible !important;
}
Line 976 ⟶ 897:
/* --- Footer + Composer --- */
.ext-aiassistant-footer {
display: flex !important;
align-items: center !important;
Line 982 ⟶ 902:
padding: 0 !important;
box-sizing: border-box !important;
}
Line 999 ⟶ 918:
}
/* ---
.ext-aiassistant-prompt-composer__send {
border-radius: 50% !important;
Line 1,018 ⟶ 929:
justify-content: center !important;
margin-left: 4px !important;
}
Line 1,064 ⟶ 964:
.ext-aiassistant-footer {
padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
Line 1,093 ⟶ 986:
/* --- Tablet (min-width: 768px) --- */
@media screen and (min-width: 768px) {
/*
#cps-open-toc {
visibility: visible !important;
z-index: 9999 !important;
}
}
Line 1,176 ⟶ 1,053:
/* ============================================================================
SECTION 11
- .wikitable = NEUTRAL default: themed (frame, caption, header
tint, hairlines, hover) but free-form — columns
flex, labels wrap, nothing frozen.
- .wikitable.fintable = FINANCIAL bundle: frozen nowrap first column +
data-column width floors. The bot emits the class
automatically on numeric-dense tables; add it by
hand to get the same behavior on a manual table.
- Future table types = one new class, one new bundle below.
- .wt-freeze-2 = add-on modifier: freeze columns 1+2 (mark column 1
col-xs so column 2 knows where to stick).
============================================================================ */
:root {
/* column size scale — markers map to these; an UNMARKED column flexes */
--wt-xs: 3em;
--wt-s: 6em;
--wt-m: 9em;
--wt-l: 15em;
--wt-xl: 24em;
--wt-xxl: 39em;
/* palette (section 12 re-points these onto the warm ramp) */
--wt-border: #eceef1;
--wt-rule: #72777d;
--wt-edge: #dadde1;
--wt-th-bg: #f6f7f9;
--wt-th-text: #54595d;
--wt-pad-y: 0.5em;
}
/* ── Theme: EVERY wikitable, any type ── */
.wikitable { width: 100% !important; }
table.wikitable {
font-size: 0.85em;
background-color: #fff;
border: 1px solid var(--wt-border);
font-variant-numeric: tabular-nums;
margin-top: 0.3em;
margin-bottom: 2em;
}
table.wikitable td { background-color: #fff; }
Line 1,215 ⟶ 1,099:
font-weight: bold;
background-color: #fff;
padding-bottom: 0.45em;
}
table.wikitable > tr > th,
Line 1,226 ⟶ 1,110:
table.wikitable > * > tr > th {
background-color: var(--wt-th-bg);
color: var(--wt-th-text);
}
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-
table.wikitable > * > tr:last-child > td,
table.wikitable > * > tr:last-child > th { border-bottom: 1px solid var(--wt-rule); }
table.wikitable > tbody > tr:hover > td { background-color: #f8f9fa; }
table.wikitable td p { font-size: inherit !important; }
/* ── Column size scale: usable on ANY table type ── */
.wikitable th.col-xs, .wikitable td.col-xs { width: var(--wt-xs); min-width: var(--wt-xs); }
.wikitable th.col-s, .wikitable td.col-s { width: var(--wt-s); min-width: var(--wt-s); }
.wikitable th.col-m, .wikitable td.col-m { width: var(--wt-m); min-width: var(--wt-m); }
.wikitable th.col-l, .wikitable td.col-l
.wikitable th.col-xl, .wikitable td.col-xl { width: var(--wt-xl); min-width: var(--wt-xl); }
.wikitable th.col-xxl, .wikitable td.col-xxl { width: var(--wt-xxl); min-width: var(--wt-xxl); }
/* legacy marker names on published pages = aliases of s / m */
.wikitable th.col, .wikitable td.col { width: var(--wt-s); min-width: var(--wt-s); }
.wikitable th.col-wide, .wikitable td.col-wide { width: var(--wt-m); min-width: var(--wt-m); }
/* ── FINTABLE bundle — THE definition of "financial table" on this wiki.
Applies to .fintable (emitter-typed numeric-dense tables) and, via
:has(), to every already-published bot table — they all carry the
legacy
re-publishing. The bridge is scoped to the LEGACY marker names only:
col-s/col-m on a neutral hand table does NOT trigger financial
behavior. Repeat this selector group verbatim wherever fintable
scoping is needed (section 12 uses it too). ── */
/* data-column floor (legacy pages can have unmarked data columns) */
table.wikitable.fintable th:not(:first-child),
table.wikitable.fintable td:not(:first-child),
table.wikitable:has(.col, .col-wide) th:not(:first-child),
table.wikitable:has(.col, .col-wide) td:not(:first-child) { min-width: var(--wt-s); }
/* frozen row-label column */
table.wikitable.fintable th:first-child,
table.wikitable.fintable td:first-child,
table.wikitable:has(.col, .col-wide) th:first-child,
table.wikitable:has(.col, .col-wide) td:first-child {
white-space: nowrap;
min-width: 16em;
Line 1,296 ⟶ 1,158:
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--wt-edge);
}
table.wikitable.fintable td:first-child,
table.wikitable:has(.col, .col-wide) td:first-child { background-color: #fff; }
table.wikitable.fintable th:first-child,
table.wikitable:has(.col, .col-wide) th:first-child { background-color: var(--wt-th-bg); }
/* ── wt-freeze-2 add-on: freeze columns 1+2. Mark column 1 col-xs — column
2 sticks exactly one xs step in. Comes AFTER the fintable bundle so
its column-1 width exception wins the tie. ── */
table.wikitable.wt-freeze-2 th:first-child,
table.wikitable.wt-freeze-2 td:first-child {
min-width: var(--wt-xs); /* overrides the fintable 16em label column */
white-space: normal;
position: sticky;
left: 0;
z-index: 1;
}
table.wikitable.wt-freeze-2 th:nth-child(2),
table.wikitable.wt-freeze-2 td:nth-child(2) {
position: sticky;
left: var(--wt-xs);
z-index: 1;
box-shadow: 1px 0 0 var(--wt-edge);
background-color: #fff;
}
table.wikitable.wt-freeze-2
table.wikitable.wt-freeze-2
table.wikitable.wt-freeze-2 th:first-child { background-color: var(--wt-th-bg); }
@media screen and (max-width: 719px) {
table.wikitable { border: none !important; }
Line 1,309 ⟶ 1,195:
table.wikitable > tbody > tr > td {
border: 1px solid var(--wt-border);
}
}
/* =================================================================
12. EDITORIAL DESIGN SYSTEM v11 ("paper & ink")
Appended LAST deliberately: later rules of equal specificity win,
so this section restyles typography / color / spacing WITHOUT
editing sections 1-11
color variables from here — a later :root wins). Delete the whole
section to revert.
v11: full-sheet cleanup — sections 7/8 stripped to structure (this
section is the single color authority); TOC block consolidated
(numbers in a fixed right-aligned gutter, "0." on Beginning,
inline chevron, no rails).
================================================================= */
Line 1,358 ⟶ 1,234:
}
/* ── Design knobs
ONE gray ramp (3 grays + 2 hairlines), ONE small size, ONE sans.
The --wt-* lines re-point section 11's table palette onto the
same warm ramp (this :root is later, so it wins the tie). ── */
:root {
--ed-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--ed-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"
--ed-ink: #
--ed-
--ed-
--ed-
--ed-
--ed-link: #0d7680; /* interactive teal:
--ed-underline: #ccc1b7; /* resting link underline tint
--ed-accent: #f07662; /* house coral — hover underline, sparing */
--ed-paper: #fbfaf7; /* page canvas (set #fff to disable the tint) */
--ed-
--ed-measure:
--ed-
--ed-small: 0.8125rem; /* THE small size: tables, infobox, TOC, footer */
--ed-title-gap: 2.1rem; /* CALIBRATION: moves the title rule DOWN */
--ed-list-indent: 1.2rem; /* per-level indent = the marker-to-text step
(rem, NOT em — an em offset would resolve
against each marker's own font-size) */
/* section 11's table palette, warmed onto the same ramp.
--wt-rule is the table FRAME: deliberately lighter than the ink
h2 rules so tables sit below section structure in the hierarchy */
--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);
}
/* ── Canvas: warm paper
paints white on its own, the TOC column, and the TOC's
scroll-fade overlay ── */
body, .mw-page-container { background-color: var(--ed-paper) !important; }
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
background-color: var(--ed-paper) !important;
}
#vector-toc, .vector-toc, .vector-pinned-container {
background-color: transparent !important;
}
/* Minerva (mobile skin) paints its own white wrappers over body */
#mw-mf-page-center, .mw-body { background-color: var(--ed-paper) !important; }
.vector-sticky-pinned-container::after {
background: linear-gradient(transparent, var(--ed-paper)) !important;
}
@media print { body, .mw-page-container { background-color: #fff !important; } }
/* ──
for logged-in users in MediaWiki:Group-user.css (the wiki's
read-only-mode architecture — Group-user.css only loads when
logged in, so no body-class dependency) ── */
.vector-appearance-landmark,
#vector-appearance-dropdown,
#vector-appearance-pinned-container,
#vector-appearance,
.vector-column-end { display: none !important; }
/* ── Mobile (Minerva) keeps ONE light line tone in tables — every
structural table line consumes --wt-rule, so one override
simplifies frame, header rule, and side rails at once ── */
.skin-minerva { --wt-rule: var(--wt-border); }
/* ── ONE sans: the whole interface (header, search, tagline, buttons,
footer) and all data share the Codex stack; prose re-asserts the
serif below ── */
body { font-family: var(--ed-sans); }
/* ── Logo on the title axis: push it right by the TOC column + grid
gap at Vector's own grid breakpoints, so the logo + tagline sit
exactly above the page title. Below 1120px the TOC column does
not exist, so no offset. ── */
@media (min-width: 1120px) { .mw-logo { margin-left: calc(12.25rem + 24px); } }
@media (min-width: 1680px) { .mw-logo { margin-left: calc(15.5rem + 24px); } }
/* ── Prose voice: serif, warm ink (Minerva has no .mw-body-content —
its wrapper is #bodyContent.content) ── */
.mw-body-content,
.skin-minerva #bodyContent.content {
font-family: var(--ed-serif);
font-size: var(--ed-body);
line-height: 1.6;
color: var(--ed-
font-variant-numeric: lining-nums;
}
Line 1,394 ⟶ 1,330:
.mw-parser-output > ol,
.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); }
.mw-parser-output table p { max-width: none; }
/* 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
every em-based column width) */
table.wikitable, .infobox {
font-family: var(--ed-sans);
font-size: var(--ed-
}
/* ── The table BLOCK ──
1. Printed ON the paper (not white cards): surfaces transparent;
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 --wt-rule. 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
FINTABLE it must be a box-shadow on the sticky first-column
cells — with border-collapse, borders on sticky cells do not
move when the cell sticks (they vanish on horizontal scroll),
but shadows travel with the cell — and the table's own left
border is disabled so the rail is the only line there.
The fintable selector group below is section 11's definition
of "financial table", repeated verbatim.
3. The table's outer margins move to the scroll WRAPPER so the
horizontal scrollbar hugs the bottom rule, and the scrollbar
itself goes thin + warm. ── */
table.wikitable,
table.wikitable td,
table.wikitable caption { background-color: transparent; }
table.wikitable > tbody > tr:hover > td { background-color: #f2ede5; }
/* the frozen first column carries its own paper bg (below) at higher
specificity, so it needs its OWN hover rule to warm with the row */
table.wikitable.fintable > tbody > tr:hover > td:first-child,
table.wikitable:has(.col, .col-wide) > tbody > tr:hover > td:first-child {
background-color: #f2ede5;
}
table.wikitable.fintable td:first-child,
table.wikitable:has(.col, .col-wide) td:first-child {
background-color: var(--ed-paper);
}
table.wikitable.fintable th:first-child,
table.wikitable.fintable td:first-child,
table.wikitable:has(.col, .col-wide) th:first-child,
table.wikitable:has(.col, .col-wide) td:first-child {
border-left: none;
box-shadow: inset 1px 0 0 var(--wt-rule), /* left rail — sticks with the cell */
1px 0 0 var(--wt-edge); /* right edge of the frozen column */
}
.wikitable th:last-child,
.wikitable td:last-child { border-right: 1px solid var(--wt-rule); }
table.wikitable { margin: 0; border-left: 1px solid var(--wt-rule); }
table.wikitable.fintable,
table.wikitable:has(.col, .col-wide) { border-left: none; }
/* the table's outer margins live on the scroll WRAPPER (the emitter wraps
every table in <div style="overflow-x:auto">): top margin gives air
before the eyebrow caption + separates consecutive tables; the scrollbar
goes thin and quiet in the header-row tint */
.mw-parser-output div[style*="overflow-x"],
.copy-table-scroll {
margin: 1.8em 0 2em;
scrollbar-width: thin;
scrollbar-color: var(--wt-th-bg) transparent;
}
/* caption = the table's TITLE as a quiet EYEBROW (the shared kicker
treatment — breadcrumb / infobox header): uppercase sans, letter-spaced,
secondary ink, with air below before the grid. No glyph. */
table.wikitable caption {
font-family: var(--ed-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ed-secondary);
text-align: left;
padding-bottom: 0.7em;
}
Line 1,410 ⟶ 1,421:
font-size: 0.97em;
line-height: 1.55;
color: var(--ed-
}
/* ── List geometry — ONE definition for both skins: text hangs at
--ed-list-indent per level; the markers are positioned EXACTLY
below (see the ::before block). !important + the Minerva-qualified
selectors beat section 7's mobile rules and the skin defaults;
table-cell lists keep section 11's own rule (higher specificity). ── */
.mw-parser-output ul,
.mw-parser-output ol,
body.skin-minerva .mw-parser-output ul,
body.skin-minerva .collapsible-block ul {
margin-left: 0 !important;
padding-left: var(--ed-list-indent) !important;
}
.mw-parser-output ol { padding-left: 1.4em !important; } /* numbers need more room */
/* list rhythm: air between points, predictable nesting */
Line 1,418 ⟶ 1,443:
.mw-parser-output li li { margin-top: 0.3em; margin-bottom: 0.3em; }
.mw-parser-output li > ul { margin-top: 0.3em; }
/* per-level markers drawn as ::before at EXACT positions: each marker's
LEFT edge sits on its parent's text axis (level 1 on the heading
axis), because left: -indent lands on the container edge, which IS
the parent text x. Shapes: bullet / house triangle (drivers, echoes
the TOC prefix) / hairline en dash; per-level font-size +
line-height keep the three optically equal and vertically centered */
.mw-parser-output ul { list-style: none !important; }
.mw-parser-output ul > li { position: relative; }
.mw-parser-output ul > li::before {
content: "\2022";
position: absolute;
left: calc(-1 * var(--ed-list-indent));
color: var(--ed-faint);
font-family: var(--ed-sans);
font-size: 0.95em;
line-height: 1.68;
}
.mw-parser-output ul ul > li::before { content: "\25B8"; font-size: 0.7em; line-height: 2.29; }
.mw-parser-output ul ul ul > li::before { content: "\2013"; font-size: 0.95em; line-height: 1.68; }
/* page-reference superscripts — present everywhere, must whisper.
line-height:0 stops them inflating the line box
.mw-body-content sup
.skin-minerva .content sup {
font-size: 68%;
line-height: 0;
Line 1,429 ⟶ 1,474:
}
/* ── Title block: serif display, REGULAR weight, large;
knob lands its rule on the CONTENTS rule's line ── */
h1#firstHeading, .mw-first-heading {
font-family: var(--ed-serif);
Line 1,438 ⟶ 1,484:
color: var(--ed-ink) !important;
border-bottom: 2px solid var(--ed-ink) !important;
margin-top: var(--ed-title-gap) !important;
padding-bottom: 0.3em;
margin-bottom: 0.35em;
}
/* breadcrumb under the title rule —
#contentSub .subpages {
font-family: var(--ed-sans);
font-size: 0.
font-weight: 600;
letter-spacing: 0.08em;
Line 1,454 ⟶ 1,501:
#contentSub .subpages a:visited { color: var(--ed-secondary) !important; }
/* ── Section headings: sans semibold on the house rules.
.mw-body-content h2, .mw-body-content .mw-heading2, .section-heading,
.skin-minerva .content h2 {
font-family: var(--ed-sans);
font-size: 1.4rem;
Line 1,469 ⟶ 1,518:
padding-bottom: 0.3em;
}
.mw-body-content h3
.skin-minerva .content h3 {
font-family: var(--ed-sans);
font-size: 1.08rem;
Line 1,479 ⟶ 1,529:
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
font-family: var(--ed-sans);
font-size:
font-weight: 600;
color: var(--ed-ink) !important;
}
/* the inner spans are pinned #202122 !important by
them follow their heading's ink instead */
.mw-headline, .mw-page-title-main { color: inherit !important; }
Line 1,512 ⟶ 1,561:
color: var(--ed-secondary) !important;
text-decoration: none;
opacity: 0.7;
}
/* ── Focus/active states join the interactive teal — Codex paints them
in its own progressive blue (#36c) otherwise. The generic
.cdx-text-input rule covers the header search box; the AI chat
input is exempted further below (its ring sits on the composer). ── */
.cdx-text-input__input:focus,
.cdx-text-input__input:enabled:focus {
border-color: var(--ed-link) !important;
box-shadow: inset 0 0 0 1px var(--ed-link) !important;
}
.cdx-button:enabled:focus,
.cdx-button--fake-button:focus {
box-shadow: inset 0 0 0 2px var(--ed-link) !important;
}
:focus-visible { outline-color: var(--ed-link); }
/* ── TOC sidebar — consolidated final design.
Geometry: every list item reserves a number GUTTER via padding;
MediaWiki's own section numbers (Vector ships them display:none)
are re-shown ABSOLUTELY into the gutter, right-aligned so the
dots form one column ("9." pads left, "10." fills the box); the
::after adds the dot. Entry text — first line AND wrapped lines —
starts at the padding edge by construction. "Beginning" (the one
entry MediaWiki leaves unnumbered) gets a generated "0." in the
same geometry. Nested lists sit FLUSH in the parent's padding box:
level-2 numbers start at the level-1 text axis (the numbers carry
the hierarchy — no rails). The expand/collapse control is the
house triangle ▸/▾ INLINE after the heading text. The CONTENTS
header is inset onto the single-digit axis via MARGIN (a border
travels with margins, not paddings).
CALIBRATION knobs: --toc-numb-gutter (text column start; the box
gutter−0.35rem must fit "22." or the dot wraps), level-2's wider
token, --toc-header-inset, and the 0.22rem row rhythm. ── */
.vector-toc {
font-family: var(--ed-sans);
--toc-numb-gutter: 1.6rem;
--toc-header-inset: 0.6rem;
}
.vector-toc .vector-toc-list-item.vector-toc-level-2 { --toc-numb-gutter: 2.8rem; }
/* ^ the level-2 box (gutter - 0.35rem gap) must fit "12.1." (~39px @13px
tabular) — at 2.2rem a two-digit parent's number overflowed its box and
butted against the text */
/* CONTENTS header: label + 1px ink rule on the title rule's line
(padding-top moves the label and rule together; padding-bottom the
rule only), inset onto the number axis */
.vector-toc .vector-pinnable-header {
border-bottom: 1px solid var(--ed-ink) !important;
padding-top: 0.35rem;
padding-bottom: 0.95rem;
margin-bottom: 0.9rem;
padding-left: 0 !important;
margin-left: var(--toc-header-inset) !important;
}
.vector-toc .vector-pinnable-header-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ed-secondary) !important;
margin-left: 0;
}
/* entries: quiet sans at the ONE small size; ink on hover/active */
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
color: var(--ed-secondary) !important;
font-size:
text-decoration: none;
}
Line 1,525 ⟶ 1,636:
.vector-toc .vector-toc-list-item-active > .vector-toc-link { color: var(--ed-ink) !important; }
/* lists flush on the component edge; rhythm + number gutter on the li */
.vector-toc .vector-toc-contents,
.vector-toc .vector-toc-list {
margin: 0;
padding: 0;
list-style: none;
}
.vector-toc .vector-toc-list-item {
position: relative; /* the number's anchor */
padding: 0.22rem 0 0.22rem var(--toc-numb-gutter) !important;
font-size: var(--ed-small); /* li, link text and the abspos number must
share ONE font size: the number's static
position is computed from the LI's line
metrics — a larger li strut seats the
number ~1px above the 13px text */
}
.vector-toc .vector-toc-list-item > .vector-toc-list { margin-top: 0.1rem; }
/* the numbers */
.vector-toc .vector-toc-numb {
display: block; /* defeat Vector's display:none */
position: absolute;
left: 0;
width: calc(var(--toc-numb-gutter) - 0.35rem); /* 0.35rem = number→text gap */
text-align: right;
white-space: nowrap; /* the dot must never wrap inside the box */
font-variant-numeric: tabular-nums;
}
.vector-toc .vector-toc-numb::after { content: "."; }
/* "0." for Beginning — styled like a number INSIDE the link (the li is
body-size and bolds when active; pin size/weight, re-bold on active) */
.vector-toc #toc-mw-content-text::before {
content: "0.";
position: absolute;
left: 0;
width: calc(var(--toc-numb-gutter) - 0.35rem);
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--ed-secondary);
font-size: var(--ed-small);
font-weight: 400;
}
.vector-toc #toc-mw-content-text.vector-toc-list-item-active::before {
color: var(--ed-ink);
font-weight: 700;
}
/* chevron: the entry text goes inline so the sibling toggle button
flows right after the label ("Outlook 3 ▾"). The Codex icon is
replaced by a ::before glyph switched on the li's expanded state;
font-size:0 on the button hides its screen-reader span visually
without removing it for assistive tech. */
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-text { display: inline; }
.vector-toc .vector-toc-toggle {
position: static !important;
display: inline !important;
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
height: auto !important;
margin: 0 0 0 0.3em !important;
padding: 0 0.2em !important;
border: none !important;
background: none !important;
font-size: 0;
}
.vector-toc .vector-toc-toggle .vector-icon { display: none; }
.vector-toc .vector-toc-toggle::before {
content: "▸"; /* collapsed — the house triangle */
font-size: 0.65rem;
color: var(--ed-faint);
}
.vector-toc .vector-toc-list-item-expanded > .vector-toc-toggle::before {
content: "▾"; /* expanded */
}
.vector-toc .vector-toc-toggle:hover::before { color: var(--ed-ink); }
/* ── Infobox: the page's ONE white card, in the data voice; its width
is the SAME token the prose measure subtracts, ENFORCED with
!important so inline widths cannot break the axis — and pinned
class-generically so ANY infobox markup (table or div) obeys. ── */
.mw-parser-output .infobox { /* class-generic: any infobox markup */
width: var(--ed-infobox-w) !important;
box-sizing: border-box;
}
.mw-parser-output table.infobox {
font-family: var(--ed-sans);
font-size: var(--ed-
background-color: #fff !important;
border: 1px solid var(--ed-hairline) !important;
Line 1,541 ⟶ 1,736:
color: var(--ed-secondary) !important; /* beats inline color:inherit */
text-align: left !important;
font-size: 0.
font-weight: 600;
letter-spacing: 0.
text-transform: uppercase;
border-bottom: 1px solid var(--ed-ink);
Line 1,554 ⟶ 1,749:
}
.infobox .infobox-data { color: var(--ed-ink); padding: 0.22em 0.2em; }
/* ── Blockquotes: coral bar, serif italic (future-proofing — the emitter
Line 1,565 ⟶ 1,756:
padding: 0.2em 0 0.2em 1.2em;
margin: 1.2em 0;
color: var(--ed-
font-style: italic;
}
/* ── Footer + page-bottom cleanup.
{ font-size: 0.75em }`, which COMPOUNDS with any footer size —
the rem on the li kills the compounding; footer now matches
the TOC exactly ── */
@media screen {
.printfooter { display: none; } /* "Retrieved from ..." clutter; stays in print */
}
#footer, .mw-footer, .minerva-footer {
font-family: var(--ed-sans);
color: var(--ed-faint);
border-top: 1px solid var(--ed-ink) !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(--ed-secondary) !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(--ed-hairline-strong) !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 */
.ext-aiassistant-panel,
.ext-aiassistant-panel input,
.ext-aiassistant-panel textarea,
.ext-aiassistant-panel button { font-family: var(--ed-sans) !important; }
.ext-aiassistant-header { border-bottom: 1px solid var(--ed-hairline) !important; }
.ext-aiassistant-message-user .ext-aiassistant-message__content {
background-color: var(--ed-ink) !important;
}
.ext-aiassistant-message-assistant {
font-family: var(--ed-serif) !important;
color: var(--ed-ink) !important;
}
.ext-aiassistant-footer {
border-top: 1px solid var(--ed-hairline) !important;
background-color: var(--ed-paper) !important;
}
/* ONE focus ring around the whole composer (input + send button); the
text field itself stays borderless — the panel's input is exempted
from the generic Codex focus rule above */
.ext-aiassistant-panel .cdx-text-input__input,
.ext-aiassistant-panel .cdx-text-input__input:focus,
.ext-aiassistant-prompt-composer__input,
.ext-aiassistant-prompt-composer__input:focus {
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.ext-aiassistant-prompt-composer { box-shadow: none !important; }
.ext-aiassistant-prompt-composer:focus-within {
outline: 1px solid var(--ed-link) !important;
outline-offset: -1px;
box-shadow: none !important;
}
.ext-aiassistant-prompt-composer__send:not(:disabled) {
background-color: var(--ed-link) !important;
border-color: var(--ed-link) !important;
}
.ext-aiassistant-prompt-composer__send:disabled {
background-color: var(--ed-hairline) !important;
border-color: var(--ed-hairline) !important;
}
.ext-aiassistant-panel .cdx-button--weight-quiet:not(.cdx-button--icon-only)::before {
color: var(--ed-link) !important;
}
/* citation chips in the theme's interactive teal, like article links */
.ext-aiassistant-cite,
.ext-aiassistant-cite a { color: var(--ed-link) !important; }
/* ── Collapsible inline footnotes ({{footnote}} → <span class="ed-fn">).
MW 1.43's sanitizer REJECTS <details>/<summary> in wikitext
(verified live: tags render as literal text), so this is spans +
the Common.js toggle (adds/removes .ed-fn-open on chip click).
Readers see a small dotted-underline "note" chip; clicking opens
the note as a POPOVER card that floats ABOVE the text (no reflow —
the paragraph never shifts). The chip label is CSS content and the
literal "(footnote: " / ")" wrappers live in always-hidden spans,
so the bot's HTML retrieval reads the full note regardless of CSS
(Docling parses the DOM, not the rendered layout) — readers and
RAG see different things from one markup.
Common.js adds .ed-fn-flip near the right edge (card opens leftward)
and keeps only one card open at a time. ── */
.ed-fn { position: relative; } /* the popover's anchor */
.ed-fn-chip { cursor: pointer; white-space: nowrap; }
.ed-fn-chip::after {
content: "note";
font-family: var(--ed-sans);
font-size: 0.7em;
vertical-align: super;
color: var(--ed-faint);
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.ed-fn-chip:hover::after,
.ed-fn.ed-fn-open > .ed-fn-chip::after { color: var(--ed-link); }
/* always in the DOM for the bot; never shown to readers as inline text */
.ed-fn-pre, .ed-fn-close { display: none; }
.ed-fn-body { display: none; }
/* the popover card */
.ed-fn.ed-fn-open > .ed-fn-body {
display: block;
position: absolute;
top: 1.6em; /* just below the chip's line */
left: 0;
z-index: 30;
width: max-content;
max-width: min(24rem, 90vw); /* never overflow the viewport */
padding: 0.7em 0.9em;
background: #fff;
border: 1px solid var(--ed-hairline-strong);
border-left: 3px solid var(--ed-accent); /* house coral spine */
border-radius: 2px;
box-shadow: 0 6px 22px rgba(43, 41, 38, 0.14);
font-family: var(--ed-serif);
font-size: 0.9rem;
font-weight: 400;
font-style: normal;
line-height: 1.5;
letter-spacing: 0;
text-align: left;
text-transform: none;
white-space: normal;
color: var(--ed-ink);
}
/* a card needs no inline parens */
.ed-fn.ed-fn-open > .ed-fn-body::before,
.ed-fn.ed-fn-open > .ed-fn-body::after { content: none; }
/* near the right edge, open the card leftward (JS sets .ed-fn-flip) */
.ed-fn.ed-fn-open.ed-fn-flip > .ed-fn-body { left: auto; right: 0; }
/* no-JS safety net: if site JS ever fails to load, notes stay readable */
.client-nojs .ed-fn-body { display: inline; color: var(--ed-secondary); }
.client-nojs .ed-fn-chip { display: none; }
/* ── Mobile ── */
@media screen and (max-width: 768px) {
:root { --ed-measure: 100%; } /* infobox is full-width on mobile */
.mw-parser-output .infobox { width: 100% !important; }
h1#firstHeading, .mw-first-heading { font-size: 1.7rem; }
.mw-body-content h2, .mw-body-content .mw-heading2 { font-size: 1.22rem; }
/* footnote card → fixed bottom sheet so it can never clip off-screen */
.ed-fn.ed-fn-open > .ed-fn-body {
position: fixed;
left: 1rem; right: 1rem; bottom: 1rem;
top: auto; width: auto; max-width: none;
box-shadow: 0 -4px 22px rgba(43, 41, 38, 0.18);
}
.ext-aiassistant-prompt-composer { border-bottom: 1px solid var(--ed-hairline) !important; }
}
| |||