/* =========================================================================== NOTE ON SCOPING (v2.0.91) These rules are scoped to .easycp-ca-dark, which is applied to by an inline script in . does not exist yet at that point, so the previous body-class approach could only be applied at DOMContentLoaded — i.e. AFTER the browser's first paint — which produced a white flash on every page load. Scoping to lets the dark styles apply before first paint. =========================================================================== */ /* Paint the root element immediately so the very first frame is dark. */ html.easycp-ca-dark { background-color: #14171d !important; color-scheme: dark; } html.easycp-ca-dark body { background-color: #14171d !important; color: #e5e8ee; } /* =========================================================================== EasyCP Site Builder — WHMCS "twenty-one" client area dark mode --------------------------------------------------------------------------- Loaded ONLY when Settings -> "Client area dark mode" = "Follow device". Default is OFF; switching back is instant and needs no code change. IMPORTANT: twenty-one ships BOOTSTRAP 4, not Bootstrap 5. Bootstrap 4 compiles its Sass variables to static hex values and exposes no --bs-* custom properties, so variable overrides do nothing. Every selector below was taken from the real theme.css / standard_cart style.css shipped with WHMCS, not guessed. Scoped to .easycp-ca-dark so it can never leak onto public pages. =========================================================================== */ :root .easycp-ca-dark, .easycp-ca-dark { --ecpd-bg: #14171d; /* page */ --ecpd-surface: #1c212a; /* cards, panels, dropdowns */ --ecpd-raised: #222834; /* headers within surfaces */ --ecpd-input: #10141a; --ecpd-line: #2b323d; --ecpd-text: #e5e8ee; --ecpd-muted: rgba(229,232,238,.62); /* Accent follows the ACTIVE BRAND. --ecp-primary is already re-defined per brand (and per light/dark) in site.css, so CPBackup gets blue and HostXNow gets orange with no per-brand edits here. The literal is only a fallback for when no brand tokens are present. */ --ecpd-link: var(--ecp-primary, #6ea0ff); --ecpd-accent: var(--ecp-accent, var(--ecp-primary, #6ea0ff)); color-scheme: dark; } /* ── Page ────────────────────────────────────────────────────────────────── */ .easycp-ca-dark, .easycp-ca-dark #main-body, .easycp-ca-dark section#main-body, .easycp-ca-dark .main-content { background-color: var(--ecpd-bg) !important; color: var(--ecpd-text); } /* Blanket link colour applies to WHMCS content only. Our injected header, footer and buttons carry their own tokens and must keep the marketing-page colours — otherwise the nav and footer links turn Bootstrap blue and stop matching the public site. */ /* Plain descendant selectors only: complex selectors inside :not() are not universally supported, and one invalid selector would drop the whole rule. */ .easycp-ca-dark a { color: var(--ecpd-link); } .easycp-ca-dark a:hover { color: var(--ecp-primary-dark, #93b8ff); } /* Our injected chrome is re-asserted with higher specificity further down, so the header/footer keep the marketing-page colours. */ .easycp-ca-dark h1, .easycp-ca-dark h2, .easycp-ca-dark h3, .easycp-ca-dark h4, .easycp-ca-dark h5, .easycp-ca-dark h6 { color: #fff; } .easycp-ca-dark .text-muted, .easycp-ca-dark .text-secondary { color: var(--ecpd-muted) !important; } .easycp-ca-dark hr { border-color: var(--ecpd-line); } /* ── Cards / panels / dropdowns (real BS4 selectors) ─────────────────────── */ .easycp-ca-dark .card, .easycp-ca-dark .dropdown-menu, .easycp-ca-dark .jumbotron, .easycp-ca-dark .list-group-item, .easycp-ca-dark .modal-content, .easycp-ca-dark .popover, .easycp-ca-dark .toast, .easycp-ca-dark .img-thumbnail { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text); } .easycp-ca-dark .card-header, .easycp-ca-dark .card-footer, .easycp-ca-dark .modal-header, .easycp-ca-dark .modal-footer { background-color: var(--ecpd-raised) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text); } .easycp-ca-dark .bg-white, .easycp-ca-dark .bg-light { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .border, .easycp-ca-dark .border-top, .easycp-ca-dark .border-bottom, .easycp-ca-dark .border-left, .easycp-ca-dark .border-right { border-color: var(--ecpd-line) !important; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .easycp-ca-dark .table { color: var(--ecpd-text); } .easycp-ca-dark .table th, .easycp-ca-dark .table td { border-color: var(--ecpd-line); } .easycp-ca-dark .table .thead-light th, .easycp-ca-dark .table thead th { background-color: var(--ecpd-raised) !important; color: #fff !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.035); } .easycp-ca-dark .table-hover tbody tr:hover { background-color: rgba(255,255,255,.06); color: #fff; } /* ── Forms (BS4 uses .custom-select, not .form-select) ───────────────────── */ .easycp-ca-dark .form-control, .easycp-ca-dark .custom-select, .easycp-ca-dark .custom-file-label, .easycp-ca-dark .input-group-text, .easycp-ca-dark textarea, .easycp-ca-dark select, .easycp-ca-dark input[type="text"], .easycp-ca-dark input[type="email"], .easycp-ca-dark input[type="password"], .easycp-ca-dark input[type="search"], .easycp-ca-dark input[type="tel"], .easycp-ca-dark input[type="number"], .easycp-ca-dark input[type="url"], .easycp-ca-dark input[type="date"] { background-color: var(--ecpd-input) !important; border-color: #2f3742 !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .form-control:focus, .easycp-ca-dark .custom-select:focus { background-color: var(--ecpd-input) !important; border-color: var(--ecpd-accent) !important; color: #fff !important; box-shadow: 0 0 0 .2rem var(--ecp-primary-glow, rgba(110,160,255,.18)); } .easycp-ca-dark .form-control::placeholder { color: rgba(229,232,238,.40); } .easycp-ca-dark .form-control:disabled, .easycp-ca-dark .form-control[readonly], .easycp-ca-dark .custom-select:disabled { background-color: #171c23 !important; color: var(--ecpd-muted) !important; } .easycp-ca-dark .custom-control-label::before { background-color: var(--ecpd-input); border-color: #3a424f; } .easycp-ca-dark .custom-file-label::after { background-color: var(--ecpd-raised); color: var(--ecpd-text); } /* ── Buttons that assume a light page ────────────────────────────────────── */ .easycp-ca-dark .btn-light, .easycp-ca-dark .btn-default, .easycp-ca-dark .btn-outline-light { background-color: #232a35; border-color: #333c49; color: var(--ecpd-text); } .easycp-ca-dark .btn-light:hover, .easycp-ca-dark .btn-default:hover, .easycp-ca-dark .btn-outline-light:hover { background-color: #2b333f; border-color: #3d4756; color: #fff; } .easycp-ca-dark .badge-light { background-color: #2a323e; color: var(--ecpd-text); } /* ── Nav, breadcrumb, pagination, tabs, progress ─────────────────────────── */ .easycp-ca-dark .breadcrumb { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark .breadcrumb-item, .easycp-ca-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--ecpd-muted); } .easycp-ca-dark .nav-tabs { border-bottom-color: var(--ecpd-line); } .easycp-ca-dark .nav-tabs .nav-link { color: var(--ecpd-muted); } .easycp-ca-dark .nav-tabs .nav-link.active, .easycp-ca-dark .nav-tabs .nav-item.show .nav-link { background-color: var(--ecpd-surface) !important; color: #fff !important; border-color: var(--ecpd-line) var(--ecpd-line) var(--ecpd-surface) !important; } .easycp-ca-dark .page-link { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .page-link:hover { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark .page-item.disabled .page-link { background-color: #171c23 !important; color: rgba(229,232,238,.4) !important; } .easycp-ca-dark .progress { background-color: #232a35 !important; } .easycp-ca-dark .dropdown-item { color: var(--ecpd-text); } .easycp-ca-dark .dropdown-item:hover, .easycp-ca-dark .dropdown-item:focus { background-color: #262e3a !important; color: #fff; } .easycp-ca-dark .dropdown-divider { border-top-color: var(--ecpd-line); } .easycp-ca-dark .list-group-item-action:hover { background-color: var(--ecpd-raised) !important; } /* ── Alerts: keep their meaning, make them legible ───────────────────────── */ .easycp-ca-dark .alert { border-color: rgba(255,255,255,.14); } /* .alert-info is styled neutrally further down (see informational panels). */ .easycp-ca-dark .alert-success { background-color: #14301f; color: #ccf0d8; } .easycp-ca-dark .alert-warning { background-color: #33290f; color: #f6e3b8; } .easycp-ca-dark .alert-danger { background-color: #351a1d; color: #f7cdd2; } .easycp-ca-dark .alert-light, .easycp-ca-dark .alert-secondary { background-color: var(--ecpd-raised); color: var(--ecpd-text); } /* ── ORDER FORM / CART (standard_cart) — Phase 2 ─────────────────────────── */ .easycp-ca-dark .order-summary, .easycp-ca-dark .domain-checker-container, .easycp-ca-dark .domain-checker-bg, .easycp-ca-dark .domain-bulk-domain-well, .easycp-ca-dark .domain-bulk-options-box, .easycp-ca-dark .domain-promo-box, .easycp-ca-dark .domain-step-options, .easycp-ca-dark .domain-disclaimer-area, .easycp-ca-dark .spotlight-tld-container, .easycp-ca-dark .spotlight-tld-container-1, .easycp-ca-dark .spotlight-tld-container-2, .easycp-ca-dark .service-renewals, .easycp-ca-dark .domain-renewals, .easycp-ca-dark .addon-renewals, .easycp-ca-dark .mc-promo, .easycp-ca-dark .mc-promo-manage, .easycp-ca-dark .mc-promo-login, .easycp-ca-dark .slim-alert, .easycp-ca-dark .domain-tld-pricing-table-respon { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .domain-pricing, .easycp-ca-dark .domain-checker-result-headline { color: var(--ecpd-text) !important; } .easycp-ca-dark .domain-checker-available { color: #6fe0a0 !important; } .easycp-ca-dark .domain-checker-unavailable, .easycp-ca-dark .domain-checker-invalid { color: #ff9aa6 !important; } .easycp-ca-dark .error-heading { color: #ff9aa6 !important; } /* Domain step + register page (2.4.26) — verified against the shipped standard_cart/css/style.css; each comment gives the light rule overridden. Both ship with the #order-standard_cart prefix, which is why the generic surface rules above never reached them. */ /* #order-standard_cart .domain-selection-options .option { background:#f8f8f8 } */ .easycp-ca-dark #order-standard_cart .domain-selection-options .option { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } /* #order-standard_cart .domain-selection-options .option-selected { background:#efefef } */ .easycp-ca-dark #order-standard_cart .domain-selection-options .option-selected { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark #order-standard_cart .domain-selection-options .option label { color: var(--ecpd-text) !important; } /* .domain-pricing .tld-row { border-bottom:1px solid #f5f5f5 } */ .easycp-ca-dark .domain-pricing .tld-row { border-bottom-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* .domain-pricing .tld-row.highlighted { background:#f3f9fd } — the class whmcs.js adds to alternate rows; this was the white-on-white zebra. */ .easycp-ca-dark .domain-pricing .tld-row.highlighted { background: rgba(255,255,255,.035) !important; } /* .domain-pricing .tld-pricing-header .col-* { background:#efefef; border-bottom:6px solid #97b5d2 } .domain-pricing .tld-pricing-header div:nth-child(odd) { background:#f5f5f5; border-color:#336699 } */ .easycp-ca-dark .domain-pricing .tld-pricing-header .col-xs-2, .easycp-ca-dark .domain-pricing .tld-pricing-header .col-sm-2, .easycp-ca-dark .domain-pricing .tld-pricing-header .col-xs-4, .easycp-ca-dark .domain-pricing .tld-pricing-header .col-sm-4, .easycp-ca-dark .domain-pricing .tld-pricing-header .tld-column, .easycp-ca-dark .domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: var(--ecpd-raised) !important; border-color: var(--ecpd-accent) !important; color: var(--ecpd-text) !important; } /* .domain-pricing .two-row-center { border-right:2px solid #c7d7e6 } — the pale divider */ .easycp-ca-dark .domain-pricing .two-row-center { border-right-color: var(--ecpd-line) !important; } /* ── Markdown editor (submit ticket / ticket reply) — 2.4.29 ────────────── */ /* Verified against twenty-one/css/theme.css + all.css. The theme forces the frame white with !important: .md-editor > .btn-toolbar { background-color:#fff!important } .md-editor > textarea.markdown-editor, .md-editor > .md-preview { background-color:#fff!important; border-top/bottom:1px solid #ddd!important } .md-editor { border:1px solid #ddd } .markdown-editor-status { color:#959694 } so the generic .form-control dark rule lost everywhere except :focus, which is why the textarea went dark only when clicked. Higher specificity + !important. */ .easycp-ca-dark .md-editor, .easycp-ca-dark div.md-editor.active { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .md-editor > .btn-toolbar, .easycp-ca-dark .md-editor > .md-header, .easycp-ca-dark .md-editor .md-footer { background-color: var(--ecpd-raised) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .md-editor > textarea.markdown-editor, .easycp-ca-dark .md-editor > textarea, .easycp-ca-dark .md-editor > .md-preview { background-color: var(--ecpd-input) !important; color: var(--ecpd-text) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .md-editor > textarea:focus { background-color: var(--ecpd-input) !important; } .easycp-ca-dark .markdown-editor-status { color: var(--ecpd-muted) !important; } /* Preview pane + rendered ticket messages: theme pins headings to #333 and tables to #fff, which vanish on the dark surface. */ .easycp-ca-dark .md-preview h1, .easycp-ca-dark .md-preview h2, .easycp-ca-dark .md-preview h3, .easycp-ca-dark .md-preview h4, .easycp-ca-dark .markdown-content h1, .easycp-ca-dark .markdown-content h2, .easycp-ca-dark .markdown-content h3, .easycp-ca-dark .markdown-content h4 { color: var(--ecpd-text) !important; } .easycp-ca-dark .md-preview table, .easycp-ca-dark .markdown-content table { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .md-preview table > thead > tr > th, .easycp-ca-dark .markdown-content table > thead > tr > th { background-color: var(--ecpd-raised) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .md-preview table > tbody > tr > td, .easycp-ca-dark .markdown-content table > tbody > tr > td { border-color: var(--ecpd-line) !important; } .easycp-ca-dark .md-preview blockquote, .easycp-ca-dark .markdown-content blockquote { border-left-color: var(--ecpd-line) !important; } /* ── Invoice view ────────────────────────────────────────────────────────── */ .easycp-ca-dark .invoice-container, .easycp-ca-dark #invoice, .easycp-ca-dark .invoice { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } /* ── DataTables ──────────────────────────────────────────────────────────── */ .easycp-ca-dark .dataTables_wrapper, .easycp-ca-dark .dataTables_filter input, .easycp-ca-dark .dataTables_length select { color: var(--ecpd-text); } .easycp-ca-dark table.dataTable tbody tr { background-color: transparent; } .easycp-ca-dark .dataTables_paginate .paginate_button { color: var(--ecpd-text) !important; } /* ── Our own injected chrome follows the client area ─────────────────────── */ /* The shared header/footer are styled by site.css for BOTH light and dark and must NOT be restyled here — doing so previously applied a second, slightly different palette in the client area (header #1c212a vs #171c25, border #2b323d vs #262d38, tagline 84% vs 88% white), so the same chrome looked subtly different on marketing pages and WHMCS pages. site.css is now the single source of truth; the client area inherits it via data-theme="dark". */ /* =========================================================================== ROUND 2 — fixes from a real dark client area (v2.0.85) All selectors taken from twenty-one's own templates/theme.css. =========================================================================== */ /* ── Buttons that stayed white-on-white ────────────────────────────────────── theme.css defines .btn-default as #fff bg / #333 text. Several WHMCS panels ("My Services", "View Details", "Open New Ticket", "View All", "New Contact...", the header "Backup Manager") use it, so they rendered as pale boxes with near-invisible labels. !important because some are combined with .btn-group-* and brand colour utilities that raise specificity. */ .easycp-ca-dark .btn-default, .easycp-ca-dark .btn-light, .easycp-ca-dark .btn-secondary, .easycp-ca-dark .btn-outline-light, .easycp-ca-dark .btn-outline-secondary, .easycp-ca-dark .btn-group-secondary .btn, .easycp-ca-dark .btn-view-details, .easycp-ca-dark .btn-custom-action, .easycp-ca-dark .btn-action { background-color: #262e3a !important; border-color: #39434f !important; color: #e5e8ee !important; } .easycp-ca-dark .btn-default:hover, .easycp-ca-dark .btn-light:hover, .easycp-ca-dark .btn-secondary:hover, .easycp-ca-dark .btn-outline-light:hover, .easycp-ca-dark .btn-outline-secondary:hover, .easycp-ca-dark .btn-group-secondary .btn:hover, .easycp-ca-dark .btn-view-details:hover, .easycp-ca-dark .btn-custom-action:hover, .easycp-ca-dark .btn-action:hover { background-color: #313b48 !important; border-color: #47535f !important; color: #ffffff !important; } .easycp-ca-dark .btn-default.disabled, .easycp-ca-dark .btn-default:disabled, .easycp-ca-dark .btn.disabled { opacity: .55; } /* Dropdown toggles inside those groups */ .easycp-ca-dark .btn-group .dropdown-toggle { background-color: #262e3a !important; border-color: #39434f !important; color: #e5e8ee !important; } /* ── Stat tiles (SERVICES / QUOTES / TICKETS / INVOICES) ───────────────────── Markup is .tiles > a.tile > .stat + .title + .highlight */ .easycp-ca-dark .tiles, .easycp-ca-dark .tiles .tile, .easycp-ca-dark a.tile { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .tiles .tile .stat { color: #ffffff !important; } .easycp-ca-dark .tiles .tile .title { color: var(--ecpd-muted) !important; } .easycp-ca-dark .tiles .tile:hover { background-color: var(--ecpd-raised) !important; } /* the coloured accent strip under each tile stays as-is (brand colour) */ /* ── The white breadcrumb bar under the header ───────────────────────────── */ .easycp-ca-dark .master-breadcrumb, .easycp-ca-dark .master-breadcrumb .breadcrumb { background-color: var(--ecpd-raised) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .master-breadcrumb a { color: var(--ecpd-link) !important; } .easycp-ca-dark .master-breadcrumb .breadcrumb-item.active, .easycp-ca-dark .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ecpd-muted) !important; } /* ── Panel headers/footers inside the home panels ────────────────────────── */ .easycp-ca-dark .panel, .easycp-ca-dark .panel-body, .easycp-ca-dark .panel-heading, .easycp-ca-dark .panel-footer { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .panel-heading { background-color: var(--ecpd-raised) !important; } /* ── Labels / status pills keep their colour but stay readable ───────────── */ .easycp-ca-dark .label-default { background-color: #39434f !important; color: #e5e8ee !important; } /* =========================================================================== ROUND 3 — injected chrome must look identical to the marketing pages =========================================================================== */ /* Header/footer links: use OUR tokens, never Bootstrap's link blue. */ /* Only shield the chrome from the blanket WHMCS link colour above — the actual colours come from site.css so they match the marketing pages exactly. */ .easycp-ca-dark .ecp-header a, .easycp-ca-dark .ecp-footer a { color: inherit; } .easycp-ca-dark .ecp-footer__col a { color: rgba(255,255,255,.86); } .easycp-ca-dark .ecp-footer__col a:hover { color: #ffffff; } /* Our own buttons keep their marketing styling (the header "Backup Manager" was rendering as a pale pill with white-on-white text). */ .easycp-ca-dark .ecp-btn--primary { background: var(--ecp-ink) !important; border-color: var(--ecp-ink) !important; color: var(--ecp-on-primary) !important; } .easycp-ca-dark .ecp-btn--primary:hover { background: var(--ecp-ink-hover) !important; color: var(--ecp-on-primary) !important; } .easycp-ca-dark .ecp-btn--ghost { background: transparent !important; border-color: var(--ecp-line) !important; color: var(--ecp-text) !important; } .easycp-ca-dark .ecp-btn--ghost:hover { background: color-mix(in srgb, var(--ecp-text) 8%, transparent) !important; color: var(--ecp-text) !important; } /* Announcement bar keeps its own colours */ .easycp-ca-dark .ecp-announcement a { color: inherit !important; } /* =========================================================================== ROUND 4 — remaining light patches found across the whole client area Selectors taken from twenty-one's own templates/theme.css. =========================================================================== */ /* ── DataTables list rows (My Products, Invoices, Quotes, Tickets, Emails) ── theme.css paints table.table-list rows white; the header was already dark so rows stood out as white bands with unreadable text. */ .easycp-ca-dark table.table-list, .easycp-ca-dark table.table-list tbody, .easycp-ca-dark table.table-list tbody tr, .easycp-ca-dark table.table-list tbody td, .easycp-ca-dark .dataTables_wrapper table.table-list, .easycp-ca-dark .dataTables_wrapper table.table-list tbody tr, .easycp-ca-dark .dataTables_wrapper table.table-list tbody td, .easycp-ca-dark table.dataTable tbody tr, .easycp-ca-dark table.dataTable tbody td { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark table.table-list tbody tr:hover td, .easycp-ca-dark table.dataTable tbody tr:hover td { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark table.table-list tbody tr:nth-of-type(odd) td { background-color: #1a2029 !important; } /* empty-state row: "No Records Found" / "No Articles Found" */ .easycp-ca-dark td.dataTables_empty, .easycp-ca-dark .dataTables_empty { background-color: var(--ecpd-surface) !important; color: var(--ecpd-muted) !important; } .easycp-ca-dark .dataTables_wrapper .dataTables_info, .easycp-ca-dark .dataTables_wrapper .dataTables_length, .easycp-ca-dark .dataTables_wrapper .dataTables_filter { color: var(--ecpd-text) !important; } .easycp-ca-dark .dataTables_wrapper .dataTables_filter input { background-color: var(--ecpd-input) !important; border-color: #2f3742 !important; color: var(--ecpd-text) !important; } /* ── Empty-state / message panels ("No Downloads to Display" etc.) ───────── */ .easycp-ca-dark .card.bg-default, .easycp-ca-dark .bg-default, .easycp-ca-dark .well { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* ── Announcement body, ticket department cards, any .card-body ──────────── */ .easycp-ca-dark .card-body, .easycp-ca-dark .card-title, .easycp-ca-dark .card-text { background-color: transparent !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .card-title { color: #ffffff !important; } /* ── Product details: image tile + tab container are explicitly bg-white ─── */ .easycp-ca-dark .product-details, .easycp-ca-dark .product-details-tab-container, .easycp-ca-dark .tab-content.bg-white, .easycp-ca-dark .tab-content { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; border-color: var(--ecpd-line) !important; } /* ── Invoice view ────────────────────────────────────────────────────────── */ .easycp-ca-dark .card.mb-3, .easycp-ca-dark .card-header, .easycp-ca-dark .card-header.bg-success { color: var(--ecpd-text) !important; } .easycp-ca-dark #invoiceContainer, .easycp-ca-dark .invoice-container { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } /* ── Info/tip boxes ("Tips for a good password", "Usage & cost") ─────────── */ /* .alert-block and .popover are the real classes WHMCS uses for these; the "Usage & cost (estimate)" panel comes from the easycpcb addon, whose templates were not supplied, so it is covered only by the generic rules. */ /* Informational panels ("Usage & cost (estimate)", password tips, etc.). These were blue-tinted with blue text, which read as a link/alert rather than plain information and clashed with the neutral page. They now use the same raised surface and normal text as everything else, with only a subtle accent border to mark them as informational. */ .easycp-ca-dark .alert-info, .easycp-ca-dark .alert-block, .easycp-ca-dark .popover, .easycp-ca-dark .popover-body { background-color: var(--ecpd-raised) !important; border: 1px solid var(--ecpd-line) !important; border-left: 3px solid var(--ecpd-accent) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .alert-info a, .easycp-ca-dark .alert-block a { color: var(--ecpd-link) !important; } .easycp-ca-dark .alert-info strong, .easycp-ca-dark .alert-block strong { color: #ffffff !important; } .easycp-ca-dark .alert-info .small, .easycp-ca-dark .alert-info small, .easycp-ca-dark .alert-block small { color: var(--ecpd-muted) !important; } .easycp-ca-dark .alert-warning { background-color: #33290f !important; color: #f6e3b8 !important; } /* ── Catch-all for inline white backgrounds WHMCS emits in a few places ──── */ .easycp-ca-dark [style*="background:#fff"], .easycp-ca-dark [style*="background: #fff"], .easycp-ca-dark [style*="background-color:#fff"], .easycp-ca-dark [style*="background-color: #fff"] { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } /* ── Markdown/reply editor toolbar in tickets ────────────────────────────── */ .easycp-ca-dark .editor-toolbar, .easycp-ca-dark .CodeMirror, .easycp-ca-dark .CodeMirror-scroll { background-color: var(--ecpd-input) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* =========================================================================== BACKUP MANAGER (easycpcb addon) — dark support --------------------------------------------------------------------------- The addon already inherits our --ecp-* design tokens (--cpb-bg, --cpb-text, --cpb-line all read from them), so colours that use tokens follow us automatically. However its layout surfaces are hardcoded (#fff, #f8f9fa, #dee2e6 ...), which is why job cards, tabs and panels stayed white on a dark page. Those hardcoded surfaces are overridden here. Selectors taken from the addon's own clientarea.tpl. =========================================================================== */ /* Surfaces that are hardcoded #fff */ .easycp-ca-dark .cpb-hero-panel, .easycp-ca-dark .cpb-job-card, .easycp-ca-dark .cpb-tab-pane, .easycp-ca-dark .cpb-tab-pane.cpb-tab-pane-active, .easycp-ca-dark .cpb-profile-panel, .easycp-ca-dark .cpb-group-panel, .easycp-ca-dark .cpb-jumpbar .cpb-job-jump { background: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* Slightly raised surfaces (#f8f9fa / #fafbfd / #f5f7fb) */ .easycp-ca-dark .cpb-usage-card, .easycp-ca-dark .cpb-live-banner, .easycp-ca-dark .cpb-bulkbar, .easycp-ca-dark .cpb-job-bottom, .easycp-ca-dark .cpb-job-meta, .easycp-ca-dark .cpb-job-row, .easycp-ca-dark .cpb-tabs-nav { background: var(--ecpd-raised) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* Tabs: active tab must read as "in front of" the pane */ .easycp-ca-dark .cpb-tab-btn { color: var(--ecpd-muted) !important; } .easycp-ca-dark .cpb-tab-btn:hover { background: var(--ecpd-raised) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .cpb-tab-btn.cpb-tab-active { background: var(--ecpd-surface) !important; color: #ffffff !important; border-color: var(--ecpd-line) var(--ecpd-line) var(--ecpd-surface) !important; border-bottom-color: var(--ecpd-surface) !important; } /* List items and their active state */ .easycp-ca-dark .cpb-profile-item, .easycp-ca-dark .cpb-group-item, .easycp-ca-dark .cpb-source-item { background: transparent !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .cpb-profile-item.active, .easycp-ca-dark .cpb-group-item.active, .easycp-ca-dark #cpb-profile-list .cpb-source-item.active { background: var(--ecpd-raised) !important; color: #ffffff !important; } /* Small controls */ .easycp-ca-dark .cpb-progress-wrap { background: #2a323e !important; } .easycp-ca-dark .cpb-toggle-details, .easycp-ca-dark .cpb-btn-copylink { background: #262e3a !important; border-color: #39434f !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .cpb-toggle-details:hover, .easycp-ca-dark .cpb-btn-copylink:hover { background: #313b48 !important; border-color: #47535f !important; color: #ffffff !important; } .easycp-ca-dark .cpb-live-actions .btn:hover { background: #313b48 !important; color: #ffffff !important; } .easycp-ca-dark .cpb-job-meta .cpb-source-line .badge { background: #2a323e !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .cpb-inline-actions .btn { color: var(--ecpd-text) !important; } /* Accounts tab: the Shared / Reseller source cards (v2.0.89) */ .easycp-ca-dark .cpb-source-card, .easycp-ca-dark .cpb-source-card h4, .easycp-ca-dark .cpb-source-card .text-muted { background: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .cpb-source-card h4 { color: #ffffff !important; background: transparent !important; } .easycp-ca-dark .cpb-source-card .text-muted { background: transparent !important; color: var(--ecpd-muted) !important; } /* =========================================================================== PRODUCT DETAILS TILE (v2.0.92) theme.css sets div.product-details div.product-icon to #efefef, so the tile stayed a pale grey block on a dark page, and the product name / label inside it rendered near-invisible. =========================================================================== */ .easycp-ca-dark div.product-details div.product-icon, .easycp-ca-dark .product-icon { background-color: var(--ecpd-raised) !important; color: var(--ecpd-text) !important; } /* The stacked Font Awesome "disc" behind the glyph */ .easycp-ca-dark .product-icon .fa-stack .fa-circle, .easycp-ca-dark .product-icon .fa-stack-2x { color: #2c3542 !important; } .easycp-ca-dark .product-icon .fa-stack-1x { color: var(--ecpd-text) !important; } /* Product name + group label sitting under/over the icon */ .easycp-ca-dark .product-details .product-icon, .easycp-ca-dark .product-details .channel, .easycp-ca-dark .product-details h3, .easycp-ca-dark .product-details .text-uppercase { color: var(--ecpd-text) !important; } .easycp-ca-dark .product-details .text-muted { color: var(--ecpd-muted) !important; } /* Header account dropdown (v2.1.0) — built by hooks.php from WHMCS's nav. It uses --ecp-surface/--ecp-line so it already follows the theme; these rules only stop the blanket WHMCS link colour from tinting its items. */ .easycp-ca-dark .ecp-hd-menu { box-shadow: 0 18px 48px rgba(0,0,0,.55); } .easycp-ca-dark .ecp-hd-item { color: var(--ecp-text-2) !important; } .easycp-ca-dark .ecp-hd-item:hover { color: var(--ecp-text) !important; } .easycp-ca-dark .ecp-hd-group { color: var(--ecp-muted) !important; } .easycp-ca-dark .ecp-hd-divider { background: var(--ecp-line) !important; } /* Secondary client nav bar (v2.1.2) — sits between the header and breadcrumb. It reads --ecp-* tokens so it follows theme and brand; these rules only stop the blanket WHMCS link colour from tinting its items. */ .easycp-ca-dark #ecp-client-nav { background: color-mix(in srgb, var(--ecp-text) 5%, var(--ecp-surface)) !important; border-bottom-color: var(--ecp-line) !important; } .easycp-ca-dark #ecp-client-nav .ecp-cn-active { color: var(--ecp-text) !important; } .easycp-ca-dark #ecp-client-nav a.ecp-cn-link, .easycp-ca-dark #ecp-client-nav button.ecp-cn-link { color: var(--ecp-text-2) !important; } .easycp-ca-dark #ecp-client-nav a.ecp-cn-link:hover, .easycp-ca-dark #ecp-client-nav button.ecp-cn-link:hover { color: var(--ecp-text) !important; } .easycp-ca-dark #ecp-client-nav .ecp-cn-dropdown-menu { background: var(--ecp-surface) !important; border-color: var(--ecp-line) !important; box-shadow: 0 16px 40px rgba(0,0,0,.5); } .easycp-ca-dark #ecp-client-nav .ecp-cn-dropdown-menu a { color: var(--ecp-text-2) !important; } .easycp-ca-dark #ecp-client-nav .ecp-cn-dropdown-menu a:hover { color: var(--ecp-text) !important; } .easycp-ca-dark #ecp-client-nav .ecp-cn-sep { background: var(--ecp-line) !important; } /* =========================================================================== PORTAL HOME action tiles (v2.1.7) theme.css sets .action-icon-btns a to #fff with #666 text and #c3cfd8 icons, so the "How can we help today" and "Your Account" tiles stayed as white cards on a dark page. Their coloured top accent (.card-accent-*) is kept. =========================================================================== */ .easycp-ca-dark .action-icon-btns a { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark .action-icon-btns a:hover { background-color: var(--ecpd-raised) !important; color: #ffffff !important; } .easycp-ca-dark .action-icon-btns a .ico-container { background-color: transparent !important; } /* LAYOUT SHIFT ON HOVER (WHMCS behaviour, not ours): theme.css grows the icon from 2.6em to 3.4em on hover. Because the icon is in normal flow, the tile gets taller, the whole row reflows and the footer jumps down. Keep the size fixed and scale the glyph instead — transform does not affect layout, so the tile stays exactly the same size and nothing moves. */ .easycp-ca-dark .action-icon-btns a .ico-container, .action-icon-btns a .ico-container { font-size: 2.6em !important; will-change: transform; } .action-icon-btns a .ico-container i { display: inline-block; transition: transform .25s ease, color .25s ease; } .action-icon-btns a:hover .ico-container i { transform: scale(1.18); } .easycp-ca-dark .action-icon-btns a .ico-container i { color: var(--ecpd-muted) !important; } .easycp-ca-dark .action-icon-btns a:hover .ico-container i { color: var(--ecpd-link) !important; } /* "Browse our Products/Services" card + its outline button */ .easycp-ca-dark .card-columns .card, .easycp-ca-dark .card-columns .mc-promo-manage, .easycp-ca-dark .card-columns .mc-promo-login { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark .card-title.pricing-card-title { color: #ffffff !important; } .easycp-ca-dark .btn-outline-primary { color: var(--ecpd-link) !important; border-color: var(--ecpd-link) !important; background-color: transparent !important; } .easycp-ca-dark .btn-outline-primary:hover { background-color: var(--ecpd-link) !important; color: #0d1117 !important; } /* =========================================================================== CART PRODUCT CARDS (standard_cart) — v2.2.1 style.css sets #order-standard_cart .products .product to #fff with a #ddd border, a #f8f8f8 header, #333 titles and #888 meta, so the product cards on a group page stayed white with washed-out text on a dark page. Selectors carry the #order-standard_cart prefix, which is why the earlier generic .card / .panel rules never reached them. =========================================================================== */ .easycp-ca-dark #order-standard_cart .products .product { background: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .products .product header { background: var(--ecpd-raised) !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .products .product header h3, .easycp-ca-dark #order-standard_cart .products .product header span { color: #ffffff !important; } .easycp-ca-dark #order-standard_cart .products .product header .qty { color: var(--ecpd-muted) !important; } .easycp-ca-dark #order-standard_cart .products .product div.product-desc, .easycp-ca-dark #order-standard_cart .products .product div.product-desc-full-width { color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .products .product span.feature-value { color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .products .product div.product-pricing, .easycp-ca-dark #order-standard_cart .products .product div.product-pricing span.price { color: #ffffff !important; } .easycp-ca-dark #order-standard_cart .products .product footer { background: transparent !important; border-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .products .product select { background-color: var(--ecpd-input) !important; border-color: #2f3742 !important; color: var(--ecpd-text) !important; } /* Cart sidebar + section heading on the same page */ .easycp-ca-dark #order-standard_cart .cart-sidebar, .easycp-ca-dark #order-standard_cart .cart-body, .easycp-ca-dark #order-standard_cart .header-lined { background: transparent !important; color: var(--ecpd-text) !important; border-color: var(--ecpd-line) !important; } /* ═══════════════════════════════════════════════════════════════════════════ CART — Configure / View Cart / Review & Checkout (v2.3.6) ─────────────────────────────────────────────────────────────────────────── Verified against the shipped standard_cart/css/style.css. Each rule below names a selector that really exists and really paints light; the light value from style.css is quoted so the next person can re-check it. CORRECTION to the v2.3.5 note: `.order-summary` DOES exist (viewcart.tpl:
) and is #666, already dark. The unreadable white panel was its CHILD, `.summary-container` (#f8f8f8), which nothing targeted. Not a dead selector — a missing one. ═══════════════════════════════════════════════════════════════════════════ */ /* Order Summary inner panel — style.css:428 background-color: #f8f8f8 */ .easycp-ca-dark #order-standard_cart .summary-container { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } /* Summary divider rules — style.css:447 border 1px solid #ccc */ .easycp-ca-dark #order-standard_cart .order-summary .summary-totals { border-top-color: var(--ecpd-line) !important; border-bottom-color: var(--ecpd-line) !important; } /* Summary shell — style.css:411 background-color: #666 */ .easycp-ca-dark #order-standard_cart .order-summary { background-color: var(--ecpd-raised) !important; border-bottom-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .order-summary h2 { color: var(--ecpd-text) !important; } /* style.css:461 loader colour #efefef */ .easycp-ca-dark #order-standard_cart .order-summary .loader { color: var(--ecpd-muted) !important; } /* Configure step: product name/description box — style.css:398 #f8f8f8 */ .easycp-ca-dark #order-standard_cart .product-info { background-color: var(--ecpd-raised) !important; border-top-color: var(--ecpd-line) !important; border-bottom-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .product-info .product-title { color: var(--ecpd-text) !important; } /* Review & Checkout rows — style.css:672 (#fff) and :680 (#eee zebra) */ .easycp-ca-dark #order-standard_cart .view-cart-items .item { background-color: var(--ecpd-surface) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--ecpd-raised) !important; } /* style.css:668 border-bottom 2px #058 / :693 item-domain colour #056 — both too dark to read on a dark panel. */ .easycp-ca-dark #order-standard_cart .view-cart-items { border-bottom-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .view-cart-items .item-domain { color: var(--ecpd-link) !important; } .easycp-ca-dark #order-standard_cart .view-cart-items-header { color: var(--ecpd-text) !important; } /* Promo code box — style.css:797 background-color: #fff, dashed #ccc */ .easycp-ca-dark #order-standard_cart .view-cart-promotion-code { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } /* "Metrics" / section divider label. The span sits ON the rule line and hides it with an opaque background: theme.css .primary-bg-color = #f1f1f1. */ .easycp-ca-dark #order-standard_cart .primary-bg-color, .easycp-ca-dark #order-standard_cart .sub-heading span, .easycp-ca-dark #order-standard_cart .sub-heading-borderless span { background-color: var(--ecpd-bg) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .sub-heading { border-top-color: var(--ecpd-line) !important; } /* Cart form fields — style.css:584 (#registration .field/.form-control, #fff) */ .easycp-ca-dark #order-standard_cart .field, .easycp-ca-dark #order-standard_cart .form-control, .easycp-ca-dark #order-standard_cart .custom-select { background-color: var(--ecpd-input) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .field[disabled], .easycp-ca-dark #order-standard_cart .field[readonly], .easycp-ca-dark #order-standard_cart .form-control[disabled], .easycp-ca-dark #order-standard_cart .form-control[readonly] { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark #order-standard_cart .field-help-text { color: var(--ecpd-muted) !important; } /* Generic body text inside the cart that style.css pins to #333 (:207, :270) */ .easycp-ca-dark #order-standard_cart .cart-body, .easycp-ca-dark #order-standard_cart .secondary-cart-body, .easycp-ca-dark #order-standard_cart .header-lined, .easycp-ca-dark #order-standard_cart .header-lined h1 { color: var(--ecpd-text) !important; } /* Order Summary — subtree fallback (v2.3.9) The .summary-container rule above is correct and verified against standard_cart/css/style.css, yet the panel still rendered white on a live install. That panel's contents are injected by WHMCS's cart JavaScript (configureproduct.tpl:
), so the white is coming from a child element that does not exist in the template and cannot be found by reading it. Rather than guess that child's class name, this neutralises painted backgrounds for the summary subtree ONLY — not the whole cart — while leaving buttons, alerts and badges alone. Narrow enough to be safe, blind enough to catch whatever the JS injects. */ .easycp-ca-dark #order-standard_cart .order-summary, .easycp-ca-dark #order-standard_cart #orderSummary, .easycp-ca-dark #order-standard_cart #producttotal { background-color: var(--ecpd-raised) !important; } .easycp-ca-dark #order-standard_cart .order-summary *:not(.btn):not([class*="btn-"]):not(.alert):not([class*="alert-"]):not(.badge):not(.label), .easycp-ca-dark #order-standard_cart #producttotal *:not(.btn):not([class*="btn-"]):not(.alert):not([class*="alert-"]):not(.badge):not(.label) { background-color: transparent !important; background-image: none !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .order-summary a:not(.btn) { color: var(--ecpd-link) !important; } /* ── Checkout step (cart.php?a=checkout) — v2.4.1 ───────────────────────────── Verified against standard_cart/checkout.tpl + css/style.css. */ /* Account chooser — style.css:1736 background #f6f6f6, :1745 .active #fff */ .easycp-ca-dark #order-standard_cart .account-select-container div.account { background-color: var(--ecpd-surface) !important; border-color: var(--ecpd-line) !important; color: var(--ecpd-text) !important; } .easycp-ca-dark #order-standard_cart .account-select-container div.account.active { background-color: var(--ecpd-raised) !important; border-color: var(--ecpd-link) !important; } .easycp-ca-dark #order-standard_cart .account-select-container { border-right-color: var(--ecpd-line) !important; } .easycp-ca-dark #order-standard_cart .account-select-container div.account label, .easycp-ca-dark #order-standard_cart .account-select-container div.account span, .easycp-ca-dark #order-standard_cart .account-select-container div.account strong { color: var(--ecpd-text) !important; } /* Alerts. These are deliberately excluded from the background rules above so they keep their semantic colour — but Bootstrap's alert backgrounds are LIGHT, while our generic text rules force a light colour onto descendant strong/span/div. The result was an alert whose label was readable and whose value was invisible: "Total Due Today:" showed, the £ amount did not (checkout.tpl:531, an .alert-success with inside). Fix: repaint the alerts themselves for dark, then let every child inherit. */ .easycp-ca-dark #order-standard_cart .alert-success { background-color: rgba(40,167,69,.16) !important; border-color: rgba(40,167,69,.45) !important; color: #7fe3a4 !important; } .easycp-ca-dark #order-standard_cart .alert-warning { background-color: rgba(255,193,7,.14) !important; border-color: rgba(255,193,7,.40) !important; color: #f2d18a !important; } .easycp-ca-dark #order-standard_cart .alert-info { background-color: rgba(23,162,184,.14) !important; border-color: rgba(23,162,184,.40) !important; color: #8fd8e6 !important; } .easycp-ca-dark #order-standard_cart .alert-danger { background-color: rgba(220,53,69,.14) !important; border-color: rgba(220,53,69,.40) !important; color: #ff9aa6 !important; } /* Children inherit the alert's colour instead of the page text colour. NOTE: this must NOT include .alert itself — 'color: inherit' on the alert would discard the semantic colour set above and inherit the page text colour, putting light grey text back on a coloured panel. Descendants only. */ .easycp-ca-dark #order-standard_cart .alert * { color: inherit !important; } .easycp-ca-dark #order-standard_cart .alert a, .easycp-ca-dark #order-standard_cart .alert .alert-link { color: inherit !important; text-decoration: underline; }