/* ============================================================================ Editor layout — Inkscape-style dark workspace Regions: menubar (top) · toolbar (tool options) · left tool rail · canvas · resizable right dock (tabbed) · right command rail Pairs with layout.js (splitter drag + tab switching). Palette matches the option-bar inputs: bar #333 · panel #2b2b2b · line #1c1c1c · text #d0d0d0 · muted #8a8a8a · accent #4a90d9 ============================================================================ */ /* color tokens (shared with input.css) — switch with data-theme on */ :root, [data-theme="dark"] { --lay-bar: #333333; --lay-panel: #2b2b2b; --lay-panel-2: #2f2f2f; --lay-line: #1c1c1c; --lay-line-soft: #404040; --lay-text: #d0d0d0; --lay-muted: #8a8a8a; --lay-hover: #3a3a3a; --lay-accent: #4a90d9; --lay-canvas-bg: #5a5a5a; --lay-field-bg: #2b2b2b; --lay-placeholder:#7e7e7e; --lay-dropdown-bg:#2b2b2b; --lay-scroll: #4a4a4a; --lay-shadow: rgba(0,0,0,.45); } [data-theme="light"] { --lay-bar: #ececec; --lay-panel: #f6f6f6; --lay-panel-2: #efefef; --lay-line: #c6c6c6; --lay-line-soft: #d6d6d6; --lay-text: #2a2a2a; --lay-muted: #6c6c6c; --lay-hover: #e3e3e3; --lay-accent: #2f6fd0; --lay-canvas-bg: #9a9a9a; --lay-field-bg: #ffffff; --lay-placeholder:#9a9a9a; --lay-dropdown-bg:#ffffff; --lay-scroll: #bdbdbd; --lay-shadow: rgba(0,0,0,.18); } /* layout dimensions */ :root { --lay-rail-w: 42px; /* left + right icon rails */ --lay-dock-w: 320px; /* right dock width (drag to resize) */ --lay-split: 6px; /* splitter hit size */ } /* ---- shell -------------------------------------------------------------- */ .lay-root { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--lay-bar); color: var(--lay-text); font: 12px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden; user-select: none; } /* ---- menubar ------------------------------------------------------------ */ .lay-menubar { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 12px; background: var(--lay-bar); border-bottom: 1px solid var(--lay-line); } .lay-menubar .lay-menu-item { padding: 4px 9px; border-radius: 3px; color: var(--lay-text); cursor: default; white-space: nowrap; } .lay-menubar .lay-menu-item:hover { background: var(--lay-hover); } .lay-menubar .lay-menu-select { display: flex; align-items: center; gap: 7px; margin-left: 16px; color: var(--lay-muted); white-space: nowrap; } .lay-menubar .lay-menu-select-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .7; font-weight: 600; } /* host span for a combo-style (UI.js .combo-*) dropdown built by layout.js. Override the base .combo-wrapper fixed 200px so each selector hugs its text, and give it an intentional, non-default look (soft field, rounded, accent). */ .lay-menubar .lay-menu-combo { display: inline-block; } .lay-menubar .lay-menu-combo .combo-wrapper { width: auto; height: 30px; border-radius: 7px; background: var(--lay-field-bg, #1f1f1f); border: 1px solid var(--lay-line, #333); transition: border-color .12s ease, background .12s ease; } .lay-menubar .lay-menu-combo .combo-wrapper:hover { border-color: var(--lay-accent, #4a90d9); background: var(--lay-hover, rgba(255,255,255,.05)); } .lay-menubar .lay-menu-combo .combo-input, .lay-menubar .lay-menu-combo .select-input { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; min-width: 0; height: 30px; font-size: 13px; font-weight: 500; padding: 0 6px 0 10px; color: var(--lay-text); } .lay-menubar .lay-menu-combo .combo-arrow { width: 26px; border-left: 1px solid var(--lay-line, #333); color: var(--lay-muted); border-radius: 0 6px 6px 0; } .lay-menubar .lay-menu-combo .combo-wrapper:hover .combo-arrow { color: var(--lay-text); } /* icon sitting inside a combo trigger / option */ .lay-combo-ico { display: inline-flex; align-items: center; color: var(--lay-accent, #4a90d9); flex: 0 0 auto; } .lay-combo-ico svg { display: block; } .lay-combo-name { white-space: nowrap; } /* dropdown options built by makeCombo (portaled .combo-dropdown > .lay-combo-opt) */ .combo-dropdown .lay-combo-opt { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; cursor: pointer; font-size: 13px; color: var(--lay-text); border-radius: 6px; margin: 2px 4px; } .combo-dropdown .lay-combo-opt:hover { background: var(--lay-hover, rgba(255,255,255,.07)); } .combo-dropdown .lay-combo-opt.highlight { background: var(--lay-accent, #4a90d9); color: #fff; } .combo-dropdown .lay-combo-opt.highlight .lay-combo-ico { color: #fff; } /* display-mode icon button (monitor) */ .lay-menubar .lay-menu-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 10px; background: var(--lay-field-bg, #1f1f1f); border: 1px solid var(--lay-line, #333); border-radius: 6px; color: var(--lay-text); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; } .lay-menubar .lay-menu-iconbtn svg { width: 15px; height: 15px; } .lay-menubar .lay-menu-iconbtn:hover, .lay-menubar .lay-menu-iconbtn.is-active { border-color: var(--lay-accent, #4a90d9); color: var(--lay-accent, #4a90d9); background: var(--lay-hover, rgba(255,255,255,.05)); } /* Inkscape-style display-mode popover (English, with per-mode meaning icons) */ .lay-display-pop { min-width: 230px; padding: 7px; box-sizing: border-box; background: var(--lay-panel, #2b2b2b); color: var(--lay-text, #e0e0e0); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 9px; box-shadow: 0 10px 32px var(--lay-shadow, rgba(0,0,0,.5)); font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 14px; } .lay-display-pop .lay-dm-title { font-weight: 600; padding: 4px 8px 8px; opacity: .65; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .lay-display-pop .lay-dm-opt { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .lay-display-pop .lay-dm-opt:hover { background: var(--lay-hover, rgba(255,255,255,.07)); } .lay-display-pop .lay-dm-opt.is-on { background: var(--lay-hover, rgba(255,255,255,.06)); } .lay-display-pop .lay-dm-ico { display: inline-flex; width: 18px; align-items: center; justify-content: center; color: var(--lay-muted); flex: 0 0 auto; } .lay-display-pop .lay-dm-opt.is-on .lay-dm-ico { color: var(--lay-accent, #4a90d9); } .lay-display-pop .lay-dm-name { flex: 1 1 auto; } .lay-display-pop .lay-dm-opt.is-on .lay-dm-name { font-weight: 600; } .lay-display-pop .lay-dm-sep { height: 1px; background: var(--lay-line, #1c1c1c); margin: 6px 6px; } .lay-display-pop .lay-dm-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; color: var(--lay-muted, #999); font-size: 12.5px; } .lay-display-pop .lay-dm-row kbd { font-family: inherit; font-size: 11px; padding: 1px 8px; min-width: 18px; text-align: center; background: var(--lay-field-bg, #1c1c1c); border: 1px solid var(--lay-line, #333); border-radius: 4px; color: var(--lay-text); } .lay-display-pop .lay-dm-check { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .lay-display-pop .lay-dm-check:hover { background: var(--lay-hover, rgba(255,255,255,.07)); } /* flat-colour popover (Document Properties: Page / Border / Desk colour) */ .lay-color-pop { width: 220px; padding: 11px; box-sizing: border-box; background: var(--lay-panel, #2b2b2b); color: var(--lay-text, #e0e0e0); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 9px; box-shadow: 0 10px 32px var(--lay-shadow, rgba(0,0,0,.5)); font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 13px; } .lay-color-pop .lcp-sv { position: relative; width: 100%; height: 132px; border-radius: 7px; cursor: crosshair; margin-bottom: 11px; } .lay-color-pop .lcp-thumb { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); transform: translate(-50%,-50%); pointer-events: none; } .lay-color-pop .lcp-hue { position: relative; width: 100%; height: 13px; border-radius: 7px; cursor: pointer; margin-bottom: 11px; background: linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); } .lay-color-pop .lcp-huethumb { position: absolute; top: 50%; width: 7px; height: 19px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); transform: translate(-50%,-50%); pointer-events: none; } .lay-color-pop .lcp-row { display: flex; align-items: center; gap: 9px; } .lay-color-pop .lcp-prev { width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--lay-line, #1c1c1c); flex: 0 0 auto; } .lay-color-pop .lcp-hex { flex: 1 1 auto; height: 28px; box-sizing: border-box; background: var(--lay-field-bg, #1c1c1c); border: 1px solid var(--lay-line, #333); border-radius: 6px; color: var(--lay-text); padding: 0 9px; outline: none; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; } .lay-color-pop .lcp-hex:focus { border-color: var(--lay-accent, #4a90d9); } /* alpha strip (checkerboard under a colour→transparent gradient) */ .lay-color-pop .lcp-alpha { position: relative; width: 100%; height: 13px; border-radius: 7px; cursor: pointer; margin-bottom: 11px; overflow: hidden; background-image: linear-gradient(45deg,#888 25%,transparent 25%),linear-gradient(-45deg,#888 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#888 75%),linear-gradient(-45deg,transparent 75%,#888 75%); background-size: 8px 8px; background-position: 0 0,0 4px,4px -4px,-4px 0; background-color: #fff; } .lay-color-pop .lcp-alpha-grad { position: absolute; inset: 0; border-radius: 7px; } /* R/G/B numeric inputs */ .lay-color-pop .lcp-rgb { display: flex; gap: 7px; margin-top: 9px; } .lay-color-pop .lcp-np { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .lay-color-pop .lcp-nl { font-size: 10px; color: var(--lay-muted, #8a8a8a); } .lay-color-pop .lcp-ni { width: 100%; box-sizing: border-box; height: 24px; text-align: center; background: var(--lay-field-bg, #1c1c1c); border: 1px solid var(--lay-line, #333); border-radius: 6px; color: var(--lay-text); outline: none; font-size: 12px; -moz-appearance: textfield; } .lay-color-pop .lcp-ni::-webkit-outer-spin-button, .lay-color-pop .lcp-ni::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lay-color-pop .lcp-ni:focus { border-color: var(--lay-accent, #4a90d9); } /* recent-colour palette */ .lay-color-pop .lcp-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .lay-color-pop .lcp-swatches:empty { display: none; } .lay-color-pop .lcp-swatch { width: 17px; height: 17px; border-radius: 4px; border: 1px solid var(--lay-line, #1c1c1c); cursor: pointer; } .lay-color-pop .lcp-swatch:hover { border-color: var(--lay-accent, #4a90d9); transform: scale(1.12); } /* monitor (display-mode) button — caps the top of the scrollbar column, in the ruler corner (image 2). No box: just the icon, sitting over the dark ruler/ scrollbar. Lives in .editor-cell, which stacks above the engine surface. */ /* monitor (display-mode) button — a clean dark corner square like the ruler corner (image 2), capping the top of the scrollbar column. Lives in .editor-cell, which stacks above the engine surface. */ .lay-canvas-dispmode { position: absolute; top: 0; right: var(--canvas-right-inset, 0px); z-index: 60; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lay-panel, #2b2b2b); color: var(--lay-muted, #999); border: none; border-bottom: 1px solid var(--lay-line, #1c1c1c); border-left: 1px solid var(--lay-line, #1c1c1c); cursor: pointer; transition: color .12s ease, background .12s ease; } .lay-canvas-dispmode svg { width: 14px; height: 14px; } /* smaller glyph → padding inside the square */ .lay-canvas-dispmode:hover, .lay-canvas-dispmode.is-active { color: var(--lay-accent, #4a90d9); } .lay-canvas-dispmode:hover, .lay-canvas-dispmode.is-active { color: var(--lay-accent, #4a90d9); background: var(--lay-hover-solid, #333); } /* gear (settings) popover — Render / Backend / Theme grouped together */ /* menu-style popover (gear settings) — same font + fly-out sub-dropdowns as the engine menus (image 5). */ .lay-menu-pop { display: none; min-width: 215px; padding: 5px; box-sizing: border-box; background: var(--lay-panel, #2b2b2b); color: var(--lay-text, #e0e0e0); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 8px; box-shadow: 0 10px 32px var(--lay-shadow, rgba(0,0,0,.5)); font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 14px; } .lay-menu-pop .lay-mi, .lay-submenu .lay-mi { display: flex; align-items: center; gap: 10px; margin: 2px 0; padding: 7px 10px 7px 9px; border-radius: 6px; cursor: pointer; position: relative; white-space: nowrap; } .lay-menu-pop .lay-mi:hover, .lay-submenu .lay-mi:hover { background: var(--lay-hover, rgba(255,255,255,.08)); } .lay-mi-ico { display: inline-flex; width: 18px; justify-content: center; color: var(--lay-muted); flex: 0 0 auto; } .lay-mi-name { flex: 1 1 auto; } .lay-mi-val { color: var(--lay-muted, #999); font-size: 12.5px; margin-left: 14px; } .lay-mi-arrow { display: inline-flex; align-items: center; color: var(--lay-muted); margin-left: 8px; } .lay-has-sub:hover > .lay-mi-arrow, .lay-has-sub:hover .lay-mi-arrow { color: var(--lay-text); } /* sub-dropdown fly-out — to the LEFT, since the gear popover sits at the right edge */ .lay-has-sub { } .lay-submenu { display: none; position: absolute; top: -5px; right: 100%; margin-right: 5px; min-width: 160px; padding: 5px; box-sizing: border-box; background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 8px; box-shadow: 0 10px 32px var(--lay-shadow, rgba(0,0,0,.5)); } /* transparent bridge spanning the gap between the parent item and its submenu — keeps :hover alive while the pointer crosses the gap, so the submenu stays open. */ .lay-submenu::before { content: ''; position: absolute; top: 0; right: -7px; width: 7px; height: 100%; } .lay-has-sub:hover > .lay-submenu { display: block; } .lay-submenu .lay-sub-opt.is-on { background: var(--lay-hover, rgba(255,255,255,.06)); } .lay-submenu .lay-sub-opt.is-on .lay-mi-ico, .lay-submenu .lay-sub-opt.is-on .lay-mi-name { color: var(--lay-accent, #4a90d9); } .lay-submenu .lay-sub-opt.is-on .lay-mi-name { font-weight: 600; } /* ---- toolbar (tool options) -------------------------------------------- */ .lay-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; /* FIXED height (not min-height + auto-grow): option bars range 17–36px per tool, so an auto-growing host jumped height on every tool switch → flicker. Lock it to fit the tallest (≈36px content) so every tool shares one height. */ height: 38px; box-sizing: border-box; padding: 0 8px; background: var(--lay-bar); border-bottom: 1px solid var(--lay-line); overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .lay-toolbar::-webkit-scrollbar { height: 8px; } .lay-toolbar::-webkit-scrollbar-thumb { background: var(--lay-scroll); border-radius: 4px; } /* The option-bar unit combo ships an inline width:50px that leaves the value input only ~21px (minus 8px padding each side) → 2-char units (cm/px/mm/pt/in) get clipped to one letter. Give the wrapper a min-width and trim the input padding so the whole unit shows. id+class beats input.css's bare .combo-wrapper; min-width overrides the inline width when larger, and only affects combos narrower than this (wide combos like font-family keep their size). */ #option_bar .combo-wrapper { min-width: 58px !important; } #option_bar .combo-input { padding: 0 5px; } /* ---- body (rails + canvas + dock) -------------------------------------- */ .lay-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; /* positioning context for the floating right overlay */ } /* Right panels (splitter + dock + command rail) FLOAT on top of the canvas instead of sharing the flex row with it — so the canvas keeps the full body width and resizing the dock never resizes / reallocates the canvas (no skew). Shrink-to-fit + right- anchored: as wide as the dock currently is, growing leftward over the canvas. */ .lay-right-overlay { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: row; z-index: 100; /* above the canvas and its in-cell corner controls */ } /* The right dock FOLDS when the splitter is pulled past data-collapse-at (layout.js JS-tweens it to 0 and adds .collapsed); dragging the splitter back out removes it. The scrollbars' MutationObserver on #dock re-measures the overlay so --canvas-right-inset + the scrollbars follow. The tween holds 0 via inline flex/width; this rule is the cascade backup + state flag — force EVERY width channel to 0 so it can't reopen from .lay-dock's width/min-width. */ #dock.collapsed { flex-basis: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; } /* icon rails (left tools / right commands) */ .lay-rail { flex: 0 0 var(--lay-rail-w); width: var(--lay-rail-w); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: var(--lay-panel); overflow-y: auto; overflow-x: hidden; } .lay-rail.left { border-right: 1px solid var(--lay-line); } .lay-rail.right { border-left: 1px solid var(--lay-line); } .lay-rail::-webkit-scrollbar { width: 0; } /* ── tear-off / floating panels (Illustrator-style: drag out → float, drag back → snap home) ── */ /* Make room for the grip strip ABOVE the tools. The tools live in #tools_left whose padding is set by `#host-toolbar #tools_left` (2 ids) — so the override must out-specify that, else the grip overlaps the first tool. */ #host-toolbar.has-grip > #tools_left { padding-top: 24px; } /* once floated the grip is hidden, so drop the grip-room gap (same specificity → source order wins) */ #host-toolbar.is-floating > #tools_left { padding-top: 4px; } .lay-rail-grip { position: absolute; z-index: 60; height: 18px; display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--lay-muted); background: var(--lay-bar); border-bottom: 1px solid var(--lay-line); font-size: 12px; letter-spacing: 2px; user-select: none; } .lay-rail-grip:hover { color: var(--lay-text); } .lay-rail-grip.grabbing { cursor: grabbing; } .lay-float { position: fixed; z-index: 500; display: flex; flex-direction: column; background: var(--lay-panel); border: 1px solid var(--lay-line); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); overflow: hidden; min-width: 0; min-height: 0; } .lay-float-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; cursor: grab; touch-action: none; background: var(--lay-bar); border-bottom: 1px solid var(--lay-line); color: var(--lay-text); font-size: 12px; user-select: none; } .lay-float-bar.grabbing { cursor: grabbing; } .lay-float-bar.compact { padding: 0 4px; justify-content: space-between; } /* narrow rail float: grip + dock only */ .lay-float-grip { flex: 0 0 auto; color: var(--lay-muted); font-size: 12px; letter-spacing: 1px; } .lay-float-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lay-float-bar.compact .lay-float-title { display: none; } .lay-float-dock { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; color: var(--lay-muted); font-size: 14px; } .lay-float-dock:hover { background: var(--lay-hover, rgba(255, 255, 255, .08)); color: var(--lay-text); } .lay-float-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; } /* a floated rail must FILL the float body (its tools scroll within) — override the docked `#host-toolbar.lay-rail { flex:0 0 48px }` (1 id) with a 2-class+id selector, else the rail stays 48px tall in the column float and clips every tool but the first. */ #host-toolbar.lay-rail.is-floating { flex: 1 1 auto; border: 0; } .lay-rail.is-floating { border: 0; } /* LEFT tool rail: RESPONSIVE columns. A tall window keeps the natural single column; only when the rail is too short for all 22 tools (they'd overflow + scroll) does layout.js add `.cols-2`, which widens the rail and lays #tools_left out as a 2-col grid. Needs id+class specificity to beat chrome-skin's `#host-toolbar #tools_left` (2 ids). */ #host-toolbar.lay-rail.left.cols-2 { flex-basis: 86px; width: 86px; } #host-toolbar.lay-rail.left.cols-2 > #tools_left { display: grid; grid-template-columns: repeat(2, 38px); justify-content: center; align-content: start; column-gap: 6px; row-gap: 2px; } /* the fill/stroke swatch box (the engine leaves #color_tools width/height:auto + abs children → 0×0; give it a real compact box so the overlapping fill+stroke swatches show). Centred in BOTH column modes — margin:auto centres the block in 1-col, justify-self centres the grid cell. */ #host-toolbar.lay-rail.left > #tools_left > #color_tools { width: 40px; height: 40px; margin: 14px auto 2px; justify-self: center; overflow: visible; } /* in 2-col it spans + centres across both columns (sits at the bottom) */ #host-toolbar.lay-rail.left.cols-2 > #tools_left > #color_tools { grid-column: 1 / -1; } /* swap glyph removed per request — keep just the overlapping fill/stroke swatches */ #host-toolbar.lay-rail.left #color_tools > #tool_switch { display: none; } /* the bottom Drawing-Modes group (Normal/Behind/Inside) is a flex COLUMN in 1-col mode (chrome-skin.css). In the wider 2-col rail there's room for a single 3-across row, so span both columns + flip to flex-row (mirrors the #color_tools span just above). */ #host-toolbar.lay-rail.left.cols-2 > #tools_left > #draw_modes { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 2px; } /* shrink the 3 buttons so they fit one row inside the ~82px content width of the 2-col rail (3×30px would overflow); icons keep their own size */ #host-toolbar.lay-rail.left.cols-2 > #tools_left > #draw_modes > .drawmode_button { width: 26px; height: 26px; } /* ── Illustrator-style Fill/Stroke proxy (.ai-proxy) ───────────────────────── Overlapping fill (front, solid) + stroke (back, hollow ring) swatches, with a swap arrow (top-right), a default-colours mini button (bottom-left), and a None/Color/Gradient row below. Rail-scoped + .ai-proxy for specificity so these win over the older #color_tools rules in style.css. */ #host-toolbar.lay-rail.left #color_tools.ai-proxy { width: 40px; height: 40px; position: relative; overflow: visible; margin: 14px auto 2px; justify-self: center; } #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_fill { top: 2px; left: 3px; z-index: 1; } #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke { top: 14px; left: 15px; z-index: 1; } #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_fill.active, #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke.active { z-index: 3; } /* accent ring on the ACTIVE swatch so you can see which paint is targeted */ #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_fill.active > .color_block, #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke.active > .color_block { box-shadow: 0 0 0 1.5px var(--lay-accent, #e8833a), 0 0 0 2.5px rgba(0,0,0,.4); } /* stroke swatch drawn HOLLOW — a thick colour ring with a see-through-white centre */ #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke #stroke_color:after { left: 5px; right: 5px; top: 5px; bottom: 5px; background: #f4f3ef; box-shadow: 0 0 0 1px rgba(0,0,0,.35); } /* swap arrows — top-right, VISIBLE (overrides the display:none above) */ #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_switch { display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; position: absolute; top: -4px; right: -5px; left: auto; bottom: auto; z-index: 4; cursor: pointer; color: var(--z8, #9c9a92); } #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_switch:hover { color: var(--lay-accent, #e8833a); } #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_switch svg { width: 15px; height: 15px; fill: none; } /* default colours — bottom-left mini fill/stroke pair */ #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_default { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; position: absolute; bottom: -4px; left: -4px; z-index: 4; cursor: pointer; opacity: .92; } #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_default:hover { opacity: 1; transform: scale(1.08); } #host-toolbar.lay-rail.left #color_tools.ai-proxy > #tool_default svg { width: 14px; height: 14px; display: block; } /* None / Color / Gradient row */ #host-toolbar.lay-rail.left #paint_row { display: flex; gap: 3px; justify-content: center; align-items: center; margin: 9px auto 4px; width: 40px; } #host-toolbar.lay-rail.left #paint_row .paint_btn { width: 13px; height: 13px; cursor: pointer; border-radius: 2px; line-height: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.3); } #host-toolbar.lay-rail.left #paint_row .paint_btn svg { width: 13px; height: 13px; display: block; border-radius: 2px; } #host-toolbar.lay-rail.left #paint_row .paint_btn:hover { box-shadow: 0 0 0 1.5px var(--lay-accent, #e8833a); } /* which paint mode the ACTIVE swatch is (None / Color / Gradient) — synced to the picker */ #host-toolbar.lay-rail.left #paint_row .paint_btn.active { box-shadow: 0 0 0 1.5px var(--lay-accent, #e8833a), 0 0 0 2.5px rgba(0,0,0,.45); } #host-toolbar.lay-rail.left.cols-2 > #tools_left > #paint_row { grid-column: 1 / -1; } /* 2-col rail — the proxy has ~82px of room, so scale the whole thing up to match. */ #host-toolbar.lay-rail.left.cols-2 > #tools_left > #color_tools.ai-proxy { width: 66px; height: 66px; margin: 18px auto 8px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy #tool_fill { top: 4px; left: 6px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy #tool_stroke { top: 24px; left: 26px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy .color_block { width: 34px; height: 34px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy .color_block svg { width: 34px; height: 34px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy #tool_stroke #stroke_color:after { left: 8px; right: 8px; top: 8px; bottom: 8px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy > #tool_switch { width: 22px; height: 22px; top: -4px; right: -6px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy > #tool_switch svg { width: 22px; height: 22px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy > #tool_default { width: 20px; height: 20px; bottom: -5px; left: -5px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy > #tool_default svg { width: 20px; height: 20px; } #host-toolbar.lay-rail.left.cols-2 > #tools_left > #paint_row { width: 66px; gap: 5px; margin: 14px auto 8px; } #host-toolbar.lay-rail.left.cols-2 #paint_row .paint_btn { width: 19px; height: 19px; } #host-toolbar.lay-rail.left.cols-2 #paint_row .paint_btn svg { width: 19px; height: 19px; } /* the home dock-zone highlight shown while a float hovers its origin */ .lay-dropzone { position: fixed; z-index: 499; pointer-events: none; border-radius: 8px; background: var(--lay-accent, #e8833a); opacity: .16; outline: 2px solid var(--lay-accent, #e8833a); outline-offset: -2px; } .lay-tool { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--lay-muted); cursor: pointer; flex: 0 0 auto; } .lay-tool:hover { background: var(--lay-hover); color: var(--lay-text); } .lay-tool.active { background: var(--lay-accent); color: #fff; } .lay-tool svg { width: 18px; height: 18px; fill: currentColor; } /* canvas viewport */ .lay-canvas { flex: 1 1 auto; min-width: 120px; position: relative; background: var(--lay-canvas-bg); overflow: hidden; } /* ---- splitters ---------------------------------------------------------- */ .lay-splitter { flex: 0 0 var(--lay-split); position: relative; background: var(--lay-line); z-index: 5; } .lay-splitter::after { /* fat invisible hit area */ content: ""; position: absolute; inset: -2px; } .lay-splitter.v { cursor: col-resize; width: var(--lay-split); } .lay-splitter.h { cursor: row-resize; height: var(--lay-split); } .lay-splitter:hover, .lay-splitter.dragging { background: var(--lay-accent); } /* grip dots */ .lay-splitter::before { content: ""; position: absolute; background: radial-gradient(circle, var(--lay-muted) 1px, transparent 1.4px) center / 3px 5px repeat-y; opacity: .6; } .lay-splitter.v::before { left: 1px; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); } .lay-splitter.h::before { top: 1px; left: 50%; width: 22px; height: 3px; transform: translateX(-50%); background: radial-gradient(circle, var(--lay-muted) 1px, transparent 1.4px) center / 5px 3px repeat-x; } /* ---- right dock --------------------------------------------------------- */ .lay-dock { flex: 0 0 var(--lay-dock-w); width: var(--lay-dock-w); min-width: var(--lay-dock-w); /* never narrower than its initial width — drag-in past it folds */ max-width: 640px; display: flex; flex-direction: column; background: var(--lay-panel); min-height: 0; overflow: hidden; /* clip the panel while it slides closed (JS-tweened in layout.js — a CSS transition can't drive the shrink-to-fit overlay's reflow) */ } /* tab strip */ .lay-dock-tabs { flex: 0 0 auto; display: flex; align-items: stretch; gap: 1px; height: 42px; background: var(--lay-bar); border-bottom: 1px solid var(--lay-line); overflow-x: auto; overflow-y: hidden; } .lay-dock-tabs::-webkit-scrollbar { height: 0; } /* icon tabs — each panel is a compact icon (full name in the title tooltip) so all 7 fit the dock instead of overflowing past ~2 wide text tabs. layout.js fills in the icon + a hidden label span (kept for tear-off/reopen title reads). */ .lay-tab { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; padding: 0; color: var(--lay-muted); cursor: pointer; border-bottom: 2px solid transparent; } .lay-tab-ico { display: inline-flex; align-items: center; justify-content: center; } .lay-tab-ico svg { width: 19px; height: 19px; display: block; } .lay-tab-label { display: none; } /* hidden; remains in the DOM for tab.textContent reads */ .lay-tab:hover { color: var(--lay-text); background: var(--lay-hover); } .lay-tab.active { color: var(--lay-text); border-bottom-color: var(--lay-accent); background: var(--lay-panel); } .lay-tab.active .lay-tab-ico { color: var(--lay-accent); } .lay-tab .lay-tab-close { position: absolute; top: 3px; right: 3px; display: none; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 12px; line-height: 1; color: var(--lay-text); background: var(--lay-line); } .lay-tab:hover .lay-tab-close, .lay-tab.active:hover .lay-tab-close { display: flex; } .lay-tab .lay-tab-close:hover { background: var(--lay-accent); color: #fff; } /* all-panels dropdown: a chevron pinned to the right edge of the strip (stays put while the icon tabs scroll under it) → opens a list of every panel so any number stays reachable. */ .lay-tabs-menu { position: sticky; right: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; cursor: pointer; color: var(--lay-muted); background: var(--lay-bar); border-left: 1px solid var(--lay-line); z-index: 3; } .lay-tabs-menu:hover { color: var(--lay-text); background: var(--lay-hover); } .lay-tabs-menu svg { width: 16px; height: 16px; display: block; } .lay-tab-allmenu-it { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .lay-tab-allmenu-it:hover, .lay-tab-allmenu-it.active { background: var(--lay-hover, rgba(255, 255, 255, .08)); } .lay-tab-allmenu-it.active .ami-name { color: var(--lay-accent); font-weight: 600; } .lay-tab-allmenu-it.closed { opacity: .5; } .lay-tab-allmenu-it .ami-ico { display: inline-flex; flex: none; color: var(--lay-text); } .lay-tab-allmenu-it .ami-ico svg { width: 17px; height: 17px; display: block; } .lay-tab-allmenu-it.active .ami-ico { color: var(--lay-accent); } .lay-tab-allmenu-it .ami-name { flex: 1 1 auto; } .lay-tab-allmenu-it .ami-tag { font-size: 10px; opacity: .7; padding: 1px 5px; border: 1px solid var(--lay-line); border-radius: 4px; } /* dock body = stacked resizable sections */ .lay-dock-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .lay-pane { min-height: 40px; overflow: auto; padding: 10px 12px; background: var(--lay-panel); } .lay-pane.grow { flex: 1 1 auto; } /* fills leftover space */ .lay-pane::-webkit-scrollbar { width: 10px; } .lay-pane::-webkit-scrollbar-thumb { background: var(--lay-scroll); border-radius: 5px; border: 2px solid var(--lay-panel); } /* only the active tab's pane-group is shown */ .lay-tabpage { display: none; flex: 1 1 auto; flex-direction: column; min-height: 0; } .lay-tabpage.active { display: flex; } /* dock footer (Apply / Live updates) */ .lay-dock-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--lay-line); background: var(--lay-panel-2); } /* ---- small content helpers (demo panels) ------------------------------- */ .lay-section-title { color: var(--lay-text); font-weight: 600; margin: 2px 0 8px; } .lay-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .lay-row label { color: var(--lay-muted); flex: 0 0 auto; min-width: 96px; } .lay-slider { flex: 1 1 auto; accent-color: var(--lay-accent); } .lay-field { background: var(--lay-field-bg); border: 1px solid var(--lay-line); color: var(--lay-text); border-radius: 4px; height: 22px; padding: 0 6px; width: 64px; outline: none; text-align: right; } .lay-select { background: var(--lay-field-bg); border: 1px solid var(--lay-line); color: var(--lay-text); border-radius: 4px; height: 24px; padding: 0 6px; width: 100%; outline: none; } .lay-btn { background: var(--lay-field-bg); border: 1px solid var(--lay-line); color: var(--lay-text); border-radius: 4px; padding: 5px 14px; cursor: pointer; } .lay-btn.primary { background: var(--lay-accent); border-color: var(--lay-accent); color: #fff; } .lay-btn:hover { filter: brightness(1.15); } .lay-check { display: flex; align-items: center; gap: 6px; color: var(--lay-text); cursor: pointer; } /* confirm-dialog content (render-mode switch) */ .lay-confirm-msg { color: var(--lay-text); font-size: 13px; line-height: 1.5; margin: 0 0 16px; } .lay-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; } .lay-preview-fill { height: 100%; min-height: 80px; display: flex; align-items: center; justify-content: center; color: var(--lay-muted); border: 1px dashed var(--lay-line-soft); border-radius: 4px; } /* ---- floating popup panel (Layout.popup) ------------------------------- */ .lay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; } /* All floating popups share the display-mode popover's look: Gill Sans, soft rounded corners, a quiet uppercase title bar instead of a heavy header. */ .lay-popup { position: fixed; z-index: 1000; min-width: 160px; min-height: 90px; background: var(--lay-panel); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 9px; box-shadow: 0 10px 32px var(--lay-shadow); display: flex; flex-direction: column; overflow: hidden; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 14px; } .lay-popup-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 8px 0 14px; background: transparent; border-bottom: 1px solid var(--lay-line); cursor: move; user-select: none; } .lay-popup-title { font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lay-popup-close { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--lay-muted); cursor: pointer; font-size: 15px; } .lay-popup-close:hover { background: var(--lay-hover); color: var(--lay-text); } .lay-popup-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px; } /* softer rounded buttons inside popups (scoped — the global .lay-btn is shared) */ .lay-popup .lay-btn { border-radius: 6px; padding: 6px 16px; transition: background .12s ease, border-color .12s ease, filter .12s ease; } .lay-popup .lay-btn:hover { background: var(--lay-hover); border-color: var(--lay-accent); filter: none; } .lay-popup-body::-webkit-scrollbar { width: 10px; } .lay-popup-body::-webkit-scrollbar-thumb { background: var(--lay-scroll); border-radius: 5px; border: 2px solid var(--lay-panel); } .lay-popup-resize { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 0 55%, var(--lay-muted) 55% 70%, transparent 70% 80%, var(--lay-muted) 80% 95%, transparent 95%); opacity: .4; border-radius: 0 0 6px 0; transition: opacity .12s ease; } .lay-popup-resize:hover { opacity: .85; } /* ---- themed scrollbars everywhere in the workspace (x AND y) ----------- */ .lay-root, .lay-popup { scrollbar-width: thin; scrollbar-color: var(--lay-scroll) transparent; } .lay-root ::-webkit-scrollbar, .lay-popup ::-webkit-scrollbar, .lay-canvas::-webkit-scrollbar { width: 12px; height: 12px; } .lay-root ::-webkit-scrollbar-thumb, .lay-popup ::-webkit-scrollbar-thumb, .lay-canvas::-webkit-scrollbar-thumb { background: var(--lay-scroll); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; } .lay-root ::-webkit-scrollbar-thumb:hover, .lay-popup ::-webkit-scrollbar-thumb:hover { background: var(--lay-muted); background-clip: padding-box; } .lay-root ::-webkit-scrollbar-track, .lay-popup ::-webkit-scrollbar-track, .lay-canvas::-webkit-scrollbar-track { background: transparent; } .lay-root ::-webkit-scrollbar-corner, .lay-popup ::-webkit-scrollbar-corner, .lay-canvas::-webkit-scrollbar-corner { background: transparent; } /* ---- self-contained ColorPicker class (.cp) ------------------------- */ .lay-pane.cp-host { padding: 0; } .cp { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--lay-panel); color: var(--lay-text); font-size: 12px; height: 100%; box-sizing: border-box; overflow: auto; } /* hide scrollbar on the picker panel but keep wheel/touch scrolling */ .cp { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .cp::-webkit-scrollbar { width: 0; height: 0; } .lay-pane.cp-host { scrollbar-width: none; -ms-overflow-style: none; } .lay-pane.cp-host::-webkit-scrollbar { width: 0; height: 0; } .cp .main-tabs, .cp .sub-tabs { display: flex; gap: 4px; } .cp .main-tab, .cp .sub-tab { flex: 1; text-align: center; padding: 6px 8px; border-radius: 6px; background: var(--lay-panel-2); color: var(--lay-muted); cursor: pointer; user-select: none; white-space: nowrap; font-size: 11px; } .cp .main-tab:hover, .cp .sub-tab:hover { background: var(--lay-hover); color: var(--lay-text); } .cp .main-tab.active, .cp .sub-tab.active { background: var(--lay-accent); color: #fff; } .cp .cp-paint { display: flex; flex-direction: column; gap: 10px; } .cp .cp-paint[hidden] { display: none; } .cp .cp-panel { display: flex; flex-direction: column; gap: 8px; } .cp .cp-panel[hidden] { display: none; } .cp .cp-hexrow { display: flex; align-items: center; gap: 8px; } .cp .ink-preview-swatch { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--lay-line); background: #ba4666; flex: none; background-image: linear-gradient(45deg,#888 25%,transparent 25%),linear-gradient(-45deg,#888 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#888 75%),linear-gradient(-45deg,transparent 75%,#888 75%); background-size: 10px 10px; } .cp .ink-hex-input, .cp .cp-text { flex: 1; height: var(--ui-h); box-sizing: border-box; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 0 var(--ui-pad); font-family: monospace; font-size: var(--ui-fs); outline: none; } .cp .ink-hex-input:focus, .cp .cp-text:focus { border-color: var(--lay-accent); } .cp .cp-srow { display: flex; align-items: center; gap: 8px; } .cp .cp-lab { width: 72px; flex: none; color: var(--lay-muted); } .cp .cp-ctl { flex: 1; } .cp .cp-stopcolor { width: 40px; height: var(--ui-h); border: 1px solid var(--lay-line); border-radius: 6px; background: none; padding: 0; cursor: pointer; } .cp .cp-select { flex: 1; height: var(--ui-h); box-sizing: border-box; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 0 var(--ui-pad); font-size: var(--ui-fs); outline: none; } .cp .grad-code, .cp .stroke-code { display: block; background: var(--lay-line); color: var(--lay-muted); border-radius: 6px; padding: 6px 8px; font-family: monospace; font-size: 11px; word-break: break-all; } .cp .grad-code[hidden], .cp .stroke-code[hidden] { display: none; } .cp .cp-footer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--lay-line); padding-top: 10px; margin-top: auto; } .cp .cp-wheelwrap { display: block; width: 100%; margin-bottom: 4px; } .cp .cp-wheel { width: 100%; max-width: 340px; display: block; margin: 0 auto; touch-action: none; cursor: crosshair; } .cp .cp-bar { flex: 1; display: flex; align-items: center; gap: 8px; } .cp .cp-barcanvas { flex: 1 1 auto; width: 100%; min-width: 0; height: 26px; border-radius: 6px; border: 1px solid var(--lay-line); cursor: pointer; display: block; } .cp .cp-barval { width: 30px; text-align: right; color: var(--lay-muted); font-variant-numeric: tabular-nums; } /* icon sub-tabs (paint type) — icon only, packed left, active highlighted */ .cp .cp-icontabs { gap: 2px; justify-content: flex-start; } .cp .cp-icontabs .sub-tab { flex: 0 0 auto; width: auto; height: auto; padding: 5px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 7px; color: var(--lay-muted); } .cp .cp-icontabs .sub-tab:hover { background: transparent; color: var(--lay-text); } .cp .cp-icontabs .sub-tab.active { background: var(--lay-accent-soft); color: var(--lay-accent); } .cp .cp-icontabs .sub-tab .cp-tablabel { display: none; } .cp .cp-icontabs .sub-tab svg { width: 22px; height: 22px; display: block; } /* color-model dropdown (image 2 style) */ .cp .cp-modelsel { position: relative; } .cp .cp-modelbtn { display: flex; align-items: center; gap: 8px; height: var(--ui-h); box-sizing: border-box; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 0 var(--ui-pad); font-size: var(--ui-fs); cursor: pointer; } .cp .cp-modelico { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid var(--lay-line); display: inline-block; } .cp .cp-modellab { flex: 1; } .cp .cp-caret { color: var(--lay-muted); font-size: 10px; } .cp .cp-modelmenu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--lay-panel-2); border: 1px solid var(--lay-line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45); } .cp .cp-modelitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--lay-text); } .cp .cp-modelitem:hover { background: var(--lay-hover); } .cp .cp-modelbox { display: flex; flex-direction: column; gap: 8px; } .cp .cp-note { color: var(--lay-muted); padding: 10px; text-align: center; } /* picker column: fit width, hug right (not full width) */ .cp .cp-barinput { width: 46px; flex: none; text-align: right; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 4px 6px; font-variant-numeric: tabular-nums; } .cp .cp-gradpreview, .cp .cp-patpreview { height: 40px; border-radius: 8px; border: 1px solid var(--lay-line); } .cp .cp-patpreview { flex: 0 0 auto; width: 100%; max-width: none; height: 92px; margin: 0; border-radius: 10px; overflow: hidden; position: relative; } .cp .cp-patpreview-bg { position: absolute; top: 50%; left: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; background-repeat: repeat; transform-origin: center center; } /* preview (left) + transform controls (right) */ .cp .cp-patmain { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 6px; } /* preview on TOP, controls full-width below (2 rows) */ .cp .cp-patctl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .cp .cp-patctl .cp-srow { margin: 0; } .cp .cp-patctl .cp-lab { min-width: 54px; } .cp .cp-patctl .cp-iconlab { min-width: 20px; width: 20px; flex: 0 0 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--lay-muted); } .cp .cp-patctl .cp-iconlab svg { display: block; } .cp .cp-patctl .cp-patlock { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--lay-line); border-radius: 6px; color: var(--lay-muted); cursor: pointer; } .cp .cp-patctl .cp-patlock:hover { background: var(--lay-hover); } .cp .cp-patctl .cp-patlock.on { color: #f97316; border-color: #f97316; } .cp .cp-patctl .cp-xy .number-input { text-align: center; padding-left: 2px; padding-right: 2px; } .cp .cp-patctl .cp-ctl, .cp .cp-patctl .number-wrapper { width: 100% !important; min-width: 0; } .cp .cp-xy .cp-ctl { flex: 1 1 0; min-width: 0; } .cp .cp-stoprow { gap: 8px; } .cp .cp-stoppos { width: 64px; height: var(--ui-h); box-sizing: border-box; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 0 var(--ui-pad); font-size: var(--ui-fs); } .cp .cp-stoppct { color: var(--lay-muted); } .cp .cp-stopdel { margin-left: auto; background: var(--lay-panel-2); color: var(--lay-muted); border: 1px solid var(--lay-line); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; } .cp .cp-stopdel:hover { color: #fff; } .cp .cp-addstop { background: var(--lay-panel-2); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 6px; cursor: pointer; } .cp .cp-addstop:hover { background: var(--lay-hover); } /* UI.js value editor inside a canvas bar */ .cp .cp-barnum { width: 108px; flex: none; margin-left: auto; } .cp .cp-barnum .number-wrapper { width: 100%; } .cp .cp-barnum .number-input { width: 100%; box-sizing: border-box; } .cp .cp-barnum .number-wrapper { width: 100%; } /* panel title row + model dropdown at right (reference layout) */ .cp .cp-paneltitle { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cp .cp-paneltitle-label { color: var(--lay-text); font-weight: 600; } .cp .cp-paneltitle .cp-modelsel { min-width: 96px; } .cp .cp-modelbtn { padding: 0 var(--ui-pad); } /* collapsible Color Wheel section */ .cp .cp-collap { border: 1px solid var(--lay-line); border-radius: 8px; overflow: hidden; } .cp .cp-collap-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; background: var(--lay-panel-2); user-select: none; } .cp .cp-collap-head:hover { background: var(--lay-hover); } .cp .cp-collap-car { color: var(--lay-muted); width: 10px; } .cp .cp-collap-ico { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--lay-line); } .cp .cp-collap-title { color: var(--lay-text); } .cp .cp-collap-body { padding: 10px; } .cp .cp-rgbarow .ink-hex-input { flex: 1; } /* gradient editor (reference) */ .cp .cp-section-title { font-weight: 600; color: var(--lay-text); margin-top: 4px; } .cp .cp-gradbar { position: relative; width: 100%; padding-bottom: 22px; } .cp .cp-gradpreview-big { height: 40px; border-radius: 6px; border: 1px solid var(--lay-line); background-image: linear-gradient(45deg,#777 25%,transparent 25%),linear-gradient(-45deg,#777 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#777 75%),linear-gradient(-45deg,transparent 75%,#777 75%); background-size: 12px 12px; background-position: 0 0,0 6px,6px -6px,-6px 0; } /* rounded teardrop marker (pointed head up), one piece */ .cp .cp-grad-handles { position: absolute; left: 0; right: 0; top: 34px; height: 24px; pointer-events: none; } .cp .cp-grad-handle { position: absolute; top: 0; width: 24px; height: 24px; transform: translateX(-50%); cursor: pointer; pointer-events: auto; } .cp .cp-grad-handle::after { content: ""; position: absolute; left: 50%; top: 54%; width: 17px; height: 17px; transform: translate(-50%,-50%) rotate(45deg); background: var(--stop-color, #fff); border: 2px solid var(--stop-border, #fff); border-radius: 0 50% 50% 50%; box-shadow: 0 1px 3px rgba(0,0,0,.5); box-sizing: border-box; } .cp .cp-grad-handle:hover::after { border-color: #eaeaea; } .cp .cp-grad-handle.sel { z-index: 3; } .cp .cp-grad-handle.sel::after { border-color: var(--lay-accent); box-shadow: 0 0 0 1.5px var(--lay-accent), 0 1px 3px rgba(0,0,0,.5); } .cp .cp-coloreditor { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--lay-line); border-radius: 8px; padding: 10px; } .cp .cp-stopbtns { display: flex; gap: 8px; } .cp .cp-iconbtn { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: var(--lay-panel-2); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; cursor: pointer; } .cp .cp-iconbtn:hover { background: var(--lay-hover); } /* canvas-bar value markers (DOM SVG, overflow half outside the bar) */ .cp .cp-barcv { position: relative; flex: 1 1 auto; min-width: 0; display: flex; } .cp .cp-barcv .cp-barcanvas { max-width: none; } .cp .cp-barmark { position: absolute; width: 12px; transform: translateX(-50%); pointer-events: none; z-index: 2; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .cp .cp-barmark svg { display: block; width: 12px; height: 7px; } .cp .cp-barmark.top { top: -2px; } /* tail sticks above the bar */ .cp .cp-barmark.bot { bottom: -2px; transform: translateX(-50%) scaleY(-1); } /* mirror below */ /* dropdowns inside the picker fill their row + matching SVG caret */ .cp .cp-ctl { flex: 1; min-width: 0; } .cp .cp-ctl .select-wrapper, .cp .cp-ctl .combo-wrapper { width: 100% !important; } .cp .cp-caret { display: inline-flex; align-items: center; color: var(--lay-muted); } .cp .cp-caret svg { width: 13px; height: 13px; fill: currentColor; } /* pattern library grid */ .cp .cp-patgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; padding: 6px; border: 1px solid var(--lay-line); border-radius: 8px; background: var(--lay-field-bg); } .cp .cp-patswatch { height: 42px; border: 1px solid var(--lay-line); border-radius: 6px; cursor: pointer; background-repeat: repeat; } .cp .cp-patswatch:hover { outline: 2px solid var(--lay-hover); } .cp .cp-patswatch.sel { outline: 2px solid var(--lay-accent); border-color: var(--lay-accent); } /* pattern X/Y paired inputs */ .cp .cp-xy { display: flex; gap: 8px; flex: 1; min-width: 0; } .cp .cp-xyax { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; } .cp .cp-xylab { flex: 0 0 auto; font-size: var(--ui-fs); color: var(--lay-muted); } .cp .cp-xyax .cp-ctl, .cp .cp-xyax .number-wrapper { flex: 1 1 auto; width: 100% !important; min-width: 0; } /* segmented target toggle (Color / Background) */ .cp .cp-seg { display: flex; gap: 4px; margin: 2px 0 4px; justify-content: flex-start; } .cp .cp-seg button { flex: 0 0 auto; height: var(--ui-h); padding: 0 14px; border: 1px solid var(--lay-line); background: var(--lay-field-bg); color: var(--lay-muted); border-radius: 6px; cursor: pointer; font-size: var(--ui-fs); } .cp .cp-seg button:hover { color: var(--lay-text); } .cp .cp-seg button.active { background: var(--lay-accent-soft); color: var(--lay-accent); border-color: var(--lay-accent); } /* ── Stroke style panel (Inkscape-style) ──────────────────────────────────── Dash-preview glyph sizing is GLOBAL (not .cp-scoped) on purpose: UI.select portals its open list to , so a .cp-scoped rule would never reach the dropdown rows and the inline SVGs would balloon to their intrinsic size. Colour = inherit so each glyph picks up the row text colour. */ .cp-mkico { display: block; width: 48px; height: 18px; color: inherit; flex: 0 0 auto; } .cp-dashico { display: block; width: 100%; height: 14px; color: inherit; } .cp-iconopt { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; color: inherit; } .cp-iconopt-lab { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; } .cp-dashopt { gap: 10px; } .cp-dashopt .cp-dashico { flex: 1 1 auto; width: auto; min-width: 40px; } .cp-dashopt .cp-iconopt-lab { flex: 0 0 auto; margin-left: auto; color: var(--lay-muted); } .cp-dashcustom { flex: 1 1 auto; height: 0; border-top: 2px dashed currentColor; opacity: .5; } .cp .cp-strokestyle .cp-srow[hidden] { display: none; } .cp .cp-mkplumb { display: none; } /* segmented icon buttons (Cap / Join / Order) — all options visible, click to pick */ .cp .cp-segico { display: flex; gap: 5px; flex: 0 1 auto; min-width: 0; align-items: center; } .cp .cp-segico.cp-segwrap { flex-wrap: wrap; max-width: 130px; } .cp .cp-segico button { flex: 0 0 auto; width: 36px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; cursor: pointer; } .cp .cp-segico button:hover { background: var(--lay-hover); } .cp .cp-segico button.active { background: var(--lay-accent); border-color: var(--lay-accent); color: #fff; } .cp .cp-segico button svg { display: block; width: 22px; height: 22px; color: inherit; } /* dash row: pattern dropdown (grows) + offset number (fixed) */ .cp .cp-dashrow { display: flex; gap: 6px; flex: 1; min-width: 0; } .cp .cp-dashrow > .cp-ctl { flex: 1 1 auto; min-width: 0; } .cp .cp-dashrow > .cp-dashoff { flex: 0 0 78px; } /* markers row: three compact dropdowns */ .cp .cp-markrow { display: flex; gap: 5px; flex: 1; min-width: 0; } .cp .cp-markcell { flex: 1 1 0; min-width: 0; } .cp .cp-markcell .select-input .cp-mkico { width: 100%; } /* miter limit beside the Join buttons; dimmed when join ≠ miter */ .cp .cp-miter { flex: 0 0 78px; margin-left: 8px; } .cp .cp-disabled { opacity: .4; pointer-events: none; } /* number + unit sitting together, left-aligned (e.g. stroke Width) */ .cp .cp-wunit { display: flex; gap: 6px; flex: 1; min-width: 0; justify-content: flex-start; } .cp .cp-wunit .cp-wnum { flex: 0 0 96px; min-width: 0; } .cp .cp-wunit .cp-wnum .number-wrapper { width: 100% !important; } .cp .cp-unit { flex: 0 0 72px; min-width: 0; } /* main tabs: icon + label (horizontal), left-aligned, flat active box */ .cp .main-tabs { justify-content: flex-start; } .cp .main-tab { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; color: var(--lay-muted); border-radius: 7px; } .cp .main-tab:hover { background: transparent; color: var(--lay-text); } .cp .main-tab.active { background: var(--lay-accent-soft); color: var(--lay-accent); } .cp .main-tab svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; } .cp .main-tab .cp-tablabel { display: block; font-size: 12px; line-height: 1; white-space: nowrap; } /* dock tab bar (section header tabs): hide scrollbar, keep touch/drag scroll (placed last so it overrides the global .lay-root scrollbar rules) */ .lay-dock-tabs { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .lay-dock-tabs::-webkit-scrollbar { width: 0 !important; height: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════ MOBILE / iPad TOUCH SUPPORT — fully desktop-safe: • env(safe-area-inset-*) is 0 on every non-notch device (no desktop effect) • @media (pointer: coarse) is FALSE for a mouse (desktop keeps its compact sizing) • -webkit-* properties are ignored outside iOS/Safari ═══════════════════════════════════════════════════════════════════════════════════════ */ /* Stop the PAGE from scrolling / rubber-band bouncing / pull-to-refresh. The canvas + panels manage their own scrolling; the page shell must never move (that motion read as flicker). */ html, body, .lay-root { overscroll-behavior: none; } /* The drawing surface + DRAG HANDLES own their own touch gestures (draw / pinch / splitter drag), so the browser must not hijack them for scroll/zoom/double-tap. Deliberately NOT on the scrollable dock panels/lists — those keep native touch-scroll. */ .editor-cell, .lay-splitter, .lay-splitter::after, .lay-float-bar, .lay-rail-grip { touch-action: none; } /* Kill the iOS long-press callout + blue tap-flash on the chrome, and suppress text selection while dragging tools — but KEEP real text fields fully selectable/editable (IME/text tool). */ .lay-root { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .lay-rail, .lay-menubar, .lay-toolbar, .lay-dock, .lay-float, .lay-tool, .lay-tab, .lay-menu-iconbtn, button { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* Extend the chrome out from under the iPhone notch / home indicator (with viewport-fit=cover). */ @supports (padding: max(0px)) { .lay-root { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } /* Finger-friendly hit targets — TOUCH DEVICES ONLY (a mouse keeps the compact desktop sizing). min-* grows small controls without shrinking anything; the responsive option bar collapses overflow into its "More" menu, so wider controls don't break the layout. */ @media (pointer: coarse) { .lay-tool { min-width: 40px; min-height: 40px; } .lay-menubar .lay-menu-iconbtn { min-width: 38px; min-height: 38px; } .lay-tab { min-width: 40px; min-height: 40px; } .num-step { min-width: 34px; min-height: 34px; } }