vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor(frontend): unify dashboard tabbar with the minimal pill chrome (#1464 step 3b)

Browse source 
The dashboard tabbar was the styling outlier: a folder-tab metaphor
(top-rounded corners, transparent side borders overlapping the strip
border, and a box-shadow lift on the active tab) while every standalone
page's sub-tabs use the flat shared .hive-tab pill. Restyle .tabbar .tab
to the same pill family — drop the lift shadow, folder border and
top-only radius; active tab now uses the filled var(--border) background
like .hive-tab--active.

Kept a touch more weight than the bare sub-tab (larger 0.92em font, bold
labels, count pills) since this is the dashboard's primary nav, per the
operator's 'less fancy but not too minimal' steer. CSS-only, no markup
or behaviour change.
This commit is contained in:
iris 2026-06-09 11:23:41 +02:00 • committed by mara
commit bb2a031135
1 changed files with 13 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/packages/dashboard/src/dashboard.css
View file

@ -62,38 +62,36 @@ body.dashboard-shell {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 0.2em; gap: 0.2em;
padding: 0.5em 1em 0; padding: 0.5em 1em;
border-bottom: 1px solid var(--purple-dim); border-bottom: 1px solid var(--purple-dim);
} }
/* Shares the flat-pill aesthetic of the shared `.hive-tab` (sub-tabs on
the standalone pages) so the chrome reads as one family. Kept a touch
weightier than bare `.hive-tab` — larger font, bold labels, count
pills — since this is the dashboard's primary nav, not a sub-strip. */
.tabbar .tab { .tabbar .tab {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
flex-shrink: 0; flex-shrink: 0;
padding: 0.55em 1em 0.45em; padding: 0.4em 0.95em;
margin-bottom: -1px; /* overlap the tabbar bottom border */
color: var(--muted); color: var(--muted);
font-family: inherit; font-family: inherit;
font-size: 0.92em; font-size: 0.92em;
letter-spacing: 0.08em; letter-spacing: 0.06em;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 0;
border-bottom: 0; border-radius: 4px;
border-radius: 4px 4px 0 0;
cursor: pointer; cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, background 0.15s ease;
} }
.tabbar .tab:hover { .tabbar .tab:hover {
color: var(--purple); color: var(--fg);
background: color-mix(in srgb, var(--purple) 6%, transparent); background: var(--border);
} }
.tabbar .tab.hive-tab--active { .tabbar .tab.hive-tab--active {
color: var(--purple); color: var(--purple);
border-color: var(--purple-dim); background: var(--border);
background: var(--bg);
/* Lift the active tab visually — the bottom border of the tabbar
yields under it via the -1px margin above. */
box-shadow: 0 -2px 12px -4px color-mix(in srgb, var(--purple) 40%, transparent);
} }
.tab-label { font-weight: bold; white-space: nowrap; } .tab-label { font-weight: bold; white-space: nowrap; }
.tab-count { .tab-count {