[data-theme="dark"] { /* Backgrounds */ --color-bg-page: #0f172a; --color-bg-surface: #1e293b; --color-bg-input: #0f172a; --color-bg-hover: #162032; --color-bg-muted: #1a2540; --color-bg-subtle: #162032; --color-bg-alt: #0f172a; --color-bg-input-alt: #253045; --color-bg-empty: #253045; /* Borders */ --color-border: #334155; --color-border-light: #334155; --color-border-medium: #475569; --color-border-faint: #2a3650; --color-border-subtle: #2a3650; --color-border-xfaint: #1e293b; --color-border-ddd: #334155; /* Text */ --color-text: #e2e8f0; --color-text-heading: #f1f5f9; --color-text-muted: #94a3b8; --color-text-faint: #64748b; --color-text-secondary: #cbd5e1; --color-text-subtle: #94a3b8; --color-text-dark: #cbd5e1; --color-text-placeholder: #64748b; --color-text-gray: #94a3b8; --color-text-medium: #94a3b8; --color-text-faint2: #64748b; --color-text-light: #64748b; --color-text-black: #e2e8f0; --color-text-dim: #94a3b8; /* Accent */ --color-accent: #ff5e3a; --color-accent-hover: #ff7a5c; --color-accent-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); --color-accent-shadow: rgba(255, 94, 58, 0.3); --color-accent-ring: rgba(255, 94, 58, 0.15); --color-accent-tint: #2a1a15; /* Feedback */ --color-error-bg: #3b1111; --color-error-text: #fca5a5; --color-success-bg: #052e16; --color-success-text: #86efac; /* Shadows */ --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-lg: rgba(0, 0, 0, 0.3); /* Additional dark overrides */ --color-warning-bg: #3d2e00; --color-warning-bg-dark: #5a4200; --color-notification-bg: #1e293b; --color-trash-surface: #1e293b; --color-trash-border: #334155; --color-trash-empty-bg: #334155; --color-user-menu-header-bg: linear-gradient(135deg, #2a1a15 0%, #1e1525 100%); --color-user-menu-header-border: #3a2520; --color-info-bg: #0c1e35; --color-info-bg-alt: #0c1e35; --color-info-surface: #0c1e35; --color-danger-light-bg: #2a0c0c; --color-danger-lighter: #2a0c0c; --color-purple-bg: #1a0a33; --color-success-bg-alt: #0a2015; --color-success-bg-green: #0a2015; --color-content-bg-warn: #3d2e00; --color-content-bg-warn-dark: #5a4200; /* Sidebar */ --color-sidebar-bg-from: #0f172a; --color-sidebar-bg-to: #0c1322; } /* Dark theme for mobile sidebar toggle */ [data-theme="dark"] .sidebar-toggle { color: #cbd5e1; } [data-theme="dark"] .sidebar-toggle:hover { background-color: #334155; color: #ff5e3a; } /* ------------ */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25); } [data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } [data-theme="dark"] select { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] select:hover { border-color: #475569; } [data-theme="dark"] select:focus { border-color: #ff5e3a; background-color: #1e293b; } [data-theme="dark"] .search-container input { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .search-container input:hover { background-color: #1e293b; border-color: #475569; } [data-theme="dark"] .search-container input:focus { background-color: #1e293b; border-color: #ff5e3a; } [data-theme="dark"] .search-container input::placeholder { color: #64748b; } [data-theme="dark"] .search-icon { color: #64748b; } [data-theme="dark"] .page-title { color: #f1f5f9; } [data-theme="dark"] .breadcrumb { color: #94a3b8; } [data-theme="dark"] .breadcrumb-link { color: #94a3b8; } [data-theme="dark"] .breadcrumb-link:hover { color: #ff5e3a; background: rgba(255, 94, 58, 0.1); } [data-theme="dark"] .breadcrumb-current { color: #e2e8f0; } [data-theme="dark"] .breadcrumb-separator { color: #64748b; } [data-theme="dark"] .breadcrumb-home { color: #94a3b8; } [data-theme="dark"] .breadcrumb-home.breadcrumb-link:hover { color: #ff5e3a; background: rgba(255, 94, 58, 0.15); } [data-theme="dark"] .btn-secondary { background-color: #1e293b; color: #cbd5e1; border-color: #334155; } [data-theme="dark"] .btn-secondary:hover { background-color: #334155; border-color: #475569; } [data-theme="dark"] .btn-secondary:active { background-color: #475569; } [data-theme="dark"] .view-toggle { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .toggle-btn { color: #94a3b8; } [data-theme="dark"] .toggle-btn:hover { background-color: #334155; } [data-theme="dark"] .toggle-btn.active { background-color: #334155; color: #ff5e3a; } [data-theme="dark"] .context-menu { background: #1e293b; border-color: #334155; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .context-menu-item { color: #cbd5e1; } [data-theme="dark"] .context-menu-item:hover { background: #334155; } [data-theme="dark"] .context-menu-item:active { background: #475569; } [data-theme="dark"] .context-menu-item i { color: #94a3b8; } [data-theme="dark"] .context-menu-item-danger:hover { background: rgba(239, 68, 68, 0.1); } [data-theme="dark"] .context-menu-separator { background: #334155; } [data-theme="dark"] .search-results-header h3 { color: #f1f5f9; } [data-theme="dark"] .search-results-header { color: #f1f5f9; border-bottom-color: #334155; } [data-theme="dark"] .search-results-header .search-time { color: #64748b; } [data-theme="dark"] .search-results-header .btn-secondary { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .search-results-header .btn-secondary:hover { background: #334155; } [data-theme="dark"] .search-sort-select { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .search-sort-select:focus { border-color: #ff5e3a; } /* ── cards.css ── */ [data-theme="dark"] .files-grid-view .file-item { background-color: var(--color-bg-surface); border-color: var(--color-border); } [data-theme="dark"] .files-grid-view .file-item:hover { border-color: var(--color-border-medium); box-shadow: 0 4px 12px var(--color-shadow-3xl); } [data-theme="dark"] .files-grid-view .file-item.selected { border-color: var(--color-accent); background: var(--color-item-selected-dark); } [data-theme="dark"] .files-grid-view .file-item .checkbox-cell { background: var(--color-bg-surface); border-color: var(--color-border-medium); } [data-theme="dark"] .files-grid-view .file-actions { color: var(--color-text-faint); } [data-theme="dark"] .files-grid-view .file-actions:hover { background: var(--color-border); color: var(--color-text); } [data-theme="dark"] .files-grid-view .file-item .name-cell { color: var(--color-text); } [data-theme="dark"] .files-grid-view .file-item .type-cell { color: var(--color-text-faint); } [data-theme="dark"] .files-grid-view .file-item.drop-target { background-color: var(--color-warning-ring-xs); } /* ── csp-utilities.css ── */ [data-theme="dark"] .empty-state-icon { color: var(--color-dark-mid); } [data-theme="dark"] .empty-state-icon.error { color: var(--color-danger-alt); } [data-theme="dark"] .about-modal-username { color: var(--color-text-heading); } [data-theme="dark"] .about-modal-email { color: var(--color-text-faint); } [data-theme="dark"] .about-modal-role-admin { background: var(--color-role-admin-dark-bg); color: var(--color-admin-blue); } [data-theme="dark"] .about-modal-role-user { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .about-modal-storage-label { color: var(--color-text-faint); } [data-theme="dark"] .about-modal-bar-bg { background: var(--color-border); } [data-theme="dark"] .about-modal-bar-text { color: var(--color-text-faint); } [data-theme="dark"] .about-modal-close-btn { background: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-dark); } [data-theme="dark"] .move-dialog-hint { color: var(--color-text-faint); } [data-theme="dark"] .search-empty-text { color: var(--color-text-faint); } /* ── dialogs.css ── */ [data-theme="dark"] .rename-dialog-content { background-color: var(--color-bg-surface); box-shadow: 0 8px 32px var(--color-shadow-5xl); } [data-theme="dark"] .rename-dialog-header { color: var(--color-text-heading); border-bottom-color: var(--color-border); } [data-theme="dark"] .rename-dialog input { background: var(--color-bg-input); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .rename-dialog input:focus { border-color: var(--color-accent); background: var(--color-bg-input); } [data-theme="dark"] .rename-dialog-buttons { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .rename-dialog-buttons .btn-outline { background: transparent; color: var(--color-text-faint); border-color: var(--color-border-medium); } [data-theme="dark"] .rename-dialog-buttons .btn-outline:hover { background: var(--color-border); border-color: var(--color-text-subtle); } [data-theme="dark"] .shared-dialog-content { background-color: var(--color-bg-surface); } [data-theme="dark"] .shared-dialog-header { color: var(--color-text); border-bottom-color: var(--color-border); } [data-theme="dark"] .shared-dialog-header .close-dialog-btn { color: var(--color-text-faint); } [data-theme="dark"] .shared-dialog-header .close-dialog-btn:hover { background: var(--color-border); color: var(--color-text); } [data-theme="dark"] .shared-dialog .share-link-input input, [data-theme="dark"] .shared-dialog .password-input-group input, [data-theme="dark"] .shared-dialog .share-expiration-section input, [data-theme="dark"] .shared-dialog .notification-form input, [data-theme="dark"] .shared-dialog .notification-form textarea { background: var(--color-bg-input); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .shared-dialog .share-link-input input:focus, [data-theme="dark"] .shared-dialog .notification-form input:focus, [data-theme="dark"] .shared-dialog .notification-form textarea:focus { border-color: var(--color-accent); background: var(--color-bg-surface); } [data-theme="dark"] .shared-dialog .share-link-section label, [data-theme="dark"] .shared-dialog .share-permissions-section h4, [data-theme="dark"] .shared-dialog .notification-form label { color: var(--color-text); } [data-theme="dark"] .shared-dialog .share-permissions-section label, [data-theme="dark"] .shared-dialog .share-password-section label, [data-theme="dark"] .shared-dialog .share-expiration-section label { color: var(--color-text-faint); } [data-theme="dark"] .shared-dialog .share-actions, [data-theme="dark"] .shared-dialog .notification-actions { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .confirm-dialog-content { background-color: var(--color-bg-surface); box-shadow: 0 8px 32px var(--color-shadow-5xl); } [data-theme="dark"] .confirm-dialog-header { color: var(--color-text-heading); } [data-theme="dark"] .confirm-dialog-message { color: var(--color-text-faint); } [data-theme="dark"] .confirm-dialog-buttons { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .move-dialog-content { background-color: var(--color-bg-surface); } [data-theme="dark"] .move-dialog-header { color: var(--color-text-heading); border-bottom-color: var(--color-border); } [data-theme="dark"] .move-dialog .folder-tree { background: var(--color-bg-input); border-color: var(--color-border); } [data-theme="dark"] .move-dialog .folder-tree-item { color: var(--color-text-dark); } [data-theme="dark"] .move-dialog .folder-tree-item:hover { background: var(--color-border); } [data-theme="dark"] .move-dialog .folder-tree-item.selected { background: var(--color-accent-ring); color: var(--color-accent); } [data-theme="dark"] .move-dialog-buttons { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .share-dialog-content { background-color: var(--color-bg-surface); } [data-theme="dark"] .share-dialog-header { color: var(--color-text-heading); border-bottom-color: var(--color-border); } [data-theme="dark"] .share-dialog-body label { color: var(--color-text-faint); } [data-theme="dark"] .share-dialog-body input { background: var(--color-bg-input); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .share-dialog-body input:focus { border-color: var(--color-accent); background: var(--color-bg-input); } [data-theme="dark"] .share-link-container { background: var(--color-bg-input); border-color: var(--color-border); } [data-theme="dark"] .share-link-container input { color: var(--color-text); } [data-theme="dark"] .share-dialog-buttons { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .dialog { background-color: var(--color-overlay-mid); } [data-theme="dark"] .dialog-content { background-color: var(--color-bg-surface); color: var(--color-text); } [data-theme="dark"] .dialog-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .dialog-header h3 { color: var(--color-text-heading); } [data-theme="dark"] .dialog-body label { color: var(--color-text-faint); } [data-theme="dark"] .dialog-body input, [data-theme="dark"] .dialog-body textarea { background-color: var(--color-bg-input); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .dialog-body input:focus, [data-theme="dark"] .dialog-body textarea:focus { border-color: var(--color-accent); } [data-theme="dark"] .close-dialog-btn { color: var(--color-text-faint); } [data-theme="dark"] .close-dialog-btn:hover { color: var(--color-text-heading); } [data-theme="dark"] .share-setting label { color: var(--color-text-faint); } [data-theme="dark"] .permissions-options label span { color: var(--color-text); } [data-theme="dark"] .share-item-info { color: var(--color-text); } /* Dark mode for move dialog breadcrumb */ [data-theme="dark"] .move-dialog-breadcrumb { background: var(--color-bg-input); } [data-theme="dark"] .move-breadcrumb-item { color: var(--color-text-faint); } [data-theme="dark"] .move-breadcrumb-item:hover { background: var(--color-border); color: var(--color-text); } [data-theme="dark"] .move-breadcrumb-item.current { color: var(--color-accent); } [data-theme="dark"] .move-breadcrumb-separator { color: var(--color-border-medium); } /* Dark mode for folder select items */ [data-theme="dark"] .folder-select-item { color: var(--color-text-dark); } [data-theme="dark"] .folder-select-item:hover { background-color: var(--color-border); } [data-theme="dark"] .folder-select-item.selected { background-color: var(--color-accent-ring-dark); color: var(--color-accent); } [data-theme="dark"] .folder-select-item i { color: var(--color-star-text); } [data-theme="dark"] .folder-select-item.selected i { color: var(--color-accent); } [data-theme="dark"] .folder-select-item.folder-select-current { background-color: var(--color-success-ring-vivid); color: var(--color-success-text-vivid); } [data-theme="dark"] .folder-select-item.folder-select-current:hover { background-color: var(--color-success-ring-vivid-lg); } [data-theme="dark"] .folder-select-item.folder-select-current i { color: var(--color-success-icon-vivid); } [data-theme="dark"] .folder-select-item.folder-navigate-up { color: var(--color-text-subtle); } [data-theme="dark"] .folder-select-item.folder-navigate-up:hover { color: var(--color-text-faint); } [data-theme="dark"] .folder-select-item.folder-navigate-up i { color: var(--color-border-medium); } [data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon { color: var(--color-border-medium); } [data-theme="dark"] .folder-select-empty { color: var(--color-border-medium); } /* ── fileList.css ── */ [data-theme="dark"] .files-list-view { background-color: var(--color-bg-surface); box-shadow: 0 1px 3px var(--color-shadow-xs); } [data-theme="dark"] .list-header { background-color: var(--color-bg-subtle); color: var(--color-text-subtle); border-bottom-color: var(--color-border); } [data-theme="dark"] .files-list-view .file-item { background-color: var(--color-bg-surface); border-bottom-color: var(--color-border-faint); } [data-theme="dark"] .files-list-view .file-item:hover { background-color: var(--color-bg-hover); } [data-theme="dark"] .files-list-view .file-item.selected { background-color: var(--color-item-selected); } [data-theme="dark"] .files-list-view .file-item.selected:hover { background-color: var(--color-item-hover-accent); } [data-theme="dark"] .files-list-view .file-item .name-cell { color: var(--color-text-heading); } [data-theme="dark"] .files-list-view .file-item .date-cell, [data-theme="dark"] .files-list-view .file-item .size-cell { color: var(--color-text-subtle); } [data-theme="dark"] .files-list-view .file-item .type-cell { color: var(--color-text-subtle); } [data-theme="dark"] .files-list-view .file-item.dragging { background-color: var(--color-border); } [data-theme="dark"] .files-list-view .file-item.drop-target { background-color: var(--color-warning-ring); } [data-theme="dark"] .files-list-view .file-actions { color: var(--color-text-subtle); } [data-theme="dark"] .files-list-view .file-actions:hover { background: var(--color-border); color: var(--color-text-heading); } /* ── languageSelector.css ── */ [data-theme="dark"] .language-selector-toggle { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-heading); } [data-theme="dark"] .language-selector-toggle:hover { background-color: var(--color-border); } [data-theme="dark"] .language-selector-dropdown { background-color: var(--color-bg-surface); border-color: var(--color-border); box-shadow: 0 8px 30px var(--color-overlay); } [data-theme="dark"] .language-selector-dropdown::-webkit-scrollbar-thumb { background-color: var(--color-border-medium); } [data-theme="dark"] .language-selector-dropdown::-webkit-scrollbar-thumb:hover { background-color: var(--color-text-subtle); } [data-theme="dark"] .language-option { color: var(--color-text-heading); } [data-theme="dark"] .language-option:hover { background-color: var(--color-border); } [data-theme="dark"] .language-option.active { background-color: var(--color-accent-ring); color: var(--color-accent); } /* ── modals.css ── */ [data-theme="dark"] .about-modal { background: var(--color-bg-surface); } [data-theme="dark"] .about-modal h2 { color: var(--color-text-heading); } [data-theme="dark"] .about-modal .about-version, [data-theme="dark"] .about-modal .about-description { color: var(--color-text-faint); } [data-theme="dark"] .about-modal .about-tech-badge { background: var(--color-border); border-color: var(--color-dark-mid); color: var(--color-text-dark); } [data-theme="dark"] .modal-overlay { background-color: var(--color-overlay-mid); } [data-theme="dark"] .modal-container { background-color: var(--color-bg-surface); box-shadow: 0 8px 32px var(--color-shadow-5xl); } [data-theme="dark"] .modal-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .modal-header h3 { color: var(--color-text-heading); } [data-theme="dark"] .modal-close-btn { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .modal-close-btn:hover { background: var(--color-dark-mid); color: var(--color-border); } [data-theme="dark"] .modal-body label { color: var(--color-text-faint); } [data-theme="dark"] .modal-input { border-color: var(--color-border); background: var(--color-bg-input); color: var(--color-text); } [data-theme="dark"] .modal-input:focus { border-color: var(--color-accent); background: var(--color-bg-input); } [data-theme="dark"] .modal-input::placeholder { color: var(--color-dark-mid); } [data-theme="dark"] .modal-footer { background: var(--color-bg-hover); border-top-color: var(--color-border); } [data-theme="dark"] .modal-footer .btn-secondary { background: var(--color-border); border-color: var(--color-dark-mid); color: var(--color-text-dark); } [data-theme="dark"] .modal-footer .btn-secondary:hover { background: var(--color-dark-mid); } /* ── multiSelect.css ── */ [data-theme="dark"] .list-header-checkbox input, [data-theme="dark"] .file-item .checkbox-cell input, [data-theme="dark"] .file-item .checkbox-cell input { accent-color: var(--color-accent); } [data-theme="dark"] .batch-selection-bar { background-color: var(--color-multiselect-bg); border-color: var(--color-multiselect-border); color: var(--color-text); } [data-theme="dark"] .list-header.selection-mode { background-color: var(--color-bg-page); border-bottom-color: var(--color-multiselect-border); color: var(--color-text); } /* ── notifications.css ── */ [data-theme="dark"] .notification { background-color: var(--color-notification-bg); box-shadow: 0 4px 12px var(--color-shadow-4xl); } [data-theme="dark"] .notification-title { color: var(--color-text-heading); } [data-theme="dark"] .notification-message { color: var(--color-text-faint); } [data-theme="dark"] .notification-banner { background-color: var(--color-notification-bg); box-shadow: 0 4px 12px var(--color-shadow-4xl); } [data-theme="dark"] .notif-bell-btn { color: var(--color-text-faint); } [data-theme="dark"] .notif-bell-btn:hover, [data-theme="dark"] .notif-bell-btn.active { color: var(--color-accent); background: var(--color-accent-ring-dark); } [data-theme="dark"] .notif-panel { background: var(--color-notification-bg); box-shadow: 0 12px 40px var(--color-shadow-4xl), 0 0 0 1px var(--color-sidebar-hover-bg); } [data-theme="dark"] .notif-panel-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .notif-panel-title { color: var(--color-text-heading); } [data-theme="dark"] .notif-clear-btn { color: var(--color-text-subtle); } [data-theme="dark"] .notif-clear-btn:hover { color: var(--color-accent); background: var(--color-accent-ring-dark); } [data-theme="dark"] .notif-empty { color: var(--color-text-subtle); } [data-theme="dark"] .notif-item { border-bottom-color: var(--color-bg-muted); } [data-theme="dark"] .notif-item:hover { background: var(--color-bg-hover); } [data-theme="dark"] .notif-item-title { color: var(--color-text); } [data-theme="dark"] .notif-item-text { color: var(--color-text-faint); } [data-theme="dark"] .notif-upload-bar { background: var(--color-border); } [data-theme="dark"] .upload-toast { background: var(--color-notification-bg); box-shadow: 0 8px 32px var(--color-shadow-5xl); } [data-theme="dark"] .upload-toast-file-name { color: var(--color-text); } [data-theme="dark"] .upload-toast-file-bar { background: var(--color-border); } [data-theme="dark"] .upload-toast-file-pct { color: var(--color-text-subtle); } [data-theme="dark"] .upload-toast-footer { border-top-color: var(--color-border); } /* ── spinner.css ── */ [data-theme="dark"] .dropzone { border-color: var(--color-border-medium); color: var(--color-text-faint); background-color: var(--color-bg-page); } [data-theme="dark"] .progress-bar { background-color: var(--color-border); } /* ── uploadDropdown.css ── */ [data-theme="dark"] .upload-dropdown-menu { background: var(--color-bg-surface); border-color: var(--color-border); box-shadow: 0 8px 24px var(--color-shadow-5xl); } [data-theme="dark"] .upload-dropdown-item { color: var(--color-text-dark); } [data-theme="dark"] .upload-dropdown-item:hover { background: var(--color-border); } [data-theme="dark"] .upload-dropdown-item:active { background: var(--color-border-medium); } [data-theme="dark"] .upload-dropdown-item i { color: var(--color-text-faint); } /* ── userMenu.css ── */ [data-theme="dark"] .user-menu { background: var(--color-bg-surface); border-color: var(--color-border); box-shadow: 0 8px 30px var(--color-shadow-5xl); } [data-theme="dark"] .user-menu-header { background: var(--color-user-menu-header-bg); border-bottom-color: var(--color-border); } [data-theme="dark"] .user-menu-name { color: var(--color-text-heading); } [data-theme="dark"] .user-menu-email { color: var(--color-text-subtle); } [data-theme="dark"] .user-menu-storage-label { color: var(--color-text-faint); } [data-theme="dark"] .user-menu-storage-bar { background: var(--color-border); } [data-theme="dark"] .user-menu-storage-text { color: var(--color-text-subtle); } [data-theme="dark"] .user-menu-divider { background: var(--color-border); } [data-theme="dark"] .user-menu-item { color: var(--color-text-dark); } [data-theme="dark"] .user-menu-item:hover { background: var(--color-border); } [data-theme="dark"] .user-menu-item i { color: var(--color-text-faint); } [data-theme="dark"] .theme-toggle-pill { background: var(--color-border-medium); } [data-theme="dark"] .user-menu-admin { color: var(--color-admin-blue); } [data-theme="dark"] .user-menu-admin:hover { background: var(--color-admin-blue-bg); } [data-theme="dark"] .role-badge-admin { background: var(--color-admin-blue-bg-sm); color: var(--color-admin-blue); } [data-theme="dark"] .user-menu-logout:hover { background: var(--color-danger-hover-bg); } /* ── admin.css ── */ [data-theme="dark"] body { background: var(--color-bg-page); color: var(--color-border); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-dark); } [data-theme="dark"] * { scrollbar-color: var(--color-scrollbar-dark) transparent; } [data-theme="dark"] .admin-tabs { background: var(--color-text-heading); box-shadow: 0 1px 4px var(--color-shadow-xl); } [data-theme="dark"] .admin-tab { color: var(--color-text-faint); } [data-theme="dark"] .admin-tab:hover { color: var(--color-border-light); background: var(--color-dark-footer); } [data-theme="dark"] .admin-card { background: var(--color-text-heading); box-shadow: 0 1px 4px var(--color-shadow-xl), 0 0 0 1px var(--color-border-dark-faint); } [data-theme="dark"] .admin-card h2 { color: var(--color-border-light); } [data-theme="dark"] .stat-card { background: var(--color-dark-footer); border-color: var(--color-border); } [data-theme="dark"] .stat-card:hover { box-shadow: 0 4px 12px var(--color-shadow-md); } [data-theme="dark"] .stat-value { color: var(--color-border-light); } [data-theme="dark"] .stat-label { color: var(--color-text-subtle); } [data-theme="dark"] .stat-card.warn { border-color: var(--color-badge-warning-text); background: var(--color-badge-warning-dark-bg); } [data-theme="dark"] .stat-card.danger { border-color: var(--color-error-text-dark); background: var(--color-badge-error-dark-bg); } [data-theme="dark"] .progress-bar { background: var(--color-border); } [data-theme="dark"] .table-wrap { border-color: var(--color-border); } [data-theme="dark"] th { background: var(--color-dark-footer); color: var(--color-text-subtle); border-bottom-color: var(--color-border); } [data-theme="dark"] td { border-bottom-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] tr:hover { background: var(--color-dark-footer); } [data-theme="dark"] .user-name { color: var(--color-border-light); } [data-theme="dark"] .user-email { color: var(--color-text-subtle); } [data-theme="dark"] .badge-admin { background: var(--color-role-admin-dark-bg); color: var(--color-admin-blue); } [data-theme="dark"] .badge-user { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .badge-active { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); } [data-theme="dark"] .badge-inactive { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); } [data-theme="dark"] .badge-oidc { background: var(--color-badge-indigo-dark-bg); color: var(--color-badge-indigo-dark-text); } [data-theme="dark"] .badge-local { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .btn-secondary { background: var(--color-text-heading); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .btn-secondary:hover { background: var(--color-border); border-color: var(--color-dark-mid); } [data-theme="dark"] .btn-danger { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); border-color: var(--color-error-text-dark); } [data-theme="dark"] .btn-danger:hover { background: var(--color-badge-error-dark-bg-hover); } [data-theme="dark"] .btn-success { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); border-color: var(--color-badge-success-text); } [data-theme="dark"] .btn-success:hover { background: var(--color-badge-success-fill-dark); } [data-theme="dark"] .form-group label { color: var(--color-text-faint); } [data-theme="dark"] .form-group input[type="text"], [data-theme="dark"] .form-group input[type="password"], [data-theme="dark"] .form-group input[type="url"], [data-theme="dark"] .form-group input[type="number"], [data-theme="dark"] .form-group select { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus { border-color: var(--color-accent); background: var(--color-bg-page); box-shadow: 0 0 0 3px var(--color-accent-ring-dark); } [data-theme="dark"] .form-group small { color: var(--color-text-subtle); } [data-theme="dark"] .toggle-row label { color: var(--color-text-faint); } [data-theme="dark"] .slider { background: var(--color-dark-mid); } [data-theme="dark"] .readonly-field { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .readonly-field button { background: var(--color-text-heading); border-color: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .readonly-field button:hover { background: var(--color-border); color: var(--color-border-light); } [data-theme="dark"] .warning { background: var(--color-badge-warning-dark-bg); border-color: var(--color-badge-warning-text); color: var(--color-star-text); } [data-theme="dark"] .alert-success { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); border-color: var(--color-badge-success-text); } [data-theme="dark"] .alert-error { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); border-color: var(--color-error-text-dark); } [data-theme="dark"] .alert-info { background: var(--color-badge-blue-dark-bg); color: var(--color-badge-blue-dark-text); border-color: var(--color-role-admin-text); } [data-theme="dark"] .discovery-result.ok { background: var(--color-badge-success-dark-bg); border-color: var(--color-badge-success-text); color: var(--color-success-text-vivid); } [data-theme="dark"] .discovery-result.fail { background: var(--color-badge-error-dark-bg); border-color: var(--color-error-text-dark); color: var(--color-multiselect-danger-text); } [data-theme="dark"] details { border-top-color: var(--color-border); } [data-theme="dark"] details summary { color: var(--color-text-faint); } [data-theme="dark"] details summary:hover { color: var(--color-accent); } [data-theme="dark"] details[open] summary { color: var(--color-accent); } [data-theme="dark"] .modal { background: var(--color-text-heading); box-shadow: 0 20px 60px var(--color-shadow-4xl); } [data-theme="dark"] .modal h3 { color: var(--color-border-light); } [data-theme="dark"] .modal-overlay { background: var(--color-overlay-mid); backdrop-filter: blur(4px); } [data-theme="dark"] .quota-text { color: var(--color-text-subtle); } [data-theme="dark"] .pagination { color: var(--color-text-subtle); } [data-theme="dark"] #access-denied h2 { color: var(--color-multiselect-danger-text); } [data-theme="dark"] #access-denied p { color: var(--color-text-faint); } [data-theme="dark"] .modal-confirm p { color: var(--color-text-faint); } [data-theme="dark"] .btn-danger { background: linear-gradient(135deg, var(--color-danger-alt), var(--color-error-text)); } [data-theme="dark"] #access-denied .access-icon { background: var(--color-badge-error-dark-bg); } [data-theme="dark"] #loading { color: var(--color-text-subtle); } [data-theme="dark"] .toggle-row { border-top-color: var(--color-border); } /* ── inlineViewer.css ── */ [data-theme="dark"] .inline-viewer-progress { background: var(--color-progress-overlay-dark); } [data-theme="dark"] .inline-viewer-progress-bar { background: var(--color-border); } [data-theme="dark"] .inline-viewer-progress-text { color: var(--color-text-dark); } /* ── photos.css ── */ [data-theme="dark"] .photos-day-header { color: var(--color-text); } [data-theme="dark"] .photo-tile { background: var(--color-border); } [data-theme="dark"] .photos-empty i { color: var(--color-dark-mid); } [data-theme="dark"] .photos-empty .photos-empty-title { color: var(--color-text-faint); } [data-theme="dark"] .photos-empty p { color: var(--color-text-subtle); } /* ── profile.css ── */ [data-theme="dark"] body { background: var(--color-bg-page); color: var(--color-border); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-dark); } [data-theme="dark"] * { scrollbar-color: var(--color-scrollbar-dark) transparent; } [data-theme="dark"] .profile-card { background: var(--color-text-heading); box-shadow: 0 1px 4px var(--color-shadow-xl), 0 0 0 1px var(--color-border-dark-faint); } [data-theme="dark"] .profile-card h2 { color: var(--color-border-light); } [data-theme="dark"] .avatar-info h1 { color: var(--color-border-light); } [data-theme="dark"] .avatar-info .email { color: var(--color-text-faint); } [data-theme="dark"] .role-badge-admin { background: var(--color-role-admin-dark-bg); color: var(--color-admin-blue); } [data-theme="dark"] .role-badge-user { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .info-item { background: var(--color-dark-footer); border-color: var(--color-border); } [data-theme="dark"] .info-item .info-label { color: var(--color-text-subtle); } [data-theme="dark"] .info-item .info-label i { color: var(--color-dark-mid); } [data-theme="dark"] .info-item .info-value { color: var(--color-border-light); } [data-theme="dark"] .storage-stat { background: var(--color-dark-footer); border-color: var(--color-border); } [data-theme="dark"] .storage-stat .stat-value { color: var(--color-border-light); } [data-theme="dark"] .storage-stat .stat-label { color: var(--color-text-subtle); } [data-theme="dark"] .storage-bar { background: var(--color-border); } [data-theme="dark"] .storage-text { color: var(--color-text-subtle); } [data-theme="dark"] .form-group label { color: var(--color-text-faint); } [data-theme="dark"] .form-group input { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-group input:focus { border-color: var(--color-accent); background: var(--color-bg-page); box-shadow: 0 0 0 3px var(--color-accent-ring-dark); } [data-theme="dark"] .form-group small { color: var(--color-text-subtle); } [data-theme="dark"] .alert-success { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); border-color: var(--color-badge-success-text); } [data-theme="dark"] .alert-error { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); border-color: var(--color-error-text-dark); } [data-theme="dark"] #auth-error { background: transparent; } [data-theme="dark"] #auth-error .err-icon { background: var(--color-badge-error-dark-bg); } [data-theme="dark"] #auth-error h2 { color: var(--color-multiselect-danger-text); } [data-theme="dark"] #auth-error p { color: var(--color-text-faint); } [data-theme="dark"] .section-desc { color: var(--color-text-subtle); } [data-theme="dark"] .checkbox-label { color: var(--color-text-faint); } [data-theme="dark"] .form-select { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-select:focus { border-color: var(--color-accent); background: var(--color-bg-page); box-shadow: 0 0 0 3px var(--color-accent-ring-dark); } [data-theme="dark"] .btn-secondary { background: var(--color-border); color: var(--color-text); border-color: var(--color-dark-mid); } [data-theme="dark"] .btn-secondary:hover { background: var(--color-dark-mid); } [data-theme="dark"] .app-pw-table th { color: var(--color-text-subtle); border-bottom-color: var(--color-border); } [data-theme="dark"] .app-pw-table td { border-bottom-color: var(--color-text-heading); } [data-theme="dark"] .app-pw-label-cell { color: var(--color-border-light); } [data-theme="dark"] .app-pw-prefix code { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .badge-active { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); } [data-theme="dark"] .badge-expired { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); } [data-theme="dark"] .app-pw-empty { color: var(--color-text-subtle); } [data-theme="dark"] .app-pw-token-input { background: var(--color-badge-success-dark-bg); border-color: var(--color-badge-success-text); color: var(--color-success-text-vivid); } [data-theme="dark"] .app-pw-instr-list code { background: var(--color-badge-success-dark-bg); color: var(--color-success-text-vivid); } [data-theme="dark"] #loading { color: var(--color-text-subtle); } [data-theme="dark"] .app-pw-desc { color: var(--color-text-faint); } [data-theme="dark"] .app-pw-create input { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .app-pw-create input:focus { border-color: var(--color-accent); background: var(--color-bg-page); box-shadow: 0 0 0 3px var(--color-accent-ring-dark); } [data-theme="dark"] .app-pw-created { background: var(--color-badge-success-dark-bg); border-color: var(--color-badge-success-text); } [data-theme="dark"] .app-pw-created-label { color: var(--color-success-text-vivid); } [data-theme="dark"] .app-pw-created-value code { background: var(--color-badge-success-fill-dark); color: var(--color-success-text-vivid); } [data-theme="dark"] .app-pw-created small { color: var(--color-badge-success-border); } [data-theme="dark"] .app-pw-table thead th { color: var(--color-text-subtle); border-bottom-color: var(--color-border); } [data-theme="dark"] .app-pw-table tbody td { color: var(--color-text); border-bottom-color: var(--color-text-heading); } [data-theme="dark"] .btn-danger-sm { background: var(--color-badge-error-dark-bg); color: var(--color-multiselect-danger-text); } [data-theme="dark"] .btn-danger-sm:hover { background: var(--color-badge-error-dark-bg-hover); color: var(--color-badge-error-border); } [data-theme="dark"] .app-pw-empty { color: var(--color-text-subtle); } [data-theme="dark"] .app-pw-auto-section { border-top-color: var(--color-border); } [data-theme="dark"] .app-pw-auto-toggle { color: var(--color-text-faint); } [data-theme="dark"] .app-pw-auto-toggle:hover { color: var(--color-text); } [data-theme="dark"] .app-pw-auto-count { background: var(--color-border); color: var(--color-text-faint); } [data-theme="dark"] .app-pw-auto-desc { color: var(--color-text-subtle); } /* ── shared.css ── */ [data-theme="dark"] .shared-filters { background-color: var(--color-bg-subtle); color: var(--color-text-faint); border-bottom-color: var(--color-border); box-shadow: 0 1px 3px var(--color-shadow-3xl); } [data-theme="dark"] .shared-view-container .shared-select-toggle { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-dark); } [data-theme="dark"] .shared-view-container .shared-filters { background-color: var(--color-bg-subtle); color: var(--color-text-faint); border-bottom-color: var(--color-border); box-shadow: 0 1px 3px var(--color-shadow-3xl); } [data-theme="dark"] .shared-view-container .shared-select-toggle:hover { background-color: var(--color-border); border-color: var(--color-border-medium); } [data-theme="dark"] .shared-view-container .shared-custom-select.open .shared-select-toggle { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-ring-dark); background-color: var(--color-bg-surface); } [data-theme="dark"] .shared-view-container .shared-select-arrow { color: var(--color-text-faint); } [data-theme="dark"] .shared-view-container .shared-select-dropdown { background-color: var(--color-bg-surface); border-color: var(--color-border); box-shadow: 0 8px 30px var(--color-shadow-5xl); } [data-theme="dark"] .shared-view-container .shared-select-option { color: var(--color-text-dark); } [data-theme="dark"] .shared-view-container .shared-select-option:hover { background-color: var(--color-border); } [data-theme="dark"] .shared-view-container .shared-select-option.active { background-color: var(--color-accent-ring); color: var(--color-accent); } [data-theme="dark"] .filter-group label { color: var(--color-text-faint); } [data-theme="dark"] .filter-group select { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } [data-theme="dark"] .filter-group select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-ring-dark); } [data-theme="dark"] .search-box input { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .search-box input::placeholder { color: var(--color-text-subtle); } [data-theme="dark"] .shared-list-container { background-color: var(--color-bg-surface); box-shadow: 0 1px 3px var(--color-shadow-xl); } [data-theme="dark"] .shared-list thead th, [data-theme="dark"] .shared-table thead th { background-color: var(--color-bg-subtle); color: var(--color-text-faint); border-bottom-color: var(--color-border); } [data-theme="dark"] .shared-list tbody td, [data-theme="dark"] .shared-table tbody td { border-bottom-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .shared-list tbody tr:hover, [data-theme="dark"] .shared-table tbody tr:hover { background-color: var(--color-bg-subtle); } [data-theme="dark"] .page-description { color: var(--color-text-faint); } [data-theme="dark"] #empty-shared-state.empty-state { background-color: transparent; box-shadow: none; color: var(--color-text-subtle); } [data-theme="dark"] #empty-shared-state p { color: var(--color-text-faint); } [data-theme="dark"] .shared-list .action-btn, [data-theme="dark"] .shared-table .action-btn { color: var(--color-text-faint); } [data-theme="dark"] .shared-list .action-btn:hover, [data-theme="dark"] .shared-table .action-btn:hover { color: var(--color-accent); } /* ── trash.css ── */ [data-theme="dark"] .trash-actions button, [data-theme="dark"] .actions-cell button { background: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .trash-actions button:hover, [data-theme="dark"] .actions-cell button:hover { background: var(--color-border); }