/*===================================================================== Тёмная тема скина sky. Грузится ВСЕГДА (и в светлом режиме тоже) — переключение идёт атрибутом data-theme на , поэтому смена темы мгновенная, без перезагрузки. Все правила скоупятся html[data-theme="dark"], светлый вид не трогают. Фирменные цвета группы (Admin > Design) не выбрасываются: Config::themeStyle() эмитит их вторым набором --thl-* («light»), а здесь мы подмешиваем их в тёмный фон через color-mix — шапка/меню остаются узнаваемо «своими», только тёмными. Браузеры без color-mix (Safari <16.2, Chrome <111) получают нейтральный дарк. Порядок важен: сначала нейтральные значения, потом @supports с оттенком. =====================================================================*/ html[data-theme="dark"] { color-scheme: dark; /* нативные скроллбары/контролы браузера — тёмные */ --d-bg: #0b0f19; /* фон страницы */ --d-surf: #141c2c; /* поверхность блока/карточки */ --d-surf2: #1b2436; /* вторичная поверхность (шапки таблиц) */ --d-line: #2a3550; /* границы */ --d-txt: #dde5f2; /* основной текст */ --d-mut: #93a3bf; /* приглушённый текст */ --d-acc: #5aa0ff; /* ссылки (был royalblue) */ --d-acc2: #ffd45a; /* ховер/акцент */ --d-navy: #8fb6ff; /* был navy */ --d-green: #4ec98a; --d-red: #ff7a7a; /* поверх поверхностей вместо сплошных цветов — полупрозрачные слои: так тёмная тема корректно ложится и на группы со своим фоном блоков */ --d-hi: rgba(255,255,255,0.055); /* шапка таблицы */ --d-zebra: rgba(255,255,255,0.030); /* чётная строка */ --d-well: rgba(0,0,0,0.25); /* «утопленная» ячейка/поле ввода */ /* ---- рабочие переменные темы: нейтральный дарк (fallback без color-mix) ---- */ --th-grad1: #262f41; --th-grad2: #181e2c; --th-mgrad1: #262f41; --th-mgrad2: #181e2c; --th-blockbg: #1c222e; --th-blockbg2: #161d29; --th-btnbg: #1e2738; --th-htext: #e6ecf8; --th-mhtext: #e6ecf8; --th-blocktext:#dde5f2; --th-btntext: #dbe4f5; } /* ---- тот же набор, но с подмешиванием фирменного оттенка группы ---- */ @supports (color: color-mix(in srgb, #000 50%, #fff)) { html[data-theme="dark"] { --th-grad1: color-mix(in srgb, var(--thl-grad1, #5b6c8f) 34%, #0b0f19); --th-grad2: color-mix(in srgb, var(--thl-grad2, var(--thl-grad1, #3d4a63)) 26%, #0b0f19); --th-mgrad1: color-mix(in srgb, var(--thl-mgrad1, var(--thl-grad1, #5b6c8f)) 34%, #0b0f19); --th-mgrad2: color-mix(in srgb, var(--thl-mgrad2, var(--thl-grad2, var(--thl-grad1, #3d4a63))) 26%, #0b0f19); --th-blockbg: color-mix(in srgb, var(--thl-blockbg, #8fa0bf) 13%, #0b0f19); --th-blockbg2: color-mix(in srgb, var(--thl-blockbg2, var(--thl-blockbg, #8fa0bf)) 9%, #0b0f19); --th-btnbg: color-mix(in srgb, var(--thl-btnbg, var(--thl-grad1, #5b6c8f)) 22%, #0b0f19); } } /***** Каркас страницы *****/ html[data-theme="dark"] { background-color: var(--d-bg); /* фоновая картинка группы (Design img_bg) не выбрасывается, а притемняется слоем поверх */ --th-pagebg: linear-gradient(rgba(7,11,20,0.86), rgba(7,11,20,0.86)), var(--th-bg, linear-gradient(#0b0f19, #0b0f19)); } html[data-theme="dark"] body { color: var(--d-txt); } html[data-theme="dark"] nav { box-shadow: 0 3px 5px rgba(0,0,0,0.55); } html[data-theme="dark"] footer { color: var(--d-mut); background-color: rgba(255,255,255,0.04); } html[data-theme="dark"] hr { background-color: var(--d-line); } /***** Блоки и карточки *****/ html[data-theme="dark"] div.block, html[data-theme="dark"] div.help, html[data-theme="dark"] div.box, html[data-theme="dark"] div.ttx, html[data-theme="dark"] div.book { border-top: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.45); } html[data-theme="dark"] div.logos_shed { background-color: var(--d-surf); border-color: var(--d-line); box-shadow: 2px 3px 5px rgba(0,0,0,0.45); } html[data-theme="dark"] div.border { background-color: var(--d-well); border-color: var(--d-line); color: var(--d-txt); } html[data-theme="dark"] div.h4 { color: var(--th-htext); text-shadow: rgba(0,0,0,0.5) 0 1px 1px; border-bottom-color: var(--d-line); background: linear-gradient(to bottom, var(--th-grad1), var(--th-grad2)); } html[data-theme="dark"] div.zulu, html[data-theme="dark"] div.logout { color: var(--d-acc); text-shadow: none; } html[data-theme="dark"] .news div.head { color: var(--d-txt); text-shadow: rgba(0,0,0,0.6) 1px 1px 2px; border-color: var(--d-line); } html[data-theme="dark"] #msg_contact { background-color: var(--d-surf2); border-top-color: var(--d-line); box-shadow: 0 -1px 5px rgba(0,0,0,0.6); } /***** Типографика *****/ /* белые тени под текстом в тёмной теме дают грязный ореол — гасим их везде */ html[data-theme="dark"] h4, html[data-theme="dark"] a.box, html[data-theme="dark"] .button, html[data-theme="dark"] .bt_big, html[data-theme="dark"] .button_small, html[data-theme="dark"] input.bold { text-shadow: none; } html[data-theme="dark"] h1 { color: #7fb4ff; text-shadow: rgba(0,0,0,0.6) 1px 1px 3px; } html[data-theme="dark"] h2, html[data-theme="dark"] h3 { border-bottom-color: var(--d-line); box-shadow: 0 3px 3px rgba(0,0,0,0.25); text-shadow: rgba(0,0,0,0.6) 1px 1px 3px; } html[data-theme="dark"] h4 { border-bottom-color: var(--d-line); } html[data-theme="dark"] h5 { color: var(--d-mut); text-shadow: rgba(0,0,0,0.6) 1px 1px 2px; } html[data-theme="dark"] h6 { color: var(--d-acc); text-shadow: rgba(0,0,0,0.6) 1px 1px 2px; } html[data-theme="dark"] h6.border, html[data-theme="dark"] h6.chart { background-color: var(--d-surf2); border-color: var(--d-line); } html[data-theme="dark"] a.h5 { color: var(--d-mut); } html[data-theme="dark"] div.motto { color: #e8eefc; } /***** Ссылки и цветовые классы *****/ html[data-theme="dark"] a { color: var(--d-acc); } html[data-theme="dark"] a:hover { color: var(--d-acc2); } html[data-theme="dark"] a.black { color: var(--d-txt); } html[data-theme="dark"] a.box { color: var(--d-acc); } html[data-theme="dark"] blue { color: var(--d-acc); } html[data-theme="dark"] navy { color: var(--d-navy); } html[data-theme="dark"] green { color: var(--d-green); } html[data-theme="dark"] red { color: var(--d-red); } html[data-theme="dark"] .blue { color: var(--d-acc) !important; } html[data-theme="dark"] .navy { color: var(--d-navy) !important; } html[data-theme="dark"] .green { color: var(--d-green) !important; } html[data-theme="dark"] .red { color: var(--d-red) !important; } html[data-theme="dark"] .grey { color: var(--d-mut) !important; } /***** Меню *****/ html[data-theme="dark"] .menu li { border-right-color: rgba(0,0,0,0.35); border-left-color: rgba(255,255,255,0.06); } html[data-theme="dark"] .menu a:hover { background: rgba(255,255,255,0.09); } /***** Формы *****/ html[data-theme="dark"] input.input, html[data-theme="dark"] input.login, html[data-theme="dark"] input.bold, html[data-theme="dark"] input.input_up, html[data-theme="dark"] input.book, html[data-theme="dark"] select.input, html[data-theme="dark"] select.select, html[data-theme="dark"] textarea { background-color: #0f1626; color: var(--d-txt); border-color: var(--d-line); } html[data-theme="dark"] input.input:focus, html[data-theme="dark"] input.login:focus, html[data-theme="dark"] select.input:focus, html[data-theme="dark"] select.select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--d-acc); outline: none; } html[data-theme="dark"] input.bold { color: var(--d-txt); } html[data-theme="dark"] input.input_dsp { background: transparent; color: var(--d-txt); } html[data-theme="dark"] ::placeholder { color: var(--d-mut); } html[data-theme="dark"] .button, html[data-theme="dark"] .bt_big { border: 1px solid var(--d-line); } html[data-theme="dark"] .button_small { color: var(--d-mut); } /***** Таблицы ***** Фоны задаём полупрозрачными слоями (--d-hi/--d-zebra/--d-well) поверх поверхности блока: так дарк корректно ложится и на группы, у которых тема уже сделала строки прозрачными (background:transparent!important в themeStyle). Из-за этого !important здесь обязателен. */ html[data-theme="dark"] table.gen td, html[data-theme="dark"] table.statva td, html[data-theme="dark"] table.statva th, html[data-theme="dark"] table.fleet td, html[data-theme="dark"] table.fleet th, html[data-theme="dark"] table.online td, html[data-theme="dark"] table.online th, html[data-theme="dark"] table.list td, html[data-theme="dark"] table.port td, html[data-theme="dark"] table.grid, html[data-theme="dark"] table.grid td, html[data-theme="dark"] table.config td, html[data-theme="dark"] table.doc tr, html[data-theme="dark"] table.ftask th, html[data-theme="dark"] table.ftask tbody, html[data-theme="dark"] table.ftask td.task { border-color: var(--d-line); } html[data-theme="dark"] table.gen td, html[data-theme="dark"] table.list td, html[data-theme="dark"] table.stat, html[data-theme="dark"] table.book, html[data-theme="dark"] table.ttx, html[data-theme="dark"] table.config, html[data-theme="dark"] table.cmn, html[data-theme="dark"] table.online td { color: var(--d-txt); } /* шапки */ html[data-theme="dark"] table.gen td.h, html[data-theme="dark"] table.list td.h, html[data-theme="dark"] table.list td.hs, html[data-theme="dark"] table.statva th, html[data-theme="dark"] table.fleet th, html[data-theme="dark"] table.online th, html[data-theme="dark"] table.grid td.hh, html[data-theme="dark"] table.ftask th, html[data-theme="dark"] table.book td.chart { background: var(--d-hi) !important; color: var(--d-navy) !important; border-color: var(--d-line); } html[data-theme="dark"] table.online th { color: var(--d-acc) !important; } /* тело таблиц: зебра и обычные строки */ html[data-theme="dark"] table.statva td, html[data-theme="dark"] table.fleet td, html[data-theme="dark"] table.list tr:nth-child(even), html[data-theme="dark"] table.grid td { background: transparent !important; } html[data-theme="dark"] table.list tr:nth-child(odd), html[data-theme="dark"] table.online td.img, html[data-theme="dark"] .dark { background: var(--d-zebra) !important; } html[data-theme="dark"] .light { background: transparent !important; } /* «утопленные» ячейки — там, где в светлой теме белый фон в рамке */ html[data-theme="dark"] table.stat td.route, html[data-theme="dark"] table.stat td.border, html[data-theme="dark"] table.book td.border, html[data-theme="dark"] table.book td.route, html[data-theme="dark"] table.ttx td, html[data-theme="dark"] table.ttx td.val, html[data-theme="dark"] table.cmn td.disp, html[data-theme="dark"] table.cmn td.input { background: var(--d-well) !important; color: var(--d-txt) !important; border-color: var(--d-line); } html[data-theme="dark"] table.cmn td.input { border-color: var(--d-acc); } html[data-theme="dark"] table.cmn td.dbg { background: none !important; border: none; } html[data-theme="dark"] table.ftask td.task { background: var(--d-hi) !important; color: var(--d-acc) !important; } html[data-theme="dark"] tr.hover:hover, html[data-theme="dark"] table.ftask tbody.hover:hover { background: rgba(90,160,255,0.16) !important; } /***** Шапка (head.css / face.css) *****/ html[data-theme="dark"] header { background-color: color-mix(in srgb, #4477aa 45%, #0b0f19); color: #eaf1ff; text-shadow: rgba(0,0,0,0.55) 2px 2px 8px; box-shadow: 0 3px 5px rgba(0,0,0,0.55); } /* баннер главной: картинку группы (--th-hero) оставляем, но гасим внутренней тенью, чтобы белый текст/лого поверх читались и глаз не резало; без картинки — тёмный градиент */ html[data-theme="dark"] header#header { background: var(--th-hero, linear-gradient(160deg, #1c2740, #0e1524)) center/cover no-repeat; box-shadow: 0 3px 5px rgba(0,0,0,0.55), inset 0 0 0 2000px rgba(7,11,20,0.30); } /* на узких экранах face.css намеренно убирает фото с баннера — не возвращаем его */ @media screen and (max-width: 600px) { html[data-theme="dark"] header#header { background: linear-gradient(160deg, #1c2740, #0e1524); } } /***** Скроллбар (scroll.css) *****/ html[data-theme="dark"] .scrollable .scroll-bar .thumb { background-color: #cbd6ea; opacity: 0.25; } html[data-theme="dark"] .scrollable .scroll-bar:hover .thumb { opacity: 0.45; } /***** Страница входа (login.css) *****/ html[data-theme="dark"] body.login-body, html[data-theme="dark"] .login-body { background: var(--d-bg); } html[data-theme="dark"] .container { background: var(--d-surf); box-shadow: 0 14px 28px rgba(0,0,0,0.55), 0 10px 10px rgba(0,0,0,0.45); } html[data-theme="dark"] .form-container form { background: var(--d-surf); color: var(--d-txt); } html[data-theme="dark"] .form-container input, html[data-theme="dark"] .form-container textarea { background: #0f1626; color: var(--d-txt); } html[data-theme="dark"] .form-container a { color: var(--d-mut); } html[data-theme="dark"] .social-container a { border-color: var(--d-line); } html[data-theme="dark"] div.disclaimer { color: var(--d-mut); border-color: var(--d-line); background-color: rgba(255,255,255,0.04); } html[data-theme="dark"] .toggle-control .control { background-color: #3a465e; } /* на странице входа main.css не подключён: hr и кнопки остаются нативными — красим точечно */ html[data-theme="dark"] .login-body hr { border-color: var(--d-line); } html[data-theme="dark"] .login-body input.button { background: #1e2738; color: var(--d-txt); border: 1px solid var(--d-line); border-radius: 5px; padding: 4px 14px; cursor: pointer; } html[data-theme="dark"] .login-body input.button:hover { background: #263349; } /***** Переключатель темы *****/ /* базовые стили (обе темы) живут в main.tpl — здесь только тёмный вид */ html[data-theme="dark"] .thsw a { color: var(--d-acc); } html[data-theme="dark"] .thsw a:hover { color: var(--d-acc2); }