Yashas
90290a8b37
Five fixes to the confusing nav: - The two per-row numbers had no key. The AI's share now reads "N with AI" in quiet grey, so it stops competing with the pink "needs you" badge. - Removed the outline node circles (and the rail line they hung on) — with one queue per group they read as empty checkboxes, not a pipeline. Rows now align flush and the active queue is shown by its tint alone. - Dropped the section-header count that just repeated the single row beneath it. - Lightened and tightened the group labels so the queues lead, not the headers. - Closed now matches a queue row — same padding, hover and count badge — while staying a foldable disclosure. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
329 lines
8.4 KiB
CSS
329 lines
8.4 KiB
CSS
.shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
/* ── Top bar ───────────────────────────────────────────────── */
|
|
.shell__top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-6);
|
|
height: 72px;
|
|
padding: 0 var(--sp-7);
|
|
background: var(--zk-white);
|
|
border-bottom: 1px solid var(--zk-line);
|
|
}
|
|
|
|
.shell__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.shell__brand img {
|
|
height: 30px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
.shell__brandtext {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
line-height: 1.2;
|
|
padding-left: 16px;
|
|
border-left: 1px solid var(--zk-line);
|
|
}
|
|
|
|
.shell__brandtext strong {
|
|
font-size: var(--fs-md);
|
|
font-weight: var(--fw-semi);
|
|
letter-spacing: -0.012em;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.shell__brandtext span {
|
|
font-size: var(--fs-3xs);
|
|
font-weight: 400;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
/* ── Body ──────────────────────────────────────────────────── */
|
|
.shell__body {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.shell__nav {
|
|
position: sticky;
|
|
top: 72px;
|
|
align-self: flex-start;
|
|
width: 264px;
|
|
flex: none;
|
|
min-height: calc(100vh - 72px);
|
|
max-height: calc(100vh - 72px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
background: var(--zk-tint);
|
|
border-right: 1px solid var(--zk-line);
|
|
padding: var(--sp-6) var(--sp-4) var(--sp-8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shell__navlabel {
|
|
margin: 0 0 var(--sp-3);
|
|
padding: 0 var(--sp-3);
|
|
font-size: var(--fs-3xs);
|
|
font-weight: 400;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.shell__group + .shell__group {
|
|
margin-top: var(--sp-5);
|
|
}
|
|
|
|
/* The stage list is drawn as a rail with a node per state: the sidebar should
|
|
look like the pipeline it represents, not like a list of links. */
|
|
.shell__stages {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-1);
|
|
}
|
|
|
|
|
|
.shell__stage {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-2);
|
|
padding: 9px 12px;
|
|
border-radius: var(--r-md);
|
|
text-decoration: none;
|
|
color: var(--zk-muted);
|
|
font-size: var(--fs-xs);
|
|
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
|
|
}
|
|
|
|
.shell__stage:hover {
|
|
background: var(--zk-tint);
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.shell__stage.is-active {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Queues where the machine stops and a person decides. */
|
|
.shell__stage.is-needed .shell__stagename {
|
|
font-weight: 500;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.shell__stage.is-needed.is-active .shell__stagename {
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
|
|
/* Stage names wrap rather than truncate: "Referred to Underwriting" is the one
|
|
queue a person has to find, and it is also the longest label. */
|
|
.shell__stagename {
|
|
min-width: 0;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.shell__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: var(--zk-white);
|
|
/* Fill the whole width beside the nav. No centring cap: a sidebar dashboard
|
|
should use the screen, so the content spans from the rail to the right
|
|
edge. The reading columns cap their own line length internally, so text
|
|
stays comfortable while the layout itself uses every pixel. */
|
|
width: 100%;
|
|
padding: 30px 40px 76px;
|
|
}
|
|
|
|
/* ── Narrow viewports: the rail lies down and scrolls ──────── */
|
|
@media (max-width: 900px) {
|
|
.shell__body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shell__nav {
|
|
position: static;
|
|
width: 100%;
|
|
min-height: 0;
|
|
max-height: none;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--zk-line);
|
|
padding: 14px 16px 16px;
|
|
}
|
|
|
|
.shell__stages {
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
/* Laid out horizontally the stages are a scrolling strip of pills, and a rail
|
|
behind them would just be a line struck through the row. */
|
|
.shell__stages::before {
|
|
display: none;
|
|
}
|
|
|
|
.shell__stage {
|
|
padding: 8px 14px;
|
|
white-space: nowrap;
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
}
|
|
|
|
.shell__stage::before {
|
|
display: none;
|
|
}
|
|
|
|
.shell__main {
|
|
padding: 22px 18px 56px;
|
|
}
|
|
}
|
|
|
|
/* The way back to the overview. It sits above "Add a lead" because reading
|
|
the book is the commoner act — most sessions start by looking, not filing. */
|
|
.shell__today {
|
|
display: block;
|
|
margin: 0 0 8px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--r-sm);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 500;
|
|
color: var(--zk-ink);
|
|
text-decoration: none;
|
|
transition: background .12s, color .12s;
|
|
}
|
|
.shell__today:hover { background: var(--zk-tint); }
|
|
.shell__today.is-active { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
|
|
|
|
/* ── Queue tallies ─────────────────────────────────────────────────────────
|
|
Three numbers, deliberately unequal in weight, because they are unequal in
|
|
importance: what needs YOU, what an agent holds, and whether anything in
|
|
there is about to lapse. */
|
|
.shell__tally {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: none;
|
|
}
|
|
|
|
/* What is waiting on a person. The only figure with full contrast. */
|
|
.shell__n {
|
|
min-width: 20px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
text-align: center;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
|
|
/* Zero is shown, not hidden. "Nothing here" is an answer, and a queue that
|
|
disappears when it empties makes the sidebar move under the cursor. */
|
|
.shell__n.is-zero {
|
|
color: var(--zk-grey);
|
|
background: transparent;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* What an agent is carrying. Present, quiet, and never added to the badge —
|
|
it is in the queue, it is not your work. */
|
|
.shell__auto {
|
|
font-style: normal;
|
|
font-size: var(--fs-2xs);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
/* A renewal inside a week sitting in this queue. */
|
|
.shell__urgent {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--zk-amber);
|
|
flex: none;
|
|
}
|
|
|
|
.shell__stage.is-empty { color: var(--zk-grey); }
|
|
.shell__stage.is-empty.is-needed .shell__stagename { color: var(--zk-muted); font-weight: 400; }
|
|
|
|
/* The one number worth carrying on a group heading: everything this role has
|
|
to clear, across its queues. */
|
|
.shell__navlabel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ── Closed, folded ───────────────────────────────────────────────────────
|
|
Three of the twelve queues, opened about once a week. */
|
|
.shell__closed { margin-top: var(--sp-4); }
|
|
|
|
/* Closed matches a queue row — same padding, hover and count — but stays a
|
|
disclosure: a chevron marks it as foldable, closed by default because it is
|
|
reporting, not work. */
|
|
.shell__closed > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
padding: 9px 12px;
|
|
border-radius: var(--r-md);
|
|
font-size: var(--fs-xs);
|
|
color: var(--zk-muted);
|
|
transition: background var(--t-fast), color var(--t-fast);
|
|
}
|
|
.shell__closed > summary::-webkit-details-marker { display: none; }
|
|
.shell__closed > summary:hover { background: var(--zk-tint); color: var(--zk-ink); }
|
|
.shell__closed > summary::before {
|
|
content: '';
|
|
flex: none;
|
|
width: 5px; height: 5px;
|
|
border-right: 1.5px solid var(--zk-grey);
|
|
border-bottom: 1.5px solid var(--zk-grey);
|
|
transform: rotate(-45deg);
|
|
transition: transform var(--t-fast);
|
|
}
|
|
.shell__closed[open] > summary::before { transform: rotate(45deg); }
|
|
.shell__closed > summary b {
|
|
margin-left: auto;
|
|
min-width: 20px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
text-align: center;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-grey);
|
|
background: var(--zk-tint);
|
|
}
|