DenozordecandClaude Sonnet 5.5
f3531c64f9
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]>
128 lines
3.9 KiB
CSS
128 lines
3.9 KiB
CSS
/*
|
|
The versions block, at the foot of the side panel.
|
|
|
|
It is the same idea NetBird uses at the bottom-left of its dashboard: the
|
|
components that make up what you are looking at, each with the version it is
|
|
running, in a quiet framed block that is out of the way but never off screen.
|
|
Here there are two, and they are genuinely two different things that update
|
|
separately: the DNS server, which Technitium ships, and this console, which does
|
|
not come with it.
|
|
|
|
Upstream keeps the server's domain in the panel title next to "DNS Server". Same
|
|
pairing here: the domain heads the block that talks about that server.
|
|
*/
|
|
.block {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-3);
|
|
background: var(--pan2);
|
|
padding: var(--s-5) var(--s-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-3);
|
|
}
|
|
|
|
/* The server's domain wraps at its dots only (`ui/DomainName`): `break-all` cut it
|
|
wherever the card's edge fell, mid-label. A name with no dot, which DomainName
|
|
leaves as plain text, still breaks rather than leave the card. */
|
|
.host {
|
|
font-family: var(--font-mono);
|
|
overflow-wrap: break-word;
|
|
font-size: var(--t-1);
|
|
color: var(--faint);
|
|
padding-bottom: var(--s-3);
|
|
border-bottom: 1px solid var(--line2);
|
|
margin-bottom: var(--s-2);
|
|
}
|
|
|
|
/* Label left, version right: the eye reads down the versions in one column.
|
|
When a mark leaves no room beside the label, the version and its mark move to
|
|
the next line, still on the right, rather than cut "Web Console" in two. */
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--s-2) var(--s-5);
|
|
font-size: var(--t-2);
|
|
}
|
|
|
|
.name { color: var(--mute); white-space: nowrap; }
|
|
|
|
.ver {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--s-4);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.num { font-family: var(--font-mono); color: var(--ink); }
|
|
|
|
/*
|
|
The mark rides on the version it is about, which is the whole point of putting
|
|
it here: an update to the DNS server and an update to this console are not the
|
|
same news, and a notice floating on its own could not say which one it meant.
|
|
|
|
Amber and not the red upstream uses: in this console red is what destroys
|
|
(Delete Zones, Flush Cache) and an available update destroys nothing.
|
|
*/
|
|
.mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 1px var(--s-4) 1px var(--s-3);
|
|
border: 1px solid var(--acc-ink);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--acc-ink);
|
|
font: inherit;
|
|
font-size: var(--t-1);
|
|
|
|
line-height: 1.6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mark:hover,
|
|
.mark:focus-visible { background: color-mix(in srgb, var(--acc) 14%, transparent); }
|
|
|
|
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc-ink); }
|
|
|
|
/* Inside the dialog. */
|
|
.jump {
|
|
display: flex; align-items: baseline; gap: var(--s-5);
|
|
margin-bottom: var(--s-7); font-family: var(--font-mono);
|
|
}
|
|
.from { color: var(--mute); }
|
|
.arrow { color: var(--faint); }
|
|
.to { color: var(--acc-ink); font-weight: 600; }
|
|
.message { margin-bottom: var(--s-7); }
|
|
.links { display: flex; flex-wrap: wrap; gap: var(--s-7); }
|
|
|
|
/* The console's update commands: one line each, read and copied whole. They
|
|
are long, so they wrap between words rather than push the dialog wider. */
|
|
/* The command and its Copy button on one line; the command takes the width. */
|
|
.commandRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-4);
|
|
margin: calc(-1 * var(--s-5)) 0 var(--s-7);
|
|
}
|
|
.commandRow > button { flex: none; }
|
|
|
|
.command {
|
|
display: block;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: var(--s-4) var(--s-5);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-2);
|
|
background: var(--pan2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--t-1);
|
|
overflow-wrap: break-word;
|
|
user-select: all;
|
|
}
|
|
|
|
/* Upstream's two `Note!`, after the links: they explain, they do not change the
|
|
decision. Same rule as every other `Note!` in the console. */
|
|
.notes { display: grid; gap: var(--s-5); margin-top: var(--s-9); }
|