/* ============================================================================ 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); } /* popup-window chrome tokens — theme-agnostic; ONE lever for every Layout.popup window's font / corner-radius / shadow (shadow colour still tracks the theme). */ :root { --lay-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; --lay-popup-radius: 9px; --lay-popup-shadow: 0 10px 32px var(--lay-shadow); } /* 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: 50px; height: 50px; 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), ROUNDED ──────────────── Overlapping fill (front, solid) + stroke (back, hollow frame) swatches with soft rounded corners (user: "แบบเก่า แต่มุมโค้งมน"), a swap arrow (top-right), a default-colours mini button (bottom-left), and the paint row below. Rail-scoped + .ai-proxy for specificity so these win over style.css. */ #host-toolbar.lay-rail.left #color_tools.ai-proxy { width: 50px; height: 50px; position: relative; overflow: visible; margin: 14px auto 2px; justify-self: center; } #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_fill { top: 3px; left: 4px; z-index: 1; } #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke { top: 18px; left: 19px; z-index: 1; } /* 1-col swatch size bumped from the 20px base so the enlarged proxy stays proportioned */ #host-toolbar.lay-rail.left #color_tools.ai-proxy .color_block { width: 25px; height: 25px; border-radius: 6px; } #host-toolbar.lay-rail.left #color_tools.ai-proxy .color_block svg { width: 25px; height: 25px; border-radius: 6px; } #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 (box-shadow follows the border-radius → soft rounded halo) */ #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 frame with a see-through centre (rounded) */ #host-toolbar.lay-rail.left #color_tools.ai-proxy #tool_stroke #stroke_color:after { left: 6px; right: 6px; top: 6px; bottom: 6px; border-radius: 3px; 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: 18px; height: 18px; position: absolute; top: -5px; right: -6px; 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: 18px; height: 18px; 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: 17px; height: 17px; position: absolute; bottom: -5px; left: -5px; 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: 17px; height: 17px; display: block; } /* None / Color / Linear / Radial / Conic / Pattern row (6 btns → wraps 3+3) */ #host-toolbar.lay-rail.left #paint_row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; align-items: center; margin: 9px auto 4px; width: 54px; /* 3 × 16px + 2 × 3px per line → 2 lines of 3 */ } #host-toolbar.lay-rail.left #paint_row .paint_btn { width: 16px; height: 16px; 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: 16px; height: 16px; 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; border-radius: 8px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy .color_block svg { width: 34px; height: 34px; border-radius: 8px; } #host-toolbar.lay-rail.left.cols-2 #color_tools.ai-proxy #tool_stroke #stroke_color:after { left: 8px; right: 8px; top: 8px; bottom: 8px; border-radius: 4px; } #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: 67px; gap: 5px; margin: 14px auto 8px; } /* 3 × 19px + 2 × 5px per line → 2 lines of 3 */ #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; scroll-padding-right: 60px; /* scrollIntoView must clear the sticky ▾ cluster */ } .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; gap: 4px; flex: 0 0 auto; width: auto; min-width: 40px; padding: 0 10px; 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); } /* close = INLINE next to the icon (Inkscape-style), not a floating corner badge: always visible on the active tab, appears on hover for the rest */ .lay-tab .lay-tab-close { position: static; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: 16px; line-height: 1; color: var(--lay-muted); background: transparent; } .lay-tab.active .lay-tab-close, .lay-tab:hover .lay-tab-close { display: flex; } .lay-tab .lay-tab-close:hover { background: var(--lay-line); color: var(--lay-text); } /* 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; } /* ---- multi-panel dock (Inkscape-style groups/columns) -------------------- */ /* layout.js DockGroups wraps the dock into columns of stacked tab-groups: #dock > .lay-dock-cols > .lay-dock-col > .lay-dock-group > (.lay-dock-tabs + .lay-dock-gbody) flex-grow carries the px weight a splitter drag assigns, so ratios survive resizes. */ .lay-dock-cols { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; min-width: 0; } .lay-dock-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 200px; min-height: 0; } .lay-dock-group { flex: 1 1 0; display: flex; flex-direction: column; min-height: 64px; min-width: 0; overflow: hidden; } .lay-dock-gbody { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* folded group = just its tab strip (the chevron in the strip toggles it) */ .lay-dock-group.folded { flex: 0 0 auto !important; min-height: 0; } .lay-dock-group.folded > .lay-dock-gbody { display: none; } /* a second column lifts the single-column width caps (JS drives the actual width) */ .lay-dock.multi-col { max-width: none; } /* splitters between groups (row) and columns (col) — same look as .lay-splitter */ .lay-dock-rsplit, .lay-dock-csplit { flex: 0 0 5px; position: relative; background: var(--lay-line); z-index: 4; touch-action: none; } .lay-dock-rsplit { cursor: row-resize; } .lay-dock-csplit { cursor: col-resize; } .lay-dock-rsplit::after, .lay-dock-csplit::after { content: ""; position: absolute; inset: -3px; } .lay-dock-rsplit:hover, .lay-dock-rsplit.dragging, .lay-dock-csplit:hover, .lay-dock-csplit.dragging { background: var(--lay-accent); } .lay-dock-rsplit::before { content: ""; position: absolute; top: 1px; left: 50%; width: 22px; height: 3px; transform: translateX(-50%); opacity: .6; background: radial-gradient(circle, var(--lay-muted) 1px, transparent 1.4px) center / 5px 3px repeat-x; } .lay-dock-csplit::before { content: ""; position: absolute; left: 1px; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); opacity: .6; background: radial-gradient(circle, var(--lay-muted) 1px, transparent 1.4px) center / 3px 5px repeat-y; } /* per-strip sticky button cluster: [▾ all-panels (main strip only)] [fold chevron] */ .lay-strip-tools { position: sticky; right: 0; margin-left: auto; z-index: 3; display: flex; flex: 0 0 auto; align-items: stretch; background: var(--lay-bar); border-left: 1px solid var(--lay-line); } .lay-strip-tools .lay-tabs-menu { position: static; border-left: none; } /* a strip without buttons (non-main groups — the fold chevron was removed) shows nothing */ .lay-strip-tools:empty { display: none; } /* drag ghost: a floating pill of the tab being dragged */ .lay-tab-ghost { position: fixed; z-index: 600; pointer-events: none; display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 7px; background: var(--lay-panel-2, #2b2b2b); color: var(--lay-text); border: 1px solid var(--lay-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); font-size: 12.5px; font-family: "Segoe UI", system-ui, sans-serif; opacity: .92; white-space: nowrap; } .lay-tab-ghost .ami-ico { display: inline-flex; color: var(--lay-accent); } .lay-tab-ghost .ami-ico svg { width: 16px; height: 16px; display: block; } .lay-tab-ghost.as-float { border-style: dashed; opacity: .8; } /* insertion caret between tabs while hovering a strip */ .lay-dock-insbar { position: fixed; z-index: 601; pointer-events: none; width: 3px; background: var(--lay-accent); border-radius: 2px; box-shadow: 0 0 6px var(--lay-accent); } .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: var(--lay-popup-radius); box-shadow: var(--lay-popup-shadow); display: flex; flex-direction: column; overflow: hidden; font-family: var(--lay-font); 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: 13px; letter-spacing: 0; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lay-popup-close { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #fff; cursor: pointer; font-size: 20px; } .lay-popup-close:hover { background: var(--lay-hover); color: #fff; } .lay-popup-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px; } /* full-bleed body (opts.bodyClass:'flush') — for gallery/tool windows that own their own scroll + sidebar layout (e.g. the migrated .fg-* windows) instead of the padded default */ .lay-popup-body.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* 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; } /* No-selection DISABLED state (user 2026-07-08): faint backdrop over the whole picker + block all clicks. w2ColorPanel toggles .cp-nosel on #cp-host whenever the worker reports no selection. */ .cp-host.cp-nosel { position: relative; } .cp-host.cp-nosel > .cp { pointer-events: none; } .cp-host.cp-nosel::after { content: ''; position: absolute; inset: 0; z-index: 40; background: rgba(12, 12, 16, 0.4); cursor: not-allowed; } .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; min-width: 0; 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; } /* RGBA row must FIT (chip + hex + eyedropper): shrink its label so the input never pushes the eyedropper past the panel edge */ .cp .cp-rgbarow .cp-lab { width: 44px; flex: 0 0 44px; } .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; } /* CURRENT pattern row (tile + name) + Library button — the grid lives in a popup now */ .cp .cp-patcur { gap: 8px; } .cp .cp-patcur-tile { width: 40px; height: 40px; flex: none; border: 1px solid var(--lay-line); border-radius: 8px; cursor: pointer; padding: 0; background-repeat: repeat; } .cp .cp-patcur-tile:hover { border-color: var(--lay-accent); } .cp .cp-patcur-nm { min-width: 0; color: var(--lay-text); font-size: 12px; } .cp .cp-patcur-cat { display: block; font-size: 10px; color: var(--lay-muted); } .cp .cp-patlib-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; } .cp .cp-patlib-btn svg { width: 14px; height: 14px; } /* Pattern Library window — reuses the Brush Library shell (bru-gal-*) with a SQUARE tile grid */ .cp-patlib .cp-plib-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; align-content: start; padding: 4px 2px; } .cp-plib-cell { cursor: pointer; border-radius: 10px; padding: 5px; border: 1px solid transparent; box-sizing: border-box; } .cp-plib-cell:hover { background: rgba(255,255,255,.05); } .cp-plib-cell.on { border-color: var(--lay-accent, #4a90d9); background: rgba(74,144,217,.10); } .cp-plib-prev { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.10); background-repeat: repeat; } .cp-plib-nm { margin-top: 5px; font-size: 11px; color: var(--lay-text, #ddd); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* live pattern colour chips + swap + quick transform row */ .cp .cp-pchips { display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; align-items: center; } .cp .cp-pchip { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--lay-line); cursor: pointer; padding: 0; flex: none; } .cp .cp-pchips .cp-pchip:nth-child(n+6) { width: 26px; height: 26px; } /* palettes of 6+ chips stay on one row */ .cp .cp-pchip.on { box-shadow: 0 0 0 2px var(--lay-accent); border-color: transparent; } .cp .cp-patswap { width: 28px; height: 28px; flex: none; } .cp .cp-patswap svg { width: 15px; height: 15px; } .cp .cp-patquick { gap: 8px; align-items: center; } /* the pattern panel breathes a bit more than the default 8px stack */ .cp .cp-panel.cp-pattern { gap: 10px; } /* angle dial (drag needle) + its numeric twin — on its own row, number capped */ .cp .cp-dialwrap { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; } .cp .cp-dialnum { max-width: 96px; } .cp .cp-dial { width: 26px; height: 26px; flex: none; color: var(--lay-muted); cursor: grab; touch-action: none; } .cp .cp-dial:active { cursor: grabbing; } .cp .cp-dial:hover { color: var(--lay-text); } .cp .cp-dial svg { width: 26px; height: 26px; display: block; } .cp .cp-dialnum { flex: 1 1 0; min-width: 0; } .cp .cp-dialnum .number-wrapper { width: 100% !important; min-width: 0; box-sizing: border-box; } .cp .cp-dialnum .number-input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding-left: 2px; padding-right: 2px; } .cp .cp-patquick .cp-iconlab { width: 18px; min-width: 18px; flex: 0 0 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--lay-muted); } .cp .cp-patquick .cp-ctl { flex: 1 1 0; min-width: 0; } .cp .cp-patquick .number-wrapper { width: 100% !important; min-width: 0; box-sizing: border-box; } .cp .cp-patquick .number-input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding-left: 2px; padding-right: 2px; } /* 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; } /* ── Layout D input modes (mode dropdown + per-mode input area) ─────────── */ /* one top row: mode dropdown (grows) + compact colour-model dropdown (right) */ .cp .cp-toprow { display: flex; gap: 6px; align-items: stretch; } .cp .cp-toprow .cp-modesel { flex: 1 1 auto; min-width: 0; } .cp .cp-toprow .cp-modelsel:not(.cp-modesel) { flex: 0 0 auto; width: 92px; } .cp .cp-toprow .cp-modelsel:not(.cp-modesel) .cp-modelmenu { left: auto; right: 0; min-width: 124px; } /* quick strip: last-used colours, one click, no mode switch */ .cp .cp-quick { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .cp .cp-qsw { height: 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; box-sizing: border-box; } .cp .cp-qsw:hover { outline: 2px solid var(--lay-accent); } .cp .cp-modesel .cp-modelbtn { width: 100%; box-sizing: border-box; } .cp .cp-modeico { width: 16px; height: 16px; flex: none; display: inline-flex; color: var(--lay-accent); } .cp .cp-modeico svg { width: 16px; height: 16px; display: block; } .cp .cp-modemenu { max-height: 300px; overflow: auto; z-index: 40; } .cp .cp-modehd { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--lay-muted); padding: 6px 8px 2px; } .cp .cp-modeitem .cp-modeico { color: var(--lay-muted); } .cp .cp-modeitem.active { background: var(--lay-accent-soft); color: var(--lay-accent); } .cp .cp-modeitem.active .cp-modeico { color: var(--lay-accent); } .cp .cp-inbox { display: flex; flex-direction: column; gap: 8px; min-height: 96px; justify-content: center; } .cp .cp-sv { width: 100%; height: 148px; border-radius: 8px; position: relative; cursor: crosshair; touch-action: none; border: 1px solid var(--lay-line); box-sizing: border-box; } .cp .cp-dot { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; box-sizing: border-box; } .cp .cp-cbar { height: 14px; border-radius: 7px; position: relative; cursor: pointer; touch-action: none; } .cp .cp-huebar { background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); } .cp .cp-kbar { height: 20px; border-radius: 9px; background: linear-gradient(90deg,#ff8a3c,#ffd9b0,#fff,#cfe4ff,#9ec2ff); } .cp .cp-shbar { height: 20px; border-radius: 9px; } .cp .cp-kn { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; } .cp .cp-wh2 { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; position: relative; touch-action: none; cursor: pointer; } .cp .cp-wh2-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); } .cp .cp-wh2-in { position: absolute; inset: 32px; border-radius: 50%; background: var(--lay-panel); display: flex; align-items: center; justify-content: center; } .cp .cp-wsv { width: 92px; height: 92px; border-radius: 6px; position: relative; cursor: crosshair; touch-action: none; } .cp .cp-triwrap { width: 100%; } .cp .cp-fields { display: flex; gap: 5px; } .cp .cp-fld { flex: 1; display: flex; align-items: center; gap: 3px; background: var(--lay-field-bg); border: 1px solid var(--lay-line); border-radius: 6px; padding: 4px 6px; min-width: 0; } .cp .cp-fll { font-size: 10px; color: var(--lay-muted); flex: none; } .cp .cp-fli { width: 100%; min-width: 0; background: transparent; border: 0; color: var(--lay-text); font-size: 11px; text-align: right; outline: none; padding: 0; font-variant-numeric: tabular-nums; } .cp .cp-flv { width: 100%; min-width: 0; color: var(--lay-text); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } .cp .cp-swgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; } .cp .cp-swc { aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; } .cp .cp-swc:hover { outline: 2px solid var(--lay-accent); } .cp .cp-hmrow { display: flex; align-items: center; gap: 8px; } .cp .cp-hmlbl { width: 86px; font-size: 11px; color: var(--lay-muted); flex: none; } .cp .cp-hmsw { flex: 1; display: flex; gap: 5px; min-width: 0; } .cp .cp-hmsw .cp-swc { flex: 1; aspect-ratio: auto; height: 26px; } .cp .cp-a11y-sample { height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; border: 1px solid var(--lay-line); } .cp .cp-a11ybg { width: 24px; height: 24px; flex: none; border-radius: 5px; border: 1px solid var(--lay-line); cursor: pointer; } .cp .cp-a11y-ratio { margin-left: auto; font-family: monospace; font-size: 15px; color: var(--lay-text); } .cp .cp-badge { font-size: 10px; font-family: monospace; padding: 2px 8px; border-radius: 5px; border: 1px solid transparent; } .cp .cp-pass { color: #5bc48c; background: rgba(91,196,140,.12); } .cp .cp-fail { color: #f0616b; background: rgba(240,97,107,.12); } .cp .cp-btn { background: var(--lay-panel-2); border: 1px solid var(--lay-line); border-radius: 6px; color: var(--lay-text); font-size: 11px; padding: 5px 9px; cursor: pointer; } .cp .cp-btn:hover { border-color: var(--lay-accent); } .cp .cp-tprow { display: flex; justify-content: space-between; align-items: center; font-size: 10px; } .cp .cp-ktxt { color: var(--lay-text); font-size: 12px; } .cp .cp-tpre { display: flex; gap: 5px; } .cp .cp-tpre .cp-btn { flex: 1; text-align: center; padding: 5px 0; } .cp .cp-dropz { width: 100%; height: 120px; border: 1.5px dashed var(--lay-line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--lay-muted); cursor: pointer; box-sizing: border-box; text-align: center; } .cp .cp-dropz:hover { border-color: var(--lay-accent); } .cp .cp-imgc { width: 100%; height: 120px; border-radius: 8px; cursor: crosshair; display: none; background: var(--lay-field-bg); } .cp .cp-mchip { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--lay-line); flex: none; cursor: pointer; } .cp .cp-mres { width: 26px; height: 26px; cursor: default; } .cp .cp-hexprev { width: 100%; height: 52px; border-radius: 8px; border: 1px solid var(--lay-line); box-sizing: border-box; } .cp .cp-hexbig-row { display: flex; align-items: stretch; border: 1px solid var(--lay-line); border-radius: 8px; overflow: hidden; background: var(--lay-field-bg); } .cp .cp-hexbig-pfx { padding: 0 10px; display: flex; align-items: center; color: var(--lay-muted); font-family: monospace; background: rgba(0,0,0,.18); } .cp .cp-hexbig { flex: 1; background: transparent; border: 0; font-family: monospace; font-size: 15px; letter-spacing: 2px; color: var(--lay-text); padding: 9px 6px; outline: none; text-transform: uppercase; min-width: 0; } .cp .cp-hexbig-cp { width: 38px; display: flex; align-items: center; justify-content: center; color: var(--lay-muted); cursor: pointer; border-left: 1px solid var(--lay-line); } .cp .cp-hexbig-cp:hover { color: var(--lay-accent); } .cp .cp-hexbig-cp svg { width: 15px; height: 15px; } .cp .cp-eyebtn { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--lay-panel-2); border: 1px solid var(--lay-line); border-radius: 6px; color: var(--lay-muted); cursor: pointer; padding: 0; } .cp .cp-eyebtn:hover { color: var(--lay-text); border-color: var(--lay-accent); } .cp .cp-eyebtn svg { width: 16px; height: 16px; } .cp .cp-mut { font-size: 11px; color: var(--lay-muted); } /* 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 breathes like the redesigned Fill/Pattern sections */ .cp .cp-strokestyle { gap: 10px; } .cp .cp-strokestyle .cp-dashrow { display: flex; gap: 8px; min-width: 0; flex: 1; } /* ── 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. */ /* merged: OUR enlarged glyph sizes + .cp-profico (both from this session's big-UI work) UNION MAIN's .cp-segopt dropdown-glyph rules + the menubar-font .cp-iconopt-lab (main's intentional change; our side only echoed the stale base 12px). */ .cp-mkico { display: block; width: 56px; height: 24px; color: inherit; flex: 0 0 auto; } .cp-dashico { display: block; width: 100%; height: 20px; color: inherit; } .cp-profico { width: 96px !important; height: 26px !important; } .cp-iconopt { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; color: inherit; padding: 3px 0; } /* Join/Cap/Order preview-dropdown glyphs — GLOBAL like cp-mkico (the open list is portaled to , a .cp-scoped rule would never reach it and the svg balloons) */ .cp-segopt svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; color: inherit; } .cp-segopt .cp-iconopt-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* icon+label dropdown option text uses the MENUBAR font (user: "dropdown font ขอแบบ menubar"). GLOBAL (the open list is portaled to ) — matches .menu_item's Gill Sans / 13px. */ .cp-iconopt-lab { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; } .cp-dashopt { gap: 12px; } .cp-dashopt .cp-dashico { flex: 1 1 auto; width: auto; min-width: 56px; } .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: 6px; flex: 0 1 auto; min-width: 0; align-items: center; } .cp .cp-segico.cp-segwrap { flex-wrap: wrap; max-width: 156px; } .cp .cp-segico button { flex: 0 0 auto; width: 44px; height: 38px; 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: 7px; 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; } /* merged: OUR enlarged base svg (28px) + MAIN's .cp-strokestyle .cp-segico override block (it wins by specificity where the stroke-tab buttons actually render) bumped to this session's enlarged sizes (44×38 button / 28px svg) so the "big UI" intent holds; MAIN's miter styling kept. */ .cp .cp-segico button svg { display: block; width: 28px; height: 28px; color: inherit; } .cp .cp-strokestyle .cp-segico { gap: 6px; } .cp .cp-strokestyle .cp-segico button { width: 44px; height: 38px; border-radius: 7px; } .cp .cp-strokestyle .cp-segico button svg { width: 28px; height: 28px; } .cp .cp-strokestyle .cp-segico.cp-segwrap { flex-wrap: wrap; max-width: 156px; } .cp .cp-strokestyle .cp-miter { flex: 0 0 76px; } .cp .cp-strokestyle .cp-miter .number-wrapper { width: 100% !important; min-width: 0; box-sizing: border-box; } .cp .cp-strokestyle .cp-miter .number-input { width: 100%; min-width: 0; box-sizing: border-box; } /* 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 72px; min-width: 0; } /* the dashoffset stepper must fit its 72px cell — was overflowing past the panel's right edge (r_mr9ft95ksqwbe) */ .cp .cp-dashoff .number-wrapper { width: 100% !important; min-width: 0; box-sizing: border-box; } /* markers row: three preview buttons → click opens the marker popup */ .cp .cp-markrow { display: flex; gap: 6px; flex: 1; min-width: 0; } .cp .cp-markcell { flex: 1 1 0; min-width: 0; } .cp .cp-markcell .select-input .cp-mkico { width: 100%; } .cp .cp-markbtn { width: 100%; height: 38px; padding: 2px 6px; 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: 7px; cursor: pointer; } .cp .cp-markbtn:hover { background: var(--lay-hover); } .cp .cp-markbtn .cp-mkico { width: 100%; height: 26px; } /* marker popup (Layout.popup body) */ .cp-mkpop { display: flex; flex-direction: column; gap: 10px; padding: 10px; } .cp-mkpop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } .cp-mkpop-cell { height: 46px; 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: 8px; cursor: pointer; } .cp-mkpop-cell:hover { background: var(--lay-hover); } .cp-mkpop-cell.active { background: var(--lay-accent-soft); border-color: var(--lay-accent); color: var(--lay-accent); } .cp-mkpop-cell svg { display: block; width: 30px; height: 30px; color: inherit; } .cp-mkpop-none { font-size: 20px; color: var(--lay-muted); } .cp-mkpop-row { display: flex; align-items: center; gap: 10px; } .cp-mkpop-lab { flex: 0 0 116px; font-size: 12px; color: var(--lay-muted); } .cp-mkpop-num { flex: 0 0 88px; height: 28px; background: var(--lay-field-bg); color: var(--lay-text); border: 1px solid var(--lay-line); border-radius: 6px; padding: 0 8px; } .cp-mkpop-seg button { padding: 0 10px; height: 28px; border: 1px solid var(--lay-line); background: var(--lay-field-bg); color: var(--lay-muted); border-radius: 6px; cursor: pointer; font-size: 12px; } .cp-mkpop-seg button.active { background: var(--lay-accent-soft); color: var(--lay-accent); border-color: var(--lay-accent); } /* 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; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ FIGMA-STYLE MOBILE / iPad LAYOUT — every rule is scoped to a touch mode class that a fine-pointer desktop NEVER receives (layout.js LM.apply() bails when matchMedia('(pointer:coarse)') is false), so desktop chrome is byte-identical. Two densities: .mode-minimal (Figma floating chrome) and .mode-full (the desktop chrome, touch-sized). The Full·Min toggle floats in both. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* the injected floating pieces are inert until a mode turns them on */ .lm-topbar, .lm-pill, .lm-seg, .lm-scrim { display: none; } /* scrim behind the dock bottom-sheet */ .lm-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 390; } .lm-scrim.on { opacity: 1; pointer-events: auto; } /* Full·Min toggle — floats top-right in BOTH touch modes so you can always switch back */ .lay-root.touch .lm-seg { display: inline-flex; position: absolute; z-index: 430; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 9px; padding: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.45); } .lm-segbtn { border: 0; background: transparent; color: var(--lay-muted, #8a8a8a); font: 600 12px/1 system-ui, sans-serif; padding: 0 12px; min-height: 32px; border-radius: 7px; cursor: pointer; } .lm-segbtn.on { background: var(--lay-accent, #4a90d9); color: #fff; } /* ── MINIMAL: floating top bar + tool pill, canvas full-bleed, desktop chrome hidden ── */ .lay-root.mode-minimal .lm-topbar { display: flex; align-items: center; gap: 8px; position: absolute; left: 0; right: 0; top: 0; height: 52px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); padding-right: 96px; z-index: 420; pointer-events: none; } .lay-root.mode-minimal.lm-sheeting .lm-topbar, .lay-root.mode-minimal.lm-sheeting .lm-pill { opacity: 0; pointer-events: none !important; transition: opacity .15s; } .lm-topbar > * { pointer-events: auto; } .lm-spacer { flex: 1 1 auto; } .lm-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--lay-line, #1c1c1c); background: var(--lay-panel, #2b2b2b); color: var(--lay-text, #d0d0d0); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .lm-btn:active { background: var(--lay-hover, #3a3a3a); } .lay-root.mode-minimal .lm-pill { display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 420; background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 16px; padding: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.55); } .lm-tool { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 0; background: transparent; color: var(--lay-text, #d0d0d0); font-size: 19px; line-height: 1; cursor: pointer; } .lm-tool.on { background: var(--lay-accent, #4a90d9); color: #fff; } .lm-tool:active { background: var(--lay-hover, #3a3a3a); } .lm-more { color: var(--lay-muted, #8a8a8a); } /* MINIMAL: hide the fixed desktop regions → canvas is full-bleed (it already fills .lay-body). NB: #host-options is NOT hidden — it floats as a contextual toolbar (below). */ .lay-root.mode-minimal .lay-menubar, .lay-root.mode-minimal #host-toolbar, .lay-root.mode-minimal #host-zoom, .lay-root.mode-minimal #host-cmdbar { display: none !important; } /* MINIMAL: the tool/selection OPTION BAR floats as a Figma-style contextual toolbar — a dark rounded pill under the top bar. It swaps its section per active tool (option-mode), so it shows the text controls on the Text tool, shape controls on a shape, etc. Only when it actually has content. */ .lay-root.mode-minimal #host-options { display: block !important; position: absolute !important; left: 8px; right: 8px; top: calc(max(6px, env(safe-area-inset-top)) + 50px); z-index: 419; height: auto !important; background: var(--fig-bar, #17171A); border: 1px solid var(--fig-line, #26262B); border-radius: 13px; box-shadow: var(--fig-shadow, 0 4px 16px rgba(0,0,0,.5)); overflow: hidden; } .lay-root.mode-minimal.lm-sheeting #host-options { opacity: 0; pointer-events: none; } /* the INNER #option_bar is the horizontal scroller (swipe to reach controls that overflow). */ .lay-root.mode-minimal #host-options > #option_bar { padding: 4px 6px !important; display: flex !important; align-items: center; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } /* OptionBarFlex.setDisabled keeps every control in the row (no ⋯ collapse) → let the row grow to its content width and scroll. Must beat boot's 1-id `overflow-x:hidden!important` + the `:not([data-flex-ready]){visibility:hidden}` gate (our 2-class+id selector wins on specificity). NB: never override `display` here — the option-mode swap hides inactive sections with an inline `display:none`, and a `display:flex!important` would force ALL sections visible at once. */ .lay-root.mode-minimal #host-options section[id^="option_bar_"], .lay-root.mode-minimal #host-options section[id^="option_bar_"] > div { overflow: visible !important; flex-wrap: nowrap !important; width: max-content !important; min-width: 100%; gap: 4px; align-items: center; } /* un-hide the not-ready gate (harmless on display:none sections — visibility can't reveal them) */ .lay-root.mode-minimal #host-options section[id^="option_bar_"] { visibility: visible !important; } .lay-root.mode-minimal #host-options [data-flex-more] { display: none !important; } /* stray ⋯ overflow btn */ /* touch-size the option-bar controls inside the floating pill */ .lay-root.mode-minimal #host-options .number-wrapper, .lay-root.mode-minimal #host-options select, .lay-root.mode-minimal #host-options button, .lay-root.mode-minimal #host-options .op-btn, .lay-root.mode-minimal #host-options .option_button, .lay-root.mode-minimal #host-options [data-op], .lay-root.mode-minimal #host-options [data-mode] { min-height: 34px; flex: 0 0 auto; } /* keep wide combos (font family/style) from eating the whole bar — cap them, the rest scrolls */ .lay-root.mode-minimal #host-options .option_input, .lay-root.mode-minimal #host-options .combo-wrapper, .lay-root.mode-minimal #host-options select, .lay-root.mode-minimal #host-options .lay-combo, .lay-root.mode-minimal #host-options input[type="text"] { max-width: 132px !important; } .lay-root.mode-minimal #host-options #option_bar::-webkit-scrollbar, .lay-root.mode-minimal #host-options::-webkit-scrollbar { display: none; height: 0; } /* MINIMAL: the ⋯ More button reveals the real tool rail as a floating strip (all tools) */ .lay-root.mode-minimal.lm-rail-open #host-toolbar { display: flex !important; position: absolute; left: 8px; bottom: 78px; top: auto; width: 58px; max-height: 62vh; overflow-y: auto; z-index: 416; background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.55); } /* MINIMAL: the right dock OVERLAY becomes a bottom SHEET, summoned by ☰ */ .lay-root.mode-minimal .lay-right-overlay { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 64vh; max-height: 64vh; min-width: 0; transform: translateY(101%); transition: transform .24s ease; z-index: 400; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -8px 30px rgba(0,0,0,.55); } .lay-root.mode-minimal .lay-right-overlay.lm-sheet-open { transform: translateY(0); } .lay-root.mode-minimal .lay-right-overlay .lay-splitter, .lay-root.mode-minimal .lay-right-overlay #host-cmdbar { display: none; } .lay-root.mode-minimal .lay-dock { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100%; } /* ── FULL: the desktop chrome, touch-sized (the @media(pointer:coarse) block already grows targets). No structural change — "show everything". The floating Min·Full toggle stays reachable (above). ── */ /* MINIMAL: hide the ruler + scrollbar overlays for a clean full-bleed canvas (data-layout on so it reaches these even if they portal outside .lay-root). Grid stays (it's a View-menu opt-in). */ html[data-layout="minimal"] .w2ruler-root, html[data-layout="minimal"] .w2sb-root { display: none !important; } /* ── WAVE 2: contextual SELECTION BAR — floats above the tool pill in MINIMAL when an object is selected (root gets .lm-has-sel from host.onState('sel-rect')). Style→Fill&Stroke sheet, Layers→layers sheet, Duplicate/Delete→existing commands. Hidden while a sheet is open. ── */ .lm-selbar { display: none; } .lay-root.mode-minimal.lm-has-sel .lm-selbar { display: flex; gap: 5px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); z-index: 421; background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 13px; padding: 5px 6px; box-shadow: 0 6px 22px rgba(0,0,0,.55); } .lay-root.mode-minimal.lm-sheeting .lm-selbar { opacity: 0; pointer-events: none; } .lm-selbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; min-width: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--lay-text, #d0d0d0); font: 600 13px/1 system-ui, sans-serif; cursor: pointer; } .lm-selbtn:active { background: var(--lay-hover, #3a3a3a); } .lm-sel-style { background: var(--lay-accent, #4a90d9); color: #fff; } .lm-sel-del { color: #e5658a; } /* WAVE 2: iPad (bp-tablet) FULL — fatter, touch-friendly dock splitter grab */ .lay-root.mode-full.bp-tablet .lay-splitter.v { width: 14px; } .lay-root.mode-full.bp-tablet .lay-splitter.v::after { inset: -10px; } /* ── WAVE 3: touch-size the body-portaled popovers (combos / settings / all-panels / menu dropdowns). They mount on document.body → escape .lay-root, so they key on html[data-layout] (set by LM.setMode). ── */ html[data-layout] .lay-combo-opt, html[data-layout] .lay-tab-allmenu-it, html[data-layout] .menu_list .menu_item { min-height: 42px !important; } html[data-layout] .lay-combo-menu, html[data-layout] .lay-tab-allmenu, html[data-layout] .menu_list { max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } html[data-layout] .lay-menu-pop button, html[data-layout] .lay-menu-pop .lay-combo, html[data-layout] .lay-display-pop > * { min-height: 40px; } /* WAVE 3: MENU drawer — the ≣ top-bar button reveals the real menubar as a top strip in minimal (mode-minimal hides it by default; .lm-menu-open + higher specificity brings it back). */ .lay-root.mode-minimal.lm-menu-open .lay-menubar { display: flex !important; position: absolute; left: 8px; right: 8px; top: calc(max(6px, env(safe-area-inset-top)) + 50px); z-index: 418; background: var(--lay-panel, #2b2b2b); border: 1px solid var(--lay-line, #1c1c1c); border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.55); overflow-x: auto; height: auto; min-height: 46px; } /* ── WAVE 4: nested menubar submenus on TOUCH — the desktop fly-out (left:100%) lands off a phone screen and is hover-only. Force every submenu inline + hidden, and render it as an ACCORDION below its parent only when tapped (.lm-sub-open added by LM.bindMenuTap). Touch-layout-gated. ── */ html[data-layout] .menu_item.has_submenu > .submenu { position: static !important; left: auto !important; top: auto !important; right: auto !important; display: none !important; } html[data-layout] .menu_item.has_submenu.lm-sub-open > .submenu { display: block !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin: 2px 0 4px 14px !important; max-height: none !important; min-width: 0 !important; background: rgba(255,255,255,.04); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ FIGMA-SPEC visual polish for the mobile floating chrome. Scoped to .lay-root.touch so desktop is untouched. Figma design language: dark surfaces, #0d99ff accent for the active tool, tight radii, crisp monochrome SVG icons, system/Inter type. (Overrides the earlier generic .lm-* styling.) ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* Spec token system (dark). Accent = Rayzia Tangerine; selection blue stays a SEPARATE hue so a selected object never reads as the active tool. */ .lay-root.touch { --fig-app: #0E0E10; --fig-bar: #17171A; --fig-bar-2: #1E1E22; --fig-sheet: #1B1B1F; --fig-line: #26262B; --fig-divider: #1E1E22; --fig-fg: #ECECEE; --fig-muted: #9A9AA2; --fig-t3: #626268; --fig-accent: #F5772B; --fig-accent-hover: #FF8A45; --fig-accent-press: #D9631D; --fig-accent-sub: rgba(245,119,43,.14); --fig-accent-ink: #17110B; --fig-sel: #3B82F6; --fig-danger: #F0616B; --fig-shadow: 0 4px 16px rgba(0,0,0,.5); } /* Spec token system (light) — touch chrome in the light theme */ html[data-theme="light"] .lay-root.touch { --fig-app: #F4F4F5; --fig-bar: #FFFFFF; --fig-bar-2: #F0F0F2; --fig-sheet: #FFFFFF; --fig-line: #E2E2E6; --fig-divider: #ECECEF; --fig-fg: #1A1A1E; --fig-muted: #5B5B63; --fig-t3: #8C8C94; --fig-accent: #E4630F; --fig-accent-hover: #F5772B; --fig-accent-press: #C4530A; --fig-accent-sub: rgba(245,119,43,.12); --fig-accent-ink: #17110B; --fig-sel: #2563EB; --fig-danger: #DC3B47; --fig-shadow: 0 4px 16px rgba(20,20,24,.14); } /* all icon glyphs render as crisp SVG */ .lay-root.touch .lm-btn svg, .lay-root.touch .lm-tool svg, .lay-root.touch .lm-selbtn svg { width: 22px; height: 22px; display: block; } /* top-bar buttons — Figma flat dark, subtle */ .lay-root.mode-minimal .lm-topbar { gap: 6px; } .lay-root.touch .lm-btn { width: 38px; height: 38px; border-radius: 8px; background: var(--fig-bar); border: 1px solid var(--fig-line); color: var(--fig-fg); box-shadow: var(--fig-shadow); padding: 0; } .lay-root.touch .lm-btn:active { background: var(--fig-bar-2); } /* Full·Min toggle — Figma segmented */ .lay-root.touch .lm-seg { background: var(--fig-bar); border: 1px solid var(--fig-line); border-radius: 8px; padding: 3px; box-shadow: var(--fig-shadow); } .lay-root.touch .lm-segbtn { color: var(--fig-muted); font: 600 12px/1 'Inter', system-ui, sans-serif; padding: 0 13px; min-height: 30px; border-radius: 6px; letter-spacing: .2px; } .lay-root.touch .lm-segbtn.on { background: var(--fig-accent); color: var(--fig-accent-ink); } /* tool PILL — Figma's dark rounded bottom toolbar; active tool = blue */ .lay-root.mode-minimal .lm-pill { gap: 2px; padding: 5px; border-radius: 13px; background: var(--fig-bar); border: 1px solid var(--fig-line); box-shadow: 0 8px 28px rgba(0,0,0,.6); backdrop-filter: none; } .lay-root.touch .lm-tool { width: 42px; height: 42px; border-radius: 9px; color: var(--fig-fg); } .lay-root.touch .lm-tool.on { background: var(--fig-accent); color: var(--fig-accent-ink); } .lay-root.touch .lm-tool:active { background: var(--fig-bar-2); } .lay-root.touch .lm-more { color: var(--fig-muted); } /* contextual SELECTION bar — Figma pill; Style is the blue primary */ .lay-root.mode-minimal.lm-has-sel .lm-selbar { gap: 2px; padding: 5px; border-radius: 12px; background: var(--fig-bar); border: 1px solid var(--fig-line); box-shadow: var(--fig-shadow); } .lay-root.touch .lm-selbtn { min-width: 40px; min-height: 38px; border-radius: 9px; color: var(--fig-fg); gap: 6px; font: 600 13px/1 'Inter', system-ui, sans-serif; padding: 0 10px; } .lay-root.touch .lm-selbtn:active { background: var(--fig-bar-2); } .lay-root.touch .lm-sel-style { background: var(--fig-accent); color: var(--fig-accent-ink); padding: 0 13px 0 10px; } .lay-root.touch .lm-sel-style svg { width: 18px; height: 18px; } .lay-root.touch .lm-sel-del { color: var(--fig-danger); background: transparent; } .lay-root.touch .lm-sel-del:active { background: rgba(240,97,107,.16); } /* ── COMPACT FILL-COLOUR SHEET (Figma pattern) — a quick swatch grid to tap-apply a fill to the selection, plus a link to the full picker. Opens via the selection bar's Style button. ── */ .lm-color-sheet { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 402; background: var(--fig-sheet, #1B1B1F); border-top: 1px solid var(--fig-line, #26262B); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.55); padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(101%); transition: transform .22s ease; } .lay-root.mode-minimal.lm-color-open .lm-color-sheet { display: block; transform: translateY(0); } .lm-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--fig-line, #444); margin: 2px auto 12px; } .lm-cs-head { color: var(--fig-fg, #ECECEE); font: 600 14px/1 'Inter', system-ui, sans-serif; margin: 0 2px 14px; } .lm-swatch-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .lm-swatch { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .lm-swatch.on { outline: 3px solid var(--fig-accent, #F5772B); outline-offset: 2px; } .lm-swatch[data-hex="#FFFFFF"] { border-color: rgba(0,0,0,.2); } .lm-cs-more { display: block; width: 100%; margin-top: 16px; min-height: 42px; border: 1px solid var(--fig-line, #26262B); border-radius: 10px; background: var(--fig-bar-2, #1E1E22); color: var(--fig-muted, #9A9AA2); font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; } .lm-cs-more:active { background: var(--fig-bar, #17171A); } /* ── MINI COLOUR PICKER — a compact Figma-style floating card (SV square + hue + hex + swatches), opened by the selection bar's Style button. Replaces the full Paint Editor on touch. ── */ .lm-cpop { display: none; position: absolute; left: 50%; width: 252px; margin-left: -126px; bottom: calc(154px + env(safe-area-inset-bottom)); z-index: 460; background: var(--fig-sheet, #1B1B1F); border: 1px solid var(--fig-line, #26262B); border-radius: 15px; box-shadow: 0 12px 40px rgba(0,0,0,.6); padding: 10px 11px 12px; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .16s ease, transform .16s ease; } .lay-root.mode-minimal.lm-cpop-open .lm-cpop { display: block; opacity: 1; transform: translateY(0) scale(1); } .lm-cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .lm-cp-tabs { display: flex; gap: 2px; padding: 2px; background: var(--fig-bar, #17171A); border-radius: 9px; } .lm-cp-tab { min-height: 28px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--fig-muted, #9A9AA2); font: 600 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; } .lm-cp-tab.on { background: var(--fig-accent, #F5772B); color: var(--fig-accent-ink, #17110B); } .lm-cp-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--fig-muted, #9A9AA2); cursor: pointer; } .lm-cp-x:active { background: var(--fig-bar, #17171A); } .lm-cp-x svg { width: 18px; height: 18px; } .lm-cp-sv { position: relative; width: 100%; height: 138px; border-radius: 10px; margin-bottom: 12px; cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .lm-cp-svthumb { position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5); transform: translate(-50%,-50%); pointer-events: none; } .lm-cp-hue { position: relative; width: 100%; height: 14px; border-radius: 7px; margin-bottom: 12px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .lm-cp-huethumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); transform: translate(-50%,-50%); pointer-events: none; } .lm-cp-fields { margin-bottom: 12px; } .lm-cp-hex { width: 100%; box-sizing: border-box; min-height: 34px; padding: 0 12px; border: 1px solid var(--fig-line, #26262B); border-radius: 9px; background: var(--fig-bar, #17171A); color: var(--fig-fg, #ECECEE); font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; } .lm-cp-hex:focus { outline: none; border-color: var(--fig-accent, #F5772B); } .lm-cp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; } .lm-cp-sw { width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .lm-cp-sw.on { outline: 2.5px solid var(--fig-accent, #F5772B); outline-offset: 1.5px; } .lm-cp-sw[data-hex="#FFFFFF"] { border-color: rgba(0,0,0,.25); } .lm-cp-more { display: block; width: 100%; margin-top: 11px; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--fig-accent, #F5772B); font: 600 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; text-align: center; } .lm-cp-more:active { background: var(--fig-bar, #17171A); } /* light theme: soften the card surfaces */ html[data-theme="light"] .lm-cpop { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 12px 40px rgba(0,0,0,.18); } html[data-theme="light"] .lm-cp-tabs, html[data-theme="light"] .lm-cp-hex { background: #F2F2F4; } /* ── DOCK BOTTOM-SHEET FIX: a sticky close bar on top (grabber + down chevron) + fill the FULL width (was leaving a right gap + scrolling horizontally). Stack the overlay as a column so the close bar sits above the dock, and force every panel level to 100% width with no horizontal overflow. ── */ .lay-root.mode-minimal .lay-right-overlay { display: flex; flex-direction: column; overflow: hidden; } .lay-root.mode-minimal .lay-dock { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-x: hidden; } .lay-root.mode-minimal .lay-dock-body { overflow-x: hidden; } .lay-root.mode-minimal .lay-dock-body, .lay-root.mode-minimal .lay-tabpage, .lay-root.mode-minimal .lay-pane, .lay-root.mode-minimal #cp-host, .lay-root.mode-minimal #layers-host { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .lm-sheet-close { display: none; } .lay-root.mode-minimal .lay-right-overlay .lm-sheet-close { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; flex: 0 0 44px; background: var(--fig-sheet, #1B1B1F); color: var(--fig-muted, #9A9AA2); border-bottom: 1px solid var(--fig-line, #26262B); cursor: pointer; } .lay-root.mode-minimal .lay-right-overlay .lm-sheet-close:active { background: var(--fig-bar-2, #1E1E22); } .lay-root.mode-minimal .lay-right-overlay .lm-sheet-close svg { width: 22px; height: 22px; } .lm-sheet-grab { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 3px; background: var(--fig-line, #4d4d4d); }