/** * Global dark theme overrides. * Applied when is set. * Complements the CSS variable system in c2m.css. */ /* Base */ .dark { background-color: #0f0f1a !important; color: #e6e6ea !important; } .dark .main_container, .dark .right_col, .dark #view { background: #0f0f1a !important; } /* Cards and panels */ .dark .panel, .dark .panel-default, .dark .panel-body, .dark .well, .dark .card { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } .dark .x_panel { background: #1a1a2e !important; border: 1px solid #22223a !important; color: #e6e6ea !important; } .dark .x_title { border-bottom-color: #22223a !important; color: #e6e6ea !important; } /* Tables */ .dark table, .dark .table { color: #e6e6ea !important; } .dark .table > thead > tr > th { background: #1a1a2e !important; color: #9b9bb0 !important; border-bottom-color: #22223a !important; } .dark .table > tbody > tr > td { border-top-color: #22223a !important; } .dark .table-striped > tbody > tr:nth-of-type(odd) { background: #16162a !important; } .dark .table > tbody > tr:hover { background: #22223a !important; } /* Forms */ .dark input, .dark textarea, .dark select, .dark .form-control { background: #1a1a2e !important; border-color: #3a3a5a !important; color: #e6e6ea !important; } .dark input::placeholder, .dark textarea::placeholder { color: #6b6b88 !important; } .dark .input-group-addon { background: #22223a !important; border-color: #3a3a5a !important; color: #9b9bb0 !important; } /* Buttons */ .dark .btn-default { background: #22223a !important; border-color: #3a3a5a !important; color: #e6e6ea !important; } .dark .btn-primary { background: #3b5998 !important; border-color: #3b5998 !important; } .dark .btn-success { background: #2e8b57 !important; border-color: #2e8b57 !important; } .dark .btn-danger { background: #c0392b !important; border-color: #c0392b !important; } /* Dropdowns */ .dark .dropdown-menu { background: #1a1a2e !important; border-color: #22223a !important; } .dark .dropdown-menu > li > a { color: #e6e6ea !important; } .dark .dropdown-menu > li > a:hover { background: #22223a !important; } /* Modals */ .dark .modal-content { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } .dark .modal-header { border-bottom-color: #22223a !important; } .dark .modal-footer { border-top-color: #22223a !important; } /* Tabs */ .dark .nav-tabs { border-bottom-color: #22223a !important; } .dark .nav-tabs > li > a { color: #9b9bb0 !important; } .dark .nav-tabs > li.active > a, .dark .nav-tabs > li.active > a:hover { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } /* Sidebar */ .dark .nav_menu { background: #1a1a2e !important; border-bottom-color: #22223a !important; } .dark .left_col, .dark .sidebar-menu { background: #0f0f1a !important; } .dark .sidebar-menu li a { color: #9b9bb0 !important; } .dark .sidebar-menu li a:hover { background: #1a1a2e !important; color: #e6e6ea !important; } /* Text colors */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #e6e6ea !important; } .dark p, .dark span, .dark label, .dark small { color: inherit; } .dark .text-muted { color: #6b6b88 !important; } /* Login page */ .dark .main-bg { background: #0f0f1a !important; } .dark .login-box, .dark .cloud-box { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } /* Scrollbars */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: #0f0f1a; } .dark ::-webkit-scrollbar-thumb { background: #3a3a5a; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #4a4a6a; } /* Toastr — use background-color, not the shorthand. The shorthand * resets background-image/repeat/position to initial, which made the * status icon (no-repeat, 15px center in angular-toastr.css) tile * across the whole toast as a checkered pattern. */ .dark .toast { background-color: #1a1a2e !important; color: #e6e6ea !important; } /* Angular Material overrides */ .dark md-card { background: #1a1a2e !important; color: #e6e6ea !important; } .dark md-toolbar { background: #1a1a2e !important; color: #e6e6ea !important; } /* Pagination */ .dark .pagination > li > a { background: #1a1a2e !important; border-color: #22223a !important; color: #9b9bb0 !important; } .dark .pagination > .active > a { background: #3b5998 !important; border-color: #3b5998 !important; color: #fff !important; } /* Calendar/date pickers */ .dark .daterangepicker { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } /* Borders */ .dark hr { border-top-color: #22223a !important; } /* Breadcrumbs / nav tabs bar — including the .navtabs directive */ .dark .nav-tabs-wrapper, .dark .breadcrumb, .dark .page-title, .dark .title_left, .dark .title_right, .dark .nav.nav-tabs.bar_tabs, .dark .x_breadcrumb, .dark .navtabs { background: #0f0f1a !important; border-color: #22223a !important; color: #9b9bb0 !important; box-shadow: none !important; } .dark .navtabs .navtab { color: #9b9bb0 !important; background: transparent !important; } .dark .navtabs .navtab.nav-current { color: #e6e6ea !important; border-bottom-color: #3b5998 !important; } .dark .navtabs .navtab:hover { color: #e6e6ea !important; } .dark .nav.nav-tabs.bar_tabs > li > a { color: #9b9bb0 !important; background: transparent !important; } .dark .nav.nav-tabs.bar_tabs > li.active > a { color: #e6e6ea !important; border-bottom-color: #3b5998 !important; } /* Main content area — force dark on all pages */ .dark .content, .dark main, .dark .grid-container { background: #0f0f1a !important; } /* Header bar */ .dark header-bar, .dark .header-bar, .dark .top-header { background: #1a1a2e !important; border-color: #22223a !important; } /* Dashboard — theming handled via .dsh-dark in dashboard-new-new.css */ /* Menu dropdown — header bar drawer menus */ .dark .menu-dropdown, .dark .page-selector, .dark .dropdown-menu-custom, .dark .menubar__drawer__menu { background: #1a1a2e !important; border: 1px solid #22223a !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; padding: 6px 0 !important; font-size: 14px !important; } .dark .menubar__drawer__menu li { text-transform: none !important; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif !important; font-size: 14px !important; border-bottom: none !important; padding: 0 !important; } .dark .menubar__drawer__menu li a { padding: 8px 20px !important; color: #c0c0d0 !important; transition: background 0.15s, color 0.15s !important; } .dark .menubar__drawer__menu li a:hover { background: #22223a !important; color: #fff !important; } .dark .menubar__drawer__menu li:hover { background: transparent !important; color: inherit !important; } /* Catch-all: any remaining white/light elements */ .dark .top_tiles, .dark .top_nav, .dark .row, .dark .col-md-12, .dark .col-md-9, .dark .col-md-3, .dark .container, .dark .footer_fixed, .dark footer, .dark .sidebar-footer, .dark .menu_section, .dark .profile_info, .dark .jqstooltip, .dark .dataTables_wrapper, .dark .dataTables_info, .dark .dataTables_filter, .dark .dataTables_length, .dark .dataTables_paginate { background: transparent !important; color: #e6e6ea !important; } .dark .nav_title, .dark .site_title { background: #0f0f1a !important; } .dark .profile_pic, .dark .img-circle { border-color: #22223a !important; } /* C2M — minimal overrides (main theming done via variables in c2m.css .c2m-dark) */ .dark .c2m-card-details-table td { border-color: #22223a !important; } /* Links */ .dark a { color: #6b8fd4; } .dark a:hover { color: #8ba8e8; } /* ============================================================ ACCOUNT MANAGEMENT / USER TABLES ============================================================ */ .dark .altus-table { border-color: #22223a !important; } .dark .altus-table th { color: #9b9bb0 !important; border-color: #22223a !important; background: #16162a !important; } .dark .altus-table td { color: #e6e6ea !important; border-color: #22223a !important; } .dark .altus-table tbody tr:nth-child(odd) { background: rgba(59, 89, 152, 0.1) !important; } .dark .altus-table tbody tr:hover { background: #22223a !important; } .dark .user-management-table button { background: #22223a !important; color: #e6e6ea !important; border: 1px solid #3a3a5a !important; border-radius: 4px !important; padding: 4px 12px !important; cursor: pointer !important; } .dark .user-management-table button:hover { background: #3a3a5a !important; } .dark .user-management-tabs { background: #0f0f1a !important; } .dark .create-product-wrapper { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } .dark .create-product-input { background: #16162a !important; border: 1px solid #3a3a5a !important; color: #e6e6ea !important; } /* ============================================================ ACTIVE ROSTER — comprehensive ============================================================ */ .dark #candidate-search-bar { background: linear-gradient(90deg, rgba(59, 89, 152, 1) 20%, rgba(15, 15, 26, 1) 100%) !important; } .dark #candidate-search-input { background: #1a1a2e !important; border-color: #3a3a5a !important; color: #e6e6ea !important; } .dark .candidate-search-input-wrapper { background: #1a1a2e !important; border-color: #3a3a5a !important; } .dark #candidate-search-button { border-color: #3a3a5a !important; background: #22223a !important; } .dark #candidate-search-results { background: #1a1a2e !important; border-color: #22223a !important; } .dark .candidate-search-result { color: #e6e6ea !important; background: #1a1a2e !important; } .dark .candidate-search-result:hover { background: #22223a !important; } .dark .search-result-details { color: #9b9bb0 !important; } /* Left column — candidate list */ .dark #wrapper { color: #e6e6ea !important; } .dark .active-roster-column-interface, .dark .ar-column { background: #0f0f1a !important; color: #e6e6ea !important; border-color: #22223a !important; } .dark .ar-card, .dark .is-card { background: #1a1a2e !important; color: #e6e6ea !important; border-color: #22223a !important; } .dark .ar-heading, .dark .is-heading { color: #e6e6ea !important; border-bottom-color: #22223a !important; } .dark .ar-body, .dark .is-body { color: #e6e6ea !important; } .dark .ar-body a, .dark .is-body a { color: #6b8fd4 !important; } /* Tabs (Active / Inquiries) */ .dark .ar-tab-container { background: #0f0f1a !important; } .dark .ar-tab { background: #1a1a2e !important; color: #9b9bb0 !important; border-color: #22223a !important; } .dark .ar-tab.active, .dark .ar-tab:hover { color: #e6e6ea !important; background: #22223a !important; } /* Company filter panel */ .dark .company-filter, .dark .ar-filter-panel { background: #1a1a2e !important; color: #e6e6ea !important; border-color: #22223a !important; } .dark .company-filter button, .dark .ar-filter-button { background: #22223a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .company-filter input, .dark .company-filter select { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .company-filter a { color: #6b8fd4 !important; } .dark #map-overlay { color: #e6e6ea !important; } .dark #map-overlay select, .dark #map-overlay input { background: #1a1a2e !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .radius-label, .dark .radius-units { color: #e6e6ea !important; } /* Info window (map popup) */ .dark #info-window { background: #1a1a2e !important; color: #e6e6ea !important; } .dark #info-window .info-window-header { border-bottom-color: #22223a !important; color: #e6e6ea !important; } .dark #info-window .company-type, .dark #info-window .category-heading { background: #22223a !important; color: #e6e6ea !important; border-bottom-color: #22223a !important; } .dark #info-window .clientcorporation-button { background: #1a1a2e !important; color: #e6e6ea !important; border-bottom-color: #22223a !important; } .dark #info-window .clientcorporation-button:hover { background: #22223a !important; } .dark #info-window .clientcorporation-list { border-color: #22223a !important; } .dark .disconnected-banner { background: #2e1a1a !important; border-color: #c0392b !important; } /* Company filters panel */ .dark .active-roster-company-filters { background: #1a1a2e !important; color: #e6e6ea !important; } .dark .company-filters-header { color: #e6e6ea !important; } .dark .company-filter-section { border-color: #22223a !important; } .dark .company-filter-button { color: #6b8fd4 !important; } .dark .company-filter-button::before, .dark .column-filter-button::before, .dark .column-sort-button::before { border-color: #9b9bb0 !important; } .dark .company-filter-option { color: #e6e6ea !important; } .dark .company-search-options { background: #1a1a2e !important; border-color: #22223a !important; } .dark .company-search-option { background: #1a1a2e !important; color: #e6e6ea !important; border-bottom-color: #22223a !important; } .dark .company-search-option:hover { background: #22223a !important; } .dark .reset-company-filters-button { background: #22223a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark #company-search-input { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } /* Active Filters bar */ .dark .active-filters-warning { background-color: rgba(59, 89, 152, 0.8) !important; border-bottom-color: #22223a !important; } /* Column card borders */ .dark .list-view-card { border-bottom-color: #22223a !important; } /* Column filter inputs */ .dark .column-filter-input { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .column-filter-button { color: #6b8fd4 !important; } .dark .column-filter-section { border-color: #22223a !important; } /* ============================================================ TRAINING PORTAL ============================================================ */ .dark .trn-global, .dark .trn-wrapper { background: #0f0f1a !important; color: #e6e6ea !important; } .dark .trn-card, .dark .trn-video-card, .dark .trn-playlist-card, .dark .trm-playlist-global, .dark .trp-playlist-global { background: #1a1a2e !important; color: #e6e6ea !important; border-color: #22223a !important; } .dark .trn-section-heading, .dark .trn-heading { color: #e6e6ea !important; } .dark .trn-tab { background: #1a1a2e !important; color: #9b9bb0 !important; border-color: #22223a !important; } .dark .trn-tab.active, .dark .trn-tab:hover { color: #e6e6ea !important; } .dark .trn-search-input, .dark .trn-filter { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } /* ============================================================ PRESCREEN FORM ============================================================ */ .dark .pre-dark { color: #e6e6ea !important; } .dark .pre-dark input, .dark .pre-dark textarea, .dark .pre-dark select { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .pre-dark label { color: #9b9bb0 !important; } .dark .pre-dark .md-button { color: #e6e6ea !important; } .dark md-input-container label { color: #9b9bb0 !important; } .dark md-input-container input, .dark md-input-container textarea { color: #e6e6ea !important; border-bottom-color: #3a3a5a !important; } /* Teal header bar */ .dark .prescreen-toolbar { background: #1a1a2e !important; color: #e6e6ea !important; } .dark .prescreen-toolbar-button { background: #3b5998 !important; color: #fff !important; border: none !important; } .dark .prescreen-input-bar { background: #1a1a2e !important; border-color: #22223a !important; } .dark .prescreen-input-bar input { background: #16162a !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .prescreen-input-bar button { background: #3b5998 !important; color: #fff !important; } .dark .prescreen-search-bar { background: #1a1a2e !important; color: #e6e6ea !important; } .dark .pre-blue-bar { background-color: #1a1a2e !important; border-bottom: 1px solid #22223a !important; } .dark .pre-blue-bar input { background: #16162a !important; color: #e6e6ea !important; border: 1px solid #3a3a5a !important; border-radius: 4px !important; padding: 6px 10px !important; } .dark .pre-candidate-info { color: #e6e6ea !important; } .dark .pre-candidate-info em { color: #9b9bb0 !important; } .dark .pure-table th { background: #16162a !important; color: #9b9bb0 !important; } .dark .pure-table td { color: #e6e6ea !important; } /* ============================================================ TEARSHEET GENERATOR ============================================================ */ .dark .tearsheet-wrapper, .dark .tearsheet-container { background: #0f0f1a !important; color: #e6e6ea !important; } .dark .tearsheet-card { background: #1a1a2e !important; border-color: #22223a !important; color: #e6e6ea !important; } /* ============================================================ GLOBAL CATCH-ALL for remaining light backgrounds ============================================================ */ /* ============================================================ USER OPTIONS ============================================================ */ .dark #FormUserOptions, .dark #FormUserOptions label { color: #e6e6ea !important; } .dark .c2m-modal-submit { background: #3b5998 !important; color: #fff !important; border: none !important; } .dark .routine-badge.badge-success { background: #2e8b57 !important; } .dark .routine-badge.badge-danger { background: #c0392b !important; } /* ============================================================ GLOBAL — catch remaining inline light backgrounds ============================================================ */ .dark [style*="background: white"], .dark [style*="background-color: white"], .dark [style*="background:#fff"], .dark [style*="background: #fff"], .dark [style*="background-color: #fafafa"] { background: #1a1a2e !important; } .dark [style*="color: black"], .dark [style*="color:#000"] { color: #e6e6ea !important; } .dark [style*="border: 1px solid black"], .dark [style*="border: 1px solid #000"], .dark [style*="border-bottom: solid 2px"] { border-color: #22223a !important; } /* ============================================================ C2M CHART TAB / SNAPSHOT GRAPH ============================================================ */ .dark #snapshot-wrapper { background: rgb(var(--bg)) !important; color: #e6e6ea !important; } .dark #snapshot-inputs button { background: #22223a !important; color: #e6e6ea !important; border: 1px solid #3a3a5a !important; border-radius: 4px !important; } .dark #snapshot-inputs select { background: #1a1a2e !important; color: #e6e6ea !important; border-color: #3a3a5a !important; } .dark .snapshot-datepicker input { background: #1a1a2e !important; color: #e6e6ea !important; border: 1px solid #3a3a5a !important; border-radius: 4px !important; } .dark #c2m-chart { background: transparent !important; } /* C2M Hold History button */ .dark c2m-card-column button { background: #22223a !important; color: #e6e6ea !important; border: 1px solid #3a3a5a !important; border-radius: 4px !important; padding: 6px 14px !important; } /* ============================================================ COMPENSATION TRACKER DROPDOWNS ============================================================ */ .dark .cpt-drop-down-wrapper { border-color: #3a3a5a !important; border-radius: 8px !important; } .dark .cpt-drop-down *, .dark .cpt-dark .cpt-drop-down * { background: #1a1a2e !important; color: #e6e6ea !important; } .dark .cpt-drop-down .cpt-trigger { border-radius: 8px !important; } .dark .cpt-drop-down .cpt-menu { background: #1a1a2e !important; border: 1px solid #22223a !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } .dark .cpt-drop-down .cpt-menu li:hover { background: #22223a !important; }