Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
38 lines
1.2 KiB
CSS
38 lines
1.2 KiB
CSS
/*
|
|
The row of a selectable side list: the zones and lists tree, and the Logs files.
|
|
It is clickable, it highlights on hover, and one of them is the one being viewed.
|
|
|
|
It was written twice. The STATES matched byte for byte (the same `--hover-strong`
|
|
on hover, the same `--pan2` and `--acc` on the current one), so they were just two
|
|
places to touch the same thing. The density did NOT match, and that one is a real
|
|
decision: the tree is a hierarchy of many nodes and reads better tight; the file
|
|
list is four entries. It splits into `.row` and `.compact`, which is naming the
|
|
difference instead of leaving it hidden in two paddings.
|
|
*/
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-5);
|
|
width: 100%;
|
|
padding: var(--s-5) var(--s-7);
|
|
border: 0;
|
|
border-radius: var(--r-2);
|
|
background: transparent;
|
|
color: var(--mute);
|
|
line-height: 1.3;
|
|
font-size: var(--t-4);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
/* The tree: same row, less air, because there are many and they nest. */
|
|
.compact {
|
|
composes: row;
|
|
gap: var(--s-4);
|
|
padding: var(--s-3) var(--s-4);
|
|
}
|
|
|
|
.row:hover { background: var(--hover-strong); color: var(--ink); }
|
|
.row[aria-current='true'] { background: var(--pan2); color: var(--acc-ink); font-weight: 550; }
|