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.
45 lines
1.4 KiB
CSS
45 lines
1.4 KiB
CSS
/* ─── page chrome: back-link header ────────────────────────────────
|
|
The minimal sticky "frosted bar" header used by every standalone page
|
|
reached from the H0M3 hub — /flow, /logs, /stats, /settings. A back
|
|
link to H0M3 on the left, then either a page title or (on /logs) a
|
|
createTabStrip sub-tab nav. The operator dashboard uses its own richer
|
|
sticky chrome (`.dashboard-chrome`); these classes cover the simple
|
|
pages.
|
|
|
|
Shared across packages via @hive/shared so a new page only links the
|
|
stylesheet + writes the three-element header markup:
|
|
|
|
<header class="page-header">
|
|
<a class="page-back" href="/">← home</a>
|
|
<span class="page-title">TITLE</span>
|
|
</header>
|
|
*/
|
|
.page-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 25;
|
|
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
|
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
|
backdrop-filter: blur(8px) saturate(120%);
|
|
border-bottom: 1px solid var(--purple-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5em;
|
|
padding: 0.5em 1.5em;
|
|
}
|
|
|
|
.page-back {
|
|
color: var(--purple);
|
|
text-decoration: none;
|
|
font-size: 0.88em;
|
|
white-space: nowrap;
|
|
flex: none;
|
|
}
|
|
.page-back:hover { text-decoration: underline; }
|
|
|
|
.page-title {
|
|
color: var(--subtext0);
|
|
font-size: 0.85em;
|
|
letter-spacing: 0.05em;
|
|
flex: none;
|
|
}
|