/* ------------------------------ Workspace chrome ------------------------------ The top bar, the account menu that hangs off it, and the settings dialog that menu opens — lifted out of app.css so that /docs and the Explore pages can show the same header to a signed-in visitor. They could not simply load app.css: that sheet also lays out the app shell (`body { overflow: hidden }`, `#app-root { height: 100vh }`, `main { display: flex }`), which would leave a document page unable to scroll. Same reasoning that split out nav.css, footer.css and project-grid.css before it. Loaded from the head partial, so every page has it. The rules match nothing on a page that does not render the "topbar" partial. Markup: templates/partials/topbar.html. Behaviour: public/js/topbar.mjs. -------------------------------------------------------------- */ /* ------------------------------------------------------- icons, unupgraded --- */ /* An icon that has not upgraded yet has NO BOX AT ALL. is an unknown element until its module runs, which makes it display: inline with zero width — so every label beside one sits 16px to the left of where it belongs, and the whole sidebar jumps sideways the moment the module lands. On a warm localhost that gap is 25ms; over a real connection it is however long the module takes to arrive, and it is the blink you see on the sidebar. The element sizes itself from its `size` attribute at upgrade (see ui/icon/index.mjs); these rules say the same thing in CSS, so the space is already there when the server's HTML paints and nothing moves afterwards. 1.5rem is the element's own default, for an icon with no size attribute. TWINNED with the sizes actually used in templates/ — TestIconSizesReserved fails if a template starts using one this file does not know about. */ ui-icon:not(:defined) { display: inline-flex; inline-size: 1.5rem; block-size: 1.5rem; /* Never shrink: in the flex rows these sit in, a zero-width item is exactly what the reservation is trying to prevent. */ flex: none; } ui-icon:not(:defined)[size="12px"] { inline-size: 12px; block-size: 12px; } ui-icon:not(:defined)[size="14px"] { inline-size: 14px; block-size: 14px; } ui-icon:not(:defined)[size="16px"] { inline-size: 16px; block-size: 16px; } ui-icon:not(:defined)[size="18px"] { inline-size: 18px; block-size: 18px; } ui-icon:not(:defined)[size="30px"] { inline-size: 30px; block-size: 30px; } /* ---------------------------------------------------------- which header --- */ /* [data-auth] is set on before first paint by the inline script in the head partial, so neither header is ever briefly visible in the wrong state. Both are in the DOM on a public page; these two rules pick one. Scoped to .topbar--public rather than .topbar so that app.html's own header can never be hidden — it renders the plain "topbar" partial, and if storage were blocked there [data-auth] would be absent and the first rule would otherwise take the workspace's header away entirely. */ :root:not([data-auth="in"]) .topbar--public { display: none; } /* Only where there is actually a replacement on the page. /terms, /privacy and the homepage render the marketing header without a topbar beside it, and an unconditional rule here left a signed-in visitor to those pages with no header at all. :has() keys the hiding to the thing doing the replacing rather than to the attribute alone, so adding the topbar to another page is still a one-line change to that template. */ :root[data-auth="in"] body:has(.topbar--public) .site-header { display: none; } /* -------------------------------------------------------------- topbar --- */ .topbar { display: flex; align-items: center; gap: var(--pf-space-4); padding-inline: 0 var(--pf-space-4); border-bottom: 1px solid var(--pf-color-border); background: var(--pf-color-bg); min-height: 52px; /* The account menu hangs over the first row of cards. Those cards carry a z-index:1 overlay, and once signed in this bar is a stacking context (view-transition-name below) so the panel's own z-index cannot escape it. Without a z-index here the overlay paints on top of the open menu. */ position: relative; z-index: 10; } .topbar .brand { display: flex; align-items: center; gap: var(--pf-space-2); line-height: 1; font-weight: var(--pf-weight-medium); font-size: var(--pf-text-base); letter-spacing: -0.01em; color: var(--pf-color-ink); width: 220px; flex-shrink: 0; border-right: 1px solid var(--pf-color-border); padding-left: var(--pf-space-4); padding-block: var(--pf-space-2); background: var(--pf-color-surface-sunken); /* Fills the bar's height, and NOT via height: 100% — that needs an ancestor with a definite height, which only /app has. There app.css sets html/body to height:100% and #app-root to 100dvh; on /docs and Explore the tallest thing above this is body's min-height: 100dvh, and a min-height never makes a height definite, so the percentage resolved to auto and the block collapsed to its text (34px in a 52px bar). align-self answers the same question without asking about ancestors: a flex item stretched on the cross axis fills the line whatever the container's height turns out to be. It has to be set per item because .topbar centres everything else. */ align-self: stretch; } .topbar .brand__mark { height: 1.15em; width: auto; flex: none; fill: currentColor; } .topbar .brand:hover { color: var(--pf-color-ink); } /* Recedes next to the wordmark so "Platform" stays the subject. Same letter-spacing as the demo's Admin pill — it is the same kind of mark. Hidden for members via [data-admin-only]; the 220px column still lines up with the sidebar either way. */ .topbar .brand__admin { flex: none; font-size: var(--pf-text-xs); font-weight: var(--pf-weight-medium); letter-spacing: 0.06em; opacity: 0.55; } .topbar .topbar-nav { display: flex; align-items: center; gap: var(--pf-space-4); padding-left: var(--pf-space-2); } /* The one link the bar still carries. Laid out as a row so the arrow sits on the text's baseline-ish centre rather than above it. */ .topbar .topbar-back { display: flex; align-items: center; gap: var(--pf-space-1); } /* Sized down from the 24px the icon ships at — that is a touch target, and this is a glyph beside 14px text. fill follows the link's own color, so it dims and brightens with the hover state instead of staying put. */ .topbar .topbar-back svg { width: 14px; height: 14px; flex: none; fill: currentColor; } .topbar .navlink { font-size: var(--pf-text-sm); color: var(--pf-color-muted); } .topbar .navlink:hover { color: var(--pf-color-ink); } /* Where you are. Styled off aria-current rather than a class beside it, so the thing a screen reader announces and the thing a sighted visitor sees cannot drift apart — there is only one source for both. Ink against the muted the other two keep, and nothing else — the same weight and position, so the row does not shift as you move between sections. (An underline in --pf-color-primary was tried here and dropped.) */ .topbar .navlink[aria-current="page"] { color: var(--pf-color-ink); } /* Nothing marks the current link in the narrow-screen panel: those links are already --pf-color-ink at display size, so the bar's contrast step has nothing left to say there. */ .topbar-spacer { flex: 1; } /* New project lives in the bar, immediately left of Copy MCP token, and only on the Projects collection. Default hidden: this markup is shared with /docs and Explore. Specificity has to beat `.topbar .btn { display: inline-flex }` above, or the button would show on every signed-in page. */ .topbar > .topbar-new-project.btn { display: none; } :root[data-view="projects"] .topbar > .topbar-new-project.btn { display: inline-flex; flex-shrink: 0; } /* ----------------------------------------------------------- workspace --- */ /* Here rather than in app.css for exactly the reason the topbar is: the Explore pages show this sidebar to a signed-in visitor and cannot load that sheet. The token-group rules that only ever appear inside a project stay behind in app.css. */ /* The two-column workspace: a 220px sidebar and the view beside it. Both the Projects list and a single project use it, which is what makes the sidebar feel structural — the column is always there, and only its contents change. The topbar's brand block is the same width, so the two line up. */ .project-page, .explore-project-page, .workspace { display: flex; height: 100%; min-height: 0; } /* The Projects view's own sidebar. Shares .token-sidebar for the column itself — width, sunken background, the border down its right edge — and adds only what a list of destinations needs. */ .app-sidebar__nav { display: flex; flex-direction: column; } .app-sidebar__link { display: flex; align-items: center; gap: var(--pf-space-2); padding: 9px var(--pf-space-5); border-left: 4px solid transparent; font-size: var(--pf-text-sm); color: var(--pf-color-muted); } .app-sidebar__link ui-icon { flex: none; } /* TEMPORARY: the Members directory is hidden while the roster is small enough that a public list of it undersells the product. Hidden, not removed — the page, its route and its API are all live, so /app/members still works for anyone who has the link, and bringing it back is deleting this rule. AppSidebar.ensureMembersLink() re-inserts this link on an older cached shell, which is the other reason the hiding is here rather than in the markup: one rule covers both the template's copy and the script's. */ .app-sidebar__link[data-nav="members"] { display: none; } .app-sidebar__link:hover { color: var(--pf-color-ink); background: var(--pf-color-bg); } /* Same treatment the token groups get for the current one — see .token-sidebar button.active, which this deliberately mirrors rather than inventing a second way to say "you are here". */ .app-sidebar__link[aria-current="page"] { background: var(--pf-color-surface); border-left-color: var(--pf-color-primary); color: var(--pf-color-ink); font-weight: var(--pf-weight-medium); } /* Admin tools sit after Send feedback: they are staff destinations, not part of the everyday workspace a member has. The wrapper is display:contents when shown, so the fold button is a flex child of the sidebar the same way Pinned is — one band, not a box inside a box. */ .app-sidebar__admin:not([hidden]) { display: contents; } /* The heading that collapses a band. Every declaration here beyond the layout is undoing a