/* * Цветовые темы (v3.2). Один общий файл для всех страниц сервиса: * вьювер (index.html), консоль операций (ops.html), админка (admin.html). * * Тема = набор CSS-переменных на . Правило простое: * НИ ОДНОГО жёсткого цвета в разметке и компонентах — только переменные, * иначе светлая тема разъезжается (тёмный фон остаётся, текст исчезает). * Значения для 3D-сцены (canvas, сетка, подсветка) читает viewer.js через * getComputedStyle: three.js в CSS-переменные сам не умеет. * * blue — «Синяя» (по умолчанию), тёмно-синий индустриальный интерфейс * dark — «Тёмная», графит с лавандовым акцентом * cad — «Светлая CAD», светло-серый в духе ArchiCAD */ :root, :root[data-theme='blue'] { color-scheme: dark; --bg: #070c17; --bg-2: #0d1524; --bg-3: #131d31; --bg-4: #1a2740; --line: #1d2b45; --line-2: #2b3d5e; --fg: #e9eefb; --fg-2: #a2b3d2; --fg-3: #6f82a4; --accent: #3d84ff; --accent-hover: #5f9bff; --accent-fg: #ffffff; --accent-soft: #16305c; --accent-soft-line: #2c5698; --accent-glow: rgba(61, 132, 255, 0.28); --ok: #35d39a; --accent-2: #35d39a; --warn: #f5b544; --danger: #ff6b5e; --ok-bg: #10322a; --ok-line: #1c6449; --warn-bg: #33280f; --warn-line: #6b5320; --danger-bg: #35171a; --danger-line: #6d2b2c; --info-bg: #12243f; --info-line: #27477a; --violet: #a98bf5; --header-bg: linear-gradient(180deg, #101c31, #0a1120); --row-hover: #101a2b; --row-line: #16223a; --shadow: 0 18px 44px rgba(0, 0, 0, 0.5); --overlay: rgba(4, 8, 16, 0.72); /* 3D-сцена */ --canvas-bg: #0a1120; --grid-1: #2b3c5c; --grid-2: #17233a; --pick: #35d39a; --radius: 10px; --header-h: 52px; --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; } :root[data-theme='dark'] { color-scheme: dark; --bg: #0a0a0c; --bg-2: #121216; --bg-3: #17171c; --bg-4: #202027; --line: #24242b; --line-2: #34343e; --fg: #f0f0f3; --fg-2: #a7a7b2; --fg-3: #74747f; --accent: #a78bfa; --accent-hover: #bda5ff; --accent-fg: #16101f; --accent-soft: #241d3a; --accent-soft-line: #453a6b; --accent-glow: rgba(167, 139, 250, 0.26); --ok: #4ade80; --accent-2: #4ade80; --warn: #fbbf24; --danger: #fb7185; --ok-bg: #14261a; --ok-line: #2c5735; --warn-bg: #2b2210; --warn-line: #5f4a19; --danger-bg: #2c1519; --danger-line: #5f2b34; --info-bg: #1d1a2c; --info-line: #3b3457; --violet: #c4b5fd; --header-bg: linear-gradient(180deg, #16161b, #0d0d10); --row-hover: #17171c; --row-line: #1d1d23; --shadow: 0 18px 44px rgba(0, 0, 0, 0.62); --overlay: rgba(6, 6, 8, 0.76); --canvas-bg: #0c0c0f; --grid-1: #33333d; --grid-2: #1c1c22; --pick: #a78bfa; --radius: 10px; --header-h: 52px; --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; } :root[data-theme='cad'] { color-scheme: light; --bg: #e7eaee; --bg-2: #f6f7f9; --bg-3: #edeff3; --bg-4: #e1e5ea; --line: #c9cfd8; --line-2: #b2bac6; --fg: #1c2229; --fg-2: #4a5561; --fg-3: #78838f; --accent: #0d6ebe; --accent-hover: #1382db; --accent-fg: #ffffff; --accent-soft: #dbe9f8; --accent-soft-line: #9cc2e8; --accent-glow: rgba(13, 110, 190, 0.2); --ok: #1f7a45; --accent-2: #1f7a45; --warn: #b26208; --danger: #c2352a; --ok-bg: #dff0e4; --ok-line: #a9d3b6; --warn-bg: #fbeed9; --warn-line: #e3c48c; --danger-bg: #fadedb; --danger-line: #eaaea8; --info-bg: #dfeaf7; --info-line: #aac6e6; --violet: #6c4bbd; --header-bg: linear-gradient(180deg, #f8f9fb, #e7eaee); --row-hover: #eef1f5; --row-line: #dde2e9; --shadow: 0 14px 34px rgba(31, 41, 55, 0.16); --overlay: rgba(226, 230, 236, 0.78); /* ArchiCAD: светлое поле 3D-окна и оранжевое выделение */ --canvas-bg: #eef1f5; --grid-1: #b8c1cd; --grid-2: #d5dbe3; --pick: #f07800; --radius: 6px; --header-h: 52px; --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; } /* ---------- переключатель темы (общий для всех страниц) ---------- */ .theme-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; } .theme-switch button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer; background: var(--tsw, #888); opacity: 0.55; transition: opacity 0.12s, box-shadow 0.12s, transform 0.12s; } .theme-switch button:hover { opacity: 0.85; transform: scale(1.08); } .theme-switch button.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .theme-switch button[data-theme='blue'] { --tsw: linear-gradient(135deg, #3d84ff, #0d1524); } .theme-switch button[data-theme='dark'] { --tsw: linear-gradient(135deg, #a78bfa, #121216); } .theme-switch button[data-theme='cad'] { --tsw: linear-gradient(135deg, #f6f7f9, #0d6ebe); }