/** * kb-dark-overrides.css — dark re-skin of compiled Bootstrap 3 internals and * vendor CSS (jQuery UI, DataTables CDN, Choices.js, qtip, lightslider, * FullCalendar, CKEditor chrome, aciTree, fancytree, vis-timeline, gridstack, * dygraphs). * * EVERY rule is scoped under [data-theme="dark"]. This file must be the LAST * stylesheet in (after the DataTables CDN link) so equal-specificity * rules win by order. Where vendor specificity or vendor !important forces it, * !important is used and commented. * * Values come exclusively from kb-tokens.css vars. Literal colors appear only * inside filter()/alpha contexts that cannot take var(). * * First-party CSS (layout.css, oas_listings.css, the LESS partials, inline * template styles) is tokenized at the source and needs nothing here. * * Sections: * 1. Scaffolding * 2. Bootstrap 3 components * 3. Vendor widgets * 4. App stragglers / image treatments */ /* ====================================================================== */ /* 1. SCAFFOLDING */ /* ====================================================================== */ [data-theme="dark"] body { background-color: var(--kb-bg-canvas); color: var(--kb-text); } [data-theme="dark"] a { color: var(--kb-link); } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: var(--kb-link-hover); } [data-theme="dark"] hr { border-top-color: var(--kb-border-muted); } [data-theme="dark"] ::selection { background: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .text-muted { color: var(--kb-text-secondary); } [data-theme="dark"] .text-primary { color: var(--kb-link); } [data-theme="dark"] .text-success { color: var(--kb-success); } [data-theme="dark"] .text-info { color: var(--kb-info); } [data-theme="dark"] .text-warning { color: var(--kb-warning); } [data-theme="dark"] .text-danger { color: var(--kb-danger); } [data-theme="dark"] .bg-primary { background-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .bg-success { background-color: var(--kb-success-bg); } [data-theme="dark"] .bg-info { background-color: var(--kb-info-bg); } [data-theme="dark"] .bg-warning { background-color: var(--kb-warning-bg); } [data-theme="dark"] .bg-danger { background-color: var(--kb-danger-bg); } [data-theme="dark"] code { color: var(--kb-danger-text); background-color: var(--kb-danger-bg); } [data-theme="dark"] pre { color: var(--kb-text); background-color: var(--kb-surface-sunken); border-color: var(--kb-border); } [data-theme="dark"] kbd { color: var(--kb-text-inverse); background-color: var(--kb-surface-raised); } [data-theme="dark"] blockquote { border-left-color: var(--kb-border); } [data-theme="dark"] blockquote footer, [data-theme="dark"] blockquote small { color: var(--kb-text-secondary); } [data-theme="dark"] mark, [data-theme="dark"] .mark { background-color: var(--kb-highlight); color: var(--kb-text); } [data-theme="dark"] .page-header { border-bottom-color: var(--kb-border-muted); } /* ====================================================================== */ /* 2. BOOTSTRAP 3 COMPONENTS */ /* ====================================================================== */ /* ---- Tables ---- */ [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > tfoot > tr > th, [data-theme="dark"] .table > thead > tr > td, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tfoot > tr > td { border-top-color: var(--kb-border-muted); } [data-theme="dark"] .table > thead > tr > th { border-bottom-color: var(--kb-border); } [data-theme="dark"] .table { background-color: transparent; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--kb-surface-sunken); } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--kb-surface-raised); } [data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered > thead > tr > th, [data-theme="dark"] .table-bordered > tbody > tr > th, [data-theme="dark"] .table-bordered > tfoot > tr > th, [data-theme="dark"] .table-bordered > thead > tr > td, [data-theme="dark"] .table-bordered > tbody > tr > td, [data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: var(--kb-border-muted); } [data-theme="dark"] .table > thead > tr > td.active, [data-theme="dark"] .table > tbody > tr > td.active, [data-theme="dark"] .table > thead > tr.active > td, [data-theme="dark"] .table > tbody > tr.active > td { background-color: var(--kb-surface-raised); } [data-theme="dark"] .table > thead > tr > td.success, [data-theme="dark"] .table > tbody > tr > td.success, [data-theme="dark"] .table > thead > tr.success > td, [data-theme="dark"] .table > tbody > tr.success > td { background-color: var(--kb-success-bg); } [data-theme="dark"] .table > thead > tr > td.info, [data-theme="dark"] .table > tbody > tr > td.info, [data-theme="dark"] .table > thead > tr.info > td, [data-theme="dark"] .table > tbody > tr.info > td { background-color: var(--kb-info-bg); } [data-theme="dark"] .table > thead > tr > td.warning, [data-theme="dark"] .table > tbody > tr > td.warning, [data-theme="dark"] .table > thead > tr.warning > td, [data-theme="dark"] .table > tbody > tr.warning > td { background-color: var(--kb-warning-bg); } [data-theme="dark"] .table > thead > tr > td.danger, [data-theme="dark"] .table > tbody > tr > td.danger, [data-theme="dark"] .table > thead > tr.danger > td, [data-theme="dark"] .table > tbody > tr.danger > td { background-color: var(--kb-danger-bg); } [data-theme="dark"] .table-responsive { border-color: var(--kb-border); } /* ---- Forms ---- */ [data-theme="dark"] .form-control { background-color: var(--kb-surface); border-color: var(--kb-border); color: var(--kb-text); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); } [data-theme="dark"] .form-control:focus { border-color: var(--kb-link); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25), 0 0 8px var(--kb-focus-ring); } [data-theme="dark"] .form-control::placeholder { color: var(--kb-text-disabled); } [data-theme="dark"] .form-control:-ms-input-placeholder { color: var(--kb-text-disabled); } [data-theme="dark"] .form-control[disabled], [data-theme="dark"] .form-control[readonly], [data-theme="dark"] fieldset[disabled] .form-control { background-color: var(--kb-surface-sunken); color: var(--kb-text-disabled); } [data-theme="dark"] .input-group-addon { background-color: var(--kb-surface-sunken); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .help-block { color: var(--kb-text-secondary); } [data-theme="dark"] legend { color: var(--kb-text); border-bottom-color: var(--kb-border-muted); } [data-theme="dark"] output { color: var(--kb-text); } [data-theme="dark"] .has-success .help-block, [data-theme="dark"] .has-success .control-label, [data-theme="dark"] .has-success .form-control-feedback { color: var(--kb-success-text); } [data-theme="dark"] .has-success .form-control { border-color: var(--kb-success-border); } [data-theme="dark"] .has-warning .help-block, [data-theme="dark"] .has-warning .control-label, [data-theme="dark"] .has-warning .form-control-feedback { color: var(--kb-warning-text); } [data-theme="dark"] .has-warning .form-control { border-color: var(--kb-warning-border); } [data-theme="dark"] .has-error .help-block, [data-theme="dark"] .has-error .control-label, [data-theme="dark"] .has-error .form-control-feedback { color: var(--kb-danger-text); } [data-theme="dark"] .has-error .form-control { border-color: var(--kb-danger-border); } /* ---- Buttons ---- */ [data-theme="dark"] .btn-default { color: var(--kb-text); background-color: var(--kb-surface-raised); border-color: var(--kb-border); } [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus, [data-theme="dark"] .btn-default:active, [data-theme="dark"] .btn-default.active, [data-theme="dark"] .open > .dropdown-toggle.btn-default { color: var(--kb-text); background-color: var(--kb-overlay); border-color: var(--kb-border-strong); } [data-theme="dark"] .btn-default.disabled, [data-theme="dark"] .btn-default[disabled], [data-theme="dark"] fieldset[disabled] .btn-default { background-color: var(--kb-surface-sunken); border-color: var(--kb-border-muted); color: var(--kb-text-disabled); } [data-theme="dark"] .btn-primary { background-color: var(--kb-accent); border-color: var(--kb-accent); } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-primary:active, [data-theme="dark"] .btn-primary.active, [data-theme="dark"] .open > .dropdown-toggle.btn-primary { background-color: var(--kb-accent-hover); border-color: var(--kb-accent-hover); } [data-theme="dark"] .btn-link { color: var(--kb-link); } [data-theme="dark"] .btn-link:hover, [data-theme="dark"] .btn-link:focus { color: var(--kb-link-hover); } [data-theme="dark"] .btn-link[disabled]:hover, [data-theme="dark"] fieldset[disabled] .btn-link:hover { color: var(--kb-text-disabled); } /* ---- Dropdowns ---- */ [data-theme="dark"] .dropdown-menu { background-color: var(--kb-overlay); border-color: var(--kb-border); box-shadow: var(--kb-shadow-overlay); } [data-theme="dark"] .dropdown-menu > li > a { color: var(--kb-text); } [data-theme="dark"] .dropdown-menu > li > a:hover, [data-theme="dark"] .dropdown-menu > li > a:focus { color: var(--kb-text); background-color: var(--kb-surface-raised); } [data-theme="dark"] .dropdown-menu > .active > a, [data-theme="dark"] .dropdown-menu > .active > a:hover, [data-theme="dark"] .dropdown-menu > .active > a:focus { background-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .dropdown-menu > .disabled > a, [data-theme="dark"] .dropdown-menu > .disabled > a:hover { color: var(--kb-text-disabled); } [data-theme="dark"] .dropdown-menu .divider { background-color: var(--kb-border-muted); } [data-theme="dark"] .dropdown-header { color: var(--kb-text-secondary); } /* ---- Navs / Navbar ---- */ [data-theme="dark"] .nav > li > a:hover, [data-theme="dark"] .nav > li > a:focus { background-color: var(--kb-surface-raised); } [data-theme="dark"] .nav .open > a, [data-theme="dark"] .nav .open > a:hover, [data-theme="dark"] .nav .open > a:focus { background-color: var(--kb-surface-raised); border-color: var(--kb-border); } [data-theme="dark"] .nav-tabs { border-bottom-color: var(--kb-border); } [data-theme="dark"] .nav-tabs > li > a:hover { border-color: var(--kb-border-muted) var(--kb-border-muted) var(--kb-border); } [data-theme="dark"] .nav-tabs > li.active > a, [data-theme="dark"] .nav-tabs > li.active > a:hover, [data-theme="dark"] .nav-tabs > li.active > a:focus { color: var(--kb-text); background-color: var(--kb-surface); border-color: var(--kb-border) var(--kb-border) transparent; } [data-theme="dark"] .nav-pills > li.active > a, [data-theme="dark"] .nav-pills > li.active > a:hover, [data-theme="dark"] .nav-pills > li.active > a:focus { background-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .navbar-default { background-color: var(--kb-surface-brand); border-color: var(--kb-border); } [data-theme="dark"] .navbar-default .navbar-brand, [data-theme="dark"] .navbar-default .navbar-nav > li > a { color: var(--kb-text); } [data-theme="dark"] .navbar-default .navbar-brand:hover, [data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, [data-theme="dark"] .navbar-default .navbar-nav > li > a:focus { color: var(--kb-link-hover); } [data-theme="dark"] .navbar-default .navbar-nav > .active > a, [data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover, [data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus, [data-theme="dark"] .navbar-default .navbar-nav > .open > a { background-color: var(--kb-surface-raised); color: var(--kb-text); } [data-theme="dark"] .navbar-default .navbar-toggle { border-color: var(--kb-border); } [data-theme="dark"] .navbar-default .navbar-toggle:hover, [data-theme="dark"] .navbar-default .navbar-toggle:focus { background-color: var(--kb-surface-raised); } [data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background-color: var(--kb-text-secondary); } [data-theme="dark"] .navbar-default .navbar-collapse, [data-theme="dark"] .navbar-default .navbar-form { border-color: var(--kb-border); } /* ---- Pagination / Pager ---- */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: var(--kb-surface); border-color: var(--kb-border); color: var(--kb-link); } [data-theme="dark"] .pagination > li > a:hover, [data-theme="dark"] .pagination > li > span:hover { background-color: var(--kb-surface-raised); border-color: var(--kb-border-strong); color: var(--kb-link-hover); } [data-theme="dark"] .pagination > .active > a, [data-theme="dark"] .pagination > .active > a:hover, [data-theme="dark"] .pagination > .active > span { background-color: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .pagination > .disabled > span, [data-theme="dark"] .pagination > .disabled > a, [data-theme="dark"] .pagination > .disabled > a:hover { background-color: var(--kb-surface-sunken); border-color: var(--kb-border-muted); color: var(--kb-text-disabled); } [data-theme="dark"] .pager li > a, [data-theme="dark"] .pager li > span { background-color: var(--kb-surface); border-color: var(--kb-border); } [data-theme="dark"] .pager li > a:hover { background-color: var(--kb-surface-raised); } /* ---- Labels / Badges ---- */ [data-theme="dark"] .label-default { background-color: var(--kb-text-disabled); } [data-theme="dark"] .badge { background-color: var(--kb-surface-raised); color: var(--kb-text); } /* ---- Breadcrumb / Jumbotron / Thumbnail / Well ---- */ [data-theme="dark"] .breadcrumb { background-color: var(--kb-surface-sunken); } [data-theme="dark"] .breadcrumb > li + li:before { color: var(--kb-text-disabled); } [data-theme="dark"] .breadcrumb > .active { color: var(--kb-text-secondary); } [data-theme="dark"] .jumbotron { background-color: var(--kb-surface-sunken); } [data-theme="dark"] .thumbnail { background-color: var(--kb-surface); border-color: var(--kb-border); } [data-theme="dark"] .thumbnail .caption { color: var(--kb-text); } [data-theme="dark"] .well { background-color: var(--kb-surface-sunken); border-color: var(--kb-border-muted); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); } /* ---- Alerts (covers flashMessages on responsive pages) ---- */ [data-theme="dark"] .alert-success { background-color: var(--kb-success-bg); border-color: var(--kb-success-border); color: var(--kb-success-text); } [data-theme="dark"] .alert-info { background-color: var(--kb-info-bg); border-color: var(--kb-info-border); color: var(--kb-info-text); } [data-theme="dark"] .alert-warning { background-color: var(--kb-warning-bg); border-color: var(--kb-warning-border); color: var(--kb-warning-text); } [data-theme="dark"] .alert-danger { background-color: var(--kb-danger-bg); border-color: var(--kb-danger-border); color: var(--kb-danger-text); } [data-theme="dark"] .alert .alert-link { color: inherit; text-decoration: underline; } /* ---- List group ---- */ [data-theme="dark"] .list-group-item { background-color: var(--kb-surface); border-color: var(--kb-border-muted); color: var(--kb-text); } [data-theme="dark"] a.list-group-item:hover, [data-theme="dark"] a.list-group-item:focus, [data-theme="dark"] button.list-group-item:hover { background-color: var(--kb-surface-raised); color: var(--kb-text); } [data-theme="dark"] .list-group-item.active, [data-theme="dark"] .list-group-item.active:hover, [data-theme="dark"] .list-group-item.active:focus { background-color: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .list-group-item.disabled { background-color: var(--kb-surface-sunken); color: var(--kb-text-disabled); } [data-theme="dark"] .list-group-item-success { background-color: var(--kb-success-bg); color: var(--kb-success-text); } [data-theme="dark"] .list-group-item-info { background-color: var(--kb-info-bg); color: var(--kb-info-text); } [data-theme="dark"] .list-group-item-warning { background-color: var(--kb-warning-bg); color: var(--kb-warning-text); } [data-theme="dark"] .list-group-item-danger { background-color: var(--kb-danger-bg); color: var(--kb-danger-text); } /* ---- Panels ---- */ [data-theme="dark"] .panel { background-color: var(--kb-surface); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); } [data-theme="dark"] .panel-default { border-color: var(--kb-border); } [data-theme="dark"] .panel-default > .panel-heading { background-color: var(--kb-surface-raised); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .panel-heading, [data-theme="dark"] .panel-footer { border-color: var(--kb-border); } [data-theme="dark"] .panel-footer { background-color: var(--kb-surface-raised); } [data-theme="dark"] .panel-group .panel { border-color: var(--kb-border); } [data-theme="dark"] .panel-primary { border-color: var(--kb-accent); } [data-theme="dark"] .panel-primary > .panel-heading { background-color: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"] .panel-success { border-color: var(--kb-success-border); } [data-theme="dark"] .panel-success > .panel-heading { background-color: var(--kb-success-bg); border-color: var(--kb-success-border); color: var(--kb-success-text); } [data-theme="dark"] .panel-info { border-color: var(--kb-info-border); } [data-theme="dark"] .panel-info > .panel-heading { background-color: var(--kb-info-bg); border-color: var(--kb-info-border); color: var(--kb-info-text); } [data-theme="dark"] .panel-warning { border-color: var(--kb-warning-border); } [data-theme="dark"] .panel-warning > .panel-heading { background-color: var(--kb-warning-bg); border-color: var(--kb-warning-border); color: var(--kb-warning-text); } [data-theme="dark"] .panel-danger { border-color: var(--kb-danger-border); } [data-theme="dark"] .panel-danger > .panel-heading { background-color: var(--kb-danger-bg); border-color: var(--kb-danger-border); color: var(--kb-danger-text); } [data-theme="dark"] .panel > .table, [data-theme="dark"] .panel > .panel-body + .table { border-color: var(--kb-border-muted); } /* ---- Modals ---- */ [data-theme="dark"] .modal-content { background-color: var(--kb-overlay); border-color: var(--kb-border); box-shadow: var(--kb-shadow-overlay); } [data-theme="dark"] .modal-header { border-bottom-color: var(--kb-border); } [data-theme="dark"] .modal-footer { border-top-color: var(--kb-border); } /* ---- Close icon (BS gives it a white text-shadow that glows on dark) ---- */ [data-theme="dark"] .close { color: var(--kb-text); text-shadow: none; opacity: .4; } [data-theme="dark"] .close:hover, [data-theme="dark"] .close:focus { color: var(--kb-text); opacity: .7; } /* ---- Popovers ---- */ [data-theme="dark"] .popover { background-color: var(--kb-overlay); border-color: var(--kb-border); box-shadow: var(--kb-shadow-overlay); } [data-theme="dark"] .popover-title { background-color: var(--kb-surface-raised); border-bottom-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .popover-content { color: var(--kb-text); } [data-theme="dark"] .popover.top > .arrow { border-top-color: var(--kb-border); } [data-theme="dark"] .popover.top > .arrow:after { border-top-color: var(--kb-overlay); } [data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--kb-border); } [data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--kb-overlay); } [data-theme="dark"] .popover.left > .arrow { border-left-color: var(--kb-border); } [data-theme="dark"] .popover.left > .arrow:after { border-left-color: var(--kb-overlay); } [data-theme="dark"] .popover.right > .arrow { border-right-color: var(--kb-border); } [data-theme="dark"] .popover.right > .arrow:after { border-right-color: var(--kb-overlay); } /* ---- Progress ---- */ [data-theme="dark"] .progress { background-color: var(--kb-surface-sunken); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); } /* Bootstrap tooltips are black-on-white-text already — fine in dark. */ /* ====================================================================== */ /* 3. VENDOR WIDGETS */ /* ====================================================================== */ /* ---- jQuery UI 1.10.3 (custom 'oas' theme; both /styles and dist copies use the same classnames). The theme paints with background-images, so those must be cleared. Doubled scope beats the theme selectors. ---- */ [data-theme="dark"][data-theme="dark"] .ui-widget-content { background: var(--kb-surface); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"][data-theme="dark"] .ui-widget-content a { color: var(--kb-link); } [data-theme="dark"][data-theme="dark"] .ui-widget-header { background: var(--kb-surface-raised); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"][data-theme="dark"] .ui-state-default, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-default, [data-theme="dark"][data-theme="dark"] .ui-widget-header .ui-state-default { background: var(--kb-surface-raised); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"][data-theme="dark"] .ui-state-hover, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-hover, [data-theme="dark"][data-theme="dark"] .ui-state-focus, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-focus { background: var(--kb-overlay); border-color: var(--kb-border-strong); color: var(--kb-text); } [data-theme="dark"][data-theme="dark"] .ui-state-active, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-active { background: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-text-inverse); } [data-theme="dark"][data-theme="dark"] .ui-state-highlight, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-highlight { background: var(--kb-warning-bg); border-color: var(--kb-warning-border); color: var(--kb-warning-text); } [data-theme="dark"][data-theme="dark"] .ui-state-error, [data-theme="dark"][data-theme="dark"] .ui-widget-content .ui-state-error { background: var(--kb-danger-bg); border-color: var(--kb-danger-border); color: var(--kb-danger-text); } [data-theme="dark"] .ui-widget-overlay { background: #000; opacity: .65; } [data-theme="dark"] .ui-dialog { background: var(--kb-overlay); border-color: var(--kb-border); } [data-theme="dark"] .ui-dialog .ui-dialog-titlebar { background: var(--kb-surface-raised); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .ui-datepicker { background: var(--kb-overlay); border-color: var(--kb-border); } [data-theme="dark"] .ui-datepicker th { color: var(--kb-text-secondary); } [data-theme="dark"] .ui-datepicker .ui-datepicker-title { color: var(--kb-text); } /* jQuery UI icons are png sprites drawn for light chrome — invert for dark */ [data-theme="dark"] .ui-icon { filter: invert(.85); } [data-theme="dark"] .ui-slider .ui-slider-range { background: var(--kb-accent); } [data-theme="dark"] .ui-menu { background: var(--kb-overlay); border-color: var(--kb-border); } [data-theme="dark"] .ui-menu .ui-menu-item a { color: var(--kb-text); } [data-theme="dark"] .ui-tooltip { background: var(--kb-overlay); border-color: var(--kb-border); color: var(--kb-text); } /* ---- DataTables (CDN BS bundle) ---- */ [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_processing, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--kb-text); } [data-theme="dark"] .dataTables_wrapper .dataTables_processing { background-color: var(--kb-overlay); } /* sorting indicators ship as light-chrome pngs in this build — swap for text arrows */ [data-theme="dark"] table.dataTable thead .sorting, [data-theme="dark"] table.dataTable thead .sorting_asc, [data-theme="dark"] table.dataTable thead .sorting_desc, [data-theme="dark"] table.dataTable thead .sorting_asc_disabled, [data-theme="dark"] table.dataTable thead .sorting_desc_disabled { background-image: none !important; /* vendor rule also uses !important via shorthand */ } [data-theme="dark"] table.dataTable thead .sorting:after { content: " \2195"; color: var(--kb-text-disabled); } [data-theme="dark"] table.dataTable thead .sorting_asc:after { content: " \2191"; color: var(--kb-link); } [data-theme="dark"] table.dataTable thead .sorting_desc:after { content: " \2193"; color: var(--kb-link); } [data-theme="dark"] table.fixedHeader-floating { background-color: var(--kb-surface-raised); } /* ---- Choices.js ---- */ [data-theme="dark"] .choices__inner { background-color: var(--kb-surface); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .choices__input { background-color: transparent; color: var(--kb-text); } [data-theme="dark"] .choices__list--dropdown, [data-theme="dark"] .choices__list[aria-expanded] { background-color: var(--kb-overlay); border-color: var(--kb-border); } [data-theme="dark"] .choices__list--dropdown .choices__item, [data-theme="dark"] .choices__list[aria-expanded] .choices__item { color: var(--kb-text); } [data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, [data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--kb-surface-raised); } [data-theme="dark"] .choices__list--multiple .choices__item { background-color: var(--kb-accent); border-color: var(--kb-accent); } [data-theme="dark"] .choices[data-type*="select-one"]:after { border-color: var(--kb-text) transparent transparent; } [data-theme="dark"] .choices.is-disabled .choices__inner { background-color: var(--kb-surface-sunken); } /* ---- qTip ---- */ [data-theme="dark"] .qtip-default { background-color: var(--kb-overlay); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] .qtip-titlebar { background-color: var(--kb-surface-raised); border-bottom-color: var(--kb-border); } /* tipsy ships black-on-white-text — already dark-friendly, untouched */ /* ---- lightslider ---- */ [data-theme="dark"] .lSSlideOuter .lSPager.lSpg > li a { background-color: var(--kb-border-strong); } [data-theme="dark"] .lSSlideOuter .lSPager.lSpg > li.active a, [data-theme="dark"] .lSSlideOuter .lSPager.lSpg > li:hover a { background-color: var(--kb-link); } [data-theme="dark"] .lSAction > a { filter: invert(.85); } /* ---- FullCalendar ---- */ [data-theme="dark"] .fc-unthemed th, [data-theme="dark"] .fc-unthemed td, [data-theme="dark"] .fc-unthemed thead, [data-theme="dark"] .fc-unthemed tbody, [data-theme="dark"] .fc-unthemed .fc-divider, [data-theme="dark"] .fc-unthemed .fc-row, [data-theme="dark"] .fc-unthemed .fc-popover { border-color: var(--kb-border); } [data-theme="dark"] .fc-unthemed .fc-divider, [data-theme="dark"] .fc-unthemed .fc-popover .fc-header { background: var(--kb-surface-raised); } [data-theme="dark"] .fc-unthemed .fc-today { background: var(--kb-warning-bg); } [data-theme="dark"] .fc-unthemed .fc-popover { background: var(--kb-overlay); } [data-theme="dark"] .fc-unthemed .fc-axis, [data-theme="dark"] .fc-unthemed .fc-day-number, [data-theme="dark"] .fc-unthemed .fc-day-header { color: var(--kb-text-secondary); } /* ---- CKEditor: theme the CHROME only. The editing iframe stays light by design — its content (lot descriptions, terms) renders on light surfaces for bidders/emails, so WYSIWYG truthfulness wins. ---- */ [data-theme="dark"] .cke_chrome { border-color: var(--kb-border); } [data-theme="dark"] .cke_top { background: var(--kb-surface-raised); border-bottom-color: var(--kb-border); } [data-theme="dark"] .cke_bottom { background: var(--kb-surface-raised); border-top-color: var(--kb-border); } [data-theme="dark"] .cke_toolgroup, [data-theme="dark"] .cke_combo_button { background: var(--kb-surface); border-color: var(--kb-border); } [data-theme="dark"] .cke_button_icon, [data-theme="dark"] .cke_combo_arrow { filter: invert(.8); } [data-theme="dark"] .cke_combo_text { color: var(--kb-text); } [data-theme="dark"] .cke_path_item, [data-theme="dark"] .cke_path_empty { color: var(--kb-text-secondary); } /* ---- aciTree (public lot-list filters) ---- Vendor (js/aciTree/css/aciTree.css) puts color:#000 directly on the text spans and the hover/selected chip on .aciTreeLine.aciTreeHover .aciTreeItem — mirror those exact selectors. Sprite icons (checkbox, +/- expanders) are white-boxed artwork that already reads fine on dark: NO filter. */ [data-theme="dark"] .aciTree .aciTreeButton, [data-theme="dark"] .aciTree .aciTreePush, [data-theme="dark"] .aciTree .aciTreeItem, [data-theme="dark"] .aciTree .aciTreeIcon, [data-theme="dark"] .aciTree .aciTreeText, [data-theme="dark"] .aciTree .aciTreeColumn { color: var(--kb-text); } [data-theme="dark"] .aciTree .aciTreeDisabled > .aciTreeLine .aciTreeText, [data-theme="dark"] .aciTree .aciTreeDisabled > .aciTreeLine .aciTreeColumn { color: var(--kb-text-disabled); } [data-theme="dark"] .aciTree .aciTreeLine.aciTreeHover .aciTreeItem { background-color: var(--kb-surface-raised); border: 1px dashed var(--kb-border-strong); } [data-theme="dark"] .aciTree .aciTreeFocus > .aciTreeLine .aciTreeItem { border-color: var(--kb-border-strong); } [data-theme="dark"] .aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem { background-color: var(--kb-overlay); border: 1px dashed var(--kb-border-strong); } [data-theme="dark"] .aciTree.aciTreeFocus .aciTreeSelected > .aciTreeLine .aciTreeItem { background-color: var(--kb-info-bg); } [data-theme="dark"] .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeItem { border-color: var(--kb-link); } /* ---- fancytree (admin category mapper) ---- */ [data-theme="dark"] .fancytree-container { background-color: var(--kb-surface); color: var(--kb-text); border-color: var(--kb-border); } [data-theme="dark"] span.fancytree-title { color: var(--kb-text); } [data-theme="dark"] span.fancytree-active span.fancytree-title, [data-theme="dark"] span.fancytree-selected span.fancytree-title, [data-theme="dark"] .fancytree-treefocus span.fancytree-focused span.fancytree-title { background-color: var(--kb-surface-raised); color: var(--kb-text); } [data-theme="dark"] span.fancytree-expander, [data-theme="dark"] span.fancytree-icon, [data-theme="dark"] span.fancytree-checkbox { filter: invert(.85); } /* ---- vis-timeline (admin bidder-detail) ---- */ [data-theme="dark"] .vis-timeline { border-color: var(--kb-border); } [data-theme="dark"] .vis-panel.vis-bottom, [data-theme="dark"] .vis-panel.vis-center, [data-theme="dark"] .vis-panel.vis-left, [data-theme="dark"] .vis-panel.vis-right, [data-theme="dark"] .vis-panel.vis-top { border-color: var(--kb-border); } [data-theme="dark"] .vis-time-axis .vis-text { color: var(--kb-text-secondary); } [data-theme="dark"] .vis-time-axis .vis-grid.vis-minor, [data-theme="dark"] .vis-time-axis .vis-grid.vis-major { border-color: var(--kb-border-muted); } [data-theme="dark"] .vis-item { background-color: var(--kb-surface-raised); border-color: var(--kb-border-strong); color: var(--kb-text); } [data-theme="dark"] .vis-labelset .vis-label { color: var(--kb-text); border-color: var(--kb-border-muted); } /* ---- gridstack (datastudio) ---- */ [data-theme="dark"] .grid-stack-item-content { background-color: var(--kb-surface); border: 1px solid var(--kb-border); color: var(--kb-text); } /* ---- dygraphs (HTML labels/legend) ---- */ [data-theme="dark"] .dygraph-legend { background-color: var(--kb-overlay); color: var(--kb-text); } [data-theme="dark"] .dygraph-axis-label { color: var(--kb-text-secondary); } [data-theme="dark"] .dygraph-title, [data-theme="dark"] .dygraph-xlabel, [data-theme="dark"] .dygraph-ylabel { color: var(--kb-text); } /* blueimp-gallery is already black — untouched */ /* ====================================================================== */ /* 4. APP STRAGGLERS / IMAGE TREATMENTS */ /* ====================================================================== */ /* Brand band behind the (dark blue, transparent) logo so it stays legible: responsive desktop header row + legacy html5 header */ [data-theme="dark"] .container.nav44 header { background-color: transparent; } [data-theme="dark"] .html5-header { background-color: transparent; } /* ---- CMS theme stylesheet (Rackspace CDN misc/custom.css) ---- Injected site-wide via the SITE_HEADER_INCLUDE site variable AFTER this file, so these rules win via the [data-theme] specificity bump. Covers the contact/FAQ/about CMS pages plus the nav/header chrome it restyles. */ /* page scaffolding it re-declares */ [data-theme="dark"] .main-content p { color: var(--kb-text-secondary); } [data-theme="dark"] h2 { color: var(--kb-text); } [data-theme="dark"] .title-wrap p, [data-theme="dark"] .faq-section .title-wrap h2 { color: var(--kb-link); } [data-theme="dark"] .title-wrap p span { color: var(--kb-danger); } /* FAQ accordion cards */ [data-theme="dark"] .faq-items .faq-item { background: var(--kb-surface-raised); color: var(--kb-text); } [data-theme="dark"] .faq-items .faq-item a.faq-toggle { color: var(--kb-link); } [data-theme="dark"] .faq-items .faq-item .faq-content, [data-theme="dark"] .faq-items .faq-item p { color: var(--kb-text); } /* contact page */ [data-theme="dark"] section.contact-form .title-block p { color: var(--kb-text-secondary); } [data-theme="dark"] section.contact-form .title-block p a { color: var(--kb-link); } [data-theme="dark"] .contact-form-block { background-color: var(--kb-surface); border-color: var(--kb-accent); } [data-theme="dark"] .contact-form-block input, [data-theme="dark"] .contact-form-block select, [data-theme="dark"] .contact-form-block textarea { background-color: var(--kb-surface); border-color: var(--kb-border); color: var(--kb-text); } [data-theme="dark"] #contact_form_contact .submit_btn { background: var(--kb-accent); color: var(--kb-text-inverse); } /* about/help blocks */ [data-theme="dark"] .kbid-detail-inner { background: var(--kb-surface-raised); } [data-theme="dark"] .footer-inner { background-color: var(--kb-surface-sunken); border-color: var(--kb-border-muted); } /* nav/header chrome custom.css re-skins (light hover flashes otherwise) */ [data-theme="dark"] .nav-menu ul li a { color: var(--kb-link); border-bottom-color: var(--kb-border); } [data-theme="dark"] .nav-menu ul li a:hover { background: var(--kb-surface-raised); } [data-theme="dark"] .nav-menu ul li.active a { border-color: var(--kb-border); border-bottom-color: var(--kb-surface); background: var(--kb-surface-raised); color: var(--kb-text); } [data-theme="dark"] .site-header .navbar-collapse { background: var(--kb-overlay); border-top-color: var(--kb-border); } [data-theme="dark"] .site-header .btn-group .btn-outline-dark { color: var(--kb-text); background-color: var(--kb-surface-raised); border-color: var(--kb-border); } [data-theme="dark"] .site-header .btn-group .btn-outline-dark:hover { background-color: var(--kb-overlay); border-color: var(--kb-border-strong); color: var(--kb-text); } [data-theme="dark"] .navbar-toggle:hover { background-color: var(--kb-surface-raised); } /* reCAPTCHA: the dark anchor box inside Google's iframe is 300x74 but the iframe document is 304x78 with an unthemed WHITE page background, leaving a 2px white ring around the widget on dark. Clip the gutter (the checkbox challenge opens in a separate overlay iframe, so nothing else is affected). */ [data-theme="dark"] .g-recaptcha iframe { clip-path: inset(2px round 4px); } /* ---- User-generated rich text (.kb-ugc) ---- Affiliate-authored CKEditor/Word HTML (auction terms, shipping, payment, removal, lot descriptions) carries baked inline colors (#333 text, white highlight spans) that are unreadable on dark. Inline styles can only be beaten with !important, so in dark mode we neutralize text and background colors inside .kb-ugc wrappers; bold/underline/size emphasis survives. Light mode renders the authored colors untouched. */ [data-theme="dark"] .kb-ugc, [data-theme="dark"] .kb-ugc *:not(a):not(.btn) { color: var(--kb-text) !important; /* vs. inline style attrs */ background-color: transparent !important; /* vs. pasted white/yellow highlight spans */ } [data-theme="dark"] .kb-ugc a { color: var(--kb-link) !important; } [data-theme="dark"] .kb-ugc a:hover { color: var(--kb-link-hover) !important; } [data-theme="dark"] .kb-ugc hr { border-top-color: var(--kb-border-muted); } [data-theme="dark"] .kb-ugc table td, [data-theme="dark"] .kb-ugc table th { border-color: var(--kb-border-muted); } /* Lot countdown box uses a light diagonal-stripe tile + light inset glow — swap for a flat raised surface in dark */ [data-theme="dark"] #lot_countdown { background: var(--kb-surface-raised); box-shadow: none; } /* Black-artwork SVG marks become invisible on dark — invert the monochrome one */ [data-theme="dark"] img[src*="naa_black"] { filter: invert(1) grayscale(1) brightness(1.6); } [data-theme="dark"] img[src*="auction-paddle"] { filter: brightness(1.4); } /* Native widgets / scrollbars pick up color-scheme: dark from kb-tokens.css */ /* Email preview iframe (admin) must stay light — give it a white plate */ [data-theme="dark"] iframe.email-preview-frame, [data-theme="dark"] .email-preview iframe { background: #fff; } /* Google Maps stays light (documented exception) — frame it so it reads as a deliberate widget */ [data-theme="dark"] .kb-map-wrap, [data-theme="dark"] #map_canvas, [data-theme="dark"] .gmap { border: 1px solid var(--kb-border); }