ui improvement
This commit is contained in:
141
src/components/panel.css
Normal file
141
src/components/panel.css
Normal file
@@ -0,0 +1,141 @@
|
||||
/* ══ 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%; }
|
||||
}
|
||||
Reference in New Issue
Block a user