Scale stage 1: everything the UI sizes with is now rem
Groundwork for the continuous interface scale (a root font-size lever): every size the UI derives from must be root-relative, or it freezes while the rest grows. Gate for this commit: at the default 16px root the app renders pixel-identical to before — every conversion is exact (11px = 0.6875rem …). - The 8 panel-chrome tokens in styles.css: px -> rem, and the data-text compact/large tiers are DELETED — a continuous scale replaces discrete tiers. Same for --w7-fs (12px -> 0.75rem) and the win7 --radius (5px -> 0.3125rem, still landing rounded-md exactly on --w7-el-bdr's 3px). --radius-sm/md subtrahends: px -> rem, or corners would sharpen as the UI grew. - All 93 text-[11px]/text-[10px] arbitraries -> rem equivalents, plus the two inline padding:24px empty-state cells in the 7like file panel. - 7like.css gains a scale bridge in skinfix: 7.css is 370 px values with zero rem, and --w7-font reaches only 15 rules' TYPOGRAPHY — under a root lever win7 text would grow inside boxes frozen at 23px/14px/15px. The bridge re-expresses 7.css's size vars and its hardcoded box metrics (buttons via .w7-btn only, inputs, table rows/headers, title-bar controls, menu items, tabs, the 10pt check glyph) in rem at identical scale-1 pixels. 1px hairlines and focus rects stay px deliberately — crisp at any scale, and the tr border exists precisely to stop selection shifting rows. - Two skinfix traps found while writing it, one by reasoning and one by pixels: (a) NO blanket `.win7 button` restatement — skinfix outranks the skin-layer neutralizer that strips 7.css's 75x23 metrics off the ~84 icon buttons, so a blanket rule would re-inflate them all; (b) restating a base rule in skinfix also outranks 7.css's own VARIANTS of it by layer — the title-bar rule silently shrank the close button from 48px to 29px until the harness pixel diff caught it, and the active tab's padding-bottom needed the same treatment. Both variants are restated alongside their base rules. - TS px constants that mirror rem CSS are the latent-bug half of this work: both context menus' flip/clamp math converts through a new @core/metrics remPx() helper reading the LIVE root font-size (the shadlike menu's MENU_W=224 diverged from its w-56 box the moment scale != 1; the 7like menu's [style.width.px] pinned the box at 200px while text grew — it now binds width in rem, so math and box cannot disagree). The editors' cachedCharWidth is now keyed on the computed font string, self-invalidating under any font change, and both || px fallbacks derive from the element's font size instead of assuming a 16px root. Verified: tsc + build clean; modern and win7 live captures and the harness all diff to zero against pre-change baselines in their opaque regions (the harness to exactly zero end to end; modern's only delta is the native GTK titlebar focus state; win7's is the translucent Aero corner over the desktop). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+21
-33
@@ -181,45 +181,33 @@
|
||||
--color-icon-media: var(--icon-media);
|
||||
--color-icon-archive: var(--icon-archive);
|
||||
--color-icon-code: var(--icon-code);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
/* rem subtrahends (4px/2px at the 16px root), NOT px: --radius is rem, and a
|
||||
mixed-unit calc would stop the derived radii from following the interface
|
||||
scale — corners would sharpen as the UI grew. */
|
||||
--radius-sm: calc(var(--radius) - 0.25rem);
|
||||
--radius-md: calc(var(--radius) - 0.125rem);
|
||||
--radius-lg: var(--radius);
|
||||
}
|
||||
|
||||
/* Interface-size setting (data-text set by SettingsService). Scales the whole
|
||||
panel chrome: file list, path bar, action buttons, and the source picker
|
||||
with its dropdown. The tab bar (including the options button) stays fixed.
|
||||
Default-tier values match the old hardcoded classes exactly. */
|
||||
/* Panel-chrome metrics: file list, path bar, action buttons, source picker.
|
||||
ALL REM, deliberately — the interface scale (settings.uiScale) works by
|
||||
setting the root font-size, so every rem value in the app scales from that
|
||||
one lever. A px value here would freeze while everything around it grew,
|
||||
which is exactly what happened to the win7 boxes before stage 1c. There is
|
||||
only one tier now: the old data-text compact/large tiers are gone, replaced
|
||||
by the continuous scale. Values are the old default tier verbatim
|
||||
(13px -> 0.8125rem etc. at the 16px root), so scale 1.0 is pixel-identical
|
||||
to the pre-scale app. */
|
||||
:root {
|
||||
--list-font: 13px;
|
||||
--list-meta-font: 12px;
|
||||
--path-font: 12px;
|
||||
--row-h: 28px;
|
||||
--path-ctl-h: 28px;
|
||||
--action-h: 24px;
|
||||
--action-font: 11px;
|
||||
--list-font: 0.8125rem;
|
||||
--list-meta-font: 0.75rem;
|
||||
--path-font: 0.75rem;
|
||||
--row-h: 1.75rem;
|
||||
--path-ctl-h: 1.75rem;
|
||||
--action-h: 1.5rem;
|
||||
--action-font: 0.6875rem;
|
||||
--action-icon: 0.9rem;
|
||||
}
|
||||
:root[data-text='compact'] {
|
||||
--list-font: 12px;
|
||||
--list-meta-font: 11px;
|
||||
--path-font: 11px;
|
||||
--row-h: 24px;
|
||||
--path-ctl-h: 24px;
|
||||
--action-h: 22px;
|
||||
--action-font: 10px;
|
||||
--action-icon: 0.85rem;
|
||||
}
|
||||
:root[data-text='large'] {
|
||||
--list-font: 14px;
|
||||
--list-meta-font: 13px;
|
||||
--path-font: 13px;
|
||||
--row-h: 32px;
|
||||
--path-ctl-h: 32px;
|
||||
--action-h: 28px;
|
||||
--action-font: 12px;
|
||||
--action-icon: 1.05rem;
|
||||
}
|
||||
|
||||
/* Soft entrance for the panel busy states (connecting placeholder, load overlay). */
|
||||
@keyframes panel-fade-in {
|
||||
|
||||
Reference in New Issue
Block a user