/* dark.css Load AFTER main1.css Works when .dark is added to either or */ /* ========================= THEME TOKENS ========================= */ html.dark, body.dark, .dark { --dark-bg: #111827; --dark-bg-2: #0f172a; --dark-bg-3: #1f2937; --dark-bg-4: #243041; --dark-card: #1b2432; --dark-surface: #111827; --dark-surface-2: #172033; --dark-surface-3: #1e293b; --dark-card-2: #202b3b; --dark-text: #e5e7eb; --dark-text-2: #cbd5e1; --dark-text-3: #94a3b8; --dark-border: #374151; --dark-border-soft: rgba(148, 163, 184, 0.10); --dark-hover: #2b3648; --dark-input: #0b1220; --dark-scroll-track: #111827; --dark-scroll-thumb: #475569; --dark-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color-scheme: dark; } body.dark, html.dark, html.dark body { background-color: #0f172a !important; color: #e5e7eb !important; } /* ========================= PAGE ROOT ========================= */ html.dark, body.dark { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } html.dark body, body.dark { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } .dark .maincontainer1 .mycontainer { background-color: var(--dark-surface) !important; color: var(--dark-text) !important; border-color: var(--dark-border-soft) !important; box-shadow: var(--dark-shadow) !important; } .dark #app, .dark .app, .dark .page, .dark .main-wrapper, .dark .content-wrapper, .dark .el-container, .dark .el-main, .dark .el-aside, .dark .el-header, .dark .el-footer { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } /* generic text */ .dark, .dark div, .dark span, .dark p, .dark strong, .dark small, .dark label, .dark td, .dark th, .dark li, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: inherit; } .dark .text-dark, .dark .color-text-primary, .dark .ranges li, .dark .div_daterange i { color: var(--dark-text) !important; } .dark .text-secondary, .dark .color-text-regular, .dark .item-action *, .dark .item-action-menu *, .dark .el-icon-more, .dark .el-icon-more-outline { color: var(--dark-text-2) !important; } .dark a { color: var(--link-color, #60a5fa); } .dark .text-dark, .dark .text-body { color: #e5e7eb !important; } .dark .text-muted, .dark .text-black-50, .dark a.text-light:focus, .dark a.text-light:hover { color: rgba(255, 255, 255, 0.5) !important; } .dark .text-light { color: rgba(255, 255, 255, 0.87) !important; } .dark .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .dark a.text-dark:focus, .dark a.text-dark:hover { color: #ffffff !important; } /* ========================= SURFACES / CARDS / PANELS ========================= */ .dark .z-depth-2, .dark .z-depth-5, .dark .z-depth-info, .dark .box_shadow, .dark .fixed-container-top, .dark .fixed-container-bottom, .dark .el-card, .dark .el-collapse-item__wrap, .dark .el-collapse-item__header, .dark .el-dialog, .dark .el-dialog__body, .dark .el-dialog__header, .dark .el-drawer, .dark .el-popover, .dark .el-picker-panel, .dark .daterangepicker, .dark .el-select-dropdown, .dark .el-dropdown-menu, .dark .el-autocomplete-suggestion, .dark .el-menu, .dark .el-submenu__title, .dark .el-menu-item, .dark .el-tabs__nav-wrap, .dark .el-tabs__item, .dark .modal-content, .dark .card, .dark .panel { background-color: var(--dark-card) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; box-shadow: var(--dark-shadow); } .dark .fixed-container-top, .dark .fixed-container-bottom, .dark .modal-header, .dark .modal-footer { background-color: var(--dark-card) !important; } /* ========================= BORDERS / SEPARATORS ========================= */ .dark .el-table, .dark .el-table th, .dark .el-table td, .dark .el-table tr, .dark .el-table__header-wrapper, .dark .el-table__body-wrapper, .dark .el-table::before, .dark .el-table__fixed::before, .dark .el-table__fixed-right::before, .dark .el-collapse, .dark .el-collapse-item__header, .dark .el-collapse-item__wrap, .dark .el-tabs__nav-wrap::after, .dark .el-divider, .dark hr, .dark .div_daterange, .dark .my_checkbox span, .dark .el-checkbox__inner, .dark .el-radio__inner, .dark .el-input__inner, .dark .el-textarea__inner, .dark .el-select .el-input__inner, .dark .el-textarea__inner, .dark .el-pagination button, .dark .el-pagination .el-pager li, .dark .el-menu, .dark .el-menu-item, .dark .el-submenu__title, .dark .el-dropdown-menu__item, .dark .el-dialog, .dark .el-drawer, .dark .el-popover, .dark .el-picker-panel, .dark .el-date-table td, .dark .el-month-table td, .dark .el-year-table td { border-color: var(--dark-border) !important; } /* ========================= TABLES ========================= */ .dark .el-table, .dark .el-table__expanded-cell, .dark .el-table tr, .dark .el-table th.el-table__cell, .dark .el-table td.el-table__cell, .dark .el-table th, .dark .el-table td { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } .dark .el-table th, .dark .el-table thead tr, .dark .el-table__header-wrapper th { background-color: var(--dark-card) !important; color: var(--dark-text) !important; } .dark .el-table--enable-row-hover .el-table__body tr:hover > td, .dark .el-table__body tr.hover-row > td, .dark .el-table__body tr.current-row > td, .dark .el-table__body tr:hover > td { background-color: var(--dark-hover) !important; } .dark .el-table__empty-block, .dark .el-table__empty-text { background-color: var(--dark-bg) !important; color: var(--dark-text-3) !important; } /* ========================= INPUTS / SELECTS / TEXTAREAS ========================= */ .dark input, .dark textarea, .dark select, .dark .el-input__inner, .dark .el-textarea__inner, .dark .el-select .el-input__inner, .dark .el-cascader .el-input__inner, .dark .el-date-editor .el-input__inner, .dark .el-range-editor.el-input__inner, .dark .el-range-editor input { background-color: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark input::placeholder, .dark textarea::placeholder, .dark .el-input__inner::placeholder, .dark .el-textarea__inner::placeholder { color: var(--dark-text-3) !important; } .dark .el-input__prefix, .dark .el-input__suffix, .dark .el-select__caret, .dark .el-range-separator, .dark .el-input__icon { color: var(--dark-text-3) !important; } /* dropdown items */ .dark .el-select-dropdown__item, .dark .el-dropdown-menu__item, .dark .el-autocomplete-suggestion li, .dark .el-cascader-node { color: var(--dark-text) !important; background-color: transparent !important; } .dark .el-select-dropdown__item.hover, .dark .el-select-dropdown__item:hover, .dark .el-dropdown-menu__item:hover, .dark .el-autocomplete-suggestion li:hover, .dark .el-cascader-node:hover { background-color: var(--dark-hover) !important; } /* ========================= SIDEBAR / MENU ========================= */ .dark .el-menu, .dark .el-menu-item, .dark .el-submenu__title { background-color: var(--dark-bg) !important; color: var(--dark-text-2) !important; } .dark .el-menu-item:hover, .dark .el-submenu__title:hover, .dark .item-action:hover, .dark .item-action-menu .item-action:hover { background-color: var(--dark-hover) !important; } .dark .el-menu-item.is-active, .dark .el-submenu.is-active > .el-submenu__title { color: var(--primary-color, #3b82f6) !important; } /* ========================= BUTTONS ========================= */ .dark .el-button { background-color: var(--dark-card-2) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .el-button:hover, .dark .el-button:focus { background-color: var(--dark-hover) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .el-button--default, .dark .el-button--info { background-color: var(--dark-card-2) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .el-button--primary, .dark .el-button--primary:focus, .dark .el-button--primary:hover, .dark .btn_apply_data { background-color: var(--primary-color, #3b82f6) !important; border-color: var(--primary-color, #3b82f6) !important; color: #fff !important; opacity: 1 !important; } /* ========================= CHECKBOXES / RADIOS / SWITCHES ========================= */ .dark .my_checkbox span, .dark .el-checkbox__inner, .dark [type="radio"]:not(:checked) + label:before, .dark [type="radio"]:not(:checked) + label:after, .dark .el-radio__inner { background-color: var(--dark-input) !important; border-color: var(--dark-border) !important; } .dark .my_checkbox:hover input ~ span, .dark .el-checkbox__inner:hover, .dark .el-radio__inner:hover { border-color: var(--primary-color, #3b82f6) !important; } .dark [type="radio"]:disabled + label, .dark .el-checkbox__input.is-disabled + .el-checkbox__label, .dark .el-radio__input.is-disabled + .el-radio__label { color: var(--dark-text-3) !important; } /* custom switch */ .dark .switch input + label::before { background-color: #334155 !important; border-color: #334155 !important; } .dark .switch input + label::after { background-color: #e5e7eb !important; } .dark .switch input:checked + label::before { background-color: var(--primary-color, #3b82f6) !important; border-color: var(--primary-color, #3b82f6) !important; } /* Element UI switch */ .dark .el-switch__core { background-color: #475569 !important; border-color: #475569 !important; } .dark .el-switch.is-checked .el-switch__core { background-color: var(--primary-color, #3b82f6) !important; border-color: var(--primary-color, #3b82f6) !important; } .dark .el-switch__label { color: var(--dark-text-2) !important; } /* ========================= PAGINATION ========================= */ .dark .el-pagination, .dark .el-pagination * { color: var(--dark-text-2) !important; } .dark .el-pagination .btn-next, .dark .el-pagination .btn-prev, .dark .el-pagination .el-pager li { background-color: var(--dark-card) !important; border-color: var(--dark-border) !important; } .dark .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: var(--primary-color, #3b82f6) !important; color: #fff !important; } .dark .el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--primary-color, #3b82f6) !important; } /* ========================= DATE RANGE PICKER ========================= */ .dark .div_daterange { background-color: var(--dark-card) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .div_daterange:hover { border-color: var(--primary-color, #3b82f6) !important; } .dark .daterangepicker .calendar-table, .dark .daterangepicker td.off, .dark .daterangepicker td.off.in-range, .dark .daterangepicker td.available:hover, .dark .daterangepicker th, .dark .daterangepicker .drp-buttons, .dark .daterangepicker .ranges, .dark .daterangepicker .ranges ul { background-color: var(--dark-card) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .ranges li:hover { background-color: var(--primary-color, #3b82f6) !important; color: #fff !important; border-color: var(--primary-color, #3b82f6) !important; } .dark .ranges li.active { background-color: var(--dark-input) !important; color: var(--primary-color, #3b82f6) !important; border-color: var(--primary-color, #3b82f6) !important; } /* ========================= DIALOGS / MODALS / DRAWERS / TOOLTIPS ========================= */ .dark .el-dialog__title, .dark .el-drawer__header, .dark .el-popover, .dark .el-tooltip__popper, .dark .el-message-box, .dark .el-message-box__title, .dark .el-message-box__content, .dark .el-notification, .dark .el-notification__title, .dark .el-notification__content { color: var(--dark-text) !important; } .dark .el-message-box, .dark .el-notification, .dark .el-tooltip__popper, .dark .el-popover { background-color: var(--dark-card) !important; border-color: var(--dark-border) !important; } /* ========================= TAGS / BADGES ========================= */ .dark .el-tag { background-color: #243041 !important; border-color: #334155 !important; color: var(--dark-text) !important; } /* ========================= EMPTY / DISABLED / MUTED ========================= */ .dark .is-disabled, .dark .el-input.is-disabled .el-input__inner, .dark .el-textarea.is-disabled .el-textarea__inner, .dark .el-select .el-input.is-disabled .el-input__inner, .dark .el-button.is-disabled, .dark .el-button.is-disabled:hover { background-color: #182233 !important; color: var(--dark-text-3) !important; border-color: #2a3445 !important; } /* ========================= SCROLLBARS ========================= */ .dark *::-webkit-scrollbar { background-color: var(--dark-scroll-track) !important; width: 1.3rem; height: 1.3rem; } .dark *::-webkit-scrollbar-track { background-color: var(--dark-scroll-track) !important; } .dark *::-webkit-scrollbar-thumb { background-color: var(--dark-scroll-thumb) !important; border-radius: 1rem; border: 0.4rem solid var(--dark-scroll-track) !important; } /* ========================= SAFE FALLBACKS ========================= */ .dark .bg-light, .dark .bg-lighter, .dark .bg-extra-light { background-color: var(--dark-card) !important; } .dark .article, .dark .item-action, .dark .item-action-menu { background-color: transparent !important; color: var(--dark-text) !important; } .dark .bg-white { background: var(--dark-surface) !important; color: var(--dark-text) !important; } .dark .bg-white-1, .dark .bg-white-2, .dark .bg-white-3 { background: var(--dark-surface) !important; color: var(--dark-text) !important; } .dark .btn-light { background-color: var(--dark-surface-3) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } .dark .text-dark { color: var(--dark-text) !important; } .dark .btn-light:hover, .dark .btn-light:focus, .dark .btn-light:active { background-color: var(--dark-hover) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } .dark .my_btt_add { background-color: var(--primary-color) !important; color: #fff !important; border: 1px solid var(--primary-color) !important; border-radius: 10px; } .dark .my_btt_add:hover, .dark .my_btt_add:focus { filter: brightness(1.05); } .dark .dropdown-menu .dr-item:hover { background-color: rgba(148, 163, 184, 0.08) !important; } .dark #mysidebar, .dark .bootstrap-select .dropdown-toggle, .dark .chat-input-c, .dark .box-content, .dark #current_bot, .dark .folder .actions, .dark .forder_C .folder, .dark .my_table, .dark .my_table table, .dark .my_table thead, .dark .my_table tbody, .dark .my_table tr, .dark .my_table th, .dark .my_table td { background-color: var(--dark-surface) !important; color: var(--dark-text) !important; } .dark .forder_C .folder, .dark .my_table, .dark .my_table table, .dark .my_table thead, .dark .my_table tbody, .dark .my_table tr, .dark .my_table th, .dark .my_table td { border-color: var(--dark-border-soft) !important; } .dark .title{ color: var(--dark-text) !important; } .dark .dataTables_paginate .pagination, .dark .dataTables_paginate .page-item, .dark .dataTables_paginate .page-link { background-color: var(--dark-surface) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } .dark .dataTables_paginate .page-link:hover, .dark .dataTables_paginate .page-item:hover .page-link { background-color: var(--dark-hover) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } .dark .dataTables_paginate .page-item.active .page-link { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } .dark .dataTables_paginate .page-item.disabled .page-link { background-color: var(--dark-surface-2) !important; border-color: var(--dark-border) !important; color: var(--dark-text-3) !important; } .dark #nav { background-color: var(--dark-surface) !important; color: var(--dark-text) !important; box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.35) !important; border-bottom: 1px solid var(--dark-border-soft) !important; } .dark #nav, .dark #nav * { color: var(--dark-text); } .dark #nav svg, .dark #nav i { color: var(--dark-text-3); } .dark .z-depth-1, .dark .box_shadow { background-color: #111827 !important; box-shadow: rgba(0, 0, 0, 0.45) 0px 4px 14px !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 7px; padding: 0.3px; } .dark .dropdown-menu { color: #e5e7eb !important; background-color: #111827 !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; } .dark .dropdown-item { color: #e5e7eb !important; background-color: transparent !important; } .dark .dropdown-item:hover, .dark .dropdown-item:focus { color: #ffffff !important; background-color: #223049 !important; } .dark .dropdown-divider { border-top: 1px solid rgba(148, 163, 184, 0.18) !important; } .dark #my_menu { border-right-color: rgba(148, 163, 184, 0.10) !important; } .dark .el-divider { background-color: rgba(148, 163, 184, 0.18) !important; } .dark .el-divider__text { background-color: #111827 !important; color: #94a3b8 !important; } .dark .dropdown-menu::-webkit-scrollbar { width: 12px; background-color: #111827 !important; } .dark .dropdown-menu::-webkit-scrollbar-thumb { background-color: #475569 !important; border-radius: 999px; border: 2px solid #111827 !important; } .dark .filter-option-inner-inner, .dark .table { background-color: transparent !important; color: var(--dark-text) !important; } .dark .el-collapse-item__header{ padding-left: 1rem; } .dark .form-control.search-box { background-color: #111827 !important; color: #e5e7eb !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; } .dark .form-control.search-box::placeholder { color: #94a3b8 !important; } .dark .form-control.search-box:focus { background-color: #111827 !important; color: #e5e7eb !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.2) !important; } .dark .el-picker-panel__footer { border-top-color: rgba(148, 163, 184, 0.18) !important; background-color: #111827 !important; } .dark .el-button--text{ padding-left: 0.5rem; padding-right: 0.5rem; } .dark .border, .dark .border-top, .dark .border-right, .dark .border-bottom, .dark .border-left { border-color: rgba(148, 163, 184, 0.16) !important; } .dark .other-message .message-text { background-color: #1e293b !important; color: #e5e7eb !important; border-color: rgba(148, 163, 184, 0.12) !important; } .dark pre { color: #e5e7eb; } .dark .my-message .message-text a { color: white !important; } .dark .color87 { color: rgba(255, 255, 255, 0.87) !important; } .dark .color70, .dark .color_white70 { color: rgba(255, 255, 255, 0.70) !important; } .dark .color60 { color: rgba(255, 255, 255, 0.60) !important; } .dark .color54 { color: rgba(255, 255, 255, 0.54) !important; } .dark .color_back { color: #fff !important; } .dark .color_white70.pointer:hover, .dark .color_white70.pointer:hover * { color: #fff !important; } .dark .wide #mysidebar ul li a.text-primary, .dark .wide #mysidebar ul li a:hover, .dark #mysidebar ul li a.text-primary, .dark #mysidebar ul li a:hover, .dark .menu-filter .item.active, .dark .menu-filter .item:hover { background-color: rgba(148, 163, 184, 0.10) !important; } .dark .btn { color: #e5e7eb; } .dark .bg-light-hover:hover { background-color: rgba(148, 163, 184, 0.08) !important; } .dark .badge-light { color: #e5e7eb !important; background-color: rgba(148, 163, 184, 0.7) !important; } .dark #mysidebar ul li a { color: #cbd5e1 !important; } .dark #mysidebar ul li a i { color: rgba(255, 255, 255, 0.5) !important; } .dark .el-tabs__nav-wrap::after{ background-color: unset; } .dark .bg-transparent, .dark .maincontainer1 .mycontainer.bg-transparent{ background-color: transparent !important; box-shadow: none !important; border: none !important; } .text-success { color: #28a745!important; } .dark .t-dropdown-menu { box-shadow: 0 15px 35px rgba(0,0,0,.35); border-color: rgba(148, 163, 184, 0.12) !important; } .dark .t-dropdown-menu li { border-bottom-color: rgba(148, 163, 184, 0.10) !important; } .dark .t-dropdown-menu li:hover { background-color: rgba(148, 163, 184, 0.08) !important; } .dark .t-dropdown-menu li a, .dark .t-dropdown-menu li a:hover { color: #e5e7eb !important; } .dark .t-dropdown-menu li a i { color: rgba(255, 255, 255, 0.5) !important; } .dark .t-dropdown-menu li a, .dark .t-dropdown-menu li a:hover { color: #e5e7eb !important; } .dark .t-dropdown-menu li a i { color: rgba(255, 255, 255, 0.5) !important; } .dark .t-dropdown-menu li a:hover i { color: rgba(255, 255, 255, 0.75) !important; }