/* ============================================================ DARK THEME — применяется когда на есть класс .dark ============================================================ */ /* ---------- Переменные ---------- */ html.dark { --bg: #0f172a; /* страница */ --surface: #1e293b; /* карточки, таблицы, меню */ --surface-2: #283548; /* hover, вложенный фон */ --border: #334155; /* границы */ --text: #f1f5f9; /* основной текст */ --text-2: #94a3b8; /* вторичный текст */ --text-3: #64748b; /* приглушённый */ --blue: #3b82f6; /* акцент */ --blue-dim: #1e3a5f; /* светлый синий фон */ } /* ---------- Базовые элементы ---------- */ html.dark body { background-color: var(--bg) !important; color: var(--text) !important; } html.dark main { background-color: var(--bg) !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--text) !important; } html.dark a { color: #60a5fa; } html.dark a:hover { color: #93c5fd; } html.dark hr { border-color: var(--border); } /* ---------- Иконки меню ---------- */ /* Не-активные иконки — белёсые */ html.dark .nav-trigger img:not([style*="filter"]), html.dark .menu-top img:not([style*="filter"]) { filter: brightness(0) invert(1) opacity(0.55); } /* Гамбургер-кнопка мобильного меню */ html.dark #logo { color: #94a3b8 !important; } /* ---------- Header / Nav ---------- */ html.dark header { background-color: var(--surface) !important; border-color: var(--border) !important; } /* Desktop nav trigger */ html.dark .nav-trigger { color: var(--text-2) !important; } html.dark .nav-trigger:hover, html.dark .nav-trigger.active { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark .nav-trigger.text-blue-600 { color: #60a5fa !important; } /* Desktop dropdown */ html.dark .nav-dropdown-portal { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark .nav-dropdown-portal a { color: var(--text-2) !important; } html.dark .nav-dropdown-portal a:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark .nav-dropdown-portal a.bg-sky-100 { background-color: var(--blue-dim) !important; color: #60a5fa !important; } /* Mobile side menu */ html.dark #sideMenu { background-color: var(--surface) !important; } html.dark .menu-top { color: var(--text-2) !important; } html.dark .menu-top:hover, html.dark .menu-item.open .menu-top { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark .menu-top.text-blue-600 { color: #60a5fa !important; } html.dark #sideMenu a { color: var(--text-2) !important; } html.dark #sideMenu a:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark #sideMenu a.bg-sky-100 { background-color: var(--blue-dim) !important; color: #60a5fa !important; } html.dark #sideMenu a.bg-sky-100 .bg-blue-400 { background-color: #60a5fa !important; } html.dark #sideMenuOverlay { background-color: rgba(0,0,0,0.7) !important; } /* ---------- Tailwind utility overrides ---------- */ html.dark .bg-white { background-color: var(--surface) !important; } html.dark .bg-gray-50 { background-color: var(--bg) !important; } html.dark .bg-gray-100 { background-color: var(--surface-2) !important; } html.dark .bg-gray-200 { background-color: var(--border) !important; } html.dark .text-gray-800 { color: var(--text) !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #94a3b8 !important; } html.dark .text-gray-500 { color: var(--text-2) !important; } html.dark .text-gray-400 { color: var(--text-3) !important; } html.dark .text-gray-300 { color: #475569 !important; } html.dark .border-gray-100 { border-color: #1e293b !important; } html.dark .border-gray-200 { border-color: var(--border) !important; } html.dark .border-gray-300 { border-color: #475569 !important; } html.dark .hover\:bg-gray-50:hover { background-color: var(--surface-2) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--surface-2) !important; } html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 1px 6px rgba(0,0,0,0.5) !important; } /* ---------- Таблицы ---------- */ html.dark table { color: var(--text); } html.dark th { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; } html.dark td { border-color: var(--border) !important; color: var(--text) !important; } html.dark tr:hover td { background-color: var(--surface-2) !important; } /* ---------- Формы / инпуты ---------- */ html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="search"], html.dark input[type="tel"], html.dark input[type="url"], html.dark input[type="date"], html.dark input[type="time"], html.dark input[type="datetime-local"], html.dark input[type="month"], html.dark input[type="week"], html.dark select, html.dark textarea { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; color-scheme: dark; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--text-3) !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: var(--blue) !important; outline: none !important; } html.dark label { color: var(--text-2) !important; } /* ---------- Кнопки ---------- */ html.dark button.bg-blue-600, html.dark .bg-blue-600 { background-color: #2563eb !important; } html.dark button.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; } html.dark .border-gray-300.bg-white { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; } html.dark .hover\:bg-gray-50:hover { background-color: var(--surface-2) !important; } /* ---------- Активные кнопки переключения вида ---------- */ html.dark .bg-blue-50 { background-color: var(--blue-dim) !important; } html.dark .text-blue-700 { color: #60a5fa !important; } html.dark .border-blue-300 { border-color: #3b82f6 !important; } html.dark .text-blue-600 { color: #60a5fa !important; } /* ---------- Пагинация / слайдер ---------- */ html.dark #pageSlider { background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--slider-pct, 0%), #334155 var(--slider-pct, 0%), #334155 100%) !important; } html.dark #pageSlider::-webkit-slider-thumb { background: #e2e8f0 !important; box-shadow: 0 1px 5px rgba(0,0,0,0.6) !important; } html.dark #pageSlider::-moz-range-thumb { background: #e2e8f0 !important; box-shadow: 0 1px 5px rgba(0,0,0,0.6) !important; } html.dark #sliderTooltip > div { background-color: #f1f5f9 !important; color: #0f172a !important; } /* ---------- Footer ---------- */ html.dark footer { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-3) !important; } html.dark footer a { color: var(--text-2) !important; } html.dark footer a:hover { color: var(--text) !important; } html.dark #btnFullscreen, html.dark #btnDark { color: var(--text-2) !important; } html.dark #btnFullscreen:hover, html.dark #btnDark:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } /* ---------- Flash-сообщения ---------- */ html.dark .bg-green-50 { background-color: #052e16 !important; border-color: #16a34a !important; color: #86efac !important; } html.dark .bg-red-50, html.dark .text-red-800 { background-color: #2d0a0a !important; border-color: #dc2626 !important; color: #fca5a5 !important; } html.dark .bg-yellow-50 { background-color: #1c1400 !important; border-color: #ca8a04 !important; color: #fde68a !important; } html.dark .bg-blue-50.text-blue-800 { background-color: #0c1a2e !important; border-color: #3b82f6 !important; color: #93c5fd !important; } /* ---------- Select2 ---------- */ html.dark .select2-container--default .select2-selection--single { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; } html.dark .select2-dropdown { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark .select2-container--default .select2-results__option { color: var(--text) !important; } html.dark .select2-container--default .select2-results__option--highlighted { background-color: var(--blue-dim) !important; color: #60a5fa !important; } /* ---------- DataTables ---------- */ html.dark .dataTables_wrapper { color: var(--text) !important; } html.dark .dataTables_wrapper .dataTables_filter input { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .dataTables_wrapper .dataTables_info, html.dark .dataTables_wrapper .dataTables_length, html.dark .dataTables_wrapper .dataTables_filter, html.dark .dataTables_wrapper .dataTables_processing, html.dark .dataTables_wrapper .dataTables_paginate { color: var(--text-2) !important; } html.dark table.dataTable thead th, html.dark table.dataTable thead td { border-color: var(--border) !important; } html.dark table.dataTable.row-border tbody tr, html.dark table.dataTable.display tbody tr { border-color: var(--border) !important; } html.dark table.dataTable tbody tr, html.dark table.dataTable tbody tr td, html.dark table.dataTable tbody tr th { background-color: transparent !important; } html.dark table.dataTable tbody tr:nth-child(odd), html.dark table.dataTable tbody tr.odd { background-color: var(--surface) !important; } html.dark table.dataTable tbody tr:nth-child(even), html.dark table.dataTable tbody tr.even { background-color: var(--surface-2) !important; } html.dark table.dataTable tbody tr:nth-child(odd) > td, html.dark table.dataTable tbody tr:nth-child(even) > td, html.dark table.dataTable tbody tr.odd > td, html.dark table.dataTable tbody tr.even > td { background-color: transparent !important; } html.dark table.dataTable tbody tr:hover, html.dark table.dataTable tbody tr:hover > td { background-color: #283548 !important; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-2) !important; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--blue-dim) !important; color: #60a5fa !important; border-color: var(--border) !important; } /* DataTables 2.x (Tailwind плагин): шапка с поиском/длиной и подвал с инфо/пагинацией */ html.dark div.dt-container, html.dark div.dt-container .dt-layout-row, html.dark div.dt-container .dt-layout-cell { color: var(--text) !important; background-color: transparent !important; } html.dark div.dt-container .dt-search input, html.dark div.dt-container .dt-length select, html.dark div.dt-container input.dt-input, html.dark div.dt-container select.dt-input { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark div.dt-container .dt-info { color: var(--text-2) !important; } html.dark div.dt-container .dt-paging .dt-paging-button, html.dark div.dt-container .dt-paging button { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; } html.dark div.dt-container .dt-paging .dt-paging-button:hover, html.dark div.dt-container .dt-paging button:hover { background-color: var(--border) !important; color: var(--text) !important; } html.dark div.dt-container .dt-paging .dt-paging-button.current, html.dark div.dt-container .dt-paging button.current { background-color: var(--blue-dim) !important; color: #60a5fa !important; border-color: var(--blue) !important; } html.dark div.dt-container .dt-paging .dt-paging-button.disabled, html.dark div.dt-container .dt-paging button.disabled, html.dark div.dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark div.dt-container .dt-paging button.disabled:hover { background-color: var(--surface) !important; color: var(--text-3) !important; cursor: not-allowed !important; } html.dark table.dataTable.cell-border tbody th, html.dark table.dataTable.cell-border tbody td, html.dark table.dataTable.row-border tbody th, html.dark table.dataTable.row-border tbody td, html.dark table.dataTable.stripe tbody tr, html.dark table.dataTable.display tbody tr { border-color: var(--border) !important; } /* ---------- Скроллбары ---------- */ html.dark ::-webkit-scrollbar { background-color: var(--surface); } html.dark ::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background-color: #475569; }