/* * AutoWA Dark Clean v1.1.5 * ------------------------------------------------------------ * Scope rule: ONLY the effective Bootstrap/Vuexy dark theme. * Light mode is untouched. System mode automatically inherits this * skin when AutoWA resolves System -> dark on the element. * * This file intentionally does not redefine --bs-primary or * --bs-primary-rgb. Admin-selected AutoWA primary colors remain the * source of truth for accents, focus rings and active states. * ------------------------------------------------------------ */ html[data-bs-theme="dark"] { color-scheme: dark; /* Dark Clean palette */ --adc-bg: #0f1113; --adc-surface: #141619; --adc-surface-raised: #181b1e; --adc-surface-soft: #1d2024; --adc-surface-hover: #22262a; --adc-border: #2b3035; --adc-border-soft: rgba(255, 255, 255, .075); --adc-border-strong: rgba(255, 255, 255, .13); --adc-heading: #f4f6f8; --adc-text: #c9ced5; --adc-muted: #929aa4; --adc-faint: #6f7780; --adc-black: #090a0b; --adc-grid: rgba(255, 255, 255, .027); --adc-shadow: 0 12px 34px rgba(0, 0, 0, .24); --adc-shadow-sm: 0 6px 18px rgba(0, 0, 0, .18); /* Bootstrap/Vuexy core tokens */ --bs-body-color: var(--adc-text); --bs-body-color-rgb: 201, 206, 213; --bs-body-bg: var(--adc-bg); --bs-body-bg-rgb: 15, 17, 19; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: var(--adc-heading); --bs-secondary-color: var(--adc-muted); --bs-secondary-color-rgb: 146, 154, 164; --bs-secondary-bg: #202328; --bs-secondary-bg-rgb: 32, 35, 40; --bs-tertiary-color: rgba(201, 206, 213, .52); --bs-tertiary-color-rgb: 201, 206, 213; --bs-tertiary-bg: #23272b; --bs-tertiary-bg-rgb: 35, 39, 43; --bs-paper-bg: var(--adc-surface); --bs-paper-bg-rgb: 20, 22, 25; --bs-base-color: #eef1f4; --bs-base-color-rgb: 238, 241, 244; --bs-gray-25: #17191c; --bs-gray-50: #1b1e21; --bs-gray-75: #1f2226; --bs-gray-100: #24282c; --bs-gray-200: #2b3035; --bs-gray-300: #3a4046; --bs-gray-400: #555d66; --bs-gray-500: #737c86; --bs-gray-600: #929aa4; --bs-gray-700: #adb4bc; --bs-gray-800: #c9ced5; --bs-gray-900: #e7eaed; --bs-gray: #929aa4; --bs-gray-rgb: 146, 154, 164; --bs-border-color: var(--adc-border); --bs-border-color-translucent: var(--adc-border-soft); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 72%, white 28%); --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 14%, var(--adc-surface) 86%); --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 34%, var(--adc-border) 66%); --bs-secondary-bg-subtle: #202328; --bs-secondary-border-subtle: #343a40; --bs-secondary-text-emphasis: #c3c8ce; --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 13%, var(--adc-surface) 87%); --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 34%, var(--adc-border) 66%); --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 13%, var(--adc-surface) 87%); --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 34%, var(--adc-border) 66%); --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 13%, var(--adc-surface) 87%); --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 34%, var(--adc-border) 66%); --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 13%, var(--adc-surface) 87%); --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 34%, var(--adc-border) 66%); --bs-light-bg-subtle: #1d2024; --bs-light-border-subtle: #30353a; --bs-dark-bg-subtle: #121416; --bs-dark-border-subtle: #33383d; --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 78%, white 22%); --bs-link-hover-color-rgb: var(--bs-primary-rgb); --bs-code-color: color-mix(in srgb, var(--bs-primary) 72%, #ffffff 28%); --bs-highlight-color: var(--adc-heading); --bs-highlight-bg: color-mix(in srgb, var(--bs-warning) 18%, var(--adc-surface) 82%); --bs-box-shadow: 0 .1875rem .75rem rgba(0, 0, 0, .22); --bs-box-shadow-xs: 0 .0625rem .375rem rgba(0, 0, 0, .17); --bs-box-shadow-sm: 0 .125rem .5rem rgba(0, 0, 0, .19); --bs-box-shadow-lg: 0 .35rem 1.35rem rgba(0, 0, 0, .27); --bs-box-shadow-xl: 0 .5rem 2rem rgba(0, 0, 0, .31); --bs-floating-component-shadow: 0 .45rem 1.5rem rgba(0, 0, 0, .35); /* Vuexy layout tokens */ --bs-navbar-bg: rgba(20, 22, 25, .92); --bs-navbar-border-color: var(--adc-border-soft); --bs-navbar-box-shadow: 0 1px 0 var(--adc-border-soft); --bs-nav-box-shadow: none; --bs-nav-border-color: var(--adc-border); --bs-menu-bg: #111315; --bs-menu-bg-rgb: 17, 19, 21; --bs-menu-color: #cbd0d6; --bs-menu-color-rgb: 203, 208, 214; --bs-menu-hover-bg: rgba(255, 255, 255, .045); --bs-menu-hover-color: #ffffff; --bs-menu-sub-active-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); --bs-menu-sub-active-color: color-mix(in srgb, var(--bs-primary) 75%, white 25%); --bs-menu-header-color: #777f88; --bs-menu-box-shadow: 1px 0 0 var(--adc-border-soft); --bs-menu-horizontal-menu-box-shadow: 0 0 0 1px var(--adc-border); --bs-menu-horizontal-menu-sub-box-shadow: 0 0 0 1px var(--adc-border); --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .30); } /* ============================================================ FOUNDATION / TECHNICAL BACKGROUND ============================================================ */ html[data-bs-theme="dark"] body { background-color: var(--adc-bg) !important; background-image: linear-gradient(var(--adc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--adc-grid) 1px, transparent 1px) !important; background-size: 24px 24px !important; background-attachment: fixed !important; color: var(--adc-text); } html[data-bs-theme="dark"] .layout-wrapper, html[data-bs-theme="dark"] .layout-page, html[data-bs-theme="dark"] .content-wrapper { background-color: transparent !important; } /* Do not create a page-level stacking context here. Bootstrap/Vuexy and several AutoWA plugins render modals inside these containers. `isolation:isolate` can trap the dialog below a body-level backdrop, making the page look frozen. */ html[data-bs-theme="dark"] .container-xxl.container-p-y, html[data-bs-theme="dark"] .container-fluid.container-p-y { isolation: auto; } html[data-bs-theme="dark"] ::selection { background: rgba(var(--bs-primary-rgb), .32); color: #fff; } /* ============================================================ NAVBAR / SIDEBAR / FOOTER ============================================================ */ html[data-bs-theme="dark"] #layout-menu, html[data-bs-theme="dark"] .layout-menu, html[data-bs-theme="dark"] .bg-menu-theme { background-color: #111315 !important; color: var(--adc-text) !important; } html[data-bs-theme="dark"] .layout-navbar, html[data-bs-theme="dark"] .layout-navbar.navbar-detached.bg-navbar-theme, html[data-bs-theme="dark"] .bg-navbar-theme { background-color: rgba(20, 22, 25, .92) !important; border-color: var(--adc-border-soft) !important; box-shadow: 0 1px 0 var(--adc-border-soft) !important; backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } html[data-bs-theme="dark"] .content-footer, html[data-bs-theme="dark"] .bg-footer-theme { background: transparent !important; color: var(--adc-muted) !important; } html[data-bs-theme="dark"] .menu-inner-shadow { background: linear-gradient(#111315 5%, rgba(17, 19, 21, .7) 45%, rgba(17, 19, 21, 0)) !important; } html[data-bs-theme="dark"] .menu-item .menu-link { color: #afb6be; } html[data-bs-theme="dark"] .menu-item .menu-link:hover, html[data-bs-theme="dark"] .menu-item.open > .menu-link, html[data-bs-theme="dark"] .menu-item.active > .menu-link:not(.menu-toggle) { color: var(--adc-heading); } html[data-bs-theme="dark"] .menu-item.active > .menu-link:not(.menu-toggle) { background: color-mix(in srgb, var(--bs-primary) 18%, transparent) !important; box-shadow: inset 2px 0 0 var(--bs-primary); } /* ============================================================ SURFACES / CARDS ============================================================ */ html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .accordion-item, html[data-bs-theme="dark"] .list-group-item, html[data-bs-theme="dark"] .toast, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .popover { background-color: var(--adc-surface) !important; border-color: var(--adc-border) !important; } html[data-bs-theme="dark"] .card { border: 1px solid var(--adc-border) !important; box-shadow: 0 7px 24px rgba(0, 0, 0, .16) !important; } html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-footer, html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer, html[data-bs-theme="dark"] .offcanvas-header, html[data-bs-theme="dark"] .dropdown-header, html[data-bs-theme="dark"] .popover-header { background-color: transparent !important; border-color: var(--adc-border) !important; } html[data-bs-theme="dark"] .card.card-border-shadow-primary, html[data-bs-theme="dark"] .card.card-border-shadow-success, html[data-bs-theme="dark"] .card.card-border-shadow-info, html[data-bs-theme="dark"] .card.card-border-shadow-warning, html[data-bs-theme="dark"] .card.card-border-shadow-danger { box-shadow: 0 7px 24px rgba(0, 0, 0, .16) !important; } html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .bg-body-secondary, html[data-bs-theme="dark"] .bg-body-tertiary, html[data-bs-theme="dark"] .bg-light { background-color: var(--adc-surface) !important; color: var(--adc-text) !important; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-end, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start { border-color: var(--adc-border) !important; } /* ============================================================ TYPOGRAPHY / MUTED CONTENT ============================================================ */ html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6, html[data-bs-theme="dark"] .h1, html[data-bs-theme="dark"] .h2, html[data-bs-theme="dark"] .h3, html[data-bs-theme="dark"] .h4, html[data-bs-theme="dark"] .h5, html[data-bs-theme="dark"] .h6, html[data-bs-theme="dark"] .text-heading { color: var(--adc-heading) !important; } html[data-bs-theme="dark"] .text-body, html[data-bs-theme="dark"] .text-body-emphasis { color: var(--adc-text) !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--adc-muted) !important; } html[data-bs-theme="dark"] hr { border-color: var(--adc-border) !important; } /* ============================================================ FORMS ============================================================ */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text, html[data-bs-theme="dark"] .form-control-plaintext, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle, html[data-bs-theme="dark"] .select2-container--default .select2-selection, html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection, html[data-bs-theme="dark"] .tagify { background-color: var(--adc-surface-soft) !important; border-color: #343a40 !important; color: var(--adc-heading) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle:focus, html[data-bs-theme="dark"] .select2-container--open .select2-selection, html[data-bs-theme="dark"] .tagify--focus { background-color: #202429 !important; border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .16) !important; } html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-select:disabled, html[data-bs-theme="dark"] .form-control[readonly] { background-color: #181b1e !important; color: #747d86 !important; opacity: 1; } html[data-bs-theme="dark"] .form-control::placeholder, html[data-bs-theme="dark"] textarea::placeholder, html[data-bs-theme="dark"] input::placeholder { color: #747d86 !important; opacity: 1; } html[data-bs-theme="dark"] option, html[data-bs-theme="dark"] optgroup { background: var(--adc-surface-raised) !important; color: var(--adc-text) !important; } html[data-bs-theme="dark"] .form-check-input { background-color: #202429; border-color: #3a4148; } html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } html[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) { background-color: #343a40; } /* ============================================================ TABLES / DATATABLES ============================================================ */ html[data-bs-theme="dark"] .table { --bs-table-color: var(--adc-text); --bs-table-bg: transparent; --bs-table-border-color: var(--adc-border); --bs-table-striped-bg: rgba(255, 255, 255, .018); --bs-table-striped-color: var(--adc-text); --bs-table-active-bg: rgba(var(--bs-primary-rgb), .10); --bs-table-active-color: var(--adc-heading); --bs-table-hover-bg: rgba(255, 255, 255, .035); --bs-table-hover-color: var(--adc-heading); } html[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--adc-border) !important; } html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] .table-light th, html[data-bs-theme="dark"] .table-light td { background-color: var(--adc-surface-raised) !important; color: var(--adc-heading) !important; border-color: var(--adc-border) !important; } html[data-bs-theme="dark"] div.dt-container, html[data-bs-theme="dark"] .dataTables_wrapper { color: var(--adc-text) !important; } html[data-bs-theme="dark"] table.dataTable tbody tr, html[data-bs-theme="dark"] .table-responsive { background-color: transparent !important; } /* ============================================================ DROPDOWNS / MODALS / OVERLAYS ============================================================ */ html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .popover { box-shadow: var(--adc-shadow) !important; } html[data-bs-theme="dark"] .dropdown-item { color: var(--adc-text) !important; } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus, html[data-bs-theme="dark"] .dropdown-item.active, html[data-bs-theme="dark"] .dropdown-item:active { background-color: rgba(255, 255, 255, .05) !important; color: var(--adc-heading) !important; } html[data-bs-theme="dark"] .dropdown-item.active, html[data-bs-theme="dark"] .dropdown-item:active { background-color: color-mix(in srgb, var(--bs-primary) 17%, transparent) !important; color: color-mix(in srgb, var(--bs-primary) 72%, white 28%) !important; } html[data-bs-theme="dark"] .modal-backdrop, html[data-bs-theme="dark"] .offcanvas-backdrop { background-color: #000 !important; } html[data-bs-theme="dark"] .modal-backdrop.show, html[data-bs-theme="dark"] .offcanvas-backdrop.show { opacity: .68 !important; } /* ============================================================ NAVS / TABS / PILLS / PAGINATION ============================================================ */ html[data-bs-theme="dark"] .nav-tabs { border-color: var(--adc-border) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--adc-muted) !important; border-color: transparent !important; } html[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link, html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--adc-surface-raised) !important; color: var(--adc-heading) !important; border-color: var(--adc-border) var(--adc-border) var(--adc-surface-raised) !important; } html[data-bs-theme="dark"] .nav-pills .nav-link:not(.active) { color: #aab1b9; } html[data-bs-theme="dark"] .nav-pills .nav-link:not(.active):hover { background: rgba(255, 255, 255, .035); color: var(--adc-heading); } html[data-bs-theme="dark"] .nav-pills .nav-link.active, html[data-bs-theme="dark"] .nav-pills .show > .nav-link { box-shadow: none !important; } html[data-bs-theme="dark"] .page-link { background-color: var(--adc-surface) !important; border-color: var(--adc-border) !important; color: var(--adc-text) !important; } html[data-bs-theme="dark"] .page-link:hover { background-color: var(--adc-surface-hover) !important; color: var(--adc-heading) !important; } html[data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--bs-primary-contrast, #fff) !important; } /* ============================================================ BUTTONS / BADGES / ALERTS ============================================================ */ html[data-bs-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light) { border-color: var(--adc-border); } html[data-bs-theme="dark"] .btn-light, html[data-bs-theme="dark"] .btn-outline-secondary { background-color: var(--adc-surface-raised) !important; border-color: #343a40 !important; color: var(--adc-text) !important; } html[data-bs-theme="dark"] .btn-light:hover, html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--adc-surface-hover) !important; border-color: #424950 !important; color: #fff !important; } html[data-bs-theme="dark"] .alert { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); box-shadow: none; } html[data-bs-theme="dark"] .badge.bg-label-secondary, html[data-bs-theme="dark"] .bg-label-secondary { background-color: #22262a !important; color: #b7bec6 !important; } /* ============================================================ ACCORDION / LISTS / BREADCRUMB ============================================================ */ html[data-bs-theme="dark"] .accordion-button { background-color: var(--adc-surface) !important; color: var(--adc-heading) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--adc-surface-raised) !important; color: color-mix(in srgb, var(--bs-primary) 78%, white 22%) !important; } html[data-bs-theme="dark"] .list-group-item-action:hover, html[data-bs-theme="dark"] .list-group-item-action:focus { background-color: var(--adc-surface-hover) !important; color: var(--adc-heading) !important; } html[data-bs-theme="dark"] .breadcrumb-item, html[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--adc-muted) !important; } /* ============================================================ CODE / API DOCUMENTATION ============================================================ */ html[data-bs-theme="dark"] pre, html[data-bs-theme="dark"] code, html[data-bs-theme="dark"] kbd, html[data-bs-theme="dark"] samp { font-feature-settings: "liga" 0; } html[data-bs-theme="dark"] pre, html[data-bs-theme="dark"] pre.bg-dark, html[data-bs-theme="dark"] .bg-dark pre, html[data-bs-theme="dark"] .code-block, html[data-bs-theme="dark"] .code-preview, html[data-bs-theme="dark"] .request-code, html[data-bs-theme="dark"] .response-code { background: #090b0d !important; color: #dce2e7 !important; border: 1px solid #2a3035 !important; box-shadow: none !important; } html[data-bs-theme="dark"] pre code, html[data-bs-theme="dark"] pre code * { background: transparent !important; } html[data-bs-theme="dark"] :not(pre) > code { background-color: rgba(var(--bs-primary-rgb), .10); border: 1px solid rgba(var(--bs-primary-rgb), .16); border-radius: .35rem; padding: .12rem .34rem; } /* Existing API docs has a hard-coded white active tab in a page-level