Yashas
de8b158ca9
"New lead" sat in the sidebar. A sidebar is for moving between places; filing a lead is an action, and an action in a list of destinations is the one item that does not behave like its neighbours — everything above and below it changes what you are looking at, and it did something. It now sits on the overview and on every queue, beside the lists it adds to, which is also where somebody is standing when they realise they have a lead to file. Same role gate as before: shown only to a user who holds an entry door. The sidebar's own button CSS went with it rather than being left for someone to wonder about. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
374 lines
8.9 KiB
CSS
374 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: 24px;
|
|
height: 66px;
|
|
padding: 0 28px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
backdrop-filter: saturate(180%) blur(14px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(14px);
|
|
border-bottom: 1px solid var(--zk-line);
|
|
box-shadow: var(--sh-xs);
|
|
}
|
|
|
|
.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: 0.95rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.005em;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.shell__brandtext span {
|
|
font-size: 0.7rem;
|
|
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: 66px;
|
|
align-self: flex-start;
|
|
width: 264px;
|
|
flex: none;
|
|
min-height: calc(100vh - 66px);
|
|
max-height: calc(100vh - 66px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
background: var(--zk-white);
|
|
border-right: 1px solid var(--zk-line);
|
|
padding: 20px 14px 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shell__navlabel {
|
|
margin: 0 0 10px;
|
|
padding: 0 10px;
|
|
font-size: 0.64rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
.shell__group + .shell__group {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
/* 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: 2px;
|
|
}
|
|
|
|
.shell__stages::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 18px;
|
|
bottom: 18px;
|
|
width: 2px;
|
|
border-radius: var(--r-pill);
|
|
background: linear-gradient(180deg, var(--zk-line) 0%, var(--zk-line-soft) 100%);
|
|
}
|
|
|
|
.shell__stage {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 9px 12px 9px 38px;
|
|
border-radius: var(--r-md);
|
|
text-decoration: none;
|
|
color: var(--zk-muted);
|
|
font-size: 0.845rem;
|
|
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
|
|
}
|
|
|
|
.shell__stage::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: -6px;
|
|
border-radius: 50%;
|
|
background: var(--zk-white);
|
|
border: 2px solid var(--zk-line);
|
|
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
|
|
.shell__stage:hover {
|
|
background: var(--zk-tint);
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.shell__stage:hover::before {
|
|
border-color: var(--zk-blue-light);
|
|
}
|
|
|
|
.shell__stage.is-active {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.shell__stage.is-active::before {
|
|
background: var(--zk-blue);
|
|
border-color: var(--zk-blue);
|
|
box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.14);
|
|
}
|
|
|
|
/* 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;
|
|
width: 100%;
|
|
max-width: 1460px;
|
|
margin: 0 auto;
|
|
padding: 30px 34px 76px;
|
|
animation: zk-rise 0.28s var(--ease) both;
|
|
}
|
|
|
|
/* ── 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: 14px;
|
|
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: 0.74rem;
|
|
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: 0.7rem;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-blue-mid);
|
|
}
|
|
.shell__auto::after {
|
|
content: '·';
|
|
margin-left: 5px;
|
|
color: var(--zk-line);
|
|
}
|
|
|
|
/* 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::before { border-color: var(--zk-line-soft); }
|
|
.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;
|
|
}
|
|
|
|
.shell__grouptally {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-white);
|
|
background: var(--zk-blue);
|
|
border-radius: var(--r-pill);
|
|
padding: 1px 7px;
|
|
}
|
|
|
|
/* ── Closed, folded ───────────────────────────────────────────────────────
|
|
Three of the twelve queues, opened about once a week. */
|
|
.shell__closed { margin-top: 22px; }
|
|
|
|
.shell__closed > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
padding: 0 10px 10px;
|
|
font-size: 0.64rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
.shell__closed > summary::-webkit-details-marker { display: none; }
|
|
.shell__closed > summary:hover { color: var(--zk-muted); }
|
|
.shell__closed > summary b {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--zk-grey);
|
|
}
|
|
.shell__closed > summary::after {
|
|
content: '';
|
|
order: -1;
|
|
width: 5px; height: 5px;
|
|
border-right: 1.5px solid currentColor;
|
|
border-bottom: 1.5px solid currentColor;
|
|
transform: rotate(-45deg);
|
|
transition: transform var(--t-fast);
|
|
}
|
|
.shell__closed[open] > summary::after { transform: rotate(45deg); }
|