/* ========================================================================== Filoz dark mode Applied via data-bs-theme="dark" on (set by /js/theme.js). Section 1 recreates the Bootstrap 5.3 dark variable block (this site's bootstrap.css build was compiled without it), tuned to the Filoz palette. Section 2+ covers the hard-coded light colors in style.css / dashboard.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme variables -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { color-scheme: dark; /* Filoz surface scale (indigo-tinted ink) */ --fz-page: #0e1322; --fz-surface: #151c31; --fz-surface-2: #1c2440; --fz-border: #29314e; --bs-body-color: #cdd3e1; --bs-body-color-rgb: 205, 211, 225; --bs-body-bg: var(--fz-page); --bs-body-bg-rgb: 14, 19, 34; --bs-emphasis-color: #f4f6fb; --bs-emphasis-color-rgb: 244, 246, 251; --bs-secondary-color: #8f97ad; --bs-secondary-color-rgb: 143, 151, 173; --bs-secondary-bg: #232b47; --bs-secondary-bg-rgb: 35, 43, 71; --bs-tertiary-color: rgba(205, 211, 225, 0.5); --bs-tertiary-color-rgb: 205, 211, 225; --bs-tertiary-bg: #171e35; --bs-tertiary-bg-rgb: 23, 30, 53; --bs-primary-text-emphasis: #8fb3ff; --bs-secondary-text-emphasis: #aab1c4; --bs-success-text-emphasis: #6fd39c; --bs-info-text-emphasis: #6edff6; --bs-warning-text-emphasis: #ffda6a; --bs-danger-text-emphasis: #f08d8d; --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #C9CED5; --bs-primary-bg-subtle: #1b2148; --bs-secondary-bg-subtle: #1c2233; --bs-success-bg-subtle: #0e2b1d; --bs-info-bg-subtle: #032830; --bs-warning-bg-subtle: #332701; --bs-danger-bg-subtle: #2e1214; --bs-light-bg-subtle: #1c2233; --bs-dark-bg-subtle: #0b0f1b; --bs-primary-border-subtle: #34406e; --bs-secondary-border-subtle: #3a4258; --bs-success-border-subtle: #1e5c3c; --bs-info-border-subtle: #087990; --bs-warning-border-subtle: #997404; --bs-danger-border-subtle: #842c2c; --bs-light-border-subtle: #2b3350; --bs-dark-border-subtle: #2b3350; --bs-heading-color: inherit; --bs-link-color: #7da8ff; --bs-link-color-rgb: 125, 168, 255; --bs-link-hover-color: #9dbdff; --bs-link-hover-color-rgb: 157, 189, 255; --bs-code-color: #e685b5; --bs-highlight-color: #cdd3e1; --bs-highlight-bg: #664d03; --bs-border-color: var(--fz-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3); --bs-focus-ring-color: rgba(125, 168, 255, 0.25); --bs-form-valid-color: #6fd39c; --bs-form-valid-border-color: #6fd39c; --bs-form-invalid-color: #f08d8d; --bs-form-invalid-border-color: #f08d8d; /* global-notice.css variables */ --bg: rgba(21, 28, 49, 0.92); --border: rgba(125, 168, 255, 0.28); --text: #e7ebf5; --muted: #aab1c4; --shadow: 0 18px 50px rgba(0, 0, 0, 0.5); --ring: 0 0 0 3px rgba(125, 168, 255, 0.25); } /* -------------------------------------------------------------------------- 2. Bootstrap components the build hard-codes for light -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .btn-close:not(.navpanel-close) { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cdd3e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--fz-surface-2); -webkit-box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.55), 0px 1px 2px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.55), 0px 1px 2px 0px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .modal { --bs-modal-bg: var(--fz-surface); } [data-bs-theme="dark"] .card { --bs-card-bg: var(--fz-surface); } [data-bs-theme="dark"] .toast { --bs-toast-bg: var(--fz-surface-2); } [data-bs-theme="dark"] .accordion { --bs-accordion-active-color: var(--bs-emphasis-color); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' fill='none'%3e%3cpath fill='%23f4f6fb' d='m9.25 6.625 6.813-6.5c.187-.188.437-.188.625 0l1.187 1.188c.188.187.188.437 0 .625L9.562 9.875A.477.477 0 0 1 9.25 10a.477.477 0 0 1-.313-.125l-8.312-8c-.188-.188-.188-.438 0-.625L1.813.062c.187-.187.437-.187.625 0L9.25 6.625Z'/%3e%3c/svg%3e"); } /* Utility classes that pin light colors */ [data-bs-theme="dark"] .bg-white { background-color: var(--fz-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .text-dark { color: var(--bs-emphasis-color) !important; } /* link-* utilities hard-code light-theme colors with !important; the dark variants below must also use !important to win. Decoration color is set too because the originals pin it separately. */ [data-bs-theme="dark"] .link-dark { color: var(--bs-emphasis-color) !important; -webkit-text-decoration-color: var(--bs-emphasis-color) !important; text-decoration-color: var(--bs-emphasis-color) !important; } [data-bs-theme="dark"] .link-dark:hover, [data-bs-theme="dark"] .link-dark:focus { color: #ffffff !important; -webkit-text-decoration-color: #ffffff !important; text-decoration-color: #ffffff !important; } [data-bs-theme="dark"] .link-primary { color: #8fb3ff !important; -webkit-text-decoration-color: #8fb3ff !important; text-decoration-color: #8fb3ff !important; } [data-bs-theme="dark"] .link-primary:hover, [data-bs-theme="dark"] .link-primary:focus { color: #a9c4ff !important; -webkit-text-decoration-color: #a9c4ff !important; text-decoration-color: #a9c4ff !important; } [data-bs-theme="dark"] .link-danger { color: #f08d8d !important; -webkit-text-decoration-color: #f08d8d !important; text-decoration-color: #f08d8d !important; } [data-bs-theme="dark"] .link-danger:hover, [data-bs-theme="dark"] .link-danger:focus { color: #f5a8a8 !important; -webkit-text-decoration-color: #f5a8a8 !important; text-decoration-color: #f5a8a8 !important; } [data-bs-theme="dark"] .link-success { color: #6fd39c !important; -webkit-text-decoration-color: #6fd39c !important; text-decoration-color: #6fd39c !important; } [data-bs-theme="dark"] .link-success:hover, [data-bs-theme="dark"] .link-success:focus { color: #8ddfb2 !important; -webkit-text-decoration-color: #8ddfb2 !important; text-decoration-color: #8ddfb2 !important; } [data-bs-theme="dark"] .link-secondary:hover, [data-bs-theme="dark"] .link-secondary:focus { color: #aab1c4 !important; -webkit-text-decoration-color: #aab1c4 !important; text-decoration-color: #aab1c4 !important; } /* -------------------------------------------------------------------------- 3. Shared site components (style.css + dashboard.css) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #10162a; } [data-bs-theme="dark"] body { background-color: var(--fz-page); } [data-bs-theme="dark"] .header { background: var(--fz-surface); border-bottom-color: var(--fz-border); } /* The header logo pair: show the indigo logo on light, the white one on dark */ .header .logo .logo_dark { display: none; } [data-bs-theme="dark"] .header .logo .logo_light { display: none; } [data-bs-theme="dark"] .header .logo .logo_dark { display: inline-block; } [data-bs-theme="dark"] .block { background-color: var(--fz-surface); border-color: var(--fz-border); } [data-bs-theme="dark"] .block-tabs { -webkit-box-shadow: inset 0 -1px 0 var(--fz-border); box-shadow: inset 0 -1px 0 var(--fz-border); } [data-bs-theme="dark"] .block-tabs .nav-link { color: #aab1c4; } [data-bs-theme="dark"] .block-tabs .nav-link:hover { color: #8fb3ff; } [data-bs-theme="dark"] .block-tabs .nav-link.active { border-color: #7da8ff; color: #8fb3ff; } [data-bs-theme="dark"] .btn-outline-light { border-color: var(--fz-border); } [data-bs-theme="dark"] .btn-outline-light:hover, [data-bs-theme="dark"] .btn-outline-light:focus, [data-bs-theme="dark"] .btn-outline-light:active, [data-bs-theme="dark"] .btn-outline-light.active { color: var(--bs-emphasis-color); border-color: #3a4462; background-color: rgba(255, 255, 255, 0.04); } [data-bs-theme="dark"] .accordion-item { border-color: var(--fz-border) !important; } [data-bs-theme="dark"] .paging a, [data-bs-theme="dark"] .paging span { background-color: rgba(125, 168, 255, 0.12); color: var(--bs-body-color); } [data-bs-theme="dark"] .paging a:hover { background-color: rgba(125, 168, 255, 0.2); } [data-bs-theme="dark"] .paging span { background-color: #2F2FA2; color: #fff; } [data-bs-theme="dark"] .codes-textarea .form-control, [data-bs-theme="dark"] .uploadItem .codes-input .form-control { background-color: var(--fz-page); } [data-bs-theme="dark"] .tab-buttons { border-color: var(--fz-border); } [data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(125, 168, 255, 0.08); } [data-bs-theme="dark"] .table thead th { background-color: var(--fz-surface-2); } [data-bs-theme="dark"] .tabs { background-color: var(--fz-page); -webkit-box-shadow: inset 0 -1px 0 var(--fz-border); box-shadow: inset 0 -1px 0 var(--fz-border); } [data-bs-theme="dark"] .tabs .nav-link { background: rgba(125, 168, 255, 0.08); border-bottom-color: var(--fz-border); } [data-bs-theme="dark"] .tabs .nav-link.active { background-color: var(--fz-surface); color: var(--bs-emphasis-color); border-color: var(--fz-border); border-bottom-color: var(--fz-surface); } [data-bs-theme="dark"] .control-buttons { background-color: var(--fz-surface); -webkit-box-shadow: 0px -1px 0 0 var(--fz-border); box-shadow: 0px -1px 0 0 var(--fz-border); } [data-bs-theme="dark"] .divider-text { border-top-color: var(--fz-border); } [data-bs-theme="dark"] .divider-text span { background-color: var(--fz-surface); } [data-bs-theme="dark"] .table thead a img, [data-bs-theme="dark"] .files .table thead img { filter: invert(1); } [data-bs-theme="dark"] .table-rounded { border-color: var(--fz-border); } [data-bs-theme="dark"] .table-rounded th + th, [data-bs-theme="dark"] .table-rounded td + td { border-left-color: var(--fz-border) !important; } /* -------------------------------------------------------------------------- 4. Public pages (style.css) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .advantages { background: #0b101d; } [data-bs-theme="dark"] .advantages-item { background-color: var(--fz-surface); -webkit-box-shadow: 0px 12px 40px -27px rgba(0, 0, 0, 0.6), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 12px 40px -27px rgba(0, 0, 0, 0.6), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] .advantages-icon { background-color: rgba(125, 168, 255, 0.12); color: #8fb3ff; } [data-bs-theme="dark"] .counters .number { color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .login { background-color: var(--fz-surface); border-color: var(--fz-border); } [data-bs-theme="dark"] .fileItem { border-color: var(--fz-border); } [data-bs-theme="dark"] .fileItem:hover { border-color: #4a5578; } [data-bs-theme="dark"] .download-title { color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .download-btn[disabled] { background-color: rgba(125, 168, 255, 0.12) !important; color: rgba(157, 189, 255, 0.55) !important; } [data-bs-theme="dark"] .preview-image { border-color: var(--fz-border); } [data-bs-theme="dark"] .premiumPlan { background-color: var(--fz-surface); -webkit-box-shadow: 0px 2px 24px -6px rgba(0, 0, 0, 0.5), 0px 1px 2px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 24px -6px rgba(0, 0, 0, 0.5), 0px 1px 2px 0px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .premiumTable { background: var(--fz-surface); border-color: var(--fz-border); } [data-bs-theme="dark"] .premiumTable .col { background-color: var(--fz-page); border-left-color: var(--fz-surface); } [data-bs-theme="dark"] .premiumTable .col.premium { background-color: rgba(125, 168, 255, 0.1); } [data-bs-theme="dark"] .premiumTable .col:first-child { background-color: var(--fz-surface); color: var(--bs-body-color); } [data-bs-theme="dark"] .color-primary { color: #8fb3ff; } /* -------------------------------------------------------------------------- 5. Dashboard (dashboard.css) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .top-bar { background-color: var(--fz-surface); border-bottom-color: var(--fz-border); } [data-bs-theme="dark"] .earn-mode input { border-color: var(--fz-border); } [data-bs-theme="dark"] .earn-mode input:checked { border-color: #7da8ff; background-color: var(--fz-page); } [data-bs-theme="dark"] .earn-mode input ~ label { border-color: var(--fz-border); } [data-bs-theme="dark"] .earn-mode input:disabled ~ label { background-color: var(--bs-tertiary-bg); } [data-bs-theme="dark"] .earn-mode input:checked ~ label { border-color: rgba(125, 168, 255, 0.65); background-color: rgba(125, 168, 255, 0.12); color: #8fb3ff; } [data-bs-theme="dark"] .form-switcher input { background-color: #3a4462; } [data-bs-theme="dark"] .form-switcher input:checked { background-color: #1E9754; } [data-bs-theme="dark"] .check-radio input[type="radio"], [data-bs-theme="dark"] .check-radio input[type="checkbox"] { background-color: var(--fz-page); border-color: #3a4462; } [data-bs-theme="dark"] .check-radio input[type="radio"]:checked, [data-bs-theme="dark"] .check-radio input[type="checkbox"]:checked { border-color: rgba(125, 168, 255, 0.65); background-color: rgba(125, 168, 255, 0.15); } [data-bs-theme="dark"] .settings-table tr { border-bottom-color: var(--fz-border); } [data-bs-theme="dark"] .watermark-position, [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(1), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(2), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(3), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(4), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(5), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(6), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(8), [data-bs-theme="dark"] .watermark-position .check-radio:nth-child(9) { border-color: var(--fz-border); } /* -------------------------------------------------------------------------- 6. Upload dropzone (upload.css) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .dropbox { border-color: #3a4462; } [data-bs-theme="dark"] .dropbox:hover, [data-bs-theme="dark"] .dropbox.active { border-color: rgba(125, 168, 255, 0.6); background-color: rgba(125, 168, 255, 0.08); } /* -------------------------------------------------------------------------- 7. Cookie / notice banners (glowCookies inlines its colors from JS config) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .glowCookies__banner, [data-bs-theme="dark"] .prebanner { background-color: var(--fz-surface-2) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .glowCookies__banner h3, [data-bs-theme="dark"] .glowCookies__banner p { color: var(--bs-body-color) !important; } /* -------------------------------------------------------------------------- 8. Theme toggle button (markup in header.html / header_cp.html) -------------------------------------------------------------------------- */ .theme-toggle { color: var(--bs-secondary-color); border-radius: 50%; -webkit-transition: color .15s, background-color .15s; -o-transition: color .15s, background-color .15s; transition: color .15s, background-color .15s; } .theme-toggle:hover { color: var(--bs-emphasis-color); background-color: rgba(125, 135, 157, 0.15); } .theme-toggle .theme-icon-sun { display: none; } [data-bs-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } [data-bs-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }