/* Colour scheme support for the legacy centered pages (login, forgot password, TFA, docs, referral form). Loaded by the centered / centered-no-address layouts after the per-controller CSS so its dark overrides win the cascade. The data-bs-theme="dark" attribute is set on before first paint by assets/js/colour-scheme.js, which shares the 'colour-scheme' localStorage key with the Ember app. */ /* ------------------- light / dark / auto toggle --------------------- */ .colour-scheme-toggle { display: flex; justify-content: center; margin: 15px 0 20px 0; } .colour-scheme-toggle button { font-family: inherit; font-size: 13px; color: #444444; background-color: transparent; border: 1px solid #d4d4d4; border-right-width: 0; padding: 6px 14px; margin: 0; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .colour-scheme-toggle button:first-child { border-radius: 8px 0 0 8px; } .colour-scheme-toggle button:last-child { border-right-width: 1px; border-radius: 0 8px 8px 0; } .colour-scheme-toggle button:hover { color: #33145d; } .colour-scheme-toggle button.active { background-color: #efe9f7; color: #33145d; font-weight: 600; } /* --------------------------- dark scheme ---------------------------- */ [data-bs-theme="dark"] { /* dark scrollbars and native form widgets */ color-scheme: dark; } [data-bs-theme="dark"] body { background-color: #1d1e24; } [data-bs-theme="dark"] #centered_body { color: #c6c8ce; } [data-bs-theme="dark"] #centered_container .box { background-color: #2a2b33; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] #centered_container .box .branding { border-right-color: #3a3b45; } [data-bs-theme="dark"] .branding-phone-icon { color: #b3abd6; } [data-bs-theme="dark"] #centered_container a { color: #b3abd6; } [data-bs-theme="dark"] #centered_container a:hover, [data-bs-theme="dark"] #centered_container a:focus { color: #f9955a; } [data-bs-theme="dark"] #centered_container .box .content h1, [data-bs-theme="dark"] #centered_container .box .content h2 { color: #d9d3ee; } [data-bs-theme="dark"] #centered_container .box .content h2.h2-smaller { color: #a6a8b3; } [data-bs-theme="dark"] #centered_container .box .content input.text, [data-bs-theme="dark"] #centered_container .box .content select.text { color: #e6e7ea; background-color: #1f2027; border-color: #4a4658; } [data-bs-theme="dark"] #centered_container .box .content input.text:focus, [data-bs-theme="dark"] #centered_container .box .content select.text:focus { border-color: #b3abd6; box-shadow: 0 0 0 3px rgba(179, 171, 214, 0.15); } [data-bs-theme="dark"] #centered_container div.form_error { color: #f2b8b5; } /* orange primary buttons keep their light-mode colours — they already contrast well on dark surfaces */ [data-bs-theme="dark"] #centered_container .box .content input.button-secondary, [data-bs-theme="dark"] #centered_container .box .content a.button-secondary { background-color: #3a3b45 !important; color: #e6e7ea !important; } [data-bs-theme="dark"] #centered_container .box .content a.button-link { background-color: transparent !important; color: #d9d3ee !important; } [data-bs-theme="dark"] #centered_container .box .content input.button.button-outline-secondary { color: #a6a8b3 !important; border-color: #5a5c68 !important; background-color: transparent !important; } [data-bs-theme="dark"] #centered_container .box .content input.button.button-outline-secondary:hover { background-color: #3a3b45 !important; } [data-bs-theme="dark"] #centered_container .box .links { border-top-color: #3a3b45; } [data-bs-theme="dark"] #centered_container .box .links .applink .thumbnail { background-color: #3a3450; color: #cfc8ea; } [data-bs-theme="dark"] #centered_container .box .links .applink .text { color: #cfc8ea; } [data-bs-theme="dark"] #centered_container .box .links .applink:hover .thumbnail, [data-bs-theme="dark"] #centered_container .box .links .applink:focus .thumbnail { background-color: #cfc8ea; color: #2a2b33; } [data-bs-theme="dark"] #centered_container .outter-text { color: #9a9ca6; } [data-bs-theme="dark"] .table thead tr th { border-bottom-color: #8f919a; } [data-bs-theme="dark"] .table tbody tr td { border-bottom-color: #3a3b45; } [data-bs-theme="dark"] .ui-autocomplete { background-color: #2a2b33 !important; border-color: #f9955a; } [data-bs-theme="dark"] .ui-autocomplete li { color: #e6e7ea !important; } /* flash messages (base colours in layout.css) */ [data-bs-theme="dark"] .error, [data-bs-theme="dark"] .alert { background-color: #3a2320; color: #f2b8b5; border-color: #6d3a2f; } [data-bs-theme="dark"] .notice { background-color: #3a331d; color: #f0dca0; border-color: #8a6d2f; } [data-bs-theme="dark"] .success { background-color: #22331f; color: #b7e0a5; border-color: #4a6e3a; } [data-bs-theme="dark"] .info { background-color: #1e2f3a; color: #a5d3ec; border-color: #2f5a74; } [data-bs-theme="dark"] .error a, [data-bs-theme="dark"] .alert a { color: #f2b8b5 !important; } [data-bs-theme="dark"] .notice a { color: #f0dca0 !important; } [data-bs-theme="dark"] .success a { color: #b7e0a5 !important; } [data-bs-theme="dark"] .info a { color: #a5d3ec !important; } /* toggle on dark */ [data-bs-theme="dark"] .colour-scheme-toggle button { color: #9a9ca6; border-color: #3a3b45; } [data-bs-theme="dark"] .colour-scheme-toggle button:hover { color: #d9d3ee; } [data-bs-theme="dark"] .colour-scheme-toggle button.active { background-color: #3a3450; color: #d9d3ee; } /* ---------------------------- dark logo ------------------------------ Both logo variants are in the markup (views/layouts/centered.php and centered-no-address.php); hide whichever doesn't match the scheme. Only the hidden one gets display touched, so the visible one keeps its inline / block layout from centered.css and auth.css — which also means these selectors must outrank auth.css's "#centered_container .box.stacked .branding img { display: block }". */ html:not([data-bs-theme="dark"]) #centered_container .box .branding img.branding-logo-dark, [data-bs-theme="dark"] #centered_container .box .branding img.branding-logo-light { display: none; }