/* ============================================================ Ducktape OS theme — Score Record Light/dark via . Poppins, teal primary #3ABBDA, magenta accent #93278F, flat surfaces (no shadows), radii 8/6/3. ============================================================ */ :root, [data-bs-theme="light"] { --dt-primary: #3ABBDA; --dt-primary-hover: #2EA8C4; --dt-primary-text: #ffffff; --dt-magenta: #93278F; --dt-green: #7AC943; --dt-red: #FF1D25; --dt-yellow: #FFCD3C; --dt-grey: #858384; --dt-bg: #FFFFFF; --dt-text: #171717; --dt-text-2: #404040; --dt-border: #E8E8E8; --dt-card: #FAFAFA; --dt-card-border: #F0F0F0; --dt-sidebar: #F5F5F5; --dt-popover: #F0F0F0; --dt-secondary-btn: #E5E5E5; --dt-muted: #E0E0E0; --dt-accent-surface: #E6F5F7; --dt-input-border: #BFBFBF; --dt-hover-overlay: rgba(0,0,0,.03); --dt-active-overlay: rgba(0,0,0,.08); --bs-primary: #3ABBDA; --bs-primary-rgb: 58,187,218; --bs-body-bg: #FFFFFF; --bs-body-color: #171717; --bs-border-color: #E8E8E8; --bs-border-radius: 6px; --bs-border-radius-lg: 8px; --bs-border-radius-sm: 3px; --bs-danger: #FF1D25; --bs-danger-rgb: 255,29,37; --bs-success: #7AC943; --bs-success-rgb: 122,201,67; --bs-warning: #FFCD3C; --bs-warning-rgb: 255,205,60; --bs-info: #3ABBDA; --bs-info-rgb: 58,187,218; } [data-bs-theme="dark"] { --dt-primary: #50C9E3; --dt-primary-hover: #3ABBDA; --dt-primary-text: #171717; --dt-magenta: #93278F; --dt-green: #7AC943; --dt-red: #FF1D25; --dt-yellow: #FFCD3C; --dt-grey: #858384; --dt-bg: #3F3D40; --dt-text: #F2F2F2; --dt-text-2: #B3B3B3; --dt-border: #4B494C; --dt-card: #383638; --dt-card-border: #464447; --dt-sidebar: #333133; --dt-popover: #464447; --dt-secondary-btn: #4B494C; --dt-muted: #4F4D50; --dt-accent-surface: #3A4D50; --dt-input-border: #565355; --dt-hover-overlay: rgba(255,255,255,.04); --dt-active-overlay: rgba(255,255,255,.09); --bs-primary: #50C9E3; --bs-primary-rgb: 80,201,227; --bs-body-bg: #3F3D40; --bs-body-color: #F2F2F2; --bs-border-color: #4B494C; } /* ---------- Base ---------- */ html, body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; } body { background: var(--dt-bg) !important; color: var(--dt-text); } h1,h2,h3,h4,h5,h6 { color: var(--dt-text); } .text-secondary, .text-muted { color: var(--dt-text-2) !important; } a { color: var(--dt-primary); } * { box-shadow: none !important; } /* ---------- App shell ---------- */ .sr-app { background: var(--dt-bg) !important; } .sr-topbar { background: var(--dt-sidebar) !important; border-bottom: 1px solid var(--dt-border); } .sr-burger { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; border-radius: 8px !important; } .sr-drawer { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .sr-drawer .offcanvas-header { border-bottom: 1px solid var(--dt-border) !important; } .sr-drawer .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; } .sr-drawer .nav-link i { color: var(--dt-grey) !important; } .sr-drawer .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; } .sr-drawer .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sr-drawer .nav-link.active i { color: var(--dt-primary) !important; } .sr-drawer-user .u-name, .sr-side-user .u-name { color: var(--dt-text) !important; } .sr-drawer-user .u-mail, .sr-side-user .u-mail { color: var(--dt-text-2) !important; } .sr-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } /* Permanent desktop sidebar - same treatment as the burger drawer so the two navigations look identical whichever one the screen size shows. */ .sr-side { background: var(--dt-sidebar) !important; border-right: 1px solid var(--dt-border) !important; } .sr-side-brand, .sr-side-user, .sr-side-foot { border-color: var(--dt-border) !important; } .sr-side-nav .sr-section { color: var(--dt-grey) !important; } .sr-side-nav .nav-link { color: var(--dt-text-2) !important; } .sr-side-nav .nav-link i { color: var(--dt-grey) !important; } .sr-side-nav .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; } .sr-side-nav .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sr-side-nav .nav-link.active i { color: var(--dt-primary) !important; } /* ---------- Cards & tables ---------- */ .card, .table-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; border-radius: 8px !important; color: var(--dt-text); } .card .card-body { color: var(--dt-text); } .table { --bs-table-bg: transparent; --bs-table-color: var(--dt-text); --bs-table-border-color: var(--dt-border); } .table-light, .table thead.table-light th { background: var(--dt-popover) !important; color: var(--dt-text) !important; } .modal-content { background: var(--dt-popover) !important; color: var(--dt-text) !important; border-radius: 8px !important; border: 1px solid var(--dt-border) !important; } .modal-content.text-dark { color: var(--dt-text) !important; } .modal-content .text-dark { color: var(--dt-text) !important; } .dropdown-menu { background: var(--dt-popover) !important; border: 1px solid var(--dt-border) !important; border-radius: 6px !important; } .dropdown-item { color: var(--dt-text) !important; } .dropdown-item:hover { background: var(--dt-hover-overlay) !important; } hr { border-color: var(--dt-border); opacity: 1; } /* ---------- Buttons ---------- */ .btn { border-radius: 6px !important; font-weight: 500; } .btn-primary, .btn-info { background: var(--dt-primary) !important; border-color: var(--dt-primary-hover) !important; color: var(--dt-primary-text) !important; } .btn-primary:hover, .btn-info:hover { background: var(--dt-primary-hover) !important; } .btn-secondary, .btn-light { background: var(--dt-secondary-btn) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; } .btn-outline-primary, .btn-outline-info { color: var(--dt-primary) !important; border-color: var(--dt-primary) !important; background: transparent !important; } .btn-outline-primary:hover, .btn-outline-info:hover { background: var(--dt-accent-surface) !important; } .btn-outline-secondary { color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--dt-hover-overlay) !important; } [data-bs-theme="dark"] .btn-danger, .btn-outline-danger:hover { background: var(--dt-red) !important; border-color: #d81920 !important; color: #fff !important; } .btn-outline-danger { color: var(--dt-red) !important; border-color: var(--dt-red) !important; background: transparent !important; } .btn-success { background: var(--dt-green) !important; border-color: #69b338 !important; color: #fff !important; } [data-bs-theme="dark"] .btn-warning, .btn-outline-warning { background: var(--dt-magenta) !important; border-color: #7d1f7a !important; color: #fff !important; } .btn-outline-warning { background: transparent !important; color: var(--dt-magenta) !important; border-color: var(--dt-magenta) !important; } .btn:active { background-image: linear-gradient(var(--dt-active-overlay), var(--dt-active-overlay)) !important; } /* ---------- Forms ---------- */ .form-control, .form-select { background-color: var(--dt-bg) !important; color: var(--dt-text) !important; border: 1px solid var(--dt-input-border) !important; border-radius: 6px !important; } /* Keep Bootstrap's dropdown caret visible — a `background` shorthand above would erase it. The arrow is re-declared per theme so it stays readable in dark mode. */ .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important; padding-right: 2.25rem !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; } [data-bs-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F2F2F2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } .form-select-sm { padding-right: 2rem !important; background-position: right .5rem center !important; } .form-control:focus, .form-select:focus { border-color: var(--dt-primary) !important; outline: 2px solid var(--dt-accent-surface); } .form-control::placeholder { color: var(--dt-grey); } .form-label, .form-check-label { color: var(--dt-text); } .input-group-text { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; } /* ---------- Badges / pills ---------- */ .badge { border-radius: 3px !important; font-weight: 500; } .badge.text-bg-light { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-border) !important; } .badge.text-bg-dark { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .badge.text-bg-warning { background: var(--dt-magenta) !important; color: #fff !important; } .badge.text-bg-info, .badge.text-bg-primary { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; } .badge.text-bg-success { background: var(--dt-green) !important; color: #fff !important; } .badge.text-bg-danger { background: var(--dt-red) !important; color: #fff !important; } .alert { border-radius: 8px !important; } .alert-info { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; border-color: var(--dt-primary) !important; } .alert-warning { background: color-mix(in srgb, var(--dt-magenta) 12%, var(--dt-bg)) !important; color: var(--dt-text) !important; border-color: var(--dt-magenta) !important; } /* ---------- Runner console (mobile brand card) ---------- */ .runner-step-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; color: var(--dt-text) !important; border-radius: 8px !important; } .runner-step-card .r-title, .runner-step-card h5, .runner-step-card .fw-bold { color: var(--dt-text) !important; } .runner-step-card .text-white-50, .runner-step-card .opacity-75 { color: var(--dt-text-2) !important; } .r-btn { border-radius: 6px !important; } /* ---------- Type pills on card grids (keep semantic, retint brand ones) ---------- */ .tp-purple { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .tp-pink { background: color-mix(in srgb, var(--dt-magenta) 15%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; } /* ---------- Team/Zone dashboards: green bars -> primary blue ---------- */ .dash-wrap { background: var(--dt-bg) !important; color: var(--dt-text) !important; } .dash-wrap .bar { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; } .dash-wrap .rrow, .dash-wrap .trow { border-color: var(--dt-border) !important; } .dash-wrap .rrow .nm, .dash-wrap .rrow .vl, .dash-wrap .gp .nm, .dash-wrap .gp .vl, .dash-wrap .trow .nm, .dash-wrap .trow .vv, .dash-wrap .tname, .dash-wrap .scoreitem .nm, .dash-wrap .scoreitem .vl, .dash-wrap .dash-head .round { color: var(--dt-text) !important; } .dash-wrap .gp.danger .vl, .dash-wrap .dash-head .timer { color: var(--dt-red) !important; } /* ---------- Misc ---------- */ .offcanvas { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; } .list-group-item { background: var(--dt-card) !important; color: var(--dt-text) !important; border-color: var(--dt-card-border) !important; } .nav-tabs .nav-link.active { background: var(--dt-card) !important; color: var(--dt-primary) !important; border-color: var(--dt-border) !important; } .text-primary { color: var(--dt-primary) !important; } .bg-primary { background: var(--dt-primary) !important; } /* Theme toggle button */ .dt-theme-toggle { border: 1px solid var(--dt-input-border); background: var(--dt-secondary-btn); color: var(--dt-text); border-radius: 6px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; } .dt-theme-toggle:hover { background-image: linear-gradient(var(--dt-hover-overlay), var(--dt-hover-overlay)); } /* ---------- SuperAdmin sidebar ---------- */ .sidebar { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; border-right: 1px solid var(--dt-border); } .sidebar-brand { border-bottom: 1px solid var(--dt-border) !important; } .sidebar .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; } .sidebar .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; } .sidebar .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sidebar .text-white, .sidebar .small.fw-semibold, .sidebar-username { color: var(--dt-text) !important; } .sidebar .logout-link { color: var(--dt-text-2) !important; } .user-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .sidebar-brand .brand-role { color: var(--dt-primary) !important; } /* Theme-aware logos */ .dt-logo-dark { display: none; } [data-bs-theme="dark"] .dt-logo-light { display: none; } [data-bs-theme="dark"] .dt-logo-dark { display: inline; } /* Desk list filter bar */ .desk-filter { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; } .desk-filter .form-label { color: var(--dt-text-2) !important; } .desk-filter .input-group-text { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; border-color: var(--dt-input-border) !important; } /* Tag-style multiselect */ .ts-box { background: var(--dt-bg) !important; border-color: var(--dt-input-border) !important; } .ts-input { color: var(--dt-text) !important; } .ts-list { background: var(--dt-popover) !important; border-color: var(--dt-border) !important; } .ts-opt { color: var(--dt-text) !important; } .ts-opt:hover { background: var(--dt-hover-overlay) !important; } .ts-empty { color: var(--dt-grey) !important; } /* Facilitator console sections + tools */ .seq-chip { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; color: var(--dt-text-2) !important; } .seq-chip.done { background: var(--dt-accent-surface) !important; border-color: var(--dt-border) !important; color: var(--dt-text) !important; } [data-bs-theme="dark"] .seq-chip.current { background: var(--dt-primary) !important; border-color: var(--dt-primary) !important; color: #08282f !important; } .rs { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; } .rs-title { color: var(--dt-text) !important; } .rs-sum, .rs-toggle, .rs-grip { color: var(--dt-grey) !important; } .tool-row { border-color: var(--dt-card-border) !important; } .tool-name { color: var(--dt-text) !important; } .tool-url { color: var(--dt-grey) !important; } /* Current object pills + object control */ .obj-type { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .state-pending { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; } [data-bs-theme="dark"] .state-ready { background: color-mix(in srgb, #FAC775 22%, var(--dt-bg)) !important; color: #FAC775 !important; } [data-bs-theme="dark"] .state-active { background: color-mix(in srgb, var(--dt-green) 20%, var(--dt-bg)) !important; color: var(--dt-green) !important; } [data-bs-theme="dark"] .state-complete { background: color-mix(in srgb, var(--dt-primary) 20%, var(--dt-bg)) !important; color: var(--dt-primary) !important; } .rs-accent { border-color: var(--dt-primary) !important; } .oc-note { color: var(--dt-grey) !important; } /* ===== Dark mode gaps ===== These live in site.css with hard-coded light surfaces and had no dark counterpart, so in dark mode they stayed white cards with near-white text on them — unreadable. Each one is mapped onto the same tokens the rest of the theme uses. */ /* Card grids on the Event, Object and Sequence lists */ .m-obj-card { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; } .m-obj-name { color: var(--dt-text) !important; } .m-obj-card .text-secondary, .m-obj-card .small { color: var(--dt-text-2) !important; } /* Dashboard */ .kpi-accent, .dash-card { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; } .quick-link { color: var(--dt-primary) !important; } .quick-link:hover { color: var(--dt-text) !important; } /* Facilitator console chrome */ .joined-badge { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } .seq-chip:hover { border-color: var(--dt-primary) !important; color: var(--dt-text) !important; } .tool-ico { color: var(--dt-primary) !important; } [data-bs-theme="dark"] .r-btn-ready { background: #7a5a12 !important; color: #FAE3B0 !important; } .r-btn-complete { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; } [data-bs-theme="dark"] .pill-ready { background: color-mix(in srgb, #FAC775 22%, var(--dt-bg)) !important; color: #FAC775 !important; } .m-run-btn.m-run-outline { background: transparent !important; color: var(--dt-text) !important; border-color: var(--dt-border) !important; } /* Type pills that were still light-only */ [data-bs-theme="dark"] .tp-red { background: color-mix(in srgb, var(--dt-magenta) 16%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; } [data-bs-theme="dark"] .tp-amber { background: color-mix(in srgb, #FAC775 18%, var(--dt-bg)) !important; color: #FAC775 !important; } .tp-gray { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; } .ib-purple { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; } [data-bs-theme="dark"] .ib-red { background: color-mix(in srgb, var(--dt-magenta) 16%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; } /* Form bits */ .tag-select:focus-within .ts-box { border-color: var(--dt-primary) !important; outline-color: var(--dt-accent-surface) !important; } [data-bs-theme="dark"] .pu-qty.pu-qty-bad { background: color-mix(in srgb, #FF1D25 12%, var(--dt-bg)) !important; border-color: #FF1D25 !important; } .img-preview-existing { background: var(--dt-bg) !important; border-color: var(--dt-input-border) !important; } /* Dashboard charts + event list */ .chart-legend { color: var(--dt-text-2) !important; } .event-list .sort-link:hover { color: var(--dt-primary) !important; } .event-table thead th { background: var(--dt-sidebar) !important; border-color: var(--dt-border) !important; color: var(--dt-text-2) !important; } .ev-sub { color: var(--dt-grey) !important; } .ev-code { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; } .chart-wrap canvas { color-scheme: normal; } /* Playlist rail arrows */ .seq-nav { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; color: var(--dt-text-2) !important; } .seq-nav:hover:not(:disabled) { border-color: var(--dt-primary) !important; color: var(--dt-text) !important; } .seq-count { color: var(--dt-grey) !important; } /* Scoped: these were appended unscoped, so !important applied the dark colours to the light theme as well, leaving a washed-out logout link on the white sidebar. */ [data-bs-theme="dark"] .sidebar-user { border-top-color: var(--dt-border) !important; } [data-bs-theme="dark"] .sidebar-user .logout-link { color: var(--dt-text-2) !important; } [data-bs-theme="dark"] .sidebar-user .logout-link:hover { color: #FF9B9B !important; } /* 6.77:1 */ .m-obj-foot { border-top-color: var(--dt-card-border) !important; } /* ============================================================ DARK MODE CONTRAST PASS Purple reads well on white but collapses on the dark surfaces (#3F3D40 / #383638) — most of these sat between 1.0:1 and 1.6:1, effectively invisible. Text goes white; chips keep their identity by tinting the surface and lightening the text together. ============================================================ */ [data-bs-theme="dark"] { /* ---- Purple text -> white ---- */ .text-primary, .m-obj-name, .obj-type, .quick-link, .r-btn-complete, .m-run-btn.m-run-outline, .sidebar-brand .brand-role, h1, h2, h3, h4, h5, h6 { color: var(--dt-text) !important; } .quick-link:hover { color: var(--dt-primary) !important; } /* ---- Muted greys: legible without shouting ---- */ .m-obj-sub, .ev-sub, .ts-empty, .seq-count, .rs-sum, .rs-toggle, .tool-url, .oc-note, .chart-legend, .desk-filter .form-label, .ev-code, .event-table thead th, .sidebar .sr-nav-label { color: var(--dt-text-2) !important; } .sidebar .nav-link.disabled { color: var(--dt-grey) !important; } /* ---- Chips: tint the surface, lighten the text ---- Recolouring only the text would have left dark text on a pale chip, or light text on a pale chip — both unreadable. */ .tp-purple, .ib-purple, .joined-badge { background: color-mix(in srgb, #A79BFF 20%, var(--dt-card)) !important; color: #CFC7FF !important; } .tp-teal { background: color-mix(in srgb, #37C29B 20%, var(--dt-card)) !important; color: #6FE0C0 !important; } .tp-red, .ib-red { background: color-mix(in srgb, #FF6B6B 20%, var(--dt-card)) !important; color: #FF9B9B !important; } .tp-blue { background: color-mix(in srgb, #5AA9F0 20%, var(--dt-card)) !important; color: #93C9F7 !important; } .tp-pink { background: color-mix(in srgb, #F06699 20%, var(--dt-card)) !important; color: #F79CBE !important; } .tp-amber, .pill-ready, .r-btn-ready { background: color-mix(in srgb, #F0B429 20%, var(--dt-card)) !important; color: #F5CF77 !important; } .tp-gray { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; } .region-pill { background: color-mix(in srgb, #37C29B 20%, var(--dt-card)) !important; color: #6FE0C0 !important; } /* ---- Run state labels ---- */ .state-pending { color: var(--dt-text-2) !important; } .state-ready { color: #F5CF77 !important; } .state-active { color: #7FD858 !important; } [data-bs-theme="dark"] .state-complete { color: #79B8F5 !important; } /* ---- Playlist rail ---- */ .seq-chip { color: var(--dt-text-2) !important; } .seq-chip:hover { color: var(--dt-text) !important; } .seq-chip.done { background: color-mix(in srgb, #7FD858 18%, var(--dt-card)) !important; border-color: color-mix(in srgb, #7FD858 40%, var(--dt-card)) !important; color: #9BE47C !important; } /* .current keeps its filled green background, so its own text stays white. */ [data-bs-theme="dark"] .seq-chip.current { color: #FFFFFF !important; } .seq-nav { color: var(--dt-text-2) !important; } .seq-nav:hover:not(:disabled) { color: var(--dt-text) !important; } } /* Change-password link: the light-mode teal is unreadable on the dark sidebar. */ [data-bs-theme="dark"] .pwd-link { color: #6FD3EC !important; }