.label { display: inline-block; } #dvd { position: absolute; width: 512px; height: 512px; border: 0 !important; } .section { padding:5rem 0 5rem 0; } html { overflow-y: auto !important; } /* -------------------------------------------------- */ /* Theme variables */ /* Light defaults on :root and dark overrides below */ /* -------------------------------------------------- */ :root { --bg: #ffffff; --text: #1f2937; /* gray-800 */ --muted: #6b7280; /* gray-500 */ --border: rgba(0, 0, 0, 0.08); --surface: #ffffff; --surface-elev: #ffffff; --shadow: 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 8px 18px rgba(0,0,0,0.12); --link: #2563eb; --link-hover: #1d4ed8; --input-bg: #ffffff; --input-text: #1f2937; --input-border: #d1d5db; } [data-theme="dark"] :root, html[data-theme="dark"], body[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; --muted: #9ca3af; /* gray-400 */ --border: #2a2a2a; --surface: #1e1e1e; --surface-elev: #1f1f1f; --shadow: 0 2px 6px rgba(0,0,0,0.4); --shadow-lg: 0 8px 18px rgba(0,0,0,0.5); --link: #9ec3ff; --link-hover: #c6ddff; --input-bg: #2a2a2a; --input-text: #e0e0e0; --input-border: #3a3a3a; } .checkbox { display: flex; align-items: center; gap:10px; } .checkbox:hover{ color: darkgray; } input[type="checkbox"] { width: 18px; height: 18px; } /* --------------------------------------------- */ /* Dark theme (activated by [data-theme="dark"] on or ) */ /* --------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"], body[data-theme="dark"] { background-color: var(--bg); color: var(--text); } /* Links */ html[data-theme="dark"] a, body[data-theme="dark"] a { color: var(--link); } html[data-theme="dark"] a:hover, body[data-theme="dark"] a:hover { color: var(--link-hover); } /* Headings */ html[data-theme="dark"] .title, body[data-theme="dark"] .title { color: #ffffff; } html[data-theme="dark"] .subtitle, body[data-theme="dark"] .subtitle { color: #c0c0c0; } /* Labels */ html[data-theme="dark"] .label, body[data-theme="dark"] .label { color: var(--text); } /* Navbar (Bulma .is-light variant overridden for dark) */ html[data-theme="dark"] .navbar.is-light, body[data-theme="dark"] .navbar.is-light { background-color: var(--surface-elev) !important; color: var(--text) !important; border-bottom: 1px solid var(--border); } html[data-theme="dark"] .navbar.is-light .navbar-item, body[data-theme="dark"] .navbar.is-light .navbar-link { color: #e0e0e0; background-color: #1f1f1f; } html[data-theme="dark"] .navbar.is-light .navbar-item:hover, body[data-theme="dark"] .navbar.is-light .navbar-link:hover { background-color: #2a2a2a; color: #ffffff; } /* Navbar dropdown caret arrow color in dark theme */ html[data-theme="dark"] .navbar.is-light .navbar-link::after, body[data-theme="dark"] .navbar.is-light .navbar-link::after { border-color: #e0e0e0; } html[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link::after, body[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link::after, html[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link::after, body[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link::after { border-color: #ffffff; } html[data-theme="dark"] .navbar-dropdown, body[data-theme="dark"] .navbar-dropdown { background-color: var(--surface-elev); border-color: var(--border); } html[data-theme="dark"] .navbar-dropdown .navbar-item:hover, body[data-theme="dark"] .navbar-dropdown .navbar-item:hover { background-color: #2a2a2a; color: #ffffff; } /* Mobile navbar menu and burger */ html[data-theme="dark"] .navbar-burger, body[data-theme="dark"] .navbar-burger { color: #ffffff; } html[data-theme="dark"] .navbar-burger span, body[data-theme="dark"] .navbar-burger span { background-color: #ffffff; } html[data-theme="dark"] .navbar-burger:hover, body[data-theme="dark"] .navbar-burger:hover { background-color: var(--border); } html[data-theme="dark"] .navbar-menu, body[data-theme="dark"] .navbar-menu, html[data-theme="dark"] .navbar-menu.is-active, body[data-theme="dark"] .navbar-menu.is-active { background-color: #1f1f1f !important; } html[data-theme="dark"] .navbar-menu .navbar-item, body[data-theme="dark"] .navbar-menu .navbar-item, html[data-theme="dark"] .navbar-menu .navbar-link, body[data-theme="dark"] .navbar-menu .navbar-link { color: #e0e0e0; } html[data-theme="dark"] .navbar-menu .navbar-item:hover, body[data-theme="dark"] .navbar-menu .navbar-item:hover, html[data-theme="dark"] .navbar-menu .navbar-link:hover, body[data-theme="dark"] .navbar-menu .navbar-link:hover { background-color: #2a2a2a; color: #ffffff; } /* Mobile layout: left align theme toggle, center profile */ @media screen and (max-width: 1023px) { .desktop-second { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; } .mobile-theme-toggle { position: absolute !important; left: 60px !important; z-index: 1002 !important; /* above dropdown */ } /* Center profile dropdown trigger explicitly */ #dropdown-menu { width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; z-index: 1001 !important; /* below toggle */ } #dropdown-menu .dropdown-trigger .image.is-64x64 { margin-right: 0 !important; } } /* Generic containers and surfaces */ html[data-theme="dark"] .box, body[data-theme="dark"] .card, html[data-theme="dark"] .modal-card, body[data-theme="dark"] .menu, html[data-theme="dark"] .content, body[data-theme="dark"] .panel, html[data-theme="dark"] .message-body, body[data-theme="dark"] .login-container { background-color: var(--surface) !important; color: var(--text) !important; } /* Ensure login container also responds when data-theme is on */ html[data-theme="dark"] .login-container { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* Dropdowns in header custom CSS */ html[data-theme="dark"] .dropdown-menu, body[data-theme="dark"] .dropdown-menu { background-color: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] .dropdown-item, body[data-theme="dark"] .dropdown-item { color: #e0e0e0; } html[data-theme="dark"] .dropdown-item:hover, body[data-theme="dark"] .dropdown-item:hover { background-color: #2a2a2a; color: #ffffff; } /* Tables */ html[data-theme="dark"] .table, body[data-theme="dark"] .table { background-color: var(--surface); color: var(--text); } html[data-theme="dark"] .table td, body[data-theme="dark"] .table th { border-color: var(--border); } .statistics-table thead th { background-color: var(--surface-elev); color: var(--text); border-color: var(--border); } .statistics-table tbody tr { background-color: var(--surface); color: var(--text); } .statistics-table strong { color: var(--text); } html[data-theme="dark"] .statistics-table thead th { background-color: var(--surface-elev); color: var(--text); } html[data-theme="dark"] .statistics-table tbody tr { background-color: var(--surface); color: var(--text); } html[data-theme="dark"] .statistics-table strong { color: var(--text); } /* Table striped rows in dark mode */ html[data-theme="dark"] .table.is-striped tbody tr:nth-child(even), body[data-theme="dark"] .table.is-striped tbody tr:nth-child(even) { background-color: #2a2a2a !important; color: var(--text) !important; } html[data-theme="dark"] .table.is-striped tbody tr:nth-child(odd), body[data-theme="dark"] .table.is-striped tbody tr:nth-child(odd) { background-color: var(--surface) !important; color: var(--text) !important; } /* Table hover states */ html[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover, body[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover, html[data-theme="dark"] .table tbody tr:hover, body[data-theme="dark"] .table tbody tr:hover { background-color: #222; } /* Forms */ html[data-theme="dark"] .input, body[data-theme="dark"] .textarea, html[data-theme="dark"] .select select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } html[data-theme="dark"] .input::placeholder, body[data-theme="dark"] .textarea::placeholder { color: #a0a0a0; } /* Ensure form controls in settings cards never overflow their container */ .login-container .tile.is-parent { overflow: hidden; } .login-container .tile.is-parent.is-vertical, .login-container .field { max-width: 100%; } .login-container .field .control, .login-container .input, .login-container .textarea, .login-container select, .login-container textarea { width: 100%; max-width: 100%; box-sizing: border-box; } /* Controls in grouped headers (title + switch) should not be full width */ .login-container .field .control { width: auto; max-width: 100%; } /* Prevent nested flex rows from pushing content outside */ .login-container .field[style*="display: flex"] > * { min-width: 0; } /* Buttons */ html[data-theme="dark"] .button, body[data-theme="dark"] .button { color: #e0e0e0; } html[data-theme="dark"] .button.is-light, body[data-theme="dark"] .button.is-white { background-color: #2a2a2a; color: #e0e0e0; border-color: #3a3a3a; } /* Buttons: default (no color variant) in dark theme */ html[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button), body[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button) { background-color: #2a2a2a; border-color: #3a3a3a; color: #e0e0e0; } html[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):not(:disabled):hover, body[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):not(:disabled):hover { background-color: #333333; border-color: #3a3a3a; color: #ffffff; } html[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):active, body[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):active { background-color: #2a2a2a; border-color: #3a3a3a; color: #ffffff; } html[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):focus, body[data-theme="dark"] .button:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-white):not(.is-black):not(.is-dark):not(.is-text):not(.custom-button):focus { box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.08); } /* Buttons: success variant in dark theme */ html[data-theme="dark"] .button.is-success, body[data-theme="dark"] .button.is-success, html[data-theme="dark"] .save-button.is-success, body[data-theme="dark"] .save-button.is-success { background-color: #2d6a4f; border-color: #2d6a4f; color: #ffffff; } html[data-theme="dark"] .button.is-success:not(:disabled):hover, body[data-theme="dark"] .button.is-success:not(:disabled):hover, html[data-theme="dark"] .save-button.is-success:not(:disabled):hover, body[data-theme="dark"] .save-button.is-success:not(:disabled):hover { background-color: #2f7d59; border-color: #2f7d59; color: #ffffff; } html[data-theme="dark"] .button.is-success:active, body[data-theme="dark"] .button.is-success:active, html[data-theme="dark"] .save-button.is-success:active, body[data-theme="dark"] .save-button.is-success:active { background-color: #256148; border-color: #256148; color: #ffffff; } html[data-theme="dark"] .button.is-success:focus, body[data-theme="dark"] .button.is-success:focus, html[data-theme="dark"] .save-button.is-success:focus, body[data-theme="dark"] .save-button.is-success:focus { box-shadow: 0 0 0 0.125em rgba(45, 106, 79, 0.4); } /* Buttons: info variant in dark theme */ html[data-theme="dark"] .button.is-info, body[data-theme="dark"] .button.is-info, html[data-theme="dark"] .save-button.is-info, body[data-theme="dark"] .save-button.is-info { background-color: #1d4ed8; border-color: #1d4ed8; color: #ffffff; } html[data-theme="dark"] .button.is-info:not(:disabled):hover, body[data-theme="dark"] .button.is-info:not(:disabled):hover, html[data-theme="dark"] .save-button.is-info:not(:disabled):hover, body[data-theme="dark"] .save-button.is-info:not(:disabled):hover { background-color: #2563eb; border-color: #2563eb; color: #ffffff; } html[data-theme="dark"] .button.is-info:active, body[data-theme="dark"] .button.is-info:active, html[data-theme="dark"] .save-button.is-info:active, body[data-theme="dark"] .save-button.is-info:active { background-color: #1e40af; border-color: #1e40af; color: #ffffff; } html[data-theme="dark"] .button.is-info:focus, body[data-theme="dark"] .button.is-info:focus, html[data-theme="dark"] .save-button.is-info:focus, body[data-theme="dark"] .save-button.is-info:focus { box-shadow: 0 0 0 0.125em rgba(29, 78, 216, 0.4); } /* Buttons: warning variant in dark theme */ html[data-theme="dark"] .button.is-warning, body[data-theme="dark"] .button.is-warning, html[data-theme="dark"] .save-button.is-warning, body[data-theme="dark"] .save-button.is-warning { background-color: #8a6d1a; border-color: #8a6d1a; color: #ffffff; } html[data-theme="dark"] .button.is-warning:not(:disabled):hover, body[data-theme="dark"] .button.is-warning:not(:disabled):hover, html[data-theme="dark"] .save-button.is-warning:not(:disabled):hover, body[data-theme="dark"] .save-button.is-warning:not(:disabled):hover { background-color: #9a7b1d; border-color: #9a7b1d; color: #ffffff; } html[data-theme="dark"] .button.is-warning:active, body[data-theme="dark"] .button.is-warning:active, html[data-theme="dark"] .save-button.is-warning:active, body[data-theme="dark"] .save-button.is-warning:active { background-color: #6f5314; border-color: #6f5314; color: #ffffff; } html[data-theme="dark"] .button.is-warning:focus, body[data-theme="dark"] .button.is-warning:focus, html[data-theme="dark"] .save-button.is-warning:focus, body[data-theme="dark"] .save-button.is-warning:focus { box-shadow: 0 0 0 0.125em rgba(138, 109, 26, 0.4); } /* Buttons: danger variant in dark theme */ html[data-theme="dark"] .button.is-danger, body[data-theme="dark"] .button.is-danger, html[data-theme="dark"] .save-button.is-danger, body[data-theme="dark"] .save-button.is-danger { background-color: #b91c1c; border-color: #b91c1c; color: #ffffff; } html[data-theme="dark"] .button.is-danger:not(:disabled):hover, body[data-theme="dark"] .button.is-danger:not(:disabled):hover, html[data-theme="dark"] .save-button.is-danger:not(:disabled):hover, body[data-theme="dark"] .save-button.is-danger:not(:disabled):hover { background-color: #c81e1e; border-color: #c81e1e; color: #ffffff; } html[data-theme="dark"] .button.is-danger:active, body[data-theme="dark"] .button.is-danger:active, html[data-theme="dark"] .save-button.is-danger:active, body[data-theme="dark"] .save-button.is-danger:active { background-color: #991b1b; border-color: #991b1b; color: #ffffff; } html[data-theme="dark"] .button.is-danger:focus, body[data-theme="dark"] .button.is-danger:focus, html[data-theme="dark"] .save-button.is-danger:focus, body[data-theme="dark"] .save-button.is-danger:focus { box-shadow: 0 0 0 0.125em rgba(185, 28, 28, 0.4); } /* Buttons: primary variant in dark theme */ html[data-theme="dark"] .button.is-primary, body[data-theme="dark"] .button.is-primary, html[data-theme="dark"] .save-button.is-primary, body[data-theme="dark"] .save-button.is-primary { background-color: #4f46e5; border-color: #4f46e5; color: #ffffff; } html[data-theme="dark"] .button.is-primary:not(:disabled):hover, body[data-theme="dark"] .button.is-primary:not(:disabled):hover, html[data-theme="dark"] .save-button.is-primary:not(:disabled):hover, body[data-theme="dark"] .save-button.is-primary:not(:disabled):hover { background-color: #4338ca; border-color: #4338ca; color: #ffffff; } html[data-theme="dark"] .button.is-primary:active, body[data-theme="dark"] .button.is-primary:active, html[data-theme="dark"] .save-button.is-primary:active, body[data-theme="dark"] .save-button.is-primary:active { background-color: #3730a3; border-color: #3730a3; color: #ffffff; } html[data-theme="dark"] .button.is-primary:focus, body[data-theme="dark"] .button.is-primary:focus, html[data-theme="dark"] .save-button.is-primary:focus, body[data-theme="dark"] .save-button.is-primary:focus { box-shadow: 0 0 0 0.125em rgba(79, 70, 229, 0.4); } /* Tags: info variant in dark theme */ html[data-theme="dark"] .tag.is-info, body[data-theme="dark"] .tag.is-info { background-color: #1d4ed8; border-color: #1d4ed8; color: #ffffff; } /* Notifications: match button variants in dark theme */ html[data-theme="dark"] .notification.is-success, body[data-theme="dark"] .notification.is-success { background-color: #2d6a4f; border-color: #2d6a4f; color: #ffffff; } html[data-theme="dark"] .notification.is-warning, body[data-theme="dark"] .notification.is-warning { background-color: #8a6d1a; border-color: #8a6d1a; color: #ffffff; } html[data-theme="dark"] .notification.is-danger, body[data-theme="dark"] .notification.is-danger { background-color: #b91c1c; border-color: #b91c1c; color: #ffffff; } /* Help/Hint message dark styles */ html[data-theme="dark"] .message.is-info .message-header, body[data-theme="dark"] .message.is-info .message-header { background-color: #1e3a8a !important; /* deeper blue for header */ color: #ffffff !important; border-color: #1e3a8a !important; } html[data-theme="dark"] .message.is-info .message-body, body[data-theme="dark"] .message.is-info .message-body { background-color: #162033 !important; /* very dark blue for body */ color: #d6e4ff !important; border-color: #1e3a8a !important; } html[data-theme="dark"] .message.is-info code, body[data-theme="dark"] .message.is-info code { background: rgba(255,255,255,0.06); color: #e8f0ff; } /* Dividers */ html[data-theme="dark"] hr, body[data-theme="dark"] .navbar-divider, html[data-theme="dark"] .dropdown-divider { background-color: #2a2a2a; } /* Footer */ html[data-theme="dark"] .footer, body[data-theme="dark"] .footer { background-color: #1f1f1f; color: #e0e0e0; border-top: 1px solid #2a2a2a; } html[data-theme="dark"] .footer a, body[data-theme="dark"] .footer a { color: #9ec3ff; } html[data-theme="dark"] .footer a:hover, body[data-theme="dark"] .footer a:hover { color: #c6ddff; } /* Override Bulma light semantic backgrounds in dark theme */ html[data-theme="dark"] .has-background-danger-light, body[data-theme="dark"] .has-background-danger-light { background-color: #3a1f25 !important; /* dark muted red */ } html[data-theme="dark"] .has-background-danger-light strong, body[data-theme="dark"] .has-background-danger-light strong { color: #ffffff !important; } html[data-theme="dark"] .has-background-success-light, body[data-theme="dark"] .has-background-success-light { background-color: #1f3a2a !important; /* dark muted green */ } html[data-theme="dark"] .has-background-success-light strong, body[data-theme="dark"] .has-background-success-light strong { color: #ffffff !important; } /* Modals */ html[data-theme="dark"] .modal-card, body[data-theme="dark"] .modal-card, html[data-theme="dark"] .modal-content, body[data-theme="dark"] .modal-content { background-color: #1e1e1e !important; color: #e0e0e0 !important; } html[data-theme="dark"] .modal-card-head, body[data-theme="dark"] .modal-card-head, html[data-theme="dark"] .modal-card-foot, body[data-theme="dark"] .modal-card-foot { background-color: #1f1f1f !important; border-color: #2a2a2a !important; } html[data-theme="dark"] .modal-card-title, body[data-theme="dark"] .modal-card-title { color: #e0e0e0 !important; } html[data-theme="dark"] .modal-card-body, body[data-theme="dark"] .modal-card-body { background-color: #1e1e1e !important; } html[data-theme="dark"] .modal-content .box, body[data-theme="dark"] .modal-content .box { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* Sticky save container */ html[data-theme="dark"] .sticky-save-container, body[data-theme="dark"] .sticky-save-container { background-color: #1e1e1e !important; color: #e0e0e0 !important; border: 1px solid #2a2a2a; } /* Username text in profile dropdown */ #copyLabel { color: #363636; /* Bulma's default text color for light theme */ } html[data-theme="dark"] #copyLabel, body[data-theme="dark"] #copyLabel { color: #e0e0e0; } /* Header profile dropdown (ensure dark background in content area) */ html[data-theme="dark"] .dropdown-content, body[data-theme="dark"] .dropdown-content { background-color: #1e1e1e !important; border: 1px solid #2a2a2a !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important; } /* Navbar parent items with children: dark hover */ html[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, body[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, html[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link, body[data-theme="dark"] .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link, html[data-theme="dark"] .navbar.is-light .navbar-link:focus, body[data-theme="dark"] .navbar.is-light .navbar-link:focus, html[data-theme="dark"] .navbar.is-light .navbar-link:focus-within, body[data-theme="dark"] .navbar.is-light .navbar-link:focus-within { background-color: #2a2a2a !important; color: #ffffff !important; } /* Recorder (moderation) - dark theme */ html[data-theme="dark"] .recorder-card, body[data-theme="dark"] .recorder-card { background-color: #1f1f1f !important; border-color: #2a2a2a !important; color: #e0e0e0 !important; } html[data-theme="dark"] .recorder-header, body[data-theme="dark"] .recorder-header { color: #e0e0e0; } html[data-theme="dark"] .rec-status, body[data-theme="dark"] .rec-status, html[data-theme="dark"] .rec-timer, body[data-theme="dark"] .rec-timer { color: #e0e0e0; } html[data-theme="dark"] .rec-dot, body[data-theme="dark"] .rec-dot { background-color: #555; /* idle dot color in dark */ } html[data-theme="dark"] .vu-meter, body[data-theme="dark"] .vu-meter { background-color: #2a2a2a; } html[data-theme="dark"] .vu-fill, body[data-theme="dark"] .vu-fill { background: linear-gradient(90deg, #22c55e, #ef4444); } /* Media sender (moderation) - dark theme */ html[data-theme="dark"] .media-card, body[data-theme="dark"] .media-card { background-color: #1f1f1f !important; border-color: #2a2a2a !important; color: #e0e0e0 !important; } html[data-theme="dark"] .media-preview, body[data-theme="dark"] .media-preview { background-color: #1a1a1a !important; border-color: #2a2a2a !important; } html[data-theme="dark"] .media-preview .placeholder, body[data-theme="dark"] .media-preview .placeholder { color: #a0a0a0 !important; } /* Loading skeleton - dark theme */ html[data-theme="dark"] .skeleton, body[data-theme="dark"] .skeleton { background-color: #2a2a2a !important; } html[data-theme="dark"] .skeleton::after, body[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.08), rgba(255,255,255,0)) !important; } html[data-theme="dark"] .skeleton-thumb, body[data-theme="dark"] .skeleton-thumb { border-bottom: 1px solid #2f2f2f !important; } /* Config reset dialog - dark theme */ html[data-theme="dark"] #resetConfirmDialog, body[data-theme="dark"] #resetConfirmDialog { background-color: rgba(0, 0, 0, 0.7) !important; } html[data-theme="dark"] #resetConfirmDialog > div, body[data-theme="dark"] #resetConfirmDialog > div { background-color: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] #resetConfirmDialog h3, body[data-theme="dark"] #resetConfirmDialog h3 { color: #ff6b6b !important; } html[data-theme="dark"] #resetConfirmDialog p, body[data-theme="dark"] #resetConfirmDialog p { color: var(--text) !important; } html[data-theme="dark"] #confirmReset, body[data-theme="dark"] #confirmReset { background-color: #dc3545 !important; color: white !important; border: none !important; } html[data-theme="dark"] #confirmReset:hover, body[data-theme="dark"] #confirmReset:hover { background-color: #c82333 !important; } html[data-theme="dark"] #cancelReset, body[data-theme="dark"] #cancelReset { background-color: #6c757d !important; color: white !important; border: none !important; } html[data-theme="dark"] #cancelReset:hover, body[data-theme="dark"] #cancelReset:hover { background-color: #5a6268 !important; }