mirror of
https://github.com/turnstonelabs/turnstone.git
synced 2026-08-12 23:12:23 -06:00
Patrick Buckley
e60f5a3108
Conversational tabs now show a live shape+colour state glyph (● ◐ ⚠ ✗ ○) instead of the static ◆/○ placeholders the header removal (5e.2e) left behind — driven by the SAME Tier-1 source + builder the rail uses, so tab and rail always agree. - rail.js: export the glyph() builder (one source of truth for the mapping). - pane.js: ShellPane.stateful + PaneManager.setTabGlyph/statefulTabs — generic (PaneManager owns no glyph vocabulary; the shell passes the built element). A stateful pane builds no static glyph; the shell paints a live .ui-glyph. - shell.js: stateForWs() reads the Tier-1 snapshot; paintConvTabGlyphs() repaints every stateful tab on each Tier-1 render (subscribed to TS_APP.onRender) + per pane on activate. Coordinator + interactive panes are now stateful. - shell.css: .tab .tab-glyph spacing (static + live); live glyphs keep their own .ui-glyph-* state colour (no .tab .glyph override). SINGLE WRITER: the tab glyph is written only by the Tier-1 path (the pane's Tier-2 stream drives its body, not the tab) — no two-tier race, no stale open-time placeholder on reconnect (BRIEFING L144-147). A coordinator-telemetry-parity gap (open Q#2) would stale tab + rail equally, consistently. Verified: 27/27 mechanism harness (8 new glyph asserts) + real-stack wiring harnesses (console coord ui-glyph-running / int ui-glyph-idle; standalone int ui-glyph-running — matching the stubbed Tier-1 state, errs:[]) + 26 shell JS guards + CSS audit at baseline.
784 lines
18 KiB
CSS
784 lines
18 KiB
CSS
/* ==========================================================================
|
|
L-shell chrome — the unified rail + tab-bar + pane-host frame.
|
|
|
|
Scope (step 1): structural shell only — the rail shell, the tab bar, and the
|
|
pane frame. Rail *content* (Cluster health, Workspaces tree, Manage groups)
|
|
and pane *content* (chat turns, approval card, composer) are NOT here:
|
|
- state glyphs reuse ui-base.css `.ui-glyph-*` (the canonical shape+colour
|
|
vocabulary), not a private glyph class;
|
|
- chat / approval / composer styling lives in chat.css + coordinator.css;
|
|
- rail IA rows (.cluster/.nav/.grp) land alongside their markup in steps 2-3.
|
|
|
|
Tokens are the real base.css names (mock drafted against `--elevated`/`--r`/
|
|
`--accent-glow` which map to `--bg-elevated`/`--r-md`/`--accent-glow-strong`).
|
|
========================================================================== */
|
|
|
|
/* ===== The L: rail (|) + content (—) ===== */
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: 266px 1fr;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== Rail (the | of the L) ===== */
|
|
.rail {
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--hair);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.rail-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 13px 14px 11px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.brand-mark {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 5px;
|
|
background: linear-gradient(135deg, var(--accent), #b9762a);
|
|
box-shadow: 0 0 10px var(--accent-glow-strong);
|
|
flex: none;
|
|
}
|
|
.brand-name {
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
letter-spacing: 0.2px;
|
|
font-size: 14px;
|
|
}
|
|
.brand-sub {
|
|
color: var(--ink-4);
|
|
font-size: 11px;
|
|
margin-left: -3px;
|
|
}
|
|
/* the brand is a real button (keyboard "home") styled to look like plain text */
|
|
.brand-home {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: none;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.brand-home:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.rail-scroll {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 10px 8px 6px;
|
|
}
|
|
.sec-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.13em;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
padding: 12px 8px 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.sec-label .count {
|
|
margin-left: auto;
|
|
color: var(--ink-4);
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* ===== Rail live sections (Cluster + Workspaces) — fed by Tier-1 (rail.js).
|
|
State = shape + colour via ui-base.css .ui-glyph-*; rows are <button>s so
|
|
they're keyboard-operable (button resets below). ===== */
|
|
.rail-section {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* cluster strip + node list */
|
|
.cluster {
|
|
margin: 2px 4px 4px;
|
|
padding: 9px 10px;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--r-md);
|
|
}
|
|
.cluster-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cpill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--ink-3);
|
|
font-variant-numeric: tabular-nums;
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
font-family: var(--font-ui);
|
|
cursor: pointer;
|
|
}
|
|
.cpill b {
|
|
color: var(--ink-2);
|
|
font-weight: 600;
|
|
}
|
|
.cpill:hover {
|
|
color: var(--ink);
|
|
}
|
|
.cluster-nodes {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--hair);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.nlabel {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 9.5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
padding: 0 2px;
|
|
}
|
|
.nlabel .drift {
|
|
margin-left: auto;
|
|
color: var(--yellow);
|
|
letter-spacing: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
.node-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 3px 4px;
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
background: none;
|
|
border: 0;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: var(--font-ui);
|
|
}
|
|
.node-row:hover {
|
|
background: var(--panel);
|
|
}
|
|
.node-row .nn {
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
color: var(--ink-2);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.node-row .ver {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--ink-4);
|
|
}
|
|
.node-row .ver.drift {
|
|
color: var(--yellow);
|
|
}
|
|
.node-row .nws {
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--ink-3);
|
|
font-size: 11px;
|
|
min-width: 42px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* workspaces — session nav tree */
|
|
.nav {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.nav li {
|
|
list-style: none;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 6px 9px;
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
color: var(--ink-2);
|
|
position: relative;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
background: none;
|
|
border: 0;
|
|
text-align: left;
|
|
font-family: var(--font-ui);
|
|
}
|
|
.row:hover {
|
|
background: var(--panel-2);
|
|
}
|
|
.row .glyph {
|
|
width: 16px;
|
|
text-align: center;
|
|
color: var(--ink-4);
|
|
font-size: 12px;
|
|
flex: none;
|
|
}
|
|
.row .nm {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.row .rcount {
|
|
font-size: 10px;
|
|
color: var(--ink-4);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.row .tag,
|
|
.persona-tag {
|
|
font-size: 9px;
|
|
letter-spacing: 0.08em;
|
|
font-weight: 600;
|
|
padding: 1px 5px;
|
|
border-radius: 9px;
|
|
border: 1px solid var(--hair-2);
|
|
color: var(--ink-4);
|
|
}
|
|
.row .tag.coord,
|
|
.persona-tag.coord {
|
|
color: var(--accent);
|
|
border-color: color-mix(in srgb, var(--accent) 40%, var(--hair-2));
|
|
}
|
|
.row.open {
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
|
|
}
|
|
.row.open::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
width: 2px;
|
|
border-radius: 2px;
|
|
background: var(--accent);
|
|
}
|
|
.row.open .nm {
|
|
color: var(--ink);
|
|
}
|
|
.children {
|
|
list-style: none;
|
|
margin: 1px 0 3px 13px;
|
|
padding-left: 14px;
|
|
border-left: 1px solid var(--hair);
|
|
}
|
|
|
|
/* connection indicator — relocated #status-bar (was the header text bar).
|
|
`disconnected` is toggled by app.js connectSSE on stream loss. */
|
|
.rail-conn {
|
|
padding: 4px 10px 2px;
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
min-height: 18px;
|
|
}
|
|
.rail-conn.disconnected {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* rail footer — relocated header controls + user chip */
|
|
.rail-foot {
|
|
border-top: 1px solid var(--hair);
|
|
padding: 9px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
/* relocated header controls. Text buttons (admin / logout) keep a text shape;
|
|
only glyph-only buttons (the ☾ theme toggle, future .ico-btn) collapse to a
|
|
square — otherwise multi-char labels overflow a 28px box and overlap. */
|
|
.rail-foot .header-btn {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--hair);
|
|
background: var(--panel-2);
|
|
color: var(--ink-3);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.rail-foot .header-btn:hover {
|
|
border-color: var(--accent-dim);
|
|
color: var(--ink);
|
|
}
|
|
.rail-foot #theme-toggle {
|
|
width: 28px;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
}
|
|
.ico-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--hair);
|
|
background: var(--panel-2);
|
|
color: var(--ink-3);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
.ico-btn:hover {
|
|
border-color: var(--accent-dim);
|
|
color: var(--ink);
|
|
}
|
|
/* logout starts hidden (app.js toggles it on auth) — keep that behaviour */
|
|
.user-chip {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: var(--ink-3);
|
|
font-size: 12px;
|
|
}
|
|
.avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--hair-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
/* ===== Content (the — of the L): tab bar + pane host ===== */
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.tabbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
background: var(--panel);
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
.tab {
|
|
position: relative;
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 6px 11px;
|
|
border-radius: var(--r-md);
|
|
font-size: 12.5px;
|
|
line-height: 1.2;
|
|
color: var(--ink-3);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
background: none;
|
|
font-family: var(--font-ui);
|
|
}
|
|
/* Tab glyph spacing — applies to BOTH the static decorative char (Dashboard /
|
|
Admin, via .glyph) and the live state glyph (.ui-glyph-* on conversational
|
|
tabs). The static glyph is dim --ink-4; the live glyph keeps its own
|
|
.ui-glyph-* state colour, so it is NOT given a colour here. */
|
|
.tab .tab-glyph {
|
|
margin-right: 6px;
|
|
font-size: 11px;
|
|
}
|
|
.tab .glyph {
|
|
color: var(--ink-4);
|
|
}
|
|
.tab:hover {
|
|
background: var(--panel-2);
|
|
}
|
|
.tab.active {
|
|
background: var(--panel-2);
|
|
border-color: var(--hair-2);
|
|
color: var(--ink);
|
|
}
|
|
/* Active tab's STATIC glyph (Dashboard / Admin) brightens a touch; live state
|
|
glyphs on conversational tabs keep their .ui-glyph-* state colour instead. */
|
|
.tab.active .glyph {
|
|
color: var(--ink-2);
|
|
}
|
|
/* Tab-action caret — opens the pane's action dropdown (step 7). A decorative
|
|
span inside the tab <button> (a nested <button> is invalid markup); the menu
|
|
it triggers is keyboard-reachable via ContextMenu / Shift+F10 on the focused
|
|
tab. Dim by default, brightening on tab hover / active / open. */
|
|
.tab-caret {
|
|
margin-left: 6px;
|
|
margin-right: -3px;
|
|
padding: 2px 3px;
|
|
color: var(--ink-4);
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
border-radius: var(--r-sm);
|
|
transition:
|
|
color 0.1s,
|
|
background 0.1s;
|
|
}
|
|
.tab:hover .tab-caret,
|
|
.tab.active .tab-caret {
|
|
color: var(--ink-2);
|
|
}
|
|
.tab-caret:hover,
|
|
.tab[aria-expanded="true"] .tab-caret {
|
|
color: var(--ink);
|
|
}
|
|
.tab-caret:hover {
|
|
background: var(--hair-2);
|
|
}
|
|
.tab-add {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ink-4);
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.tab-add:hover {
|
|
background: var(--panel-2);
|
|
color: var(--ink-2);
|
|
}
|
|
.tabbar-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--ink-4);
|
|
}
|
|
|
|
/* Tab-action dropdown — promoted to the shared shell sheet so the console and
|
|
the standalone server both render it. Recovers the retired `.ws-tab-dropdown`
|
|
design (git 92ad5bd4) translated onto the DS token vocabulary (the old sheet
|
|
used --bg-surface/--border/--fg-*; the shell speaks --panel/--hair/--ink-*). */
|
|
.tab-menu {
|
|
position: fixed;
|
|
z-index: 300;
|
|
min-width: 184px;
|
|
max-height: calc(
|
|
100vh - 16px
|
|
); /* never taller than the viewport — scroll instead */
|
|
overflow-y: auto;
|
|
padding: 4px 0;
|
|
/* --panel-2 (a step up from the page/tabbar --panel) reads as an elevated
|
|
popup; the shadow + --hair-2 border carry the rest. */
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--hair-2);
|
|
border-radius: var(--r-md);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
animation: tab-menu-in 0.1s ease-out;
|
|
}
|
|
[data-theme="light"] .tab-menu {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.tab-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
width: 100%;
|
|
padding: 7px 14px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--ink);
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
.tab-menu-item:hover,
|
|
.tab-menu-item:focus-visible {
|
|
/* a visible delta from the --panel-2 surface on BOTH themes; reuses the rail
|
|
.row.open accent wash so the highlight reads as one vocabulary. */
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
|
|
}
|
|
.tab-menu-item:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
/* Delete carries a RESTING danger cue (red-tinted label + key), not colour-on-
|
|
hover-only — the brief's "never colour alone" rule. ("Delete" is itself the
|
|
non-colour cue; the tint is the at-a-glance scan affordance.) ~7:1 at rest. */
|
|
.tab-menu-item.destructive {
|
|
color: color-mix(in srgb, var(--err) 80%, var(--ink-2));
|
|
}
|
|
.tab-menu-item.destructive .tab-menu-key {
|
|
color: color-mix(in srgb, var(--err) 55%, var(--ink-4));
|
|
}
|
|
.tab-menu-item.destructive:hover,
|
|
.tab-menu-item.destructive:focus-visible {
|
|
color: var(--err);
|
|
background: color-mix(in oklab, var(--err) 14%, transparent);
|
|
}
|
|
.tab-menu-item.destructive:focus-visible {
|
|
outline-color: var(--err);
|
|
}
|
|
.tab-menu-label {
|
|
flex: 1;
|
|
}
|
|
.tab-menu-key {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
}
|
|
/* light --ink-4 on the menu surface is ~4:1 (sub-AA for this 11px text) — one
|
|
step up; dark --ink-4 already clears AA so it keeps the dimmer hint. */
|
|
[data-theme="light"] .tab-menu-key {
|
|
color: var(--ink-3);
|
|
}
|
|
.tab-menu-sep {
|
|
height: 1px;
|
|
margin: 6px 0;
|
|
background: var(--hair-2);
|
|
}
|
|
@keyframes tab-menu-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tab-menu {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* pane host — ONE pane visible per tab (no split; the mock's 2-up was a
|
|
display device only, so this is a single column, not `1fr 1fr`). */
|
|
.panes {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
min-height: 0;
|
|
}
|
|
.pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.pane[hidden] {
|
|
display: none;
|
|
}
|
|
.pane-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 9px 13px;
|
|
border-bottom: 1px solid var(--hair);
|
|
background: color-mix(in srgb, var(--panel) 60%, var(--bg));
|
|
}
|
|
.pane-head .nm {
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
font-size: 13.5px;
|
|
}
|
|
.ptag {
|
|
font-size: 9px;
|
|
letter-spacing: 0.09em;
|
|
font-weight: 600;
|
|
padding: 1px 6px;
|
|
border-radius: 9px;
|
|
border: 1px solid var(--hair-2);
|
|
color: var(--ink-4);
|
|
}
|
|
.ptag.coord {
|
|
color: var(--accent);
|
|
border-color: color-mix(in srgb, var(--accent) 40%, var(--hair-2));
|
|
}
|
|
.ptag.int {
|
|
color: var(--cyan);
|
|
border-color: color-mix(in srgb, var(--cyan) 35%, var(--hair-2));
|
|
}
|
|
|
|
/* the pane body fills + scrolls; the step-1 dashboard pane hosts the legacy
|
|
#main here unchanged, so it keeps its own internal layout. */
|
|
.pane-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.pane-body > #main,
|
|
.pane-body > #breadcrumb {
|
|
flex: none;
|
|
}
|
|
.pane-body > #main {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ===== Dashboard session launcher — persona toggle (coordinator | interactive).
|
|
A console-dashboard control; lives here because the L-shell loads shell.css. */
|
|
.launcher-personas {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
margin-bottom: 10px;
|
|
padding: 2px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--r-sm);
|
|
background: var(--panel-2);
|
|
}
|
|
.persona-btn {
|
|
padding: 4px 12px;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--ink-3);
|
|
font-size: 12px;
|
|
font-family: var(--font-ui);
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
}
|
|
.persona-btn:hover {
|
|
color: var(--ink);
|
|
}
|
|
.persona-btn.active {
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
box-shadow: inset 0 0 0 1px var(--hair-2);
|
|
}
|
|
/* persona tag in the saved-sessions table — shares the rail chip base
|
|
(.row .tag above); only no-wrap + the INT colour differ. */
|
|
.persona-tag {
|
|
white-space: nowrap;
|
|
}
|
|
.persona-tag.int {
|
|
color: var(--cyan);
|
|
border-color: color-mix(in srgb, var(--cyan) 35%, var(--hair-2));
|
|
}
|
|
|
|
/* Inset focus ring for the rail's interactive rows + the persona toggle — the
|
|
global :focus-visible (base.css) uses outline-offset:2px, which clips against
|
|
the 266px rail edge; inset it like .dash-row:focus-visible (base.css). */
|
|
.cpill:focus-visible,
|
|
.node-row:focus-visible,
|
|
.row:focus-visible,
|
|
.grp-head:focus-visible,
|
|
.persona-btn:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
|
|
/* ===== Rail Manage section — the admin IA as collapsible discovery groups
|
|
(rail.js mountManage). Reuses the mock's .grp / .grp-head / .grp-items
|
|
vocabulary; heads + rows are <button>s so they're keyboard-operable, and
|
|
collapse state rides the chevron + aria-expanded (no colour-only cue). ===== */
|
|
.grp {
|
|
margin-top: 1px;
|
|
}
|
|
.grp-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 9px;
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
color: var(--ink-3);
|
|
font-size: 13px;
|
|
width: 100%;
|
|
background: none;
|
|
border: 0;
|
|
text-align: left;
|
|
font-family: var(--font-ui);
|
|
}
|
|
.grp-head:hover {
|
|
background: var(--panel-2);
|
|
}
|
|
.grp-head .chev {
|
|
width: 12px;
|
|
color: var(--ink-4);
|
|
font-size: 10px;
|
|
flex: none;
|
|
}
|
|
.grp-head .gname {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.grp-head .gcount {
|
|
margin-left: auto;
|
|
color: var(--ink-4);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.grp:not(.open) .grp-items {
|
|
display: none;
|
|
}
|
|
.grp-items {
|
|
padding-left: 20px;
|
|
}
|
|
.grp-items .row {
|
|
color: var(--ink-3);
|
|
font-size: 12.5px;
|
|
padding: 5px 9px;
|
|
}
|
|
/* the current admin tab — a subtle single marker (the rail mirrors which tab
|
|
the Admin pane is showing; distinct from the amber `.open` of live sessions) */
|
|
.grp-items .row.active {
|
|
color: var(--ink);
|
|
background: var(--panel-2);
|
|
box-shadow: inset 2px 0 0 var(--hair-2);
|
|
}
|
|
|
|
/* ===== Admin pane — adopts #view-admin (the 18 tabpanels). The in-pane
|
|
sidebar is retired (the rail's Manage groups navigate), so #view-admin fills
|
|
the pane body and the content host renders full-width. ===== */
|
|
.pane-body > #view-admin {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* inset off the tab-bar hairline + rail edge; .admin-content keeps its right pad */
|
|
padding: 16px 0 0 16px;
|
|
}
|