digital-garbageandClaude Sonnet 5.5
7ffc06c424
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
429 lines
22 KiB
CSS
429 lines
22 KiB
CSS
.cx-field { display: flex; flex-direction: column; gap: var(--sp-2); }
|
||
.cx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
|
||
.cx-field-error { font-size: var(--fs-6); color: var(--danger); }
|
||
|
||
.cx-settings-row {
|
||
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7);
|
||
padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--line-2);
|
||
}
|
||
.cx-settings-row:last-child { border-bottom: 0; }
|
||
.cx-settings-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||
.cx-settings-label { font-size: var(--fs-4); line-height: var(--lh-4); color: var(--text); }
|
||
.cx-settings-control {
|
||
flex: 0 0 var(--control-col); min-inline-size: 0;
|
||
display: flex; align-items: center; justify-content: flex-end;
|
||
}
|
||
/* A control fills its column, or is at most as wide as it. Left to itself a
|
||
<select> takes the width of its widest option, which is how one row in a
|
||
list of five ended up 124px wider than the rest. */
|
||
.cx-settings-control > * { max-inline-size: 100%; }
|
||
.cx-settings-control > .cx-select,
|
||
.cx-settings-control > .cx-input,
|
||
.cx-settings-control > .cx-textarea,
|
||
.cx-settings-control > .cx-slider { inline-size: 100%; }
|
||
.cx-settings-row.cx-danger .cx-settings-label { color: var(--danger); }
|
||
/* Below the width where a label and a control fit side by side, they stop
|
||
sitting side by side. The control column will not give up its width, so in a
|
||
docked panel the label was squeezed to one word per line and its hint to a
|
||
four-character column -- readable as damage, not as a layout. The container
|
||
is the ROWS, not the viewport: the same group is used in a 190px panel and in
|
||
a 600px window, and only its own width decides.
|
||
|
||
AFTER the rules it overrides, and it has to stay there: a container query
|
||
adds no specificity, so written above them it lost -- and `flex: 0 0 180px`
|
||
in a COLUMN is 180px of HEIGHT, which turned four settings into a panel two
|
||
screens long. */
|
||
/* 360, not 300: the control column is 180px and a label needs at least as much
|
||
again beside it. Written as 300 it depended on the padding around the rows --
|
||
trimming 4px off two nested boxes widened this container past the threshold
|
||
and the shredding came straight back, in a commit about something else. */
|
||
@container (max-width: 360px) {
|
||
.cx-settings-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
|
||
.cx-settings-control { flex: 0 0 auto; justify-content: flex-start; }
|
||
}
|
||
|
||
|
||
.cx-group { display: flex; flex-direction: column; gap: var(--sp-3); }
|
||
.cx-group-rows {
|
||
border: var(--bw) solid var(--line); border-radius: var(--r-4);
|
||
background: var(--elev-1);
|
||
/* Weighted to the left. A row's content -- a checkbox, a label, a stepper --
|
||
starts at the same edge every time, and sitting it hard against the border
|
||
made the whole card read as leaning left, because what is beside it on the
|
||
right is usually the shorter half of a wrapped line rather than a control.
|
||
A few pixels of extra lead-in settles it without costing the text a line. */
|
||
padding-inline: var(--sp-6) var(--sp-4);
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.cx-panel {
|
||
border: var(--bw) solid var(--line); border-radius: var(--r-4);
|
||
background: var(--elev-1); overflow: hidden;
|
||
box-shadow: var(--shadow-1);
|
||
/* A zone is as wide as it is given, never as wide as its head wants to be. */
|
||
min-inline-size: 0;
|
||
/* A column, so a panel given a height passes it to its body. Without this a
|
||
viewer asking for 100% of its parent got 100% of `auto` and collapsed to
|
||
one line, inside a panel that was the right size around it. */
|
||
display: flex; flex-direction: column; min-block-size: 0;
|
||
}
|
||
/* Every panel head is the SAME height, whatever is in it. Padding-block plus a
|
||
min-height meant a head holding a control was 41px and a head holding only a
|
||
title was 34, so two panels side by side had their titles on different lines
|
||
-- the whole row read as if it had been assembled by hand. The height is the
|
||
band's; a control inside is centred in it. */
|
||
/* A zone is the app's own surface, not a card on it: no corners to round, no
|
||
shadow to cast, and no border of its own -- the hairline between it and the
|
||
next region belongs to the region, so two neighbours never draw two lines. */
|
||
.cx-zone { border: 0; border-radius: 0; box-shadow: none; }
|
||
|
||
.cx-panel-head {
|
||
display: flex; align-items: center; gap: var(--sp-2) var(--sp-5);
|
||
padding: var(--sp-2) var(--sp-6); border-bottom: var(--bw) solid var(--line);
|
||
background: var(--grad-band);
|
||
/* A MINIMUM height, and it wraps. Fixed, it could not shrink below the width
|
||
of everything in it -- and a head now holds a title, two or three controls
|
||
and a status. That min-content width became the whole centre column's, so a
|
||
768px window laid out 878px wide and scrolled sideways. v4 hit this and
|
||
landed in the same place: the right-hand block wraps, the head grows a
|
||
line, and nothing is ever clipped. */
|
||
min-block-size: var(--menubar-h); flex: none; flex-wrap: wrap;
|
||
min-inline-size: 0;
|
||
}
|
||
.cx-panel-title {
|
||
font-size: var(--fs-5); font-weight: var(--fw-semibold);
|
||
display: flex; align-items: center; gap: var(--sp-3);
|
||
min-inline-size: 0; white-space: nowrap;
|
||
}
|
||
/* One accent mark per panel. Carried over from v4, where it is what makes a
|
||
head read as the top of something rather than as a strip of grey. */
|
||
.cx-panel-title::before {
|
||
content: ""; flex: none; inline-size: 5px; block-size: 5px;
|
||
border-radius: var(--r-pill); background: var(--accent);
|
||
}
|
||
/* Wraps, like the head around it. The head was made to wrap when a zone got
|
||
narrow, but the group of controls inside it was still one unbreakable row --
|
||
so the head's min-content was the whole row, and a 768px window laid out
|
||
860px wide and scrolled sideways. */
|
||
.cx-panel-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-inline-size: 0; }
|
||
/* Whatever the zone has to say, at the far end of its own head: a count, a
|
||
duration, where a run has got to. Quiet by default -- it is read at a glance
|
||
and never pressed. */
|
||
.cx-panel-status {
|
||
margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4);
|
||
min-inline-size: 0; font-size: var(--fs-6); color: var(--faint);
|
||
}
|
||
/* A column with a gap, not a block: two things put in a body by two different
|
||
parts of the app had whatever space their own line boxes happened to leave,
|
||
which is how a prompt box ended up 8px under one label and 3px under the
|
||
next. The body decides the rhythm; what goes in it brings nothing. */
|
||
.cx-panel-body {
|
||
padding: var(--sp-6); flex: 1 1 auto; min-block-size: 0; overflow: auto;
|
||
/* Both axes. A body is a scroller, and a scroller that cannot shrink below
|
||
its content is not one -- it hands the width up to the zone, the column and
|
||
the window, which then scrolls sideways as a page. */
|
||
min-inline-size: 0;
|
||
display: flex; flex-direction: column; gap: var(--sp-5);
|
||
}
|
||
/* One child fills the body -- a viewer, a bin. Several are each their own
|
||
height and the body scrolls, which is what a panel of controls does. */
|
||
.cx-panel-body > .cx-viewer, .cx-panel-body > .cx-stack-fill { flex: 1 1 auto; }
|
||
.cx-panel-flush > .cx-panel-body { padding: 0; }
|
||
|
||
.cx-toolbar { display: flex; align-items: center; gap: var(--sp-2); min-inline-size: 0; }
|
||
.cx-toolbar-trailing {
|
||
margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-3);
|
||
font-size: var(--fs-6); color: var(--muted);
|
||
}
|
||
|
||
.cx-action-bar {
|
||
display: flex; align-items: center; gap: var(--sp-6);
|
||
padding: var(--sp-5) var(--gutter);
|
||
border-top: var(--bw) solid var(--line); background: var(--grad-band);
|
||
position: sticky; bottom: 0;
|
||
}
|
||
/* What the app is SAYING sits at the start of the row and what is PRESSED at
|
||
the end. Everything shared one right-aligned group before, so "Ready" sat
|
||
against the Generate button with 1300px of empty bar to its left. */
|
||
.cx-action-bar-lead { display: flex; align-items: center; gap: var(--sp-5); min-inline-size: 0; }
|
||
.cx-action-bar-buttons { display: flex; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }
|
||
|
||
.cx-list-wrap { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
|
||
.cx-list {
|
||
width: 100%; border: var(--bw) solid var(--line); border-radius: var(--r-3);
|
||
background: var(--elev-1); overflow: hidden;
|
||
}
|
||
.cx-list-row {
|
||
display: flex; align-items: center; gap: var(--sp-4);
|
||
padding: var(--sp-3) var(--sp-5); border-bottom: var(--bw) solid var(--line-2);
|
||
}
|
||
.cx-list-row:last-child { border-bottom: 0; }
|
||
.cx-list-label { font-size: var(--fs-4); flex: 1; min-width: 0; }
|
||
.cx-list-hint { font-size: var(--fs-7); color: var(--muted); }
|
||
.cx-list-control { flex: none; width: 92px; }
|
||
/* Separated from the row's own control by a rule, so the arrows read as
|
||
* "reorder this row" rather than "adjust that number". */
|
||
.cx-list-actions {
|
||
display: flex; gap: var(--sp-1); flex: none;
|
||
padding-left: var(--sp-4); margin-left: var(--sp-2);
|
||
border-left: var(--bw) solid var(--line-2);
|
||
}
|
||
.cx-list-move { color: var(--faint); }
|
||
.cx-list-move:hover:not(:disabled) { color: var(--accent); }
|
||
.cx-list-empty { padding: var(--sp-6); font-size: var(--fs-6); color: var(--faint); text-align: center; }
|
||
|
||
.cx-tabs { display: flex; gap: var(--sp-1); }
|
||
.cx-tab {
|
||
border: 0; background: transparent; color: var(--muted);
|
||
cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-5);
|
||
transition: color var(--dur-1) var(--ease-standard);
|
||
}
|
||
.cx-tabs-underline { border-bottom: var(--bw) solid var(--line); gap: var(--sp-5); }
|
||
.cx-tabs-underline .cx-tab {
|
||
padding: var(--sp-3) 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
|
||
}
|
||
.cx-tabs-underline .cx-tab.cx-on { color: var(--text); border-bottom-color: var(--accent); }
|
||
.cx-tabs-dock .cx-tab {
|
||
height: var(--ctl-h-md); padding: 0 var(--ctl-pad-x-md);
|
||
border: var(--bw) solid var(--line); border-radius: var(--r-3);
|
||
font-size: var(--fs-6);
|
||
}
|
||
.cx-tabs-dock .cx-tab.cx-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
|
||
.cx-tab:hover { color: var(--text); }
|
||
|
||
.cx-split { display: flex; width: 100%; min-height: 120px; min-inline-size: 0; }
|
||
.cx-split-v { flex-direction: column; }
|
||
/* A column, so what is inside a pane inherits the pane's height instead of
|
||
sizing to its own content. A panel in a pane was the right size with a body
|
||
one line tall inside it, which looks like the panel is fine and the content
|
||
is empty. */
|
||
.cx-split-pane {
|
||
flex: 1 1 0; min-inline-size: 0; min-block-size: 0; overflow: auto;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.cx-split-pane > * { flex: 1 1 auto; min-block-size: 0; }
|
||
.cx-split > .cx-split-pane:first-child { flex: 0 0 auto; }
|
||
|
||
/* A horizontal split stacks rather than overflowing when there is not room for
|
||
two columns. The first pane carries an inline size, so on a narrow screen it
|
||
could not shrink and the whole page scrolled sideways -- 407px of content in
|
||
a 360px viewport. Wrapping rather than a media query because the kit sizes
|
||
itself from its container, not from the window. */
|
||
.cx-split-h { flex-wrap: wrap; }
|
||
.cx-split-h > .cx-split-pane { min-inline-size: min(100%, 260px); }
|
||
.cx-split-h > .cx-split-pane:first-child { max-inline-size: 100%; }
|
||
.cx-split-bar { flex: none; background: transparent; position: relative; }
|
||
.cx-split-h > .cx-split-bar { width: var(--gutter); cursor: col-resize; }
|
||
.cx-split-v > .cx-split-bar { height: var(--gutter); cursor: row-resize; }
|
||
.cx-split-bar::after {
|
||
content: ""; position: absolute; inset: 0; margin: auto;
|
||
background: var(--line); transition: background var(--dur-1) var(--ease-standard);
|
||
}
|
||
.cx-split-h > .cx-split-bar::after { width: 1px; }
|
||
.cx-split-v > .cx-split-bar::after { height: 1px; }
|
||
.cx-split-bar:hover::after, .cx-split-bar:focus-visible::after { background: var(--accent); }
|
||
.cx-split-bar:focus-visible { outline: none; }
|
||
|
||
/* The same radius as a panel: these stand side by side in the properties
|
||
column, and two different corner radii on two boxes in one column reads as
|
||
two different kinds of thing. */
|
||
.cx-collapsible { border: var(--bw) solid var(--line); border-radius: var(--r-4); background: var(--elev-1); }
|
||
.cx-collapsible-head {
|
||
display: flex; align-items: center; gap: var(--sp-3);
|
||
padding: 0 var(--sp-6); block-size: var(--menubar-h); cursor: pointer; list-style: none;
|
||
font-size: var(--fs-5); background: var(--grad-band);
|
||
border-radius: calc(var(--r-4) - var(--bw));
|
||
}
|
||
.cx-collapsible[open] > .cx-collapsible-head {
|
||
border-end-start-radius: 0; border-end-end-radius: 0;
|
||
border-block-end: var(--bw) solid var(--line);
|
||
}
|
||
.cx-collapsible-head::-webkit-details-marker { display: none; }
|
||
.cx-collapsible-head::before {
|
||
content: "›"; color: var(--faint); display: inline-block;
|
||
transition: transform var(--dur-1) var(--ease-standard);
|
||
}
|
||
.cx-collapsible[open] > .cx-collapsible-head::before { transform: rotate(90deg); }
|
||
/* Its own top padding, not the head's. With none, the first thing in the body
|
||
-- usually a section label -- sat directly on the head's dividing line, which
|
||
read as the label belonging to the divider rather than to what is under it.
|
||
Narrower at the sides than at the top: this is the third box a setting's text
|
||
is nested inside, and each level of padding comes out of the words. */
|
||
.cx-collapsible-body { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
|
||
|
||
.cx-rail { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); }
|
||
.cx-rail-item {
|
||
display: flex; align-items: center; gap: var(--sp-4);
|
||
height: var(--ctl-h-xl); padding: 0 var(--sp-4);
|
||
border: 0; border-radius: var(--r-3); background: transparent;
|
||
color: var(--muted); font-size: var(--fs-5); cursor: pointer; text-align: left;
|
||
}
|
||
.cx-rail-item:hover { background: var(--hover); color: var(--text); }
|
||
.cx-rail-item.cx-on { background: var(--accent-soft); color: var(--accent-hi); }
|
||
.cx-rail-icon { width: 18px; text-align: center; }
|
||
|
||
/* Workspace: a centre that shrinks, panels docked either side.
|
||
The rails hold the toggles and never collapse, so the control for a panel is
|
||
never inside the panel it controls. */
|
||
.cx-workspace {
|
||
display: flex; align-items: stretch; min-block-size: 0; block-size: 100%; inline-size: 100%;
|
||
}
|
||
/* Flex containers, not blocks with overflow. A region whose height comes from
|
||
its content gives a vertical split inside it a basis of `auto`, so the split's
|
||
second pane resolves to zero and simply is not there -- the prompt under the
|
||
preview vanished exactly that way, with no error and nothing to see. */
|
||
.cx-workspace-main {
|
||
flex: 1 1 auto; min-inline-size: 0; min-block-size: 0;
|
||
display: flex; flex-direction: column;
|
||
background: var(--elev-1);
|
||
}
|
||
.cx-workspace-main > *, .cx-workspace-side > * { flex: 1 1 auto; min-block-size: 0; }
|
||
.cx-workspace-side {
|
||
/* A width the CONTENT can live in, not a share of the window. Sizing these
|
||
as a fraction of the viewport gave a 900px-wide window a 198px column, in
|
||
which "Loosen the starting image" wrapped over three lines and a section
|
||
heading broke mid-word. A panel is as wide as a settings row needs; when
|
||
the window cannot afford two of them it stops docking them (below). */
|
||
flex: 0 0 auto;
|
||
inline-size: clamp(268px, 24vw, 360px);
|
||
min-block-size: 0;
|
||
overflow: auto;
|
||
display: flex; flex-direction: column;
|
||
background: var(--elev-1);
|
||
/* The divider between one region and the next. One hairline, the same one a
|
||
splitter draws, so the app reads as a single surface that has been cut up
|
||
rather than as three things put next to each other. */
|
||
border-inline: var(--bw) solid var(--line);
|
||
}
|
||
/* Width nil rather than display:none -- the panel stays in the flow, stays
|
||
measurable, and can come back without being rebuilt.
|
||
|
||
Deliberately not animated. A remembered-closed panel would animate shut on
|
||
every page load, which reads as the app doing something rather than as a
|
||
remembered preference, and an in-flight width is a state anything measuring
|
||
the layout has to wait out. */
|
||
.cx-workspace-side.cx-collapsed {
|
||
inline-size: 0;
|
||
overflow: hidden;
|
||
border-inline-width: 0;
|
||
}
|
||
/* The toggle sits in the head band's height, so it lines up with the panel
|
||
titles either side of it instead of floating a few pixels above them like a
|
||
mark left on the glass. */
|
||
/* The rails are the frame's own edge, so they carry the page colour rather than
|
||
a zone's -- the one strip of background the app shows. */
|
||
.cx-workspace-rail {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
background: var(--elev-0);
|
||
padding-inline: var(--sp-1);
|
||
}
|
||
.cx-workspace-rail > * { block-size: var(--menubar-h); }
|
||
|
||
/* The page frame. The one place a definite height is established, so everything
|
||
below can fill instead of each pane guessing at a percentage of nothing. */
|
||
.cx-frame { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
|
||
/* Film grain over the app, and only over the app: no z-index, so anything that
|
||
opens above the frame -- a modal, a popover -- paints over it and stays
|
||
crisp. Fixed, so it does not scroll and cannot be captured by a scroller's
|
||
own stacking context. */
|
||
.cx-frame::after {
|
||
content: ""; position: fixed; inset: 0; pointer-events: none;
|
||
opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
}
|
||
.cx-frame-main { flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; display: flex; }
|
||
.cx-frame-main > * { flex: 1 1 auto; min-inline-size: 0; }
|
||
.cx-frame-head, .cx-frame-foot { flex: 0 0 auto; }
|
||
/* Bands: edge to edge, the same height as a panel head, with the gutter inside
|
||
them. So the top bar reads as part of the frame rather than as a stray
|
||
button floating above the first panel. */
|
||
.cx-frame-head {
|
||
display: flex; align-items: center;
|
||
block-size: var(--menubar-h); padding-inline: var(--gutter);
|
||
border-block-end: var(--bw) solid var(--line); background: var(--grad-band);
|
||
}
|
||
.cx-frame-head > * { flex: 1 1 auto; min-inline-size: 0; }
|
||
|
||
/* Not enough room to dock. Below this the two panels plus a usable centre do
|
||
not fit -- three columns in 375px gave clipped headings and a preview no
|
||
wider than a thumbnail -- so a panel stops taking space from the centre and
|
||
sits over it instead. The rails do not move, so the way in and out is the
|
||
same control in the same place at every size.
|
||
|
||
The element closes both panels when it enters this mode and opens only one
|
||
at a time within it, because two overlays over a narrow centre is the same
|
||
problem with extra steps. What was open before is restored on the way out,
|
||
and none of that touches the remembered preference -- a window being small
|
||
is not the user changing their mind.
|
||
|
||
This is also what makes a phone possible later rather than a rewrite: the
|
||
difference between docked and overlaid is where the panel is drawn, not what
|
||
it is or how it is opened. */
|
||
@media (max-width: 760px) {
|
||
.cx-workspace { position: relative; }
|
||
.cx-workspace-side {
|
||
position: absolute;
|
||
inset-block: 0;
|
||
z-index: 1;
|
||
inline-size: min(86vw, 360px);
|
||
background: var(--elev-1);
|
||
box-shadow: var(--shadow-3);
|
||
}
|
||
.cx-workspace-left { inset-inline-start: 0; }
|
||
.cx-workspace-right { inset-inline-end: 0; }
|
||
/* Above the overlay, or the panel covers the only control that closes it --
|
||
which is the whole fault this arrangement was built to avoid, arriving by a
|
||
different route the moment the panel stopped taking its own space. */
|
||
.cx-workspace-rail { position: relative; z-index: 2; }
|
||
/* A collapsed overlay must not keep catching pointers over the centre. */
|
||
.cx-workspace-side.cx-collapsed { inline-size: 0; box-shadow: none; }
|
||
}
|
||
|
||
/* region.stack -- the app's redrawable host. Spacing only: what goes in it
|
||
brings its own everything else. */
|
||
/* min-inline-size on the stack ITSELF, not only on what is in it. A flex item's
|
||
automatic minimum is its content, so a stack holding anything that scrolls --
|
||
a strip of scenes, a wide table -- handed its content's full width up to
|
||
whatever contains it, and the page scrolled sideways instead of the scroller
|
||
scrolling. The rule below covers a stack's children; this covers the stack.
|
||
No min-block-size:0 here, on purpose: that would let a plain grouping stack
|
||
-- rows of fields nested inside a scrollable panel -- get flex-shrunk below
|
||
its own content height the moment its container runs short on room, and
|
||
since nothing here clips it, the excess paints over the next row instead of
|
||
the panel scrolling. .cx-stack-fill below is the one stack meant to give up
|
||
height for that; a stack that hasn't opted into that must keep its natural
|
||
size so a tight column scrolls at the real scroll boundary instead of
|
||
silently overlapping. */
|
||
.cx-stack { display: flex; flex-direction: column; min-inline-size: 0; }
|
||
.cx-stack > * { min-inline-size: 0; }
|
||
.cx-stack-none { gap: 0; }
|
||
.cx-stack-sm { gap: var(--sp-4); --cx-gap: var(--sp-4); }
|
||
.cx-stack-md { gap: var(--sp-6); --cx-gap: var(--sp-6); }
|
||
.cx-stack-lg { gap: var(--sp-9); }
|
||
|
||
/* Filling the room it was given, rather than sizing to its content. Without a
|
||
definite height nothing inside can scroll: the whole page scrolls instead,
|
||
and a bar meant to hold the bottom scrolls away with it. */
|
||
.cx-stack-fill { flex: 1 1 auto; min-block-size: 0; }
|
||
/* A split inside a stack is what stretches. The rows around it -- a toolbar, a
|
||
banner, an action bar -- are each their own height. */
|
||
.cx-stack > .cx-split { flex: 1 1 auto; min-block-size: 0; }
|
||
|
||
/* A stack that is a small poster rather than a form -- an "About" pane's
|
||
mark, name and facts, centred instead of ranged left like every settings
|
||
list around it. */
|
||
.cx-about { align-items: center; text-align: center; padding-block: var(--sp-7) 0; }
|
||
/* v4's own mark size, from the scale (--fs-d1) rather than a literal --
|
||
the whole point of naming display steps at all. */
|
||
.cx-about > .cx-t-lg { font-size: var(--fs-d1); line-height: var(--lh-tight); color: var(--accent); }
|
||
.cx-about .cx-settings-row {
|
||
justify-content: center; gap: var(--sp-4); border-bottom: 0; padding-block: var(--sp-2);
|
||
inline-size: auto; align-self: center;
|
||
}
|
||
.cx-about .cx-settings-control { flex: 0 0 auto; justify-content: flex-start; }
|
||
/* The fact key ("Chip", "Memory", ...) reads as a label, not a value. */
|
||
.cx-about .cx-settings-label { font-weight: var(--fw-semibold); }
|