/* ════════════════════════════════════════════════════════════════════ Photonics Nexus v1 — Photonics Workbench ──────────────────────────────────────────────────────────────────── v1 shift (DESIGN.md §2 P1 + §8.4): right sidebar removed. Canvas is full-bleed. Inspector + Measurements live as `.panel-floating` instances overlaid on viewport, with drag/pin/close + Esc to dismiss unpinned. Each PM gets a CSS2DRenderer mini chip (`.chip-measurement`) anchored to its 3D mesh — chip click toggles the Measurements panel. Style strategy: minimum diff against legacy v0.3 — grid loses the right column, two new component groups appended at the bottom of this file (search for "v1 — Floating panels" and "v1 — Mini chip"). All legacy #inspector / .ins-* selectors still apply to the inner panel body, untouched. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Palette ───────────────────────────────────────────────────── v1 Phase 1C — COLD MONOCHROME (DESIGN.md §0 一句话定调 "冷纯白", §3.1, §12.1 C1 ✅). These legacy names were the warm-paper family that, in light theme, still drove body / #viewport / every 1px border — leaving the whole page a cream tool that contradicted the "cold pure white" mandate. We retire the warm values in place (names kept as aliases → zero downstream rename, dark-theme bridge already overrides them so no dark regression). */ --paper: #FFFFFF; /* was #f5f3ed warm — now bg / viewport cold white */ --paper-soft: #F7F7F8; /* was #faf8f2 — surface-2 */ --paper-deep: #EEEEF1; /* was #ebe7dc — nested / count-badge fills (surface-3) */ --surface: #FFFFFF; --surface-2: #F7F7F8; /* was #fbfaf6 warm (v1 --surface-2 already overrode below) */ --ink: #0D0D0F; /* was #14181f blue-black — align to --ink-1 */ --ink-2: #3F3F46; /* was #475569 slate-blue — neutral gray (§3.1) */ --ink-3: #71717A; /* was #94a3b8 slate-blue — neutral gray (§3.1) */ --line: #D8D8DD; /* was #d8d4c8 warm → #E5E5EA cold；v2 affordance ↑ 与 --line-1 同族（§3.1 line-1）*/ --line-2: #D4D4D8; /* was #b8b4a7 warm — strong divider */ --line-soft: #EFEFF2; /* was #ecead8 warm — table row line */ /* 命名债清理（affordance 批⑤ / DESIGN.md §3.8，2026-07-04）：--cobalt / -deep / -soft / -tint 四个"名叫蓝色实为墨色"的别名已全部就地替换为语义 token （--ink-1 / --surface-3 / --surface-2），定义删除。新代码禁止再引用 --cobalt*。 */ --wl-405: #6b4cff; --wl-532: #16a34a; --wl-1064: #c53030; /* ── perf 工具调色板（dev-only scoped exception，DESIGN.md §3.6） ────────── 仅 perf 工具用；不属品牌设计系统（同 --wl-* / fault 的处理，§3.4 范式）。 颜色映射意义：good/warn/bad = FPS·帧时阈值；五相位 = 分帧链堆叠条/图例/ sparkline。Light 用 GitHub 亮色同族；dark 在 01-theme-dark.css 覆盖（U3）。 */ --perf-good: #2DA44E; --perf-warn: #BF8700; --perf-bad: #CF222E; --perf-controls: #6E7781; --perf-callbacks: #0969DA; --perf-render3d: #8250DF; --perf-css2d: #1B7C83; --perf-other: #57606A; --perf-gpu: #BC4C00; /* GPU 真实执行（"other" 拆分，热色=耗时所在） */ --perf-present: #8C959F; /* 合成 + vsync 等待（"other" 余量，冷灰=空等） */ /* 3D fault-sign hazard palette (same precedent as --wl-* beams above, DESIGN.md §3.5 例外): the warning placard is a physical hazard object on the Canvas, not UI chrome, so it uses vivid alarm colors rather than the muted "莫奈" --sig-* UI signal tokens. Light keeps the existing brick/ochre (reads fine on white); dark overrides to vivid red/amber below — the muted dark --sig-error #D67878 read as a milky pink on the dark canvas (User 2026-06-03「黑色模式警告红是奶红色」). Consumed by the L6 fault sign (renderer-three/mesh-sync.js FAULT_VAR). */ --fault-warn: var(--sig-warn); --fault-caution: #C2670E; /* 光高中档橙（§6.4 3–10mm）——介于 warn 琥珀与 bad 红之间，白底可读 */ --fault-bad: var(--sig-error); /* Functional colors → low-saturation signal tokens (DESIGN.md §3.3). Saturated greens/ambers/reds violated "莫奈式低饱和". Alias onto the designed --sig-* values (defined below; var() resolves order-free) so both light + dark follow one source. Chip *text* uses --ink-1 per §3.3 ("文字优先用 ink-1, 配合 chip 背景"). */ --good: var(--sig-ok); --warn: var(--sig-warn); --warn-bg: var(--sig-warn-bg); --warn-ink: var(--ink-1); --caution: #C2670E; /* 光高中档橙（§6.4 3–10mm），黄↔红之间 */ --caution-bg: #FBEAD9; --caution-ink: var(--ink-1); --bad: var(--sig-error); --bad-bg: var(--sig-error-bg); --bad-ink: var(--ink-1); /* ── Fonts ─────────────────────────────────────────────────────── v1 Phase 1C — Geist single family (DESIGN.md §4.1). Display/serif accents removed; mono kept for measurements / SKU / data tables. */ --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; /* ── Layout (resizable via CSS vars) ─────────────────────────── */ --topbar-h: 48px; --tabstrip-h: 28px; /* v2.7.03/04 browser-style canvas tab strip, hangs under the topbar to the RIGHT of the library (left:--left-w). Compact (28px). Library starts at --topbar-h again (strip no longer above it); only the right-side floating-panel keep-out adds --tabstrip-h. */ --left-w: 248px; /* UX-5：284 → 248（UX-4 头部紧凑化后单列足容） */ --resizer-w: 5px; --collapsed-w: 32px; /* ── Motion (UX-1, DESIGN.md §10.2 / §15.1) ───────────────────── ONE primary easing + a small duration scale. Every popup/panel animates in AND out (no one-frame disappearance — ui/motion.js leaveThenHide drives the exit). Never animate backdrop blur. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-quart */ --dur-micro: 80ms; /* hover / pressed feedback */ --dur-enter: 160ms; /* popover / floating panel entrance */ --dur-exit: 120ms; /* exits — always shorter than entrances */ --dur-panel: 200ms; /* pane slides / accordion / dock motion */ --dur-modal: 240ms; /* modal sheet entrance */ /* v1 — Floating panel sizing (DESIGN.md §8.4.A). Width/max bounds. Height is content-driven, capped at 70vh and clamped to viewport by JS during drag. */ --float-w: 340px; --float-max-w: 420px; --float-max-h: 70vh; --float-radius: 6px; /* Liquid glass (DESIGN.md §6.4). One backdrop-filter layer: a moderate blur (≤18px, kept off any transition for perf) + a saturate boost that is what actually reads as "glass" at near-zero cost. Translucency at 0.66 (light) lets the Canvas + beam colors glow faintly through; text still clears 4.5:1 (§13). The specular edge (--float-edge) is a 1px inset white hairline — a monochrome glass rim, NOT a glow/gradient (§3.5 exception). Dark theme overrides bg/edge/shadow below. */ /* ── Glass v2（2026-06-10 用户反馈"玻璃不漂亮"）──────────────────── 诊断：光主题下玻璃身后是近白场景，blur 无物可透；0.85 高遮挡 + 白上白 的 1px 边 + 单层浅影 → 大面板读作"奶白板"。v2 三处一起补： ① blur 16→24 + saturate 210（更稠的"玻璃体"，对比靠 blur 平滑兜底， 遮挡降回 0.78/0.60 找回通透） ② 高光边大幅提亮 + 内圈白描边（玻璃顶缘反光在白底上也读得出） ③ 投影改三层（接触影 + 中景 + 远景泛光影）→ 玻璃"悬浮厚度" 边框另设 --glass-border（中性黑 alpha，白底上比 line-1 更立体）。 */ --float-blur: 24px; --float-sat: 210%; --glass-blur: 24px; --glass-saturate: 210%; --figure-studio-glass: rgba(255, 255, 255, 0.66); /* UX-10 层次玻璃 — 档位按「读参数 vs 瞟一眼」分： resident = 要阅读参数的面（dock / topbar / Inspector / Measurement 浮层）， transient = 短文本瞬态面（measurement chip / 下拉菜单 / 右键菜单）。 */ --glass-resident: rgba(255, 255, 255, 0.88); /* v2 affordance ↑ 自 0.78：Console 域读参数面在任意 canvas 背景上对比恒稳（U4/U11）*/ --glass-transient: rgba(255, 255, 255, 0.60); /* Bench 域 chip 不动 */ --float-bg: var(--glass-resident); --glass-border: rgba(13, 13, 15, 0.10); /* Glass v2.1：库面板透光 —— 玻璃上的内容卡两态（白 alpha，dock blur 透底）。 */ --glass-card: rgba(255, 255, 255, 0.55); --glass-card-hover: rgba(255, 255, 255, 0.85); --float-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.12); --float-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.40); --chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85); /* hover 高光边扫亮（§3.5 高光边例外的动态化，非新渐变） */ --chip-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1.0); /* 2% 单色噪点 — 玻璃面抗大面积模糊色带（功能性，非纹理装饰）。 */ --glass-noise: url("data:image/svg+xml;utf8,"); /* Measurement accent — shared by BOTH measurement tools (Measure ruler + Optical Path) so they read as one family (user 2026-07-02「统一用一种颜色」). = the sanctioned selection cyan --sig-select (§3.5 — the only allowed colored accent, farthest from the red/green beam colors); Optical Path already uses it, so Measure adopts it too. Drives the ruler label dot + DRO live dot; the 3D measure ruler mirrors it with 0x22d3ee (measure-overlay MEASURE_COLOR = optical-path COLOR_PATH). Panels stay monochrome (P2). Alias auto-themes via --sig-select (light #0AA5C2 / dark #34D2E8). */ --measure-accent: var(--sig-select); /* ── v1 Phase 1B — DESIGN.md §3 token system ──────────────────── Additive layer. Legacy --paper / --ink / --cobalt above still drive most existing rules; new --ink-N / --surface-N / etc are used by v1 components (topbar redesign, panel-floating, chip). [data-theme="dark"] :root below overrides only the new tokens plus a few key legacy ones to flip light → dark in one switch. */ /* Neutral scale (light) */ --bg: #FFFFFF; --surface-1: #FFFFFF; --surface-2: #F7F7F8; --surface-3: #EEEEF1; --ink-1: #0D0D0F; /* --ink-2 already defined above as #475569 (legacy slate). Override to the §3 spec value — DESIGN.md wants the same gray family across all neutrals so we don't get slate-blue bleeding into a monochrome theme. Existing rules using --ink-2 inherit. */ --ink-2-v1: #3F3F46; --ink-3-v1: #71717A; --ink-4: #A1A1AA; --line-1: #D8D8DD; /* v2 affordance ↑ 自 #E5E5EA（实测 ~1.04:1 近隐形）——柔分隔，仅限有底色块辅助处（DESIGN.md §3.1 / affordance spec §4） */ --line-hard: #8E8E93; /* v2 新增（~3:1）——唯一线索的结构边界：数据表行线 / 面板页眉 / dock 分组线（顶替旧 --line-2 职责，U11） */ --line-2-v1: #D4D4D8; --line-soft-v1: #EFEFF2; /* v2 降级：实测 ~1.0:1 隐形，禁止承担分隔职责，仅存量装饰，新代码禁用（DESIGN.md §3.1） */ /* Control seat layer (v2 affordance — DESIGN.md §3.3 / U10 / U11 的 token 落点) */ --ctl-rest: rgba(0, 0, 0, 0.055); /* 控件静止底座（B 语法核心）：menu / icon / ghost 钮静止即有淡底 */ --ctl-line: #C2C2C9; /* 控件边框（~2:1）：直接动作钮 / 输入框 / secondary 钮 */ --overlay-1: rgba(0, 0, 0, 0.06); /* v2 ↑ 0.04→0.06：叠在 --ctl-rest 之上仍可感知（hover）*/ --overlay-2: rgba(0, 0, 0, 0.10); /* v2 ↑ 0.08→0.10：pressed / selected */ --overlay-3: rgba(0, 0, 0, 0.40); /* Hover / active semantic tokens — single source of truth for all interactive surfaces (topbar buttons, dropdown items, canvas tabs, library cards, action-dock, floating-panel buttons, search palette rows, related-panel rows). Rest state always carries `border: 1px solid transparent` so swapping to --hover-border on hover causes 0 layout shift (layout-shift-avoid). */ --hover-border: rgba(0, 0, 0, 0.18); /* visible 1px edge on hover */ --hover-bg: rgba(0, 0, 0, 0.10); /* v2 ↑ 0.06→0.10：须明显高于 --ctl-rest(0.055) 静止座，hover 才可辨（P6/U10）*/ --active-border: var(--ink-1); /* strongest edge: current / open / selected */ --active-bg: rgba(0, 0, 0, 0.14); /* v2 ↑ 0.08→0.14：selected/open 阶梯顶（rest 0.055 < hover 0.10 < active 0.14）*/ /* Functional signal (low-saturation) */ --sig-warn: #B97A2F; --sig-warn-bg: #F8EFE0; --sig-error: #A13838; --sig-error-bg: #F6E2E2; --sig-ok: #3A7A4A; --sig-ok-bg: #E4F0E8; /* Selection accent — the one allowed chromatic accent (Canvas 选中描边). Cyan reads against both the white floor and the physics beam colors (warm reds / greens) where mono --ink-1 was easy to lose. §3.5 例外。 */ --sig-select: #0AA5C2; /* Canvas (Three.js WebGL clear + ground plane) — theme.js reads these on theme change and drives scene3d.background + floor.material.color (DESIGN.md §11.1). Both must flip or dark mode keeps a light floor. */ --canvas-bg: #DDE2E8; /* user 2026-06-29: 中性灰（#E8E8EC）和金属/白漆/灰塑料器件色相重合 → 改轻冷蓝灰，靠色相差拉开器件轮廓（亮度 ~225，photoreal 反光不刺）。光学实验台传统偏冷调，与 dark 主题（#38383F 偏冷深灰）一致。 */ --canvas-floor: #CDD3DC; /* cool ground plane, 随 --canvas-bg 同色相再压一档 */ } /* ════════════════════════════════════════════════════════════════════ Misc ════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* One selection treatment across the app: cyan is the sanctioned selection accent and the transparent mix keeps the selected text readable in both light and dark themes. */ ::selection, ::-moz-selection { background: color-mix(in srgb, var(--sig-select) 45%, transparent); color: inherit; }