Yashas
f6682813a4
Removing the node circles took the active-row marker with them — the tint alone was too quiet to say which queue you were on. The active row (and Overview / All leads) now carries a short accent bar on its left edge. It appears only when active, so inactive rows stay clean and nothing reads as an empty checkbox, which is what the circles did. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
346 lines
8.9 KiB
CSS
346 lines
8.9 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;
|
|
}
|
|
|
|
/* WHICH ONE YOU ARE ON. The node circles used to carry this, but they also sat,
|
|
empty, on every inactive row and read as checkboxes. An accent bar that exists
|
|
only when active says the same thing and says nothing the rest of the time. */
|
|
.shell__stage.is-active::before,
|
|
.shell__today.is-active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 50%;
|
|
width: 3px;
|
|
height: 18px;
|
|
margin-top: -9px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-blue);
|
|
}
|
|
|
|
/* 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 {
|
|
position: relative;
|
|
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);
|
|
}
|