/* VectaTones reskin — Stage 1 shell. Tokens pulled from Figma "All Modules". */ @font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; src: url("../fonts/SourceSans3-Regular.otf.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; src: url("../fonts/SourceSans3-Semibold.otf.woff2") format("woff2"); } :root { --panel: #0f0e0e; /* panel bg = Dark100 (Figma) */ --tile: #1a1818; --dark-100: #0f0e0e; /* selected tile / field borders */ --dark-200: #1f1f1f; /* module container, control boxes */ --dark-300: #373737; /* checkbox fill */ --dark-400: #878787; /* secondary / info */ --dark-900: #b5b5b5; /* utility-button label */ --dark-1000: #ccc9c9; /* primary text */ --gold: #f8ce62; /* resting activate, selected */ --gold-dim: rgba(248,206,98,.14); --green: #cbd87e; /* green-500 — active (Figma states frame) */ --red: #ec5951; /* red-500 — error (Figma states frame) */ --red-dim: rgba(236,89,81,.14); --sm: 18px; /* module title / activate */ --smm: 16px; --smmm: 14.22px; /* stepper field number */ --smmmm: 12.64px; /* Header height. `* { box-sizing:border-box }` means the 1px bottom border is INSIDE this, so the header occupies exactly this many px — overlays must start here, not here+1. Single source of truth so they can't drift apart. */ --header-h: 56px; --s8: 8px; --s: 16px; --s4: 20px; /* Corner radius scale — the ONLY place radii are defined. Bump these to restyle globally; every rounded surface reads from one of them. --r-sm buttons, tiles, pills, fields, menus (was 6) --r-md module containers, number field (was 8) --r-lg anything larger (was 12) Deliberately excluded: the 2px slider track, the 3px toggle knob and the 4px inner pill — Figma specifies those against their own small geometry, and the 6/8/larger rule doesn't reach them. */ --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r: var(--r-sm); /* legacy alias */ } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--panel); } body { font-family: "Source Sans 3", -apple-system, sans-serif; color: var(--dark-1000); font-size: var(--smm); -webkit-font-smoothing: antialiased; } /* header + bar are position:fixed, so reserve their space. padding-bottom is set by ui.js from the bar's live height (it changes with content). */ .vt { min-width: 390px; padding-top: var(--header-h); padding-bottom: 140px; } .native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } [hidden] { display: none !important; } /* header */ /* FIXED, not sticky. A takeover sets html/body{overflow:hidden}, which removes the scrollport — Chromium then un-sticks sticky elements and drops them back to their scrolled-away natural position. That was the phantom gap at the top of the takeover (and the matching one at the bottom, from the sticky bar). Fixed is immune. Stacking: header 60 > help 55 > bar 50 > presets 45. */ .vt-header { position:fixed; top:0; left:0; right:0; z-index:60; background:var(--panel); display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 var(--s); border-bottom:1px solid var(--dark-200); } .brand { display:flex; align-items:flex-end; gap:6px; } .logo-img { width:133px; height:18px; display:block; } /* 1:1 with the asset — never scale a dot pattern */ /* logotype baseline sits ~4px above the SVG bottom edge; lift the version to meet it */ .brand-ver { color:var(--dark-400); font-size:12.64px; line-height:1; transform:translateY(-4px); } /* ---------- icon system (inline SVG → crisp on Retina/CEP, color via currentColor) ---------- SVGs are injected by ui.js from the VT_ICONS registry; paths use fill/stroke=currentColor, so each icon inherits its container's `color` (state color) and renders as a true vector. CSS mask was blurry: CEP's Chromium rasterises masks at 1x then upscales. */ /* THE ICON BLUR — root cause, measured not guessed. These boxes had no intrinsic size: `.tico` is inline-flex with the svg at height:100% of an auto-height parent, so the box resolved to the line box — 18 x 15.406px. An 18x18 viewBox letterboxed into 15.406px is a fractional scale, so EVERY path landed on sub-pixel coordinates. That is the blur, and it is why it survived three rounds of position-snapping: the position was only half the problem, and the box size was never integral to begin with. `flex:none` + an integer box means the viewBox maps 1:1 and the rasteriser has whole device pixels to work with. */ .tico, .ico, .sic { display:inline-flex; align-items:center; justify-content:center; line-height:0; flex:none; width:18px; height:18px; } .tico svg, .ico svg, .sic svg { width:100%; height:100%; display:block; } /* NOTE: `shape-rendering:geometricPrecision` was removed here. Tim's 2x captures show CEP drawing these circles as visible POLYGONS while the identical SVG at the identical size and DPR renders as smooth curves in stock Chromium — i.e. the curve is being flattened to line segments at a fixed, low tolerance. `geometricPrecision` is exactly the hint that can pin Skia to a fixed tessellation instead of letting it pick a tolerance from the device transform, and I added it. `auto` (the default) lets it adapt. See the icon-render diagnostic in ui.js — shift-click the version badge to cycle modes if this alone doesn't do it. */ /* Icons are snapped to the device pixel grid by ui.js (snapIcons). Tiles are flex:1 1 0, so at most panel widths they resolve to FRACTIONAL widths — the centred icon then lands on a half device pixel (measured: x=67.75 at DPR 2) and every curve's antialiasing smears across an extra pixel column. Straight edges survive that; curves don't. This is why the same icons looked crisp at one panel width and blurry at another. No `will-change` here on purpose: the nudge happens on resize, not per-frame, so promoting ~25 icons to permanent compositing layers would cost memory for nothing — and a composited layer is itself a way to reintroduce blur. A plain static translate lets the renderer paint straight to the device grid. */ /* activate play/pause: both injected, toggled by state (no mask swap) */ .act-play, .act-pause { display:inline-flex; width:100%; height:100%; } .act-play svg, .act-pause svg { width:100%; height:100%; display:block; } .act-pause { display:none; } .activate.is-on .act-play { display:none; } .activate.is-on .act-pause { display:inline-flex; } /* utility buttons */ .btn-util { font-family:inherit; font-size:11px; color:var(--dark-1000); background:var(--tile); border:1px solid var(--dark-200); border-radius:var(--r); padding:8px 12px; cursor:pointer; transition:background .3s ease, border-color .3s ease, color .3s ease; } .btn-util:hover { background:var(--dark-200); } .btn-util.primary { background:var(--gold); color:#1a1200; border-color:var(--gold); font-weight:600; } .btn-util.wide { width:100%; } .help { background:var(--dark-200); border:none; border-radius:var(--r-sm); padding:8px var(--s); font-size:13px; font-weight:600; color:var(--dark-900); letter-spacing:.7px; text-transform:uppercase; transition:background .3s ease, color .3s ease; } .help:hover { background:var(--gold); color:var(--dark-100); } /* module RESET = "button utility" box (Dark200, rounded-12, 13px uppercase) */ .btn-reset { font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--dark-900); background:var(--dark-200); border:none; border-radius:var(--r-sm); cursor:pointer; padding:8px var(--s); transition:background .3s ease, color .3s ease; } .btn-reset:hover { background:var(--gold); color:var(--dark-100); } .btn-reset.gold { color:var(--gold); background:transparent; padding:6px 8px; } /* curve sub-reset stays text */ .btn-reset.gold:hover { background:transparent; } /* activate */ .activate-wrap { padding:16px var(--s); border-bottom:1px solid var(--dark-200); } .live-hint { display:none; } /* no helper text under Activate (per Figma / Rev 2) */ .activate { width:100%; display:flex; align-items:center; justify-content:space-between; padding:24px 32px; border-radius:999px; font-family:inherit; font-size:18px; font-weight:600; letter-spacing:-0.1px; line-height:1.35; cursor:pointer; transition:background .3s ease, border-color .3s ease, color .3s ease; } .activate .ico { width:20px; height:20px; } /* all activate states = Dark100 bg, color lives in the border + text (Figma states frame) */ .activate.is-off { background:var(--dark-100); border:2px solid var(--gold); color:var(--gold); } .activate.is-off:hover { background:var(--gold-dim); } .activate.is-on { background:var(--dark-100); border:2px solid var(--green); color:var(--green); } .activate.is-err { background:var(--dark-100); border:2px solid var(--red); color:var(--red); animation:shake .4s; } .activate.is-err .ico { opacity:.35; } @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} } .live-hint { font-size:11px; color:var(--dark-400); padding:6px 2px 0; min-height:14px; } /* modules — separated by the dark gap between Dark200 containers (no divider on the Dark100 panel) */ .module { } /* header frame: 16px inset + 16px pad = title aligns to the sub-section labels (32px); 8px gap to body */ .module-head { display:flex; align-items:center; justify-content:space-between; padding:12px var(--s) 0 32px; } .module-toggle { display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--dark-1000); font-family:inherit; font-size:var(--sm); font-weight:600; letter-spacing:.1px; cursor:pointer; } /* down-caret sits in a Dark200 box */ .chev { display:inline-flex; align-items:center; justify-content:center; padding:3px 5px; border-radius:var(--r-sm); background:var(--dark-200); color:var(--dark-400); transition:background .12s; } .chev svg { width:16px; height:16px; display:block; transition:transform .18s; } /* module body = Dark200 rounded container, inset from the panel edges (per Figma screen-section) */ /* Figma: the large options section is radius 8. overflow:hidden removed — it was clipping descenders on text near the container edge. */ .module-body { margin:8px var(--s) var(--s); display:flex; flex-direction:column; gap:var(--s8); } /* closed = a drawer: even padding + top/bottom borders, caret rotated, RESET dimmed (Figma states 48:1611) */ .module.collapsed .chev svg { transform:rotate(-90deg); } .module.collapsed .module-body { display:none; } .module.collapsed .btn-reset { opacity:.5; } .module.collapsed .module-head { padding:16px 16px 16px 32px; border-top:1px solid var(--dark-200); border-bottom:1px solid var(--dark-200); } /* rows → element boxes (v0.98 structural pass). Each control ("element") in a module is its own Dark200 card — 16px padding, 1px #2c2c2c stroke, 16px radius — so its context stays legible when the user scrolls. The module body is just an 8px-gap vertical stack (see .module-body above). */ /* 4px left indent on the label/describer block so titles sit slightly in from the card edge (v0.98 — reads as intentional inset within the box model). */ .label-wrap { display:flex; flex-direction:column; gap:2px; padding-left:4px; } .lbl { font-size:var(--smm); color:var(--dark-1000); line-height:1.35; } .info { font-size:var(--smmmm); color:var(--dark-400); line-height:1.2; max-width:180px; } /* box-title label + describer (Screen Pattern, Dot Shape, Cropping): extra 8px top and left so the title/describer stand out inside the card. */ .row-tiles > .label-wrap, .tiles-head > .label-wrap { padding:8px 0 0 8px; } /* slider + helper text: 10px below the block so the sublabel has optical breathing room. */ .row-num.has-info .label-wrap { padding-bottom:10px; } .module-body > .row, .module-body > .element-group, .module-body > #cmykRows { padding:12px; background:var(--dark-200); border:1px solid #2c2c2c; border-radius:var(--r-lg); } /* Per-scenario card padding (v0.98 vertical-space pass). Base is 12px all round; these tune it per control type so the layout breathes without wasting height. */ .module-body > .row-num.has-slider { padding:12px 16px; } /* slider rows (± helper) */ .module-body > .row-num.row-boxctl { padding:12px 12px 12px 16px; } /* Mode / Dot color — control on the right */ .module-body > .row-check { padding:16px; } /* on/off toggle rows */ .module-body > .row-check.row-swatch { padding:12px 12px 12px 16px; } /* toggle + colour swatch (Undercoat) */ /* Grouped card (Cropping + its Feather/Falloff options; the CMYK ink rows) shares ONE outer card. The primary row (e.g. the Cropping tiles) sits flush; each CONTEXTUAL sub-option becomes its own #181616 filled box, 8px vertical gaps. */ .element-group { display:flex; flex-direction:column; gap:var(--s8); } .element-group > .row, #cmykRows > .row { padding:0; background:none; border:none; border-radius:0; margin:0; } /* contextual inner elements (Feather/Falloff) — #181616 fill; slider-with-helper scenario: 12 top/bottom, 16 left/right (their label-wrap adds 10px bottom below). */ .element-group > .row-sub { padding:12px 16px; background:#181616; border-radius:var(--r-lg); } /* NB: never set `display` on #cmykRows — it must keep honouring its [hidden] attribute (shown only in CMYK mode). Space the ink rows with margin instead. */ #cmykRows > .row { padding:12px 16px; background:#181616; border-radius:var(--r-lg); } #cmykRows > .row + .row { margin-top:var(--s8); } .row-group { border-bottom:none; } /* number rows — one row: [ title/info ] [ field ] [ slider ] (Figma slider redesign) */ /* Figma 58:3660 — row is items-START with pt-10 on the label wrap, so the control aligns to the LABEL LINE. Centring on the whole label+info block (the old rule) pushed the field/slider down whenever helper text was present. */ .row-num { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } /* Figma 58:3661: label wrap has pt-10 and pr-20. The 10px flex gap above supplies half of that 20, so pr is 10 here — total 20, and the stepper→slider gap is the 10px from 58:3664. Getting this wrong is what threw the label off the control line. */ .row-num .label-wrap { flex:1 1 0; min-width:0; gap:0; padding-right:10px; padding-top:0; } .row-num .label-wrap .lbl { display:flex; align-items:center; min-height:32px; } .row-num .label-wrap .info { margin-top:-4px; } /* claw back the line-box leading */ /* Every control lives in a 32px-tall band pinned to the top of the row (58:3664). The 4px slider track sits at y=14 inside that band — dead centre against the number field — which is what "centre the label to the slider" actually means. */ .row-num .stepper { display:flex; align-items:center; height:32px; flex:none; } .row-num .slider { margin-top:14px; } .row-num .mode-dd, .row-num .swatch { align-self:flex-start; } .row-num.has-slider .label-wrap { gap:2px; } /* Box-control rows (Mode, Dot color): label centres against the control, not the top of the row. The control is ~50px tall, so the 32px label band used for stepper rows left the label sitting ~9px high. */ .row-num.row-boxctl { align-items:center; } .row-num.row-boxctl .label-wrap { padding-top:0; } .row-num.row-boxctl .label-wrap .lbl { min-height:0; } .row-num.has-slider .info { max-width:none; } /* info fills the left column */ /* number field — typeable [ number … unit ] box */ .stepper { display:flex; align-items:center; flex:none; } .st-field { display:flex; align-items:center; justify-content:space-between; gap:8px; width:72px; height:32px; border:1.5px solid var(--dark-300); border-radius:var(--r-md); padding:0 10px; } .st-field input { flex:1 1 auto; min-width:0; width:auto; background:transparent; border:none; color:var(--dark-1000); font-family:inherit; font-size:var(--smmm); line-height:1.35; text-align:left; -moz-appearance:textfield; cursor:text; } .st-field input::-webkit-outer-spin-button, .st-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .st-field .unit { font-size:var(--smmm); color:var(--dark-400); flex:none; } /* slider (Figma 50:1011) — track + rounded fill div + native input (no clipping, handle shines through) */ .slider { position:relative; flex:none; width:96px; height:4px; background:var(--dark-300); border-radius:2px; } /* filled/trailing portion: solid brand yellow (a gradient was tried and reverted). */ .slider-fill { position:absolute; left:0; top:0; bottom:0; min-width:2px; background:var(--gold); border-radius:2px 0 0 2px; pointer-events:none; } .slider-input { position:absolute; left:0; right:0; top:-6px; width:100%; height:16px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; outline:none; cursor:pointer; } .slider-input::-webkit-slider-runnable-track { -webkit-appearance:none; height:16px; background:transparent; } /* rounded-square gold handle. The 3px box-shadow "ring" is painted in the CONTAINER's background colour, so it reads as a GAP between the knob and the rail. Overridden per context below (sub-boxes #181616, gold wave panel --gold). */ .slider-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; background:var(--gold); border-radius:6px; border:none; box-sizing:border-box; margin-top:0; box-shadow:0 0 0 3px var(--dark-200); cursor:grab; } /* ring matches the darker Feather/Falloff sub-box fill so the gap reads there too */ .element-group > .row-sub .slider-input::-webkit-slider-thumb { box-shadow:0 0 0 3px #181616; } /* ^ 6px is deliberate: Tim specced this instance at 6 even after the global 6->8 radius bump. Do not fold it back into --r-sm. */ .slider-input::-webkit-slider-thumb:active { cursor:grabbing; } /* double-click-to-reset acknowledgement: a short gold pulse on the fill + handle, at the app's usual .3s ease. Without it the reset is silent and reads as a missed click. */ .slider.is-reset .slider-fill { background:#fff; } .slider.is-reset .slider-input::-webkit-slider-thumb { background:#fff; } .slider .slider-fill { transition:background .3s ease; } .txt-inline { background:var(--dark-100); color:var(--dark-1000); border:1px solid var(--dark-200); border-radius:var(--r); font-family:inherit; font-size:var(--smmmm); padding:7px 10px; min-width:130px; } /* Character / Custom-shape reveal rows — full-width, stacked, dark fields */ .reveal-row { display:flex; flex-direction:column; gap:10px; align-items:stretch; } .reveal-lbl { font-size:var(--smm); color:var(--dark-1000); line-height:1.35; } .reveal-info { font-size:var(--smmmm); color:var(--dark-400); line-height:1.2; margin-top:-4px; } .fld-input, .fld-select { width:100%; background:var(--dark-100); color:var(--dark-1000); border:1.5px solid var(--dark-300); border-radius:var(--r-md); font-family:inherit; font-size:var(--smm); line-height:1.1; padding:12px 14px; outline:none; transition:border-color .12s; } .fld-input:focus, .fld-select:focus { border-color:var(--gold); } .fld-input::placeholder { color:var(--dark-400); } .fld-select { cursor:pointer; } /* dark-mode the option list (CEP Chromium honors option colors) */ .fld-select option { background:var(--dark-100); color:var(--dark-1000); } /* box button (Use selected) — same as RESET but dark-1000 text, gold on hover */ /* bg is Dark100 (not Dark200) — the reveal row sits ON a Dark200 container, so a Dark200 button was invisible against it. Label stays Dark1000. */ .btn-box { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--dark-1000); background:var(--dark-100); border:none; border-radius:var(--r-sm); padding:8px var(--s); cursor:pointer; } .btn-box:hover { background:var(--gold); color:var(--dark-100); } .btn-box { transition:background .3s ease, color .3s ease; } .btn-box.ok { background:var(--green); color:var(--dark-100); } .btn-box .ic { width:12px; height:12px; display:inline-flex; } .btn-box .ic svg { width:100%; height:100%; display:block; } /* dropdown = chosen value + caret on the container bg, no box (Figma) */ .dd { position:relative; display:inline-flex; align-items:center; } .native-inline { appearance:none; -webkit-appearance:none; background:transparent; border:none; color:var(--dark-1000); font-family:inherit; font-size:var(--smm); line-height:1.35; text-align:right; padding:0 22px 0 0; min-width:0; cursor:pointer; } .native-inline::-ms-expand { display:none; } .dd-caret { position:absolute; right:0; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--dark-400); pointer-events:none; } /* Mode dropdown — custom field + icon overlay (Figma 53:1428). .mode-dd/.mode-field/.mode-menu/.mode-opt are the shared dropdown pattern; the Characters + Font dropdowns reuse them (caret only, no leading icon). */ .mode-dd { position:relative; display:inline-flex; align-items:center; } /* icon-less variant (Characters / Font) */ .mode-dd.no-ico .mode-field .mode-ico, .mode-dd.no-ico .mode-opt .mode-ico { display:none; } /* long lists (fonts) scroll — 20px padding kept, gap tightened for density */ .mode-menu.is-long { max-height:280px; overflow-y:auto; gap:14px; top:calc(100% + 8px); transform:none; } .mode-menu.is-long .mode-opt { white-space:nowrap; } .mode-field { display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; color:var(--dark-1000); font-family:inherit; font-size:var(--smm); line-height:1.35; padding:0; } /* In-section dropdowns (Mode): the chosen value sits in its own dark filled box. */ .row-num .mode-dd .mode-field { background:var(--dark-100); border-radius:var(--r-sm); padding:14px 16px; gap:10px; } .mode-field .mode-ico { width:18px; height:18px; color:var(--dark-400); flex:none; } .mode-field .chev-sm { width:16px; height:16px; color:var(--dark-400); flex:none; } /* v8 58:3516 — the menu centres on its row instead of dropping beneath it */ .mode-menu { position:absolute; top:50%; transform:translateY(-50%); right:0; z-index:30; min-width:184px; background:var(--dark-100); border:1.5px solid var(--dark-300); border-radius:var(--r-sm); padding:20px; display:flex; flex-direction:column; gap:16px; box-shadow:0 0 10px -2px rgba(0,0,0,.5); } .mode-menu[hidden] { display:none; } .mode-opt { display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0; color:var(--dark-1000); font-family:inherit; font-size:var(--smm); line-height:1.35; white-space:nowrap; opacity:.65; transition:opacity .1s; } .mode-opt .mode-ico { width:18px; height:18px; color:var(--dark-400); flex:none; } .mode-opt:hover { opacity:1; } .mode-opt.sel { opacity:1; color:var(--gold); } .mode-opt.sel .mode-ico { color:var(--gold); } /* native scrollbars hidden — replaced by a custom overlay bar (ui.js) so we get a constant thumb height + a 6px inset from the right edge, neither of which native supports */ ::-webkit-scrollbar { width:0; height:0; } /* custom overlay scrollbar */ .vt-sb { position:fixed; right:6px; top:var(--header-h); bottom:0; width:4px; z-index:80; pointer-events:none; opacity:0; transition:opacity .2s; } .vt-sb.show { opacity:1; } .vt-sb-thumb { position:absolute; left:0; width:4px; border-radius:2px; background:var(--dark-400); pointer-events:auto; cursor:pointer; transition:background .12s; } .vt-sb-thumb:hover, .vt-sb-thumb.drag { background:var(--dark-900); } /* when Help / Presets takeover is open, only the overlay scrolls (kill the double scrollbar) */ html.help-open, body.help-open { overflow:hidden; } /* tiles — flex rows so each row's boxes share the width evenly (row 2 of Screen Pattern = 3 wide) */ .tiles { display:flex; flex-direction:column; gap:6px; margin-top:16px; } /* Dots/Lines family chooser header: title left, chooser dropdown right (v0.98). */ .tiles-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .tiles-head .mode-dd .mode-field { background:var(--dark-100); border-radius:var(--r-sm); padding:14px 16px; gap:10px; } /* each family is its own column of tile-rows; only the active one is shown. */ .tile-family { display:flex; flex-direction:column; gap:6px; } .tile-family[hidden] { display:none; } .tile-row { display:flex; gap:6px; } .tile { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:72px; padding:14px 10px; gap:8px; background:#181616; border:none; border-radius:var(--r-sm); cursor:pointer; transition:background .3s ease, color .3s ease, border-color .18s ease; } /* hover: bg stays the resting colour; a 1px yellow stroke marks the hover (v0.98). */ .tile:hover:not(.sel) { border-color:var(--gold); } .tile .tico { width:18px; height:18px; color:var(--dark-400); } /* Figma tile labels are whitespace-nowrap — "Bayer Dither" was wrapping to two lines and shoving the icon up. Nowrap + ellipsis matches the spec exactly. */ /* `flex:none` is load-bearing, not cosmetic. Per CSS flexbox, setting `overflow` to anything but `visible` makes a flex item's automatic minimum size ZERO — so this span (a flex item in the 72px column tile) was being squashed from its 17.06px line box down to 12px and clipping its own descenders. Measured: all 18 tile labels, every one of them. That is the "text cut off at the bottom" bug — the line-height was already right; the box was being crushed underneath it. */ .tile > span { flex:none; font-size:var(--smmmm); color:var(--dark-400); text-transform:capitalize; line-height:1.35; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* LINE-HEIGHT NOTE: Figma reports `leading-none` because it ALSO applies text-box-trim / cap-alphabetic to trim to cap height. CEP's Chromium supports neither, so copying line-height:1 verbatim clips descenders (g, y, p). The values below are the CEP equivalent of Figma's trimmed boxes. */ /* v8 58:3535 — active tile is solid yellow AND keeps a 1px Dark200 border. Inactive tiles have no border, so a transparent one keeps the box sizes equal. */ .tile { border:1px solid transparent; } .tile.sel { background:var(--gold); border-color:var(--dark-200); } .tile.sel .tico, .tile.sel > span { color:var(--dark-200); } /* ---- Character / Custom panel (Figma v8) --------------------------------- Sits INSIDE the Dot Shape row so it lines up with the tile grid and butts straight onto the selected tile. margin-top:-1px overlaps the tile's border so there is no seam. The chosen tile squares off its bottom corners to match. */ .tile.sel.tile-joined { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:var(--gold); } /* no seam between tile and panel */ .shape-panel { background:var(--gold); border-radius:var(--r-sm); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); margin-top:0; width:100%; max-width:100%; overflow:hidden; } /* Figma 75:1279 is overflow-clip */ /* the panel loses the radius on whichever top corner the selected tile sits on */ .shape-panel.sp-sq-l { border-top-left-radius:0; } .shape-panel.sp-sq-r { border-top-right-radius:0; } .shape-panel[hidden] { display:none !important; } .sp-text { border-bottom:1.5px solid var(--dark-200); padding:4px 0 8px; } .sp-text[hidden] { display:none !important; } .sp-input { width:100%; background:none; border:none; outline:none; font-family:inherit; font-size:var(--smm); line-height:1.35; color:var(--dark-200); } .sp-input::placeholder { color:rgba(31,31,31,.55); } /* Simplified font picker: just the dark pill on the yellow — no label row. */ .sp-pillrow { display:flex; } .sp-pillrow[hidden] { display:none !important; } .sp-pillrow .mode-dd { position:relative; background:var(--dark-100); border-radius:var(--r-sm); height:44px; display:inline-flex; align-items:center; padding:0 12px 0 16px; flex:none; max-width:100%; } .sp-pillrow .mode-field { color:var(--dark-1000); font-size:var(--smm); line-height:1.35; gap:10px; padding:0; max-width:100%; } .sp-pillrow .mode-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sp-pillrow .mode-field .chev-sm { width:16px; height:16px; color:var(--dark-1000); flex:none; } .sp-pillrow .mode-menu { top:calc(100% + 6px); left:0; right:auto; transform:none; } /* Custom shape: note + Apply button, 50% until a shape is captured. */ .sp-custom { display:flex; flex-direction:column; gap:var(--s); } .sp-custom[hidden] { display:none !important; } .sp-note { font-size:var(--smm); line-height:1.35; color:var(--dark-200); } .sp-btn { align-self:flex-start; background:var(--dark-100); border:none; border-radius:var(--r-sm); height:44px; display:inline-flex; align-items:center; gap:10px; padding:0 16px; cursor:pointer; font-family:inherit; font-size:var(--smm); line-height:1.35; color:var(--dark-1000); transition:opacity .3s ease, background .3s ease, color .3s ease; } .sp-btn .ico { width:14px; height:14px; flex:none; } .sp-btn.is-empty { opacity:.5; } /* no shape captured yet */ .sp-btn:hover { background:var(--dark-200); } .sp-btn.ok { background:var(--green); color:var(--dark-100); } /* empty (ghost) tile — solid #2A2A2A fill, keeps the row even (v0.98) */ .tile-ghost { background:#2A2A2A; box-shadow:none; cursor:default; pointer-events:none; } /* ---- Wave contextual panel (v0.98) --------------------------------------- Reuses the gold attached-box + tile-join from .shape-panel; the two sliders are restyled dark-on-gold so they read against the gold field. This is a functional first pass — visual polish is Tim's UI refinement pass. */ .wave-panel { gap:var(--s); } .wave-panel .wp-head { font-size:var(--smm); line-height:1.35; color:var(--dark-200); font-weight:600; text-transform:capitalize; } .wave-panel .wp-row { align-items:flex-start; } .wave-panel .lbl { color:var(--dark-200); } .wave-panel .info { color:rgba(31,31,31,.62); max-width:150px; } /* number field: dark pill on the gold, matching the font picker pill */ .wave-panel .st-field { background:var(--dark-100); border-color:var(--dark-100); } .wave-panel .st-field input { color:var(--dark-1000); } .wave-panel .st-field .unit { color:var(--dark-400); } /* slider: dark track + fill + thumb so it reads on gold */ .wave-panel .slider { background:rgba(31,31,31,.22); } .wave-panel .slider-fill { background:var(--dark-100); } .wave-panel .slider-input::-webkit-slider-thumb { background:var(--dark-100); box-shadow:0 0 0 3px var(--gold); } /* ---- toggles (v8: replaced checkboxes everywhere) -------------------------- Master: Figma 58:3789 / 64:1285. track 40x24 r6 p4 · knob 16x16 r3 · off Dark300/Dark400 · on Yellow500/Dark200 OFF also drops the label+info container to 60% opacity. */ .row-check { display:flex; align-items:center; justify-content:space-between; gap:10px; } .chk { display:flex; align-items:flex-start; gap:12px; cursor:pointer; flex:1; } .chk input { position:absolute; opacity:0; width:0; height:0; } .chk .box { flex:none; width:40px; height:24px; border-radius:var(--r-sm); background:var(--dark-300); border:none; position:relative; padding:4px; display:flex; align-items:center; justify-content:flex-start; transition:background .3s ease; } .chk .box::after { content:""; display:block; width:16px; height:16px; border-radius:3px; background:var(--dark-400); transition:background .3s ease, transform .3s ease; } .chk input:checked + .box { background:var(--gold); justify-content:flex-end; } .chk input:checked + .box::after { background:var(--dark-200); } .chk input:focus-visible + .box { outline:2px solid var(--gold); outline-offset:2px; } .chk .ctxt { display:flex; flex-direction:column; gap:6px; padding-top:0; opacity:.6; transition:opacity .3s ease; } /* OFF = 60% */ .chk input:checked ~ .ctxt { opacity:1; } .chk:not(.mini) > .box { margin-top:0; } .chk.chk-mid { align-items:center; } .chk .info { max-width:none; } .chk.mini { flex:none; align-items:center; gap:8px; width:auto; } .chk.mini .box { width:32px; height:20px; padding:3px; } .chk.mini .box::after { width:14px; height:14px; } .ink-lbl { font-size:var(--smmmm); color:var(--dark-1000); width:14px; } /* swatches */ .swatch { width:40px; height:40px; border-radius:var(--r-sm); border:2px solid var(--dark-300); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.45); cursor:pointer; flex:none; } .swatch.sm { width:34px; height:22px; } .swatch.dim { opacity:.3; transition:opacity .15s; } .swatch.dim.on { opacity:1; } .row-ink { display:flex; align-items:center; gap:10px; } .row-ink .ang { flex:1; background:var(--dark-100); border:1px solid var(--dark-200); border-radius:var(--r); color:var(--dark-1000); font-family:inherit; font-size:var(--smmmm); padding:6px 10px; max-width:80px; } /* curve */ .curve-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .curve { width:100%; height:220px; background:var(--dark-200); border:1px solid #3a3a3a; border-radius:var(--r-md); display:block; cursor:crosshair; } /* sticky bottom (Figma node 39:684) */ .scroll-pad { height:8px; } .sticky-bar { position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; flex-direction:column; gap:6px; background:var(--dark-100); border-top:1.5px solid var(--dark-200); padding:var(--s); box-shadow:0 -15px 10px -10px rgba(0,0,0,.5); } .bar-row { display:flex; gap:6px; } /* Output / Presets = button-utility box: Dark200, rounded-12, p16, label left / icon right */ .btn-bar { flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--dark-200); border:none; border-radius:var(--r-sm); color:var(--dark-900); font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; padding:var(--s); cursor:pointer; transition:background .3s ease, color .3s ease; } .btn-bar:hover { background:var(--gold); color:var(--dark-100); } .bar-label { display:inline; } .btn-bar .ico { width:16px; height:16px; flex:none; } /* color inherits from .btn-bar */ .pcount { font-size:8.385px; color:var(--dark-400); vertical-align:super; line-height:1; margin-left:2px; } .btn-bar:hover .pcount { color:var(--dark-100); } .vectarize { width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--gold); border:1.5px solid transparent; border-radius:999px; color:var(--dark-100); font-family:inherit; font-size:var(--sm); font-weight:600; letter-spacing:-0.1px; line-height:1.35; padding:24px 32px; cursor:pointer; position:relative; overflow:hidden; transition:border-color .3s ease, opacity .12s; } /* v8 hover (Figma 64:1341) — warm cream→gold gradient + 1.5px gold border. The gradient still lives on a ::before that fades via OPACITY: CSS can't interpolate gradient↔solid, and animating `background` made Chromium flash black on mouse-out. */ /* Hover is flat GREEN, not a gradient. Still an opacity-faded ::before, because animating `background` directly reintroduced the v0.69 black flash. */ .vectarize::before { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:var(--green); transition:opacity .3s ease; pointer-events:none; } .vectarize:hover::before { opacity:1; } .vectarize:hover { border-color:var(--green); } .vectarize > * { position:relative; z-index:1; } /* label + icon sit above the gradient layer */ .vectarize .ico { width:26px; height:26px; flex:none; } /* Tim's call. The asset's viewBox is 18, so this scales by 26/18 = 1.444 — normally the thing to avoid with a dot pattern, but the 31 dots are elements now, and Skia's drawOval is analytic: it resolves at the final device transform instead of tessellating, so a fractional scale costs nothing. 26 CSS px is 52 device px at DPR 2, i.e. still a whole number of pixels. */ .vectarize.is-busy { opacity:.7; cursor:default; } .vectarize.is-err { background:var(--red); color:#fff; animation:shake .4s; } .status { font-size:11px; color:var(--dark-400); padding-top:8px; text-align:center; } .status.err { color:var(--red); } .status.ok { color:var(--green); } /* popovers — float above the sticky bar, 8px above the button (Figma 54:1545) */ .pop-sheet { position:absolute; left:var(--s); right:var(--s); bottom:calc(100% - 8px); z-index:50; } .pop-sheet[hidden] { display:none; } .pop-sheet .sheet { background:var(--dark-100); border:1.5px solid var(--dark-300); border-radius:var(--r-sm); padding:20px; display:flex; flex-direction:column; gap:20px; box-shadow:0 0 10px -2px rgba(0,0,0,.5); } .out-chk .info { max-width:none; } /* Figma 55:1009 stack = gap 10px + pt 4px, but measured between text-box-trimmed boxes. CEP's Chromium has no text-box-trim, so a literal 10px renders loose (extra line leading). Tightened to 4px to match the trimmed VISUAL; label line-height already 1. */ .out-chk { align-items:flex-start; } .out-chk .ctxt { gap:4px; padding-top:0; } .out-chk .lbl { line-height:1.35; } /* Output rows use the same 40x24 toggle as everywhere else now — the old 20px checkbox overrides here would have squashed it. */ /* ---------- presets takeover (v8) ---------- Save block reuses the yellow "type input" (65:1426); Load uses the dark "Preset Chooser" (58:3560): 1.5px Dark300, radius 6, label left, dark pill right. */ .pre-active-name { color:var(--gold); } .pre-ov-body { display:flex; flex-direction:column; gap:32px; padding:24px 40px 48px; } .pre-sec { display:flex; flex-direction:column; gap:12px; } /* Figma 58:2916 — section label is REGULAR 16px, not a semibold heading. The semibold-18 'Active Preset: X' line lives in the takeover header. px-8 inset. */ .pre-sec-title { font-size:var(--smm); font-weight:400; line-height:1.35; color:var(--dark-1000); padding:0 8px; } /* Both preset rows use ONE pattern (Figma "Presets with Name started"): a dark 1.5px-bordered box, label-or-input on the left, dark pill/button on the right. */ .pre-chooser-row { position:relative; border:1.5px solid var(--dark-300); border-radius:var(--r-sm); padding:4px 4px 4px var(--s4); display:flex; align-items:center; justify-content:space-between; gap:12px; } .pre-row-lbl { font-size:var(--smm); line-height:1.35; color:var(--dark-1000); flex:none; } /* Save row: the name field IS the left side — no yellow block, no extra chrome. */ .pre-name { flex:1 1 auto; min-width:0; background:none; border:none; outline:none; font-family:inherit; font-size:var(--smm); line-height:1.35; color:var(--dark-1000); } .pre-name::placeholder { color:var(--dark-400); } /* Figma 58:2917 — the SAVE row carries a Dark200 fill; the chooser row does not. */ .pre-save-row { background:var(--dark-200); } /* Figma I58:2917;58:3572 — fixed 88px utility button, Dark900 uppercase label. */ .pre-chooser-row .pre-save-btn { width:88px; justify-content:center; padding:0 var(--s); font-weight:600; letter-spacing:.7px; text-transform:uppercase; font-size:13px; color:var(--dark-900); transition:background .3s ease, color .3s ease; } .pre-chooser-row .pre-save-btn:hover { background:var(--gold); color:var(--dark-100); } .pre-pill { background:var(--dark-100); border:none; border-radius:4px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; padding:0 12px 0 16px; cursor:pointer; max-width:60%; font-family:inherit; font-size:var(--smm); color:var(--dark-1000); } .pre-pill-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pre-pill .chev-sm { width:16px; height:16px; color:var(--dark-1000); flex:none; } /* the menu drops from the pill, styled like every other v8 overlay */ .pre-list { position:absolute; top:calc(100% + 6px); right:0; z-index:31; min-width:60%; max-height:280px; overflow-y:auto; background:var(--dark-100); border:1.5px solid var(--dark-300); border-radius:var(--r-sm); padding:var(--s4); display:flex; flex-direction:column; gap:16px; box-shadow:0 0 10px -2px rgba(0,0,0,.5); } .pre-list[hidden] { display:none !important; } .pre-item { display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; padding:0; cursor:pointer; opacity:.65; font-family:inherit; font-size:var(--smm); color:var(--dark-1000); transition:opacity .2s ease, color .2s ease; } .pre-item:hover { opacity:1; } .pre-item.sel { opacity:1; color:var(--gold); } .pre-item .pi-tag { font-size:var(--smmmm); color:var(--dark-400); } .pre-item .pre-del { width:16px; height:16px; color:var(--dark-400); cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center; } .pre-item .pre-del svg { width:100%; height:100%; display:block; } .pre-item .pre-del:hover { color:var(--red); } /* presets bar button turns gold ✕ while its overlay is open (mirrors HELP) */ #presetsBtn.is-open { background:var(--gold); color:var(--dark-100); } #presetsBtn.is-open .x { display:inline; margin-left:auto; } #presetsBtn.is-open .ico { display:none; } /* bar states when a popover is open: trigger → gold "✕", the other two → 50% + disabled */ .btn-bar .x { display:none; } .btn-bar.is-open { background:var(--gold); color:var(--dark-100); } .btn-bar.is-open .x { display:inline; margin-left:auto; } .btn-bar.is-open .ico { display:none; } .sticky-bar.out-open #presetsBtn, .sticky-bar.out-open #apply, .sticky-bar.pre-open #outputBtn, .sticky-bar.pre-open #apply { opacity:.5; pointer-events:none; } /* color picker + system overlays — styled to app tokens (Dark100 sheet, Dark300 border, app type) */ .pop-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:75; } /* above header (60) + all takeovers */ .pop { background:var(--dark-100); border:1.5px solid var(--dark-300); border-radius:var(--r-sm); padding:20px; width:240px; box-shadow:0 0 10px -2px rgba(0,0,0,.5); } .pop-head { font-size:var(--smm); font-weight:600; color:var(--dark-1000); letter-spacing:.1px; margin-bottom:14px; } .pop canvas { display:block; border-radius:var(--r-sm); margin-bottom:10px; cursor:crosshair; width:100%; } .pop-row { display:flex; gap:8px; align-items:center; margin-top:10px; } .pop-row input { background:var(--dark-200); border:1px solid #302c2c; border-radius:var(--r-sm); color:var(--dark-1000); font-family:inherit; font-size:var(--smm); line-height:1.35; padding:10px 14px; outline:none; } /* HEX/RGB/HSL/HSB now runs through the app's own dropdown component (buildModeDropdown), so it inherits the Figma 58:3564 geometry — pl 16 / pr 12 / gap 8 — which is what gives the caret breathing room the native