/** * Comprehensive Theme System for AudioScriptPro * * Applies dark mode overrides to Bootstrap 5 components * and custom UI elements. Activated by the .dark-mode class * on (set by preferences.ts theme switcher). */ /* ========================================================================== Base & Body ========================================================================== */ .dark-mode { color-scheme: dark; } .dark-mode body { background-color: var(--asp-bg); color: var(--asp-text); } /* ========================================================================== Cards ========================================================================== */ .dark-mode .card { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .card-header { background-color: var(--asp-bg-tertiary); border-bottom-color: var(--asp-border); color: var(--asp-text); } .dark-mode .card-footer { background-color: var(--asp-bg-tertiary); border-top-color: var(--asp-border); } /* ========================================================================== Navbar ========================================================================== */ .dark-mode .navbar { background-color: var(--asp-bg-secondary) !important; border-bottom-color: var(--asp-border); } .dark-mode .navbar-brand, .dark-mode .nav-link { color: var(--asp-text) !important; } .dark-mode .nav-link:hover { color: var(--asp-primary) !important; } .dark-mode .navbar-toggler { border-color: var(--asp-border); } /* ========================================================================== Forms ========================================================================== */ .dark-mode .form-control, .dark-mode .form-select { background-color: var(--asp-bg-tertiary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .form-control:focus, .dark-mode .form-select:focus { background-color: var(--asp-bg-tertiary); border-color: var(--asp-primary); color: var(--asp-text); box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25); } .dark-mode .form-control::placeholder { color: var(--asp-text-muted); } .dark-mode .form-text { color: var(--asp-text-secondary); } .dark-mode .form-label { color: var(--asp-text); } .dark-mode .form-check-input { background-color: var(--asp-bg-tertiary); border-color: var(--asp-border); } .dark-mode .form-check-input:checked { background-color: var(--asp-primary); border-color: var(--asp-primary); } .dark-mode .input-group-text { background-color: var(--asp-bg-tertiary); border-color: var(--asp-border); color: var(--asp-text-secondary); } /* ========================================================================== Tables ========================================================================== */ .dark-mode .table { color: var(--asp-text); border-color: var(--asp-border); } .dark-mode .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--asp-border); color: var(--asp-text); } .dark-mode .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.05); } .dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); } .dark-mode thead { border-bottom-color: var(--asp-border); } .dark-mode th { color: var(--asp-text-secondary); } /* ========================================================================== Buttons ========================================================================== */ .dark-mode .btn-outline-secondary { color: var(--asp-text-secondary); border-color: var(--asp-border); } .dark-mode .btn-outline-secondary:hover { background-color: var(--asp-bg-tertiary); color: var(--asp-text); } .dark-mode .btn-light { background-color: var(--asp-bg-tertiary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ========================================================================== Badges ========================================================================== */ .dark-mode .badge.bg-light { background-color: var(--asp-bg-tertiary) !important; color: var(--asp-text) !important; } /* ========================================================================== List Groups ========================================================================== */ .dark-mode .list-group-item { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .list-group-item.active { background-color: var(--asp-primary); border-color: var(--asp-primary); } .dark-mode .list-group-item-action:hover { background-color: var(--asp-bg-tertiary); color: var(--asp-text); } /* ========================================================================== Modals ========================================================================== */ .dark-mode .modal-content { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .modal-header { border-bottom-color: var(--asp-border); } .dark-mode .modal-footer { border-top-color: var(--asp-border); } /* ========================================================================== Dropdowns ========================================================================== */ .dark-mode .dropdown-menu { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); } .dark-mode .dropdown-item { color: var(--asp-text); } .dark-mode .dropdown-item:hover, .dark-mode .dropdown-item:focus { background-color: var(--asp-bg-tertiary); color: var(--asp-text); } .dark-mode .dropdown-divider { border-top-color: var(--asp-border); } /* ========================================================================== Alerts ========================================================================== */ .dark-mode .alert-info { background-color: rgba(13, 202, 240, 0.15); border-color: rgba(13, 202, 240, 0.3); color: #6edff6; } .dark-mode .alert-warning { background-color: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.3); color: #ffda6a; } .dark-mode .alert-danger { background-color: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); color: #ea868f; } .dark-mode .alert-success { background-color: rgba(25, 135, 84, 0.15); border-color: rgba(25, 135, 84, 0.3); color: #75b798; } /* ========================================================================== Nav Tabs / Pills ========================================================================== */ .dark-mode .nav-tabs { border-bottom-color: var(--asp-border); } .dark-mode .nav-tabs .nav-link { color: var(--asp-text-secondary); } .dark-mode .nav-tabs .nav-link:hover { border-color: var(--asp-border); } .dark-mode .nav-tabs .nav-link.active { background-color: var(--asp-bg-secondary); border-color: var(--asp-border) var(--asp-border) var(--asp-bg-secondary); color: var(--asp-text); } .dark-mode .nav-pills .nav-link.active { background-color: var(--asp-primary); } /* ========================================================================== Pagination ========================================================================== */ .dark-mode .page-item .page-link { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); color: var(--asp-text); } .dark-mode .page-item .page-link:hover { background-color: var(--asp-bg-tertiary); color: var(--asp-text); } .dark-mode .page-item.active .page-link { background-color: var(--asp-primary); border-color: var(--asp-primary); } .dark-mode .page-item.disabled .page-link { background-color: var(--asp-bg-tertiary); color: var(--asp-text-muted); } /* ========================================================================== Progress Bars ========================================================================== */ .dark-mode .progress { background-color: var(--asp-bg-tertiary); } /* ========================================================================== Breadcrumbs ========================================================================== */ .dark-mode .breadcrumb { background-color: var(--asp-bg-tertiary); } .dark-mode .breadcrumb-item a { color: var(--asp-primary); } .dark-mode .breadcrumb-item.active { color: var(--asp-text-secondary); } /* ========================================================================== Pre / Code ========================================================================== */ .dark-mode pre { background-color: var(--asp-bg-tertiary) !important; color: var(--asp-text) !important; } .dark-mode code { color: #e685b5; } .dark-mode kbd { background-color: var(--asp-bg-tertiary); border-color: var(--asp-border); color: var(--asp-text); } /* ========================================================================== Specific Components: Toasts ========================================================================== */ .dark-mode .toast { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); color: var(--asp-text); } /* ========================================================================== Specific Components: Accordion ========================================================================== */ .dark-mode .accordion-item { background-color: var(--asp-bg-secondary); border-color: var(--asp-border); } .dark-mode .accordion-button { background-color: var(--asp-bg-secondary); color: var(--asp-text); } .dark-mode .accordion-button:not(.collapsed) { background-color: var(--asp-bg-tertiary); color: var(--asp-text); } .dark-mode .accordion-button::after { filter: invert(1); } /* ========================================================================== Custom Components: SRT Editor ========================================================================== */ .dark-mode #editor-container { border-color: var(--asp-border); } .dark-mode .cm-editor { background-color: var(--asp-bg-secondary); } .dark-mode .cm-editor .cm-gutters { background-color: var(--asp-bg-tertiary); border-right-color: var(--asp-border); color: var(--asp-text-muted); } .dark-mode .cm-editor .cm-content { color: var(--asp-text); } .dark-mode .cm-editor .cm-activeLine { background-color: rgba(255, 255, 255, 0.05); } .dark-mode .cm-editor .cm-activeLineGutter { background-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .cm-editor .cm-selectionBackground { background-color: rgba(13, 110, 253, 0.3) !important; } /* ========================================================================== Custom Components: Waveform ========================================================================== */ .dark-mode #waveform-container { background-color: var(--asp-bg-tertiary) !important; } /* ========================================================================== Custom Components: Search/Replace Panel ========================================================================== */ .dark-mode .search-replace-panel { background-color: var(--asp-bg-tertiary) !important; border-bottom-color: var(--asp-border) !important; } /* ========================================================================== Custom Components: Diff View ========================================================================== */ .dark-mode .diff-added { background-color: rgba(25, 135, 84, 0.2); } .dark-mode .diff-removed { background-color: rgba(220, 53, 69, 0.2); } .dark-mode .diff-line-number { background-color: var(--asp-bg-tertiary); color: var(--asp-text-muted); } /* ========================================================================== Utility Overrides ========================================================================== */ .dark-mode .bg-light { background-color: var(--asp-bg-tertiary) !important; } .dark-mode .bg-white { background-color: var(--asp-bg-secondary) !important; } .dark-mode .border { border-color: var(--asp-border) !important; } .dark-mode .border-bottom { border-bottom-color: var(--asp-border) !important; } .dark-mode .text-dark { color: var(--asp-text) !important; } .dark-mode .text-muted { color: var(--asp-text-secondary) !important; } .dark-mode a { color: #93b4fd; } .dark-mode a:hover { color: #bdd0fe; } .dark-mode hr { border-top-color: var(--asp-border); } /* ========================================================================== Scrollbar ========================================================================== */ .dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } .dark-mode ::-webkit-scrollbar-track { background: var(--asp-bg-tertiary); } .dark-mode ::-webkit-scrollbar-thumb { background-color: var(--asp-border); border-radius: 4px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background-color: var(--asp-text-muted); } /* ========================================================================== Component Overrides (components.css dark mode) ========================================================================== */ .dark-mode .hero-gradient { background: linear-gradient(to bottom, var(--asp-bg-tertiary), var(--asp-bg)); } .dark-mode .feature-icon { background: var(--asp-tint-info); color: #93b4fd; } .dark-mode .auth-card-accent { border-image: var(--asp-gradient-header); border-image-slice: 1; } /* Chat glass overrides use variables, so they adapt automatically */ /* Upload drop zone dark mode */ .dark-mode #drop-zone:hover, .dark-mode #drop-zone.drag-over { background-color: var(--asp-tint-info); }