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 <noreply@anthropic.com>
26 lines
1.2 KiB
CSS
26 lines
1.2 KiB
CSS
/* The bar over the table: the filter, the search, and List / Tree. */
|
|
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-7) var(--s-9); border-bottom: 1px solid var(--line2); }
|
|
.spacer { flex: 1; }
|
|
.filter { display: inline-flex; gap: var(--s-2); }
|
|
.search { width: 220px; }
|
|
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-7) var(--s-9); color: var(--mute); }
|
|
/* The name wraps at its dots only (`ui/DomainName`), never inside a label. */
|
|
.domain { font-family: var(--font-mono); }
|
|
.actions { text-align: right; white-space: nowrap; }
|
|
/* The embedded tree, inset from the panel's edges as the bar above it is. */
|
|
.tree { padding: var(--s-9) var(--s-9) 0; }
|
|
|
|
/* The rule kind: an icon and a word, not only a colour. */
|
|
.kind { display: inline-flex; align-items: center; gap: var(--s-2); }
|
|
.blocked { color: var(--ch-block); }
|
|
/*
|
|
`--ok`, the text green, and not `--ch-ok`, the line green: the same value in dark;
|
|
in light the series is tuned against the other ten lines and gives 4.45:1 under
|
|
the row hover, the text tone 5.0:1.
|
|
*/
|
|
.allowed { color: var(--ok); }
|
|
|
|
@media (max-width: 560px) {
|
|
.search { width: 100%; }
|
|
}
|