/**
* HAL UI themes (set on ).
* default — existing colored dark shell (no attribute)
* dark-mono — dark grayscale, no accent colors
* light-mono — light grayscale, no accent colors
*/
/* =============================================================================
Default theme — Dark (color): plain main background (no wallpaper)
============================================================================= */
html:not([data-pf-theme]) {
--bg: #061a38;
}
html:not([data-pf-theme]) body {
background-color: var(--bg);
background-image: none;
}
/* =============================================================================
Header + theme picker (all themes — beats AdminLTE navbar-light)
============================================================================= */
.main-header.navbar-light .navbar-nav > .nav-item > .nav-link,
.main-header.navbar-light .navbar-nav > .nav-item > .nav-link #pf-theme-current-label {
color: var(--text) !important;
}
.main-header.navbar-light .navbar-nav .icon-color {
color: inherit !important;
}
.pf-theme-menu > .nav-link {
display: inline-flex;
align-items: center;
gap: 0.15rem;
font-size: 0.875rem;
font-weight: 500;
}
.pf-theme-menu .dropdown-menu {
min-width: 12.5rem;
}
.pf-theme-menu .dropdown-header {
color: var(--muted);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set] {
color: var(--text);
font-size: 0.9rem;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set]:hover,
.pf-theme-menu .dropdown-item[data-pf-theme-set]:focus {
color: var(--text);
}
.pf-theme-menu .dropdown-item[data-pf-theme-set].active {
font-weight: 700;
}
/* --- Dark monochrome --- */
html[data-pf-theme="dark-mono"] {
/* Shell stays monochrome; action buttons use Dark (color) palette via admin-ui.css */
--bg: #374151;
--card: #1f2937;
--sidebar: #1a232e;
--border: #4b5563;
--text: #f3f4f6;
--muted: #9ca3af;
--green: #4ade80;
--blue: #60a5fa;
--red: #f87171;
--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45);
--shell-bg-overlay: rgba(8, 10, 14, 0.88);
}
html[data-pf-theme="dark-mono"] body {
background-color: var(--bg);
background-image: none;
}
html[data-pf-theme="dark-mono"] .pf-skip-link {
border-color: rgba(180, 185, 192, 0.55);
}
html[data-pf-theme="dark-mono"] .main-header .nav-link,
html[data-pf-theme="dark-mono"] .main-header .icon-color,
html[data-pf-theme="dark-mono"] #pf-theme-current-label {
color: #e8ecf1 !important;
}
html[data-pf-theme="dark-mono"] .main-header .nav-link:hover,
html[data-pf-theme="dark-mono"] .main-header .nav-link:focus,
html[data-pf-theme="dark-mono"] .main-header .dropdown-item:hover,
html[data-pf-theme="dark-mono"] .main-header .dropdown-item:focus {
background: rgba(180, 185, 192, 0.12);
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .main-header .dropdown-menu {
background: #1f2937;
border-color: #374151;
}
html[data-pf-theme="dark-mono"] .main-header .dropdown-header,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-header {
color: #9ca3af;
}
html[data-pf-theme="dark-mono"] .main-header .dropdown-item,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set] {
color: #f3f4f6 !important;
}
html[data-pf-theme="dark-mono"] .main-header .dropdown-item:hover,
html[data-pf-theme="dark-mono"] .main-header .dropdown-item:focus,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:hover,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:focus {
background: #374151 !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set].active {
background: #4b5563 !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .pf-user-avatar-ring {
box-shadow: 0 0 0 2px rgba(180, 185, 192, 0.35);
}
html[data-pf-theme="dark-mono"] .brand-prefix {
color: var(--text);
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link:hover {
background: rgba(180, 185, 192, 0.1) !important;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link.active {
background: linear-gradient(
90deg,
rgba(180, 185, 192, 0.22) 0%,
rgba(180, 185, 192, 0.06) 100%
) !important;
border-left-color: #9aa4b2;
box-shadow: inset 0 0 0 1px rgba(180, 185, 192, 0.12);
}
html[data-pf-theme="dark-mono"] .main-sidebar,
html[data-pf-theme="dark-mono"] .main-sidebar::before {
background-color: var(--sidebar) !important;
border-right: 1px solid var(--border);
}
html[data-pf-theme="dark-mono"] .sidebar-bg {
background-color: var(--sidebar) !important;
}
html[data-pf-theme="dark-mono"] .brand-link {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-pf-theme="dark-mono"] .brand-prefix,
html[data-pf-theme="dark-mono"] .brand-text,
html[data-pf-theme="dark-mono"] .brand-link .icon-color {
color: #f9fafb !important;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link,
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link .nav-link-text {
color: #f3f4f6 !important;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link svg {
color: #f9fafb;
stroke: currentColor;
opacity: 0.95;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link:hover,
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link:hover .nav-link-text {
color: #ffffff !important;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link.active,
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-link.active .nav-link-text {
color: #ffffff !important;
}
html[data-pf-theme="dark-mono"] .nav-sidebar .nav-header {
color: #d1d5db !important;
}
html[data-pf-theme="dark-mono"] .beta-notice-icon,
html[data-pf-theme="dark-mono"] .beta-pulse {
color: var(--muted);
}
/* (summary cards — see “Tables & cards” section below) */
/* Filter bar + pf-btn-* + Bootstrap .btn-* — inherit Dark (color) from admin-ui.css */
html[data-pf-theme="dark-mono"] .badge-success,
html[data-pf-theme="dark-mono"] .badge-warning,
html[data-pf-theme="dark-mono"] .badge-danger,
html[data-pf-theme="dark-mono"] .badge-info,
html[data-pf-theme="dark-mono"] .badge-primary {
background-color: #4b5563;
color: #f3f4f6;
}
html[data-pf-theme="dark-mono"] .text-info,
html[data-pf-theme="dark-mono"] .text-warning,
html[data-pf-theme="dark-mono"] .text-danger,
html[data-pf-theme="dark-mono"] .text-success {
color: var(--muted) !important;
}
html[data-pf-theme="dark-mono"] .pf-link-strong,
html[data-pf-theme="dark-mono"] a.pf-link-strong {
color: #e8ecf1;
}
html[data-pf-theme="dark-mono"] .pf-pagination-custom a.is-active,
html[data-pf-theme="dark-mono"] .page-item.active .page-link {
background-color: #3498db !important;
border-color: #3498db !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .select2-dropdown.pf-select2-dark .select2-results__option--highlighted[aria-selected],
html[data-pf-theme="dark-mono"] .pf-select2-dark .select2-results__option--highlighted[aria-selected] {
background-color: #3498db !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .pf-users-admin .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #3c8dbc;
color: #fff;
}
/* --- Light monochrome --- */
html[data-pf-theme="light-mono"] {
--bg: #e8edf5;
--card: #ffffff;
--border: #d1d5db;
--text: #111827;
--muted: #6b7280;
--green: #6b7280;
--blue: #4b5563;
--red: #6b7280;
--focus-ring: 0 0 0 3px rgba(107, 114, 128, 0.35);
--shell-bg-overlay: rgba(232, 237, 245, 0.96);
--shadow-elevated: 0 8px 24px rgba(17, 24, 39, 0.12);
--pf-action-btn: #26a69a;
--pf-action-btn-hover: #219187;
--pf-action-btn-border: #1e9688;
}
html[data-pf-theme="light-mono"] body {
background: var(--bg);
background-image: none;
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-skip-link {
background: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .main-header.navbar {
background: #fff !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 1px 8px rgba(17, 24, 39, 0.08);
}
html[data-pf-theme="light-mono"] .main-header .nav-link,
html[data-pf-theme="light-mono"] .icon-color {
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .main-header .nav-link:hover,
html[data-pf-theme="light-mono"] .main-header .nav-link:focus {
background: rgba(17, 24, 39, 0.06);
}
html[data-pf-theme="light-mono"] .main-header .dropdown-menu {
background: #fff;
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .main-header .dropdown-item {
color: var(--text);
}
html[data-pf-theme="light-mono"] .main-header .dropdown-item:hover,
html[data-pf-theme="light-mono"] .main-header .dropdown-item:focus,
html[data-pf-theme="light-mono"] .main-header .dropdown-item.active {
background: #e5e7eb;
color: var(--text);
}
html[data-pf-theme="light-mono"] .main-header .dropdown-header,
html[data-pf-theme="light-mono"] .pf-theme-menu .dropdown-header {
color: var(--muted);
}
html[data-pf-theme="light-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set] {
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:hover,
html[data-pf-theme="light-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:focus {
background: #e5e7eb !important;
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set].active {
background: #d1d5db !important;
color: var(--text) !important;
font-weight: 700;
}
html[data-pf-theme="light-mono"] .main-header .dropdown-item-text,
html[data-pf-theme="light-mono"] .pf-user-dropdown-meta small {
color: var(--muted);
}
html[data-pf-theme="light-mono"] .pf-user-dropdown-meta strong {
color: var(--text);
}
/* All Bootstrap dropdowns (toolbar, export, theme menu, etc.) */
html[data-pf-theme="light-mono"] .dropdown-menu {
background-color: #fff;
border-color: var(--border);
color: var(--text);
}
html[data-pf-theme="light-mono"] .dropdown-header {
color: var(--muted);
}
html[data-pf-theme="light-mono"] .dropdown-item,
html[data-pf-theme="light-mono"] button.dropdown-item {
color: var(--text);
}
html[data-pf-theme="light-mono"] .dropdown-item:hover,
html[data-pf-theme="light-mono"] .dropdown-item:focus,
html[data-pf-theme="light-mono"] .dropdown-item.active,
html[data-pf-theme="light-mono"] button.dropdown-item:hover,
html[data-pf-theme="light-mono"] button.dropdown-item:focus {
background-color: #e5e7eb;
color: var(--text);
}
html[data-pf-theme="light-mono"] .dropdown-item-text {
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-users-admin .pf-zones-dropdown .dropdown-menu {
background: #fff;
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-users-admin .pf-zones-dropdown .dropdown-item {
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-users-admin .pf-zones-dropdown .dropdown-item:hover,
html[data-pf-theme="light-mono"] .pf-users-admin .pf-zones-dropdown .dropdown-item:focus {
background: #e5e7eb;
color: var(--text);
}
/* Native selects & form fields */
html[data-pf-theme="light-mono"] .form-control,
html[data-pf-theme="light-mono"] select.form-control,
html[data-pf-theme="light-mono"] .custom-select,
html[data-pf-theme="light-mono"] .bootstrap-select > .dropdown-toggle {
background-color: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .bootstrap-select .dropdown-menu,
html[data-pf-theme="light-mono"] .bootstrap-select .dropdown-menu .dropdown-item {
background-color: #fff;
color: var(--text);
}
html[data-pf-theme="light-mono"] .bootstrap-select .dropdown-menu .dropdown-item:hover,
html[data-pf-theme="light-mono"] .bootstrap-select .dropdown-menu .dropdown-item:focus,
html[data-pf-theme="light-mono"] .bootstrap-select .dropdown-menu .dropdown-item.active {
background-color: #e5e7eb;
color: var(--text);
}
html[data-pf-theme="light-mono"] .beta-notice,
html[data-pf-theme="light-mono"] .beta-notice-text {
color: var(--muted);
}
html[data-pf-theme="light-mono"] .main-sidebar,
html[data-pf-theme="light-mono"] .main-sidebar::before {
background-color: #f9fafb !important;
border-right: 1px solid var(--border);
}
html[data-pf-theme="light-mono"] .brand-link {
border-bottom-color: var(--border);
}
html[data-pf-theme="light-mono"] .brand-prefix,
html[data-pf-theme="light-mono"] .brand-text {
color: var(--text);
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link,
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link .nav-link-text {
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link svg {
color: var(--text);
stroke: currentColor;
opacity: 0.85;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link:hover {
background: rgba(17, 24, 39, 0.06) !important;
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link:hover .nav-link-text {
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link.active {
background: #e5e7eb !important;
border-left-color: #4b5563;
color: var(--text) !important;
box-shadow: none;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-link.active .nav-link-text {
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .nav-sidebar .nav-header {
color: var(--muted) !important;
}
html[data-pf-theme="light-mono"] .content-wrapper {
background: var(--bg);
}
html[data-pf-theme="light-mono"] .page-title,
html[data-pf-theme="light-mono"] .pf-page-title {
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-sites-lead,
html[data-pf-theme="light-mono"] .pf-muted-empty {
color: var(--muted);
}
/* (summary cards — see “Tables & cards” section below) */
/* Filter bar + action buttons — Calypso / default HAL colors on light shell */
html[data-pf-theme="light-mono"] .pf-filter-form {
background: linear-gradient(180deg, #3c8dbc 0%, #2f7ba5 100%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
html[data-pf-theme="light-mono"] .pf-filter-form span,
html[data-pf-theme="light-mono"] .pf-stats-quick-bar .pf-stats-period__label {
color: #fff;
}
/* .pf-btn-search / refresh / transfer / reset — inherit admin-ui.css palette */
html[data-pf-theme="light-mono"] .pf-stats-period__toggle {
background: rgba(15, 23, 42, 0.45);
border-color: rgba(255, 255, 255, 0.25);
}
html[data-pf-theme="light-mono"] .pf-stats-period__btn {
color: #e2e8f0;
background: rgba(51, 65, 85, 0.9);
border-color: rgba(148, 163, 184, 0.45);
}
html[data-pf-theme="light-mono"] .pf-stats-period__btn:hover {
color: #fff;
background: rgba(71, 85, 105, 0.95);
border-color: rgba(96, 165, 250, 0.65);
}
html[data-pf-theme="light-mono"] .pf-stats-period__btn.is-active,
html[data-pf-theme="light-mono"] .pf-stats-period__btn.is-active:hover {
color: #fff;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
border-color: #93c5fd;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}
html[data-pf-theme="light-mono"] .pf-export-bar {
background: var(--card);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-export-bar__label {
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-export-btn {
color: var(--text);
background: #f3f4f6;
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-export-btn:hover:not(:disabled) {
color: #fff;
background: rgba(59, 130, 246, 0.85);
border-color: #93c5fd;
}
/* Table row actions (Zones, Delete, Config, …) — Calypso teal */
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-primary,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-danger,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-warning,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-success,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-info:not(.pf-users-dt-btn),
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-primary,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-danger,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-warning,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-success,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-info,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-primary,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-danger,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-warning,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-success {
background-color: var(--pf-action-btn) !important;
border-color: var(--pf-action-btn-border) !important;
color: #fff !important;
border-radius: 4px;
font-weight: 500;
box-shadow: none;
}
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-primary:hover,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-danger:hover,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-warning:hover,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-success:hover,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-info:not(.pf-users-dt-btn):hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-primary:hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-danger:hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-warning:hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-success:hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-info:hover,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-primary:hover,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-danger:hover,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-warning:hover,
html[data-pf-theme="light-mono"] .pf-zones-results table .btn.btn-sm.btn-success:hover {
background-color: var(--pf-action-btn-hover) !important;
border-color: var(--pf-action-btn-hover) !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-primary:focus,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-danger:focus,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm:focus {
box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.35);
}
/* Visit site — text link in table (not filled button) */
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-info[target="_blank"],
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-info[target="_blank"] {
background: transparent !important;
border: none !important;
color: #2563eb !important;
border-radius: 0;
padding: 0.2rem 0.35rem;
min-height: auto;
font-weight: 500;
text-decoration: underline;
box-shadow: none;
}
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap .btn.btn-sm.btn-info[target="_blank"]:hover,
html[data-pf-theme="light-mono"] .pf-users-admin table .btn.btn-sm.btn-info[target="_blank"]:hover {
background: transparent !important;
color: #1d4ed8 !important;
text-decoration: underline;
}
html[data-pf-theme="light-mono"] .badge-success,
html[data-pf-theme="light-mono"] .badge-warning,
html[data-pf-theme="light-mono"] .badge-danger,
html[data-pf-theme="light-mono"] .badge-info,
html[data-pf-theme="light-mono"] .badge-primary,
html[data-pf-theme="light-mono"] .badge-secondary {
background-color: #9ca3af;
color: #fff;
}
html[data-pf-theme="light-mono"] .text-info,
html[data-pf-theme="light-mono"] .text-warning,
html[data-pf-theme="light-mono"] .text-danger,
html[data-pf-theme="light-mono"] .text-success {
color: var(--muted) !important;
}
html[data-pf-theme="light-mono"] .pf-link-strong,
html[data-pf-theme="light-mono"] a.pf-link-strong {
color: var(--text);
text-decoration: underline;
}
html[data-pf-theme="light-mono"] .pf-scroll-top {
background: #4b5563;
}
html[data-pf-theme="light-mono"] .modal-content {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .modal-content .form-control,
html[data-pf-theme="light-mono"] .modal-content select.form-control {
background: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .select2-dropdown.pf-select2-dark,
html[data-pf-theme="light-mono"] .pf-select2-dark.select2-dropdown {
background-color: #fff;
border-color: var(--border);
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-search--dropdown,
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__options {
background: #fff !important;
}
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__option {
color: var(--text) !important;
background-color: transparent !important;
}
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__option--highlighted[aria-selected],
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__option[aria-selected="true"],
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__option--selected {
background-color: #e5e7eb !important;
color: var(--text) !important;
}
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-search__field {
background: #fff !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="light-mono"] .pf-select2-dark .select2-results__message {
color: var(--muted) !important;
}
html[data-pf-theme="light-mono"] .pf-users-admin .modal-content .select2-container--default .select2-selection--multiple,
html[data-pf-theme="light-mono"] .pf-users-admin .modal-content .select2-container--default .select2-selection--multiple .select2-selection__rendered {
background: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-users-admin .modal-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e5e7eb;
color: var(--text);
}
html[data-pf-theme="light-mono"] .pf-users-admin .modal-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: var(--muted);
}
html[data-pf-theme="light-mono"] .pf-zone-config .form-control,
html[data-pf-theme="light-mono"] .pf-zone-config .bootstrap-duallistbox-container select,
html[data-pf-theme="light-mono"] .pf-zone-config .select2-container--default .select2-selection--multiple,
html[data-pf-theme="light-mono"] .pf-zone-config .select2-dropdown,
html[data-pf-theme="light-mono"] .pf-zone-config .select2-results__option {
background: #fff !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="light-mono"] .pf-zone-config .modal-content {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-zone-config .modal-content .form-control {
background: #fff !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Login pages (security/_login_page) */
html[data-pf-theme="dark-mono"] body.pf-login-page,
html[data-pf-theme="light-mono"] body.pf-login-page {
background: var(--bg);
background-image: none;
color: var(--text);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .card {
background: var(--card);
border-color: var(--border);
color: var(--text);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .illustration {
background: linear-gradient(160deg, #4b5563 0%, #374151 100%);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .form-header p,
html[data-pf-theme="dark-mono"] body.pf-login-page .link-muted,
html[data-pf-theme="dark-mono"] body.pf-login-page .create-account,
html[data-pf-theme="dark-mono"] body.pf-login-page .remember {
color: var(--muted);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .input-group input,
html[data-pf-theme="dark-mono"] body.pf-login-page .pf-login-textarea {
background: #111827;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .input-group input::placeholder {
color: #6b7280;
}
html[data-pf-theme="dark-mono"] body.pf-login-page .btn-primary {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
html[data-pf-theme="dark-mono"] .pf-login-theme-bar {
background: rgba(55, 65, 81, 0.95);
border-top-color: rgba(255, 255, 255, 0.12);
color: #9ca3af;
}
html[data-pf-theme="light-mono"] body.pf-login-page .card {
background: var(--card);
border-color: var(--border);
color: var(--text);
}
html[data-pf-theme="light-mono"] body.pf-login-page .form-header h1 {
background: none;
color: var(--text);
-webkit-text-fill-color: var(--text);
}
html[data-pf-theme="light-mono"] body.pf-login-page .form-header p,
html[data-pf-theme="light-mono"] body.pf-login-page .link-muted,
html[data-pf-theme="light-mono"] body.pf-login-page .create-account {
color: var(--muted);
}
html[data-pf-theme="light-mono"] body.pf-login-page .input-group input,
html[data-pf-theme="light-mono"] body.pf-login-page .pf-login-textarea {
background: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-pf-theme="dark-mono"] body.pf-login-page .form-header h1 {
background: linear-gradient(120deg, #d1d5db 0%, #9ca3af 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-pf-theme="light-mono"] body.pf-login-page .btn-primary {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.15);
}
/* Default (dark color) theme — theme dropdown active item */
.pf-theme-menu .dropdown-item[data-pf-theme-set].active {
font-weight: 700;
background: rgba(96, 165, 250, 0.2);
color: #fff;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set] {
cursor: pointer;
}
.pf-login-theme-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.5rem;
margin-top: 0;
padding: 0.65rem 1rem;
font-size: 0.75rem;
color: #64748b;
background: rgba(8, 12, 24, 0.88);
border-top: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pf-login-theme-bar button {
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.25);
color: #94a3b8;
border-radius: 6px;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
cursor: pointer;
}
.pf-login-theme-bar button.active {
color: #e2e8f0;
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
}
html[data-pf-theme="light-mono"] .pf-login-theme-bar {
color: var(--muted);
background: rgba(255, 255, 255, 0.92);
border-top-color: var(--border);
}
html[data-pf-theme="light-mono"] .pf-login-theme-bar button {
background: #f3f4f6;
border-color: var(--border);
color: var(--muted);
}
html[data-pf-theme="light-mono"] .pf-login-theme-bar button.active {
background: #e5e7eb;
color: var(--text);
}
/* Analytics Copilot (/admin/stats-query) — dark-mono uses default purple accent from page CSS */
html[data-pf-theme="light-mono"] .pf-rb {
--rb-accent: #6c5ce7;
--rb-accent-hover: #5b4cdb;
--rb-border: #d1d5db;
--rb-panel: #ffffff;
--rb-input: #f9fafb;
--rb-text: #111827;
--rb-muted: #6b7280;
--rb-fields-label: #374151;
--rb-fields-label-soft: #6b7280;
color: var(--rb-text);
}
/* Field search combo + selected chips */
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-combo {
background: #fff;
border-color: var(--rb-border);
box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-combo.is-open {
border-color: var(--rb-accent);
box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2), inset 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-search {
color: var(--rb-text);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-search::placeholder {
color: var(--rb-muted);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-search-btn {
background: #f3f4f6;
border-left-color: var(--rb-border);
color: #4b5563;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-combo.is-open .pf-rb-field-search-btn {
color: var(--rb-accent);
border-left-color: rgba(108, 92, 231, 0.35);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-chip {
background: #ede9fe;
border: 1px solid #c4b5fd;
color: #4338ca;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-chip-label,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-chip-label {
color: #4338ca !important;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-chip-handle {
color: #7c3aed;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-chip-remove {
color: #6b7280;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-chip-remove:hover {
color: #dc2626;
}
/* Field dropdown list */
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-dropdown {
background: #fff;
border-color: var(--rb-border);
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-legend {
background: #f9fafb;
color: var(--rb-muted);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-legend strong {
color: var(--rb-text);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-category-title {
color: var(--rb-fields-label) !important;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option-label,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-field-option-label {
color: #111827 !important;
font-weight: 500;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option:hover {
background: #f3f4f6;
color: #111827;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option:hover .pf-rb-field-option-label,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-field-option:hover .pf-rb-field-option-label {
color: #111827 !important;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option.is-selected {
background: #ede9fe;
color: #3730a3;
box-shadow: inset 0 0 0 1px #c4b5fd;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option.is-selected .pf-rb-field-option-label,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-field-option.is-selected .pf-rb-field-option-label {
color: #3730a3 !important;
font-weight: 600;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-option-check {
color: #6c5ce7;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-field-empty,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-field-empty {
color: var(--rb-muted) !important;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend,
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend-title,
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend-term {
color: var(--rb-text);
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend-desc,
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend-note,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-fields-legend-desc,
html[data-pf-theme="light-mono"] .pf-rb-section-fields .pf-rb-fields-legend-note {
color: var(--rb-muted) !important;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-fields-legend-desc code {
background: #f3f4f6;
color: #4338ca;
}
html[data-pf-theme="light-mono"] .pf-rb .pf-rb-section-head {
color: var(--rb-text);
border-bottom-color: var(--rb-border);
}
/* =============================================================================
Tables & cards — no accent colors (dark-mono + light-mono)
============================================================================= */
html[data-pf-theme="dark-mono"] {
--pf-sites-table-border: #3c3c3c;
--pf-sites-table-header-bg: #2c2c2c;
--pf-mono-table-hover: #33383f;
--pf-mono-sort-active: #4b5563;
}
html[data-pf-theme="light-mono"] {
--pf-sites-table-border: #d1d5db;
--pf-sites-table-header-bg: #e5e7eb;
--pf-mono-table-hover: #f3f4f6;
--pf-mono-sort-active: #9ca3af;
}
/* --- Summary & panel cards --- */
html[data-pf-theme="dark-mono"] .pf-summary-card,
html[data-pf-theme="dark-mono"] .pf-summary-card.pf-summary-card--green,
html[data-pf-theme="dark-mono"] .pf-summary-card.pf-summary-card--amber,
html[data-pf-theme="light-mono"] .pf-summary-card,
html[data-pf-theme="light-mono"] .pf-summary-card.pf-summary-card--green,
html[data-pf-theme="light-mono"] .pf-summary-card.pf-summary-card--amber,
html[data-pf-theme="dark-mono"] .pf-reports-page .summary-card,
html[data-pf-theme="light-mono"] .pf-reports-page .summary-card {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-left: 1px solid var(--border) !important;
box-shadow: var(--shadow-elevated);
}
html[data-pf-theme="dark-mono"] .pf-summary-label,
html[data-pf-theme="light-mono"] .pf-summary-label {
color: var(--muted) !important;
}
html[data-pf-theme="dark-mono"] .pf-summary-value,
html[data-pf-theme="dark-mono"] .pf-summary-value--green,
html[data-pf-theme="dark-mono"] .pf-summary-value--amber,
html[data-pf-theme="light-mono"] .pf-summary-value,
html[data-pf-theme="light-mono"] .pf-summary-value--green,
html[data-pf-theme="light-mono"] .pf-summary-value--amber {
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-panel-card,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-panel,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-panel,
html[data-pf-theme="dark-mono"] .pf-sites-page .pf-panel.pf-sites-table-card,
html[data-pf-theme="dark-mono"] .card.pf-panel-card,
html[data-pf-theme="light-mono"] .pf-panel-card,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-panel,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-panel,
html[data-pf-theme="light-mono"] .pf-sites-page .pf-panel.pf-sites-table-card,
html[data-pf-theme="light-mono"] .card.pf-panel-card {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-color: var(--border) !important;
box-shadow: var(--shadow-elevated);
}
html[data-pf-theme="dark-mono"] .pf-panel-card .card-header,
html[data-pf-theme="light-mono"] .pf-panel-card .card-header {
background: var(--card) !important;
border-bottom-color: var(--border) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-panel:hover,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-panel:hover {
border-color: var(--border) !important;
box-shadow: var(--shadow-elevated);
}
/* Dashboard today stats: match revenue bar chart legend in mono themes */
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--total,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--total {
border-left: 3px solid var(--pf-chart-total) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter {
border-left: 3px solid var(--pf-chart-adapter) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb {
border-left: 3px solid var(--pf-chart-ortb) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--video,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--video {
border-left: 3px solid var(--pf-chart-video) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--other,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--other {
border-left: 3px solid var(--pf-chart-other) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--total .pf-stat-label,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--total .pf-stat-value,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--total .pf-stat-label,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--total .pf-stat-value {
color: var(--pf-chart-total) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter .pf-stat-label,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter .pf-stat-value,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter .pf-stat-label,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--adapter .pf-stat-value {
color: var(--pf-chart-adapter) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb .pf-stat-label,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb .pf-stat-value,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb .pf-stat-label,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--ortb .pf-stat-value {
color: var(--pf-chart-ortb) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--video .pf-stat-label,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--video .pf-stat-value,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--video .pf-stat-label,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--video .pf-stat-value {
color: var(--pf-chart-video) !important;
}
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--other .pf-stat-label,
html[data-pf-theme="dark-mono"] .pf-dashboard .pf-stats .pf-stat-card--other .pf-stat-value,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--other .pf-stat-label,
html[data-pf-theme="light-mono"] .pf-dashboard .pf-stats .pf-stat-card--other .pf-stat-value {
color: var(--pf-chart-other) !important;
}
/* Skeleton placeholders (stats / user list loading) */
html[data-pf-theme="dark-mono"] .pf-stats-skeleton-card,
html[data-pf-theme="dark-mono"] .pf-stats-skeleton-line,
html[data-pf-theme="light-mono"] .pf-stats-skeleton-card,
html[data-pf-theme="light-mono"] .pf-stats-skeleton-line {
background: linear-gradient(
90deg,
var(--border) 0%,
color-mix(in srgb, var(--muted) 35%, var(--border)) 45%,
var(--border) 100%
) !important;
border: none !important;
}
/* --- pf-table-shell & DataTables (all admin tables) --- */
html[data-pf-theme="dark-mono"] .pf-table-shell,
html[data-pf-theme="dark-mono"] table.pf-table-shell,
html[data-pf-theme="light-mono"] .pf-table-shell,
html[data-pf-theme="light-mono"] table.pf-table-shell {
background-color: var(--card) !important;
color: var(--text) !important;
box-shadow: var(--shadow-elevated);
}
html[data-pf-theme="dark-mono"] .pf-table-shell thead,
html[data-pf-theme="light-mono"] .pf-table-shell thead {
background: var(--pf-sites-table-header-bg) !important;
}
html[data-pf-theme="dark-mono"] .pf-table-shell th,
html[data-pf-theme="light-mono"] .pf-table-shell th {
color: var(--text) !important;
border-bottom-color: var(--border) !important;
background: var(--pf-sites-table-header-bg) !important;
}
html[data-pf-theme="dark-mono"] .pf-table-shell td,
html[data-pf-theme="light-mono"] .pf-table-shell td {
color: var(--muted) !important;
border-bottom-color: var(--border) !important;
background: transparent !important;
}
html[data-pf-theme="dark-mono"] .pf-table-shell tbody tr:hover,
html[data-pf-theme="dark-mono"] .pf-table-shell tbody tr:hover td,
html[data-pf-theme="light-mono"] .pf-table-shell tbody tr:hover,
html[data-pf-theme="light-mono"] .pf-table-shell tbody tr:hover td {
background-color: var(--pf-mono-table-hover) !important;
}
/* Colored metric cells in tables → neutral */
html[data-pf-theme="dark-mono"] .pf-text-amber,
html[data-pf-theme="dark-mono"] .pf-text-good,
html[data-pf-theme="dark-mono"] .pf-text-volume,
html[data-pf-theme="dark-mono"] .pf-text-ecpm-gross,
html[data-pf-theme="dark-mono"] .pf-text-ecpm-net,
html[data-pf-theme="dark-mono"] .pf-table-shell td.pf-text-amber,
html[data-pf-theme="dark-mono"] .pf-table-shell td.pf-text-good,
html[data-pf-theme="dark-mono"] .pf-table-shell td.pf-text-volume,
html[data-pf-theme="dark-mono"] .pf-table-shell td.pf-text-ecpm-gross,
html[data-pf-theme="dark-mono"] .pf-table-shell td.pf-text-ecpm-net,
html[data-pf-theme="dark-mono"] .bidder-table td.pf-text-amber,
html[data-pf-theme="dark-mono"] .bidder-table td.pf-text-good,
html[data-pf-theme="dark-mono"] .bidder-table td.pf-text-volume,
html[data-pf-theme="dark-mono"] .bidder-table td.pf-text-ecpm-gross,
html[data-pf-theme="dark-mono"] .bidder-table td.pf-text-ecpm-net,
html[data-pf-theme="light-mono"] .pf-text-amber,
html[data-pf-theme="light-mono"] .pf-text-good,
html[data-pf-theme="light-mono"] .pf-text-volume,
html[data-pf-theme="light-mono"] .pf-text-ecpm-gross,
html[data-pf-theme="light-mono"] .pf-text-ecpm-net,
html[data-pf-theme="light-mono"] .pf-table-shell td.pf-text-amber,
html[data-pf-theme="light-mono"] .pf-table-shell td.pf-text-good,
html[data-pf-theme="light-mono"] .pf-table-shell td.pf-text-volume,
html[data-pf-theme="light-mono"] .pf-table-shell td.pf-text-ecpm-gross,
html[data-pf-theme="light-mono"] .pf-table-shell td.pf-text-ecpm-net,
html[data-pf-theme="light-mono"] .bidder-table td.pf-text-amber,
html[data-pf-theme="light-mono"] .bidder-table td.pf-text-good,
html[data-pf-theme="light-mono"] .bidder-table td.pf-text-volume,
html[data-pf-theme="light-mono"] .bidder-table td.pf-text-ecpm-gross,
html[data-pf-theme="light-mono"] .bidder-table td.pf-text-ecpm-net {
color: var(--text) !important;
font-weight: inherit;
}
html[data-pf-theme="dark-mono"] .pf-link-strong,
html[data-pf-theme="dark-mono"] a.pf-link-strong,
html[data-pf-theme="dark-mono"] .pf-table-shell a,
html[data-pf-theme="dark-mono"] table.dataTable a:not(.btn),
html[data-pf-theme="light-mono"] .pf-link-strong,
html[data-pf-theme="light-mono"] a.pf-link-strong,
html[data-pf-theme="light-mono"] .pf-table-shell a,
html[data-pf-theme="light-mono"] table.dataTable a:not(.btn) {
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-link-strong:hover,
html[data-pf-theme="dark-mono"] a.pf-link-strong:hover,
html[data-pf-theme="light-mono"] .pf-link-strong:hover,
html[data-pf-theme="light-mono"] a.pf-link-strong:hover {
color: var(--muted) !important;
}
/* User / zones / archive DataTable wrap */
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable,
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.table.dataTable,
html[data-pf-theme="dark-mono"] .pf-zones-results table.dataTable,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.table.dataTable,
html[data-pf-theme="light-mono"] .pf-zones-results table.dataTable {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable thead th,
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable tbody td,
html[data-pf-theme="dark-mono"] .pf-zones-results table.dataTable thead th,
html[data-pf-theme="dark-mono"] .pf-zones-results table.dataTable tbody td,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable tbody td,
html[data-pf-theme="light-mono"] .pf-zones-results table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-zones-results table.dataTable tbody td {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable thead th,
html[data-pf-theme="dark-mono"] .pf-zones-results table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-zones-results table.dataTable thead th {
background: var(--pf-sites-table-header-bg) !important;
}
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable tbody tr:hover td,
html[data-pf-theme="dark-mono"] .pf-zones-results table.dataTable tbody tr:hover td,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable tbody tr:hover td,
html[data-pf-theme="light-mono"] .pf-zones-results table.dataTable tbody tr:hover td {
background: var(--pf-mono-table-hover) !important;
}
html[data-pf-theme="dark-mono"] .pf-users-datatable-wrap table.dataTable tbody > tr.notify_active td,
html[data-pf-theme="light-mono"] .pf-users-datatable-wrap table.dataTable tbody > tr.notify_active td {
background-color: var(--pf-mono-table-hover) !important;
}
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting:before,
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting:after,
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting_asc:before,
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting_asc:after,
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting_desc:before,
html[data-pf-theme="dark-mono"] table.dataTable thead .sorting_desc:after,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting:before,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting:after,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting_asc:before,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting_asc:after,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting_desc:before,
html[data-pf-theme="light-mono"] table.dataTable thead .sorting_desc:after {
opacity: 0.45;
color: var(--muted) !important;
}
/* Website management table (light header in default — neutralize) */
html[data-pf-theme="dark-mono"] .pf-sites-page table.dataTable,
html[data-pf-theme="dark-mono"] .pf-sites-page table.table.dataTable,
html[data-pf-theme="light-mono"] .pf-sites-page table.dataTable,
html[data-pf-theme="light-mono"] .pf-sites-page table.table.dataTable {
background: var(--card) !important;
border-color: var(--pf-sites-table-border) !important;
}
html[data-pf-theme="dark-mono"] .pf-sites-page table.dataTable thead th,
html[data-pf-theme="dark-mono"] .pf-sites-page table.dataTable tfoot th,
html[data-pf-theme="dark-mono"] .pf-sites-page table.table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-sites-page table.dataTable thead th,
html[data-pf-theme="light-mono"] .pf-sites-page table.dataTable tfoot th,
html[data-pf-theme="light-mono"] .pf-sites-page table.table.dataTable thead th {
color: var(--text) !important;
background: var(--pf-sites-table-header-bg) !important;
border-color: var(--pf-sites-table-border) !important;
}
html[data-pf-theme="dark-mono"] .pf-sites-page table.dataTable tbody td,
html[data-pf-theme="dark-mono"] .pf-sites-page table.table.dataTable tbody td,
html[data-pf-theme="light-mono"] .pf-sites-page table.dataTable tbody td,
html[data-pf-theme="light-mono"] .pf-sites-page table.table.dataTable tbody td {
color: var(--text) !important;
background: var(--card) !important;
border-color: var(--pf-sites-table-border) !important;
}
html[data-pf-theme="dark-mono"] .pf-sites-page table.dataTable tbody tr:hover td,
html[data-pf-theme="dark-mono"] .pf-sites-page table.table.dataTable tbody tr:hover td,
html[data-pf-theme="light-mono"] .pf-sites-page table.dataTable tbody tr:hover td,
html[data-pf-theme="light-mono"] .pf-sites-page table.table.dataTable tbody tr:hover td {
background-color: var(--pf-mono-table-hover) !important;
border-color: var(--pf-sites-table-border) !important;
}
/* Pagination (all DataTables) */
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-pf-theme="dark-mono"] .pf-pagination-custom a.is-active {
background: #3498db !important;
border-color: #3498db !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-pf-theme="light-mono"] .pf-pagination-custom a.is-active {
background: #3498db !important;
border-color: #3498db !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate .page-item:not(.disabled):not(.active) .page-link:hover,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
background: rgba(59, 130, 246, 0.22) !important;
border-color: rgba(96, 165, 250, 0.45) !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_paginate .page-item:not(.disabled):not(.active) .page-link:hover,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
background: rgba(59, 130, 246, 0.15) !important;
border-color: rgba(59, 130, 246, 0.45) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_length,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_filter,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_info,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_length,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_filter,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_info,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_paginate {
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_filter input,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_length select,
html[data-pf-theme="dark-mono"] .pf-sites-page .dataTables_wrapper .dataTables_filter input,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_filter input,
html[data-pf-theme="light-mono"] .dataTables_wrapper .dataTables_length select,
html[data-pf-theme="light-mono"] .pf-sites-page .dataTables_wrapper .dataTables_filter input {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Stats nested / breakdown tables */
html[data-pf-theme="dark-mono"] .pf-stats-nested-table,
html[data-pf-theme="dark-mono"] .pf-stats-breakdown-row,
html[data-pf-theme="dark-mono"] .pf-stats-breakdown-cell,
html[data-pf-theme="light-mono"] .pf-stats-nested-table,
html[data-pf-theme="light-mono"] .pf-stats-breakdown-row,
html[data-pf-theme="light-mono"] .pf-stats-breakdown-cell {
background: var(--card) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-stats-breakdown-row td,
html[data-pf-theme="light-mono"] .pf-stats-breakdown-row td {
border-color: var(--border) !important;
}
html[data-pf-theme="dark-mono"] .pf-stats-insight,
html[data-pf-theme="dark-mono"] .pf-stats-callout,
html[data-pf-theme="light-mono"] .pf-stats-insight,
html[data-pf-theme="light-mono"] .pf-stats-callout {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--border) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-export-bar {
background: var(--card) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="dark-mono"] .pf-export-bar__label {
color: var(--text) !important;
}
/* .pf-export-btn hover keeps blue from admin-ui.css */
/* Bootstrap cards inside admin content */
html[data-pf-theme="dark-mono"] .content-wrapper .card,
html[data-pf-theme="light-mono"] .content-wrapper .card {
background: var(--card) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .content-wrapper .card-header,
html[data-pf-theme="light-mono"] .content-wrapper .card-header {
background: var(--card) !important;
border-bottom-color: var(--border) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .table-striped tbody tr:nth-of-type(odd),
html[data-pf-theme="light-mono"] .table-striped tbody tr:nth-of-type(odd) {
background-color: color-mix(in srgb, var(--border) 25%, transparent) !important;
}
html[data-pf-theme="dark-mono"] .table-hover tbody tr:hover,
html[data-pf-theme="light-mono"] .table-hover tbody tr:hover {
background-color: var(--pf-mono-table-hover) !important;
color: var(--text) !important;
}
/* Stats table: sort links, nested bidder breakdown, custom pagination */
html[data-pf-theme="dark-mono"] .sort-link,
html[data-pf-theme="dark-mono"] .sort-link:hover,
html[data-pf-theme="dark-mono"] .active-sort,
html[data-pf-theme="dark-mono"] .toggle-icon,
html[data-pf-theme="light-mono"] .sort-link,
html[data-pf-theme="light-mono"] .sort-link:hover,
html[data-pf-theme="light-mono"] .active-sort,
html[data-pf-theme="light-mono"] .toggle-icon {
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .sort-indicator,
html[data-pf-theme="light-mono"] .sort-indicator {
color: var(--muted) !important;
opacity: 0.65 !important;
}
html[data-pf-theme="dark-mono"] .bidder-table,
html[data-pf-theme="dark-mono"] .bidder-table th,
html[data-pf-theme="dark-mono"] .bidder-table td,
html[data-pf-theme="dark-mono"] tr.bidder-row > td,
html[data-pf-theme="light-mono"] .bidder-table,
html[data-pf-theme="light-mono"] .bidder-table th,
html[data-pf-theme="light-mono"] .bidder-table td,
html[data-pf-theme="light-mono"] tr.bidder-row > td {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
html[data-pf-theme="dark-mono"] .bidder-table thead th,
html[data-pf-theme="light-mono"] .bidder-table thead th {
background: var(--pf-sites-table-header-bg) !important;
}
html[data-pf-theme="dark-mono"] .pf-pagination a,
html[data-pf-theme="dark-mono"] .pf-pagination span,
html[data-pf-theme="light-mono"] .pf-pagination a,
html[data-pf-theme="light-mono"] .pf-pagination span {
background-color: var(--card) !important;
color: var(--text) !important;
border: 1px solid var(--border);
}
html[data-pf-theme="dark-mono"] .pf-pagination .active {
background-color: #3498db !important;
border-color: #3498db !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .pf-pagination .active {
background-color: var(--pf-mono-sort-active) !important;
color: var(--text) !important;
}
html[data-pf-theme="dark-mono"] .pf-stats-range-description {
color: var(--text) !important;
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--border) !important;
box-shadow: none !important;
}
html[data-pf-theme="light-mono"] .pf-stats-range-description {
color: var(--text) !important;
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid #60a5fa !important;
box-shadow: none !important;
}
/* Inside blue filter bar — match Calypso sites stats chrome */
html[data-pf-theme="light-mono"] .pf-stats-quick-bar .pf-stats-range-description {
color: #f8fafc !important;
background: rgba(15, 23, 42, 0.75) !important;
border: 1px solid rgba(148, 163, 184, 0.45) !important;
border-left: 3px solid #60a5fa !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
}
html[data-pf-theme="dark-mono"] .pf-footer-info,
html[data-pf-theme="light-mono"] .pf-footer-info {
color: var(--muted) !important;
}
html[data-pf-theme="dark-mono"] .pf-pill-btn {
background-color: #3c8dbc !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .pf-pill-btn:hover {
background-color: #2f7ba5 !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .pf-pill-btn {
background-color: #3c8dbc !important;
color: #fff !important;
}
html[data-pf-theme="light-mono"] .pf-pill-btn:hover {
background-color: #2f7ba5 !important;
color: #fff !important;
}