gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: the shell, the trail and the lead header on the same rhythm

Browse Source 
Continues 009153f into the surfaces it had not reached.

The top bar was 66px with a hard rule under it — admin chrome. It is 72 now,
on the softer line, with the product name at 16px instead of 15. The sidebar
gets wider gutters and taller rows, so the queue list stops reading as a dense
menu and starts reading as the pipeline it is drawn to represent.

The audit trail is where people spend their time on this screen, so it gets the
most air: entries at 24px apart rather than 18, quoted text with 12/16 padding
instead of 8/12, and the activity name at semibold so an entry has a heading
rather than a first line.

The stage badge was 15px under a 12px caption. It is the single most important
fact about a lead and now reads at 16px semibold, which is legible from across
a desk — which is how it will actually be read in a demo.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-08 23:56:59 +05:30
parent 009153fc0c
commit 9c05e4b26b
3 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Timeline.css
View File

@ -60,9 +60,9 @@
.tl__body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 12px 8px;
margin-left: -12px;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3) var(--sp-3);
margin-left: calc(var(--sp-3) * -1);
border-radius: var(--r-md);
transition: background var(--t-fast);
}
@ -75,7 +75,7 @@
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
gap: var(--sp-1) var(--sp-2);
}
/* Who and when sit on their own line: in a 384px rail, badge-beside-title wraps
@ -84,12 +84,13 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
gap: var(--sp-1) var(--sp-3);
}
.tl__what {
font-size: var(--fs-sm);
font-weight: 500;
font-weight: var(--fw-semi);
letter-spacing: -0.008em;
color: var(--zk-ink);
}
@ -129,8 +130,8 @@
}
.tl__say {
margin-top: 8px;
padding: 8px 12px;
margin-top: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-left: 2px solid var(--zk-blue-light);
border-radius: 0 var(--r-md) var(--r-md) 0;
background: var(--zk-tint);
@ -143,11 +144,11 @@
.tl__saylabel {
display: block;
font-size: var(--fs-3xs);
font-weight: 500;
letter-spacing: 0.1em;
font-weight: var(--fw-semi);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--zk-grey);
margin-bottom: 3px;
margin-bottom: var(--sp-2);
}
.tl__say p {

55
src/layout/Shell.css
View File

@ -13,14 +13,13 @@
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);
gap: var(--sp-6);
height: 72px;
padding: 0 var(--sp-7);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid var(--zk-line-soft);
}
.shell__brand {
@ -46,9 +45,9 @@
}
.shell__brandtext strong {
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
font-size: var(--fs-md);
font-weight: var(--fw-semi);
letter-spacing: -0.012em;
color: var(--zk-ink);
}
@ -70,33 +69,33 @@
.shell__nav {
position: sticky;
top: 66px;
top: 72px;
align-self: flex-start;
width: 264px;
flex: none;
min-height: calc(100vh - 66px);
max-height: calc(100vh - 66px);
min-height: calc(100vh - 72px);
max-height: calc(100vh - 72px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--zk-white);
border-right: 1px solid var(--zk-line);
padding: 20px 14px 32px;
border-right: 1px solid var(--zk-line-soft);
padding: var(--sp-6) var(--sp-4) var(--sp-8);
display: flex;
flex-direction: column;
}
.shell__navlabel {
margin: 0 0 10px;
padding: 0 10px;
margin: 0 0 var(--sp-3);
padding: 0 var(--sp-3);
font-size: var(--fs-3xs);
font-weight: 500;
letter-spacing: 0.12em;
font-weight: var(--fw-semi);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--zk-grey);
}
.shell__group + .shell__group {
margin-top: 22px;
margin-top: var(--sp-7);
}
/* The stage list is drawn as a rail with a node per state: the sidebar should
@ -105,15 +104,15 @@
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--sp-1);
}
.shell__stages::before {
content: '';
position: absolute;
left: 17px;
top: 18px;
bottom: 18px;
left: 18px;
top: 20px;
bottom: 20px;
width: 2px;
border-radius: var(--r-pill);
background: linear-gradient(180deg, var(--zk-line) 0%, var(--zk-line-soft) 100%);
@ -124,8 +123,8 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 12px 9px 38px;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-3) 40px;
border-radius: var(--r-md);
text-decoration: none;
color: var(--zk-muted);
@ -136,7 +135,7 @@
.shell__stage::before {
content: '';
position: absolute;
left: 12px;
left: 13px;
top: 50%;
width: 12px;
height: 12px;

17
src/screens/screens.css
View File

@ -542,9 +542,9 @@
name is still there for a pointer that hovers and for a screen reader. */
.backbtn {
flex: none;
margin-top: 4px;
width: 34px;
height: 34px;
margin-top: var(--sp-1);
width: 38px;
height: 38px;
display: grid;
place-items: center;
cursor: pointer;
@ -582,7 +582,7 @@
.page__lead {
display: flex;
align-items: flex-start;
gap: 14px;
gap: var(--sp-4);
min-width: 0;
}
@ -726,7 +726,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
gap: var(--sp-2);
text-align: right;
}
@ -745,10 +745,11 @@
}
.lead__stage strong {
font-size: var(--fs-sm);
font-weight: 500;
font-size: var(--fs-md);
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
color: var(--zk-blue-dark);
padding: 6px 14px;
padding: var(--sp-2) var(--sp-5);
border-radius: var(--r-pill);
background: var(--zk-tint-blue);
border: 1px solid var(--zk-blue-light);