DenozordecandClaude Sonnet 5.5
87281a87d3
The live UI did not follow the canvas because its base layer differed: dark palette in hex (now the canvas oklch values), 13 px body text, flat Frame panels. - Tokens: canvas palette, 14 px body, 1.4 line height; Frame without `dense` gets the 3 px ring; Panel takes a description line. - Shell: 56 px brand button with version, 11 px group headings, user card at the foot, versions moved into the header status popover, Home / group / section crumbs, amber "Attention" status when blocking is off or paused. - New KpiStrip and PageTabs; Dashboard KPIs in three frames and a Refresh button. - Zones: KPI strip, tab with count, views, framed table with the canvas columns. - Apps: Installed / App Store tabs and a grid instead of cards (store inline). - Blocking: state banner and tab counts; one "Blocking" title. - Settings: actions in the header, label-and-help rows with the control on the right. - DHCP, Administration, DNS Client, Logs, Cache, About: subtitles, framed tables, KPI strips where the data exists; Login cover with the three-point list. - docs/compose.shnt.example.yaml: production compose with the console image. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
77 lines
2.9 KiB
CSS
77 lines
2.9 KiB
CSS
/*
|
|
The screen: the cover (OURS, `LoginCover.tsx`) beside the form above 960 px and
|
|
above it below. The form's side keeps what it always had: the card centred on
|
|
`--bg`, the footer under it.
|
|
*/
|
|
.screen {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
|
|
background: var(--bg);
|
|
}
|
|
@media (max-width: 960px) {
|
|
.screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
|
|
}
|
|
.page {
|
|
min-width: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
/* `align-content` as well as `place-items`: with two children (the card and
|
|
the footer), the rows split the height and each ends up centred in ITS half,
|
|
which left 258 px between them. This way the group is centred and the space
|
|
is set by the `gap`. */
|
|
align-content: center;
|
|
gap: var(--s-10);
|
|
background: var(--bg);
|
|
padding: var(--s-11);
|
|
}
|
|
.card {
|
|
composes: panel from '../ui/Panel.module.css';
|
|
width: 420px;
|
|
max-width: 100%;
|
|
padding: var(--s-11) var(--s-11);
|
|
}
|
|
/*
|
|
The mark is now an `<h1>`, so what the browser gives it for being one has to be
|
|
taken back off: an `h1` brings its own size and margins, and without this the
|
|
screen grew all at once. The look does not change; the element does, which is
|
|
what was missing: it was the only screen in the console with no heading at all.
|
|
*/
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-7);
|
|
margin: 0 0 var(--s-11);
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
/* Technitium's logo, not an initial of ours. See `app/Shell.module.css`. */
|
|
.mark { width: 28px; height: 28px; flex: none; }
|
|
.name { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: var(--t-5); }
|
|
.form { display: flex; flex-direction: column; gap: var(--s-9); }
|
|
.sso { margin-top: var(--s-10); padding-top: var(--s-10); border-top: 1px solid var(--line); }
|
|
.ssoLink {
|
|
display: flex; align-items: center; justify-content: center; gap: var(--s-5);
|
|
font-size: var(--t-4); color: var(--mute); text-decoration: none;
|
|
border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5);
|
|
}
|
|
/* "Forgot Password?" is a bare link, not a button with a box: in upstream it
|
|
sits loose above the SSO block (index.html:119). */
|
|
.link {
|
|
display: block; width: 100%; text-align: center;
|
|
background: none; border: 0; padding: 0;
|
|
font: inherit; font-size: var(--t-4); color: var(--mute); cursor: pointer;
|
|
}
|
|
.link:hover { color: var(--acc-ink); }
|
|
.orLogin { margin: var(--s-8) 0 var(--s-7); text-align: center; font-size: var(--t-3); color: var(--faint); }
|
|
|
|
/* The footer, under the card and centred: it belongs to the page, not the form. */
|
|
.footer { font-size: var(--t-3); line-height: 2; text-align: center; }
|
|
|
|
/* Stacked under the cover, the card goes to the top instead of the middle: the
|
|
cover already took the top of the screen, and centring would push the form
|
|
further down on a phone. */
|
|
@media (max-width: 960px) {
|
|
.page { align-content: start; padding: var(--s-11) var(--s-10); }
|
|
}
|