Insurer Brain

MediaWiki:Common.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 1,586:
:focus-visible { outline-color: var(--ed-link); }
 
/* ── TOC sidebar — consolidatedflat finalleft-aligned design.
Every entry, ANY level, starts on ONE left axis: the section
Geometry: every list item reserves a number GUTTER via padding;
MediaWiki'snumber ownis section numbersINLINE (Vector ships themit display:none; we re-show it)
areflowing re-shown ABSOLUTELYstraight into the gutter,title right-alignedas a single text run, so the"2.1.
dotsPress formrelease" reads as one column ("9string." pads left, "10."Depth fillsis thecarried box);by the
::afternumber addsitself theplus dot.a Entrylighter textink —on firstchild linerows AND— wrappedNO lines —indentation,
NO number gutter, NO absolute positioning (the old gutter geometry
starts at the padding edge by construction. "Beginning" (the one
is gone). The ONE structural rule is a hanging indent on every li
entry MediaWiki leaves unnumbered) gets a generated "0." in the
same(--toc-hang): geometry.the Nestedfirst listsline sitoutdents FLUSH into the parent'saxis, paddingwrapped box:lines
align under the TITLE. Nested <ul>s are pulled back by the same
--toc-hang so level-2+ numbers startland aton the level-1 text axis (the numbersflat, carryno
the hierarchy — no rails). The expand/collapse control is the
staircase). "Beginning" (the one entry MediaWiki leaves unnumbered)
house triangle ▸/▾ INLINE after the heading text. The CONTENTS▼
gets a generated inline "0.". Expand/collapse is the house triangle
header is inset onto the single-digit axis via MARGIN (a border
▲ house triangle ▸/▾ INLINE after the heading text. The CONTENTS header left-aligns with
travels with margins, not paddings).
the number axis.
CALIBRATION knobs: --toc-numb-gutter (text column start; the box
CALIBRATION: --toc-hang is the wrap-indent / number budget — size
gutter−0.35rem must fit "22." or the dot wraps), level-2's wider
it to the title-start of the entries that actually wrap (level-2,
token,~"2.2. --toc-header-inset, and"); the 0.22rem row rhythm is unchanged. ── */
.vector-toc {
font-family: var(--ed-sans);
--toc-hang: 2.6em; /* hanging indent = number budget + gap to title */
--toc-numb-gutter: 1.6rem;
--toc-header-inset: 0.6rem; /* CONTENTS label sits on the number axis */
}
.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
Line 1,633 ⟶ 1,630:
}
 
/* entries: quiet sans at the ONE small size;. inkCHILD onrows hover/active(level */2+) drop to
the faint ink so subsections group under their parent WITHOUT any indent;
hover + active go to full ink. All four colour rules share the same
(0,3,0) specificity with !important, so SOURCE ORDER breaks the ties:
base → children → hover → active (later wins) — keep them in this order. */
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
Line 1,639 ⟶ 1,640:
font-size: var(--ed-small);
text-decoration: none;
}
.vector-toc .vector-toc-listlevel-item2 > .vector-toc-list { margin-top: 0.1rem; }link,▼
.vector-toc .vector-toc-level-3 > .vector-toc-link,
.vector-toc .vector-toc-level-4 > .vector-toc-link {
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(--ed-ink) !important; }
color: var(--ed-ink) !important;
font-weight: 500 !important; /* "current" without shouting; tames Vector's bold */
}
 
/* lists flush on the component edge; rhythmhanging +indent number guttercarried on theevery li */
.vector-toc .vector-toc-contents,
.vector-toc .vector-toc-list {
Line 1,651 ⟶ 1,660:
}
.vector-toc .vector-toc-list-item {
padding: 0.22rem 0 0.22rem var(--toc-numb-gutterhang) !important;▼
position: relative; /* the number's anchor */▼
text-indent: calc(-1 * var(--toc-hang)); /* first line out to the axis;
▲ padding: 0.22rem 0 0.22rem var(--toc-numb-gutter) !important;
number ~1px above the 13px text */ wrapped lines hang at the title.▼
font-size: var(--ed-small); /* li, link text and the abspos number must
share ONE font size: the number's static Each li re-declares it, so the
position is computed from the LI's line value never compounds through
metrics — a larger li strut seats the inheritance into nested lists */
font-size: var(--ed-small);▼
▲ number ~1px above the 13px text */
}
/* pull each NESTED list back by one hang so level-2+ numbers land on the
SAME left axis as level-1 — this is what makes the layout flat (the li's
own padding offsets its content box; this cancels it for the children) */
▲.vector-toc .vector-toc-list-item > .vector-toc-level-2list { --toc-numb-gutter: 2.8rem; }
margin-top: 0.1rem;
margin-left: calc(-1 * var(--toc-hang));
}
▲.vector-toc .vector-toc-list-item > .vector-toc-list { margin-top: 0.1rem; }
 
/* the numbers: inline, flowing straight into the title as one run */
.vector-toc .vector-toc-numb {
display: blockinline; /* defeat Vector's display:none */
margin-right: 0.4em; /* the only gap to the title (DOM has none) */
position: absolute;
▲ positionwhite-space: relativenowrap; /* the number's anchor+ dot never break apart */
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 — styledgenerated likeINLINE aat numberthe INSIDEhead of the linkline, (thein lithe issame
body-sizenumber andvoice; boldsgoes whenink active;+ pinmedium when size/weight,Beginning re-boldis onthe active) */section
(mirrors the active-link rule above) */
.vector-toc #toc-mw-content-text::before {
content: "0.";
margin-right: 0.4em;
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: 700500;
}
 
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Common.css"