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]>
30 lines
3.6 KiB
CSS
30 lines
3.6 KiB
CSS
/* Design 5: Stream. Side tabs on wide screens, bottom tab bar on phones, chronological stream with pinned inbox. */
|
|
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px var(--pad);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
|
|
.head-sub{font-size:.82rem;color:var(--muted);margin-left:auto}
|
|
.frame{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:calc(100vh - 58px)}
|
|
.side{padding:12px 10px;border-right:1px solid var(--line);background:var(--surface);position:sticky;top:58px;height:calc(100vh - 58px);display:flex;flex-direction:column}
|
|
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}.side .count{margin-left:auto}
|
|
.side-foot{margin-top:auto;display:grid;gap:6px}
|
|
.content{padding:var(--pad);min-width:0}
|
|
.stream-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
|
|
.inbox{border-left:4px solid var(--warning)}
|
|
.now-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}.now-list li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border-radius:var(--r);background:var(--raised);font-size:.92rem}
|
|
.now-list a{color:var(--text)}.now-goal{flex-basis:100%;font-size:.82rem;color:var(--muted);padding-left:36px}
|
|
.stream-h2{margin-top:6px}
|
|
.stream-side{display:grid;gap:var(--gap);align-content:start}
|
|
.tabbar{display:none;position:fixed;inset:auto 0 0 0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
|
|
.tabbar>ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.tabbar>ul>li{min-width:0}
|
|
.tab-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:.7rem;font-weight:500;color:var(--muted);text-decoration:none;min-height:56px;position:relative;cursor:pointer;list-style:none;min-width:0;max-width:100%;text-align:center;overflow-wrap:anywhere}
|
|
.tab-link::-webkit-details-marker{display:none}.tab-link[aria-current=page]{color:var(--action)}.tab-link .ic{width:24px;height:24px}
|
|
.tab-dot{position:absolute;top:4px;right:calc(50% - 22px);background:var(--warning);color:var(--canvas);font-size:.65rem;font-weight:700;border-radius:99px;min-width:18px;line-height:18px;text-align:center;padding:0 5px}
|
|
.more{position:relative}.more-list{position:absolute;bottom:calc(100% + 6px);right:6px;width:200px;max-width:calc(100vw - 12px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px;list-style:none;margin:0;display:grid;gap:2px}
|
|
@media (min-width:768px){.stream-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stream-side{grid-column:1/-1;grid-template-columns:1fr 1fr}}
|
|
@media (min-width:1200px){.stream-grid{grid-template-columns:minmax(300px,2fr) minmax(0,3fr) minmax(280px,2fr)}.stream-side{grid-column:auto;grid-template-columns:1fr}}
|
|
@media (min-width:1900px){.frame{grid-template-columns:240px minmax(0,1fr)}.content{padding:24px 40px}.stream-grid{grid-template-columns:minmax(320px,2fr) minmax(0,4fr) minmax(300px,2fr)}}
|
|
@media (min-width:2560px){.content{padding:28px 56px}.stream-grid{grid-template-columns:minmax(360px,2fr) minmax(0,5fr) minmax(340px,2fr)}}
|
|
@media (max-width:959px){
|
|
.frame{grid-template-columns:minmax(0,1fr)}.side{display:none}.tabbar{display:block}
|
|
.content{padding:12px 12px 80px}.foot{padding-bottom:80px}.head-sub{display:none}.head-launch{margin-left:auto}.head-launch .ic-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.head .wordmark small{display:none}
|
|
#toasts{bottom:72px}
|
|
}
|