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]>
37 lines
1.1 KiB
CSS
37 lines
1.1 KiB
CSS
/*
|
|
The "More Details" and "Raw Responses" disclosure.
|
|
|
|
A `<details>` triangle is painted by the browser (and each one paints its own), so
|
|
it is another surface we had not drawn. It was solved twice, in Apps and in DNS
|
|
Client, and both times with the chevron hand-encoded as an SVG in a `data:` URI:
|
|
the same path as `chevronRight` from `ui/Icon`, but with `stroke-width: 2.5`
|
|
against the 1.75 of the whole set. In other words, the only icon in the console
|
|
with a different stroke weight, and in duplicate. Now it is the real icon.
|
|
*/
|
|
|
|
.details > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-4);
|
|
/* The target gets clicked: with no padding it measured 17 px tall in Apps, and
|
|
in DNS Client it did carry it. The same old difference. */
|
|
padding: var(--s-3) 0;
|
|
font-size: var(--t-3);
|
|
color: var(--acc-ink);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.details > summary::-webkit-details-marker { display: none; }
|
|
|
|
.chevron {
|
|
flex: none;
|
|
transition: transform var(--t-fast);
|
|
}
|
|
|
|
.details[open] > summary .chevron { transform: rotate(90deg); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chevron { transition: none; }
|
|
}
|