/* Светлая тема кабинета (Егор 28.09.2026: «добавь светлую тему … цветовую гамму из TerraOS по светлой части»). Палитра — светлая тема TerraOS, страница «Досье дома» (токены --hd-* в HousingDossierPage на том же сервере): кремовый фон #f3eadc → #ecdfcc, карточки #fffaf1, тёмно-зелёный текст #24352e, бронзовые линии, акцент — зелёный #1f8a5b, сведения — синий #17689b, предупреждение #9d691d, опасность #a84534. Включается атрибутом data-theme="light" на (js/theme.js); тёмная тема — по умолчанию. Файл подключается последним: здесь токены и замены для правил, где цвет задан прямо, а не токеном. Видео (плитки камер, окно камеры) остаётся на тёмной подложке — как в любом проигрывателе. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3eadc; --panel: #fffaf1; --panel-2: #f7efe2; --panel-3: #ffffff; --line: rgba(157, 92, 29, .16); --line-2: rgba(157, 92, 29, .26); --text: #24352e; --muted: #6c6558; --faint: #8c8374; --blue: #17689b; --green: #1f8a5b; --amber: #9d691d; --red: #a84534; --money: #b4631a; --note: #6f4bb8; } :root[data-theme="light"] body { background: radial-gradient(circle at 86% -12%, rgba(31, 138, 91, .08), transparent 30%), linear-gradient(135deg, #f3eadc, #ecdfcc) fixed; } /* ── Общее: вход, поля, кнопки, окна ─────────────────────────────────────────────────────────── */ :root[data-theme="light"] .login-view { background: radial-gradient(circle at 73% 0%, rgba(31, 138, 91, .12), transparent 33rem), linear-gradient(145deg, #f3eadc, #ecdfcc 60%, #f3eadc); } :root[data-theme="light"] .login-card { background: rgba(255, 250, 241, .97); box-shadow: 0 26px 74px rgba(73, 50, 26, .18); } :root[data-theme="light"] input { background: #fffdf8; } :root[data-theme="light"] input:focus { box-shadow: 0 0 0 3px rgba(23, 104, 155, .15); } :root[data-theme="light"] .primary, :root[data-theme="light"] .dispatch-sheet-done { border-color: #1b7a51; background: #1f8a5b; color: #fffaf1; } :root[data-theme="light"] .primary:hover { background: #197a50; } :root[data-theme="light"] .mobile-overlay, :root[data-theme="light"] .dispatch-scrim { background: rgba(42, 34, 25, .42); } :root[data-theme="light"] dialog { box-shadow: 0 26px 74px rgba(73, 50, 26, .24); } :root[data-theme="light"] dialog::backdrop, :root[data-theme="light"] .cam-modal::backdrop, :root[data-theme="light"] .problem-modal::backdrop, :root[data-theme="light"] .note-modal::backdrop { background: rgba(42, 34, 25, .5); } :root[data-theme="light"] .toast { box-shadow: 0 14px 42px rgba(73, 50, 26, .2); } /* ── Шапка кабинета ──────────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] .topbar { background: rgba(255, 250, 241, .96); } :root[data-theme="light"] .back-button { background: rgba(23, 104, 155, .1); } :root[data-theme="light"] .back-button:hover { background: rgba(23, 104, 155, .2); } /* Выбранный раздел — как вкладки TerraOS: сплошной зелёный, светлый текст. */ :root[data-theme="light"] #modes button.on { color: #fffaf1; background: #1f8a5b; box-shadow: 0 1px 2px rgba(31, 138, 91, .25); } :root[data-theme="light"] .live-state i { box-shadow: 0 0 0 4px rgba(31, 138, 91, .12); } :root[data-theme="light"] .theme-choice button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(73, 50, 26, .14), inset 0 0 0 1px rgba(157, 92, 29, .18); } @media (max-width: 880px) { :root[data-theme="light"] .topbar { box-shadow: 0 5px 20px rgba(73, 50, 26, .1); } :root[data-theme="light"] .mobile-menu-button[aria-expanded="true"] { background: #dfeaf2; } :root[data-theme="light"] body.has-back .back-button { background: #e4eef4; box-shadow: 0 4px 14px rgba(73, 50, 26, .16); } :root[data-theme="light"] .left-panel { box-shadow: 24px 0 60px rgba(73, 50, 26, .18); } :root[data-theme="light"] .control-stack { box-shadow: 0 8px 22px rgba(73, 50, 26, .14); } } /* ── «Рука на пульсе»: камеры, проигрыватель, список заездов ─────────────────────────────────── */ /* Видео остаётся на тёмной подложке, поэтому внутри плиток камер и окна камеры — тёмные токены: подписи «CAM 01», статусы и время поверх кадра должны быть светлыми. */ :root[data-theme="light"] .camera-card, :root[data-theme="light"] .cam-modal-visual { --text: #e9edf5; --muted: #8c96a8; --faint: #5e6878; --blue: #438cf6; --green: #33d39b; --amber: #f4b64b; --red: #ff6173; color: var(--text); } :root[data-theme="light"] .camera-buttons button.on, :root[data-theme="light"] .rate-buttons button.on { background: #dfeaf2; } :root[data-theme="light"] .playback-panel { background: var(--panel-2); } :root[data-theme="light"] .playback-scrubber::before { background: linear-gradient(90deg, #e2d4bf, #9cc0d9 78%, #7fc3a3); box-shadow: inset 0 0 0 1px rgba(157, 92, 29, .15); } :root[data-theme="light"] #playbackSlider::-webkit-slider-thumb, :root[data-theme="light"] .cam-modal-slider::-webkit-slider-thumb, :root[data-theme="light"] .sess-slider::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 1px rgba(36, 53, 46, .45), 0 0 8px rgba(23, 104, 155, .45); } :root[data-theme="light"] .health-rail { background: #efe4d3; } :root[data-theme="light"] .health-rail i.state-unknown { background: #d8cbb6; } :root[data-theme="light"] .visit-heading b.warn, :root[data-theme="light"] .verdict-warning .visit-badge, :root[data-theme="light"] .visit-mark.warning, :root[data-theme="light"] .visit-analysis-state.pending, :root[data-theme="light"] .pchips .phase em.o, :root[data-theme="light"] .settings-state.state-degraded, :root[data-theme="light"] .analysis-brief .analysis-attention { color: var(--amber); } :root[data-theme="light"] .visit-mark.critical, :root[data-theme="light"] .verdict-critical .visit-badge, :root[data-theme="light"] .settings-state.state-offline { color: var(--red); } :root[data-theme="light"] .visit-mark.ok, :root[data-theme="light"] .visit-analysis-state.clear, :root[data-theme="light"] .visit-reviewed, :root[data-theme="light"] .pchips .phase em.u, :root[data-theme="light"] .settings-state.state-online { color: var(--green); } :root[data-theme="light"] .visit-empty, :root[data-theme="light"] .visit-when i, :root[data-theme="light"] .visit-copy small, :root[data-theme="light"] .visit-mark.unknown, :root[data-theme="light"] .visit-badge, :root[data-theme="light"] .sessions-head small, :root[data-theme="light"] .events-table th, :root[data-theme="light"] .events-table .ev-toggle, :root[data-theme="light"] .events-table .ev-sub .ev-p, :root[data-theme="light"] .session-foot h3, :root[data-theme="light"] .pchips .phase span, :root[data-theme="light"] .a-head h4, :root[data-theme="light"] .sess-axis, :root[data-theme="light"] .session-player .sess-axis { color: var(--muted); } :root[data-theme="light"] .visit-noshot, :root[data-theme="light"] .a-plain li::before { color: var(--faint); } :root[data-theme="light"] .visit-row { border-top-color: rgba(157, 92, 29, .14); border-right-color: rgba(157, 92, 29, .14); border-bottom-color: rgba(157, 92, 29, .14); background: rgba(255, 255, 255, .55); } /* левая полоса — цвет причины, её не трогаем */ :root[data-theme="light"] .visit-row:hover, :root[data-theme="light"] .visit-row.on { border-top-color: rgba(31, 138, 91, .45); border-right-color: rgba(31, 138, 91, .45); border-bottom-color: rgba(31, 138, 91, .45); background: rgba(31, 138, 91, .08); } :root[data-theme="light"] .visit-thumb { background: #e9dfcf; } /* Цвет причины задаётся из кода (live-state.js, CAUSES) под тёмный фон; на светлом притемняем чип целиком. */ :root[data-theme="light"] .cause-chip { filter: brightness(.72) saturate(1.15); } /* ── Карточка заезда, события, разбор ────────────────────────────────────────────────────────── */ :root[data-theme="light"] .sess-band { background: rgba(36, 53, 46, .07); } :root[data-theme="light"] .sess-axis b, :root[data-theme="light"] .session-player .sess-now { color: var(--text); } :root[data-theme="light"] .pchips .phase { border-color: rgba(157, 92, 29, .14); background: rgba(255, 255, 255, .6); } :root[data-theme="light"] .pchips .phase.now { box-shadow: inset 0 0 0 1px rgba(36, 53, 46, .35); } :root[data-theme="light"] .session-body { border-top-color: rgba(157, 92, 29, .14); } :root[data-theme="light"] .events-table, :root[data-theme="light"] .events-table .ev-toggle:hover, :root[data-theme="light"] .events-table .ev-sub.now td, :root[data-theme="light"] .events-table .ev-row:hover td, :root[data-theme="light"] .events-table .ev-row.now td, :root[data-theme="light"] .events-table .ev-row.sev-warning td, :root[data-theme="light"] .events-table .ev-row.sev-critical td, :root[data-theme="light"] .ev-problem, :root[data-theme="light"] .session-foot .note, :root[data-theme="light"] .settings-note code { color: var(--text); } :root[data-theme="light"] .events-table .ev-sub td { color: var(--muted); background: rgba(157, 92, 29, .04); } :root[data-theme="light"] .events-table .ev-row:hover td { background: rgba(157, 92, 29, .06); } :root[data-theme="light"] .ev-problem { background: rgba(157, 92, 29, .07); } :root[data-theme="light"] .ev-problem:hover { background: rgba(157, 92, 29, .13); } :root[data-theme="light"] .ev-problem.sev-warning { color: var(--amber); } :root[data-theme="light"] .ev-problem.sev-critical { color: var(--red); } :root[data-theme="light"] .analysis-root { background: rgba(255, 255, 255, .5); } :root[data-theme="light"] .analysis-root > summary:hover { background: rgba(157, 92, 29, .05); } :root[data-theme="light"] .a-root-title, :root[data-theme="light"] .a-fact-value, :root[data-theme="light"] .a-item-text, :root[data-theme="light"] .a-service-name, :root[data-theme="light"] .a-frame-seek, :root[data-theme="light"] .a-frame-seek:hover, :root[data-theme="light"] .a-more > summary:hover { color: var(--text); } :root[data-theme="light"] .a-more > summary { color: var(--muted); } :root[data-theme="light"] .a-fact { background: var(--panel); } :root[data-theme="light"] .a-item { background: rgba(157, 92, 29, .04); } :root[data-theme="light"] .a-status.none { background: rgba(157, 92, 29, .08); } :root[data-theme="light"] .a-frame { background: rgba(255, 255, 255, .5); } :root[data-theme="light"] .a-frame-seek:hover, :root[data-theme="light"] .a-frame-open:hover { background: rgba(23, 104, 155, .1); } :root[data-theme="light"] .a-frame-open { color: var(--blue); } :root[data-theme="light"] .report-status-chip.insufficient { background: rgba(157, 92, 29, .06); } :root[data-theme="light"] .session-focus { background: linear-gradient(125deg, #e7f1ea, var(--panel) 65%); } :root[data-theme="light"] .session-vehicle, :root[data-theme="light"] .session-services, :root[data-theme="light"] .note-input[readonly] { color: var(--text); } :root[data-theme="light"] .session-context, :root[data-theme="light"] .session-program { color: var(--muted); } :root[data-theme="light"] .note-button, :root[data-theme="light"] .note-edit, :root[data-theme="light"] .note-block-head b, :root[data-theme="light"] .note-button.filled .note-icon { color: #5b3fa6; } :root[data-theme="light"] .note-button:hover, :root[data-theme="light"] .note-button.filled { color: #4a3190; } :root[data-theme="light"] .note-actions .note-delete, :root[data-theme="light"] .note-actions .note-delete.confirm { color: var(--red); } :root[data-theme="light"] .note-actions .note-save { border-color: #6f4bb8; background: #6f4bb8; color: #fff; } :root[data-theme="light"] .note-actions .note-save:hover:not(:disabled) { background: #5f3ea3; } :root[data-theme="light"] .session-player { background: var(--panel-2); } :root[data-theme="light"] .session-player .sess-band { background: #d7e5ef; box-shadow: 0 0 0 1px rgba(23, 104, 155, .15); } :root[data-theme="light"] .session-player .sess-slider:focus-visible { outline-color: var(--blue); } :root[data-theme="light"] .session-player .sess-slider::-webkit-slider-thumb { border-color: #fff; background: var(--blue); box-shadow: 0 0 0 1px rgba(23, 104, 155, .35), 0 2px 8px rgba(23, 104, 155, .35); } :root[data-theme="light"] .session-player .sess-slider::-moz-range-thumb { border-color: #fff; background: var(--blue); box-shadow: 0 0 0 1px rgba(23, 104, 155, .35), 0 2px 8px rgba(23, 104, 155, .35); } /* ── «Настройки» ─────────────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] .settings-card { border-left-color: var(--faint); background: rgba(255, 255, 255, .6); } :root[data-theme="light"] .settings-card.ok { border-left-color: #10b981; } :root[data-theme="light"] .settings-card.stale { border-left-color: #f59e0b; } :root[data-theme="light"] .settings-card.off { border-left-color: #ef4444; } :root[data-theme="light"] .settings-toggle i { background: rgba(36, 53, 46, .18); } :root[data-theme="light"] .settings-toggle input:checked + i { background: rgba(31, 138, 91, .8); } :root[data-theme="light"] .settings-toggle i::after { background: #fff; } /* ── «Обзор» (dispatch.css) ──────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] .dispatch-moment-button.set, :root[data-theme="light"] .dispatch-moment-clear { background: #dfeaf2; } :root[data-theme="light"] .dispatch-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(73, 50, 26, .14), inset 0 0 0 1px rgba(157, 92, 29, .18); } :root[data-theme="light"] .dispatch-menu, :root[data-theme="light"] .dispatch-pop { box-shadow: 0 14px 34px rgba(73, 50, 26, .2); } :root[data-theme="light"] .dispatch-sheet { box-shadow: 0 -10px 30px rgba(73, 50, 26, .14); } :root[data-theme="light"] .dispatch-live-dot, :root[data-theme="light"] .dispatch-dot.on { box-shadow: 0 0 0 3px rgba(31, 138, 91, .18); } :root[data-theme="light"] .dispatch-night { background: rgba(90, 70, 40, .06); } /* Тепловая полоса: подложка задаётся из кода полупрозрачным фиолетовым — на креме текст везде тёмный. */ :root[data-theme="light"] .dispatch-heat-cell, :root[data-theme="light"] .dispatch-heat-cell.dark { color: var(--text); } :root[data-theme="light"] .dispatch-idle { background: repeating-linear-gradient(135deg, rgba(36, 53, 46, .07) 0 6px, transparent 6px 12px); } :root[data-theme="light"] .dispatch-track { background: rgba(36, 53, 46, .045); } :root[data-theme="light"] .dispatch-blind { border-color: rgba(108, 101, 88, .4); background: repeating-linear-gradient(45deg, rgba(108, 101, 88, .12) 0 2px, transparent 2px 8px); } :root[data-theme="light"] .dispatch-car.lv-check, :root[data-theme="light"] .dispatch-stage.lv-check { outline-color: #8c8374; } :root[data-theme="light"] .dispatch-car.hl, :root[data-theme="light"] .dispatch-stage.hl { outline-color: var(--text); } :root[data-theme="light"] .dispatch-now { background: var(--text); } :root[data-theme="light"] .dispatch-now-tag { background: var(--text); color: #fffaf1; } :root[data-theme="light"] .dispatch-pop-signals li.l3 { color: var(--red); } :root[data-theme="light"] .dispatch-pop-signals li.l2 { color: var(--amber); } /* «Три этапа»: ожидание и протирка — светлые оттенки цвета программы с тёмной подписью, мойка — полный цвет. Обводка машины темнее цвета программы: белая на креме не видна. */ :root[data-theme="light"] .dispatch-fill .q { fill: color-mix(in srgb, var(--pc) 24%, #fffaf1); } :root[data-theme="light"] .dispatch-fill .d { fill: color-mix(in srgb, var(--pc) 42%, #fffaf1); } :root[data-theme="light"] .dispatch-fill .qw, :root[data-theme="light"] .dispatch-fill .b { fill: color-mix(in srgb, var(--pc) 55%, #fffaf1); } :root[data-theme="light"] .dispatch-fill .wd { fill: color-mix(in srgb, var(--pc) 70%, #fffaf1); } :root[data-theme="light"] .dispatch-stage.q, :root[data-theme="light"] .dispatch-stage.d { color: var(--text); } :root[data-theme="light"] .dispatch-stage.q .dispatch-stage-label, :root[data-theme="light"] .dispatch-stage.d .dispatch-stage-label { text-shadow: none; } :root[data-theme="light"] .dispatch-outline { stroke: color-mix(in srgb, var(--pc) 72%, #24352e); } :root[data-theme="light"] .dispatch-outline.piece { stroke: var(--text); } :root[data-theme="light"] .dispatch-legend .sw-q { background: color-mix(in srgb, var(--std) 24%, #fffaf1); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--std) 72%, #24352e); } :root[data-theme="light"] .dispatch-legend .sw-d { background: color-mix(in srgb, var(--std) 42%, #fffaf1); } :root[data-theme="light"] .dispatch-legend .sw-check { outline-color: #8c8374; } :root[data-theme="light"] .dispatch-legend .sw-idle { background: repeating-linear-gradient(135deg, rgba(36, 53, 46, .3) 0 3px, transparent 3px 6px); } :root[data-theme="light"] .dispatch-legend .sw-blind { border-color: rgba(108, 101, 88, .6); background: repeating-linear-gradient(45deg, rgba(108, 101, 88, .3) 0 1px, transparent 1px 4px); }