1006 lines
25 KiB
CSS
1006 lines
25 KiB
CSS
[data-theme="dark"] {
|
|
/* Backgrounds */
|
|
--color-bg-page: #0f172a;
|
|
--color-bg-surface: #1e293b;
|
|
--color-bg-input: #0f172a;
|
|
--color-bg-hover: #334155;
|
|
--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;
|
|
|
|
/* Items */
|
|
--color-item-selected: #1a1520;
|
|
--color-item-hover-accent: #21262d;
|
|
}
|
|
|
|
/* ------------ */
|
|
|
|
[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"] .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"] .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;
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|