/* =========================================================================== Оформление публичного вьювера. Принцип: страница - это одна 3D-сцена на весь экран и минимум элементов поверх неё. Никаких панелей со списком деталей, никаких названий - см. требования в README (публичный показ не раскрывает состав изделия). Две темы - тёмная (по умолчанию) и светлая, переключатель - кнопка в тулбаре (main.js, applyTheme/toggleTheme), выбор запоминается в localStorage. Тема меняет и панели/кнопки, и фон 3D-сцены (--scene-gradient, см. оба блока ниже) - структура градиента (тёмный/ светлый край против противоположного силуэта) одна и та же в обеих темах, меняется только полярность. */ :root { --bg: #121315; --bg-panel: rgba(22, 23, 27, 0.96); --border: rgba(226, 138, 43, 0.18); --text: #eae8e4; --text-dim: #9d9890; --accent: #e28a2b; --accent-contrast: #0d0e10; --danger: #ff6b6b; /* Тонкая декоративная CAD-сетка (см. #model-gallery ниже) - едва заметный акцентный оттенок поверх фона, не самостоятельный цвет. */ --grid-line: rgba(226, 138, 43, 0.05); --grid-line-major: rgba(226, 138, 43, 0.10); --shadow: 0 4px 18px rgba(0, 0, 0, 0.50); --radius: 2px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-left: env(safe-area-inset-left, 0px); --scene-gradient: linear-gradient(to bottom, #23262d 0%, #121315 55%, #0b0d0e 100%); } /* Светлая тема - тот же набор переменных, светлые значения. Ставится атрибутом на (main.js, applyTheme) - вместо media-запроса на системную тему специально: выбор пользователя (кнопка) должен побеждать системную настройку, а не только дополнять её. */ /* Светлая тема (Концепция «Coyote Tan & Desert Field» / Mil-Spec Cerakote): Тактический койот, песочно-полевой пустынный оттенок, янтарно-бронзовый акцент и строгая броневая контрастная типографика. */ html[data-theme="light"] { --bg: #e2ded6; --bg-panel: #edeae3; --border: #c8c2b7; --text: #1a1917; --text-dim: #635f58; --accent: #b45309; --accent-contrast: #ffffff; --danger: #dc2626; /* Заметно выше, чем в тёмной теме - тёмный акцент на светлом фоне "тает" гораздо быстрее с ростом прозрачности, чем светлый на тёмном. */ --grid-line: rgba(180, 83, 9, 0.14); --grid-line-major: rgba(180, 83, 9, 0.24); --shadow: 0 2px 8px rgba(26, 25, 23, 0.10); /* Пустынный градиент сцены: теплый песчаный свет и выветренный койот */ --scene-gradient: linear-gradient(to bottom, #f3f0e8 0%, #e2ded6 55%, #c8c2b7 100%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* страница не скроллится - скроллится сцена */ background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } #app { position: relative; width: 100%; height: 100%; } /* --- 3D-сцена ----------------------------------------------------------- */ #viewer-container { position: absolute; inset: 0; /* touch-action: none - иначе браузер на телефоне перехватывает жесты себе (скролл/зум страницы), и модель не вращается. */ touch-action: none; /* Мягкий вертикальный градиент вместо плоской заливки (ТЗ, раздел 5.2) - canvas библиотеки рисуется ПРОЗРАЧНЫМ (viewer-core.js, renderer.setClearAlpha(0)), настоящий фон - этот CSS-градиент позади него. Значение - переменная --scene-gradient (см. :root/[data-theme] выше) - меняется вместе с темой интерфейса, структура (более тёмный/ светлый край против противоположного силуэта) сохраняется в обеих. */ background: var(--scene-gradient); } #viewer-container canvas { display: block; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* --- Оверлеи (загрузка, ошибка) ----------------------------------------- */ .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); z-index: 30; } .overlay[hidden] { display: none; } .spinner { width: 38px; height: 38px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Уважаем системную настройку "меньше движения". */ @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } } .loading-text { color: var(--text-dim); } .loading-progress { color: var(--text-dim); font-size: 12px; min-height: 16px; } .error-box { max-width: 420px; padding: 20px 24px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); } .error-title { font-weight: 600; margin-bottom: 8px; color: var(--danger); } .error-text { color: var(--text-dim); font-size: 13px; word-break: break-word; } /* --- Панель инструментов ------------------------------------------------- */ #toolbar { position: absolute; top: calc(12px + var(--safe-top)); right: 12px; right: calc(12px + var(--safe-right)); display: flex; flex-direction: column; gap: 8px; z-index: 20; } body.in-3d #toolbar, #app.in-3d-mode #toolbar { top: calc(12px + var(--safe-top)); right: 12px; right: calc(12px + var(--safe-right)); } /* ТЗ_Активно_06, §5.3 - диагностический оверлей (?debug=1 / Ctrl+Shift+F, см. web/js/main.js, toggleDebugOverlay) - не часть обычного UI, поэтому вне общей системы кнопок/панелей ниже, минимальный самостоятельный стиль. */ .debug-overlay { position: fixed; top: calc(70px + var(--safe-top)); left: calc(12px + var(--safe-left)); z-index: 999; padding: 8px 12px; background: rgba(0, 0, 0, 0.75); color: #7CFC00; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.5; white-space: pre; border-radius: 4px; pointer-events: none; user-select: none; } .tool-btn { width: 44px; height: 44px; /* 44px - минимальная удобная цель для пальца */ display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); color: var(--text); cursor: pointer; backdrop-filter: blur(6px); box-shadow: var(--shadow); transition: background 0.15s, color 0.15s; } .tool-btn:hover { background: rgba(60, 64, 72, 0.96); border-color: var(--accent); color: var(--accent); } html[data-theme="light"] .tool-btn:hover { background: #ded9cf; border-color: var(--accent); color: var(--accent); } .tool-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tool-btn.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } /* Контурный стиль (Tabler Icons). fill:none по умолчанию - кроме значка темы (солнце/луна), который остаётся залитым: он один залитый среди контурных не случайно - визуально отличает переключатель темы от остальных, "инструментов просмотра" (см. fill="currentColor" stroke="none" прямо на его