MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 1,176:
 
 
/* ============================================================================
SECTION 11. WIKITABLES: table TYPES
- .wikitable = NEUTRAL default: themed (frame, caption, header
All table styling lives here: design knobs (:root), base look,
tint, hairlines, hover) but free-form — columns
structural rules, text hierarchy, column widths, the sticky first
flex, labels wrap, nothing frozen.
column, responsive borders, and print. Horizontal scroll is
- .wikitable.fintable = FINANCIAL bundle: frozen nowrap first column +
handled by the CopyTable gadget wrapper, NOT here (overflow on a
data-column width floors. The bot emits the class
<table> element is ignored).
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.
/* ── Design knobs — tunable here, no re-publishing needed ── */
- .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-col: 6em; /* data columns (class="col") */
--wt-xs: 3em;
--wt-col-wide: 9em; /* wide data columns (class="col-wide") */
--wt-s: 6em;
--wt-border: #eceef1; /* hairline grid — barely visible */
--wt-m: 9em;
--wt-rule: #72777d; /* structural rules: table top, header bottom, table bottom */
--wt-l: 15em;
--wt-edge: #dadde1; /* frozen-column right edge (one notch stronger than grid) */
--wt-xl: 24em;
--wt-th-bg: #f6f7f9; /* header tint (try #fff once the rules carry the structure) */
--wt-xxl: 39em;
--wt-th-text: #54595d; /* header text — muted vs. the near-black data */
/* palette (section 12 re-points these onto the warm ramp) */
--wt-pad-y: 0.5em; /* vertical cell padding = row height knob */
--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 ── */
/* --- Full width (scroll lives on the gadget's .copy-table-scroll wrapper) --- */
.wikitable { width: 100% !important; }
 
/* --- Base look: hairline frame, roomy rows, aligned digits, air between
adjacent tables --- */
table.wikitable {
font-size: 0.85em;
background-color: #fff;
border: 1px solid var(--wt-border);
font-variant-numeric: tabular-nums; /* digits align vertically */
margin-top: 0.3em;
margin-bottom: 2em; /* separation between stacked tables */
}
table.wikitable td { background-color: #fff; }
Line 1,215 ⟶ 1,222:
font-weight: bold;
background-color: #fff;
padding-bottom: 0.45em; /* air between caption and table */
}
table.wikitable > tr > th,
Line 1,226 ⟶ 1,233:
table.wikitable > * > tr > th {
background-color: var(--wt-th-bg);
color: var(--wt-th-text); /* muted headers: caption > data > header */
}
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
text-align: left;
}
 
/* --- Structural rules (booktabs): top, below the header block, bottom.
Painted on cells, not the table — with border-collapse a cell border
beats a table border, and an upper cell's bottom beats the next
cell's top, so these exact selectors are what makes the dark lines
win over the hairlines. --- */
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-topbottom: 1px solid var(--wt-rule); /* top rule, under the caption */}
}
table.wikitable > * > tr:has(> th):has(+ tr > td) > th {
border-bottom: 1px solid var(--wt-rule); /* rule under the LAST header row */
}
table.wikitable > * > tr:last-child > td,
table.wikitable > * > tr:last-child > th { border-bottom: 1px solid var(--wt-rule); }
border-bottom: 1px solid var(--wt-rule); /* bottom rule */
}
 
/* Optional refinements — uncomment to test:
table.wikitable th { font-weight: normal; }
table.wikitable > * > tr:has(> th) > th:first-child { font-weight: normal; }
*/
 
