jason.woltjeandClaude Opus 5.5
1f4882d2b4
Brand board revisions, the five dashboard mockups with their verify
script and evidence, the slice 1 S5 design note (SLICE1-VIEWS.md, rev 3
plus the S2c section 10 update), the Console mockup of inbox, tasks,
agents and trail (mockups/slice1/) and checks/slice1-verify.mjs (16
checks; check 16 pinned to bus at d27042fa). Also the CHAT-03 progress
log and the 2026-09-26 dirty-tree manifest. Design and evidence only;
no package code. Row 40 (#1522), committed on its own at Sage's
direction, 2026-10-09.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
19 lines
2.1 KiB
CSS
19 lines
2.1 KiB
CSS
/* Design 2: Deck. Top bar with tabs; content is a card deck. */
|
|
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
|
|
.topbar-row{display:flex;align-items:center;gap:12px;padding:10px var(--pad);flex-wrap:wrap}
|
|
.topbar-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;background:var(--canvas);border:1px solid var(--border);border-radius:99px;padding:0 12px;min-height:40px;max-width:560px}
|
|
.topbar-search input{border:0;background:none;min-height:38px;padding:0;flex:1;min-width:0}.topbar-search input:focus{outline:none}.topbar-search:focus-within{outline:3px solid var(--focus);outline-offset:1px}
|
|
.topbar-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
|
|
.menu{position:relative}.menu summary{list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}.menu-label{font-weight:500;font-size:.85rem}
|
|
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(92vw,320px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:14px;display:grid;gap:10px;z-index:30}
|
|
.tabs ul{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
|
|
.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 10px;border-bottom:3px solid transparent;color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap;min-height:42px}
|
|
.tab:hover{color:var(--text)}.tab[aria-current=page]{color:var(--action);border-bottom-color:var(--action)}
|
|
.content{padding:var(--pad);max-width:var(--content-max)}
|
|
.deck-waiting{margin-bottom:var(--pad)}
|
|
.deck-lower{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:var(--pad)}
|
|
@media (min-width:768px){.deck-lower{grid-template-columns:3fr 2fr}}
|
|
@media (min-width:1900px){.content{padding:24px 40px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
|
|
@media (min-width:2560px){.content{padding:28px 56px}.deck-lower{grid-template-columns:2fr 1fr}}
|
|
@media (max-width:699px){.topbar-search{order:3;flex-basis:100%}.menu-label{display:none}.tab span:not(.count){font-size:.85rem}}
|