49a0a0d15f
The standalone pages (/flow, /logs, /stats, /settings) all share the same sticky back-link header, but its CSS lived in the dashboard's common.css under the misnomer `.logs-*` (the comment even noted it was used by more than logs). Promote it to a first-class shared component. - new @hive/shared/chrome.css with neutral `.page-header` / `.page-back` / `.page-title` (cohering with the `.page-content` gutter wrapper); exported from the shared package and @imported into common.css next to base/terminal/tabs.css. - rename the four pages' header markup `.logs-*` → `.page-*`. - drop the old `.logs-*` chrome block from common.css; refresh the stale doc comments in settings.css / stats.css / dashboard.css. CSS-only, behaviour/visual-neutral (same rules, new names + home). The dashboard keeps its own richer sticky `.dashboard-chrome`; unifying the per-agent UI's `.stats-nav` chrome is a larger follow-up, deferred. Part of #1464 step 3.
40 lines
1.1 KiB
CSS
40 lines
1.1 KiB
CSS
/* ─── /settings.html — operator-local preferences ──────────────────
|
|
Extracted from the dashboard S3TT1NGS tab. Same
|
|
minimal-chrome pattern as /flow.html and /logs.html: the back-link
|
|
header + title (.page-header / .page-back / .page-title) live in
|
|
@hive/shared/chrome.css; only the page body padding + the notif-toggle
|
|
row are page-specific and live here. */
|
|
|
|
body.settings-shell {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-main {
|
|
padding: 1.2em 1.5em 2em;
|
|
}
|
|
|
|
/* Browser-notification toggle row (moved verbatim from dashboard.css —
|
|
the buttons + status that NOTIF.bind() in common.js wires up). */
|
|
.notif-row {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
margin: 0.5em 0;
|
|
font-size: 0.85em;
|
|
}
|
|
.btn-notif {
|
|
font-family: inherit;
|
|
font-size: 0.85em;
|
|
background: transparent;
|
|
color: var(--cyan);
|
|
border: 1px solid var(--cyan);
|
|
padding: 0.2em 0.7em;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
text-shadow: 0 0 4px currentColor;
|
|
}
|
|
.btn-notif:hover {
|
|
background: color-mix(in srgb, var(--cyan) 10%, transparent);
|
|
box-shadow: 0 0 10px -2px currentColor;
|
|
}
|