Yashas
009153fc0c
The app had FIFTY-FOUR distinct font sizes and forty of them sat between 0.58rem and 0.95rem — a three-pixel band. The most-used size was 0.78rem, so body copy was 12.5px. That is not a hierarchy, it is a fog of small grey text, and it is the main reason the screen read as a decade old: nothing could be emphasised because everything was already the same size. Nine steps now, with real jumps. 12px is the floor and is reserved for uppercase eyebrows — every one of the 53 declarations sitting there that was not an eyebrow has been lifted off it. The surfaces people actually read — the trail's entries, WhatsApp bubbles, field values, table cells — are at body size rather than meta size. The hairline cages are gone with them. The lead metrics and the overview KPIs were seven equal cells in a 1px grid, every value the same size as its label, which left the reader to do the prioritising themselves on every lead. They are separated by whitespace now, values at 22px against 12px labels, with premium and commission larger again: size does the prioritising instead. Panels breathe at 32px rather than 24, radii went 10/14 -> 12/16/20, borders dropped to the softer line, and the stage rail, the queue table and the cards were rebuilt on the same spacing rhythm. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
92 lines
2.4 KiB
CSS
92 lines
2.4 KiB
CSS
.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
|
|
|
|
.who__disc {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
flex: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
color: #fff;
|
|
user-select: none;
|
|
}
|
|
|
|
.who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }
|
|
|
|
.who__name {
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 500;
|
|
color: var(--zk-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Five agents, five hues, all readable on white at 20px and all distinguishable
|
|
from the Zurich blue the interface already uses for its own chrome. */
|
|
.who__disc--blue { background: #2167ae; }
|
|
.who__disc--teal { background: #0f7b78; }
|
|
.who__disc--violet { background: #5b4bb7; }
|
|
.who__disc--amber { background: #a8651a; }
|
|
.who__disc--plum { background: #8a3d6b; }
|
|
.who__disc--grey { background: #6b7280; }
|
|
|
|
/* The chip becomes a control only where a card exists to open. */
|
|
.who--btn {
|
|
font: inherit;
|
|
cursor: pointer;
|
|
padding: 2px 8px 2px 2px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--r-pill, 999px);
|
|
background: transparent;
|
|
transition: background .12s, border-color .12s;
|
|
}
|
|
.who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
|
|
.who--btn:hover .who__i { opacity: 1; }
|
|
.who--btn:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
|
|
|
|
.who__i {
|
|
width: 12px;
|
|
height: 12px;
|
|
flex: none;
|
|
color: var(--zk-grey);
|
|
opacity: 0;
|
|
transition: opacity .12s;
|
|
}
|
|
|
|
/* The AI mark, on the disc rather than beside the name: it has to survive
|
|
showName={false}, and it belongs to the worker, not to the label. Sits
|
|
proud of the disc so it stays legible against every one of the five hues,
|
|
with a white ring to separate it from the colour underneath. */
|
|
.who__ai {
|
|
position: absolute;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
width: 11px;
|
|
height: 11px;
|
|
fill: var(--zk-amber, #b5761f);
|
|
stroke: var(--zk-white, #fff);
|
|
stroke-width: 0.9;
|
|
stroke-linejoin: round;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
.who--md .who__ai { width: 13px; height: 13px; right: -3px; bottom: -3px; }
|
|
|
|
/* Said out loud for a screen reader, which cannot see a sparkle. */
|
|
.who__sr {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|