From f50316506702ab44aadef6b1947d38d2eeef3ffb Mon Sep 17 00:00:00 2001 From: Aaron Lisman Date: Mon, 19 Oct 2026 14:53:06 +0000 Subject: [PATCH] View toolbars: each labelled section a tinted box, its label in ink MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A view's toolbar sections (DATA, MODEL, VIEW, …) were hard to tell apart: the section label was small grey uppercase text much like the field labels beside it ("genes", "penalty"), the divider between sections a faint 1px rule, and a section that wrapped to a new line lost its divider altogether. In a toolbar organised into labelled sections (`.viewtb` with a `.tbz` holding a `.tbl`), every section holding more than a lone control is now a box tinted --code-bg with a --line border, and the section label is semibold --ink. A lone control (the oncoprint's "…") stays plain, with no divider beside the boxes. The column gap and box padding are tightened so a boxed toolbar is no wider than the old one: the plot toolbar that fit on one line still does. Toolbars with no section labels — a table's pager, the patient navigator, the timeline's track controls — have no sections to tell apart and keep their plain dividers. `.tbl` elsewhere (the Cox view's covariate rows, axis labels inside a section) is unchanged. CSS only. Verified with npm run visual against a baseline recorded from master on this folder's dev server (156 shots, light and dark): 61 differ, each accounted for — 51 are the toolbar band plus an 8px shift below it (checked row by row: every other row matches the baseline at a shift of 0/8/16/24px), the plot views' two-line toolbars likewise, example 49 is scatter-render noise inside its figure, and campaign-index and lab-examples are environment noise (a database error's wording; 877 anti-aliasing pixels on a 12,000px page with no toolbar). Light and dark crops of the risk model, oncoprint, genome, enrichment and plot toolbars read before and after. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01UCpBeF9VMrjXyddFKUfiSX --- app/globals.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/globals.css b/app/globals.css index 467d70f..ef37af5 100644 --- a/app/globals.css +++ b/app/globals.css @@ -389,10 +389,22 @@ main.analysis-main { max-width: min(132rem, 100%); } .viewtb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); } .tbz { display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; min-width: 0; } .tbz + .tbz { border-left: 1px solid var(--line); padding-left: var(--s3); } +/* a toolbar organised into labelled sections reads as units: each section holding more than a lone + control is a tinted box, its label in ink, so a section label is never mistaken for the field labels + beside it and a section that wraps to a new line keeps its edge. A toolbar with no section labels (a + table's pager, a patient navigator) has no sections to tell apart and keeps its plain dividers. */ +.viewtb:has(> .tbz > .tbl) { column-gap: var(--s2); } +.viewtb:has(> .tbz > .tbl) > .tbz:has(> :nth-child(2)) { + background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-md); + padding: 3px 6px; +} .tbl { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); cursor: help; user-select: none; } +/* beside the boxes, a section that is a lone control (a menu) needs no divider of its own */ +.viewtb:has(> .tbz > .tbl) > .tbz + .tbz:not(:has(> :nth-child(2))) { border-left: 0; padding-left: 0; } +.viewtb > .tbz > .tbl { letter-spacing: 0.08em; font-weight: 600; color: var(--ink); } /* one height for everything in the strip, so the row has a single baseline */ .viewtb select, .viewtb .zoomctl, .viewtb .chk { height: var(--ctl-h); font-size: var(--t-md);