MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| (20 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,322 ⟶ 1,199:
/* =================================================================
12. EDITORIAL DESIGN SYSTEM
Appended LAST deliberately: later rules of equal specificity win,
so this section restyles typography / color / spacing WITHOUT
Line 1,328 ⟶ 1,205:
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,484 ⟶ 1,362:
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,
Line 1,504 ⟶ 1,388:
table.wikitable:has(.col, .col-wide) { border-left: none; }
/*
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-size: 0.
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ed-secondary);
}
Line 1,637 ⟶ 1,533:
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,665 ⟶ 1,561:
color: var(--ed-secondary) !important;
text-decoration: none;
opacity: 0.7;
}
Line 1,682 ⟶ 1,579:
:focus-visible { outline-color: var(--ed-link); }
/* ── TOC sidebar
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 {
Line 1,699 ⟶ 1,623:
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 {
Line 1,709 ⟶ 1,636:
.vector-toc .vector-toc-list-item-active > .vector-toc-link { color: var(--ed-ink) !important; }
/*
.vector-toc .vector-toc-contents,
.vector-toc .vector-toc-list {
Line 1,735 ⟶ 1,644:
}
.vector-toc .vector-toc-list-item {
position: relative; /* the number's anchor */
padding
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
/* the numbers */
.vector-toc .vector-toc-
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-
/* "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
Line 1,834 ⟶ 1,767:
.printfooter { display: none; } /* "Retrieved from ..." clutter; stays in print */
}
#footer, .mw-footer, .minerva-footer {
font-family: var(--ed-sans);
color: var(--ed-faint);
Line 1,896 ⟶ 1,829:
.ext-aiassistant-cite a { color: var(--ed-link) !important; }
/* ── Collapsible inline footnotes ({{footnote}} → <
MW 1.43's sanitizer REJECTS <details>/<summary> in wikitext
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; }
content: "note";
font-family: var(--ed-sans);
Line 1,921 ⟶ 1,853:
text-underline-offset: 2px;
}
.ed-fn.ed-
/* always in the DOM for the bot; never shown to readers as inline text */
.ed-fn
.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 ── */
Line 1,933 ⟶ 1,902:
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; }
}
| |||