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]>
36 lines
3.7 KiB
CSS
36 lines
3.7 KiB
CSS
/* Design 1: Rail. Left icon rail with labels, collapsible; content fills the remaining width. */
|
|
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100vh}
|
|
body.rail-collapsed .shell{grid-template-columns:var(--nav-w-collapsed) minmax(0,1fr)}
|
|
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:14px 10px;background:var(--surface);border-right:1px solid var(--line);overflow:hidden auto;min-width:0}
|
|
.rail-brand{padding:4px 8px 10px;padding-right:34px}.rail-brand .rail-text{overflow:hidden;text-overflow:ellipsis}.rail-brand small{display:none}
|
|
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
|
|
.rail-count{margin-left:auto;font-size:.75rem;font-weight:700;background:var(--warning);color:var(--canvas);border-radius:99px;padding:0 7px;min-width:20px;text-align:center;line-height:20px}
|
|
.rail-toggle{position:absolute;right:-1px;top:14px;padding:4px;min-height:28px;border-radius:6px 0 0 6px;border-right:0}
|
|
.rail-toggle .ic{transform:rotate(180deg);width:16px;height:16px}body.rail-collapsed .rail-toggle .ic{transform:none}
|
|
.rail-foot{margin-top:auto;display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
|
|
.rail-launch{justify-content:center}
|
|
.theme-btn{position:relative;cursor:pointer}.theme-btn input:checked~.ic{color:var(--action)}.theme-btn:has(input:checked){background:color-mix(in srgb,var(--action) 14%,var(--surface));border-color:var(--action)}.theme-btn:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
|
|
body.rail-collapsed .rail-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
body.rail-collapsed .rail{padding-inline:8px}body.rail-collapsed .nav-link{justify-content:center;padding-inline:6px}
|
|
body.rail-collapsed .rail-count{position:absolute;margin:0;transform:translate(14px,-12px)}body.rail-collapsed .nav-link{position:relative}
|
|
body.rail-collapsed .rail-brand{justify-content:center;padding-inline:0;padding-top:40px}body.rail-collapsed .theme-quick{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.rail-collapsed .prototype-note{display:none}
|
|
.frame{display:flex;flex-direction:column;min-width:0;min-height:100vh}
|
|
.topline{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
|
|
.topline-title{flex:1;font-size:.85rem;color:var(--muted)}
|
|
.content{padding:var(--pad);flex:1;max-width:var(--content-max)}
|
|
@media (min-width:1900px){.content{padding:24px 32px}.shell{grid-template-columns:var(--nav-w) minmax(0,1fr)}}
|
|
@media (min-width:2560px){.content{padding:28px 48px}}
|
|
@media (max-width:959px){
|
|
.shell,body.rail-collapsed .shell{grid-template-columns:minmax(0,1fr)}
|
|
.rail{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}
|
|
body.rail-open .rail{transform:none}
|
|
body.rail-open::before{content:"";position:fixed;inset:0;background:rgb(0 0 0/.35);z-index:30}
|
|
.rail-toggle{display:none}body.rail-collapsed .rail-text{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal}body.rail-collapsed .theme-quick{position:static;width:auto;height:auto;clip:auto;overflow:visible}
|
|
.topline{display:flex}
|
|
.content{padding:12px}
|
|
}
|
|
.panel-waiting .waiting-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
|
|
.panel-side{display:grid;gap:var(--pad);align-content:start}
|
|
@media (min-width:1200px){.panel-waiting .waiting-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
@media (min-width:1900px){.panel-waiting .waiting-row{grid-template-columns:1fr}}
|