:root { --color: #ffffff; --lr-source-color: #3e78dc; --white-color: #bfbfbf; --shade-color: #424242; /* Learning Path Journey panels. theme-components paints `.lp--card-component-color { background: var(--lp-journey-color) }`, and with the variable undefined that declaration is invalid at computed-value time, so the panel fell back to transparent — leaving its white text on the white climbing illustration at 1.00:1. Alpha matches the widget's own #2c77f4c7 so the artwork still shows through. */ --lp-journey-color: rgba(36, 36, 36, 0.82); --gradient-color: #242424 100% !important; --gradient-back-color: #0a0a0a !important; --unselected-color: #242424; --text-color: #bfbfbf; --border-radius: 0.85rem !important; --transparent-color: transparent !important; --tree-items-bg: #0a0a0a; --tree-items-text-color: #ffffff; --mobile-back-color: #ffffff; --notification-color: #ffffff; --pagination-text-color: #ffffff; /* AmCharts: only defined for Slate Noir; other themes keep defaults */ --chart-label-color: #bfbfbf; --chart-axis-color: #666666; --empty-ill-bg: #3a3a3a; --empty-ill-muted: #555555; --empty-ill-white: #bfbfbf; --lr-source-color: #fff; } body { background-color: #000 !important; } /* User profile dropdown — dark panel, readable hover, dark logout */ #userDropDown { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; } #userDropDown .kt-user-card { background: #242424 !important; } #userDropDown .kt-notification__item, #userDropDown .kt-notification__item-details, #userDropDown .kt-notification__item-title { color: #ffffff !important; } #userDropDown .kt-notification__item-icon i { color: #ffffff !important; } #userDropDown .kt-notification__item:hover { background-color: #424242 !important; } #userDropDown .kt-notification__item:hover .kt-notification__item-title, #userDropDown .kt-notification__item:hover .kt-notification__item-icon i { color: #ffffff !important; } #userDropDown .kt-notification__custom { background: transparent !important; } #userDropDown .btn.btn-label-brand, #userDropDown .btn.btn-label.btn-label-brand { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } #userDropDown .btn.btn-label-brand:hover, #userDropDown .btn.btn-label.btn-label-brand:hover { background: #bfbfbf !important; background-color: #bfbfbf !important; color: #000000 !important; } .dark-mode { background-color: #242424 !important; border: 1px solid #424242 !important; } .dates-row { color: white !important; } /* Kill Metronic datepicker blue (#5867dd) — only .active looks selected */ .datepicker tbody tr>td span.month.active, .datepicker tbody tr>td span.month.active:hover, .datepicker tbody tr>td span.month.active.focused, .datepicker tbody tr>td span.month.active.focused:hover, .datepicker tbody tr>td span.year.active, .datepicker tbody tr>td span.year.active:hover, .datepicker tbody tr>td span.year.active.focused, .datepicker tbody tr>td span.year.active.focused:hover, .datepicker tbody tr>td span.hour.active, .datepicker tbody tr>td span.minute.active, .datepicker table tr td span.active, .datepicker table tr td span.active.active, .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datepicker table tr td.selected { background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; color: #000000 !important; text-shadow: none !important; } /* Focused / hover must NOT look like selected (avoids two white months) */ .datepicker tbody tr>td span.month:hover, .datepicker tbody tr>td span.year:hover, .datepicker tbody tr>td span.month.focused, .datepicker tbody tr>td span.year.focused, .datepicker tbody tr>td span.month.focused:hover, .datepicker tbody tr>td span.year.focused:hover { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; } /* Unselected months stay muted */ .datepicker tbody tr>td span.month, .datepicker tbody tr>td span.year { background: transparent !important; color: #bfbfbf !important; } .datepicker, .datepicker.datepicker-dropdown { background: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } .datepicker table tr td, .datepicker table tr th, .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker .dow, .datepicker .day { color: #ffffff !important; background: transparent !important; } .datepicker thead th, .datepicker .datepicker-switch { background: #242424 !important; color: #ffffff !important; } .datepicker thead th.prev:hover, .datepicker thead th.next:hover, .datepicker thead th.datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker .datepicker-switch:hover { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; } .datepicker table tr td.day:hover { background: #424242 !important; color: #ffffff !important; } .datepicker table tr td.old, .datepicker table tr td.new { color: #888888 !important; } /* Universal Datepicker Input and Date Selection Fields in Slate Noir */ .kt-datepicker, .kt-datepicker__theme, input.kt-datepicker, input.kt-datepicker__theme, input.base_input.kt-datepicker, input.base_input.kt-datepicker__theme, input.form-control.kt-datepicker, input.datepicker, input[type="date"], input.date-picker, input.datepicker-input, .base_input.kt-datepicker, .base_input.kt-datepicker__theme, .filterModal-base_input, #startdate, #enddate, #id_start_date, #id_end_date, #filter_start_date, #filter_end_date, #survey_start_date_from, #survey_start_date_to, #survey_end_date_from, #survey_end_date_to, #br_start_date, #br_end_date, #ex_start_date, #ex_end_date, #paperStartDate, #paperEndDate { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .kt-datepicker::placeholder, .kt-datepicker__theme::placeholder, input.kt-datepicker::placeholder, input.kt-datepicker__theme::placeholder, input.base_input.kt-datepicker::placeholder, input.form-control.kt-datepicker::placeholder, .filterModal-base_input::placeholder, #startdate::placeholder, #enddate::placeholder, #id_start_date::placeholder, #id_end_date::placeholder { color: #bfbfbf !important; -webkit-text-fill-color: #bfbfbf !important; opacity: 1 !important; } /* Filter toolbars: never show the dark-mode box — only style the pills */ .filter-container.dark-mode { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; height: auto !important; min-height: 0 !important; padding: 0 !important; gap: 0.75rem !important; align-items: center !important; flex-wrap: wrap !important; } .filter-container.dark-mode button, .filter-container.dark-mode .filter, .filter-container.dark-mode .clear, .filter-container.dark-mode .download { margin-left: 0 !important; flex-shrink: 0 !important; } /* Shared report grid shells. This was gated on .dark-mode, but on these shells that class is plain static markup — `
` — so it is in the DOM under every theme and never acted as a theme guard. What actually scopes these rules to Slate Noir is that this file is only loaded for Slate Noir. (The conditional `$isSlateNoir ? 'dark-mode'` form does exist, but only on dashboard widgets, never here.) 59 of the 70 shells in the app simply never got the class, so they kept chromium.main's `background: #ffffff` with its #e6e6e6 border while the header and rows inside them were themed dark. The white therefore only showed where the table did not reach — and `.be-report-table-scroll` carries a deliberate `min-height: min(400px, 60vh)` (added so few-row grids don't clip in-cell action menus), so a one-row grid left ~350px of white beneath the row. Dropping the gate fixes every one of those grids from a single rule — Manage User, Gamiflexer Daily Assessment and the rest — rather than repeating the pairing per page. Values are unchanged, so the shells that already carried the class render exactly as before, and pages needing different geometry (.attrition-report-screen below) still override on specificity. */ .be-report-table-shell, .be-report-table-shell.dark-mode { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; } /* The scroll wrapper has no background of its own in any stylesheet; pinning it transparent keeps the shell colour above as the single surface filling the min-height area. */ .be-report-table-scroll { background: transparent !important; } /* Thead / body — same gate drop as the shell. Many report grids (User Response, skill reports, question-wise, etc.) omit `.dark-mode` on the shell, so the old `.be-report-table-shell.dark-mode …` pair left chromium/reportStyle #ffffff rows and light heads intact. */ .report_thead.dark-mode, .report_thead.dark-mode th, .be-report-table-shell .report_thead, .be-report-table-shell .report_thead th, .be-report-table-shell .be-report-table thead th, .be-report-table-shell.dark-mode .report_thead, .be-report-table-shell.dark-mode .report_thead th, .be-report-table-shell.dark-mode .be-report-table thead th { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; border-color: #424242 !important; } /* Attrition Report — beat attritionReportStyle.css thead th { color: #000 } */ .attrition-report-screen .custom-overflow .row:has(sb-grid) { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; border-radius: 10px 10px 0 0 !important; overflow: hidden !important; } .attrition-report-screen .custom-overflow .report_table, .attrition-report-screen .custom-overflow .report_table.be-report-table, .attrition-report-screen .be-report-table-shell .report_table, .attrition-report-screen .be-report-table-shell .be-report-table { border-collapse: separate !important; border-spacing: 0 !important; -webkit-border-horizontal-spacing: 0 !important; -webkit-border-vertical-spacing: 0 !important; } .attrition-report-screen .be-report-table-shell, .attrition-report-screen .be-report-table-shell.dark-mode { padding: 0 !important; margin: 0 !important; } .attrition-report-screen .be-report-table-scroll { padding: 0 !important; margin: 0 !important; } .attrition-report-screen .custom-overflow .report_table thead th, .attrition-report-screen .custom-overflow .report_thead, .attrition-report-screen .custom-overflow .report_thead.dark-mode, .attrition-report-screen .custom-overflow .report_thead.dark-mode th, .attrition-report-screen .custom-overflow .report_table thead th.dark-mode-light-text, .attrition-report-screen .custom-overflow .report_table thead th .dark-mode-light-text, .attrition-report-screen .custom-overflow .report_table thead th span { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; border-bottom: 1px solid #424242 !important; border-color: #424242 !important; } .attrition-report-screen .custom-overflow .report_table thead th:first-child { border-top-left-radius: 9px !important; } .attrition-report-screen .custom-overflow .report_table thead th:last-child { border-top-right-radius: 9px !important; } /* Active sorted column label only (e.g. "Created On") — underline like other themes */ .attrition-report-screen .custom-overflow .report_table thead th span.kt-font-info { text-decoration: underline !important; text-underline-offset: 2px; } .cr-row.dark-mode, .cr-row.dark-mode td, .be-report-table-shell .cr-row, .be-report-table-shell .cr-row td, .be-report-table-shell .be-report-table tbody tr, .be-report-table-shell .be-report-table tbody td, .be-report-table-shell.dark-mode .cr-row, .be-report-table-shell.dark-mode .cr-row td, .be-report-table-shell.dark-mode .be-report-table tbody tr, .be-report-table-shell.dark-mode .be-report-table tbody td { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border-color: #424242 !important; box-shadow: none !important; } .be-report-table-shell .cr-row td span:not(.cr-success):not(.cr-fail):not(.status-unattempted):not(.status-evaluation-pending):not(.status-button):not(.status-button_item), .be-report-table-shell .cr-row td a:not(.dropdown-item), .be-report-table-shell .cr-row td p, .be-report-table-shell .cr-row td a:not(.dropdown-item) i, .be-report-table-shell .report_td, .be-report-table-shell.dark-mode .cr-row td span:not(.cr-success):not(.cr-fail):not(.status-unattempted):not(.status-evaluation-pending):not(.status-button):not(.status-button_item), .be-report-table-shell.dark-mode .cr-row td a:not(.dropdown-item), .be-report-table-shell.dark-mode .cr-row td p, .be-report-table-shell.dark-mode .cr-row td a:not(.dropdown-item) i { color: #ffffff !important; } .be-report-table-shell .be-report-table tbody td, .be-report-table-shell.dark-mode .be-report-table tbody td { border-bottom-color: #424242 !important; } /* Kill chromium/reportStyle row hover light shadow on dark shells */ .be-report-table-shell .cr-row:hover, .be-report-table-shell .cr-row.dark-mode:hover { box-shadow: none !important; } /* Shared report search filter — many report blades omit `.dark-mode` on the input (User Response, skill reports, …), so per-screen `.dark-mode` rules miss them and reportStyle’s #ffffff search survives. Scope to report toolbars / search containers used on report pages. */ .report-toolbar .search-filter__input, .report-toolbar #report_search, .showFilter-row__padding .search-filter__input, .showFilter-row__padding #report_search, .search-filter__container .search-filter__input, .search-filter__container #report_search { background: #242424 !important; background-color: #242424 !important; border: 2px solid #424242 !important; color: #ffffff !important; } .report-toolbar .search-filter__input::placeholder, .report-toolbar #report_search::placeholder, .showFilter-row__padding .search-filter__input::placeholder, .showFilter-row__padding #report_search::placeholder, .search-filter__container .search-filter__input::placeholder, .search-filter__container #report_search::placeholder { color: #888888 !important; } .report-toolbar .search-icon, .report-toolbar__search .search-icon, .showFilter-row__padding .search-icon, .search-filter__container .search-icon { color: #bfbfbf !important; } /* Report filter strip — no light chrome behind the pills */ .report-toolbar .filter-container, .report-toolbar__actions.filter-container, .showFilter-row__padding .filter-container { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* ── User Response Report Filters modal (/report/userResponseReport) ────────── Modal ships without `.dark-mode`, and userResponseReportStyle.css forces `#ffffff` on `.modal-content` / selects. Scope via #userResponseQuestionTypeFilter (unique to this page). Inputs already use shared `.filterModal-base_input`. */ body:has(#userResponseQuestionTypeFilter) #filterModal .modal-content, body:has(#userResponseQuestionTypeFilter) #filterModal .modal-header, body:has(#userResponseQuestionTypeFilter) #filterModal .modal-body, body:has(#userResponseQuestionTypeFilter) #filterModal .modal-footer, body:has(#userResponseQuestionTypeFilter) #filterModal .footer { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .modal-header { border-bottom: 1px solid #424242 !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .modal-footer, body:has(#userResponseQuestionTypeFilter) #filterModal .footer { border-top: 1px solid #424242 !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .poppins-black, body:has(#userResponseQuestionTypeFilter) #filterModal .poppins-mt, body:has(#userResponseQuestionTypeFilter) #filterModal .modal-header span, body:has(#userResponseQuestionTypeFilter) #filterModal label { color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .modal-header img { filter: brightness(0) invert(1) !important; opacity: 1 !important; } body:has(#userResponseQuestionTypeFilter) #filterModal select.w-100, body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--multiple, body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--single { background: #242424 !important; background-color: #242424 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23bfbfbf' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.85rem center !important; background-size: 10px 7px !important; border: 1px solid #424242 !important; color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--multiple .select2-selection__rendered, body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--multiple .select2-selection__placeholder, body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-search--inline .select2-search__field { color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #424242 !important; background-color: #424242 !important; border-color: #424242 !important; color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #bfbfbf !important; } /* Select2 dropdown is portaled to */ body:has(#userResponseQuestionTypeFilter) .select2-dropdown, body:has(#userResponseQuestionTypeFilter) .select2-container--default .select2-results__option { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border-color: #424242 !important; } body:has(#userResponseQuestionTypeFilter) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, body:has(#userResponseQuestionTypeFilter) .select2-container--default .select2-results__option--highlighted, body:has(#userResponseQuestionTypeFilter) .select2-container--default .select2-results__option[aria-selected=true] { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .base_input, body:has(#userResponseQuestionTypeFilter) #filterModal .filterModal-base_input, body:has(#userResponseQuestionTypeFilter) #filterModal input[type="text"] { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .base_input::placeholder, body:has(#userResponseQuestionTypeFilter) #filterModal .filterModal-base_input::placeholder, body:has(#userResponseQuestionTypeFilter) #filterModal input[type="text"]::placeholder { color: #bfbfbf !important; -webkit-text-fill-color: #bfbfbf !important; } body:has(#userResponseQuestionTypeFilter) #filterModal select.w-100 option { background: #242424 !important; color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) .select2-container--default .select2-search--dropdown .select2-search__field, body:has(#userResponseQuestionTypeFilter) .select2-search--dropdown .select2-search__field { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } /* Reset / Cancel are plain s (not pills). Black text from the shared filterModal-footer rules vanishes on the dark footer — keep them as white text links. Apply stays the white pill. */ body:has(#userResponseQuestionTypeFilter) #filterModal span.filterModal-footer__btn, body:has(#userResponseQuestionTypeFilter) #filterModal span.poppins-blue.filterModal-footer__btn { color: #ffffff !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; padding: 0 !important; } body:has(#userResponseQuestionTypeFilter) #filterModal span.filterModal-footer__btn:hover, body:has(#userResponseQuestionTypeFilter) #filterModal span.poppins-blue.filterModal-footer__btn:hover { color: #bfbfbf !important; background: transparent !important; background-color: transparent !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .filterModal-apply__btn, body:has(#userResponseQuestionTypeFilter) #filterModal button.filterModal-apply__btn { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; } body:has(#userResponseQuestionTypeFilter) #filterModal .filterModal-apply__btn:hover, body:has(#userResponseQuestionTypeFilter) #filterModal button.filterModal-apply__btn:hover { background: #bfbfbf !important; border-color: #bfbfbf !important; color: #000000 !important; } .btn.btn-pill { color: #000 !important; background: #ffffff !important; border-color: #ffffff !important; } .btn-pill:hover, .btn.btn-pill:hover, .btn.btn-brand.btn-pill:hover, .btn.btn-pill.btn-brand:hover, button.btn-brand:hover, .btn-brand:hover { background-color: #ffffff !important; border-color: #ffffff !important; color: #000 !important; } /* Attrition Report — Attrition Rate title */ .attrition-report-screen .poppins.poppins-sb--14.poppins-blue.title-fw { color: #000000 !important; } /* Attrition Report — description text */ .attrition-report-screen .kt-widget14__content p { color: #000000 !important; } /* Scroll FAB (#scroll-btn) — grey disc, white chevron. The ID outranks the .btn-brand class rules for both background and glyph, including on hover. Colour only: position, size and the scroll handler on #scroll-btn / #iconClassChange are untouched, and the script still swaps fa-angle-down / fa-angle-up as before. svg is covered alongside i because Font Awesome's SVG-with-JS mode replaces the with an on these pages. */ #scroll-btn { background-color: #424242 !important; border-color: #424242 !important; } #scroll-btn:hover { background-color: #666666 !important; border-color: #666666 !important; } #scroll-btn i, #scroll-btn:hover i, #scroll-btn svg, #scroll-btn svg path, #scroll-btn:hover svg, #scroll-btn:hover svg path { color: #ffffff !important; fill: #ffffff !important; } /* Search bar + Create button (same text/bg pattern as .btn.btn-pill) */ .search-container input[type="text"] { background: #242424 !important; border: 2px solid #424242 !important; color: #bfbfbf !important; border-radius: 999px !important; } .search-container input[type="text"].dark-mode { background-color: #242424 !important; border: 2px solid #424242 !important; border-radius: 999px !important; } .search-container input[type="text"]::placeholder { color: #888888 !important; } .search-container i.flaticon-search, .search-container i { color: #bfbfbf !important; } .action-container .create-item { color: #000 !important; background: #ffffff !important; border-color: #ffffff !important; } .action-container .create-item::before { color: #000 !important; } /* Manage survey/assessment create side menu Reset — match Create button on Slate Noir */ #mySidenav .sidenav--header .filter-container #reset { color: #000 !important; background: #ffffff !important; border-color: #ffffff !important; } #mySidenav .sidenav--header .filter-container #reset.clear::before { color: #000 !important; } /* Global Button text color for Slate Noir — override theme-components white-color gray text (#bfbfbf) on white button bg */ button, button:not(.btn-link):not(.close):not([class*="btn-outline"]), .btn, .btn.btn-primary, .btn-primary, .button-primary, .btn.btn-brand, .btn-brand, .btn.btn-secondary, .btn-secondary, .btn.btn-info, .btn-info, .btn.btn-pill, .btn-pill, .action-button, .download, .btn-download, .clear, .btn-clear, .btn-clear__filter, .clear-filter__btn, .filtered-clear-filter__btn, .filterModal-footer__btn, .filterModal-apply__btn, #downloadButton, #clearFilterButton, #clearFilter, #clearBtn, .tad-generate-btn, .tad-clear-btn { color: #000000 !important; } button span, button i, button:not(.btn-link):not(.close):not([class*="btn-outline"]) span, button:not(.btn-link):not(.close):not([class*="btn-outline"]) i, .btn span, .btn i, .btn.btn-primary span, .btn.btn-primary i, .btn-brand span, .btn-brand i, .btn-download span, .btn-download i, .clear span, .clear i, .btn-clear span, .btn-clear i, .btn-clear__filter span, .btn-clear__filter i, .btn-clear__filter-text, .clear-filter__btn span, .clear-filter__btn i, .clear-filter__btn-text, .filtered-clear-filter__btn span, .filtered-clear-filter__btn i, .filtered-clear-filter__btn-text, .filterModal-footer__btn span, .filterModal-footer__btn i, .filterModal-apply__btn span, .filterModal-apply__btn i { color: #ffffff ; } .filter-container button, .filter-container .clear, .filter-container .filter, .filter-container button.filter, .filter-container button.clear, .filter-container button.dark-mode-row-text, .filter-container button.dark-mode-bg-transparent, .filter-container button.dark-mode-white-border, .clear, .clear-filter__btn, .btn-clear__filter { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border: 2px solid #ffffff !important; } .filter-container button.btn-pill, .filter-container .filter.btn-pill, .filter-container .clear.btn-pill, .filter-container .download.btn-pill, .filter-container .create.btn-pill { border-radius: 999px !important; border-color: #ffffff !important; box-shadow: none !important; outline: none !important; } .filter-container .clear::before, .filter-container .filter::before, .filter-container .download::before, .filter-container button.dark-mode-row-text::before, .filter-container button.filter::before { color: #000000 !important; } .action-container .create-item:hover, .action-container button:hover, .filter-container button:hover { background-color: #ffffff !important; color: #000 !important; box-shadow: none !important; } /* AmCharts export menu: black text on white panels; restore hover (our !important was blocking it) */ .dark-mode-text .amcharts-export-menu, .dark-mode-text .amcharts-export-menu a, .dark-mode-text .amcharts-export-menu span, .dark-mode-text .amcharts-export-menu li, .dark-mode-text .amExportButton, .dark-mode-text .amExportButton a, .dark-mode-text .amExportButton span { color: #000 !important; } .dark-mode-text .amcharts-export-menu li:hover>a, .dark-mode-text .amcharts-export-menu li:hover>span, .dark-mode-text .amcharts-export-menu li.active>a, .dark-mode-text .amcharts-export-menu li:hover>a span, .dark-mode-text .amExportButton li:hover>a, .dark-mode-text .amExportButton li:hover>span, .dark-mode-text .amExportButton li.active>a { color: #fff !important; background-color: #636363 !important; } .dark-mode-text { color: #bfbfbf !important; } /* Learning Analytics compact card numbers (Slate Noir only) */ .compact-card-value-right, .compact-card-value-right span { color: #ffffff !important; } /* Learning Analytics card icons — force white (Slate Noir only) */ .compact-card-icon, .compact-card-icon i, .compact-card-icon svg, .analytics-card-icon, .analytics-card-icon i, .analytics-card-icon svg { color: #ffffff !important; fill: #ffffff !important; } /* Grid rows with .dark-mode: override chromium.main.css #666 cell text (Slate Noir only) */ .grid-container .grid-head.dark-mode, .grid-container .grid-head.dark-mode th, .grid-container .grid-head.dark-mode-row-bg, .grid-container .grid-head.dark-mode-row-bg th { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; border-color: #424242 !important; } .grid-container .grid-row.dark-mode, .grid-container .grid-row.dark-mode td, .grid-container .grid-row.dark-mode th, .grid-container .grid-row.dark-mode td span, .grid-container .grid-row.dark-mode td a, .grid-container .grid-row.dark-mode td p, .grid-container .grid-row.dark-mode td small, .grid-container .grid-row.dark-mode td b, .grid-container .grid-row.dark-mode td strong { background: #242424 !important; background-color: #242424 !important; color: #bfbfbf !important; border-color: #424242 !important; box-shadow: none !important; } /* Options menus stay white + black text (do not inherit dark row link styles) */ .grid-container .grid-row.dark-mode td .dropdown-menu, .grid-container .grid-row.dark-mode td .dropdown-menu.show { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15) !important; } .grid-container .grid-row.dark-mode td .dropdown-menu a, .grid-container .grid-row.dark-mode td .dropdown-menu span, .grid-container .grid-row.dark-mode td .dropdown-menu i, .grid-container .grid-row.dark-mode td .dropdown-menu p, .grid-container .grid-row.dark-mode td .dropdown-menu .dropdown-item, .grid-container .grid-row.dark-mode td .dropdown-menu .dropdown-item i, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__link, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__head { background: transparent !important; background-color: transparent !important; color: #000000 !important; border: none !important; box-shadow: none !important; } .grid-container .grid-row.dark-mode td .dropdown-menu .dropdown-item:hover, .grid-container .grid-row.dark-mode td .dropdown-menu .dropdown-item:focus, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover { background: #bfbfbf !important; background-color: #bfbfbf !important; color: #000000 !important; } .grid-container .grid-row.dark-mode td .dropdown-menu .dropdown-item:hover i, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link i, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover>.kt-nav__link span { background: transparent !important; background-color: transparent !important; color: #000000 !important; } /* Sticky "..." action column — chromium hardcodes white / var(--color) */ .grid-container .grid-head .fixed-col, .grid-container .grid-row.dark-mode td.fixed-col, .grid-container .grid-row .fixed-col { background-color: #242424 !important; background: #242424 !important; } .grid-container .grid-row .fixed-col { z-index: 2; } .grid-container .grid-head .fixed-col { z-index: 3; } .grid-container .grid-row:has(.dropdown.show) .fixed-col, .grid-container .grid-row .fixed-col:has(.dropdown.show) { z-index: 50 !important; } .grid-container .grid-row .fixed-col .dropdown-menu.show { z-index: 51 !important; } .grid-container .grid-row.dark-mode td.fixed-col .btn-clean, .grid-container .grid-row .fixed-col .btn-clean { background-color: transparent !important; background: transparent !important; } .grid-container .grid-row.dark-mode td.fixed-col .flaticon-more-1, .grid-container .grid-row .fixed-col .flaticon-more-1 { color: #bfbfbf !important; } /* Options dropdown: --color is white, so link text vanishes on light pills */ .dropdown-menu .kt-nav__link-text, .dropdown-menu .kt-nav__link-icon, .dropdown-action .kt-nav__link-text, .dropdown-action .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-action .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-action .kt-nav__link-icon { color: #000 !important; } .dropdown-menu .kt-nav__link, .dropdown-menu .kt-nav__link-text, .dropdown-menu .dropdown-item, .dropdown-menu a.dropdown-item, .dropdown-action .kt-nav__link, .dropdown-action .dropdown-item { text-decoration: none !important; } .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .dropdown-action .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .dropdown-action .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav__item:hover .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-action .kt-nav__item:hover .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-action .kt-nav__item:hover .kt-nav__link-icon { /* Light hover pills (#bfbfbf / shade) — keep black text (was #fff / invisible) */ color: #000 !important; } .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link i, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link span, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link .dark-mode-light-text { color: #ffffff !important; } /* Also cover bare / (e.g. Assign Questions without .kt-nav__link-text) */ .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .dropdown-menu .kt-nav__item:hover>.kt-nav__link span, .dropdown-menu .kt-nav__item:hover>.kt-nav__link i, .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover, .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover span, .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover i, .cr-row .kt-nav__item:hover>a.kt-nav__link, .cr-row .kt-nav__item:hover>a.kt-nav__link:hover, .cr-row .kt-nav__item:hover>a.kt-nav__link span, .cr-row .kt-nav__item:hover>a.kt-nav__link i, .cr-row .kt-nav__item:hover>a.kt-nav__link .kt-nav__link-text, .cr-row .kt-nav__item:hover>a.kt-nav__link .kt-nav__link-icon, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link span, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link i, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon { color: #000000 !important; } .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link span, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link i, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover span, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>a.kt-nav__link:hover i { color: #ffffff !important; } .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .configure-lp-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover, .cr-row .kt-nav__item:hover>a.kt-nav__link:hover { background: #bfbfbf !important; background-color: #bfbfbf !important; } /* Dark row action menus (Edit/Deactivate) — white icons/text on #242424 */ .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-text, .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-icon, .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link i, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link i, .manage-lp-categories-screen .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-text, .manage-lp-categories-screen .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link-icon, .manage-lp-categories-screen .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__link i { color: #000000 !important; } .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover .kt-nav__link-text, .grid-container .grid-row.dark-mode td .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover .kt-nav__link-icon { color: #ffffff !important; } /* Beat theme-components var(--white-color) hover on light Options pills */ .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-icon, .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-text, .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover { color: #000000 !important; } .lp-card-dropdown .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-icon, .lp-card-dropdown .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-text, .lp-card-dropdown .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link i, .lp-card-dropdown .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .dark-mode-light-text, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover span, .lp-card-dropdown .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover i { color: #ffffff !important; } .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-icon, .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub)>.kt-nav__link .kt-nav__link-text, .dropdown-menu .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link:hover { color: #ffffff !important; } /* LP card Options only — scoped so Certificates/Tag Groups/etc. are untouched */ .lp-card-dropdown .dropdown-menu:has(.kt-nav.dark-mode-row-bg), .lp-card-dropdown .dropdown-menu, .lp-card-dropdown .kt-nav.dark-mode-row-bg { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; } .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-bg-white, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-dark-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item>.kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item>div.kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item>a.kt-nav__link { background: #424242 !important; background-color: #424242 !important; color: #ffffff !important; border: none !important; } .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link i, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-bg-white .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-bg-white .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-bg-white i, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-dark-text .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-dark-text .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__link.dark-mode-dark-text i { color: #ffffff !important; background: transparent !important; } .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>div.kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>a.kt-nav__link, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-bg-white, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-dark-text { background: #bfbfbf !important; background-color: #bfbfbf !important; color: #000000 !important; } .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link i, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-bg-white .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-bg-white .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-bg-white i, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-dark-text .kt-nav__link-text, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-dark-text .kt-nav__link-icon, .lp-card-dropdown .kt-nav.dark-mode-row-bg .kt-nav__item:hover>.kt-nav__link.dark-mode-dark-text i { color: #000000 !important; background: transparent !important; } .manage-lp-categories-screen .dropdown-menu:has(.kt-nav.dark-mode-row-bg), .manage-lp-categories-screen .dropdown-menu { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; } /* Certificates + Tag Groups Options — same as Manage Users (scoped; uses dropdown-item dark-mode-text-color) */ .manage-certificates-screen .dropdown-menu, .manage-tag-groups-screen .dropdown-menu { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; } .manage-certificates-screen .dropdown-menu .dropdown-item, .manage-certificates-screen .dropdown-menu .dropdown-item i, .manage-certificates-screen .dropdown-menu .dropdown-item.dark-mode-text-color, .manage-tag-groups-screen .dropdown-menu .dropdown-item, .manage-tag-groups-screen .dropdown-menu .dropdown-item i, .manage-tag-groups-screen .dropdown-menu .dropdown-item.dark-mode-text-color { color: #000000 !important; background-color: transparent !important; } .manage-certificates-screen .dropdown-menu .dropdown-item:hover, .manage-certificates-screen .dropdown-menu .dropdown-item:focus, .manage-certificates-screen .dropdown-menu .dropdown-item:hover i, .manage-certificates-screen .dropdown-menu .dropdown-item:focus i, .manage-tag-groups-screen .dropdown-menu .dropdown-item:hover, .manage-tag-groups-screen .dropdown-menu .dropdown-item:focus, .manage-tag-groups-screen .dropdown-menu .dropdown-item:hover i, .manage-tag-groups-screen .dropdown-menu .dropdown-item:focus i { color: #000000 !important; background-color: #bfbfbf !important; } /* PDL / generic dropdown items: inherited light text vanishes on white menus */ .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-item.dropdown-item__color { color: #000 !important; background-color: transparent !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active { color: #000 !important; background-color: #bfbfbf !important; } /* Question Bank actions — light menu with readable black text */ .questionbank-manage-screen .dropdown-menu .kt-nav__link, .questionbank-manage-screen .dropdown-menu .kt-nav__link-text, .questionbank-manage-screen .dropdown-menu .kt-nav__link-icon, .questionbank-manage-screen .dropdown-menu .kt-nav__link i { color: #000000 !important; } .questionbank-manage-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link, .questionbank-manage-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link:hover { background: #bfbfbf !important; background-color: #bfbfbf !important; color: #000000 !important; } .questionbank-manage-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link span, .questionbank-manage-screen .dropdown-menu .kt-nav__item:hover>.kt-nav__link i { color: #000000 !important; } /* The Question Bank card's three-dot trigger deliberately carries no theme override of its own, so that it stays governed by exactly the same shared rules as the Manage Learning Paths trigger and the two cannot drift apart. Both blades render the same control — btn.btn-clean with .dark-mode-bg-transparent, .dark-mode-border-radius-50 and — so with no page-scoped rule here they compute identically: a transparent circle with the 1px #ffffff ring, 33x33, and the glyph at #000000 from this theme's global `button i` rule. Verified by measuring both buttons side by side: the only property that differed was background-color, and that was a page-scoped white fill that has since been removed. Any future change to the three-dot appearance therefore belongs on the shared utility classes, not here. */ /* Fields column picker: match grid row (#242424) + white labels (Slate Noir only) */ #fieldsDropdownMenu.dropdown-menu, #fieldsDropdownMenu.dropdown-menu.show { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border: 1px solid #424242 !important; } #fieldsDropdownMenu .kt-checkbox, #fieldsDropdownMenu .kt-checkbox-list, #fieldsDropdownMenu label, #fieldsDropdownMenu label.kt-checkbox, #fieldsDropdownMenu p, #fieldsDropdownMenu .kt-font-bold { color: #ffffff !important; } #fieldsDropdownMenu .kt-checkbox>span { border-color: #ffffff !important; background: transparent !important; } #fieldsDropdownMenu .kt-checkbox>input:checked~span { background: transparent !important; border-color: #ffffff !important; } #fieldsDropdownMenu .kt-checkbox>input:checked~span:after { border-color: #ffffff !important; } #fieldsDropdownMenu .dropdown-divider { border-top-color: #424242 !important; } /* Modals (e.g. New Category): poppins-blue uses --color (#fff) → invisible on white */ .modal .modal-header { border-bottom-color: #e0e0e0 !important; } .modal .modal-header .poppins-blue, .modal .modal-header h4, .modal .modal-title { color: #000 !important; } .modal .modal-body label, .modal .modal-body .sidenav-form--input-container__label, .modal .modal-body p, .modal .modal-body h3, .modal .modal-body h4 { color: #000 !important; } .modal .modal-body .form-control { color: #000 !important; background-color: #fff !important; border-color: #d0d0d0 !important; } .modal .modal-footer .btn.btn-pill, .modal .modal-footer .btn.btn-brand.btn-pill, .modal .modal-footer .btn.btn-secondary.btn-pill { color: #000 !important; background: #ffffff !important; border-color: #ffffff !important; } .modal .modal-footer .btn.btn-pill:hover, .modal .modal-footer .btn.btn-brand.btn-pill:hover, .modal .modal-footer .btn.btn-secondary.btn-pill:hover { background-color: #bfbfbf !important; color: #000 !important; box-shadow: none !important; } /* Dark-mode modals (e.g. nomination Info) — readable on Slate Noir; only when .dark-mode is present */ .modal-content.dark-mode { background-color: #242424 !important; color: #bfbfbf !important; border-color: #424242 !important; } .modal-content.dark-mode .modal-header, .modal-content.dark-mode .modal-header .modal-title, .modal-content.dark-mode .modal-header h5, .modal-content.dark-mode .modal-title, .modal-content.dark-mode .modal-body, .modal-content.dark-mode .modal-body div, .modal-content.dark-mode .modal-body span, .modal-content.dark-mode .modal-body strong, .modal-content.dark-mode .modal-body li, .modal-content.dark-mode .modal-body h1, .modal-content.dark-mode .modal-body h3, .modal-content.dark-mode .modal-body h4, .modal-content.dark-mode .modal-body h5, .modal-content.dark-mode .modal-body p, .modal-content.dark-mode .modal-body--inner h1, .modal-content.dark-mode .modal-body--inner h3, .modal-content.dark-mode .kt-portlet-head__title, .modal-content.dark-mode .poppins-black, .modal-content.dark-mode .dark-mode-light-text, .modal-content.dark-mode .kt-font-dark { color: #ffffff !important; } .modal-content.dark-mode .base-timer--percentage, .modal-content.dark-mode .base-timer--completed { color: #ffffff !important; } .modal .modal-content.dark-mode .modal-header { border-bottom-color: #424242 !important; } .modal .modal-content.dark-mode .modal-footer { border-top-color: #424242 !important; } /* White badge counters — keep digits black (beat modal span #fff) */ .modal-content.dark-mode .modal-body .top-count, .modal-content.dark-mode .modal-body span.top-count, [id^="lpCardModal"] .modal-body .top-count, [id^="lpCardModal"] .modal-body span.top-count { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border: 0.5px solid #cccccc !important; } .modal-content.dark-mode .modal-footer .cancel { color: #bfbfbf !important; } .modal-content.dark-mode .modal-footer .confirm { color: #ffffff !important; } .modal-content.dark-mode #lp-taining-obj-info.dark-mode { background: #424242 !important; } /* Manage LP Info modal (inside .card-lp — inherits light text on white panel) */ [id^="lpCardModal_"] .modal-content, .modal[id^="lpCardModal_"] .modal-content { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border: 1px solid #424242 !important; } [id^="lpCardModal_"] .modal-header, [id^="lpCardModal_"] .modal-body, [id^="lpCardModal_"] .modal-footer, [id^="lpCardModal_"] .modal-body div, [id^="lpCardModal_"] .modal-body span, [id^="lpCardModal_"] .modal-body strong, [id^="lpCardModal_"] .modal-body li, [id^="lpCardModal_"] .modal-body a, [id^="lpCardModal_"] .poppins-black, [id^="lpCardModal_"] .ct-modal-body { color: #ffffff !important; background: transparent !important; border-color: #424242 !important; } [id^="lpCardModal_"] #lp-taining-obj-info { background: #424242 !important; color: #ffffff !important; } [id^="lpCardModal_"] .btn.btn-secondary.btn-pill, [id^="lpCardModal_"] .btn.btn-elevate.btn-pill { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border: 2px solid #ffffff !important; } [id^="lpCardModal_"] .modal-body button.training-object-count, [id^="lpCardModal_"] button.training-object-count:not(.btn-link):not(.close) { color: #ffffff !important; background: #424242 !important; background-color: #424242 !important; border: none !important; } [id^="lpCardModal_"] .modal-body button.training-object-count:hover, [id^="lpCardModal_"] button.training-object-count:not(.btn-link):not(.close):hover { background: #bfbfbf !important; background-color: #bfbfbf !important; color: #000000 !important; } /* Info modal uses data-backdrop="false" + .lp-card-info-overlay. Match Language modal / Training Calendar Info: black @ 55%. */ [id^="lpCardInfoOverlay_"].lp-card-info-overlay.active { background: rgba(0, 0, 0, 0.55) !important; } /* User Face Upload Report — View Face Image modal (unique #faceImageModal; no .dark-mode) */ #faceImageModal .modal-content, #faceImageModal .modal-content.modal-content__border { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border: 1px solid #424242 !important; } #faceImageModal .modal-header, #faceImageModal .modal-header.modal-header__border, #faceImageModal .modal-body { background: #242424 !important; background-color: #242424 !important; color: #ffffff !important; border-color: #424242 !important; } #faceImageModal .modal-header .poppins-blue, #faceImageModal .modal-header span, #faceImageModal .modal-body .text-muted { color: #ffffff !important; } #faceImageModal .modal-header .la-remove, #faceImageModal .modal-header i.la-remove { color: #ffffff !important; } /* Dark-mode filter modals — inputs/selects match panel (#242424), not #000 */ .modal .modal-content.dark-mode .modal-header, .modal .modal-content.dark-mode .modal-body, .modal .modal-content.dark-mode .modal-footer { background-color: #242424 !important; border-color: #424242 !important; } .modal .modal-content.dark-mode .modal-header .modal-title, .modal .modal-content.dark-mode .modal-header h5, .modal .modal-content.dark-mode .modal-title, #lpCoverImage .modal-content.dark-mode .modal-title { color: #ffffff !important; } .modal .modal-content.dark-mode .modal-header img { filter: invert(1); } .modal .modal-content.dark-mode input, .modal .modal-content.dark-mode select, .modal .modal-content.dark-mode textarea, .modal .modal-content.dark-mode input.dark-mode, .modal .modal-content.dark-mode select.dark-mode, .modal .modal-content.dark-mode .base_input, .modal .modal-content.dark-mode .kt-datepicker, .modal .modal-content.dark-mode .form-control, .modal .modal-content.dark-mode .modal-body .form-control { background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } .modal .modal-content.dark-mode input::placeholder, .modal .modal-content.dark-mode .base_input::placeholder { color: #888888 !important; } .modal .modal-content.dark-mode select option { background-color: #242424 !important; color: #ffffff !important; } .modal .modal-content.dark-mode .sidenav-form--input p, .modal .modal-content.dark-mode .poppins-blue, .modal .modal-content.dark-mode .modal-header .poppins-blue, .modal .modal-content.dark-mode .modal-body label, .modal .modal-content.dark-mode .modal-body p { color: #ffffff !important; } .modal .modal-content.dark-mode .btn.btn-pill, .modal .modal-content.dark-mode .filterModal-apply__btn, .modal .modal-content.dark-mode .filterModal-footer__btn.btn, .modal .modal-content.dark-mode .modal-footer .btn.btn-pill { color: #000000 !important; background: #ffffff !important; border-color: #ffffff !important; } .modal .modal-content.dark-mode .modal-header .flaticon2-delete, .modal .modal-content.dark-mode .modal-header [data-dismiss="modal"].flaticon2-delete { color: #ffffff !important; cursor: pointer; } .modal .modal-content.dark-mode .action-button.btn-pill.dark-mode-bg-white, .modal .modal-content.dark-mode .action-button.btn-pill.dark-mode-bg-white.dark-mode-dark-text { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; } .modal .modal-content.dark-mode .action-button.btn-pill.dark-mode-bg-white:hover { color: #000000 !important; background: #bfbfbf !important; background-color: #bfbfbf !important; border-color: #bfbfbf !important; } .modal .modal-content.dark-mode .btn.btn-pill.dark-mode-light-text { color: #ffffff !important; background: transparent !important; background-color: transparent !important; border-color: #424242 !important; } /* ── Dashboard section containers — ROOT ────────────────────────────────────── widget8 wraps every dashboard section in `.kt-portlet … dark-mode-bg` and repeats the class on the portlet head and body, so this one declaration is the background of essentially the whole dashboard. Painting it #000 made it identical to the page, so every section dissolved into the background with no card edge — the reason the sections looked absent rather than merely dim. The class is declared in six blades, all dashboard widgets, so fixing it here is inherently scoped to the dashboard. #242424 is this theme's card surface, used for panels and grids throughout. */ .dark-mode-bg { background-color: #242424 !important; } /* Give the outer section card a visible edge instead of Metronic's pale purple shadow, which reads as a halo on a dark page. */ .kt-portlet.dark-mode-bg { border: 1px solid #424242 !important; box-shadow: none !important; } /* Home banner — opt this one section out of the card treatment above. The banner is the only widget8 section whose content is a full-bleed image rather than text on a surface: it is passed no title, so widget8 renders it in a `padding: unset` body, and the slide has its own 16px radius. The #242424 card and #424242 edge therefore had nothing to contain and just showed as a grey frame around the artwork. :has() pins this to the portlet that actually wraps the banner, so the remaining dashboard sections keep their cards. Matching on the controller attribute rather than on .home-banner-widget-root means it also holds when no banner is live (that root is behind ng-if / an SSR guard), which avoids leaving an empty grey strip in its place. Colour only — no geometry. The portlet keeps its box, radius and margins, so the image, its size and position, the View button and the carousel are all untouched; the container simply stops painting itself. */ .kt-portlet.dark-mode-bg:has([ng-controller^="HomeBannerController"]) { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Widgets that render their own nested portlet inside widget8 (Disk Space, Training Timeline) kept Metronic's white surface while the theme put white headings on top of it. Flatten them into the section card. */ .dark-mode-bg .kt-portlet { background: #242424 !important; background-color: #242424 !important; border: none !important; box-shadow: none !important; } /* Hall of Fame — Top Performers (dark-mode class only defined in Slate Noir) */ .hof-utp-wrap.dark-mode { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; } .hof-utp-wrap.dark-mode .hof-utp-title, .hof-utp-wrap.dark-mode .hof-utp-name, .hof-utp-wrap.dark-mode .hof-utp-row-name { color: #ffffff !important; } .hof-utp-wrap.dark-mode .hof-utp-sub, .hof-utp-wrap.dark-mode .hof-utp-list-title, .hof-utp-wrap.dark-mode .hof-utp-loading, .hof-utp-wrap.dark-mode .hof-utp-row-points, .hof-utp-wrap.dark-mode .hof-utp-row-points a { color: #bfbfbf !important; } .hof-utp-wrap.dark-mode .hof-utp-row-card { background: #000000 !important; border-color: #424242 !important; } .hof-utp-wrap.dark-mode .hof-utp-rank-circle { background: #424242 !important; color: #ffffff !important; } .hof-utp-wrap.dark-mode .hof-utp-dept-pill { background: #424242 !important; border-color: #424242 !important; color: #bfbfbf !important; } .hof-utp-wrap.dark-mode .hof-utp-badge-pill, .hof-utp-wrap.dark-mode .hof-utp-badge-pill a { border-color: #ffffff !important; color: #ffffff !important; } .hof-utp-wrap.dark-mode .hof-utp-cta { background: #ffffff !important; color: #000000 !important; } .hof-utp-wrap.dark-mode .hof-utp-cta:hover { background: #bfbfbf !important; color: #000000 !important; } .hof-utp-wrap.dark-mode .hof-utp-rank-wrap, .hof-utp-wrap.dark-mode .hof-utp-row-points { border-color: #424242 !important; } /* Hall of Fame / Leader Board rows (only when .dark-mode is on the card) */ .hof-row-card.dark-mode { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; color: #bfbfbf !important; } /* Kill white table-row chrome under hof cards (chromium .grid-row is white) */ .hall-of-fame-screen .grid-container .grid-row.dark-mode, .hall-of-fame-screen .grid-container .grid-row.dark-mode td, .grid-container .grid-row.dark-mode:has(.hof-row-card) { background: transparent !important; background-color: transparent !important; height: auto !important; box-shadow: none !important; border: none !important; } .hof-row-card.dark-mode .hof-name, .hof-row-card.dark-mode .hof-name.dark-mode-light-text, .hof-row-card.dark-mode .hof-points, .hof-row-card.dark-mode .hof-points.dark-mode-light-text, .hof-row-card.dark-mode .hof-points a { color: #ffffff !important; } .hof-row-card.dark-mode .hof-rank-wrap, .hof-row-card.dark-mode .hof-points { border-color: #424242 !important; } .hof-row-card.dark-mode .hof-rank-circle { background: #424242 !important; color: #ffffff !important; } .hof-row-card.dark-mode .hof-badge-pill, .hof-row-card.dark-mode .hof-badge-pill a { border-color: #bfbfbf !important; color: #bfbfbf !important; } .hof-row-card.dark-mode .hof-meta-pill { background: #424242 !important; border-color: #424242 !important; color: #bfbfbf !important; } /* Hall of Fame filter sidenav — dark when .dark-mode present */ .sidenav.dark-mode, .sidenav.dark-mode .sidenav--body, .sidenav.dark-mode .sidenav--body .sidenav--body-content, .sidenav.dark-mode .sidenav--body-content_container.dark-mode { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; } .sidenav.dark-mode .sidenav--header.dark-mode, .sidenav.dark-mode .sidenav--header { background: #242424 !important; background-color: #242424 !important; } .sidenav.dark-mode .sidenav--header p, .sidenav.dark-mode .sidenav--header .dark-mode-light-text, .sidenav.dark-mode .sidenav--body-content_container h1, .sidenav.dark-mode .sidenav--body-content_container .dark-mode-light-text, .sidenav.dark-mode .sidenav-form--input p, .sidenav.dark-mode .kt-checkbox.dark-mode-light-text { color: #ffffff !important; } .sidenav.dark-mode .sidenav--header p img { filter: invert(1); } .sidenav.dark-mode input.dark-mode, .sidenav.dark-mode .form-control.dark-mode, .sidenav.dark-mode input.kt-datepicker.dark-mode, .sidenav.dark-mode input, .sidenav.dark-mode select, .sidenav.dark-mode textarea, .sidenav.dark-mode .form-control, .sidenav.dark-mode .base_input, .sidenav.dark-mode .kt-datepicker, .sidenav.dark-mode #startdate, .sidenav.dark-mode #enddate { background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } .sidenav.dark-mode input::placeholder, .sidenav.dark-mode .base_input::placeholder { color: #888888 !important; } .sidenav.dark-mode select option { background-color: #242424 !important; color: #ffffff !important; } .sidenav.dark-mode .sidenav--body-content_container, .sidenav.dark-mode .sidenav--body-content_container h1, .sidenav.dark-mode label, .sidenav.dark-mode .poppins-black { color: #ffffff !important; } .sidenav.dark-mode .sidenav--body-content_container { background: #242424 !important; border-color: #424242 !important; } .sidenav.dark-mode button:not(.btn-pill), .sidenav.dark-mode .sidenav-form--input>button { color: #000000 !important; background: #ffffff !important; border-color: #ffffff !important; } /* White checkbox border + tick (override brand blue) */ .sidenav.dark-mode .kt-checkbox>span { border-color: #ffffff !important; background-color: transparent !important; } .sidenav.dark-mode .kt-checkbox>input:checked~span, .sidenav.dark-mode .kt-checkbox.kt-checkbox--brand>input:checked~span, .sidenav.dark-mode .kt-checkbox.kt-checkbox--brand.kt-checkbox--bold>input:checked~span { border-color: #ffffff !important; background-color: transparent !important; } .sidenav.dark-mode .kt-checkbox>input:checked~span:after, .sidenav.dark-mode .kt-checkbox.kt-checkbox--brand>input:checked~span:after, .sidenav.dark-mode .kt-checkbox.kt-checkbox--brand.kt-checkbox--bold>input:checked~span:after { border-color: #ffffff !important; } .sidenav.dark-mode .btn.btn-pill, .sidenav.dark-mode .btn.btn-brand.btn-pill { color: #000000 !important; background: #ffffff !important; border-color: #ffffff !important; } /* Digital Library / Competition Outselling create & move sidenavs */ .sidenav.dark-mode .dropzone, .sidenav.dark-mode .dropzone-default, .modal-content.dark-mode .dropzone, .modal-content.dark-mode .dropzone-default { background: #242424 !important; border: 1px dashed #424242 !important; box-shadow: none !important; } /* Dropzone / cover-image previews — no white thumbnail chrome */ .sidenav.dark-mode .dropzone .dz-preview, .sidenav.dark-mode .dropzone .dz-preview.dz-image-preview, .sidenav.dark-mode .dropzone .dz-preview .dz-image, .sidenav.dark-mode .dropzone .dz-preview .dz-details, .modal-content.dark-mode .dropzone .dz-preview, .modal-content.dark-mode .dropzone .dz-preview.dz-image-preview, .modal-content.dark-mode .dropzone .dz-preview .dz-image, .modal-content.dark-mode .dropzone .dz-preview .dz-details, .sidenav.dark-mode #image-container, .modal-content.dark-mode #image-container, .sidenav.dark-mode .image-upload-container, .modal-content.dark-mode .image-upload-container { background: #242424 !important; background-color: #242424 !important; } .sidenav.dark-mode .dropzone .dz-preview.dz-file-preview .dz-image, .modal-content.dark-mode .dropzone .dz-preview.dz-file-preview .dz-image { background: #424242 !important; background-color: #424242 !important; background-image: none !important; } .sidenav.dark-mode .dropzone .dz-preview .dz-image img, .modal-content.dark-mode .dropzone .dz-preview .dz-image img, .sidenav.dark-mode .picker-image, .modal-content.dark-mode .picker-image { background: #424242 !important; border-radius: 8px !important; } .sidenav.dark-mode .dropzone .dz-preview .dz-details, .modal-content.dark-mode .dropzone .dz-preview .dz-details { color: #ffffff !important; } .sidenav.dark-mode .dropzone .dz-preview .dz-filename span, .sidenav.dark-mode .dropzone .dz-preview .dz-size span, .sidenav.dark-mode .dropzone .dz-preview .dz-remove, .modal-content.dark-mode .dropzone .dz-preview .dz-filename span, .modal-content.dark-mode .dropzone .dz-preview .dz-size span, .modal-content.dark-mode .dropzone .dz-preview .dz-remove, .sidenav.dark-mode #image-container a, .modal-content.dark-mode #image-container a { color: #ffffff !important; background-color: transparent !important; border-color: transparent !important; } .sidenav.dark-mode .dropzone-msg-title, .sidenav.dark-mode .dropzone .fa-upload, .sidenav.dark-mode .upload-container h1, .sidenav.dark-mode .upload-container ul, .sidenav.dark-mode .upload-container ul li, .sidenav.dark-mode .sidenav--body-content_container ul, .sidenav.dark-mode .sidenav--body-content_container ul li, .modal-content.dark-mode .dropzone-msg-title, .modal-content.dark-mode .dropzone .fa-upload, .modal-content.dark-mode .image-upload-container h4, .modal-content.dark-mode .image-upload-container p { color: #ffffff !important; } /* Digital Library delete PDL content modal */ #deleteContentModal .modal-content.dark-mode { background-color: #242424 !important; border-color: #424242 !important; } #deleteContentModal .modal-content.dark-mode .modal-header, #deleteContentModal .modal-content.dark-mode .modal-footer, #deleteContentModal .modal-content.dark-mode .dark-mode-light-text, #deleteContentModal .modal-content.dark-mode .poppins { color: #ffffff !important; background-color: #242424 !important; border-color: #424242 !important; } #deleteContentModal .modal-content.dark-mode .btn.btn-secondary.btn-pill, #deleteContentModal .modal-content.dark-mode .btn.btn-pill:not(.btn-danger) { color: #000000 !important; background: #ffffff !important; border-color: #ffffff !important; border-radius: 20px !important; } #deleteContentModal .modal-content.dark-mode .btn.btn-danger.btn-pill { border-radius: 20px !important; } #deleteContentModal .modal-content.dark-mode .btn.btn-secondary.btn-pill:hover { background: #bfbfbf !important; border-color: #bfbfbf !important; color: #000000 !important; } /* Info (?) help icons — black glyph on white circle (all Slate Noir modules) */ .info-tooltip, span.info-tooltip, .sidenav .info-tooltip, .sidenav.dark-mode .info-tooltip, .modal-content.dark-mode .info-tooltip, .modal-content.dark-mode .info-tooltip i, .create-box .info-tooltip, .banners-form .info-tooltip { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; } /* Tag icons reuse .info-tooltip — keep light glyph, no white pill */ .flaticon2-tag.info-tooltip, i.flaticon2-tag.info-tooltip.i_icons { color: #ffffff !important; background: transparent !important; background-color: transparent !important; border-color: transparent !important; } .sidenav.dark-mode h3, .sidenav.dark-mode h4, .sidenav.dark-mode .moveToCategoryName__heading { color: #ffffff !important; } .sidenav.dark-mode .kt-font-danger { color: #f37676 !important; } .sidenav.dark-mode .rootActive-library, .sidenav.dark-mode .rootActive-library__icon, .sidenav.dark-mode .jstree-default .jstree-anchor, .sidenav.dark-mode .jstree-default .jstree-icon { color: #ffffff !important; } .sidenav.dark-mode .rootActive, .sidenav.dark-mode .jstree-default .jstree-clicked { background: #000000 !important; color: #ffffff !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Move-content category tree — dark portlet (not white) */ .sidenav.dark-mode .kt-portlet, .sidenav.dark-mode .kt-portlet .kt-portlet__head, .sidenav.dark-mode .kt-portlet .kt-portlet__body { background: #242424 !important; background-color: #242424 !important; border-color: #424242 !important; box-shadow: none !important; color: #ffffff !important; } .sidenav.dark-mode .kt-portlet .kt-portlet__head-title, .sidenav.dark-mode .kt-portlet .kt-portlet__body, .sidenav.dark-mode #rootAside, .sidenav.dark-mode #rootAside i, .sidenav.dark-mode #kt_tree_move_content, .sidenav.dark-mode #kt_tree_move_content .jstree-anchor, .sidenav.dark-mode #kt_tree_move_content .jstree-icon { color: #ffffff !important; } .sidenav.dark-mode #kt_tree_move_content .jstree-hovered { background: #333333 !important; box-shadow: none !important; } .sidenav.dark-mode #kt_tree_move_content .jstree-clicked { background: #000000 !important; color: #ffffff !important; } .sidenav.dark-mode .kt-switch input:empty~span:before, .sidenav.dark-mode .kt-switch input:checked~span:before { background-color: #424242 !important; background: #424242 !important; border-color: #424242 !important; } .sidenav.dark-mode .kt-switch input:empty~span:after { background-color: #bfbfbf !important; background: #bfbfbf !important; color: transparent !important; content: "" !important; font-size: 0 !important; opacity: 1 !important; } .sidenav.dark-mode .kt-switch input:checked~span:before { background-color: #ffffff !important; background: #ffffff !important; } .sidenav.dark-mode .kt-switch input:checked~span:after { background-color: #000000 !important; background: #000000 !important; color: transparent !important; content: "" !important; font-size: 0 !important; opacity: 1 !important; } .sidenav.dark-mode .kt-switch input:checked~span { background-color: #ffffff !important; } #viewModal .modal-content.dark-mode .btn.btn-elevate, #viewModal .btn.btn-brand.btn-elevate { box-shadow: none !important; -webkit-box-shadow: none !important; } /* Leaderboard scope select (All dropdown) */ #hof-leaderboard-scope.dark-mode { background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } #hof-leaderboard-scope.dark-mode option { background-color: #242424 !important; color: #ffffff !important; } .hall-of-fame-screen .action-container.dark-mode, .hall-of-fame-screen .filter-container.dark-mode { background: transparent !important; border: none !important; } /* Hall of Fame — badges / points headers & cards */ .alert.alert-info.dark-mode { background-color: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } .alert.alert-info.dark-mode .alert-text, .alert.alert-info.dark-mode .alert-text-ow { color: #ffffff !important; } .kt-portlet.kt-iconbox.dark-mode { background-color: #242424 !important; background: #242424 !important; border: 1px solid #424242 !important; box-shadow: none !important; } .kt-portlet.kt-iconbox.dark-mode .kt-portlet__body, .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__body { background-color: transparent !important; } .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__title, .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__title a:not(.btn), .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__content, .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__contentl, .kt-portlet.kt-iconbox.dark-mode .kt-iconbox__desc, .kt-portlet.kt-iconbox.dark-mode .kt-training-count, .kt-portlet.kt-iconbox.dark-mode .analytic-card-text-color, .kt-portlet.kt-iconbox.dark-mode .kt-link:not(.btn), .kt-portlet.kt-iconbox.dark-mode a:not(.btn) { color: #ffffff !important; } /* Info / View pills: black text on white, #bfbfbf hover */ .kt-portlet.kt-iconbox.dark-mode .btn.btn-pill, .kt-portlet.kt-iconbox.dark-mode a.btn.btn-pill, .kt-portlet.kt-iconbox.dark-mode .btn.btn-secondary.btn-pill, .kt-portlet.kt-iconbox.dark-mode .btn.btn-brand.btn-pill, .kt-portlet.kt-iconbox.dark-mode a.btn.btn-brand.btn-pill.category-view-btn { color: #000000 !important; background: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; } .kt-portlet.kt-iconbox.dark-mode .btn.btn-pill i, .kt-portlet.kt-iconbox.dark-mode .btn.btn-secondary.btn-pill i, .kt-portlet.kt-iconbox.dark-mode .btn.btn-brand.btn-pill i { color: #000000 !important; } .kt-portlet.kt-iconbox.dark-mode .btn.btn-pill:hover, .kt-portlet.kt-iconbox.dark-mode a.btn.btn-pill:hover, .kt-portlet.kt-iconbox.dark-mode .btn.btn-secondary.btn-pill:hover, .kt-portlet.kt-iconbox.dark-mode .btn.btn-brand.btn-pill:hover, .kt-portlet.kt-iconbox.dark-mode a.btn.btn-brand.btn-pill.category-view-btn:hover { color: #000000 !important; background: #bfbfbf !important; background-color: #bfbfbf !important; border-color: #bfbfbf !important; } .kt-portlet.kt-iconbox.dark-mode .btn.btn-pill:hover i { color: #000000 !important; } /* Assessment play error — injected h5 / links / browser table */ .kt-portlet.kt-iconbox.dark-mode.assessment-play-error .kt-iconbox__content h5, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error .kt-iconbox__content b, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error .kt-iconbox__content a, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error .kt-iconbox__content a h5, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table th, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table td { color: #ffffff !important; } .kt-portlet.kt-iconbox.dark-mode.assessment-play-error.kt-iconbox--warning .kt-iconbox__body .kt-iconbox__icon svg g [fill] { fill: #ffb822 !important; } .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table { border-color: #424242 !important; } .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table thead, .kt-portlet.kt-iconbox.dark-mode.assessment-play-error table tbody tr { background-color: transparent !important; border-color: #424242 !important; } /* Mobile V2 — nomination / TVS Library card */ .dashboard-card--content_blue.dark-mode { background: #242424 !important; border: 1px solid #424242 !important; color: #ffffff !important; } .dashboard-card--content_blue.dark-mode p, .dashboard-card--content_blue.dark-mode span { color: #ffffff !important; } .dashboard-card--content_blue.dark-mode .pending_certificates, .dashboard-card--content_blue.dark-mode span.pending_certificates { color: #000000 !important; background-color: #ffffff !important; } .mbl-dashboard-card .dashboard-card--header p { color: #ffffff !important; } .mbl-dashboard-card .dashboard-card--header a { color: #bfbfbf !important; } /* Mobile header — theme-components sets .mbl-topbar to var(--color)=#fff */ .mbl-topbar.dark-mode { background-color: #242424 !important; border: none !important; } /* Spacer under topbar — blade/webview CSS hardcodes background-color: white */ .mbl-topbar--space, .mbl-topbar.dark-mode .mbl-topbar--space, #kt_topbar_mobile .mbl-topbar--space { background-color: #000000 !important; background: #000000 !important; } .mbl-topbar.dark-mode .mbl-topbar--user-welcome, .mbl-topbar.dark-mode .mbl-topbar--user-welcome p, .mbl-topbar.dark-mode .mbl-topbar--user-welcome span, .mbl-topbar.dark-mode .mbl-topbar--current-page, .mbl-topbar.dark-mode .mbl-topbar--current-page p, .mbl-topbar.dark-mode .mbl-topbar--current-page .before-scroll, .mbl-topbar.dark-mode .mbl-topbar--current-page .after-scroll, .mbl-topbar.dark-mode .mbl-topbar--actions { color: #ffffff !important; } .mbl-topbar.dark-mode #mbl-topbar--back { color: #000000 !important; background: #ffffff !important; } /* Notification bell — force light icon on dark topbar (mobile + web) */ .mbl-topbar.dark-mode .mbl-topbar--notifications .notification-icon, .mbl-topbar.dark-mode .mbl-topbar--notifications a { filter: brightness(0) invert(1) !important; opacity: 1 !important; } .mbl-topbar.dark-mode .mbl-topbar--notifications span:not(.kt-pulse__ring):not(#seeNotificationMobile) { background-color: #ffffff !important; color: #000000 !important; } /* Notification count badge — keep red/white (blade default); don't invert with dark-mode spans */ #seeNotificationMobile, .mbl-topbar.dark-mode #seeNotificationMobile, .mbl-topbar.dark-mode .mbl-topbar--notifications #seeNotificationMobile { background: red !important; background-color: red !important; color: white !important; } .kt-header .kt-header__topbar .flaticon2-bell-alarm-symbol, .kt-header__topbar .flaticon2-bell-alarm-symbol, .kt-header__topbar a[href="/notification"], .kt-header__topbar a[href="/notification"] i { color: #ffffff !important; } .hof-table-card.dark-mode { background: #242424 !important; border-color: #424242 !important; } .hof-table-card.dark-mode .hof-points-table thead th { background: #000000 !important; color: #ffffff !important; border-bottom-color: #424242 !important; } .hof-table-card.dark-mode .hof-points-table tbody td { border-top-color: #424242 !important; color: #bfbfbf !important; } .hof-table-card.dark-mode .hof-points-table tbody tr:hover { background: #000000 !important; } .hof-table-card.dark-mode .hof-skill-title, .hof-table-card.dark-mode .hof-created { color: #ffffff !important; } .hof-table-card.dark-mode .hof-skill-desc, .hof-table-card.dark-mode .text-muted, .hof-table-card.dark-mode .hof-serial { color: #bfbfbf !important; } .hof-table-card.dark-mode .hof-points-value { color: #ffffff !important; } /* Dashboard — My Assigned Learnings cards */ .assigned-learning-card.dark-mode { background-color: #242424 !important; border-color: #424242 !important; color: #ffffff !important; } .assigned-learning-card.dark-mode .learning-name, .assigned-learning-card.dark-mode .assigned-learning-meta, .assigned-learning-card.dark-mode .assigned-learning-meta div { color: #ffffff !important; } .assigned-learning-card.dark-mode .assigned-learning-play-btn { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } .assigned-learning-card.dark-mode .assigned-learning-play-btn:hover { background: #bfbfbf !important; color: #000000 !important; border-color: #bfbfbf !important; } /* LP / survey timeline cards — avoid light unlocked bg + white-on-white Start */ .mbl_card_list_item.dark-mode, .mbl_card_list_item.dark-mode.unlocked, .mbl_card_list_item.dark-mode.completed, .mbl_card_list_item.dark-mode.in-progress, .mbl_card_list_item.dark-mode.evaluation-pending, .mbl_card_list_item.dark-mode.failed { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; box-shadow: none !important; color: #bfbfbf !important; } .mbl_card_list_item.dark-mode .card-title, .mbl_card_list_item.dark-mode .timeline p, .mbl_card_list_item.dark-mode .timeline .timeline-item, .mbl_card_list_item.dark-mode .info-item, .mbl_card_list_item.dark-mode .info-item b, .mbl_card_list_item.dark-mode .info-item span, .mbl_card_list_item.dark-mode .status-element:not(.status-failed):not(.status-inprogress):not(.status-completed), .mbl_card_list_item.dark-mode .dependent-on-text, .mbl_card_list_item.dark-mode .mbl_card_list_item__content h1, .mbl_card_list_item.dark-mode .mbl_card_list_item__timeline, .mbl_card_list_item.dark-mode .mbl_card_list_item__timeline span { color: #ffffff !important; } /* Keep status colors same as other themes (lpGridStyle) */ .mbl_card_list_item.dark-mode .status-element.status-failed, .mbl_card_list_item.dark-mode .status-failed { color: #fd397a !important; } .mbl_card_list_item.dark-mode .status-element.status-inprogress, .mbl_card_list_item.dark-mode .status-inprogress { color: orange !important; } .mbl_card_list_item.dark-mode .status-element.status-completed, .mbl_card_list_item.dark-mode .status-completed { color: #1dc9b7 !important; } .mbl_card_list_item.dark-mode .training-icon svg { color: #ffffff !important; } .mbl_card_list_item.dark-mode .action-button { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } .mbl_card_list_item.dark-mode .action-button:hover { background-color: #bfbfbf !important; border-color: #bfbfbf !important; color: #000000 !important; } .mbl_card_list_item.dark-mode .info-item { background: #424242 !important; } /* Survey cards — icon + completion status on black */ .mbl_card_list_item.dark-mode .training-icon, .mbl_card_list_item.dark-mode .training-icon--assesment_big, .mbl_card_list_item.dark-mode .training-icon--assesment_big.training-icon { background: #000000 !important; background-color: #000000 !important; border: 1px solid #424242 !important; } .mbl_card_list_item.dark-mode .bullets, .mbl_card_list_item.dark-mode .bullets.status_bullet, .mbl_card_list_item.dark-mode .status_bullet, .mbl_card_list_item.dark-mode .not-started__btn, .mbl_card_list_item.dark-mode .bullets.not-started__btn, .mbl_card_list_item.dark-mode .bullets.dark-mode-text-color { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; border: 1px solid #424242 !important; } /* Welcome banner / As Admin|Employee tabs — theme-components paints every `.nav-link` with `border-bottom: 1px solid var(--white-color)` (#bfbfbf here), so both tabs draw a line. Clear inactive; keep one white active underline. Scoped to the welcome alert toolbar so Wall / FAQ / other nav-tabs are untouched. */ .nav-tabs.nav-tabs-line { border-bottom-color: transparent !important; } .alert.dark-mode .kt-portlet__head-toolbar .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link { border-bottom-color: transparent !important; } .alert.dark-mode .kt-portlet__head-toolbar .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link.active { border-bottom-color: #ffffff !important; } .alert.alert-light.dark-mode { border-color: #424242 !important; } .alert.dark-mode.bs-light, .dark-mode.bs-light { box-shadow: none !important; } /* Learning Analytics cards — beat theme-components .metric-section var(--white-color) */ .metric-section.dark-mode, .metric-section.br-curve.bs-light.dark-mode, .analytics-card.dark-mode, .analytics-card.br-curve.bs-light.dark-mode, .compact-card.dark-mode, .compact-card.br-curve.bs-light.dark-mode { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; box-shadow: none !important; color: #ffffff !important; } /* Admin Analytics — outer .learning-analytics-screen is the visible card (widget8 uses hidePortlet / untitled body, so the section is the shell). Transparent blended into page #000; restore theme card surface + text. */ section[ng-controller="AdminAnalyticsController as main"].learning-analytics-screen, .learning-analytics-screen[ng-controller="AdminAnalyticsController as main"] { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; box-shadow: none !important; color: #ffffff !important; } section[ng-controller="AdminAnalyticsController as main"].learning-analytics-screen .kt-portlet__head-title, section[ng-controller="AdminAnalyticsController as main"].learning-analytics-screen .dark-mode-light-text, .learning-analytics-screen[ng-controller="AdminAnalyticsController as main"] .kt-portlet__head-title, .learning-analytics-screen[ng-controller="AdminAnalyticsController as main"] .dark-mode-light-text { color: #ffffff !important; } section[ng-controller="AdminAnalyticsController as main"].learning-analytics-screen .analytics-small-text, .learning-analytics-screen[ng-controller="AdminAnalyticsController as main"] .analytics-small-text { color: #bfbfbf !important; } .learning-analytics-screen .active-users-count, .learning-analytics-screen .active-users-count.dark-mode-light-text, .metric-section.dark-mode .active-users-count, .metric-section.dark-mode .metric-row-title, .metric-section.dark-mode .metric-row-value, .analytics-card.dark-mode .metric-row-title, .analytics-card.dark-mode .metric-row-value, .metric-section.dark-mode .top-learner-stats, .metric-section.dark-mode .progress-text { color: #ffffff !important; } .metric-section.dark-mode .top-learner-name { color: #ffffff !important; } .metric-section.dark-mode .active-users-line { stroke: #ffffff !important; } .metric-section.dark-mode .active-users-area { fill: #ffffff !important; } .metric-section.dark-mode .donut-ring, .analytics-card.dark-mode .donut-ring { stroke: rgba(255, 255, 255, 0.2) !important; } .metric-section.dark-mode .donut-value, .metric-section.dark-mode .donut-value-completed { fill: #ffffff !important; stroke: rgba(0, 0, 0, 0.35) !important; } .metric-section.dark-mode .metric-row, .analytics-card.dark-mode .metric-row { border-bottom-color: #424242 !important; } .metric-section.dark-mode h3, .metric-section.dark-mode .analytics-card-title h3, .analytics-card.dark-mode h3, .analytics-card.dark-mode h4, .compact-card.dark-mode h3, .compact-card.dark-mode h4, .metric-section.dark-mode .metric-large-number, .metric-section.dark-mode .metric-large-number.dark-mode-light-text, .analytics-card.dark-mode .dark-mode-light-text, .metric-section.dark-mode .progress-text, .metric-section.dark-mode .donut-value { color: #ffffff !important; } .metric-section.dark-mode .card-subheading, .metric-section.dark-mode .analytics-small-text, .analytics-card.dark-mode .analytics-small-text, .compact-card.dark-mode .analytics-small-text { color: #bfbfbf !important; } .metric-section.dark-mode .analytics-card-icon, .analytics-card.dark-mode .analytics-card-icon, .compact-card.dark-mode .compact-card-icon { background: #424242 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .metric-section.dark-mode .analytics-card-icon i, .analytics-card.dark-mode .analytics-card-icon i, .compact-card.dark-mode .compact-card-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; margin: 0 !important; } /* Latest Performance — black attempt/status text → white on dark cards */ .metric-section.dark-mode .performance-attempts, .metric-section.dark-mode .encouraging-message, .metric-section.dark-mode .status-not-started, .analytics-card.dark-mode .performance-attempts, .analytics-card.dark-mode .encouraging-message, .analytics-card.dark-mode .status-not-started { color: #ffffff !important; } .metric-section.dark-mode .encouraging-message, .analytics-card.dark-mode .encouraging-message { background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.35) !important; } /* Dashboard flip cards — shade image panel + readable text (match themed outline on orange themes) */ .dashboard-v2 .action-cards, .dashboard-v2 .action-cards.dark-mode, .dashboard-v2 .action-cards.br-curve.bs-light, .dashboard-v2 .action-cards.br-curve.bs-light.dark-mode { background: #242424 !important; background-color: #242424 !important; border: 1px solid #424242 !important; box-shadow: none !important; color: #ffffff !important; } .dashboard-v2 .action-cards .card-images { background: #424242 !important; background-color: #424242 !important; display: block; width: 100%; max-width: 100%; height: auto; box-sizing: border-box; } .dashboard-v2 .action-cards img.card-images { object-fit: cover; aspect-ratio: 1 / 1; } .dashboard-v2 .action-cards .card-details h2, .dashboard-v2 .action-cards .card-details .font-size-1_5 { color: #ffffff !important; } .dashboard-v2 .action-cards .card-details p { color: #bfbfbf !important; } /* ── Dashboard Leaderboard (/dashboard) — Slate Noir only ───────────────────── Pinned to section[ng-controller="LeaderboardController as main"], declared in widgets/dashboardV2/leaderboard/index only (verified: 1 blade — the mobile leaderboard uses MobileLeaderboardController, a different attribute value). The page's .dashboard-v2 wrapper is not a usable hook on its own: it exists only in the flipcards-grid and sidebar layouts, so a plain /dashboard render carries no screen class at all. This widget also sets no .dark-mode anywhere, so the .dark-mode-gated rules elsewhere in this theme all miss it. Measured before this block, the three podium names were #000000 on the widget's own .dark-mode-bg #000 — 1.00:1, black on black, i.e. genuinely absent rather than dim. They are bare
with no class, and h5 is the one heading level theme-components never colours: it declares h1, h2, h3, h4 and `h5 .kt-font-light`, a descendant selector that cannot match them. So they fell through to style.bundle's `body { color: #000000 }`, while the sibling `

` points line was already #ffffff at 21:1 — which is why the points showed and the names did not. Deliberately NOT touched (all measured and already correct): the medal stands, which are intentional brand colours set inline (#41C9E2 / #A555EC / #FF76CE); the "Visit Hall of Fame" button, already black-on-white at 21:1, this theme's deliberate global .btn treatment; and the Hall of Fame heading and description, already #ffffff at 21:1 via the `div:has(button[onclick*="hallOfFame"])` rule just below. */ /* Podium names. .flex-flow-col is what separates the three podium columns from the Hall of Fame column (.flex-column) and the list column, so this matches exactly those three headings and no other h5 in the widget. #ffffff matches the points line directly beneath each name. The class is common across the app, hence the section prefix. */ section[ng-controller="LeaderboardController as main"] .flex-flow-col>h5 { color: #ffffff !important; } /* Ranked list cards. theme-components already asks for the theme shade at `.analytic-card-color { background: var(--shade-color) }` (#424242 here), but the widget's own