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]>
24 lines
2.4 KiB
CSS
24 lines
2.4 KiB
CSS
/* Design 4: Board. Kanban columns by session state with project filter chips. */
|
|
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:8px var(--pad);background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
|
|
.bar-nav{min-width:0;max-width:100%}
|
|
.bar-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;position:relative}
|
|
.bar-link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:99px;color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap;min-height:40px}
|
|
.bar-link:hover{color:var(--text);background:var(--raised)}.bar-link[aria-current=page]{color:var(--onAction);background:var(--action)}
|
|
.bar-right{margin-left:auto;display:flex;align-items:center;gap:8px}.bar-theme{font-size:.82rem;font-weight:500}
|
|
.content{padding:var(--pad);max-width:var(--content-max)}
|
|
.board-columns{grid-auto-columns:minmax(280px,1fr);min-height:40vh}
|
|
.column-attn{background:color-mix(in srgb,var(--warning) 8%,var(--raised))}.column-danger{background:color-mix(in srgb,var(--danger) 7%,var(--raised))}
|
|
.column>h2{position:sticky;top:0}
|
|
.card-wait{font-size:.85rem;background:color-mix(in srgb,var(--warning) 10%,var(--surface));border-radius:var(--r);padding:8px 10px;margin:0}
|
|
.board-lower{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:var(--pad)}
|
|
.quick-launch{grid-template-columns:1fr}
|
|
@media (min-width:768px){.board-lower{grid-template-columns:3fr 2fr}}
|
|
@media (min-width:1440px){.board-columns{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
|
|
@media (min-width:1900px){.content{padding:24px 40px}.board-lower{grid-template-columns:2fr 1fr}}
|
|
@media (min-width:2560px){.content{padding:28px 56px}}
|
|
@media (max-width:1199px){.bar-theme{display:none}}
|
|
@media (max-width:1599px){.bar-nav{order:3;flex-basis:100%;min-width:0;max-width:100%}}
|
|
@media (max-width:959px){.bar-link>span:not(.ic){font-size:.85rem}}
|
|
@media (max-width:699px){.bar .wordmark small{display:none}.bar-right .btn.primary .ic-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bar-link>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bar-link{padding:8px;min-width:44px;justify-content:center}.content{padding:12px}}
|
|
@media (max-width:479px){#demo-board{display:none}}
|