122 lines
3.3 KiB
CSS
122 lines
3.3 KiB
CSS
@layer components.blocks {
|
|
.table-wrapper {
|
|
/* The header treatment. Ink by default: a standalone wrapper is a
|
|
citable object. Position overrides these — nothing is authored. */
|
|
--table-header-fg: var(--color-text-inverse);
|
|
--table-header-bg: var(--color-surface-inverse);
|
|
--table-header-rule: 0;
|
|
--table-header-edge: var(--color-border-normal);
|
|
|
|
@mixin my var(--space-10);
|
|
|
|
counter-increment: tbl;
|
|
|
|
& figcaption {
|
|
@mixin typo_label;
|
|
@mixin mb var(--size-3);
|
|
display: flex;
|
|
gap: var(--size-5);
|
|
color: var(--color-text-secondary);
|
|
|
|
&::before {
|
|
content: "Table " counter(tbl, upper-roman) " ⟫";
|
|
font-weight: var(--font-weight-emphasis);
|
|
color: var(--color-text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
& table {
|
|
@mixin my var(--size-0);
|
|
|
|
& thead {
|
|
& th {
|
|
border-block-end: var(--table-header-rule);
|
|
color: var(--table-header-fg);
|
|
background-color: var(--table-header-bg);
|
|
}
|
|
}
|
|
|
|
& td {
|
|
&.text {
|
|
font-family: var(--font-body);
|
|
font-size: 1.077em;
|
|
line-height: 1.55;
|
|
color: var(--color-text-secondary);
|
|
text-wrap: pretty;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .num {
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
& .key {
|
|
font-weight: var(--font-weight-emphasis);
|
|
}
|
|
}
|
|
|
|
/* Underline header: a table introduced by a heading, or one inside a
|
|
block, is part of the argument rather than a reference. A block with
|
|
its own surface redeclares --table-header-bg so the sticky first
|
|
column on mobile paints the right colour. */
|
|
|
|
.prose :is(h2, h3, h4) + .table-wrapper,
|
|
:is(.callout, .reveal) .table-wrapper {
|
|
--table-header-fg: inherit;
|
|
--table-header-bg: var(--color-surface-base);
|
|
--table-header-rule: var(--border-card) solid var(--color-border-strong);
|
|
--table-header-edge: var(--color-border-strong);
|
|
}
|
|
|
|
/* === MATRIX ===
|
|
A correspondence table: the cells carry hits, not values, so it has to
|
|
read as a grid — rules on both axes, everything centred, and a miss
|
|
stated rather than left looking like an oversight. */
|
|
|
|
.table-wrapper--matrix {
|
|
& :is(th, td) {
|
|
@mixin px var(--space-4);
|
|
@mixin border-r var(--border-hairline), solid, var(--color-border-subtle);
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
& :is(th, td):last-child {
|
|
border-inline-end: 0;
|
|
}
|
|
|
|
/* The first column is the subject; it keeps its reading direction. */
|
|
& :is(thead, tbody) :is(th, td):first-child {
|
|
@mixin border-r var(--border-card), solid, var(--color-border-strong);
|
|
text-align: left;
|
|
}
|
|
|
|
/* Axis labels are short. Let them wrap instead of widening a column. */
|
|
& thead th {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* A hit: the cell itself is the mark. */
|
|
& tbody td.is-set {
|
|
background-color: var(--color-text-primary);
|
|
}
|
|
|
|
/* A miss, said out loud. */
|
|
& tbody td:empty::before {
|
|
content: "·";
|
|
color: var(--color-text-quiet);
|
|
}
|
|
}
|
|
|
|
@media (--bp-mobile) {
|
|
.table-wrapper .table-scroll thead th:first-child {
|
|
border-inline-end-color: var(--table-header-edge);
|
|
}
|
|
}
|
|
}
|