102 lines
5.9 KiB
CSS
102 lines
5.9 KiB
CSS
/*
|
|
FNXC:Navigation 2026-06-22-01:00:
|
|
Shared main-content view header, modeled after Command Center (.cc-header / .cc-title). Provides the standard --space-lg side/top padding and --space-md bottom gap, an icon + 1.125rem title, and an optional right-aligned actions cluster that wraps below the title on narrow widths so the two never overlap.
|
|
|
|
FNXC:ViewHeader 2026-06-23-03:45:
|
|
ViewHeader is now THE canonical top header for every left-sidebar/main-content view. Its defaults match the reference already implemented by Missions (.mission-manager__header--inline) and Agents (.agents-view .view-header): container padding var(--space-lg) var(--space-xl), background var(--surface), no bottom divider, flex-shrink:0, and a --todo-colored leading icon at size 20. The title is 1.125rem/600/var(--text) with a var(--space-sm) icon-title gap. The actions cluster is pushed right with margin-left:auto so refresh/new/filter buttons right-align consistently across views; those buttons should use the shared `btn btn-sm` sizing. Per-view headers must adopt ViewHeader with NO divergent overrides so navigating between any two views shows a pixel-consistent header (same height, icon color/size, title metrics, padding, and button sizing). The Agents scoped override (.agents-view .view-header) is now redundant and removed; these defaults supply that chrome directly.
|
|
|
|
FNXC:ViewHeader 2026-06-22-18:00:
|
|
All view headers use Missions' surface background without a dividing line after the header. Sidebar section headers follow the same no-post-header-line rule so the app chrome feels seamless across themes.
|
|
*/
|
|
/*
|
|
FNXC:ViewHeader 2026-06-23-04:15:
|
|
Pin a shared min-height (--view-header-min-height ≈ 61px border-box) so headers WITH btn-sm actions and title-only headers render the SAME height. box-sizing:border-box keeps padding+border inside the pinned height; align-items:center vertically centers the title/actions row within it.
|
|
|
|
FNXC:ViewHeader 2026-06-23-05:00:
|
|
min-height alone let DESKTOP headers whose actions were TALLER than the canonical content row grow past 61px: Skills hit 77 via a 44px `touch-target` close button, Goals 69 via a 36px base `.btn` primary, Agents 65 via the 32px `.view-toggle` segmented switch. The desktop clamping rules below (scoped to the non-mobile breakpoint) pin a FIXED `height` and bound every action child to --view-header-content-row (28px) so tall controls collapse into the canonical row instead of stretching it; align-items:center keeps the 16-18px icons centered and nothing clips. The base rule keeps `min-height` (no fixed height) so the MOBILE breakpoint — where controls intentionally grow to 36px touch targets (see AgentsView.css @media max-width:768px) — can still expand the header instead of clipping those targets.
|
|
*/
|
|
.view-header {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-height: var(--view-header-min-height);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.view-header__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* FNXC:ViewHeader 2026-06-23-03:45: Leading icon is --todo-colored at size 20 to match Missions/Agents; never let it shrink. */
|
|
.view-header__title svg {
|
|
flex-shrink: 0;
|
|
color: var(--todo);
|
|
}
|
|
|
|
.view-header__title span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* FNXC:ViewHeader 2026-06-23-03:45: Right-align the action cluster with margin-left:auto so it pins to the trailing edge consistently; btn btn-sm gives every header button the same height/padding. */
|
|
.view-header__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/*
|
|
FNXC:ViewHeader 2026-06-23-05:00:
|
|
DESKTOP-ONLY canonical-height clamp. The mobile breakpoint is `(max-width: 768px), (max-height: 480px)` (landscape phones can exceed 768 wide, hence the height arm — see project mobile-breakpoint note), so the non-mobile complement is `(min-width: 769px) and (min-height: 481px)`. We scope the clamp here because mobile intentionally GROWS these controls to 36px touch targets (AgentsView.css @media max-width:768px); clamping there would clip them. On desktop:
|
|
- Pin a FIXED header height so it can never exceed the canonical 61px.
|
|
- nowrap + a fixed content-row-height actions cluster keep everything on one row (wrapping was a secondary way headers grew past 61px).
|
|
- Bound every action child to --view-header-content-row (28px): Goals' base `.btn` primary (intrinsic ~36px → now padding-trimmed to fit), Skills' 44px `touch-target` close button, and Agents' 32px `.view-toggle` all collapse to the row. align-items:center keeps the 16-18px icons centered; nothing clips because each control's own content fits inside 28px.
|
|
*/
|
|
@media (min-width: 769px) and (min-height: 481px) {
|
|
.view-header {
|
|
height: var(--view-header-min-height);
|
|
}
|
|
|
|
.view-header__actions {
|
|
flex-wrap: nowrap;
|
|
height: var(--view-header-content-row);
|
|
}
|
|
|
|
.view-header__actions > * {
|
|
min-height: 0;
|
|
max-height: var(--view-header-content-row);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Skills' close button carries `touch-target` (min-height:44px); force it square at the canonical row so it stops stretching the header to 77px. The 16px X icon stays centered and tappable. */
|
|
.view-header__actions .touch-target {
|
|
min-width: var(--view-header-content-row);
|
|
min-height: var(--view-header-content-row);
|
|
width: var(--view-header-content-row);
|
|
height: var(--view-header-content-row);
|
|
}
|
|
|
|
/* Agents' `.view-toggle` segmented switch is intrinsically 32px; bound it (and its inner 28px buttons) to the canonical row so it no longer adds 4px. Stays a single horizontal row of toggles. */
|
|
.view-header__actions .view-toggle {
|
|
height: var(--view-header-content-row);
|
|
}
|
|
|
|
.view-header__actions .view-toggle .view-toggle-btn {
|
|
height: 100%;
|
|
}
|
|
}
|