/* Row hover — readability across wide rows without permanent zebra weight */
table.wikitable > tbody > tr:hover > td { background-color: #f8f9fa; }
 
table.wikitable td p { font-size: inherit !important; }
/* ── House column widths: markers from the emitter, values here ── */
/* Floor for legacy pages published with inline widths (safe to keep wiki-wide) */
.wikitable th:not(:first-child),
.wikitable td:not(:first-child) { min-width: var(--wt-col); }
/* Marked data columns: pinned width + floor */
.wikitable th.col,
.wikitable td.col { width: var(--wt-col); min-width: var(--wt-col); }
.wikitable th.col-wide,
.wikitable td.col-wide { width: var(--wt-col-wide); min-width: var(--wt-col-wide); }
 
/* ── Column size scale: usable on ANY table type ── */
/* --- Cell content (Minerva fixes + alignment) --- */
.wikitable th.col-xs, .wikitable td.col-xs { width: var(--wt-xs); min-width: var(--wt-xs); }
table.wikitable td p { font-size: inherit !important; } /* respect table font size */
.wikitable th.col-s, .wikitable td.col-s { width: var(--wt-s); min-width: var(--wt-s); }
.wikitable td ul,
.wikitable th.col-m, .wikitable td.col-m { width: var(--wt-m); min-width: var(--wt-m); }
.wikitable td ol,
.wikitable th.col-l, .wikitable td.col-l dl { textwidth: var(-align-wt-l); min-width: leftvar(--wt-l); }
.wikitable th.col-xl, .wikitable td.col-xl { width: var(--wt-xl); min-width: var(--wt-xl); }
table.wikitable td ul {
.wikitable th.col-xxl, .wikitable td.col-xxl { width: var(--wt-xxl); min-width: var(--wt-xxl); }
list-style-position: outside !important; /* fix Minerva bullet position */
/* legacy marker names on published pages = aliases of s / m */
margin-left: 1.5em !important; /* push bullets off the border */
.wikitable th.col, .wikitable td.col { width: var(--wt-s); min-width: var(--wt-s); }
padding-left: 0 !important;
.wikitable th.col-wide, .wikitable td.col-wide { width: var(--wt-m); min-width: var(--wt-m); }
}
table.wikitable td > p:first-child,
table.wikitable td > ul:first-child,
table.wikitable td > ol:first-child {
margin-top: 0 !important; /* align first block with inline text */
}
 
/* ── FINTABLE bundle — THE definition of "financial table" on this wiki.
/* --- Row-label (first) column: single-line, readable minimum, frozen while
Applies to .fintable (emitter-typed numeric-dense tables) and, via
scrolling, opaque background. border-collapse drops a sticky cell's
:has(), to every already-published bot table — they all carry the
own borders, so the right edge is painted with box-shadow — it stays
legacy putcol/col-wide withmarkers, so the stickyback cell.catalogue ---upgrades */with NO
re-publishing. The bridge is scoped to the LEGACY marker names only:
.wikitable th:first-child,
col-s/col-m on a neutral hand table does NOT trigger financial
.wikitable td:first-child {
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,281:
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--wt-edge); /* right edge only — marks the frozen column */
}
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 tdth:firstnth-child(2) { background-color: #fffvar(--wt-th-bg); } /* body cells */
table.wikitable.wt-freeze-2 thtd:first-child { background-color: var(--wt-th-bg)#fff; } /* header cell */
table.wikitable.wt-freeze-2 th:first-child { background-color: var(--wt-th-bg); }
 
/* --- Mobile borders (<= 719px): table border dropped, redrawn per cell --- */
@media screen and (max-width: 719px) {
table.wikitable { border: none !important; }
Line 1,309 ⟶ 1,318:
table.wikitable > tbody > tr > td {
border: 1px solid var(--wt-border);
}
}
 
/* --- Print --- */
@media print {
table.wikitable p {
font-size: inherit !important;
text-align: inherit !important; /* no justification on print */
margin-top: 0.25em !important;
margin-bottom: 0.25em !important;
}
table.wikitable a.external.text::after {
content: none !important; /* hide expanded URLs */
}
}
Line 1,469 ⟶ 1,465:
/* ── 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
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;. theOn LEFTa railNEUTRAL musttable bethe aLEFT
rail is a plain table border (nothing is sticky); on a
box-shadow on the sticky first-column cells — with
FINTABLE it must be a box-shadow on the sticky first-column
border-collapse, borders on sticky cells do not move when the
cellcells sticks (theywith vanishborder-collapse, borders on horizontalsticky scroll),cells butdo shadowsnot
travelmove withwhen the cell. Thesticks table's(they ownvanish lefton borderhorizontal is disabledscroll),
sobut shadows travel with the railcell — isand the onlytable's lineown there.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 is
thin,itself ingoes thethin header+ tintwarm. ── */
table.wikitable,
table.wikitable td,
table.wikitable caption { background-color: transparent; }
.wikitable td:first-child { background-color: var(--ed-paper); }
table.wikitable > tbody > tr:hover > td { background-color: #f2ede5; }
 
table.wikitable.fintable thtd: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 */
Line 1,496 ⟶ 1,500:
.wikitable td:last-child { border-right: 1px solid var(--wt-rule); }
 
table.wikitable { margin: 0; border-left: none1px solid var(--wt-rule); }
table.wikitable.fintable,
.mw-parser-output div[style*="overflow-x"],
table.wikitable:has(.col, .col-wide) { border-left: none; }
.copy-table-scroll {
margin: 0.3em 0 2em;
scrollbar-width: thin;
scrollbar-color: var(--wt-th-bg) transparent; /* scrollbar = header tint */
}
 
/* caption = the table's TITLE: one size step above the 13px cells, with