/* Светлая тема. Файл подключён всегда и молчит, пока на нет data-theme="light" — поэтому переключение мгновенное, без перезагрузки и без вспышки не той темы при первой отрисовке (атрибут ставит сервер по куке). Здесь только цвета: раскладка и плотность общие с base.css. */ :root[data-theme="light"] { color-scheme: light; --color-bg: #f1f3f5; --color-bg-elevated: #ffffff; --color-bg-card: #fafbfc; --color-border: #e2e6ea; --color-border-strong: #c7cfd6; --color-fg: #121920; --color-fg-muted: #4d5964; --color-fg-dim: #6c7883; --color-accent: #0b7f72; --color-accent-strong: #096a5f; --color-accent-fg: #ffffff; --color-warning: #8a5b06; --color-danger: #bf3a34; --muted: #4d5964; } [data-theme="light"] body { background: var(--color-bg); } [data-theme="light"] ::selection { background: #0b7f7226; color: #0a1a18; } /* --- Каркас -------------------------------------------------------------- */ [data-theme="light"] .sidebar { background: #ffffff; border-right-color: var(--color-border); } /* Кролик светлый и на белом пропадает — сажаем его на тёмную плашку. */ [data-theme="light"] .wrab-logo { background: #0d1417; border-radius: 9px; padding: 3px; } [data-theme="light"] .login-brand .wrab-logo { padding: 5px; border-radius: 12px; } [data-theme="light"] .topbar { background: #f1f3f5e6; border-bottom-color: var(--color-border); } [data-theme="light"] .nav-link:hover { background: #0000000a; color: var(--color-fg); } [data-theme="light"] .nav-link.active { background: #0b7f721a; border-color: #0b7f7233; } [data-theme="light"] .icon-button:hover { background: #00000008; } [data-theme="light"] .avatar { background: #eef1f3; border-color: #d8dee4; color: #35424d; } [data-theme="light"] .crumb { color: #3b4750; } [data-theme="light"] .crumb-divider, [data-theme="light"] .footer-divider { color: #a7b1ba; } [data-theme="light"] .skip-link { color: #fff; } /* --- Поверхности --------------------------------------------------------- */ [data-theme="light"] .panel, [data-theme="light"] .kpi, [data-theme="light"] .machine-card, [data-theme="light"] .quick-card, [data-theme="light"] .tenant-tile, [data-theme="light"] .portal-summary, [data-theme="light"] .context-label, [data-theme="light"] .empty-card, [data-theme="light"] .login-card { background: #ffffff; border-color: var(--color-border); box-shadow: 0 1px 2px #10203008, 0 10px 26px -22px #1020304d; } [data-theme="light"] .tenant-card { background: linear-gradient(160deg, #ffffff 0%, #fbfcfd 100%); border-color: var(--color-border); box-shadow: 0 1px 2px #10203008, 0 12px 30px -24px #10203055; } [data-theme="light"] .tenant-card:hover { border-color: #0b7f7266; box-shadow: 0 14px 34px -22px #10203040; } [data-theme="light"] .machine-card:hover { border-color: #0b7f7266; } [data-theme="light"] .tenant-card footer { background: #f6f8f9; border-top-color: var(--color-border); } [data-theme="light"] .count-badge { background: #f2f4f6; border-color: var(--color-border); } [data-theme="light"] .meter { background: #e4e8ec; } /* --- Таблицы ------------------------------------------------------------- */ [data-theme="light"] th { background: #f7f8fa; color: #5d6a75; border-bottom-color: var(--color-border); } [data-theme="light"] td { border-bottom-color: #eceff2; color: var(--color-fg-muted); } [data-theme="light"] tbody tr:nth-child(even) td { background: #f8fafb; } [data-theme="light"] tbody tr:hover td { background: #eef6f5; } [data-theme="light"] tbody tr:has(.status-pill.unknown) td:first-child { box-shadow: inset 2px 0 0 #94a1ab; } [data-theme="light"] .table-wrap.is-scrollable tbody td:first-child, [data-theme="light"] .table-wrap.keep-table tbody td:first-child { background: #ffffff; box-shadow: 1px 0 0 var(--color-border); } [data-theme="light"] .table-wrap.is-scrollable thead th:first-child, [data-theme="light"] .table-wrap.keep-table thead th:first-child, [data-theme="light"] .table-wrap.can-stick thead th { background: #f7f8fa; } [data-theme="light"] .table-wrap.is-scrollable { background: linear-gradient(to right, #ffffff 30%, #ffffff00), linear-gradient(to right, #ffffff00, #ffffff 70%) 100% 0, radial-gradient(farthest-side at 0 50%, #1020301f, transparent), radial-gradient(farthest-side at 100% 50%, #1020301f, transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } @media (max-width: 760px) { [data-theme="light"] tbody tr { background: #ffffff; border-color: var(--color-border); } [data-theme="light"] tbody tr:has(.status-pill.down) { border-color: #bf3a3455; } [data-theme="light"] td { border-bottom-color: #eef1f4; } } /* --- Состояния: на белом нужен другой уровень контраста ------------------ */ [data-theme="light"] .status-pill.up, [data-theme="light"] .state-ok, [data-theme="light"] .slot-cell.up, [data-theme="light"] .large-state.up, [data-theme="light"] .tag.good { color: #146a49; } [data-theme="light"] .status-pill.up { border-color: #146a4933; background: #146a490f; } [data-theme="light"] .slot-cell.up { border-color: #146a4933; background: #146a490f; } [data-theme="light"] .large-state.up { border-color: #146a4940; background: #146a490d; } [data-theme="light"] .status-pill.down, [data-theme="light"] .state-error, [data-theme="light"] .slot-cell.down, [data-theme="light"] .large-state.down, [data-theme="light"] .tag.danger { color: var(--color-danger); } [data-theme="light"] .status-pill.down { border-color: #bf3a3433; background: #bf3a340d; } [data-theme="light"] .slot-cell.down { border-color: #bf3a3433; background: #bf3a340d; } [data-theme="light"] .large-state.down { border-color: #bf3a3440; background: #bf3a340d; } [data-theme="light"] .status-pill.unknown { color: #6c7883; border-color: var(--color-border); background: #00000005; } [data-theme="light"] .state-warn, [data-theme="light"] .tag.warn { color: #8a5b06; } [data-theme="light"] .state-never { color: #707a84; } /* было #8b959e — 3.0:1 на белом */ [data-theme="light"] .status-dot { background: #9aa4ad; } [data-theme="light"] .status-dot.ok { background: #17845b; } [data-theme="light"] .status-dot.bad { background: var(--color-danger); } [data-theme="light"] .alert.danger { border-color: #bf3a3440; background: #bf3a340d; color: #96271f; } [data-theme="light"] .btn-danger { color: #6d7780; } [data-theme="light"] .btn-danger:hover { border-color: #bf3a3455; background: #bf3a340d; color: var(--color-danger); } /* --- Формы и кнопки ------------------------------------------------------ */ [data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea, [data-theme="light"] .form-stack input, [data-theme="light"] .form-stack select, [data-theme="light"] .form-stack textarea, [data-theme="light"] .filters input[type="search"], [data-theme="light"] .copy-box, [data-theme="light"] .periods { background: #ffffff; } [data-theme="light"] .field input:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .field textarea:focus, [data-theme="light"] .form-stack input:focus, [data-theme="light"] .filters input[type="search"]:focus { box-shadow: 0 0 0 3px #0b7f721f; } [data-theme="light"] .secondary { background: #ffffff; } [data-theme="light"] .secondary:hover { border-color: #0b7f7280; background: #0b7f720d; } [data-theme="light"] .periods a:hover, [data-theme="light"] .periods a[aria-current], [data-theme="light"] .periods button.is-active, [data-theme="light"] .periods button[aria-pressed="true"] { background: #0b7f7214; } [data-theme="light"] .chip { background: #ffffff; } [data-theme="light"] .chip.is-on { background: #0b7f7214; border-color: #0b7f7240; } [data-theme="light"] .op[open] { border-color: #0b7f7255; } [data-theme="light"] .step-num { border-color: #0b7f7238; background: #0b7f720f; } [data-theme="light"] .step.is-done .step-num { border-color: #146a4938; background: #146a490f; color: #146a49; } [data-theme="light"] .hint-bar { background: #ffffff; border-color: var(--color-border); } [data-theme="light"] .route-symbol, [data-theme="light"] .empty-symbol { border-color: #0b7f7233; background: #0b7f720d; } [data-theme="light"] .summary-value .summary-badge { background: #0b7f7214; } /* --- График -------------------------------------------------------------- */ [data-theme="light"] .gridline { stroke: #e6eaee; } [data-theme="light"] .chart-cursor-line { stroke: #98a3ad; } [data-theme="light"] .chart-tip { background: #ffffffec; border-color: var(--color-border); color: var(--color-fg); box-shadow: 0 12px 34px #10203026; } [data-theme="light"] .chart-point, [data-theme="light"] .chart-dot { stroke: #ffffff; } [data-theme="light"] .series.purple { stroke: #5b4bc4; } [data-theme="light"] .chart-tip-row i.purple { background: #5b4bc4; } [data-theme="light"] .chart-area.purple, [data-theme="light"] .chart-point.purple, [data-theme="light"] .chart-dot.purple { fill: #5b4bc4; } [data-theme="light"] .chart-area { opacity: .12; } /* --- Вход ---------------------------------------------------------------- */ [data-theme="light"] .login-page { background: radial-gradient(ellipse at 50% 0%, #0b7f7212, transparent 62%), var(--color-bg); } [data-theme="light"] .login-foot span { background: var(--color-border); } /* --- Сам переключатель темы ---------------------------------------------- */ /* Показываем ту тему, в которую переключимся, а не текущую. */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }