/* Dark theme scoped by [data-theme="dark"] on */ :root[data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: #0f1115; color: #e5e7eb; } /* Surfaces */ [data-theme="dark"] header, [data-theme="dark"] .section, [data-theme="dark"] .container, [data-theme="dark"] .right_container, [data-theme="dark"] .modal, [data-theme="dark"] .alert, [data-theme="dark"] .deal_div, [data-theme="dark"] .list .li { background-color: #111317; color: #e5e7eb; } /* High-specificity for forced white components */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .box, [data-theme="dark"] .widget, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-dropdown, [data-theme="dark"] .air-datepicker, [data-theme="dark"] .datepicker, [data-theme="dark"] .fancybox-content, [data-theme="dark"] .fancybox__content, [data-theme="dark"] .SumoSelect .optWrapper, [data-theme="dark"] .SumoSelect .optWrapper .options li { background-color: #111317 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } /* Dropzone dark theme */ [data-theme="dark"] .dropzone { min-height: 150px; border: 2px dashed #2a2f3a !important; background: #111317 !important; padding: 20px 20px; color: #e5e7eb !important; } [data-theme="dark"] .dropzone:hover { border-color: #3d7fff !important; background: #141821 !important; } [data-theme="dark"] .dropzone .dz-message { color: #e5e7eb !important; } [data-theme="dark"] .dropzone .dz-preview .dz-image { background-color: #1a1d23 !important; } [data-theme="dark"] .dropzone .dz-preview .dz-details { background-color: #1a1d23 !important; color: #e5e7eb !important; } [data-theme="dark"] .dropzone .dz-preview .dz-progress { background-color: #2a2f3a !important; } [data-theme="dark"] .dropzone .dz-preview .dz-progress .dz-upload { background-color: #3d7fff !important; } [data-theme="dark"] .dropzone .dz-preview .dz-error-message { background-color: #2d1b1b !important; color: #ff6b6b !important; } [data-theme="dark"] .dropzone .dz-preview .dz-success-mark, [data-theme="dark"] .dropzone .dz-preview .dz-error-mark { color: #e5e7eb !important; } /* Sidebar/menu */ [data-theme="dark"] .menu__hamburger, [data-theme="dark"] .main-sidebar, [data-theme="dark"] .menu_tabs_ul { background-color: #111317; border-color: #2a2f3a !important; } /* Links */ [data-theme="dark"] a { color: #8ab4f8; } [data-theme="dark"] a:hover { color: #a7c4fb; } /* Borders */ [data-theme="dark"] hr, [data-theme="dark"] .card, [data-theme="dark"] .box, [data-theme="dark"] .panel, [data-theme="dark"] .table, [data-theme="dark"] .right_container { border-color: #2a2f3a !important; } /* Inputs */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .SumoSelect > .CaptionCont, [data-theme="dark"] .SumoSelect .optWrapper { background-color: #1a1d23 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } /* Buttons */ [data-theme="dark"] .btn, [data-theme="dark"] button, [data-theme="dark"] .blue-button { background-color: #1f2937; color: #e5e7eb; border-color: #2a2f3a; } /* Tables */ [data-theme="dark"] table { background-color: #111317; color: #e5e7eb; } [data-theme="dark"] table thead th, [data-theme="dark"] .table thead th { background-color: #161922 !important; color: #e5e7eb !important; } [data-theme="dark"] table tbody tr:nth-child(even) { background-color: #141821; } /* Status colors */ [data-theme="dark"] .status_success { color: #8dd694; } [data-theme="dark"] .status_error { color: #ff8a8a; } /* Theme toggle minimal tweaks */ [data-theme="dark"] #theme-toggle { background: #1f2937; color: #e5e7eb; } /* More form bits */ [data-theme="dark"] .form-control, [data-theme="dark"] .custom-select, [data-theme="dark"] .input-group-text { background-color: #1a1d23 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } /* Pagination */ [data-theme="dark"] .page-link { background-color: #1a1d23 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } [data-theme="dark"] .pagination li a, [data-theme="dark"] .pagination li span { color: #ededed !important; background-color: #343a40 !important; border-color: #2a2f3a !important; } [data-theme="dark"] .pagination li a:hover, [data-theme="dark"] .pagination li span:hover { background-color: #3d7fff !important; color: #fff !important; } [data-theme="dark"] .pagination li.active a, [data-theme="dark"] .pagination li.active span { background-color: #3d7fff !important; color: #fff !important; } /* Outline/light buttons */ [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-default { background-color: #1f2937 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-light { color: #e5e7eb !important; border-color: #2a2f3a !important; } /* Toggle containers (explicit override of white blocks) */ [data-theme="dark"] .toggle-container, [data-theme="dark"] .auto-refresh-toggle { background-color: #111317 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } [data-theme="dark"] .toggle-label { color: #e5e7eb !important; } [data-theme="dark"] .slider { background-color: #2a2f3a !important; } [data-theme="dark"] .slider:before { background-color: #e5e7eb !important; } [data-theme="dark"] input:checked + .slider { background-color: #2196F3 !important; } /* Profile page info block */ [data-theme="dark"] .profile_info_block { background-color: #111317 !important; color: #e5e7eb !important; border-color: #2a2f3a !important; } [data-theme="dark"] .profile_info_item p { color: #a7c4fb !important; } /* Table zebra rows */ [data-theme="dark"] .list_operations tr:nth-child(odd) { background-color: #141821 !important; } [data-theme="dark"] .list_operations tr:nth-child(even) { background-color: #111317 !important; } /* Header right user link - make lighter */ [data-theme="dark"] header .section .header_right .user a { color: #a7c4fb !important; } /* Device update modal wrapper (remove white square) */ [data-theme="dark"] .modal-wrapper-update-device-modal { background: transparent !important; } /* ===== ADDITIONAL DARK THEME FIXES ===== */ /* Status requisite text visibility */ [data-theme="dark"] .status_requisite { color: #e5e7eb !important; background-color: #2a2f3a !important; } [data-theme="dark"] .status_requisite.status_requisite_close { background-color: #dc2626 !important; color: white !important; } [data-theme="dark"] .status_requisite.status_requisite_create { background-color: #16a34a !important; color: white !important; } /* All modals dark theme */ [data-theme="dark"] .modal, [data-theme="dark"] .modal.add_device_modal, [data-theme="dark"] .modal.qr_modal { background-color: #111317 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; } /* QR Modal specific dark theme */ [data-theme="dark"] .modal.qr_modal { background-color: #111317 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .modal.qr_modal .modal_top { background-color: #111317 !important; color: #e5e7eb !important; border-bottom: 1px solid #2a2f3a !important; } [data-theme="dark"] .modal.qr_modal .modal_body { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .modal.qr_modal .modal_footer { background-color: #111317 !important; color: #e5e7eb !important; border-top: 1px solid #2a2f3a !important; } [data-theme="dark"] .modal .modal_top { background-color: #111317 !important; color: #e5e7eb !important; border-bottom: 1px solid #2a2f3a !important; } [data-theme="dark"] .modal .modal_body { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .modal .modal_footer { background-color: #111317 !important; color: #e5e7eb !important; border-top: 1px solid #2a2f3a !important; } /* Modal form elements */ [data-theme="dark"] .modal .modal_body .SumoSelect .CaptionCont { background-color: #1a1d23 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; } [data-theme="dark"] .modal .modal_body .SumoSelect .optWrapper { background-color: #111317 !important; border: 1px solid #2a2f3a !important; } [data-theme="dark"] .modal .modal_body form select { background-color: #1a1d23 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; } /* Modal status indicators */ [data-theme="dark"] .modal .modal_body .list .li .status.status_error { color: #ff6b6b !important; background-color: #2d1b1b !important; } [data-theme="dark"] .modal .modal_body .list .li .status.status_success { color: #51cf66 !important; background-color: #1b2d1b !important; } [data-theme="dark"] .modal .modal_body .list .li .status.status_warning { color: #ffd43b !important; background-color: #2d2a1b !important; } /* Table operations dark theme */ [data-theme="dark"] .list_operations tr:nth-child(odd) { background-color: #141821 !important; } [data-theme="dark"] .list_operations tr:nth-child(even) { background-color: #111317 !important; } [data-theme="dark"] .list_operations tr td.status_table .status.status_error { color: #842029 !important; background-color: #fde2e2 !important; position: relative; overflow: hidden; transition: background-color 0.3s ease, border 0.3s ease; border: 1px solid transparent !important; padding: 3px 6px; } [data-theme="dark"] .list_operations tr td.status_table .status.status_error::before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-color: #1a1d23 !important; transition: left 0.5s ease; z-index: 1; pointer-events: none; } [data-theme="dark"] .list_operations tr td.status_table .status.status_error:hover { background-color: #1a1d23 !important; border: 1px solid #f1416c !important; cursor: pointer; } [data-theme="dark"] .list_operations tr td.status_table .status.status_error:hover::before { left: 100%; } [data-theme="dark"] .list_operations tr td.status_table .status.status_success { color: #0f5132 !important; background-color: #d1fae5 !important; position: relative; overflow: hidden; transition: background-color 0.3s ease, border 0.3s ease; border: 1px solid transparent !important; padding: 3px 6px; } [data-theme="dark"] .list_operations tr td.status_table .status.status_success::before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-color: #1a1d23 !important; transition: left 0.5s ease; z-index: 1; pointer-events: none; } [data-theme="dark"] .list_operations tr td.status_table .status.status_success:hover { background-color: #1a1d23 !important; border: 1px solid #50cd89 !important; cursor: pointer; } [data-theme="dark"] .list_operations tr td.status_table .status.status_success:hover::before { left: 100%; } [data-theme="dark"] .list_operations tr td.status_table .status.status_warning { color: #8a6d1d !important; background-color: #fff3cd !important; position: relative; overflow: hidden; transition: background-color 0.3s ease, border 0.3s ease; border: 1px solid transparent !important; padding: 3px 6px; } [data-theme="dark"] .list_operations tr td.status_table .status.status_warning::before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-color: #1a1d23 !important; transition: left 0.5s ease; z-index: 1; pointer-events: none; } [data-theme="dark"] .list_operations tr td.status_table .status.status_warning:hover { background-color: #1a1d23 !important; border: 1px solid #ffc700 !important; cursor: pointer; } [data-theme="dark"] .list_operations tr td.status_table .status.status_warning:hover::before { left: 100%; } /* Pending status (better contrast) */ [data-theme="dark"] .list_operations tr td.status_table .status.status_pending { color: #fbbf24 !important; background-color: #2a2415 !important; border-color: #3a321d !important; position: relative; overflow: hidden; transition: background-color 0.3s ease, border 0.3s ease; } [data-theme="dark"] .list_operations tr td.status_table .status.status_pending::before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.3), transparent); transition: left 0.5s ease; z-index: -1; pointer-events: none; } [data-theme="dark"] .list_operations tr td.status_table .status.status_pending:hover { background-color: #3a3420 !important; border-color: #4a4228 !important; cursor: pointer; } [data-theme="dark"] .list_operations tr td.status_table .status.status_pending:hover::before { left: 100%; } /* Toggle container white background fix */ [data-theme="dark"] .toggle-container { background-color: #111317 !important; color: #e5e7eb !important; border: none !important; } /* Darker table borders */ [data-theme="dark"] .list_operations td, [data-theme="dark"] .list_operations th { border-bottom: 1px solid #2a2f3a !important; } /* Sidebar dark theme */ [data-theme="dark"] .main-sidebar { background-color: #111317 !important; border-right: 1px solid #2a2f3a !important; } [data-theme="dark"] .main-sidebar ul li a { color: #a7c4fb !important; } [data-theme="dark"] .main-sidebar ul li a:hover, [data-theme="dark"] .main-sidebar ul li a.active { background-color: #1a1d23 !important; color: #3d7fff !important; } /* Header dark theme */ [data-theme="dark"] header { background-color: #111317 !important; border-bottom: 1px solid #2a2f3a !important; } /* Header menu links - darker hover, remove white border */ [data-theme="dark"] header .section .header_left ul li a { color: #e5e7eb !important; border-bottom: none !important; } [data-theme="dark"] header .section .header_left ul li a:hover { background-color: #1a1d23 !important; color: #a7c4fb !important; border-bottom: none !important; } /* Table top right links - proper dark theme */ [data-theme="dark"] section.cabinet_table .section .table_div .table_div_top .table_div_top_right .link span, [data-theme="dark"] section.cabinet_table .section .table_div .table_div_top .table_div_top_right .link a { color: #e5e7eb !important; } [data-theme="dark"] section.cabinet_table .section .table_div .table_div_top .table_div_top_right .link span:hover, [data-theme="dark"] section.cabinet_table .section .table_div .table_div_top .table_div_top_right .link a:hover { color: #a7c4fb !important; background-color: #1a1d23 !important; } /* Form elements in modals */ [data-theme="dark"] .modal .modal_body input, [data-theme="dark"] .modal .modal_body textarea { background-color: #1a1d23 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; } /* Close button in modals */ [data-theme="dark"] .modal .close .line { background-color: #e5e7eb !important; } /* Buttons - ensure readable text and less bright hover */ [data-theme="dark"] a.blue-button, [data-theme="dark"] button.blue-button, [data-theme="dark"] input.blue-button { background-image: none !important; background-color: #3d7fff !important; color: #fff !important; border: 1px solid #3961d9 !important; } [data-theme="dark"] a.blue-button:hover, [data-theme="dark"] button.blue-button:hover, [data-theme="dark"] input.blue-button:hover { background-color: #2f5fe6 !important; color: #fff !important; } [data-theme="dark"] a.red-button, [data-theme="dark"] button.red-button, [data-theme="dark"] input.red-button { background-image: none !important; background-color: #ce2325 !important; color: #fff !important; border: 1px solid #b31e21 !important; } [data-theme="dark"] a.red-button:hover, [data-theme="dark"] button.red-button:hover, [data-theme="dark"] input.red-button:hover { background-color: #aa1c1e !important; } [data-theme="dark"] a.green-button, [data-theme="dark"] button.green-button, [data-theme="dark"] input.green-button { background-image: none !important; background-color: #16a34a !important; color: #fff !important; border: 1px solid #14843e !important; } [data-theme="dark"] a.green-button:hover, [data-theme="dark"] button.green-button:hover, [data-theme="dark"] input.green-button:hover { background-color: #12823d !important; } [data-theme="dark"] a.grey-button, [data-theme="dark"] button.grey-button, [data-theme="dark"] input.grey-button { background-image: none !important; background-color: #374151 !important; color: #e5e7eb !important; border: 1px solid #2a2f3a !important; } [data-theme="dark"] a.grey-button:hover, [data-theme="dark"] button.grey-button:hover, [data-theme="dark"] input.grey-button:hover { background-color: #303845 !important; } /* Generic btn hover (less bright) */ [data-theme="dark"] .btn:hover, [data-theme="dark"] button:hover { filter: brightness(0.95); } /* Overlay dark theme */ [data-theme="dark"] .overlay { background-color: rgba(0, 0, 0, 0.7) !important; } /* Additional white backgrounds that need fixing */ [data-theme="dark"] .home_page_block_body { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .section_body { background-color: #111317 !important; color: #e5e7eb !important; } /* Cabinet table section and table_div backgrounds */ [data-theme="dark"] .cabinet_table .section { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .table_div { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .table_div_top { background-color: #111317 !important; color: #e5e7eb !important; border-bottom: 1px solid #2a2f3a !important; } [data-theme="dark"] .table_div_top_left h3 { color: #e5e7eb !important; } [data-theme="dark"] .table_div_body { background-color: #111317 !important; color: #e5e7eb !important; } [data-theme="dark"] .list_operations th { background-color: #161922 !important; border-bottom: 1px solid #2a2f3a !important; } [data-theme="dark"] .list_operations th span { color: #a0a8b8 !important; } [data-theme="dark"] .list_operations td { border-bottom: 1px solid #2a2f3a !important; } [data-theme="dark"] .list_operations td span { color: #e5e7eb !important; } [data-theme="dark"] .list_operations td.date span i { color: #a0a8b8 !important; } /* Pager in dark theme */ [data-theme="dark"] .styled-pager li a, [data-theme="dark"] .styled-pager li span { background-color: #1a1d23 !important; color: #e5e7eb !important; } [data-theme="dark"] .styled-pager li.active a, [data-theme="dark"] .styled-pager li.active span { background-color: #3e97ff !important; color: white !important; } [data-theme="dark"] .styled-pager li a:hover { background-color: #2a2f3a !important; } [data-theme="dark"] .styled-pager li.disabled span { opacity: 0.5; } /* Form controls in list operations */ [data-theme="dark"] .list_operations input[type='text'], [data-theme="dark"] .list_operations select, [data-theme="dark"] .list_operations .form-control { background-color: #1a1d23 !important; border: 1px solid #2a2f3a !important; color: #e5e7eb !important; } [data-theme="dark"] .list_operations input:focus, [data-theme="dark"] .list_operations select:focus { border-color: #3e97ff !important; background-color: #1a1d23 !important; } /* Status badges and labels */ [data-theme="dark"] .status { color: #e5e7eb !important; } [data-theme="dark"] .status.status_success { color: #51cf66 !important; } [data-theme="dark"] .status.status_error { color: #ff6b6b !important; } [data-theme="dark"] .status.status_warning { color: #ffd43b !important; } /* ===== WHITE BORDERS FIXES ===== */ /* Header menu links white border */ [data-theme="dark"] header .section .header_left ul li a { border-bottom: 2px solid #2a2f3a !important; } /* Table head white borders */ [data-theme="dark"] section.cabinet .section .section_body .home_page .home_page_block .home_page_block_body .table_generate .table_head .table_it { border-right: 1px solid #2a2f3a !important; } section.cabinet_table .section .table_div .filter .item_filter .inputs input, .grid-view .list_operations thead .filters input, .modal-wrapper-update-device-modal, select#page_size { border: 0px solid #2a2f3a !important; } /* Remove right border from last column */ [data-theme="dark"] table td:last-child, [data-theme="dark"] table th:last-child, [data-theme="dark"] .table td:last-child, [data-theme="dark"] .table th:last-child, [data-theme="dark"] .list_operations td:last-child, [data-theme="dark"] .list_operations th:last-child { border-right: none !important; } /* Section dividers */ [data-theme="dark"] .section_body, [data-theme="dark"] .home_page_block_body { border-top: 1px solid #2a2f3a !important; } /* Profile and info blocks */ [data-theme="dark"] .profile_info_block, [data-theme="dark"] .info_block { border-bottom: 1px solid #2a2f3a !important; } /* Light background elements with borders */ [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: #111317 !important; border: 1px solid #2a2f3a !important; } /* Убираем outline при focus для указанных элементов в темной теме */ [data-theme="dark"] section.cabinet_table .section .table_div .filter .item_filter .inputs input:focus, [data-theme="dark"] .grid-view .list_operations thead .filters input:focus, [data-theme="dark"] .modal-wrapper-update-device-modal:focus, [data-theme="dark"] select#page_size:focus { outline: none !important; border-color: #3e97ff !important; } /* Исправляем цвет иконки меню в темной теме */ [data-theme="dark"] .menu__hamburger img { filter: brightness(0) invert(1); opacity: 0.9; } [data-theme="dark"] .list .li.payer-info-header{ background: #78829d; } [data-theme="dark"] .list .li.payer-info_dark{ background: #98a1b9; } /* Дополнительные стили для мобильных устройств в темной теме */ @media only screen and (max-width: 768px) { [data-theme="dark"] .menu__hamburger img { filter: brightness(0) invert(1); opacity: 1; width: 20px; height: 20px; } }