/* ═══════════════════════════════════════════════════════════ LIGHTDROPPER — Canvas + tool-managed UI styles The Webflow page owns all the chrome (nav, modals, controls, info panel, preloader, buttons). This file only styles the 3D canvas and the floating UI the script creates dynamically. ═══════════════════════════════════════════════════════════ */ /* ─── Canvas ─────────────────────────────────────────────── */ /* Sits inside the .code-embed div which is already position: absolute; inset: 0; z-index: -1 in Webflow CSS, so the canvas naturally fills the viewport behind all chrome. */ #lightdropper-canvas { display: block; pointer-events: auto; } /* ─── Color picker (iro.js + hex input, unified panel) ──── */ .ld-color-picker-wrapper { position: fixed; display: none; background: #121212; color: #ffffff; padding: 20px; border-radius: 16px; z-index: 2000; pointer-events: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .ld-color-picker-hex { display: block; width: 140px; /* matches the iro picker `width: 140` option */ box-sizing: border-box; margin-top: 14px; padding: 10px 14px; border: 2px solid #ffffff; border-radius: 12px; background: transparent; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 0.5px; outline: none; text-transform: lowercase; } .ld-color-picker-hex:focus { border-color: rgba(255, 255, 255, 0.55); } /* ─── Right-click context menu ───────────────────────────── */ /* Default colors are set below in the contrast section (light menu on default dark canvas; dark menu when canvas is light). */ .ld-context-menu { position: fixed; display: none; border-radius: 12px; overflow: hidden; padding: 0; min-width: 220px; z-index: 2000; font-size: 13px; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .ld-context-menu-item { padding: 10px 16px; display: flex; justify-content: space-between; cursor: pointer; user-select: none; transition: background 0.1s; } .ld-context-menu-shortcut { font-size: 11px; margin-left: 20px; } /* ─── Intensity flash (shows %% on light click) ──────────── */ /* Background/color set below in the contrast section. */ .ld-intensity-flash { position: fixed; display: none; padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 13px; pointer-events: none; transform: translate(-50%, -50%); z-index: 2000; opacity: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); white-space: nowrap; transition: opacity 0.2s ease-out, background 0.1s ease, color 0.1s ease, left 0.15s ease-out, top 0.15s ease-out; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* ─── Persistent light labels (shown on L key) ───────────── */ .ld-persistent-labels { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1500; } .ld-persistent-label { position: absolute; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; z-index: 50; backdrop-filter: blur(4px); transition: left 0.15s ease-out, top 0.15s ease-out, opacity 0.2s ease; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* ═══════════════════════════════════════════════════════════ STACKING CONTEXT FIX The Webflow .code-embed uses z-index: -1 to sit behind chrome. For that to be hit-testable (so OrbitControls/DragControls on the canvas inside actually receive clicks), must create its own stacking context. This single rule does that. ═══════════════════════════════════════════════════════════ */ body { position: relative; z-index: 0; } /* ═══════════════════════════════════════════════════════════ LUMINANCE / DARK MODE When the canvas background is LIGHT, white Webflow chrome becomes invisible. The script adds `.light-bg` to , which inverts any `.luminance` element. Raster images inside `.luminance` that should keep their original colors get a `.no-invert` class which double-inverts them back. ═══════════════════════════════════════════════════════════ */ body.light-bg .luminance { filter: invert(1); } body.light-bg .luminance .no-invert { filter: invert(1); /* double-invert = original colors */ } /* ═══════════════════════════════════════════════════════════ CONTEXT MENU — always contrasts the canvas background. Default canvas is dark (#333), so menu is LIGHT by default. When the user picks a light bg, .light-bg activates and the menu flips DARK so it remains readable. ═══════════════════════════════════════════════════════════ */ .ld-context-menu { background: #f9f9f9; color: #121212; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } .ld-context-menu-item { border-bottom: 1px solid #e0e0e0; } .ld-context-menu-item:last-child { border-bottom: none; } .ld-context-menu-item:hover { background: #e0e0e0; } .ld-context-menu-shortcut { color: #666; } .ld-intensity-flash { background: rgba(255, 255, 255, 0.9); color: #121212; } body.light-bg .ld-context-menu { background: #121212; color: #eee; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } body.light-bg .ld-context-menu-item { border-bottom: 1px solid #2a2a2a; } body.light-bg .ld-context-menu-item:last-child { border-bottom: none; } body.light-bg .ld-context-menu-item:hover { background: #2a2a2a; } body.light-bg .ld-context-menu-shortcut { color: #888; } body.light-bg .ld-intensity-flash { background: rgba(0, 0, 0, 0.8); color: #ffffff; } /* ═══════════════════════════════════════════════════════════ POINTER-EVENTS FIXES — let clicks reach the canvas through the upload page's intro overlay and other 100%-wide chrome ═══════════════════════════════════════════════════════════ */ /* Upload page intro: container shouldn't block events, only the button does */ .custom-model-holder { pointer-events: none; } .custom-model-holder a, .custom-model-holder button, .custom-model-holder #upload { pointer-events: auto; } /* The 1px-line and toggle-info indicator shouldn't block events either */ ._1px-line { pointer-events: none; } .toggle-info { pointer-events: none; }