142 lines
5.0 KiB
CSS
142 lines
5.0 KiB
CSS
/* ══ The panel — the console's one card ════════════════════════════════════
|
|
Three zones: a header band that says what this is and how much of it there
|
|
is, a body, and a footer band that says where you are in it. See the note at
|
|
the top of `Panel.tsx` for why the card grew an anatomy rather than a nicer
|
|
outline.
|
|
|
|
Every size here comes from the card tokens in `index.css`. */
|
|
|
|
.panel-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: var(--card-border);
|
|
border-radius: var(--card-radius);
|
|
background: var(--card-bg);
|
|
box-shadow: var(--card-shadow);
|
|
/* The clip belongs on the element that owns the radius, or the header band's
|
|
tint squares off the top two corners. */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* For a grid row of panels that should finish level with each other. */
|
|
.panel-card[data-filled='true'] { height: 100%; }
|
|
|
|
/* ── Header band ────────────────────────────────────────────────────────── */
|
|
/* Tinted rather than white, so the band reads as chrome and the rows below it
|
|
read as data. A white header separated only by a rule is the same surface
|
|
twice, which is how a heading ends up looking like a first table row. */
|
|
.panel-card-head {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
min-height: 48px;
|
|
padding: 8px 16px;
|
|
background: var(--color-surface-subtle);
|
|
border-bottom: var(--card-border);
|
|
}
|
|
|
|
.panel-card-title-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* An EYEBROW, not a heading. 11px caps: this labels the panel, and a 20px
|
|
title inside a card competes with the page's own title above it — the two
|
|
stacked is what made every screen say its subject twice. */
|
|
.panel-card-title {
|
|
margin: 0;
|
|
font: 600 11px/1.2 var(--font-sans);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* The count, in its own chip. Tabular, because it changes as a filter narrows
|
|
and a figure that shifts sideways while you read it is hard to trust. */
|
|
.panel-card-count {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
flex: none;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: var(--color-surface-sunken);
|
|
font: 600 11.5px/1.45 var(--font-sans);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-ink-2);
|
|
}
|
|
.panel-card-count-label {
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.panel-card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ── Body ───────────────────────────────────────────────────────────────── */
|
|
|
|
.panel-card-body {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.panel-card-body[data-pad='md'] { padding: 16px; }
|
|
|
|
/* ── Footer band ────────────────────────────────────────────────────────── */
|
|
|
|
.panel-card-foot {
|
|
flex: none;
|
|
padding: 8px 16px;
|
|
background: var(--color-surface-subtle);
|
|
border-top: var(--card-border);
|
|
}
|
|
|
|
/* The pager hides itself on a single page — it returns null — but the band
|
|
around it is rendered by the parent, which cannot see that. Without this a
|
|
short table carried a 44px strip of tinted chrome saying nothing.
|
|
`:has` collapses the band when its child rendered no DOM at all. */
|
|
.panel-card-foot:not(:has(*)) {
|
|
display: none;
|
|
}
|
|
|
|
/* The pager's own wrapper adds padding meant for sitting loose under a table.
|
|
Inside the band the band supplies it. */
|
|
.panel-card-foot .table-pager {
|
|
padding: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
/* ── A table sitting flush in the body ──────────────────────────────────────
|
|
The table brings its own horizontal scroll and its own header row. What it
|
|
must not bring is a rounded corner or an outer border — the panel owns both,
|
|
and a table with its own edge inside a panel is the double line this design
|
|
is meant to remove. */
|
|
.panel-card-body > .table-scroll {
|
|
border-radius: 0;
|
|
border: 0;
|
|
}
|
|
|
|
/* ── Narrow ─────────────────────────────────────────────────────────────── */
|
|
@media (max-width: 600px) {
|
|
.panel-card-head { padding: 8px 12px; }
|
|
.panel-card-foot { padding: 8px 12px; }
|
|
.panel-card-body[data-pad='md'] { padding: 12px; }
|
|
/* Actions drop to their own line rather than squeezing the title out. */
|
|
.panel-card-actions { margin-left: 0; width: 100%; }
|
|
}
|