/* * AffTrack UI v2 - dark theme * Added 2026-09-29. Shared, byte-identical, by all four v2 portals: * afftrack_v3 public/assets/v2/theme-dark.css (admin, affiliate, merchant) * my.afftrack public_html/assets/v2/theme-dark.css (customer + staff admin) * * How it works * - at-theme.js (loaded in , before paints) sets * from the at_theme cookie ("light" | "dark" | "auto", default auto = follow the OS). * - Bootstrap 5.3 switches its own components on data-bs-theme="dark". * - This file re-points the --at-* design tokens and fixes the handful of rules in * admin-v2.css / components.css / affiliate-v2.css / merchant-v2.css / my-v2.css that use * hard-coded light colours. Everything here is scoped to html[data-bs-theme="dark"], so the * light theme is untouched. * - Load it LAST, after every other v2 stylesheet and after the inline :root brand block. * * Brand colour: the per-instance --at-brand is kept for filled surfaces (primary buttons, active * date, badges) so --at-brand-contrast stays valid. Text and outlines that used the brand colour * switch to --at-brand-hi, a lighter mix that stays readable on the dark surfaces. * The block "Brand text (generated)" at the bottom is generated from the v2 stylesheets: every * rule whose text colour is var(--at-brand). Regenerate it if new rules like that are added. */ /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ html[data-bs-theme="dark"] { color-scheme: dark; --at-brand-hi: color-mix(in srgb, var(--at-brand) 55%, #ffffff); --at-bg: #0f131a; --at-surface: #171c24; --at-surface-2: #1d232d; --at-border: #2a313c; --at-border-strong: #3a4250; --at-text: #e4e7ec; --at-text-muted: #98a2b3; --at-danger: #f0736f; --at-success: #6fd39a; --at-warning: #f5c26b; --at-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35); /* Bootstrap 5.3 dark variables, aligned to the v2 surfaces */ --bs-body-bg: var(--at-surface); --bs-body-bg-rgb: 23, 28, 36; --bs-body-color: var(--at-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(228, 231, 236, .72); --bs-secondary-bg: var(--at-surface-2); --bs-tertiary-bg: #1a2029; --bs-border-color: var(--at-border); --bs-border-color-translucent: rgba(255, 255, 255, .12); --bs-link-color: var(--at-brand-hi); --bs-link-hover-color: var(--at-brand-hi); --bs-link-color-rgb: var(--at-brand-hi-rgb, 170, 180, 230); --bs-link-hover-color-rgb: var(--at-brand-hi-rgb, 170, 180, 230); --bs-heading-color: var(--at-text); --bs-code-color: #f59ac6; --bs-light-rgb: 29, 35, 45; --bs-dark-rgb: 228, 231, 236; } /* The inline :root brand block re-sets --bs-link-color after the stylesheets; win it back on body. */ html[data-bs-theme="dark"] body { --bs-link-color: var(--at-brand-hi); --bs-link-color-rgb: var(--at-brand-hi-rgb, 170, 180, 230); --bs-link-hover-color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) body.at-v2 { color: var(--at-text); } /* ------------------------------------------------------------------ */ /* Shell */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .at-nav a.at-nav-link { color: #c3cad5; } :where(html[data-bs-theme="dark"]) .at-icon-btn { color: #aeb7c4; } :where(html[data-bs-theme="dark"]) .at-sidebar { box-shadow: none; } :where(html[data-bs-theme="dark"]) body.at-nav-open .at-backdrop { background: rgba(0, 0, 0, .55); } :where(html[data-bs-theme="dark"]) .at-login-card, :where(html[data-bs-theme="dark"]) .at-public-card { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } :where(html[data-bs-theme="dark"]) .at-alert-system { border-color: rgba(240, 115, 111, .45); background: rgba(240, 115, 111, .12); color: #f7b4b1; } :where(html[data-bs-theme="dark"]) .at-alert-invoice { border-color: rgba(245, 194, 107, .45); background: rgba(245, 194, 107, .10); color: #f5d59a; } :where(html[data-bs-theme="dark"]) .at-login-card .at-modern .btn.text-danger { color: #f0736f !important; } /* ------------------------------------------------------------------ */ /* Bootstrap bits the v2 CSS pins to light values */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .at-v2 .btn-light { --bs-btn-bg: var(--at-surface-2); --bs-btn-color: var(--at-text); --bs-btn-border-color: var(--at-border-strong); --bs-btn-hover-bg: #262d38; --bs-btn-hover-color: #ffffff; --bs-btn-hover-border-color: #4a5362; --bs-btn-active-bg: #2c3441; --bs-btn-active-color: #ffffff; --bs-btn-active-border-color: #4a5362; --bs-btn-disabled-bg: var(--at-surface-2); --bs-btn-disabled-color: var(--at-text-muted); --bs-btn-disabled-border-color: var(--at-border); } :where(html[data-bs-theme="dark"]) .at-legacy .btn-default { --bs-btn-color: var(--at-text); --bs-btn-bg: var(--at-surface-2); --bs-btn-border-color: var(--at-border-strong); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #262d38; --bs-btn-active-bg: #2c3441; } :where(html[data-bs-theme="dark"]) .at-v2 .nav-link, :where(html[data-bs-theme="dark"]) .at-v2 .form-label, :where(html[data-bs-theme="dark"]) .at-table > thead > tr > th, :where(html[data-bs-theme="dark"]) .at-legacy th, :where(html[data-bs-theme="dark"]) .at-legend { color: #aeb7c4; } :where(html[data-bs-theme="dark"]) .at-tabs a, :where(html[data-bs-theme="dark"]) .at-tabs button { color: #aeb7c4 !important; } :where(html[data-bs-theme="dark"]) .at-seg-item { color: #c3cad5 !important; } :where(html[data-bs-theme="dark"]) .at-empty i { color: #5d6776; } :where(html[data-bs-theme="dark"]) .at-v2 .modal-content { box-shadow: 0 20px 48px rgba(0, 0, 0, .6); } :where(html[data-bs-theme="dark"]) .at-v2 .dropdown-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); } :where(html[data-bs-theme="dark"]) .bg-white { background-color: var(--at-surface) !important; } :where(html[data-bs-theme="dark"]) .bg-light { background-color: var(--at-surface-2) !important; } :where(html[data-bs-theme="dark"]) .text-dark { color: var(--at-text) !important; } :where(html[data-bs-theme="dark"]) .table-light { --bs-table-color: var(--at-text); --bs-table-bg: var(--at-surface-2); --bs-table-border-color: var(--at-border); } :where(html[data-bs-theme="dark"]) .at-table { --bs-table-hover-bg: rgba(255, 255, 255, .035); } /* Bare controls without BS5 classes still get the legacy grey from style.min.css */ :where(html[data-bs-theme="dark"]) body.at-v2 select:not(.form-select):not([multiple]), :where(html[data-bs-theme="dark"]) body.at-v2 textarea:not(.form-control), :where(html[data-bs-theme="dark"]) body.at-v2 input[type="text"]:not(.form-control), :where(html[data-bs-theme="dark"]) body.at-v2 input[type="password"]:not(.form-control), :where(html[data-bs-theme="dark"]) body.at-v2 input[type="email"]:not(.form-control), :where(html[data-bs-theme="dark"]) body.at-v2 input[type="number"]:not(.form-control), :where(html[data-bs-theme="dark"]) body.at-v2 input:not([type]):not(.form-control) { background-color: var(--at-surface-2); color: var(--at-text); border-color: var(--at-border-strong); box-shadow: none; } :where(html[data-bs-theme="dark"]) body.at-v2 select[multiple]:not(.form-select) { background-color: var(--at-surface-2); color: var(--at-text); } :where(html[data-bs-theme="dark"]) .at-v2 .form-control::placeholder { color: #6b7584; } :where(html[data-bs-theme="dark"]) .at-v2 .form-control:disabled, :where(html[data-bs-theme="dark"]) .at-v2 .form-select:disabled, :where(html[data-bs-theme="dark"]) .at-v2 .form-control[readonly] { background-color: #1a2029; color: var(--at-text-muted); } /* ------------------------------------------------------------------ */ /* Components */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .at-pill { background: rgba(255, 255, 255, .08); color: #c3cad5; } :where(html[data-bs-theme="dark"]) .at-pill-success { background: rgba(62, 190, 115, .16); color: #7ddba5; } :where(html[data-bs-theme="dark"]) .at-pill-warning { background: rgba(245, 176, 65, .16); color: #f5c878; } :where(html[data-bs-theme="dark"]) .at-pill-danger { background: rgba(240, 82, 82, .16); color: #f7a3a0; } :where(html[data-bs-theme="dark"]) .at-pill-info { background: rgba(66, 153, 225, .16); color: #8ccaf7; } :where(html[data-bs-theme="dark"]) .at-pill-brand { background: rgba(var(--at-brand-rgb), .22); color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-pill-neutral { background: rgba(255, 255, 255, .08); color: #aeb7c4; } :where(html[data-bs-theme="dark"]) .at-legacy .label { background: rgba(255, 255, 255, .08); color: #c3cad5 !important; } :where(html[data-bs-theme="dark"]) .at-legacy .label-success { background: rgba(62, 190, 115, .16); color: #7ddba5 !important; } :where(html[data-bs-theme="dark"]) .at-legacy .label-warning { background: rgba(245, 176, 65, .16); color: #f5c878 !important; } :where(html[data-bs-theme="dark"]) .at-legacy .label-danger { background: rgba(240, 82, 82, .16); color: #f7a3a0 !important; } :where(html[data-bs-theme="dark"]) .at-legacy .label-info { background: rgba(66, 153, 225, .16); color: #8ccaf7 !important; } :where(html[data-bs-theme="dark"]) .at-legacy .label-primary { background: rgba(var(--at-brand-rgb), .22); color: var(--at-brand-hi) !important; } :where(html[data-bs-theme="dark"]) .at-legacy .badge:not([class*="bg-"]):not([class*="text-bg-"]) { background: #4a5362; } :where(html[data-bs-theme="dark"]) .at-legacy .admin_notice { border-color: rgba(245, 194, 107, .45) !important; background: rgba(245, 194, 107, .10) !important; } :where(html[data-bs-theme="dark"]) .at-card-attn { border-color: rgba(245, 194, 107, .45); } :where(html[data-bs-theme="dark"]) .at-card-attn > .at-card-head { background: rgba(245, 194, 107, .10); border-bottom-color: rgba(245, 194, 107, .35); } :where(html[data-bs-theme="dark"]) .at-list-icon.attn { background: rgba(240, 82, 82, .16); } :where(html[data-bs-theme="dark"]) .at-savebar { background: rgba(23, 28, 36, .94); } /* ------------------------------------------------------------------ */ /* jQuery UI (its own stylesheet is light-only) */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .ui-widget-content, :where(html[data-bs-theme="dark"]) .ui-datepicker, :where(html[data-bs-theme="dark"]) .ui-autocomplete, :where(html[data-bs-theme="dark"]) .ui-dialog { background: var(--at-surface) !important; color: var(--at-text) !important; border-color: var(--at-border) !important; } :where(html[data-bs-theme="dark"]) .ui-widget-header, :where(html[data-bs-theme="dark"]) .ui-datepicker .ui-datepicker-title { background: transparent; color: var(--at-text) !important; border-color: var(--at-border); } :where(html[data-bs-theme="dark"]) .ui-dialog .ui-dialog-titlebar { color: var(--at-text); } :where(html[data-bs-theme="dark"]) .ui-datepicker, :where(html[data-bs-theme="dark"]) .ui-autocomplete { box-shadow: 0 8px 24px rgba(0, 0, 0, .55); } :where(html[data-bs-theme="dark"]) .ui-dialog { box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } :where(html[data-bs-theme="dark"]) .ui-state-default, :where(html[data-bs-theme="dark"]) .ui-widget-content .ui-state-default { background: var(--at-surface-2) !important; border-color: var(--at-border) !important; color: var(--at-text) !important; } :where(html[data-bs-theme="dark"]) .ui-state-hover, :where(html[data-bs-theme="dark"]) .ui-widget-content .ui-state-hover, :where(html[data-bs-theme="dark"]) .ui-state-default:hover { background: #262d38 !important; border-color: var(--at-border-strong) !important; color: #ffffff !important; } :where(html[data-bs-theme="dark"]) .ui-state-highlight, :where(html[data-bs-theme="dark"]) .ui-widget-content .ui-state-highlight { background: rgba(var(--at-brand-rgb), .22) !important; border-color: rgba(var(--at-brand-rgb), .55) !important; color: #ffffff !important; } :where(html[data-bs-theme="dark"]) .ui-datepicker .ui-state-active, :where(html[data-bs-theme="dark"]) .ui-datepicker .ui-state-active:hover { background: var(--at-brand) !important; border-color: var(--at-brand) !important; color: var(--at-brand-contrast) !important; } :where(html[data-bs-theme="dark"]) .ui-autocomplete .ui-state-active { color: #ffffff !important; background: rgba(var(--at-brand-rgb), .25) !important; } :where(html[data-bs-theme="dark"]) .ui-datepicker .ui-icon, :where(html[data-bs-theme="dark"]) .ui-dialog .ui-icon { filter: invert(1); } /* DataTables 3 (bs5) */ :where(html[data-bs-theme="dark"]) div.dt-container .dt-paging .dt-paging-button { color: var(--at-text) !important; } /* ------------------------------------------------------------------ */ /* Affiliate + merchant portals (affiliate-v2.css, merchant-v2.css) */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .at-copy-btn.is-done, :where(html[data-bs-theme="dark"]) .at-payout.is-custom, :where(html[data-bs-theme="dark"]) .at-amount-payable { color: #6fd39a; } :where(html[data-bs-theme="dark"]) .at-amount-hold { color: #f5b35a; } :where(html[data-bs-theme="dark"]) .at-aff .at-table tr.is-inactive > td { background: rgba(245, 158, 11, .08); } :where(html[data-bs-theme="dark"]) .at-creative-img { background: repeating-conic-gradient(#262d38 0% 25%, #1d232d 0% 50%) 50% / 16px 16px; } /* Creative previews and iframes stay white: they show the advertiser's own HTML. */ /* ------------------------------------------------------------------ */ /* my.afftrack (my-v2.css) */ /* ------------------------------------------------------------------ */ :where(html[data-bs-theme="dark"]) .at-nav-label { color: #6b7584; } :where(html[data-bs-theme="dark"]) .at-nav-badge { color: #aeb7c4; } :where(html[data-bs-theme="dark"]) .at-nav-badge.hot { background: rgba(240, 82, 82, .16); border-color: rgba(240, 82, 82, .4); color: #f7a3a0; } :where(html[data-bs-theme="dark"]) .at-balance.due { background: rgba(240, 82, 82, .16); color: #f7a3a0; } :where(html[data-bs-theme="dark"]) .at-balance.credit { background: rgba(62, 190, 115, .16); color: #7ddba5; } :where(html[data-bs-theme="dark"]) .at-callout.danger { border-color: rgba(240, 82, 82, .4); background: rgba(240, 82, 82, .10); color: #f7b4b1; } :where(html[data-bs-theme="dark"]) .at-callout.warning { border-color: rgba(245, 176, 65, .4); background: rgba(245, 176, 65, .09); color: #f5d59a; } :where(html[data-bs-theme="dark"]) .at-callout.info { border-color: rgba(66, 153, 225, .4); background: rgba(66, 153, 225, .09); color: #a9d6f8; } :where(html[data-bs-theme="dark"]) .at-callout.success { border-color: rgba(62, 190, 115, .4); background: rgba(62, 190, 115, .09); color: #9fe3bb; } :where(html[data-bs-theme="dark"]) .at-msg-avatar { background: rgba(255, 255, 255, .08); color: #c3cad5; } :where(html[data-bs-theme="dark"]) .at-msg.internal .at-msg-bubble { background: rgba(245, 176, 65, .08); border-color: rgba(245, 176, 65, .4); } :where(html[data-bs-theme="dark"]) pre.at-pre { background: #0b0f15; border: 1px solid var(--at-border); } :where(html[data-bs-theme="dark"]) .at-toast { box-shadow: 0 12px 28px rgba(0, 0, 0, .55); } /* ------------------------------------------------------------------ */ /* Theme switch (topbar button, user-menu picker, login/public corner) */ /* These apply in both themes. */ /* ------------------------------------------------------------------ */ .at-theme-btn .at-theme-ico-dark { display: none; } :where(html[data-bs-theme="dark"]) .at-theme-btn .at-theme-ico-dark { display: inline-block; } :where(html[data-bs-theme="dark"]) .at-theme-btn .at-theme-ico-light { display: none; } .at-theme-pick { display: flex; gap: 4px; padding: 4px 12px 6px; } .at-theme-pick-label { padding: 6px 16px 0; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--at-text-muted); } .at-theme-pick button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; font-size: .75rem; font-weight: 600; color: var(--at-text); background: var(--at-surface-2); border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); cursor: pointer; } .at-theme-pick button:hover { border-color: var(--at-border-strong); } .at-theme-pick button[aria-pressed="true"] { background: rgba(var(--at-brand-rgb), .12); border-color: rgba(var(--at-brand-rgb), .55); color: var(--at-brand); } :where(html[data-bs-theme="dark"]) .at-theme-pick button[aria-pressed="true"] { background: rgba(var(--at-brand-rgb), .25); color: var(--at-brand-hi); } .at-theme-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1050; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--at-surface); color: var(--at-text-muted); border: 1px solid var(--at-border); box-shadow: var(--at-shadow); cursor: pointer; } .at-theme-fab:hover { color: var(--at-text); border-color: var(--at-border-strong); } @media print { .at-theme-fab { display: none !important; } } /* ------------------------------------------------------------------ */ /* Brand text (generated from the v2 stylesheets, see header) */ /* ------------------------------------------------------------------ */ html[data-bs-theme="dark"] { --bs-link-color: var(--at-brand-hi); --bs-link-hover-color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-nav a.at-nav-link.active { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-avatar { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-legacy a { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-legacy .label-primary { color: var(--at-brand-hi) !important; } :where(html[data-bs-theme="dark"]) .at-login-card .at-modern .btn-link.at-login-link { --bs-btn-color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-v2 .btn-outline-primary { --bs-btn-color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-v2 .page-link { --bs-pagination-color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-modern a { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-seg-item.active { color: var(--at-brand-hi) !important; } :where(html[data-bs-theme="dark"]) .at-seg-item.active .at-seg-count { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-table th a.at-sort.active i { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-pill-brand { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-list-icon { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-avatar-lg { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-tabs a.active, :where(html[data-bs-theme="dark"]) .at-tabs button.active { color: var(--at-brand-hi) !important; } :where(html[data-bs-theme="dark"]) .at-login-alt a { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-copy-btn:hover { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) code.at-token { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-radio-seg input:checked + label { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-aff .at-table th a.at-sort:hover { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-aff .at-table th a.at-sort.active { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-nav a.at-nav-link.at-nav-top.active > i { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-link-btn { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-steps > li::before { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-msg.staff .at-msg-avatar { color: var(--at-brand-hi); } :where(html[data-bs-theme="dark"]) .at-kpi-icon { color: var(--at-brand-hi); }