/* ============================================================ CSiBridge — Modeler shell (post "Generate Model") Ribbon + Explorer tree + contextual Property panel + 3D view. Fluent tokens re-declared under .mdl-app (same values as the other overlays); theme follows the WebView color scheme. ============================================================ */ .mdl-app { --radius-control: 4px; --radius-card: 6px; --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", -apple-system, system-ui, sans-serif; position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; font-family: var(--font); color: var(--text-primary); font-size: 12px; line-height: 1.35; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mdl-app *, .mdl-app *::before, .mdl-app *::after { box-sizing: border-box; } /* ---------- LIGHT ---------- */ .mdl-app { /* Theme native form controls (the only exposes styling through vendor pseudo-elements — WebView2 is Chromium-based so -webkit- is what actually renders, -moz- is included for parity if this ever runs in a browser host. The "filled" portion (blue up to the thumb) needs a live percentage, so callers set `--range-pct` inline (see RangeStyle/RangeBackground helpers) rather than this stylesheet trying to compute it from min/max/value, which CSS can't do on its own. */ .mdl-range { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; cursor: pointer; --range-pct: 0%; } .mdl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-pct), var(--text-disabled) var(--range-pct), var(--text-disabled) 100%); } .mdl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -2px; border-radius: 50%; background: var(--layer); border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); cursor: grab; } .mdl-range::-webkit-slider-thumb:active { cursor: grabbing; } .mdl-range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--text-disabled); } .mdl-range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--accent); } .mdl-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--layer); border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); cursor: grab; } .mdl-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; } .mdl-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; } /* The open dropdown popup paints from the