/* ========================================================================= chrome-skin.css Make the engine chrome (menu / option bar / tool rail / zoom bar), once it is mounted into the demo shell regions, look like NATIVE demo components. Only the engine's icons + text labels are kept; every colour / hover / active state is mapped onto the demo theme tokens (--lay-*), so the chrome also follows the light/dark toggle. Scope: everything is under #host-* so the canvas/iframe internals are untouched. Load order: AFTER style.css and input.css so these win. ========================================================================= */ /* ---- drop the engine's own (white) chrome backgrounds: inherit the region ---- */ #host-menu > #menu_bar, #host-options > #option_bar, #host-toolbar > #tools_left, #host-zoom > #tools_bottom { background: transparent !important; background-color: transparent !important; border: none !important; } /* ============================ left tool rail ============================ */ /* buttons sized + centred like the demo .lay-tool (engine default was 48x35 with a broken line-height:50px, which made icons small + off-centre) */ #host-toolbar #tools_left { padding: 4px 0; } #host-toolbar .tool_button { width: 38px; height: 38px; margin: 1px auto; display: flex; align-items: center; justify-content: center; line-height: normal; border-radius: 6px; transition: background .12s ease; } /* Adobe-Illustrator-style icon set: .f = solid silhouette, .s = outline. Monochrome currentColor -> theme-aware (follows light/dark). */ #host-toolbar .tool_button > svg { width: 24px; height: 24px; color: var(--lay-text); } #host-toolbar .tool_button > svg .f { fill: currentColor !important; stroke: none !important; } #host-toolbar .tool_button > svg .s { fill: none !important; stroke: currentColor !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #host-toolbar .tool_button:hover { background: var(--lay-hover) !important; } #host-toolbar .tool_button:hover > svg { color: #ffffff; } /* active tool = highlighted cell + white icon */ #host-toolbar .tool_button.current { background: var(--lay-accent) !important; } #host-toolbar .tool_button.current > svg { color: #ffffff; } #host-toolbar .tool_button.disabled > svg{ color: var(--lay-muted); } /* swap fill/stroke button (smaller) */ #host-toolbar #tool_switch { width: 30px; height: 30px; margin: 4px auto 2px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; transition: background .12s ease; } #host-toolbar #tool_switch > svg { width: 20px; height: 20px; color: var(--lay-text); } #host-toolbar #tool_switch > svg .s { fill: none !important; stroke: currentColor !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #host-toolbar #tool_switch:hover { background: var(--lay-hover) !important; } #host-toolbar #tool_switch:hover > svg { color: var(--lay-accent); } /* ---- Drawing Modes (Normal / Behind / Inside) — under the fill/stroke swatches ---- */ #host-toolbar #draw_modes { margin: 6px auto 2px; padding-top: 6px; border-top: 1px solid var(--lay-line); display: flex; flex-direction: column; align-items: center; gap: 2px; } #host-toolbar .drawmode_button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; transition: background .12s ease; } #host-toolbar .drawmode_button > svg { width: 19px; height: 19px; color: var(--lay-text); } #host-toolbar .drawmode_button > svg .f { fill: currentColor !important; stroke: none !important; } #host-toolbar .drawmode_button > svg .s { fill: none !important; stroke: currentColor !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #host-toolbar .drawmode_button:hover { background: var(--lay-hover) !important; } #host-toolbar .drawmode_button:hover > svg { color: #fff; } #host-toolbar .drawmode_button.active { background: var(--lay-accent) !important; } #host-toolbar .drawmode_button.active > svg { color: #fff; } /* ====================== menu bar (File / Edit / View) ====================== */ #host-menu .menu_title { color: var(--lay-text) !important; font-size: 14px !important; } #host-menu .menu .menu_title:hover { background: var(--lay-hover) !important; color: #fff !important; } #host-menu #menu_bar.active .menu.open .menu_title { background: var(--lay-hover) !important; color: #fff !important; } /* dropdown -> dark demo panel */ #host-menu .menu .menu_list { background: var(--lay-panel) !important; color: var(--lay-text) !important; border: 1px solid var(--lay-line) !important; box-shadow: 0 6px 24px var(--lay-shadow) !important; z-index: 2147483000; } #host-menu .menu_list .menu_item, #host-menu .menu_list .menu_item span { color: var(--lay-text) !important; font-size: 13px !important; } #host-menu .menu_list .menu_item:not(.disabled):hover, #host-menu .menu_list .menu_item.push_button_pressed:hover { background: var(--lay-hover) !important; color: #fff !important; } #host-menu .menu_list .menu_item:not(.disabled):hover span { color: #fff !important; } #host-menu .menu_list .menu_item.disabled, #host-menu .menu_list .menu_item.disabled span { color: var(--lay-muted) !important; } #host-menu .menu_list .separator, #host-menu .menu_list hr { border-color: var(--lay-line) !important; background: var(--lay-line) !important; } #host-menu .menu-right svg { fill: var(--lay-text) !important; } #host-menu .menu-right button:hover svg { fill: #fff !important; } /* ---- menu LAYOUT (fallback) ---- The horizontal-titles + hidden-dropdowns layout normally comes from style.css (.menu / .menu_list rules). If style.css fails to load (e.g. only chrome-skin is reachable, or its path differs), the menus collapse into one long expanded vertical list. These rules live in chrome-skin.css — which is always loaded — so the menubar lays out correctly regardless. Behaviour mirrors style.css: horizontal titles, each dropdown hidden until its menu is .open, fly-out submenus on hover. */ #host-menu #menu_bar { display: flex; align-items: stretch; } #host-menu .menu { display: inline-block; position: relative; } #host-menu .menu > .menu_list { display: none; position: absolute; top: 100%; left: 0; } #host-menu #menu_bar.active .menu.open > .menu_list { display: block; } #host-menu .has_submenu { position: relative; } #host-menu .has_submenu .submenu { display: none; position: absolute; left: 100%; top: 0; } #host-menu .has_submenu:hover .submenu { display: block; } /* req: workarea border 0 — style.css sets `#workarea { border: 1px solid #ccc }` which draws a light frame around the drawing area; override it away here so style.css stays untouched (= backup). */ #workarea { border: 0 !important; } /* req: scrollbar must overlap (paint above) the ruler. style.css gives `#svgcanvas { z-index: 1 }`, which creates a stacking context that traps the scrollbar tracks (z-index 50) BELOW the rulers (#ruler_corner z-index 2). Dropping svgcanvas to z-index:auto removes that context: the tracks (z 50) now paint above the rulers, while the GL canvas (z-index auto, earlier in DOM) still paints BELOW them — exactly the desired canvas < ruler < scrollbar. */ #svgcanvas { z-index: auto !important; } /* req: enlarge the ruler a little (16 → 20px) so the corner display icon has padding. The ruler canvas is drawn at TH=20 (34-Ruler.js); match the container boxes here without touching the global --x4 token (it also drives box-shadows). */ #ruler_x { height: 20px !important; } #ruler_y { width: 20px !important; } #ruler_corner { width: 20px !important; height: 20px !important; } /* the SkiaVG must not paint its own light backing edge (a 1px seam showed as a thin border on the right). Keep it seamless. */ .lay-canvas .editor-cell canvas, .lay-canvas > .editor-cell > canvas { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } /* ============================ option (context) bar ============================ */ #host-options { color: var(--lay-text); } /* icon buttons -> boxed UI buttons (sized to the UI.js control height --ui-h), icons are now inline AI-style svg (.f solid / .s outline / .tx text) */ #host-options .option_button { width: 30px; height: var(--ui-h, 28px); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0 1px; border-radius: 5px; background: var(--lay-panel); border: 1px solid var(--lay-line-soft); cursor: pointer; transition: background .12s ease, border-color .12s ease; } #host-options .opt-ic { width: 19px; height: 19px; color: var(--lay-text); } #host-options .opt-ic .f { fill: currentColor; stroke: none; } #host-options .opt-ic .s { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #host-options .opt-ic .tx { fill: currentColor; stroke: none; font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 700; } #host-options .opt-ic .tx-o { fill: none; stroke: currentColor; stroke-width: 1.15; font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 700; } #host-options .option_button:hover { background: var(--lay-hover); border-color: var(--lay-accent); } #host-options .option_button:hover .opt-ic { color: #ffffff; } #host-options .option_button.active, #host-options .option_button.current { background: var(--lay-accent); border-color: var(--lay-accent); } #host-options .option_button.active .opt-ic, #host-options .option_button.current .opt-ic { color: #ffffff; } #host-options .option_button.disabled .opt-ic { color: var(--lay-muted); opacity: .6; } /* ============================ bottom zoom bar ============================ */ .lay-canvas > #host-zoom { background: var(--lay-bar); border-top: 1px solid var(--lay-line); color: var(--lay-text); } #host-zoom #zoom_label svg, #host-zoom #zoomLabel svg { fill: var(--lay-text) !important; } /* The engine's #tools_bottom zoom widget is W1-absolute-positioned (pinned to the editor's bottom-right, an invisible