/* ═══════════════════════════════════════════════════════════════════════════ * ui.css - the portal's shared UI primitives: one pill, one checkbox, one tooltip, all built from * whole device pixels. Loaded BEFORE app.css on every portal page (index.html, invite.html); ui.js * (before app.js) supplies --dpr and runs the tooltips. Fix or restyle a primitive HERE and it changes * everywhere; app.css (later, so it wins) only adds what is specific to one page. * * PILL .ui-pill (+ .is-active / .is-on-hold / .is-completed / .is-closed / .is-rejected / .is-received) * Every pill, chip and badge in the portal shares ONE geometry. The older class names in the * list below (.contact-stage-pill, .trx-flag, .stage-select, ...) are members of it, so they * need no markup change and declare no height, padding or line-height of their own - only * their colours, font and, when not the standard 22px pill, --pill-h (total height) and * --pill-px (room at each side, border included). A new pill: use .ui-pill. * BUTTON every .btn (all variants and sizes) and every avatar (.avatar, .contact-avatar, ...): the label / the * initials are centred to within half a device pixel at any scaling; nothing to add per page. * CHECKBOX every input[type="checkbox"]: nothing to add. * TOOLTIP every title attribute: nothing to add (ui.js draws it as .ui-tip: the white surface of the page with * the blue border and halo of a selected field - not inverted). * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Device-pixel unit ── --dpr is window.devicePixelRatio (ui.js sets it at load and on resize); --dp is exactly ONE physical pixel, in CSS px. A length written N * var(--dp), or rounded to a multiple of it with round(nearest, , var(--dp)), is a whole number of device pixels at any display scaling or browser zoom (114%, 125%, 150% ...). Pills and checkboxes are built from such lengths, so the text or tick inside a box keeps the same whole-pixel spot in every row; sizes given in plain CSS px land on fractions of a pixel at those scalings, and the label and the tick then rode one to two pixels high or low, differently from row to row. The 1.00005 keeps the product a hair above N (0.005%: under 1/64 px even at 32 device pixels) so the browser's 1/64-pixel rounding lands on exactly N, not on N - 1/64. */ --dpr: 1; --dp: calc(1.00005px / var(--dpr)); --pill-radius: 7px; /* rounded rectangles, as in the status indicators the user picked (2026-10-17); was a 999px capsule */ /* ── Status palette (user 2026-10-18, second pass) ── One colour per MEANING, the same on every page: the seven of the reference picture (failed red, expired slate, submitted purple, in review orange, success green, pending amber, in progress blue) and six more so the tax-return stages stop sharing (sky = intake, indigo = ready to start, teal = mailed, olive = delivered, fuchsia = signature, pink = on hold). Each tone has its colour (--t-x: the fill and the icon), its -ink (the text on a light tint) and, where the fill is light, its own text colour on the fill (--t-x-on). Pending amber is lighter than before ("a tad bit lighter so it's more distinguishable from the red"), so it carries dark text on the fill (white on it would fall under 4.5:1). */ --t-red: #d92d20; --t-red-ink: #b42318; --t-slate: #5f6b7a; --t-slate-ink: #475467; --t-purple: #6941c6; --t-purple-ink: #53389e; --t-orange: #c4320a; --t-orange-ink: #93370d; --t-green: #067647; --t-green-ink: #05603a; --t-amber: #f79009; --t-amber-ink: #8a4b04; --t-amber-on: #3d2002; --t-amber-mark: #dc6803; --t-blue: #0067d1; --t-blue-ink: #004ea2; --t-sky: #026aa2; --t-sky-ink: #065986; --t-indigo: #4338ca; --t-indigo-ink: #3730a3; --t-teal: #0f766e; --t-teal-ink: #115e59; --t-olive: #4d7c0f; --t-olive-ink: #3f6212; --t-fuchsia: #9f1ab1; --t-fuchsia-ink: #821890; --t-pink: #c11574; --t-pink-ink: #9e165f; /* The older names, kept for the few rules that read a colour outside a pill (a notice bar, a count). */ --pill-active-bg: var(--t-blue); --pill-active-border: var(--t-blue); --pill-active-fg: #ffffff; --pill-onhold-bg: var(--t-amber); --pill-onhold-border: var(--t-amber); --pill-onhold-fg: var(--t-amber-on); --pill-completed-bg: var(--t-green); --pill-completed-border: var(--t-green); --pill-completed-fg: #ffffff; --pill-closed-bg: var(--t-slate); --pill-closed-border: var(--t-slate); --pill-closed-fg: #ffffff; --pill-rejected-bg: var(--t-red); --pill-rejected-border: var(--t-red); --pill-rejected-fg: #ffffff; --pill-received-bg: var(--t-purple); --pill-received-border: var(--t-purple); --pill-received-fg: #ffffff; --pill-unpushed-bg: var(--t-orange); --pill-unpushed-border: var(--t-orange); --pill-unpushed-fg: #ffffff; --pill-neutral-bg: var(--t-slate); --pill-neutral-fg: #ffffff; --pill-info-bg: var(--t-blue); --pill-info-fg: #ffffff; --pill-outline-border: #d0d5dd; /* The light-blue ring of a selected field (.input:focus, the tag box, the editors ...), of the tooltip and the border of an unchecked checkbox. One colour: change it here. */ --blue-halo: #a2d7ff; /* The status icons of the filled pills (a mask: drawn in the pill's text colour). The -white set is for a pill shows it * on its enhanced trigger (a button, .ui-select-trigger.stage-select). */ .ui-pill::before, .contact-stage-pill::before, .status-pill::before, .trx-flag::before, .docs-shared-pill::before, .contact-badge::before, .ui-select-trigger.stage-select::before { content: ''; display: var(--pill-ico-display, none); flex: none; width: 1.1em; height: 1.1em; margin-right: 0.35em; margin-left: -0.15em; background: var(--pill-ic); -webkit-mask: var(--pill-ico) center / contain no-repeat; mask: var(--pill-ico) center / contain no-repeat; } /* No state (a count, a plain pill): --pill-ico-display stays unset, so no icon and no room kept for one. */ /* ── Text centred in a box: buttons and avatars ────────────────────────────────────────────────────────── * Why: at 114-150% display scaling a label in a fixed-height button and the initials in a fixed-size avatar sat one to * two device pixels HIGH, by a different amount from row to row (measured on screenshots at 114%: buttons 1.0-1.5 px, * avatars 1.0-2.0 px, with up to 1 px of spread between rows). The browser rounds the font's ascent and descent to * whole device pixels, FLOORS the half-leading of a line box taller than the text, and snaps the box and its text * separately. * How, without touching a box's nominal size: (1) the box is an EVEN number of device pixels tall (--ev-N: N CSS px * rounded to an even count), (2) its line box is an EVEN number of pixels, so centring the line box leaves a whole * number of pixels above and below it, and (3) the text is moved by the whole number of pixels its capital letters * are still off centre (--ctr-k), worked out from Inter's own metrics the way the browser rounds them: * --ctr-a / --ctr-d ascent / descent as the browser rounds them (0.96875em / 0.24121em, to a device pixel) * --ctr-e where the capitals' centre lands against the box centre before the nudge: half the gap between * ascent and descent, less half a pixel when the line box is an odd number of pixels taller than * the text (the floored half-leading), less half the cap height (0.72754em / 2) * --ctr-k the nudge, whole pixels (+ = down): padding-top of 2k moves centred content down k, padding-bottom * of 2k moves it up k. Verified on screenshots at 100 / 114 / 125 / 150 / 175%: the capitals sit * within half a device pixel of centre, and identically in every row. * The mod() term adds half a pixel before it takes the remainder, so the exact multiples of a device pixel that float * arithmetic nudges below themselves never read as "odd". Icons inside a button are moved back by the same nudge * so they stay geometrically centred. The vertical padding is !important on purpose: a page rule's padding shorthand * must not undo the nudge (a button's height is fixed, so its vertical padding means nothing else). */ :root { /* N CSS px as an EVEN number of device pixels (N itself without round()). Sizes of boxes that centre text. */ --ev-24: 24px; --ev-28: 28px; --ev-30: 30px; --ev-32: 32px; --ev-34: 34px; --ev-36: 36px; --ev-38: 38px; --ev-40: 40px; --ev-48: 48px; --ev-96: 96px; } @supports (width: round(nearest, 1px, 1px)) and (width: mod(3px, 2px)) { :root { --ev-24: round(nearest, 24px, calc(2 * var(--dp))); --ev-28: round(nearest, 28px, calc(2 * var(--dp))); --ev-30: round(nearest, 30px, calc(2 * var(--dp))); --ev-32: round(nearest, 32px, calc(2 * var(--dp))); --ev-34: round(nearest, 34px, calc(2 * var(--dp))); --ev-36: round(nearest, 36px, calc(2 * var(--dp))); --ev-38: round(nearest, 38px, calc(2 * var(--dp))); --ev-40: round(nearest, 40px, calc(2 * var(--dp))); --ev-48: round(nearest, 48px, calc(2 * var(--dp))); --ev-96: round(nearest, 96px, calc(2 * var(--dp))); } .btn, .avatar, .contact-avatar, .matter-contact-avatar, .profile-avatar-stack { --ctr-a: round(nearest, 0.96875em, var(--dp)); --ctr-d: round(nearest, 0.24121em, var(--dp)); --ctr-e: calc((var(--ctr-a) - var(--ctr-d)) / 2 - mod(calc(var(--ctr-a) + var(--ctr-d) + 0.5 * var(--dp)), calc(2 * var(--dp))) / 2 + 0.25 * var(--dp) - 0.36377em); --ctr-k: round(nearest, calc(-1 * var(--ctr-e)), var(--dp)); line-height: round(up, 1.25em, calc(2 * var(--dp))); padding-top: max(0px, calc(2 * var(--ctr-k))); padding-bottom: max(0px, calc(-2 * var(--ctr-k))); } .btn { padding-top: max(0px, calc(2 * var(--ctr-k))) !important; padding-bottom: max(0px, calc(-2 * var(--ctr-k))) !important; } .btn > .icon, .btn > svg { margin-top: max(0px, calc(-2 * var(--ctr-k))); margin-bottom: max(0px, calc(2 * var(--ctr-k))); } } /* The heights of every standard control (buttons, search boxes, selects): even device pixels (--ev-38, --ev-28). */ :root { --control-h-sm: var(--ev-28); /* small buttons (.btn-sm) */ --control-h: var(--ev-38); /* all standard buttons (toolbar, footer, base) */ } /* ── Checkbox ───────────────────────────────────────────────────────────────── * Clio-style custom checkbox. Three visible states: * - unchecked - white box, light-blue (--blue-halo) rounded border * - checked + focus - #0067d1 fill, white check, soft #0067d1 halo * - checked + blur - #0067d1 fill, white check, no halo * * `appearance: none` strips the native control so we can draw the box + checkmark ourselves. The check * is a CSS mask of /img/icons/check-bold.svg (Phosphor) painted in white over the blue ::after fill. * The :focus halo uses an outline (renders OUTSIDE the box even when overflow:hidden is on an ancestor) * instead of box-shadow so it survives table-cell clipping. * * The SIZE is !important on purpose. This sheet loads BEFORE app.css, so a page rule written for "its input" * (`.x input { width: auto }`, 14px, 100%) wins at equal specificity: when this rule moved here from app.css * (2026-09-30) the tick box of every confirm dialog (Create shipment, Buy postage, Start merge), of the * questionnaire page picker and of a contact's Yes / No custom field collapsed to a 2px sliver, because an * appearance:none box has no width of its own. A checkbox is ONE size; nothing per page may change it * (device-pixel-ui.test.mjs fails on a page rule that tries). */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: var(--cb) !important; height: var(--cb) !important; margin: 0; padding: 0; border: 1.5px solid var(--blue-halo); border-radius: 4px; background: #fff; cursor: pointer; position: relative; flex-shrink: 0; vertical-align: middle; transition: background-color 80ms, border-color 80ms, box-shadow 80ms; } /* Higher-specificity overrides for the same selector pattern used by the data-table cell rules - * keeps focus / hover / checked styling winning even where .data-table tbody td input[type="checkbox"] * is already targeted. */ input[type="checkbox"]:hover, .data-table tbody td input[type="checkbox"]:hover { border-color: var(--blue); } input[type="checkbox"]:checked, .data-table tbody td input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); } input[type="checkbox"]:checked::after { content: ''; position: absolute; inset: 0; background-color: #fff; /* check-bold.svg at 90% of the box, lifted --cb-lift whole device pixels above centre. */ -webkit-mask: url('/img/icons/check-bold.svg') 50% calc(50% - var(--cb-lift)) / 90% no-repeat; mask: url('/img/icons/check-bold.svg') 50% calc(50% - var(--cb-lift)) / 90% no-repeat; } /* Indeterminate (some-but-not-all rows selected - e.g. the Documents "select all" header when a * subset is checked). appearance:none strips the native dash, so draw a white horizontal bar over the * blue fill, mirroring the :checked tick. Matches Clio's tri-state header checkbox. The bar is whole * device pixels and centred with auto margins (a transform would land it on half a pixel). */ input[type="checkbox"]:indeterminate, .data-table tbody td input[type="checkbox"]:indeterminate { background: var(--blue); border-color: var(--blue); } input[type="checkbox"]:indeterminate::after { content: ''; position: absolute; inset: 0; margin: auto; width: round(nearest, 8px, var(--dp)); height: round(nearest, 2px, var(--dp)); background: #fff; border-radius: 1px; } /* Busy state: used while a POA write is in flight. Blocks further clicks WITHOUT calling * checkboxEl.disabled = true, which would blur the input and kill the focus halo. */ input[type="checkbox"].cb-busy { pointer-events: none; } /* Focus halo. Covers both `:focus` (any focus, including mouse-click) and `:focus-visible` * (keyboard-only focus) - older browsers and Safari are inconsistent about which one fires for * checkbox clicks, and we want the halo visible in both cases. Solid #0067d1 with a 2 px gap so the * halo reads as a discrete ring around the box. */ input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible, .data-table tbody td input[type="checkbox"]:focus, .data-table tbody td input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ── Tooltip ────────────────────────────────────────────────────────────────── * Every element's title, drawn under the element (above it when there is no room) by ui.js. It is dressed * like a selected field and NOT inverted (user 2026-09-30: "use the blue halo ... don't make it inverted"): * the page's white surface and dark text, the blue border and the light-blue halo of .input:focus. * pointer-events: none so it never gets in the way of a click. */ .ui-tip { position: fixed; left: 0; top: 0; z-index: 100000; max-width: 320px; padding: 6px 10px; border: 1px solid var(--blue, #0067d1); border-radius: var(--r, 6px); background: var(--surface, #fff); color: var(--text-primary, #1e2535); box-shadow: 0 0 0 2px var(--blue-halo); font-size: var(--fs-sm, 12px); line-height: 16px; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 80ms ease-out; } .ui-tip.is-on { visibility: visible; opacity: 1; } @media (prefers-reduced-motion: reduce) { .ui-tip { transition: none; } } /* ── Spinner ────────────────────────────────────────────────────────────────── * Every loading mark is the Phosphor spinner (regular), turning; it replaced the bordered circle notches (user 2026-10-18). * .ui-spinner draws it in the text colour; size it with width / height. Still under prefers-reduced-motion. */ .ui-spinner { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--ico-spin) center / contain no-repeat; mask: var(--ico-spin) center / contain no-repeat; animation: ui-spin 1s steps(8) infinite; } @keyframes ui-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ui-spinner { animation: none; } }