Watch
0
0
Fork
You've already forked hyperhive
0
hyperhive/frontend/packages/shared/src/chrome.css
iris ee5c057d8f dashboard: the build pages are tabs of the dashboard
The build lifecycle used to be its own page with three sub-tabs. They are
now dashboard tabs (rebuild, meta, buildlogs) beside SW4RM and
P3RM1SS10NS: builds.js is a module tabs.js imports, so the dashboard's one
tab strip, /api/state snapshot and event stream (plus the meta_inputs_changed
and meta_update_running kinds) serve them, and the page, its bundle entry,
stylesheet and home tile are gone. The SW4RM banner's "view queue" link
points at the #rebuild tab, and the rebuild tab carries a count pill of the
rebuilds in flight.

An empty tab-count pill drew a "0": its display beat the UA [hidden] rule.
2026-10-15 09:50:49 +02:00

52 lines
1.8 KiB
CSS

/* ─── page chrome: back-link header ────────────────────────────────
The minimal sticky "frosted bar" header used by every standalone page
reached from the H0M3 hub — /flow, /stats, /core. A back
link to H0M3 on the left, then either a page title or (on /core) a
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 {
/* Stickiness lives on the `.sticky-top` wrapper (common.css) that
common.js wraps this header in, alongside the server-warning banner,
so the two stack instead of colliding. */
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;
/* Keep the back-link + sub-tab nav on one row. Without an explicit
nowrap a flex:1 sub-tab strip (e.g. `.core-tabbar`) whose intrinsic
min-content width can't shrink (default `min-width: auto`) gets
pushed onto its own line. */
flex-wrap: nowrap;
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;
}