jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0a0c7081409db2f67a8395149b54cec85a55c967
miniSCP/ui/src/styles.css
T
jgamboaandClaude 9f2a076e08 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>
2026-08-16 18:02:41 +02:00

285 lines
11 KiB
CSS
Raw Blame History

/* Layer order — declared BEFORE the imports so it wins (a @layer statement is
one of the only two rule types allowed above @import). `skin` sorts after
`utilities`, so every 7.css rule outranks every Tailwind utility on the
elements it targets; that inversion is what lets the win7 skin restyle
~1900 inline utility classes without touching the templates. `skinfix` is
above both, and uses `revert-layer` to hand individual properties back to
`utilities` where 7.css's Win7-dialog metrics are wrong for this app.
Tailwind re-declares the first four names, a no-op once ordered here.
See the "Windows 7 skin" section at the bottom of this file. */
@layer theme, base, components, utilities, skin, skinfix;
@import "tailwindcss";
/* The two skin stylesheets. Both ship in one bundle and are scoped by the
`.win7` class on <html>, exactly as when they lived in this file — only one
skin's rules can match at a time. They sit here because CSS requires every
@import to precede all other rules; layer assignment is fixed by the @layer
statement above, not by this order. */
@import "./app/skins/shadlike/shadlike.css";
@import "./app/skins/7like/7like.css";
/* shadcn-style theme tokens. Light stays the zinc family; the dark neutrals are a
warm gray family (hue ~107) anchored on #1a1a19 — see the dark blocks below.
The app follows the OS light/dark preference automatically.
Surface elevation ramp (both themes): --chrome (frame strips: tab/transfer/status
bars, window toolbars) sits BELOW --background (content panes), which sits below
--card (popovers, dialogs), which sits below --accent (hover). */
:root {
/* Native UI (scrollbars, form controls) follows the OS unless a theme is forced. */
color-scheme: light dark;
--background: oklch(1 0 0);
--chrome: oklch(0.977 0.001 286.375);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.627 0.17 149.2);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
--radius: 0.5rem;
/* file-type icon colors ("Multi" mode) — fixed category hues, muted chroma */
--icon-folder: oklch(0.58 0.13 250);
--icon-link: oklch(0.56 0.1 190);
--icon-image: oklch(0.58 0.13 295);
--icon-media: oklch(0.6 0.13 10);
--icon-archive: oklch(0.62 0.13 60);
--icon-code: oklch(0.56 0.12 155);
}
/* Dark tokens apply when the user forces dark, or follows a dark system theme.
(data-theme is set by SettingsService; absent = follow the system.) */
:root[data-theme='light'] {
color-scheme: light;
}
:root[data-theme='dark'] {
color-scheme: dark;
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.1953 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.245 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.302 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(0.302 0.003 107);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
--icon-media: oklch(0.76 0.11 10);
--icon-archive: oklch(0.77 0.11 65);
--icon-code: oklch(0.75 0.1 155);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.1953 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.245 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.302 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(0.302 0.003 107);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
--icon-media: oklch(0.76 0.11 10);
--icon-archive: oklch(0.77 0.11 65);
--icon-code: oklch(0.75 0.1 155);
}
}
/* Dark tone "darker" (data-dark-tone set by SettingsService; absent = grey "dark").
True-black AMOLED palette: --chrome collapses into --background on purpose, so
the frame/content step of the default tone disappears and every large surface is
#000 (OLED pixels actually off). Elevation survives only through --card and
--accent; --border/--input are raised to 16%/18% because on pure black those
lines are the only thing defining panes, bars and rows. Duplicated for
forced-dark and system-dark like the token blocks above — the extra attribute
outranks them. */
:root[data-theme='dark'][data-dark-tone='darker'] {
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 16%);
--input: oklch(1 0 0 / 18%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light'])[data-dark-tone='darker'] {
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 16%);
--input: oklch(1 0 0 / 18%);
}
}
@theme inline {
--color-background: var(--background);
--color-chrome: var(--chrome);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-cursor-tint: var(--cursor-tint);
--color-icon-folder: var(--icon-folder);
--color-icon-link: var(--icon-link);
--color-icon-image: var(--icon-image);
--color-icon-media: var(--icon-media);
--color-icon-archive: var(--icon-archive);
--color-icon-code: var(--icon-code);
/* 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);
}
/* 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: 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;
}
/* Soft entrance for the panel busy states (connecting placeholder, load overlay). */
@keyframes panel-fade-in {
from {
opacity: 0;
}
}
.panel-fade-in {
animation: panel-fade-in 0.18s ease-out;
}
/* Toast auto-dismiss countdown; duration set inline per toast. */
@keyframes toast-countdown {
to {
transform: scaleX(0);
}
}
.toast-countdown {
animation: toast-countdown linear forwards;
}
/* unlayered on purpose: a Tailwind group-hover utility would lose to the
unlayered animation shorthand above */
.group:hover > .toast-countdown {
animation-play-state: paused;
}
/* Accent tone (data-accent set by SettingsService; absent = graphite/zinc).
Each tone is one hue+chroma line; the formula blocks below derive --primary,
--ring and the cursor-row tint for light and both dark states. The dark
formula blocks (0,3,0) outrank the base dark token blocks and the light
formula block (0,2,0) in every dark state; graphite matches no [data-accent]
selector and keeps the zinc tokens untouched. */
:root {
/* graphite: cursor row identical to the old bg-accent highlight */
--cursor-tint: var(--accent);
}
:root[data-accent='blue'] { --tone-h: 255; --tone-c: 0.17; }
:root[data-accent='indigo'] { --tone-h: 277; --tone-c: 0.19; }
:root[data-accent='purple'] { --tone-h: 305; --tone-c: 0.17; }
:root[data-accent='rose'] { --tone-h: 8; --tone-c: 0.17; }
/* darkest orange that still reads orange; white button text lands ≈ 4.3:1 */
:root[data-accent='orange'] { --tone-h: 50; --tone-c: 0.18; --tone-l: 0.58; }
:root[data-accent='green'] { --tone-h: 150; --tone-c: 0.15; }
:root[data-accent='teal'] { --tone-h: 185; --tone-c: 0.12; }
:root[data-accent] {
--primary: oklch(var(--tone-l, 0.55) var(--tone-c) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 8%, transparent);
}
:root[data-theme='dark'][data-accent] {
--primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
}
@media (prefers-color-scheme: dark) {
:root[data-accent]:not([data-theme='light']) {
--primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
}
}
html,
body {
height: 100%;
overflow: hidden;
background: var(--background);
color: var(--foreground);
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
user-select: none;
cursor: default;
}
Reference in New Issue View Git Blame Copy Permalink