/* ============================================== DARK THEME — MatrixApp Admin Applied when is set ============================================== */ body.dark-mode { --bs-body-bg: #1a1d23; --bs-body-color: #d1d5db; --bs-body-bg-rgb: 26, 29, 35; --bs-body-color-rgb: 209, 213, 219; --bs-border-color: #3a3f4b; --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-secondary-color: #9ca3af; --bs-secondary-bg: #2d3139; --bs-tertiary-bg: #252830; --bs-table-color: #d1d5db; --bs-table-bg: transparent; --bs-table-border-color: #3a3f4b; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-link-color: #7eb3ff; --bs-link-hover-color: #a5c8ff; --bs-code-color: #f9a8d4; --bs-highlight-bg: #3b3000; /*--bs-success: #1acd54;*/ /*--bs-danger-rgb: rgba(240, 53, 39);*/ /*--bs-danger: #f03527;*/ background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Navbar */ body.dark-mode .navbar.bg-dark-subtle { background-color: #1e2129 !important; border-color: #3a3f4b !important; } body.dark-mode .text-dark { color: #c9cfd8 !important; } body.dark-mode .bg-warning.text-dark { color: #3a3f4b !important; } body.dark-mode .bg-danger.text-dark { color: #3a3f4b !important; } body.dark-mode .nav-link.text-dark:hover { color: #ffffff !important; } /* Dropdowns */ body.dark-mode .dropdown-menu { background-color: #252830; border-color: #3a3f4b; } body.dark-mode .dropdown-item { color: #c9cfd8 !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #3a3f4b; color: #ffffff; } body.dark-mode .dropdown-divider { border-color: #3a3f4b; } /* Footer */ body.dark-mode .footer { background-color: #1e2129; border-color: #3a3f4b !important; color: #9ca3af; } body.dark-mode .footer a { color: #7eb3ff; } /* Cards */ body.dark-mode .card { background-color: #252830; border-color: #3a3f4b; color: #d1d5db; } body.dark-mode .card-header { background-color: #2d3139; border-color: #3a3f4b; } body.dark-mode .card-footer { background-color: #2d3139; border-color: #3a3f4b; } /* Tables */ body.dark-mode .table { --bs-table-color: #d1d5db; --bs-table-bg: transparent; --bs-table-striped-color: #d1d5db; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-color: #ffffff; --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-border-color: #3a3f4b; color: #d1d5db; border-color: #3a3f4b; } body.dark-mode .table-light { --bs-table-color: #d1d5db; --bs-table-bg: #2d3139; --bs-table-border-color: #3a3f4b; } body.dark-mode th { background-color: #2d3139; color: #e5e7eb; } /* DataTables */ body.dark-mode .dataTables_wrapper .dataTables_length label, body.dark-mode .dataTables_wrapper .dataTables_filter label, body.dark-mode .dataTables_wrapper .dataTables_info { color: #9ca3af; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #9ca3af !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #3a3f4b !important; border-color: #3a3f4b !important; color: #ffffff !important; } /* Forms */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: #2d3139; border-color: #4b5160; color: #d1d5db; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: #343a47; border-color: #7eb3ff; color: #ffffff; box-shadow: 0 0 0 0.2rem rgba(126, 179, 255, 0.25); } body.dark-mode .form-control::placeholder { color: #6b7280; } body.dark-mode .form-control-plaintext { color: #d1d5db; } body.dark-mode .form-label { color: #9ca3af; } body.dark-mode .form-text { color: #6b7280; } body.dark-mode .form-check-input { background-color: #2d3139; border-color: #4b5160; } body.dark-mode .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } /* Input groups */ body.dark-mode .input-group-text { background-color: #343a47; border-color: #4b5160; color: #9ca3af; } /* Floating labels */ body.dark-mode .form-floating > label { color: #6b7280; } body.dark-mode .form-floating > .form-control:focus ~ label, body.dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label, body.dark-mode .form-floating > .form-select ~ label { color: #7eb3ff; } /* Select2 */ body.dark-mode .select2-container--default .select2-selection--single, body.dark-mode .select2-container--default .select2-selection--multiple { background-color: #2d3139; border-color: #4b5160; } body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #d1d5db; } body.dark-mode .select2-container--default .select2-results__option { background-color: #252830; color: #d1d5db; } body.dark-mode .select2-container--default .select2-results__option--highlighted { background-color: !important; color: #ffffff !important; } body.dark-mode .select2-dropdown { background-color: #252830; border-color: #4b5160; } body.dark-mode .select2-search__field { background-color: #2d3139 !important; border-color: #4b5160 !important; color: #d1d5db !important; } body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #3a3f4b; color: #d1d5db; border-color: #4b5160; } body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #9ca3af; } /* Modals */ body.dark-mode .modal-content { background-color: #252830; border-color: #3a3f4b; color: #d1d5db; } body.dark-mode .modal-header { border-color: #3a3f4b; } body.dark-mode .modal-footer { border-color: #3a3f4b; } body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Offcanvas */ body.dark-mode .offcanvas { background-color: #252830; color: #d1d5db; border-color: #3a3f4b; } body.dark-mode .offcanvas-header { border-color: #3a3f4b; } /* Tabs */ body.dark-mode .nav-tabs { border-color: #3a3f4b; } body.dark-mode .nav-tabs .nav-link { color: #9ca3af; } body.dark-mode .nav-tabs .nav-link:hover { border-color: #3a3f4b; color: #d1d5db; } body.dark-mode .nav-tabs .nav-link.active { background-color: #1a1d23; border-color: #3a3f4b #3a3f4b #1a1d23; color: #ffffff; } /* Pills */ body.dark-mode .nav-pills .nav-link { color: #9ca3af; } body.dark-mode .nav-pills .nav-link.active { background-color: #0d6efd; color: #ffffff; } /* List groups */ body.dark-mode .list-group-item { background-color: #252830; border-color: #3a3f4b; color: #d1d5db; } body.dark-mode .list-group-item-action:hover { background-color: #2d3139; color: #ffffff; } body.dark-mode .list-group-item.active { background-color: #0d6efd; border-color: #0d6efd; } /* Alerts */ body.dark-mode .alert-info { background-color: #1a3a4a; border-color: #1e5f7a; color: #7dd3fc; } body.dark-mode .alert-success { background-color: #1a3a28; border-color: #1e5f3a; color: #6ee7b7; } body.dark-mode .alert-warning { background-color: #3a2e00; border-color: #6a5200; color: #fcd34d; } body.dark-mode .alert-danger { background-color: #3a1a1a; border-color: #6a2020; color: #fca5a5; } /* Accordion */ body.dark-mode .accordion-item { background-color: #252830; border-color: #3a3f4b; } body.dark-mode .accordion-button { background-color: #2d3139; color: #d1d5db; } body.dark-mode .accordion-button:not(.collapsed) { background-color: #343a47; color: #ffffff; box-shadow: inset 0 -1px 0 #3a3f4b; } body.dark-mode .accordion-button::after { filter: invert(1); } /* Pagination */ body.dark-mode .page-item .page-link { background-color: #252830; border-color: #3a3f4b; color: #7eb3ff; } body.dark-mode .page-item.active .page-link { background-color: #0d6efd; border-color: #0d6efd; color: #ffffff; } body.dark-mode .page-item.disabled .page-link { background-color: #1e2129; border-color: #3a3f4b; color: #4b5160; } /* Progress */ body.dark-mode .progress { background-color: #2d3139; } /* Badges */ body.dark-mode .badge.text-bg-secondary { background-color: #3a3f4b !important; } body.dark-mode .badge.text-bg-light { background-color: #2d3139 !important; color: #d1d5db !important; } /* Buttons — light/secondary variants */ body.dark-mode .btn-light { background-color: #343a47; border-color: #4b5160; color: #d1d5db; } body.dark-mode .btn-light:hover { background-color: #3a3f4b; border-color: #4b5160; color: #ffffff; } body.dark-mode .btn-outline-secondary { color: #9ca3af; border-color: #4b5160; } body.dark-mode .btn-outline-secondary:hover { background-color: #3a3f4b; border-color: #4b5160; color: #ffffff; } /* Borders and dividers */ body.dark-mode hr { border-color: #3a3f4b; opacity: 1; } body.dark-mode .border { border-color: #3a3f4b !important; } body.dark-mode .border-top { border-top-color: #3a3f4b !important; } body.dark-mode .border-bottom { border-bottom-color: #3a3f4b !important; } body.dark-mode .border-start { border-left-color: #3a3f4b !important; } body.dark-mode .border-end { border-right-color: #3a3f4b !important; } /* Text muted */ body.dark-mode .text-muted { color: #6b7280 !important; } /* Toasts */ body.dark-mode .toast { background-color: #252830; border-color: #3a3f4b; color: #d1d5db; } body.dark-mode .toast-header { background-color: #2d3139; border-color: #3a3f4b; color: #d1d5db; } /* Custom icon colours */ body.dark-mode .add-line, body.dark-mode .edit-line, body.dark-mode .print-line { color: #7eb3ff; } /* Grab handle */ body.dark-mode .grab-handle { background: #2d3139; color: #6b7280; border-right-color: #3a3f4b; } /* Dash tiles */ body.dark-mode .dash-tile { background-color: #2d3139; } /* Image preview */ body.dark-mode .image-preview { background: #252830; border-color: #3a3f4b; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Loader overlay */ body.dark-mode #loader { background-color: rgba(0, 0, 0, 0.6); } /* Scrollbars (Webkit) */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #1e2129; } body.dark-mode ::-webkit-scrollbar-thumb { background: #4b5160; border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* File upload*/ body.dark-mode .fileimport.has-advanced-upload { background-color: #1a1d23 !important; } body.dark-mode .logo { background-image: url("../assets/matrixlogo-w.png"); background-repeat: no-repeat; background-size: cover; height: 45px; width: 45px; } /* jstree */ /* Tree view */ body.dark-mode .jstree-default .jstree-anchor { background: #1a1d23; } body.dark-mode .jstree-default .jstree-hovered { background-color: #2d3139; border-color: #3a3f4b; color: #ffffff; } body.dark-mode .jstree-default .jstree-clicked { background-color: #0d6efd; border-color: #0d6efd; color: #ffffff; } body.dark-mode .jstree-wholerow-ul .jstree-wholerow-hovered { background-color: #2d3139; } body.dark-mode .jstree-default .jstree-wholerow-clicked { background: #0d6efd; } body.dark-mode .jstree-anchor .jstree-clicked { background: #0d6efd; } body.dark-mode .tooltip { color: black; background-color: white; } body.dark-mode .tooltip-inner { color: black; background-color: white; } body.dark-mode .select2-selection__clear { color: #6b7280 !important; }