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>
66 lines
1.5 KiB
CSS
66 lines
1.5 KiB
CSS
/* Wide and tall: this is the whole record, and squeezing thirteen groups into
|
|
a prose-width dialog would only move the crowding rather than remove it. */
|
|
.lfd { width: min(1180px, 100%); max-height: min(90vh, 940px); }
|
|
|
|
.lfd__sub {
|
|
margin: 4px 0 0;
|
|
font-size: var(--fs-2xs);
|
|
line-height: 1.5;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
.lfd__tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 12px 24px;
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
/* Ctrl-F was how people read the open version. Behind a click that stops
|
|
working, so the drawer brings its own. */
|
|
.lfd__find {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 12px;
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-pill);
|
|
}
|
|
|
|
.lfd__find:focus-within { border-color: var(--zk-blue); box-shadow: 0 0 0 3px var(--zk-tint-blue); }
|
|
.lfd__find svg { width: 14px; height: 14px; flex: none; color: var(--zk-grey); }
|
|
|
|
.lfd__find input {
|
|
flex: 1;
|
|
border: 0;
|
|
outline: none;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: var(--fs-xs);
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.lfd__find input::-webkit-search-cancel-button { cursor: pointer; }
|
|
|
|
.lfd__count {
|
|
flex: none;
|
|
font-size: var(--fs-2xs);
|
|
color: var(--zk-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.lfd__body { overflow-y: auto; }
|
|
.lfd__body .file360 { padding: 18px 22px 24px; }
|
|
|
|
.lfd__none {
|
|
margin: 0;
|
|
padding: 44px 24px;
|
|
text-align: center;
|
|
font-size: var(--fs-xs);
|
|
color: var(--zk-grey);
|
|
}
|