/* Minimal VCL theme — the shared visual language for the SSR render and (later) the live runtime. Ported from the reference classic.css, trimmed to the walking-skeleton component set. */ /* v376 (port tsw2 v305, css-import.txt M3/S4): THE THEME TOKEN VOCABULARY. Component styles.css consume these via var(--tp-x, ) — with NO theme every fallback IS the pre-v376 value, so the classic look is pixel-identical (R6). A token theme (themes\dark\dark.css) redefines them in one block under its .tp-theme- body scope; every tokenized comp then flips coherently. Unlike tsw2 W never adopted a :root --tp-grad-* palette block or the v034 form shadow — so W's tokens ALWAYS carry a literal fallback (no :root block is needed here). The vocabulary (fallbacks vary per use — one token, many shades): --tp-page-bg page background --tp-form-bg form-host default surface --tp-fg text --tp-fg-muted secondary/disabled text --tp-surface white surfaces (inputs, menus) --tp-surface-2 grey chrome (panels, headers) --tp-border control/frame borders --tp-input-bg input fill --tp-input-border input borders --tp-btn-bg / --tp-btn-fg / --tp-btn-ring button base fill / text / 1px ring --tp-grad-button / --tp-grad-button-hover / --tp-grad-button-active button base+interaction gradients --tp-accent selection/links/focus rings --tp-hover hover wash --tp-tint tinted panels (grid detail/group/aggregate strips) --tp-grid-line grid separator lines --tp-grid-row-alt alternate row banding --tp-accent-fg / --tp-accent-soft text on accent / soft highlight Plus the AUTO-NAMED per-class default-surface tokens: a fill surface's UNSET backgroundColor (and W's constant border colour) is emitted inline as var(--tp-def--bg / -border-color, ) by BevelCssFromDfm — themes opt classes in (see themes\dark\dark.css); an instance-SET Color emits the bare literal and always wins. Inline style is the one place normal theme CSS can't reach, so these are the door. */ .vcl-form-host { box-sizing: border-box; } /* Component looks now live in their packages' styles.css (served via /components.css): .vcl-button -> components/Standard/TButton, .vcl-label -> TLabel, .vcl-edit -> TEdit. */ .vcl-unknown { border: 1px dashed #c00; color: #c00; font: 10px monospace; box-sizing: border-box; } /* v447 port-fix, from tsw2 v374 (missed by the W v444 port, which brought only the 3 Pascal units): cross-document view transitions - same-origin navigations (menu clicks) cross-fade instead of hard-swapping. Chromium 126+ honors it; other engines ignore the at-rule (plain navigation, no breakage). classic.css is linked FIRST in every page RenderFormPage emits (preview + export), so every document opts in - the rule is per-document, both the old and the new page need it for the transition to run. */ @view-transition { navigation: auto; } /* v472-version-exposure: the site-wide page footer -- a full-width block after the form, in body flow. Ported verbatim from tpwebide/styles/classic.css (CLAUDE.md rule 2); W's trimmed classic.css never had it, which is consistent with W having had no footer emitter at all until now. Base look only; the user's footer HTML and their own CSS override it freely. */ .vcl-page-footer { width: 100%; box-sizing: border-box; padding: 12px 16px; border-top: 1px solid #d0d4da; background: #f5f6f8; color: #555; font: 12px/1.5 Tahoma, sans-serif; }