diff --git a/CLAUDE.md b/CLAUDE.md index 485d3407..54d05e58 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -146,6 +146,7 @@ async function updateUser(user, role = 'viewer') { … } - **All colors must use `var(--*)` — no raw hex, rgb, or named colors anywhere except in `:root` declarations** - Mobile-first: media queries expand, they don't restrict - One CSS file per logical component in `/static/css/` +- [data-theme="dark"] is permitted only in /static/css/themes/dark.css # What Claude must NOT do - Edit `Cargo.lock` directly diff --git a/static/css/base/forms.css b/static/css/base/forms.css index 5a687627..5d756b12 100644 --- a/static/css/base/forms.css +++ b/static/css/base/forms.css @@ -6,14 +6,14 @@ display: block; margin-bottom: 8px; font-weight: 500; - color: #4a5568; + color: var(--color-text-secondary); } .form-group input, .form-group textarea { width: 100%; padding: 10px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; } @@ -33,28 +33,28 @@ } .primary { - background-color: #ff5e3a; - color: white; + background-color: var(--color-accent); + color: var(--color-danger-text); } .primary:hover { - background-color: #e64a29; + background-color: var(--color-accent-hover); } .secondary { - background-color: #e2e8f0; - color: #4a5568; + background-color: var(--color-border); + color: var(--color-text-secondary); } .secondary:hover { - background-color: #cbd5e0; + background-color: var(--color-border-medium); } .danger { - background-color: #f56565; - color: white; + background-color: var( --color-danger-bg); + color: var( --color-danger-text); } .danger:hover { - background-color: #e53e3e; + background-color: var( --color-danger-hover); } diff --git a/static/css/base/reset.css b/static/css/base/reset.css index fcc3a7e3..8fdcc33d 100644 --- a/static/css/base/reset.css +++ b/static/css/base/reset.css @@ -8,7 +8,7 @@ body { display: flex; height: 100vh; - background-color: #f5f7fa; + background-color: var(--color-bg-page); overflow: hidden; } diff --git a/static/css/base/variables.css b/static/css/base/variables.css index c51be890..5b6dd890 100644 --- a/static/css/base/variables.css +++ b/static/css/base/variables.css @@ -4,16 +4,36 @@ --color-bg-surface: #ffffff; --color-bg-input: #f9fafb; --color-bg-hover: #f8fafc; + --color-bg-muted: #f0f3f7; + --color-bg-subtle: #f8f9fa; + --color-bg-alt: #f7fafc; + --color-bg-input-alt: #edf2f7; + --color-bg-empty: #f0f0f0; /* Borders */ --color-border: #e2e8f0; --color-border-light: #f1f5f9; + --color-border-medium: #cbd5e0; + --color-border-faint: #e0e6ed; + --color-border-subtle: #e0e5e8; + --color-border-xfaint: #f0f0f0; + --color-border-ddd: #ddd; /* Text */ --color-text: #2d3748; --color-text-heading: #1e293b; --color-text-muted: #718096; --color-text-faint: #94a3b8; + --color-text-secondary: #4a5568; + --color-text-subtle: #64748b; + --color-text-dark: #334155; + --color-text-placeholder: #a0aec0; + --color-text-gray: #6c757d; + --color-text-medium: #666; + --color-text-faint2: #888; + --color-text-light: #999; + --color-text-black: #333; + --color-text-dim: #555; /* Accent */ --color-accent: #ff5e3a; @@ -22,14 +42,383 @@ --color-accent-shadow: rgba(255, 94, 58, 0.3); --color-accent-ring: rgba(255, 94, 58, 0.1); --color-accent-tint: #fff5f3; + --color-accent-mid: #ff8a5c; + --color-accent-shadow-lg: rgba(255, 94, 58, 0.4); + --color-accent-bg: rgba(255, 94, 58, 0.06); + --color-accent-bg-sm: rgba(255, 94, 58, 0.08); + --color-accent-ring-dark: rgba(255, 94, 58, 0.15); + --color-accent-ring-strong: rgba(255, 94, 58, 0.2); + --color-accent-ring-xl: rgba(255, 94, 58, 0.4); + --color-accent-ring-xs: rgba(255, 94, 58, 0.05); /* Feedback */ --color-error-bg: #fee2e2; --color-error-text: #b91c1c; --color-success-bg: #dcfce7; --color-success-text: #15803d; + --color-success-border: #48bb78; + --color-success-alt: #34c759; + --color-success-bg-alt: #e6f4ea; + --color-success-text-alt: #0d904f; + --color-success-bg-green: #e8f5e9; + --color-success-text-green: #4eaa25; + + /* Dangerous actions */ + --color-danger-bg: #f56565; + --color-danger-text: white; + --color-danger-bg-hover: #e53e3e; + --color-danger-alt: #ef4444; + --color-danger-ring: rgba(239, 68, 68, 0.3); + --color-danger-ring-lg: rgba(239, 68, 68, 0.4); + --color-danger-light-bg: #fef2f2; + --color-danger-lighter: #fef2f2; + --color-danger-text-alt: #e53e3e; + --color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + + /* Warning/feedback */ + --color-warning-bg: #ffeaa7; + --color-warning-bg-dark: #fdcb6e; + --color-warning-text: #ffc107; + --color-warning-border: #ffc107; + --color-warning-ring: rgba(255, 193, 7, 0.1); + --color-warning-shadow: rgba(255, 193, 7, 0.5); + --color-warning-orange-bg: #fff3e0; + --color-warning-orange-border: #f57c00; + --color-warning-orange-text: #f57c00; + --color-warning-bg-light: #fef3c7; + --color-warning-text-amber: #f59e0b; + --color-warning-bg-orange: #fef3e2; + --color-warning-text-orange: #d04423; + + /* Info */ + --color-info-bg: #ebf5fb; + --color-info-border: #2b6cb0; + --color-info-text: #2b6cb0; + --color-info-bg-alt: #e0ecff; + --color-info-text-alt: #3171d8; + --color-info-surface: #e0e7ff; + --color-info-blue: #3b82f6; /* Shadows */ --color-shadow: rgba(0, 0, 0, 0.1); --color-shadow-lg: rgba(0, 0, 0, 0.12); + --color-shadow-xs: rgba(0, 0, 0, 0.05); + --color-shadow-sm: rgba(0, 0, 0, 0.08); + --color-shadow-md: rgba(0, 0, 0, 0.15); + --color-shadow-xl: rgba(0, 0, 0, 0.2); + --color-shadow-2xl: rgba(0, 0, 0, 0.25); + --color-shadow-3xl: rgba(0, 0, 0, 0.3); + --color-shadow-4xl: rgba(0, 0, 0, 0.4); + --color-shadow-5xl: rgba(0, 0, 0, 0.5); + + /* Overlays */ + --color-overlay: rgba(0, 0, 0, 0.5); + --color-overlay-light: rgba(0, 0, 0, 0.45); + --color-overlay-heavy: rgba(0, 0, 0, 0.85); + --color-overlay-darkest: rgba(0, 0, 0, 0.92); + + /* Items */ + --color-item-selected: #fff8f6; + --color-item-hover-accent: #fff0ec; + --color-item-hover-blue: #f0f8ff; + --color-item-hover-sky: #e0f2fe; + + /* Sidebar — always dark */ + --color-sidebar-bg-from: #2a3042; + --color-sidebar-bg-to: #232838; + --color-sidebar-text: rgba(255, 255, 255, 0.65); + --color-sidebar-text-hover: rgba(255, 255, 255, 0.9); + --color-sidebar-text-active: #ffffff; + --color-sidebar-active-bg: rgba(255, 94, 58, 0.12); + --color-sidebar-hover-bg: rgba(255, 255, 255, 0.06); + --color-sidebar-separator: rgba(255, 255, 255, 0.07); + --color-sidebar-overlay: rgba(0, 0, 0, 0.5); + --color-sidebar-storage-bg: rgba(255, 255, 255, 0.05); + --color-sidebar-storage-border: rgba(255, 255, 255, 0.07); + --color-sidebar-storage-text: rgba(255, 255, 255, 0.8); + --color-sidebar-storage-bar: rgba(255, 255, 255, 0.1); + --color-sidebar-storage-faint: rgba(255, 255, 255, 0.5); + --color-sidebar-logo-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%); + --color-sidebar-progress: linear-gradient(90deg, #ff5e3a 0%, #ff8a5c 100%); + --color-sidebar-shadow: rgba(255, 94, 58, 0.35); + --color-sidebar-shadow-lg: rgba(255, 94, 58, 0.45); + + /* Calendar dot colors */ + --color-cal-1: #ffa94d; + --color-cal-2: #74b9ff; + --color-cal-3: #81ecec; + --color-cal-4: #ffd43b; + --color-cal-5: #ff6b9d; + --color-cal-6: #ff7675; + --color-cal-7: #0984e3; + --color-cal-8: #00cec9; + --color-cal-9: #f0c800; + --color-cal-10: #e84393; + --color-cal-11: #e74c3c; + + /* File type badge colors */ + --color-ft-html: #e34c26; + --color-ft-js: #2965f1; + --color-ft-python: #3776ab; + --color-ft-typescript: #3178c6; + --color-ft-rust: #dea584; + --color-ft-go: #00add8; + --color-ft-java: #e76f00; + --color-ft-shell: #555555; + --color-ft-csharp: #68217a; + --color-ft-php: #8892be; + --color-ft-ruby: #cc342d; + --color-ft-swift: #fa7343; + --color-ft-kotlin: #7f52ff; + --color-ft-scala: #e38c00; + --color-ft-angular: #cb171e; + --color-ft-cpp: #9c4221; + --color-ft-docker: #083fa1; + --color-ft-generic-blue: #556ee6; + --color-ft-generic-green: #4eaa25; + --color-ft-generic-gray: #a0aec0; + --color-ft-orange-light: #ffb86c; + --color-ft-yellow: #ffd43b; + --color-ft-orange-alt: #e34c26; + --color-ft-coffeescript: #9c4221; + + /* File type icon background/text pairs */ + --color-ft-folder-bg: #ffeaa7; + --color-ft-folder-tab: #fdcb6e; + --color-ft-doc-bg: #e0ecff; + --color-ft-doc-text: #3171d8; + --color-ft-pdf-bg: #fee2e2; + --color-ft-pdf-text: #e53e3e; + --color-ft-image-bg: #e0f2fe; + --color-ft-image-text: #3b82f6; + --color-ft-video-bg-from: #ede9fe; + --color-ft-video-bg-to: #fce7f3; + --color-ft-video-text: #8b5cf6; + --color-ft-audio-bg: #fef3c7; + --color-ft-audio-text: #f59e0b; + --color-ft-audio-alt-bg: #fff3e0; + --color-ft-spreadsheet-bg: #e6f4ea; + --color-ft-spreadsheet-text: #0d904f; + --color-ft-presentation-bg: #fef3e2; + --color-ft-presentation-text: #d04423; + --color-ft-archive-bg: #f5f0eb; + --color-ft-archive-text: #8d6e63; + --color-ft-installer-bg: #f3e8ff; + --color-ft-installer-text: #7c3aed; + --color-ft-script-bg: #e8f5e9; + --color-ft-script-text: #4eaa25; + --color-ft-config-bg: #f1f3f5; + --color-ft-config-text: #718096; + + /* Multiselect bar — always dark */ + --color-multiselect-bg: #1e293b; + --color-multiselect-border: #334155; + --color-multiselect-text: #ffffff; + --color-multiselect-text-faint: rgba(255, 255, 255, 0.7); + --color-multiselect-hover-bg: rgba(255, 255, 255, 0.1); + --color-multiselect-action-text: #ffffff; + --color-multiselect-action-hover: rgba(255, 255, 255, 0.2); + --color-multiselect-danger-bg: rgba(239, 68, 68, 0.25); + --color-multiselect-danger-text: #fca5a5; + --color-multiselect-danger-active: rgba(239, 68, 68, 0.4); + --color-multiselect-danger-text-active: #ffffff; + + /* Notification */ + --color-notification-bg: #ffffff; + --color-notification-badge: #ff3b30; + --color-notification-success: #34c759; + --color-notification-error: #ff3b30; + + /* Photos lightbox — always dark overlay */ + --color-lightbox-overlay: rgba(0, 0, 0, 0.92); + --color-lightbox-btn-bg: rgba(255, 255, 255, 0.12); + --color-lightbox-btn-text: #ffffff; + --color-lightbox-btn-hover: rgba(255, 255, 255, 0.25); + --color-lightbox-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent); + --color-lightbox-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); + --color-lightbox-text-faint: rgba(255, 255, 255, 0.5); + --color-lightbox-text-muted: rgba(255, 255, 255, 0.7); + + /* Purple/special */ + --color-purple-bg: #f3e8ff; + --color-purple-border: #7c3aed; + --color-purple-text: #7c3aed; + --color-purple-bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%); + --color-purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); + --color-purple-shadow: rgba(139, 92, 246, 0.35); + --color-purple-border-light: rgba(139, 92, 246, 0.15); + + /* OIDC / auth */ + --color-oidc-bg: #4f46e5; + --color-oidc-shadow: rgba(79, 70, 229, 0.3); + --color-oidc-shadow-lg: rgba(79, 70, 229, 0.4); + + /* Device verify */ + --color-device-verify-text: #ffc107; + --color-device-verify-shadow: rgba(255, 193, 7, 0.5); + --color-device-verify-drop-shadow: rgba(255, 193, 7, 0.4); + --color-device-verify-border: #ffc107; + --color-device-verify-muted: #6c757d; + --color-device-verify-dim: #ccc; + + /* Content area */ + --color-content-muted: #888; + --color-content-bg-warn: #ffeaa7; + --color-content-bg-warn-dark: #fdcb6e; + --color-content-debug-bg: red; + --color-content-debug-text: white; + + /* User menu */ + --color-user-menu-header-bg: linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%); + --color-user-menu-header-border: #fce7e1; + + /* Share dialog */ + --color-share-link-text: #1565c0; + --color-share-link-hover: #1565c0; + --color-share-remove-text: #b71c1c; + --color-share-owner-text: #757575; + + /* Trash view */ + --color-trash-surface: #ffffff; + --color-trash-border: #ddd; + --color-trash-restore: #4caf50; + --color-trash-delete: #f44336; + --color-trash-empty-bg: #f0f0f0; + + /* Primary (style.css) */ + --color-primary: #2563eb; + --color-primary-hover: #1d4ed8; + + /* Recent view */ + --color-recent-muted: #6c757d; + --color-recent-border: #6c757d; + + /* Star colors */ + --color-star-text: #fbbf24; + --color-star-text-hover: #f59e0b; + --color-star-active: #d97706; + + /* Card drop target */ + --color-card-drop-tint: rgba(230, 126, 34, 0.08); + --color-card-drop-border: #e67e22; + + /* Neutral backgrounds */ + --color-neutral-warm-bg: #f5f0eb; + --color-neutral-warm-text: #8d6e63; + --color-neutral-bg: #f1f3f5; + + /* Admin/profile blue accent */ + --color-admin-blue: #60a5fa; + --color-admin-blue-bg: rgba(59, 130, 246, 0.1); + --color-admin-blue-bg-sm: rgba(59, 130, 246, 0.15); + + /* Danger hover bg (for logout etc.) */ + --color-danger-hover-bg: rgba(239, 68, 68, 0.1); + + /* Additional success rings */ + --color-success-ring: rgba(72, 187, 120, 0.1); + --color-success-ring-dark: rgba(72, 187, 120, 0.15); + --color-success-text-strong: #2f855a; + --color-success-ring-vivid: rgba(74, 222, 128, 0.1); + --color-success-text-vivid: #86efac; + --color-success-ring-vivid-lg: rgba(74, 222, 128, 0.15); + --color-success-icon-vivid: #4ade80; + --color-secret-green: #059669; + + /* Additional overlays */ + --color-overlay-mid: rgba(0, 0, 0, 0.6); + --color-overlay-video: rgba(0, 0, 0, 0.55); + + /* Progress overlays */ + --color-progress-overlay: rgba(255, 255, 255, 0.95); + --color-progress-overlay-dark: rgba(30, 41, 59, 0.95); + + /* Misc */ + --color-black: #000000; + --color-info-border-light: #90cdf4; + --color-notification-error-ring: rgba(255, 59, 48, 0.1); + --color-accent-second: #ff2d55; + --color-warning-ring-xs: rgba(255, 193, 7, 0.05); + + /* Avatar / profile */ + --color-avatar-gradient: linear-gradient(135deg, #3b82f6, #6366f1); + --color-text-navy: #1a1a2e; + --color-role-admin-bg: #dbeafe; + --color-role-admin-text: #1d4ed8; + --color-dark-mid: #475569; + --color-role-admin-dark-bg: #1e3a5f; + + /* Photo tile */ + --color-photo-check-border: rgba(255, 255, 255, 0.8); + + /* Dark-mode selected card */ + --color-item-selected-dark: #1a1520; + + /* Accent shadow (smaller) */ + --color-accent-shadow-sm: rgba(255, 94, 58, 0.25); + + /* Warning faint background */ + --color-warning-bg-faint: #fffbeb; + + /* Storage progress fill gradients */ + --color-storage-fill-green: linear-gradient(90deg, #059669, #10b981); + --color-storage-fill-orange: linear-gradient(90deg, #d97706, #f59e0b); + --color-storage-fill-red: linear-gradient(90deg, #dc2626, #ef4444); + + /* Error text (dark shade) */ + --color-error-text-dark: #991b1b; + + /* Stat warning border */ + --color-stat-warn-border: #fbbf24; + + /* Status badge — light mode (success/emerald) */ + --color-badge-success-bg: #ecfdf5; + --color-badge-success-bg-medium: #d1fae5; + --color-badge-success-text: #065f46; + --color-badge-success-border: #a7f3d0; + --color-badge-success-fill: #047857; + --color-badge-success-fill-dark: #064e27; + --color-badge-success-fill-faint: #f0fdf4; + + /* Status badge — light mode (error/red) */ + --color-badge-error-border: #fecaca; + + /* Status badge — light mode (warning/amber) */ + --color-badge-warning-text: #92400e; + --color-badge-warning-border: #fde68a; + + /* Status badge — light mode (indigo/purple) */ + --color-badge-indigo-bg: #ede9fe; + --color-badge-indigo-text: #6d28d9; + + /* Status badge — light mode (blue) */ + --color-badge-blue-bg: #eff6ff; + --color-badge-blue-text: #1e40af; + --color-badge-blue-border: #bfdbfe; + + /* Status badge — light mode (gray/disabled) */ + --color-badge-gray: #d1d5db; + + /* Status badge — dark mode */ + --color-badge-success-dark-bg: #052e16; + --color-badge-success-dark-border: #065f46; + --color-badge-error-dark-bg: #3b1111; + --color-badge-error-dark-bg-hover: #4a1515; + --color-badge-error-dark-text: #fca5a5; + --color-badge-warning-dark-bg: #422006; + --color-badge-warning-dark-border: #92400e; + --color-badge-indigo-dark-bg: #2e1065; + --color-badge-indigo-dark-text: #c4b5fd; + --color-badge-blue-dark-bg: #0c2d48; + --color-badge-blue-dark-text: #93c5fd; + + /* Dark structural */ + --color-dark-footer: #162032; + --color-scrollbar-dark: rgba(255, 255, 255, 0.15); + --color-border-dark-faint: rgba(255, 255, 255, 0.03); + + /* Misc */ + --color-bg-off-white: #fafbfd; + --color-danger-shadow: rgba(220, 38, 38, 0.2); + --color-danger-shadow-lg: rgba(220, 38, 38, 0.3); } diff --git a/static/css/components/breadcrumb.css b/static/css/components/breadcrumb.css index 7b3d88a2..1bc910ff 100644 --- a/static/css/components/breadcrumb.css +++ b/static/css/components/breadcrumb.css @@ -5,7 +5,7 @@ flex-wrap: wrap; margin-bottom: 15px; font-size: 14px; - color: #666; + color: var(--color-text-medium); gap: 2px; } @@ -20,29 +20,29 @@ .breadcrumb-link { cursor: pointer; - color: #5a6f8a; + color: var(--color-text-muted); } .breadcrumb-link.drop-target { - background-color: rgba(255, 193, 7, 0.1); - border: 2px dashed #ffc107; + background-color: var(--color-warning-ring); + border: 2px dashed var(--color-warning-border); } .breadcrumb-link:hover { text-decoration: underline; - color: #ff5e3a; - background: rgba(255, 94, 58, 0.06); + color: var(--color-accent); + background: var(--color-accent-bg); } .breadcrumb-current { font-weight: 600; - color: #333; + color: var(--color-text-black); cursor: default; } .breadcrumb-separator { margin: 0 4px; - color: #adb5bd; + color: var(--color-text-faint); font-size: 12px; user-select: none; } @@ -61,5 +61,5 @@ } .breadcrumb-home.breadcrumb-link:hover { - background: rgba(255, 94, 58, 0.1); + background: var(--color-accent-ring); } diff --git a/static/css/components/buttons.css b/static/css/components/buttons.css index 09b1e6ba..d1159e29 100644 --- a/static/css/components/buttons.css +++ b/static/css/components/buttons.css @@ -17,53 +17,53 @@ } .btn-primary { - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); - color: white; - box-shadow: 0 4px 15px rgba(255, 94, 58, 0.3); + background: var(--color-accent-gradient); + color: var(--color-danger-text); + box-shadow: 0 4px 15px var(--color-accent-shadow); } .btn-primary:hover { transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(255, 94, 58, 0.4); + box-shadow: 0 6px 20px var(--color-accent-shadow-lg); } .btn-primary:active { transform: translateY(0); - box-shadow: 0 2px 10px rgba(255, 94, 58, 0.3); + box-shadow: 0 2px 10px var(--color-accent-shadow); } .btn-secondary { - background-color: #f8fafc; - color: #4a5568; - border: 2px solid #e2e8f0; + background-color: var(--color-bg-hover); + color: var(--color-text-secondary); + border: 2px solid var(--color-border); } .btn-secondary:hover { - background-color: #edf2f7; - border-color: #cbd5e0; + background-color: var(--color-bg-input-alt); + border-color: var(--color-border-medium); transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 12px var(--color-shadow-sm); } .btn-secondary:active { transform: translateY(0); - background-color: #e2e8f0; + background-color: var(--color-border); } .btn-danger { - background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); - color: white; - box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); + background: var(--color-danger-gradient); + color: var(--color-danger-text); + box-shadow: 0 4px 15px var(--color-danger-ring); } .btn-danger:hover { transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); + box-shadow: 0 6px 20px var(--color-danger-ring-lg); } .btn-danger:active { transform: translateY(0); - box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3); + box-shadow: 0 2px 10px var(--color-danger-ring); } /* View Toggle Buttons */ @@ -71,9 +71,9 @@ display: flex; gap: 2px; padding: 3px; - background-color: #f0f3f7; + background-color: var(--color-bg-muted); border-radius: 10px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); } .toggle-btn { @@ -86,20 +86,20 @@ border: none; border-radius: 8px; cursor: pointer; - color: #94a3b8; + color: var(--color-text-faint); font-size: 14px; transition: all 0.2s ease; } .toggle-btn:hover { - background-color: #e2e8f0; - color: #64748b; + background-color: var(--color-border); + color: var(--color-text-subtle); } .toggle-btn.active { - background-color: white; - color: #ff5e3a; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background-color: var(--color-bg-surface); + color: var(--color-accent); + box-shadow: 0 1px 3px var(--color-shadow); } .toggle-btn i { diff --git a/static/css/components/cards.css b/static/css/components/cards.css index 060e2c20..4c1d873b 100644 --- a/static/css/components/cards.css +++ b/static/css/components/cards.css @@ -14,8 +14,8 @@ /* Rubber band / lasso selection rectangle */ .selection-rect { position: fixed; - border: 1.5px solid var(--primary-color, #e67e22); - background-color: rgba(230, 126, 34, 0.08); + border: 1.5px solid var(--primary-color, var(--color-card-drop-border)); + background-color: var(--color-card-drop-tint); pointer-events: none; z-index: 1000; border-radius: 3px; @@ -27,14 +27,14 @@ } .files-grid-view .file-item { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); padding: 16px; display: flex; flex-direction: column; align-items: center; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 3px var(--color-shadow-xs); cursor: pointer; width: 100%; min-height: 160px; @@ -43,23 +43,23 @@ .files-grid-view .file-item:hover { transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); - border-color: #cbd5e0; + box-shadow: 0 5px 15px var(--color-shadow-sm); + border-color: var(--color-border-medium); } .files-grid-view .file-item.selected { - border-color: #ff5e3a; - background: #fff8f6; + border-color: var(--color-accent); + background: var(--color-item-selected); box-shadow: - 0 0 0 1px rgba(255, 94, 58, 0.15), - 0 4px 12px rgba(255, 94, 58, 0.1); + 0 0 0 1px var(--color-accent-ring-dark), + 0 4px 12px var(--color-accent-ring); } .files-grid-view .file-item.selected:hover { - border-color: #ff5e3a; + border-color: var(--color-accent); box-shadow: - 0 0 0 1px rgba(255, 94, 58, 0.2), - 0 6px 18px rgba(255, 94, 58, 0.15); + 0 0 0 1px var(--color-accent-ring-strong), + 0 6px 18px var(--color-accent-ring-dark); } /* element hidden on grid view */ @@ -75,7 +75,7 @@ width: 22px; height: 22px; border-radius: 6px; - background: white; + background: var(--color-bg-surface); display: flex; align-items: center; justify-content: center; @@ -90,12 +90,12 @@ .files-grid-view .file-item.selected .checkbox-cell { opacity: 1; - background: #ff5e3a; - border-color: #ff5e3a; + background: var(--color-accent); + border-color: var(--color-accent); } .files-grid-view .file-item.selected .checkbox-cell i { - color: white; + color: var(--color-danger-text); font-size: 11px; } @@ -115,7 +115,7 @@ opacity: 0; z-index: 10; cursor: pointer; - color: #64748b; + color: var(--color-text-subtle); font-size: 16px; } @@ -124,8 +124,8 @@ } .files-grid-view .file-actions:hover { - background: #f1f5f9; - color: #334155; + background: var(--color-border-light); + color: var(--color-text-dark); } /* Favorite star (mirrors file-actions button pattern) */ @@ -144,7 +144,7 @@ opacity: 0; z-index: 12; cursor: pointer; - color: #cbd5e0; + color: var(--color-border-medium); font-size: 15px; padding: 0; line-height: 1; @@ -155,16 +155,16 @@ } .files-grid-view .file-item button.favorite-star:hover { - color: #fbbf24; + color: var(--color-star-text); } .files-grid-view .file-item button.favorite-star.active { opacity: 1; - color: #f59e0b; + color: var(--color-star-text-hover); } .files-grid-view .file-item button.favorite-star.active:hover { - color: #d97706; + color: var(--color-star-active); } .files-grid-view .file-item.dragging { @@ -174,8 +174,8 @@ } .files-grid-view .file-item.drop-target { - background-color: rgba(255, 193, 7, 0.1); - border: 2px dashed #ffc107; + background-color: var(--color-warning-ring); + border: 2px dashed var(--color-warning-border); } /* ensure icon centered */ @@ -195,7 +195,7 @@ .file-icon.folder-icon { width: 100px; height: 70px; - background-color: #ffeaa7; + background-color: var(--color-warning-bg); border-radius: 8px; position: relative; margin-bottom: 10px; @@ -211,18 +211,18 @@ left: 0; right: 0; height: 20px; - background-color: #fdcb6e; + background-color: var(--color-warning-bg-dark); border-radius: 8px 8px 0 0; } .file-icon.pdf-icon { width: 100px; height: 70px; - background-color: #fee2e2; + background-color: var(--color-error-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #e53e3e; + border-top: 3px solid var(--color-danger-text-alt); display: flex; align-items: center; justify-content: center; @@ -232,7 +232,7 @@ content: "PDF"; font-size: 16px; font-weight: 700; - color: #e53e3e; + color: var(--color-danger-text-alt); opacity: 0.65; letter-spacing: 1px; } @@ -240,11 +240,11 @@ .file-icon.doc-icon { width: 100px; height: 70px; - background-color: #ebf5fb; + background-color: var(--color-info-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #2b6cb0; + border-top: 3px solid var(--color-info-border); overflow: hidden; } @@ -255,7 +255,7 @@ left: 18px; right: 18px; height: 3px; - background-color: #2b6cb0; + background-color: var(--color-info-border); opacity: 0.3; border-radius: 2px; } @@ -267,7 +267,7 @@ left: 18px; right: 28px; height: 3px; - background-color: #2b6cb0; + background-color: var(--color-info-border); opacity: 0.25; border-radius: 2px; } @@ -275,11 +275,11 @@ .file-icon.script-icon { width: 100px; height: 70px; - background-color: #e8f5e9; + background-color: var(--color-success-bg-green); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #4eaa25; + border-top: 3px solid var(--color-success-text-green); display: flex; align-items: center; justify-content: center; @@ -290,18 +290,18 @@ font-size: 18px; font-weight: 700; font-family: monospace; - color: #4eaa25; + color: var(--color-success-text-green); opacity: 0.55; } .file-icon.config-icon { width: 100px; height: 70px; - background-color: #f1f3f5; + background-color: var(--color-neutral-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #718096; + border-top: 3px solid var(--color-text-muted); overflow: hidden; } @@ -312,7 +312,7 @@ left: 16px; width: 10px; height: 10px; - border: 2px solid #718096; + border: 2px solid var(--color-text-muted); border-radius: 50%; opacity: 0.4; } @@ -324,7 +324,7 @@ left: 34px; right: 16px; height: 3px; - background-color: #718096; + background-color: var(--color-text-muted); opacity: 0.3; border-radius: 2px; } @@ -332,7 +332,7 @@ .file-icon.image-icon { width: 100px; height: 70px; - background-color: #74b9ff; + background-color: var(--color-cal-2); border-radius: 4px; position: relative; margin-bottom: 10px; @@ -357,31 +357,31 @@ left: 15px; width: 20px; height: 20px; - background-color: #ffda79; + background-color: var(--color-cal-4); border-radius: 50%; } */ .file-icon.video-icon { width: 100px; height: 70px; - background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%); + background: var(--color-purple-bg-gradient); border-radius: 10px; position: relative; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; - border: 1px solid rgba(139, 92, 246, 0.15); + border: 1px solid var(--color-purple-border-light); } .file-icon.video-icon::before { content: ""; width: 36px; height: 36px; - background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); + background: var(--color-purple-gradient); border-radius: 50%; position: absolute; - box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35); + box-shadow: 0 3px 10px var(--color-purple-shadow); } .file-icon.video-icon::after { @@ -390,7 +390,7 @@ height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; - border-left: 11px solid white; + border-left: 11px solid var(--color-danger-text); position: absolute; margin-left: 3px; } @@ -398,11 +398,11 @@ .file-icon.code-icon { width: 100px; height: 70px; - background-color: #e2e8f0; + background-color: var(--color-border); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #556ee6; + border-top: 3px solid var(--color-ft-generic-blue); overflow: hidden; } @@ -413,7 +413,7 @@ left: 10px; right: 10px; height: 2px; - background-color: #556ee6; + background-color: var(--color-ft-generic-blue); } .file-icon.code-icon::before { @@ -432,7 +432,7 @@ position: absolute; left: 10px; height: 2px; - background-color: #a0aec0; + background-color: var(--color-ft-generic-gray); } .file-icon.code-icon .code-line-1 { @@ -451,184 +451,184 @@ } .file-icon.json-icon { - border-top-color: #ffb86c; + border-top-color: var(--color-ft-orange-light); } .file-icon.json-icon::before, .file-icon.json-icon::after { - background-color: #ffb86c; + background-color: var(--color-ft-orange-light); } .file-icon.js-icon { - border-top-color: #ffd43b; + border-top-color: var(--color-ft-yellow); } .file-icon.js-icon::before, .file-icon.js-icon::after { - background-color: #ffd43b; + background-color: var(--color-ft-yellow); } .file-icon.html-icon { - border-top-color: #e34c26; + border-top-color: var(--color-ft-html); } .file-icon.html-icon::before, .file-icon.html-icon::after { - background-color: #e34c26; + background-color: var(--color-ft-html); } .file-icon.css-icon { - border-top-color: #2965f1; + border-top-color: var(--color-ft-js); } .file-icon.css-icon::before, .file-icon.css-icon::after { - background-color: #2965f1; + background-color: var(--color-ft-js); } .file-icon.py-icon { - border-top-color: #3776ab; + border-top-color: var(--color-ft-python); } .file-icon.py-icon::before, .file-icon.py-icon::after { - background-color: #3776ab; + background-color: var(--color-ft-python); } .file-icon.ts-icon { - border-top-color: #3178c6; + border-top-color: var(--color-ft-typescript); } .file-icon.ts-icon::before, .file-icon.ts-icon::after { - background-color: #3178c6; + background-color: var(--color-ft-typescript); } .file-icon.rust-icon { - border-top-color: #dea584; + border-top-color: var(--color-ft-rust); } .file-icon.rust-icon::before, .file-icon.rust-icon::after { - background-color: #dea584; + background-color: var(--color-ft-rust); } .file-icon.go-icon { - border-top-color: #00add8; + border-top-color: var(--color-ft-go); } .file-icon.go-icon::before, .file-icon.go-icon::after { - background-color: #00add8; + background-color: var(--color-ft-go); } .file-icon.java-icon { - border-top-color: #e76f00; + border-top-color: var(--color-ft-java); } .file-icon.java-icon::before, .file-icon.java-icon::after { - background-color: #e76f00; + background-color: var(--color-ft-java); } .file-icon.c-icon { - border-top-color: #555; + border-top-color: var(--color-ft-shell); } .file-icon.c-icon::before, .file-icon.c-icon::after { - background-color: #555; + background-color: var(--color-ft-shell); } .file-icon.cs-icon { - border-top-color: #68217a; + border-top-color: var(--color-ft-csharp); } .file-icon.cs-icon::before, .file-icon.cs-icon::after { - background-color: #68217a; + background-color: var(--color-ft-csharp); } .file-icon.php-icon { - border-top-color: #8892be; + border-top-color: var(--color-ft-php); } .file-icon.php-icon::before, .file-icon.php-icon::after { - background-color: #8892be; + background-color: var(--color-ft-php); } .file-icon.ruby-icon { - border-top-color: #cc342d; + border-top-color: var(--color-ft-ruby); } .file-icon.ruby-icon::before, .file-icon.ruby-icon::after { - background-color: #cc342d; + background-color: var(--color-ft-ruby); } .file-icon.swift-icon { - border-top-color: #fa7343; + border-top-color: var(--color-ft-swift); } .file-icon.swift-icon::before, .file-icon.swift-icon::after { - background-color: #fa7343; + background-color: var(--color-ft-swift); } .file-icon.kotlin-icon { - border-top-color: #7f52ff; + border-top-color: var(--color-ft-kotlin); } .file-icon.kotlin-icon::before, .file-icon.kotlin-icon::after { - background-color: #7f52ff; + background-color: var(--color-ft-kotlin); } .file-icon.sql-icon { - border-top-color: #e38c00; + border-top-color: var(--color-ft-scala); } .file-icon.sql-icon::before, .file-icon.sql-icon::after { - background-color: #e38c00; + background-color: var(--color-ft-scala); } .file-icon.yaml-icon { - border-top-color: #cb171e; + border-top-color: var(--color-ft-angular); } .file-icon.yaml-icon::before, .file-icon.yaml-icon::after { - background-color: #cb171e; + background-color: var(--color-ft-angular); } .file-icon.toml-icon { - border-top-color: #9c4221; + border-top-color: var(--color-ft-cpp); } .file-icon.toml-icon::before, .file-icon.toml-icon::after { - background-color: #9c4221; + background-color: var(--color-ft-cpp); } .file-icon.md-icon { - border-top-color: #083fa1; + border-top-color: var(--color-ft-docker); } .file-icon.md-icon::before, .file-icon.md-icon::after { - background-color: #083fa1; + background-color: var(--color-ft-docker); } .file-icon.spreadsheet-icon { width: 100px; height: 70px; - background-color: #e6f4ea; + background-color: var(--color-success-bg-alt); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #0d904f; + border-top: 3px solid var(--color-success-text-alt); overflow: hidden; display: flex; align-items: center; @@ -643,19 +643,19 @@ width: 64px; height: 44px; background: - repeating-linear-gradient(to bottom, #0d904f 0px, #0d904f 1px, transparent 1px, transparent 11px), - repeating-linear-gradient(to right, #0d904f 0px, #0d904f 1px, transparent 1px, transparent 22px); + repeating-linear-gradient(to bottom, var(--color-success-text-alt) 0px, var(--color-success-text-alt) 1px, transparent 1px, transparent 11px), + repeating-linear-gradient(to right, var(--color-success-text-alt) 0px, var(--color-success-text-alt) 1px, transparent 1px, transparent 22px); opacity: 0.35; } .file-icon.presentation-icon { width: 100px; height: 70px; - background-color: #fef3e2; + background-color: var(--color-warning-bg-orange); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #d04423; + border-top: 3px solid var(--color-warning-text-orange); overflow: hidden; display: flex; align-items: center; @@ -669,7 +669,7 @@ left: 22px; width: 56px; height: 38px; - border: 2px solid #d04423; + border: 2px solid var(--color-warning-text-orange); border-radius: 4px; opacity: 0.4; } @@ -683,18 +683,18 @@ height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; - border-left: 14px solid #d04423; + border-left: 14px solid var(--color-warning-text-orange); opacity: 0.5; } .file-icon.audio-icon { width: 100px; height: 70px; - background-color: #fff3e0; + background-color: var(--color-warning-orange-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #f57c00; + border-top: 3px solid var(--color-warning-orange-text); overflow: hidden; display: flex; align-items: center; @@ -704,18 +704,18 @@ .file-icon.audio-icon::before { content: "♪"; font-size: 28px; - color: #f57c00; + color: var(--color-warning-orange-text); opacity: 0.6; } .file-icon.archive-icon { width: 100px; height: 70px; - background-color: #f5f0eb; + background-color: var(--color-neutral-warm-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #8d6e63; + border-top: 3px solid var(--color-neutral-warm-text); overflow: hidden; display: flex; align-items: center; @@ -729,18 +729,18 @@ left: 45px; width: 10px; height: 46px; - background: repeating-linear-gradient(to bottom, #8d6e63 0px, #8d6e63 5px, #f5f0eb 5px, #f5f0eb 10px); + background: repeating-linear-gradient(to bottom, var(--color-neutral-warm-text) 0px, var(--color-neutral-warm-text) 5px, var(--color-neutral-warm-bg) 5px, var(--color-neutral-warm-bg) 10px); opacity: 0.5; } .file-icon.installer-icon { width: 100px; height: 70px; - background-color: #f3e8ff; + background-color: var(--color-purple-bg); border-radius: 4px; position: relative; margin-bottom: 10px; - border-top: 3px solid #7c3aed; + border-top: 3px solid var(--color-purple-text); overflow: hidden; display: flex; align-items: center; @@ -750,7 +750,7 @@ .file-icon.installer-icon::before { content: "⬇"; font-size: 24px; - color: #7c3aed; + color: var(--color-purple-text); opacity: 0.5; } @@ -759,7 +759,7 @@ font-weight: 500; text-align: center; margin-bottom: 5px; - color: #2d3748; + color: var(--color-text); max-width: 100%; white-space: nowrap; overflow: hidden; @@ -779,47 +779,6 @@ .files-grid-view .file-item .type-cell { font-size: 12px; - color: #718096; + color: var(--color-text-muted); text-align: center; } - -[data-theme="dark"] .files-grid-view .file-item { - background-color: #1e293b; - border-color: #334155; -} - -[data-theme="dark"] .files-grid-view .file-item:hover { - border-color: #475569; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -[data-theme="dark"] .files-grid-view .file-item.selected { - border-color: #ff5e3a; - background: #1a1520; -} - -[data-theme="dark"] .files-grid-view .file-item .checkbox-cell { - background: #1e293b; - border-color: #475569; -} - -[data-theme="dark"] .files-grid-view .file-actions { - color: #94a3b8; -} - -[data-theme="dark"] .files-grid-view .file-actions:hover { - background: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .files-grid-view .file-item .name-cell { - color: #e2e8f0; -} - -[data-theme="dark"] .files-grid-view .file-item .type-cell { - color: #94a3b8; -} - -[data-theme="dark"] .files-grid-view .file-item.drop-target { - background-color: rgba(255, 193, 7, 0.05); -} diff --git a/static/css/components/contextMenu.css b/static/css/components/contextMenu.css index f159aeeb..3c300252 100644 --- a/static/css/components/contextMenu.css +++ b/static/css/components/contextMenu.css @@ -1,12 +1,12 @@ /* Context menu */ .context-menu { position: absolute; - background: white; - border: 1px solid #e2e8f0; + background: var(--color-bg-surface); + border: 1px solid var(--color-border); border-radius: 14px; box-shadow: - 0 10px 36px rgba(0, 0, 0, 0.12), - 0 0 0 1px rgba(0, 0, 0, 0.04); + 0 10px 36px var(--color-shadow-lg), + 0 0 0 1px var(--color-shadow-xs); padding: 6px; min-width: 200px; z-index: 2000; @@ -31,25 +31,25 @@ display: flex; align-items: center; gap: 12px; - color: #334155; + color: var(--color-text-dark); font-size: 14px; border-radius: 8px; transition: background 0.12s ease; } .context-menu-item:hover { - background: #f1f5f9; + background: var(--color-border-light); } .context-menu-item:active { - background: #e2e8f0; + background: var(--color-border); } .context-menu-item i { width: 18px; text-align: center; font-size: 14px; - color: #64748b; + color: var(--color-text-subtle); [dir="rtl"] & { margin-left: 0; @@ -58,19 +58,19 @@ } .context-menu-item-danger { - color: #ef4444; + color: var(--color-danger-alt); } .context-menu-item-danger:hover { - background: #fef2f2; + background: var(--color-danger-light-bg); } .context-menu-item-danger i { - color: #ef4444; + color: var(--color-danger-alt); } .context-menu-separator { height: 1px; - background: #f1f5f9; + background: var(--color-border-light); margin: 4px 8px; } diff --git a/static/css/components/csp-utilities.css b/static/css/components/csp-utilities.css index 6b78453a..c9305fe9 100644 --- a/static/css/components/csp-utilities.css +++ b/static/css/components/csp-utilities.css @@ -3,19 +3,19 @@ /* ── Empty state icons (large, muted) ── */ .empty-state-icon { font-size: 48px; - color: #ddd; + color: var(--color-border-ddd); margin-bottom: 16px; } .empty-state-icon.error { - color: #f44336; + color: var(--color-trash-delete); } .empty-state-icon.spinner { - color: #666; + color: var(--color-text-medium); } /* ── Dialog header icons (accent color) ── */ .dialog-header-icon { - color: #ff5e3a; + color: var(--color-accent); } /* ── Icon spacing ── */ @@ -29,13 +29,13 @@ /* ── Success check icon ── */ .check-icon { - color: #48bb78; + color: var(--color-success-border); } /* ── Move dialog ── */ .move-dialog-hint { margin: 0 0 12px; - color: #718096; + color: var(--color-text-muted); font-size: 14px; } .folder-select-container { @@ -55,13 +55,13 @@ /* ── Search empty state text ── */ .search-empty-text { - color: var(--text-secondary, #64748b); + color: var(--text-secondary, var(--color-text-subtle)); } /* ── Notification upload current file ── */ .notif-upload-current { font-size: 11px; - color: #64748b; + color: var(--color-text-subtle); margin: 3px 0; white-space: nowrap; overflow: hidden; @@ -70,7 +70,7 @@ /* ── Login auth hint ── */ .auth-hint { - color: var(--text-secondary, #666); + color: var(--text-secondary, var(--color-text-medium)); margin-top: 4px; display: block; } @@ -87,8 +87,8 @@ width: 64px; height: 64px; border-radius: 50%; - background: linear-gradient(135deg, #3b82f6, #6366f1); - color: #fff; + background: var(--color-avatar-gradient); + color: var(--color-danger-text); display: inline-flex; align-items: center; justify-content: center; @@ -99,12 +99,12 @@ .about-modal-username { margin: 0; font-size: 18px; - color: #1a1a2e; + color: var(--color-text-navy); } .about-modal-email { margin: 4px 0 0; font-size: 13px; - color: #64748b; + color: var(--color-text-subtle); } .about-modal-role { display: inline-block; @@ -115,19 +115,19 @@ font-weight: 600; } .about-modal-role-admin { - background: #dbeafe; - color: #1d4ed8; + background: var(--color-role-admin-bg); + color: var(--color-role-admin-text); } .about-modal-role-user { - background: #f1f5f9; - color: #64748b; + background: var(--color-border-light); + color: var(--color-text-subtle); } .about-modal-storage { padding: 16px 20px; } .about-modal-storage-label { font-size: 12px; - color: #64748b; + color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; @@ -136,7 +136,7 @@ margin-right: 4px; } .about-modal-bar-bg { - background: #f1f5f9; + background: var(--color-border-light); border-radius: 6px; height: 8px; overflow: hidden; @@ -149,7 +149,7 @@ } .about-modal-bar-text { font-size: 12px; - color: #64748b; + color: var(--color-text-subtle); text-align: right; } .about-modal-footer { @@ -159,54 +159,12 @@ } .about-modal-close-btn { padding: 8px 24px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 8px; - background: #fff; - color: #334155; + background: var(--color-bg-surface); + color: var(--color-text-dark); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } - -/* ── Dark theme overrides ── */ -[data-theme="dark"] .empty-state-icon { - color: #475569; -} -[data-theme="dark"] .empty-state-icon.error { - color: #ef4444; -} -[data-theme="dark"] .about-modal-username { - color: #f1f5f9; -} -[data-theme="dark"] .about-modal-email { - color: #94a3b8; -} -[data-theme="dark"] .about-modal-role-admin { - background: #1e3a5f; - color: #60a5fa; -} -[data-theme="dark"] .about-modal-role-user { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .about-modal-storage-label { - color: #94a3b8; -} -[data-theme="dark"] .about-modal-bar-bg { - background: #334155; -} -[data-theme="dark"] .about-modal-bar-text { - color: #94a3b8; -} -[data-theme="dark"] .about-modal-close-btn { - background: #1e293b; - border-color: #334155; - color: #cbd5e1; -} -[data-theme="dark"] .move-dialog-hint { - color: #94a3b8; -} -[data-theme="dark"] .search-empty-text { - color: #94a3b8; -} diff --git a/static/css/components/dialogs.css b/static/css/components/dialogs.css index dc7c7244..b6c9158a 100644 --- a/static/css/components/dialogs.css +++ b/static/css/components/dialogs.css @@ -26,7 +26,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.45); + background-color: var(--color-overlay-light); display: none; align-items: center; justify-content: center; @@ -36,11 +36,11 @@ } .rename-dialog-content { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 16px; width: 420px; max-width: 90%; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + box-shadow: 0 20px 60px var(--color-shadow-2xl); overflow: hidden; animation: modalSlideIn 0.25s ease; } @@ -48,9 +48,9 @@ .rename-dialog-header { font-size: 17px; font-weight: 600; - color: #1a202c; + color: var(--color-text-heading); padding: 20px 24px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px; @@ -63,19 +63,19 @@ .rename-dialog input { width: 100%; padding: 12px 16px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 15px; - background: #f8fafc; - color: #1a202c; + background: var(--color-bg-hover); + color: var(--color-text-heading); transition: all 0.15s ease; outline: none; } .rename-dialog input:focus { - border-color: #ff5e3a; - background: white; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .rename-dialog-buttons { @@ -83,19 +83,19 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-top: 1px solid var(--color-border); } .rename-dialog-buttons .btn-outline { background: transparent; - color: #4a5568; - border: 1px solid #cbd5e0; + color: var(--color-text-secondary); + border: 1px solid var(--color-border-medium); } .rename-dialog-buttons .btn-outline:hover { - background: #f7fafc; - border-color: #a0aec0; + background: var(--color-bg-alt); + border-color: var(--color-text-placeholder); } /* Share Dialog — Modern Style */ @@ -105,7 +105,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.45); + background-color: var(--color-overlay-light); display: none; justify-content: center; align-items: center; @@ -115,11 +115,11 @@ } .share-dialog-content { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 16px; width: 480px; max-width: 90%; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + box-shadow: 0 20px 60px var(--color-shadow-2xl); overflow: hidden; animation: modalSlideIn 0.25s ease; max-height: 85vh; @@ -129,9 +129,9 @@ .share-dialog-header { font-size: 17px; font-weight: 600; - color: #1a202c; + color: var(--color-text-heading); padding: 20px 24px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px; @@ -141,20 +141,20 @@ .share-dialog textarea { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; - color: #1a202c; + background: var(--color-bg-hover); + color: var(--color-text-heading); transition: all 0.15s ease; outline: none; } .share-dialog input:focus, .share-dialog textarea:focus { - border-color: #ff5e3a; - background: white; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .share-dialog-buttons { @@ -162,14 +162,14 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-top: 1px solid var(--color-border); } .shared-item-info { padding: 12px 24px; - background: #f8fafc; - border-bottom: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-bottom: 1px solid var(--color-border); font-size: 14px; } @@ -183,7 +183,7 @@ font-size: 13px; font-weight: 600; margin-bottom: 10px; - color: #4a5568; + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } @@ -204,7 +204,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.45); + background-color: var(--color-overlay-light); display: none; justify-content: center; align-items: center; @@ -218,11 +218,11 @@ } .shared-dialog-content { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 16px; width: 480px; max-width: 90%; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + box-shadow: 0 20px 60px var(--color-shadow-2xl); overflow: hidden; animation: modalSlideIn 0.25s ease; max-height: 85vh; @@ -233,9 +233,9 @@ .shared-dialog-header { font-size: 17px; font-weight: 600; - color: #1a202c; + color: var(--color-text-heading); padding: 20px 24px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px; @@ -247,15 +247,15 @@ border: none; font-size: 22px; cursor: pointer; - color: #718096; + color: var(--color-text-muted); padding: 4px 8px; border-radius: 6px; transition: all 0.15s; } .shared-dialog-header .close-dialog-btn:hover { - background: #f0f0f0; - color: #1a202c; + background: var(--color-bg-empty); + color: var(--color-text-heading); } .shared-dialog .share-link-section, @@ -272,7 +272,7 @@ display: block; font-weight: 600; margin-bottom: 8px; - color: #2d3748; + color: var(--color-text); font-size: 14px; } @@ -284,11 +284,11 @@ .shared-dialog .share-link-input input { flex: 1; padding: 8px 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 8px; font-size: 13px; - background: #f8fafc; - color: #1a202c; + background: var(--color-bg-hover); + color: var(--color-text-heading); } .shared-dialog .share-permissions-section label, @@ -299,7 +299,7 @@ gap: 8px; margin-bottom: 8px; font-size: 14px; - color: #4a5568; + color: var(--color-text-secondary); } .shared-dialog .password-input-group { @@ -311,18 +311,18 @@ .shared-dialog .password-input-group input { flex: 1; padding: 8px 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 8px; font-size: 13px; - background: #f8fafc; + background: var(--color-bg-hover); } .shared-dialog .share-expiration-section input[type="date"] { padding: 8px 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 8px; font-size: 13px; - background: #f8fafc; + background: var(--color-bg-hover); margin-top: 8px; } @@ -332,19 +332,19 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-top: 1px solid var(--color-border); } .shared-dialog .notification-form input, .shared-dialog .notification-form textarea { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; - color: #1a202c; + background: var(--color-bg-hover); + color: var(--color-text-heading); outline: none; transition: all 0.15s ease; box-sizing: border-box; @@ -352,9 +352,9 @@ .shared-dialog .notification-form input:focus, .shared-dialog .notification-form textarea:focus { - border-color: #ff5e3a; - background: white; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .shared-dialog .notification-form .form-group { @@ -369,7 +369,7 @@ flex-wrap: wrap; gap: 4px; padding: 8px 12px; - background: #f8fafc; + background: var(--color-bg-hover); border-radius: 8px; margin-bottom: 12px; font-size: 13px; @@ -377,7 +377,7 @@ } .move-breadcrumb-item { - color: #4a5568; + color: var(--color-text-secondary); cursor: pointer; padding: 2px 6px; border-radius: 4px; @@ -386,18 +386,18 @@ } .move-breadcrumb-item:hover { - background: #e2e8f0; - color: #1a202c; + background: var(--color-border); + color: var(--color-text-heading); } .move-breadcrumb-item.current { - color: #ff5e3a; + color: var(--color-accent); font-weight: 600; cursor: default; } .move-breadcrumb-separator { - color: #a0aec0; + color: var(--color-text-placeholder); margin: 0 2px; } @@ -410,56 +410,56 @@ border-radius: 8px; cursor: pointer; transition: all 0.15s ease; - color: #4a5568; + color: var(--color-text-secondary); font-size: 14px; } .folder-select-item:hover { - background-color: #f0f3f7; + background-color: var(--color-bg-muted); } .folder-select-item.selected { - background-color: rgba(255, 94, 58, 0.1); - color: #ff5e3a; + background-color: var(--color-accent-ring); + color: var(--color-accent); font-weight: 600; } .folder-select-item i { - color: #ffa94d; + color: var(--color-cal-1); font-size: 16px; } .folder-select-item.selected i { - color: #ff5e3a; + color: var(--color-accent); } /* "Select this folder" option */ .folder-select-item.folder-select-current { - background-color: rgba(72, 187, 120, 0.1); - color: #2f855a; + background-color: var(--color-success-ring); + color: var(--color-success-text-strong); font-weight: 500; } .folder-select-item.folder-select-current:hover { - background-color: rgba(72, 187, 120, 0.15); + background-color: var(--color-success-ring-dark); } .folder-select-item.folder-select-current i { - color: #48bb78; + color: var(--color-success-border); } /* Navigate up option */ .folder-select-item.folder-navigate-up { - color: #718096; + color: var(--color-text-muted); font-style: italic; } .folder-select-item.folder-navigate-up:hover { - color: #4a5568; + color: var(--color-text-secondary); } .folder-select-item.folder-navigate-up i { - color: #a0aec0; + color: var(--color-text-placeholder); } /* Folder navigation item (click to enter) */ @@ -472,7 +472,7 @@ } .folder-select-item.folder-navigate .folder-navigate-icon { - color: #a0aec0; + color: var(--color-text-placeholder); font-size: 12px; opacity: 0; transition: opacity 0.15s ease; @@ -489,7 +489,7 @@ justify-content: center; gap: 8px; padding: 24px; - color: #a0aec0; + color: var(--color-text-placeholder); font-size: 14px; } @@ -511,7 +511,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.45); + background-color: var(--color-overlay-light); display: none; align-items: center; justify-content: center; @@ -526,11 +526,11 @@ } .confirm-dialog-content { - background: white; + background: var(--color-bg-surface); border-radius: 16px; width: 400px; max-width: 90%; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + box-shadow: 0 20px 60px var(--color-shadow-2xl); overflow: hidden; animation: modalSlideIn 0.25s ease; text-align: center; @@ -542,19 +542,19 @@ .confirm-dialog-icon i { font-size: 40px; - color: #f56565; + color: var( --color-danger-bg); } .confirm-dialog-title { font-size: 17px; font-weight: 600; - color: #1a202c; + color: var(--color-text-heading); padding: 0 24px 8px; } .confirm-dialog-message { font-size: 14px; - color: #718096; + color: var(--color-text-muted); padding: 0 24px 20px; line-height: 1.5; } @@ -563,25 +563,25 @@ display: flex; gap: 12px; padding: 16px 24px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-top: 1px solid var(--color-border); justify-content: flex-end; } .confirm-dialog-buttons .btn-danger { - background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); - color: white; + background: linear-gradient(135deg, var(--color-danger-bg) 0%, var(--color-danger-bg-hover) 100%); + color: var(--color-danger-text); border: none; padding: 10px 20px; border-radius: 10px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; - box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3); + box-shadow: 0 2px 8px var(--color-danger-ring); } .confirm-dialog-buttons .btn-danger:hover { - box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4); + box-shadow: 0 4px 12px var(--color-danger-ring-lg); transform: translateY(-1px); } @@ -592,7 +592,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--color-overlay); display: none; align-items: center; justify-content: center; @@ -604,9 +604,9 @@ } .dialog-content { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 10px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 25px var(--color-shadow); width: 500px; max-width: 90%; max-height: 90vh; @@ -615,7 +615,7 @@ .dialog-header { padding: 15px 20px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; @@ -623,7 +623,7 @@ .dialog-header h3 { font-size: 18px; - color: #2d3748; + color: var(--color-text); margin: 0; } @@ -632,7 +632,7 @@ border: none; font-size: 24px; cursor: pointer; - color: #a0aec0; + color: var(--color-text-placeholder); } .dialog-body { @@ -654,315 +654,7 @@ .share-link-container input { flex-grow: 1; padding: 10px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; } - -[data-theme="dark"] .rename-dialog-content { - background-color: #1e293b; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .rename-dialog-header { - color: #f1f5f9; - border-bottom-color: #334155; -} - -[data-theme="dark"] .rename-dialog input { - background: #0f172a; - color: #e2e8f0; - border-color: #334155; -} - -[data-theme="dark"] .rename-dialog input:focus { - border-color: #ff5e3a; - background: #0f172a; -} - -[data-theme="dark"] .rename-dialog-buttons { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .rename-dialog-buttons .btn-outline { - background: transparent; - color: #94a3b8; - border-color: #475569; -} - -[data-theme="dark"] .rename-dialog-buttons .btn-outline:hover { - background: #334155; - border-color: #64748b; -} - -[data-theme="dark"] .shared-dialog-content { - background-color: #1e293b; -} - -[data-theme="dark"] .shared-dialog-header { - color: #e2e8f0; - border-bottom-color: #334155; -} - -[data-theme="dark"] .shared-dialog-header .close-dialog-btn { - color: #94a3b8; -} - -[data-theme="dark"] .shared-dialog-header .close-dialog-btn:hover { - background: #334155; - color: #e2e8f0; -} - -[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: #0f172a; - border-color: #334155; - color: #e2e8f0; -} - -[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: #ff5e3a; - background: #1e293b; -} - -[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: #e2e8f0; -} - -[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: #94a3b8; -} - -[data-theme="dark"] .shared-dialog .share-actions, -[data-theme="dark"] .shared-dialog .notification-actions { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .confirm-dialog-content { - background-color: #1e293b; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .confirm-dialog-header { - color: #f1f5f9; -} - -[data-theme="dark"] .confirm-dialog-message { - color: #94a3b8; -} - -[data-theme="dark"] .confirm-dialog-buttons { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .move-dialog-content { - background-color: #1e293b; -} - -[data-theme="dark"] .move-dialog-header { - color: #f1f5f9; - border-bottom-color: #334155; -} - -[data-theme="dark"] .move-dialog .folder-tree { - background: #0f172a; - border-color: #334155; -} - -[data-theme="dark"] .move-dialog .folder-tree-item { - color: #cbd5e1; -} - -[data-theme="dark"] .move-dialog .folder-tree-item:hover { - background: #334155; -} - -[data-theme="dark"] .move-dialog .folder-tree-item.selected { - background: rgba(255, 94, 58, 0.1); - color: #ff5e3a; -} - -[data-theme="dark"] .move-dialog-buttons { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .share-dialog-content { - background-color: #1e293b; -} - -[data-theme="dark"] .share-dialog-header { - color: #f1f5f9; - border-bottom-color: #334155; -} - -[data-theme="dark"] .share-dialog-body label { - color: #94a3b8; -} - -[data-theme="dark"] .share-dialog-body input { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .share-dialog-body input:focus { - border-color: #ff5e3a; - background: #0f172a; -} - -[data-theme="dark"] .share-link-container { - background: #0f172a; - border-color: #334155; -} - -[data-theme="dark"] .share-link-container input { - color: #e2e8f0; -} - -[data-theme="dark"] .share-dialog-buttons { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .dialog { - background-color: rgba(0, 0, 0, 0.6); -} - -[data-theme="dark"] .dialog-content { - background-color: #1e293b; - color: #e2e8f0; -} - -[data-theme="dark"] .dialog-header { - border-bottom-color: #334155; -} - -[data-theme="dark"] .dialog-header h3 { - color: #f1f5f9; -} - -[data-theme="dark"] .dialog-body label { - color: #94a3b8; -} - -[data-theme="dark"] .dialog-body input, -[data-theme="dark"] .dialog-body textarea { - background-color: #0f172a; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .dialog-body input:focus, -[data-theme="dark"] .dialog-body textarea:focus { - border-color: #ff5e3a; -} - -[data-theme="dark"] .close-dialog-btn { - color: #94a3b8; -} - -[data-theme="dark"] .close-dialog-btn:hover { - color: #f1f5f9; -} - -[data-theme="dark"] .share-setting label { - color: #94a3b8; -} - -[data-theme="dark"] .permissions-options label span { - color: #e2e8f0; -} - -[data-theme="dark"] .share-item-info { - color: #e2e8f0; -} - -/* Dark mode for move dialog breadcrumb */ -[data-theme="dark"] .move-dialog-breadcrumb { - background: #0f172a; -} - -[data-theme="dark"] .move-breadcrumb-item { - color: #94a3b8; -} - -[data-theme="dark"] .move-breadcrumb-item:hover { - background: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .move-breadcrumb-item.current { - color: #ff5e3a; -} - -[data-theme="dark"] .move-breadcrumb-separator { - color: #475569; -} - -/* Dark mode for folder select items */ -[data-theme="dark"] .folder-select-item { - color: #cbd5e1; -} - -[data-theme="dark"] .folder-select-item:hover { - background-color: #334155; -} - -[data-theme="dark"] .folder-select-item.selected { - background-color: rgba(255, 94, 58, 0.15); - color: #ff5e3a; -} - -[data-theme="dark"] .folder-select-item i { - color: #fbbf24; -} - -[data-theme="dark"] .folder-select-item.selected i { - color: #ff5e3a; -} - -[data-theme="dark"] .folder-select-item.folder-select-current { - background-color: rgba(74, 222, 128, 0.1); - color: #86efac; -} - -[data-theme="dark"] .folder-select-item.folder-select-current:hover { - background-color: rgba(74, 222, 128, 0.15); -} - -[data-theme="dark"] .folder-select-item.folder-select-current i { - color: #4ade80; -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up { - color: #64748b; -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up:hover { - color: #94a3b8; -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up i { - color: #475569; -} - -[data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon { - color: #475569; -} - -[data-theme="dark"] .folder-select-empty { - color: #475569; -} diff --git a/static/css/components/fileList.css b/static/css/components/fileList.css index 0103695b..88be3b18 100644 --- a/static/css/components/fileList.css +++ b/static/css/components/fileList.css @@ -6,8 +6,8 @@ width: 100%; border-radius: 10px; overflow: hidden; - background-color: white; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + background-color: var(--color-bg-surface); + box-shadow: 0 1px 3px var(--color-shadow-xs); } .list-header { @@ -16,9 +16,9 @@ column-gap: 12px; padding: 15px; font-weight: 600; - color: #2d3748; - background-color: #f8f9fa; - border-bottom: 1px solid #e0e6ed; + color: var(--color-text); + background-color: var(--color-bg-subtle); + border-bottom: 1px solid var(--color-border-faint); align-items: center; } @@ -27,18 +27,18 @@ grid-template-columns: var(--files-list-columns); column-gap: 12px; padding: 12px 15px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--color-border-xfaint); align-items: center; cursor: pointer; - background-color: white; + background-color: var(--color-bg-surface); } .files-list-view .file-item.selected { - background-color: #fff8f6; + background-color: var(--color-item-selected); } .files-list-view .file-item.selected:hover { - background-color: #fff0ec; + background-color: var(--color-item-hover-accent); } .list-header.trash-header { @@ -50,7 +50,7 @@ } .files-list-view .file-item:hover { - background-color: #f0f8ff; + background-color: var(--color-item-hover-blue); } .list-header > div, @@ -91,7 +91,7 @@ } .files-list-view .file-item .file-icon.folder-icon { - background-color: #ffeaa7; + background-color: var(--color-ft-folder-bg); position: relative; width: 36px; height: 36px; @@ -105,7 +105,7 @@ left: 0; right: 0; height: 8px; - background-color: #fdcb6e; + background-color: var(--color-ft-folder-tab); border-radius: 8px 8px 0 0; } @@ -115,12 +115,12 @@ } .files-list-view .file-item .file-icon.doc-icon { - background-color: #e0ecff; + background-color: var(--color-ft-doc-bg); } .files-list-view .file-item .file-icon.doc-icon i, .files-list-view .file-item .file-icon.doc-icon svg { - color: #3171d8; + color: var(--color-ft-doc-text); display: flex !important; } @@ -130,12 +130,12 @@ } .files-list-view .file-item .file-icon.pdf-icon { - background-color: #fee2e2; + background-color: var(--color-ft-pdf-bg); } .files-list-view .file-item .file-icon.pdf-icon i, .files-list-view .file-item .file-icon.pdf-icon svg { - color: #e53e3e; + color: var(--color-ft-pdf-text); display: flex !important; } @@ -145,7 +145,7 @@ } .files-list-view .file-item .file-icon.image-icon { - background-color: #e0f2fe; + background-color: var(--color-ft-image-bg); position: relative; overflow: hidden; border-radius: 4px; @@ -153,7 +153,7 @@ .files-list-view .file-item .file-icon.image-icon i, .files-list-view .file-item .file-icon.image-icon svg { - color: #3b82f6; + color: var(--color-ft-image-text); display: flex !important; } @@ -163,12 +163,12 @@ } .files-list-view .file-item .file-icon.video-icon { - background: linear-gradient(135deg, #ede9fe, #fce7f3); + background: linear-gradient(135deg, var(--color-ft-video-bg-from), var(--color-ft-video-bg-to)); } .files-list-view .file-item .file-icon.video-icon i, .files-list-view .file-item .file-icon.video-icon svg { - color: #8b5cf6; + color: var(--color-ft-video-text); display: flex !important; } @@ -178,12 +178,12 @@ } .files-list-view .file-item .file-icon.audio-icon { - background-color: #fef3c7; + background-color: var(--color-ft-audio-bg); } .files-list-view .file-item .file-icon.audio-icon i, .files-list-view .file-item .file-icon.audio-icon svg { - color: #f59e0b; + color: var(--color-ft-audio-text); display: flex !important; } @@ -193,7 +193,7 @@ } .files-list-view .file-item .file-icon.spreadsheet-icon { - background-color: #e6f4ea; + background-color: var(--color-ft-spreadsheet-bg); width: 36px; height: 36px; margin-bottom: 0; @@ -202,7 +202,7 @@ .files-list-view .file-item .file-icon.spreadsheet-icon i, .files-list-view .file-item .file-icon.spreadsheet-icon svg { - color: #0d904f; + color: var(--color-ft-spreadsheet-text); display: flex !important; } @@ -212,7 +212,7 @@ } .files-list-view .file-item .file-icon.presentation-icon { - background-color: #fef3e2; + background-color: var(--color-ft-presentation-bg); width: 36px; height: 36px; margin-bottom: 0; @@ -221,7 +221,7 @@ .files-list-view .file-item .file-icon.presentation-icon i, .files-list-view .file-item .file-icon.presentation-icon svg { - color: #d04423; + color: var(--color-ft-presentation-text); display: flex !important; } @@ -231,7 +231,7 @@ } .files-list-view .file-item .file-icon.audio-icon { - background-color: #fff3e0; + background-color: var(--color-ft-audio-alt-bg); width: 36px; height: 36px; margin-bottom: 0; @@ -239,7 +239,7 @@ } .files-list-view .file-item .file-icon.archive-icon { - background-color: #f5f0eb; + background-color: var(--color-ft-archive-bg); width: 36px; height: 36px; margin-bottom: 0; @@ -248,7 +248,7 @@ .files-list-view .file-item .file-icon.archive-icon i, .files-list-view .file-item .file-icon.archive-icon svg { - color: #8d6e63; + color: var(--color-ft-archive-text); display: flex !important; } @@ -258,7 +258,7 @@ } .files-list-view .file-item .file-icon.installer-icon { - background-color: #f3e8ff; + background-color: var(--color-ft-installer-bg); width: 36px; height: 36px; margin-bottom: 0; @@ -267,7 +267,7 @@ .files-list-view .file-item .file-icon.installer-icon i, .files-list-view .file-item .file-icon.installer-icon svg { - color: #7c3aed; + color: var(--color-ft-installer-text); display: flex !important; } @@ -277,12 +277,12 @@ } .files-list-view .file-item .file-icon.script-icon { - background-color: #e8f5e9; + background-color: var(--color-ft-script-bg); } .files-list-view .file-item .file-icon.script-icon i, .files-list-view .file-item .file-icon.script-icon svg { - color: #4eaa25; + color: var(--color-ft-script-text); display: flex !important; } @@ -292,12 +292,12 @@ } .files-list-view .file-item .file-icon.config-icon { - background-color: #f1f3f5; + background-color: var(--color-ft-config-bg); } .files-list-view .file-item .file-icon.config-icon i, .files-list-view .file-item .file-icon.config-icon svg { - color: #718096; + color: var(--color-ft-config-text); display: flex !important; } @@ -312,31 +312,31 @@ text-align: center; } .files-list-view .file-item .date-cell { - color: #718096; + color: var(--color-text-muted); font-size: 14px; } .files-list-view .file-item .size-cell { - color: #718096; + color: var(--color-text-muted); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; } .files-list-view .file-item .type-cell { - color: #4b5563; + color: var(--color-text-secondary); font-weight: 500; font-size: 14px; } .files-list-view .file-item.dragging { opacity: 0.5; - background-color: #f9fafb; + background-color: var(--color-bg-input); } .files-list-view .file-item.drop-target { - background-color: rgba(255, 193, 7, 0.1); - border: 2px dashed #ffc107; + background-color: var(--color-warning-ring); + border: 2px dashed var(--color-warning-border); } .files-list-view .file-item .action-cell { @@ -354,13 +354,13 @@ align-items: center; justify-content: center; cursor: pointer; - color: #64748b; + color: var(--color-text-subtle); font-size: 16px; } .files-list-view .file-item .action-cell button:hover { - background: #e0e5e8; - color: #334155; + background: var(--color-border-subtle); + color: var(--color-text-dark); } /* could be visible if we want */ @@ -372,61 +372,3 @@ .files-list-view .file-item:hover .action-cell button.favorite-star { display: inline; } - -[data-theme="dark"] .files-list-view { - background-color: #1e293b; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} - -[data-theme="dark"] .list-header { - background-color: #162032; - color: #94a3b8; - border-bottom-color: #334155; -} - -[data-theme="dark"] .files-list-view .file-item { - background-color: #1e293b; - border-bottom-color: #293548; -} - -[data-theme="dark"] .files-list-view .file-item:hover { - background-color: #253345; -} - -[data-theme="dark"] .files-list-view .file-item.selected { - background-color: #1a1520; -} - -[data-theme="dark"] .files-list-view .file-item.selected:hover { - background-color: #231a2a; -} - -[data-theme="dark"] .files-list-view .file-item .name-cell { - color: #e2e8f0; -} - -[data-theme="dark"] .files-list-view .file-item .date-cell, -[data-theme="dark"] .files-list-view .file-item .size-cell { - color: #64748b; -} - -[data-theme="dark"] .files-list-view .file-item .type-cell { - color: #94a3b8; -} - -[data-theme="dark"] .files-list-view .file-item.dragging { - background-color: #334155; -} - -[data-theme="dark"] .files-list-view .file-item.drop-target { - background-color: rgba(255, 193, 7, 0.05); -} - -[data-theme="dark"] .files-list-view .file-actions { - color: #94a3b8; -} - -[data-theme="dark"] .files-list-view .file-actions:hover { - background: #334155; - color: #e2e8f0; -} diff --git a/static/css/components/languageSelector.css b/static/css/components/languageSelector.css index 0a99a9e2..b02f6a41 100644 --- a/static/css/components/languageSelector.css +++ b/static/css/components/languageSelector.css @@ -9,35 +9,35 @@ align-items: center; gap: 8px; padding: 8px 14px; - background-color: #f0f3f7; - border: 1px solid #e2e8f0; + background-color: var(--color-bg-muted); + border: 1px solid var(--color-border); border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 500; - color: #4a5568; + color: var(--color-text-secondary); transition: all 0.2s ease; user-select: none; } .language-selector-toggle:hover { - background-color: #e2e8f0; - border-color: #cbd5e0; + background-color: var(--color-border); + border-color: var(--color-border-medium); } .language-selector-toggle i { font-size: 14px; - color: #718096; + color: var(--color-text-muted); } .language-selector-toggle .lang-code { font-weight: 600; - color: #2d3748; + color: var(--color-text); } .language-selector-toggle .dropdown-arrow { font-size: 10px; - color: #718096; + color: var(--color-text-muted); transition: transform 0.2s ease; margin-left: 2px; } @@ -53,10 +53,10 @@ min-width: 160px; max-height: 420px; overflow-y: auto; - background-color: white; + background-color: var(--color-bg-surface); border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - border: 1px solid #e2e8f0; + box-shadow: 0 4px 20px var(--color-shadow-lg); + border: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateY(-10px); @@ -73,11 +73,11 @@ margin: 8px 0; } .language-selector-dropdown::-webkit-scrollbar-thumb { - background-color: #cbd5e0; + background-color: var(--color-border-medium); border-radius: 3px; } .language-selector-dropdown::-webkit-scrollbar-thumb:hover { - background-color: #a0aec0; + background-color: var(--color-text-placeholder); } .language-selector.open .language-selector-dropdown { @@ -93,17 +93,17 @@ padding: 12px 16px; cursor: pointer; font-size: 14px; - color: #4a5568; + color: var(--color-text-secondary); transition: background-color 0.15s ease; } .language-option:hover { - background-color: #f7fafc; + background-color: var(--color-bg-alt); } .language-option.active { - background-color: #fff5f3; - color: #ff5e3a; + background-color: var(--color-accent-bg-sm); + color: var(--color-accent); } .language-option .lang-flag { @@ -116,7 +116,7 @@ } .language-option .lang-check { - color: #ff5e3a; + color: var(--color-accent); font-size: 12px; opacity: 0; } @@ -124,39 +124,3 @@ .language-option.active .lang-check { opacity: 1; } - -[data-theme="dark"] .language-selector-toggle { - background-color: #1e293b; - border-color: #334155; - color: #cbd5e1; -} - -[data-theme="dark"] .language-selector-toggle:hover { - background-color: #334155; -} - -[data-theme="dark"] .language-selector-dropdown { - background-color: #1e293b; - border-color: #334155; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .language-selector-dropdown::-webkit-scrollbar-thumb { - background-color: #475569; -} -[data-theme="dark"] .language-selector-dropdown::-webkit-scrollbar-thumb:hover { - background-color: #64748b; -} - -[data-theme="dark"] .language-option { - color: #cbd5e1; -} - -[data-theme="dark"] .language-option:hover { - background-color: #334155; -} - -[data-theme="dark"] .language-option.active { - background-color: rgba(255, 94, 58, 0.1); - color: #ff5e3a; -} diff --git a/static/css/components/modals.css b/static/css/components/modals.css index 08af7305..0b0ef26c 100644 --- a/static/css/components/modals.css +++ b/static/css/components/modals.css @@ -3,7 +3,7 @@ display: none; position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.5); + background: var(--color-overlay); backdrop-filter: blur(4px); z-index: 3000; justify-content: center; @@ -15,49 +15,49 @@ } .about-modal { - background: white; + background: var(--color-bg-surface); border-radius: 20px; padding: 40px; max-width: 400px; width: 90%; text-align: center; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); + box-shadow: 0 20px 60px var(--color-shadow-xl); animation: userMenuIn 0.25s ease-out; } .about-modal-logo { width: 72px; height: 72px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); + background: var(--color-accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; - box-shadow: 0 8px 24px rgba(255, 94, 58, 0.3); + box-shadow: 0 8px 24px var(--color-accent-shadow); } .about-modal-logo i { font-size: 32px; - color: white; + color: var(--color-danger-text); } .about-modal h2 { font-size: 22px; font-weight: 700; - color: #1e293b; + color: var(--color-text-heading); margin-bottom: 6px; } .about-modal .about-version { font-size: 13px; - color: #94a3b8; + color: var(--color-text-faint); margin-bottom: 20px; } .about-modal .about-description { font-size: 14px; - color: #64748b; + color: var(--color-text-subtle); line-height: 1.6; margin-bottom: 24px; } @@ -72,11 +72,11 @@ .about-modal .about-tech-badge { padding: 4px 12px; - background: #f8fafc; - border: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border: 1px solid var(--color-border); border-radius: 20px; font-size: 12px; - color: #64748b; + color: var(--color-text-subtle); font-weight: 500; } @@ -92,7 +92,7 @@ align-items: center; gap: 6px; font-size: 13px; - color: #ff5e3a; + color: var(--color-accent); text-decoration: none; font-weight: 500; transition: opacity 0.2s; @@ -104,8 +104,8 @@ .about-modal .about-close-btn { padding: 10px 32px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); - color: white; + background: var(--color-accent-gradient); + color: var(--color-danger-text); border: none; border-radius: 10px; font-size: 14px; @@ -114,12 +114,12 @@ transition: transform 0.2s, box-shadow 0.2s; - box-shadow: 0 4px 15px rgba(255, 94, 58, 0.3); + box-shadow: 0 4px 15px var(--color-accent-shadow); } .about-modal .about-close-btn:hover { transform: translateY(-1px); - box-shadow: 0 6px 20px rgba(255, 94, 58, 0.4); + box-shadow: 0 6px 20px var(--color-accent-shadow-lg); } /* Modern Modal Overlay */ @@ -129,7 +129,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--color-overlay); display: none; justify-content: center; align-items: center; @@ -144,11 +144,11 @@ } .modal-container { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 16px; width: 420px; max-width: 90%; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + box-shadow: 0 20px 60px var(--color-shadow-3xl); transform: scale(0.9) translateY(-20px); transition: transform 0.2s ease; overflow: hidden; @@ -162,14 +162,14 @@ display: flex; align-items: center; padding: 20px 24px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); position: relative; } .modal-icon { width: 44px; height: 44px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); + background: var(--color-accent-gradient); border-radius: 12px; display: flex; align-items: center; @@ -184,14 +184,14 @@ } .modal-icon i { - color: white; + color: var(--color-danger-text); font-size: 20px; } .modal-header h3 { font-size: 18px; font-weight: 600; - color: #1a202c; + color: var(--color-text-heading); margin: 0; flex: 1; } @@ -203,13 +203,13 @@ width: 32px; height: 32px; border: none; - background: #f0f3f7; + background: var(--color-bg-muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; - color: #64748b; + color: var(--color-text-subtle); transition: all 0.15s ease; [dir="rtl"] & { @@ -219,8 +219,8 @@ } .modal-close-btn:hover { - background: #e2e8f0; - color: #1a202c; + background: var(--color-border); + color: var(--color-text-heading); } .modal-body { @@ -231,7 +231,7 @@ display: block; font-size: 14px; font-weight: 500; - color: #4a5568; + color: var(--color-text-secondary); margin-bottom: 8px; } @@ -239,22 +239,22 @@ width: 100%; padding: 12px 16px; font-size: 15px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; - background: #f8fafc; - color: #1a202c; + background: var(--color-bg-hover); + color: var(--color-text-heading); transition: all 0.15s ease; outline: none; } .modal-input:focus { - border-color: #ff5e3a; - background: white; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .modal-input::placeholder { - color: #a0aec0; + color: var(--color-text-placeholder); } .modal-footer { @@ -262,8 +262,8 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--color-bg-hover); + border-top: 1px solid var(--color-border); } .modal-footer .btn { @@ -276,108 +276,28 @@ } .modal-footer .btn-secondary { - background: white; - border: 1px solid #e2e8f0; - color: #4a5568; + background: var(--color-bg-surface); + border: 1px solid var(--color-border); + color: var(--color-text-secondary); } .modal-footer .btn-secondary:hover { - background: #f0f3f7; - border-color: #cbd5e0; + background: var(--color-bg-muted); + border-color: var(--color-border-medium); } .modal-footer .btn-primary { - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); + background: var(--color-accent-gradient); border: none; - color: white; - box-shadow: 0 2px 8px rgba(255, 94, 58, 0.3); + color: var(--color-danger-text); + box-shadow: 0 2px 8px var(--color-accent-shadow); } .modal-footer .btn-primary:hover { - box-shadow: 0 4px 12px rgba(255, 94, 58, 0.4); + box-shadow: 0 4px 12px var(--color-accent-shadow-lg); transform: translateY(-1px); } .modal-footer .btn-primary:active { transform: translateY(0); } - -[data-theme="dark"] .about-modal { - background: #1e293b; -} - -[data-theme="dark"] .about-modal h2 { - color: #f1f5f9; -} - -[data-theme="dark"] .about-modal .about-version, -[data-theme="dark"] .about-modal .about-description { - color: #94a3b8; -} - -[data-theme="dark"] .about-modal .about-tech-badge { - background: #334155; - border-color: #475569; - color: #cbd5e1; -} - -[data-theme="dark"] .modal-overlay { - background-color: rgba(0, 0, 0, 0.7); -} - -[data-theme="dark"] .modal-container { - background-color: #1e293b; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .modal-header { - border-bottom-color: #334155; -} - -[data-theme="dark"] .modal-header h3 { - color: #f1f5f9; -} - -[data-theme="dark"] .modal-close-btn { - background: #334155; - color: #94a3b8; -} - -[data-theme="dark"] .modal-close-btn:hover { - background: #475569; - color: #e2e8f0; -} - -[data-theme="dark"] .modal-body label { - color: #94a3b8; -} - -[data-theme="dark"] .modal-input { - border-color: #334155; - background: #0f172a; - color: #e2e8f0; -} - -[data-theme="dark"] .modal-input:focus { - border-color: #ff5e3a; - background: #0f172a; -} - -[data-theme="dark"] .modal-input::placeholder { - color: #475569; -} - -[data-theme="dark"] .modal-footer { - background: #162032; - border-top-color: #334155; -} - -[data-theme="dark"] .modal-footer .btn-secondary { - background: #334155; - border-color: #475569; - color: #cbd5e1; -} - -[data-theme="dark"] .modal-footer .btn-secondary:hover { - background: #475569; -} diff --git a/static/css/components/multiSelect.css b/static/css/components/multiSelect.css index 6ca43175..ec79657a 100644 --- a/static/css/components/multiSelect.css +++ b/static/css/components/multiSelect.css @@ -11,19 +11,19 @@ width: 17px; height: 17px; cursor: pointer; - accent-color: #ff5e3a; + accent-color: var(--color-accent); border-radius: 4px; } .list-header.selection-mode { grid-template-columns: 36px 1fr; - background-color: #1e293b; - color: #fff; - border-bottom-color: #334155; + background-color: var(--color-multiselect-bg); + color: var(--color-multiselect-text); + border-bottom-color: var(--color-multiselect-border); } .list-header.selection-mode .list-header-checkbox input[type="checkbox"] { - accent-color: #ff5e3a; + accent-color: var(--color-accent); } .batch-selection-info { @@ -38,8 +38,8 @@ display: flex; align-items: center; justify-content: space-between; - background: #1e293b; - color: #fff; + background: var(--color-multiselect-bg); + color: var(--color-multiselect-text); padding: 10px 20px; border-radius: 12px; margin: 0 0 12px; @@ -64,7 +64,7 @@ .batch-bar-close { background: none; border: none; - color: rgba(255, 255, 255, 0.7); + color: var(--color-multiselect-text-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; @@ -75,8 +75,8 @@ } .batch-bar-close:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; + background: var(--color-multiselect-hover-bg); + color: var(--color-multiselect-text); } .batch-bar-count { @@ -98,8 +98,8 @@ padding: 7px 14px; border: none; border-radius: 8px; - background: rgba(255, 255, 255, 0.1); - color: #fff; + background: var(--color-multiselect-hover-bg); + color: var(--color-multiselect-action-text); font-size: 13px; font-weight: 500; cursor: pointer; @@ -108,17 +108,17 @@ } .batch-btn:hover { - background: rgba(255, 255, 255, 0.2); + background: var(--color-multiselect-action-hover); } .batch-btn-danger { - background: rgba(239, 68, 68, 0.25); - color: #fca5a5; + background: var(--color-multiselect-danger-bg); + color: var(--color-multiselect-danger-text); } .batch-btn-danger:hover { - background: rgba(239, 68, 68, 0.4); - color: #fff; + background: var(--color-multiselect-danger-active); + color: var(--color-multiselect-danger-text-active); } @media (max-width: 640px) { @@ -130,21 +130,3 @@ padding: 7px 10px; } } - -[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: #ff5e3a; -} - -[data-theme="dark"] .batch-selection-bar { - background-color: #1e293b; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .list-header.selection-mode { - background-color: #0f172a; - border-bottom-color: #334155; - color: #e2e8f0; -} diff --git a/static/css/components/notifications.css b/static/css/components/notifications.css index a0c32155..72b1069b 100644 --- a/static/css/components/notifications.css +++ b/static/css/components/notifications.css @@ -3,18 +3,18 @@ position: absolute; top: 70px; right: 20px; - background-color: white; + background-color: var(--color-notification-bg); width: 250px; border-radius: 8px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + box-shadow: 0 5px 15px var(--color-shadow); padding: 15px; - border-left: 4px solid #ff5e3a; + border-left: 4px solid var(--color-accent); z-index: 1000; display: none; [dir="rtl"] & { left: 20px; - border-right: 4px solid #ff5e3a; + border-right: 4px solid var(--color-accent); right: unset; border-left: unset; } @@ -24,12 +24,12 @@ font-weight: bold; font-size: 14px; margin-bottom: 5px; - color: #2d3748; + color: var(--color-text); } .notification-message { font-size: 12px; - color: #718096; + color: var(--color-text-muted); } /* Notification banner */ @@ -38,9 +38,9 @@ top: 20px; right: 20px; padding: 15px 20px; - background-color: white; + background-color: var(--color-notification-bg); border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 12px var(--color-shadow); display: flex; align-items: center; justify-content: space-between; @@ -59,11 +59,11 @@ } .notification-banner.success { - border-left: 4px solid #48bb78; + border-left: 4px solid var(--color-success-border); } .notification-banner.error { - border-left: 4px solid #f56565; + border-left: 4px solid var(--color-danger-bg); } .close-notification-btn { @@ -71,7 +71,7 @@ border: none; font-size: 18px; cursor: pointer; - color: #a0aec0; + color: var(--color-text-placeholder); margin-left: 10px; } @@ -85,7 +85,7 @@ border: none; cursor: pointer; font-size: 18px; - color: #64748b; + color: var(--color-text-subtle); width: 40px; height: 40px; border-radius: 50%; @@ -97,13 +97,13 @@ } .notif-bell-btn:hover { - background: rgba(255, 94, 58, 0.08); - color: #ff5e3a; + background: var(--color-accent-bg-sm); + color: var(--color-accent); } .notif-bell-btn.active { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.1); + color: var(--color-accent); + background: var(--color-accent-ring); } .notif-badge { @@ -114,8 +114,8 @@ height: 16px; line-height: 16px; border-radius: 8px; - background: #ff3b30; - color: #fff; + background: var(--color-notification-badge); + color: var(--color-notification-bg); font-size: 10px; font-weight: 700; text-align: center; @@ -162,11 +162,11 @@ right: -40px; width: 380px; max-height: 480px; - background: #fff; + background: var(--color-notification-bg); border-radius: 16px; box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(0, 0, 0, 0.05); + 0 12px 40px var(--color-shadow-md), + 0 0 0 1px var(--color-shadow-xs); z-index: 2000; overflow: hidden; animation: notifPanelIn 0.2s ease-out; @@ -193,20 +193,20 @@ align-items: center; justify-content: space-between; padding: 14px 16px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--color-border-xfaint); } .notif-panel-title { font-weight: 600; font-size: 15px; - color: #1e293b; + color: var(--color-text-heading); } .notif-clear-btn { background: none; border: none; cursor: pointer; - color: #94a3b8; + color: var(--color-text-faint); font-size: 14px; padding: 4px 8px; border-radius: 6px; @@ -214,8 +214,8 @@ } .notif-clear-btn:hover { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.08); + color: var(--color-accent); + background: var(--color-accent-bg-sm); } .notif-panel-body { @@ -230,7 +230,7 @@ align-items: center; justify-content: center; padding: 40px 20px; - color: #94a3b8; + color: var(--color-text-faint); gap: 8px; } @@ -248,7 +248,7 @@ align-items: flex-start; padding: 12px 16px; gap: 12px; - border-bottom: 1px solid #f5f5f5; + border-bottom: 1px solid var(--color-bg-subtle); transition: background 0.15s; cursor: default; } @@ -258,7 +258,7 @@ } .notif-item:hover { - background: #f8fafc; + background: var(--color-bg-hover); } .notif-item-icon { @@ -273,18 +273,18 @@ } .notif-item-icon.upload { - background: rgba(255, 94, 58, 0.1); - color: #ff5e3a; + background: var(--color-accent-ring); + color: var(--color-accent); } .notif-item-icon.success { - background: rgba(52, 199, 89, 0.1); - color: #34c759; + background: var(--color-success-ring); + color: var(--color-notification-success); } .notif-item-icon.error { - background: rgba(255, 59, 48, 0.1); - color: #ff3b30; + background: var(--color-notification-error-ring); + color: var(--color-notification-error); } .notif-item-body { @@ -295,13 +295,13 @@ .notif-item-title { font-size: 13px; font-weight: 600; - color: #1e293b; + color: var(--color-text-heading); margin-bottom: 2px; } .notif-item-text { font-size: 12px; - color: #64748b; + color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -309,7 +309,7 @@ .notif-item-time { font-size: 11px; - color: #94a3b8; + color: var(--color-text-faint); margin-top: 3px; } @@ -319,25 +319,25 @@ .notif-upload-bar { height: 3px; - background: #eee; + background: var(--color-bg-empty); border-radius: 2px; overflow: hidden; } .notif-upload-fill { height: 100%; - background: #ff5e3a; + background: var(--color-accent); width: 0%; transition: width 0.2s ease; border-radius: 2px; } .notif-upload-fill.done { - background: #34c759; + background: var(--color-notification-success); } .notif-upload-fill.error { - background: #ff3b30; + background: var(--color-notification-error); } .notif-upload-detail { @@ -350,7 +350,7 @@ .notif-upload-pct, .notif-upload-stats { font-size: 11px; - color: #94a3b8; + color: var(--color-text-faint); } /* Upload Progress Toast (legacy — hidden, kept for compat) */ @@ -360,9 +360,9 @@ right: 24px; width: 360px; max-height: 400px; - background: #fff; + background: var(--color-notification-bg); border-radius: 12px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); + box-shadow: 0 8px 30px var(--color-shadow-md); z-index: 10000; display: none; flex-direction: column; @@ -391,8 +391,8 @@ align-items: center; justify-content: space-between; padding: 12px 16px; - background: #ff5e3a; - color: #fff; + background: var(--color-accent); + color: var(--color-danger-text); } .upload-toast-title { @@ -403,7 +403,7 @@ .upload-toast-close { background: none; border: none; - color: #fff; + color: var(--color-danger-text); font-size: 20px; cursor: pointer; line-height: 1; @@ -431,18 +431,18 @@ .upload-toast-file-icon { font-size: 16px; - color: #999; + color: var(--color-text-light); flex-shrink: 0; width: 20px; text-align: center; } .upload-toast-file-icon.done { - color: #34c759; + color: var(--color-notification-success); } .upload-toast-file-icon.error { - color: #ff3b30; + color: var(--color-notification-error); } .upload-toast-file-info { @@ -452,7 +452,7 @@ .upload-toast-file-name { font-size: 13px; - color: #333; + color: var(--color-text-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -460,7 +460,7 @@ .upload-toast-file-bar { height: 3px; - background: #eee; + background: var(--color-bg-empty); border-radius: 2px; margin-top: 4px; overflow: hidden; @@ -468,23 +468,23 @@ .upload-toast-file-fill { height: 100%; - background: #ff5e3a; + background: var(--color-accent); width: 0%; transition: width 0.2s ease; border-radius: 2px; } .upload-toast-file-fill.done { - background: #34c759; + background: var(--color-notification-success); } .upload-toast-file-fill.error { - background: #ff3b30; + background: var(--color-notification-error); } .upload-toast-file-pct { font-size: 12px; - color: #999; + color: var(--color-text-light); flex-shrink: 0; width: 38px; text-align: right; @@ -492,12 +492,12 @@ .upload-toast-footer { padding: 10px 16px; - border-top: 1px solid #f0f0f0; + border-top: 1px solid var(--color-border-xfaint); } .upload-toast-overall-bar { height: 4px; - background: #eee; + background: var(--color-bg-empty); border-radius: 2px; overflow: hidden; margin-bottom: 6px; @@ -505,7 +505,7 @@ .upload-toast-overall-fill { height: 100%; - background: #ff5e3a; + background: var(--color-accent); width: 0%; transition: width 0.25s ease; border-radius: 2px; @@ -513,102 +513,5 @@ .upload-toast-stats { font-size: 12px; - color: #888; -} - -[data-theme="dark"] .notification { - background-color: #1e293b; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); -} - -[data-theme="dark"] .notification-title { - color: #f1f5f9; -} - -[data-theme="dark"] .notification-message { - color: #94a3b8; -} - -[data-theme="dark"] .notification-banner { - background-color: #1e293b; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); -} - -[data-theme="dark"] .notif-bell-btn { - color: #94a3b8; -} - -[data-theme="dark"] .notif-bell-btn:hover, -[data-theme="dark"] .notif-bell-btn.active { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.15); -} - -[data-theme="dark"] .notif-panel { - background: #1e293b; - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.06); -} - -[data-theme="dark"] .notif-panel-header { - border-bottom-color: #334155; -} - -[data-theme="dark"] .notif-panel-title { - color: #f1f5f9; -} - -[data-theme="dark"] .notif-clear-btn { - color: #64748b; -} - -[data-theme="dark"] .notif-clear-btn:hover { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.12); -} - -[data-theme="dark"] .notif-empty { - color: #64748b; -} - -[data-theme="dark"] .notif-item { - border-bottom-color: #1a2536; -} - -[data-theme="dark"] .notif-item:hover { - background: #162032; -} - -[data-theme="dark"] .notif-item-title { - color: #e2e8f0; -} - -[data-theme="dark"] .notif-item-text { - color: #94a3b8; -} - -[data-theme="dark"] .notif-upload-bar { - background: #334155; -} - -[data-theme="dark"] .upload-toast { - background: #1e293b; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .upload-toast-file-name { - color: #e2e8f0; -} - -[data-theme="dark"] .upload-toast-file-bar { - background: #334155; -} - -[data-theme="dark"] .upload-toast-file-pct { - color: #64748b; -} - -[data-theme="dark"] .upload-toast-footer { - border-top-color: #334155; + color: var(--color-text-faint2); } diff --git a/static/css/components/search.css b/static/css/components/search.css index 4c9787ac..58eb65ea 100644 --- a/static/css/components/search.css +++ b/static/css/components/search.css @@ -5,7 +5,7 @@ align-items: center; padding: 10px 0; margin-bottom: 15px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--color-bg-empty); width: 100%; flex-wrap: wrap; gap: 8px; @@ -14,13 +14,13 @@ .search-results-header h3 { margin: 0; font-size: 16px; - color: #555; + color: var(--color-text-dim); } .search-results-header .search-time { font-size: 12px; font-weight: normal; - color: #999; + color: var(--color-text-light); } .search-controls { @@ -31,15 +31,15 @@ .search-sort-select { padding: 4px 8px; - border: 1px solid #ddd; + border: 1px solid var(--color-border-ddd); border-radius: 4px; font-size: 13px; - background: #fff; - color: #333; + background: var(--color-bg-surface); + color: var(--color-text-black); cursor: pointer; outline: none; } .search-sort-select:focus { - border-color: var(--primary-color, #4a90d9); + border-color: var(--primary-color, var(--color-accent)); } diff --git a/static/css/components/shareDialog.css b/static/css/components/shareDialog.css index 320abaeb..45212b86 100644 --- a/static/css/components/shareDialog.css +++ b/static/css/components/shareDialog.css @@ -11,7 +11,7 @@ } .existing-share-item { - background-color: #f8f9fa; + background-color: var(--color-bg-subtle); border-radius: 4px; padding: 10px; margin-bottom: 10px; @@ -23,7 +23,7 @@ text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; - color: #1565c0; + color: var(--color-share-link-text); } .share-info { @@ -31,15 +31,15 @@ display: flex; gap: 15px; margin-bottom: 10px; - color: #757575; + color: var(--color-share-owner-text); } .share-protected { - color: #1565c0; + color: var(--color-share-link-text); } .share-expiration { - color: #b71c1c; + color: var(--color-share-remove-text); } .share-actions { @@ -62,7 +62,7 @@ #notification-message { width: 100%; padding: 10px; - border: 1px solid #ddd; + border: 1px solid var(--color-border-ddd); border-radius: 4px; resize: vertical; } diff --git a/static/css/components/spinner.css b/static/css/components/spinner.css index a002288c..5bba530c 100644 --- a/static/css/components/spinner.css +++ b/static/css/components/spinner.css @@ -12,8 +12,8 @@ .files-loading-spinner .spinner { width: 36px; height: 36px; - border: 3px solid #e2e8f0; - border-top-color: #ff5e3a; + border: 3px solid var(--color-border); + border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @@ -26,17 +26,17 @@ .files-loading-spinner span { font-size: 14px; - color: #a0aec0; + color: var(--color-text-placeholder); font-weight: 500; } .dropzone { - border: 2px dashed #ddd; + border: 2px dashed var(--color-border-ddd); border-radius: 8px; padding: 20px; text-align: center; margin: 20px 0; - color: #666; + color: var(--color-text-medium); display: none; } @@ -46,8 +46,8 @@ } .dropzone.active { - border-color: #ff5e3a; - background-color: rgba(255, 94, 58, 0.05); + border-color: var(--color-accent); + background-color: var(--color-accent-ring-xs); } .upload-progress { @@ -57,7 +57,7 @@ } .progress-bar { - background-color: #f0f0f0; + background-color: var(--color-bg-empty); height: 6px; border-radius: 3px; overflow: hidden; @@ -65,17 +65,7 @@ .progress-fill { height: 100%; - background-color: #ff5e3a; + background-color: var(--color-accent); width: 0%; transition: width 0.3s; } - -[data-theme="dark"] .dropzone { - border-color: #475569; - color: #94a3b8; - background-color: #0f172a; -} - -[data-theme="dark"] .progress-bar { - background-color: #334155; -} diff --git a/static/css/components/uploadDropdown.css b/static/css/components/uploadDropdown.css index 82c150b2..4ef378ef 100644 --- a/static/css/components/uploadDropdown.css +++ b/static/css/components/uploadDropdown.css @@ -16,10 +16,10 @@ top: calc(100% + 6px); left: 0; min-width: 200px; - background: white; + background: var(--color-bg-surface); border-radius: 12px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); - border: 1px solid #e2e8f0; + box-shadow: 0 8px 30px var(--color-shadow-md); + border: 1px solid var(--color-border); z-index: 1000; overflow: hidden; animation: dropdownFadeIn 0.15s ease-out; @@ -48,7 +48,7 @@ padding: 12px 16px; border: none; background: none; - color: #334155; + color: var(--color-text-dark); font-size: 14px; cursor: pointer; transition: background 0.15s ease; @@ -56,44 +56,22 @@ } .upload-dropdown-item:hover { - background: #f1f5f9; + background: var(--color-border-light); } .upload-dropdown-item:active { - background: #e2e8f0; + background: var(--color-border); } .upload-dropdown-item i { width: 20px; text-align: center; - color: #64748b; + color: var(--color-text-subtle); font-size: 15px; } .upload-dropdown-item:first-child { - border-bottom: 1px solid #f1f5f9; -} - -[data-theme="dark"] .upload-dropdown-menu { - background: #1e293b; - border-color: #334155; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .upload-dropdown-item { - color: #cbd5e1; -} - -[data-theme="dark"] .upload-dropdown-item:hover { - background: #334155; -} - -[data-theme="dark"] .upload-dropdown-item:active { - background: #475569; -} - -[data-theme="dark"] .upload-dropdown-item i { - color: #94a3b8; + border-bottom: 1px solid var(--color-border-light); } .upload-caret { diff --git a/static/css/components/userMenu.css b/static/css/components/userMenu.css index bf21032e..b67b3c15 100644 --- a/static/css/components/userMenu.css +++ b/static/css/components/userMenu.css @@ -16,27 +16,27 @@ } .user-avatar-btn:hover { - border-color: rgba(255, 94, 58, 0.4); + border-color: var(--color-accent-ring-xl); transform: scale(1.05); } .user-avatar-btn:hover .user-avatar { - box-shadow: 0 0 0 2px rgba(255, 94, 58, 0.2); + box-shadow: 0 0 0 2px var(--color-accent-ring-strong); } .user-menu-wrapper.open .user-avatar-btn { - border-color: #ff5e3a; + border-color: var(--color-accent); } .user-avatar { width: 38px; height: 38px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); + background: var(--color-accent-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; - color: white; + color: var(--color-danger-text); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; @@ -49,11 +49,11 @@ top: calc(100% + 10px); right: 0; width: 300px; - background: white; + background: var(--color-bg-surface); border-radius: 16px; box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(0, 0, 0, 0.05); + 0 12px 40px var(--color-shadow-md), + 0 0 0 1px var(--color-shadow-xs); z-index: 2000; overflow: hidden; animation: userMenuIn 0.2s ease-out; @@ -79,24 +79,24 @@ align-items: center; gap: 14px; padding: 20px 20px 16px; - background: linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%); - border-bottom: 1px solid #fce7e1; + background: var(--color-user-menu-header-bg); + border-bottom: 1px solid var(--color-user-menu-header-border); } .user-menu-avatar { width: 48px; height: 48px; min-width: 48px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); + background: var(--color-accent-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; - color: white; + color: var(--color-danger-text); font-weight: 700; font-size: 17px; letter-spacing: 0.5px; - box-shadow: 0 4px 12px rgba(255, 94, 58, 0.3); + box-shadow: 0 4px 12px var(--color-accent-shadow); } .user-menu-info { @@ -106,7 +106,7 @@ .user-menu-name { font-weight: 600; font-size: 15px; - color: #1e293b; + color: var(--color-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -114,7 +114,7 @@ .user-menu-email { font-size: 12.5px; - color: #94a3b8; + color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -131,7 +131,7 @@ gap: 8px; font-size: 12px; font-weight: 600; - color: #64748b; + color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; @@ -139,12 +139,12 @@ .user-menu-storage-label i { font-size: 11px; - color: #94a3b8; + color: var(--color-text-faint); } .user-menu-storage-bar { height: 6px; - background: #f1f5f9; + background: var(--color-border-light); border-radius: 3px; overflow: hidden; margin-bottom: 6px; @@ -152,7 +152,7 @@ .user-menu-storage-fill { height: 100%; - background: linear-gradient(90deg, #ff5e3a, #ff2d55); + background: linear-gradient(90deg, var(--color-accent), var(--color-accent-second)); border-radius: 3px; width: 0%; transition: width 0.5s ease; @@ -160,12 +160,12 @@ .user-menu-storage-text { font-size: 11.5px; - color: #94a3b8; + color: var(--color-text-faint); } .user-menu-divider { height: 1px; - background: #f1f5f9; + background: var(--color-border-light); margin: 4px 0; } @@ -177,7 +177,7 @@ padding: 12px 20px; border: none; background: none; - color: #334155; + color: var(--color-text-dark); font-size: 14px; cursor: pointer; transition: background 0.15s ease; @@ -185,40 +185,40 @@ } .user-menu-item:hover { - background: #f8fafc; + background: var(--color-bg-hover); } .user-menu-item i { width: 20px; text-align: center; font-size: 15px; - color: #64748b; + color: var(--color-text-subtle); } .user-menu-item .theme-toggle-pill { margin-left: auto; width: 40px; height: 22px; - background: #e2e8f0; + background: var(--color-border); border-radius: 11px; position: relative; transition: background 0.3s ease; } .user-menu-item .theme-toggle-pill.active { - background: #ff5e3a; + background: var(--color-accent); } .user-menu-item .theme-toggle-knob { width: 18px; height: 18px; - background: white; + background: var(--color-danger-text); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s ease; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 4px var(--color-shadow-md); } .user-menu-item .theme-toggle-pill.active .theme-toggle-knob { @@ -226,15 +226,15 @@ } .user-menu-admin { - color: #1d4ed8; + color: var(--color-primary-hover); } .user-menu-admin i { - color: #3b82f6; + color: var(--color-info-blue); } .user-menu-admin:hover { - background: #eff6ff; + background: var(--color-info-bg-alt); } .user-menu-role-badge { @@ -252,8 +252,8 @@ } .role-badge-admin { - background: #dbeafe; - color: #1d4ed8; + background: var(--color-info-surface); + color: var(--color-primary-hover); } .role-badge i { @@ -261,82 +261,14 @@ } .user-menu-logout { - color: #ef4444; + color: var(--color-danger-alt); margin-bottom: 4px; } .user-menu-logout i { - color: #ef4444; + color: var(--color-danger-alt); } .user-menu-logout:hover { - background: #fef2f2; -} - -[data-theme="dark"] .user-menu { - background: #1e293b; - border-color: #334155; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .user-menu-header { - background: linear-gradient(135deg, #1a2332 0%, #1e2940 100%); - border-bottom-color: #334155; -} - -[data-theme="dark"] .user-menu-name { - color: #f1f5f9; -} - -[data-theme="dark"] .user-menu-email { - color: #64748b; -} - -[data-theme="dark"] .user-menu-storage-label { - color: #94a3b8; -} - -[data-theme="dark"] .user-menu-storage-bar { - background: #334155; -} - -[data-theme="dark"] .user-menu-storage-text { - color: #64748b; -} - -[data-theme="dark"] .user-menu-divider { - background: #334155; -} - -[data-theme="dark"] .user-menu-item { - color: #cbd5e1; -} - -[data-theme="dark"] .user-menu-item:hover { - background: #334155; -} - -[data-theme="dark"] .user-menu-item i { - color: #94a3b8; -} - -[data-theme="dark"] .theme-toggle-pill { - background: #475569; -} - -[data-theme="dark"] .user-menu-admin { - color: #60a5fa; -} - -[data-theme="dark"] .user-menu-admin:hover { - background: rgba(59, 130, 246, 0.1); -} - -[data-theme="dark"] .role-badge-admin { - background: rgba(59, 130, 246, 0.15); - color: #60a5fa; -} - -[data-theme="dark"] .user-menu-logout:hover { - background: rgba(239, 68, 68, 0.1); + background: var(--color-danger-lighter); } diff --git a/static/css/layout/content.css b/static/css/layout/content.css index 1d67d6fd..37a9e191 100644 --- a/static/css/layout/content.css +++ b/static/css/layout/content.css @@ -10,7 +10,7 @@ font-size: 24px; font-weight: bold; margin-bottom: 20px; - color: #2d3748; + color: var(--color-text); } .page-sticky-header { @@ -42,7 +42,7 @@ justify-content: center; padding: 40px; text-align: center; - color: #888; + color: var(--color-content-muted); width: 100%; height: 300px; grid-column: 1 / -1; @@ -66,7 +66,7 @@ overflow: hidden; border-radius: 10px; width: 100%; - /*box-shadow: 0 1px 3px rgba(0,0,0,0.05);*/ + /*box-shadow: 0 1px 3px var(--color-shadow-xs);*/ } .dragged-items .file-item { @@ -74,9 +74,9 @@ grid-template-columns: var(--dragged-files-list-columns); column-gap: 12px; padding: 12px 15px; - /*border-bottom: 1px solid #f0f0f0;*/ + /*border-bottom: 1px solid var(--color-border-xfaint);*/ align-items: center; - background-color: white; + background-color: var(--color-bg-surface); } .dragged-items .file-item { @@ -94,7 +94,7 @@ } .dragged-items .file-item .file-icon { - background-color: #ffeaa7; + background-color: var(--color-warning-bg); position: relative; width: 36px; height: 36px; @@ -102,7 +102,7 @@ } .dragged-items .file-item .file-icon.folder-icon { - background-color: #ffeaa7; + background-color: var(--color-warning-bg); position: relative; width: 36px; height: 36px; @@ -115,7 +115,7 @@ left: 0; right: 0; height: 8px; - background-color: #fdcb6e; + background-color: var(--color-warning-bg-dark); border-radius: 8px 8px 0 0; } @@ -125,8 +125,8 @@ } .dragged-items div.fading { - -webkit-mask-image: linear-gradient(to bottom, white 10%, transparent); - mask-image: linear-gradient(to bottom, white 10%, transparent); + -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent); + mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent); } .dragged-items-badge { @@ -136,8 +136,8 @@ transform: translate(50%, -50%); - background: red; - color: white; + background: var(--color-content-debug-bg); + color: var(--color-content-debug-text); border-radius: 50%; min-width: 20px; diff --git a/static/css/layout/sidebar.css b/static/css/layout/sidebar.css index 06a95d76..daecb3d2 100644 --- a/static/css/layout/sidebar.css +++ b/static/css/layout/sidebar.css @@ -1,13 +1,13 @@ /* Sidebar */ .sidebar { width: 250px; - background: linear-gradient(180deg, #2a3042 0%, #232838 100%); - color: #fff; + background: linear-gradient(180deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%); + color: var(--color-sidebar-text-active); display: flex; flex-direction: column; height: 100%; flex-shrink: 0; - box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); + box-shadow: 2px 0 12px var(--color-shadow-md); transition: transform 0.3s ease; } @@ -19,7 +19,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); + background: var(--color-sidebar-overlay); z-index: 998; opacity: 0; transition: opacity 0.3s ease; @@ -59,7 +59,7 @@ padding: 22px 20px; display: flex; align-items: center; - border-bottom: 1px solid rgba(255, 255, 255, 0.07); + border-bottom: 1px solid var(--color-sidebar-separator); margin-bottom: 8px; text-decoration: none; color: inherit; @@ -68,13 +68,13 @@ .logo { width: 40px; height: 40px; - background: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%); + background: var(--color-sidebar-logo-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; - box-shadow: 0 3px 10px rgba(255, 94, 58, 0.35); + box-shadow: 0 3px 10px var(--color-sidebar-shadow); transition: transform 0.2s, box-shadow 0.2s; @@ -87,19 +87,19 @@ .logo:hover { transform: scale(1.05); - box-shadow: 0 4px 14px rgba(255, 94, 58, 0.45); + box-shadow: 0 4px 14px var(--color-sidebar-shadow-lg); } .logo svg { width: 22px; height: 22px; - fill: white; + fill: var(--color-sidebar-text-active); } .app-name { font-size: 19px; font-weight: 700; - color: white; + color: var(--color-sidebar-text-active); letter-spacing: 0.3px; } @@ -117,7 +117,7 @@ padding: 11px 14px; border-radius: 10px; cursor: pointer; - color: rgba(255, 255, 255, 0.65); + color: var(--color-sidebar-text); font-size: 14.5px; font-weight: 500; transition: all 0.2s ease; @@ -131,19 +131,19 @@ } .nav-item:hover { - background-color: rgba(255, 255, 255, 0.06); - color: rgba(255, 255, 255, 0.9); + background-color: var(--color-sidebar-hover-bg); + color: var(--color-sidebar-text-hover); } .nav-item.active { - background-color: rgba(255, 94, 58, 0.12); - color: #fff; - border-left-color: #ff5e3a; + background-color: var(--color-sidebar-active-bg); + color: var(--color-sidebar-text-active); + border-left-color: var(--color-accent); font-weight: 600; [dir="rtl"] & { border-left-color: transparent; - border-right-color: #ff5e3a; + border-right-color: var(--color-accent); } } @@ -169,52 +169,52 @@ /* Colored icons per section */ .nav-item:nth-child(1) i, .nav-item:nth-child(1) .oxi-icon { - color: #ffa94d; + color: var(--color-cal-1); } /* Files - orange */ .nav-item:nth-child(2) i, .nav-item:nth-child(2) .oxi-icon { - color: #74b9ff; + color: var(--color-cal-2); } /* Shared - blue */ .nav-item:nth-child(3) i, .nav-item:nth-child(3) .oxi-icon { - color: #81ecec; + color: var(--color-cal-3); } /* Recent - teal */ .nav-item:nth-child(4) i, .nav-item:nth-child(4) .oxi-icon { - color: #ffd43b; + color: var(--color-cal-4); } /* Favorites - gold */ .nav-item:nth-child(5) i, .nav-item:nth-child(5) .oxi-icon { - color: #ff6b9d; + color: var(--color-cal-5); } /* Photos - pink */ .nav-item:nth-child(6) i, .nav-item:nth-child(6) .oxi-icon { - color: #ff7675; + color: var(--color-cal-6); } /* Trash - red */ .nav-item.active:nth-child(1) i, .nav-item.active:nth-child(1) .oxi-icon { - color: #ff5e3a; + color: var(--color-accent); } .nav-item.active:nth-child(2) i, .nav-item.active:nth-child(2) .oxi-icon { - color: #0984e3; + color: var(--color-cal-7); } .nav-item.active:nth-child(3) i, .nav-item.active:nth-child(3) .oxi-icon { - color: #00cec9; + color: var(--color-cal-8); } .nav-item.active:nth-child(4) i, .nav-item.active:nth-child(4) .oxi-icon { - color: #f0c800; + color: var(--color-cal-9); } .nav-item.active:nth-child(5) i, .nav-item.active:nth-child(5) .oxi-icon { - color: #e84393; + color: var(--color-cal-10); } .nav-item.active:nth-child(6) i, .nav-item.active:nth-child(6) .oxi-icon { - color: #e74c3c; + color: var(--color-cal-11); } .nav-item:hover i, @@ -225,8 +225,8 @@ /* Storage indicator */ .storage-container { margin: auto 12px 16px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.07); + background: var(--color-sidebar-storage-bg); + border: 1px solid var(--color-sidebar-storage-border); border-radius: 12px; padding: 16px; } @@ -239,13 +239,13 @@ margin-bottom: 12px; font-size: 13px; font-weight: 600; - color: rgba(255, 255, 255, 0.8); + color: var(--color-sidebar-storage-text); letter-spacing: 0.3px; } .storage-bar { height: 6px; - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--color-sidebar-storage-bar); border-radius: 3px; overflow: hidden; margin-bottom: 10px; @@ -253,7 +253,7 @@ .storage-fill { height: 100%; - background: linear-gradient(90deg, #ff5e3a 0%, #ff8a5c 100%); + background: var(--color-sidebar-progress); border-radius: 3px; width: 0%; transition: width 0.8s ease; @@ -262,6 +262,6 @@ .storage-info { text-align: center; font-size: 11.5px; - color: rgba(255, 255, 255, 0.5); + color: var(--color-sidebar-storage-faint); font-weight: 400; } diff --git a/static/css/layout/topbar.css b/static/css/layout/topbar.css index 7509951d..e0f867c3 100644 --- a/static/css/layout/topbar.css +++ b/static/css/layout/topbar.css @@ -11,8 +11,8 @@ height: 70px; min-height: 70px; max-height: 70px; - background-color: white; - border-bottom: 1px solid #e6e6e6; + background-color: var(--color-bg-surface); + border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 30px; @@ -27,7 +27,7 @@ border: none; padding: 10px; cursor: pointer; - color: #4a5568; + color: var(--color-text-secondary); border-radius: 8px; transition: background-color 0.2s, @@ -37,8 +37,8 @@ } .sidebar-toggle:hover { - background-color: #f7fafc; - color: #ff5e3a; + background-color: var(--color-bg-alt); + color: var(--color-accent); } .sidebar-toggle i { @@ -76,28 +76,28 @@ width: 100%; padding: 12px 50px 12px 44px; border-radius: 12px; - border: 2px solid #e2e8f0; - background-color: #f8fafc; + border: 2px solid var(--color-border); + background-color: var(--color-bg-hover); font-size: 14px; height: 46px; - color: #1a202c; + color: var(--color-text-heading); transition: all 0.2s ease; } .search-container input:hover { - border-color: #cbd5e0; - background-color: #fff; + border-color: var(--color-border-medium); + background-color: var(--color-bg-surface); } .search-container input:focus { outline: none; - border-color: #ff5e3a; - background-color: #fff; - box-shadow: 0 0 0 4px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background-color: var(--color-bg-surface); + box-shadow: 0 0 0 4px var(--color-accent-ring); } .search-container input::placeholder { - color: #a0aec0; + color: var(--color-text-placeholder); } .search-icon { @@ -105,7 +105,7 @@ left: 16px; top: 50%; transform: translateY(-50%); - color: #a0aec0; + color: var(--color-text-placeholder); font-size: 16px; pointer-events: none; transition: color 0.2s ease; @@ -118,7 +118,7 @@ .search-container input:focus + .search-icon, .search-container:focus-within .search-icon { - color: #ff5e3a; + color: var(--color-accent); } .search-button { @@ -126,8 +126,8 @@ right: 6px; top: 50%; transform: translateY(-50%); - background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); - color: white; + background: var(--color-accent-gradient); + color: var(--color-danger-text); border: none; border-radius: 10px; width: 36px; @@ -137,7 +137,7 @@ align-items: center; justify-content: center; transition: all 0.2s ease; - box-shadow: 0 2px 8px rgba(255, 94, 58, 0.3); + box-shadow: 0 2px 8px var(--color-accent-shadow); [dir="rtl"] & { left: 6px; @@ -147,7 +147,7 @@ .search-button:hover { transform: translateY(-50%) scale(1.05); - box-shadow: 0 4px 12px rgba(255, 94, 58, 0.4); + box-shadow: 0 4px 12px var(--color-accent-shadow-lg); } .search-button:active { diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css index 66f3a16e..273a0fae 100644 --- a/static/css/themes/dark.css +++ b/static/css/themes/dark.css @@ -4,16 +4,36 @@ --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; @@ -32,12 +52,44 @@ /* 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; } -[data-theme="dark"] body { - background-color: #0f172a; +/* 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); } @@ -65,15 +117,6 @@ background-color: #1e293b; } -[data-theme="dark"] .sidebar { - background: linear-gradient(180deg, #0f172a 0%, #0c1322 100%); -} - -[data-theme="dark"] .top-bar { - background-color: #1e293b; - border-bottom-color: #334155; -} - [data-theme="dark"] .search-container input { background-color: #1e293b; border-color: #334155; @@ -228,12 +271,1439 @@ border-color: #ff5e3a; } -/* Dark theme for mobile sidebar toggle */ -[data-theme="dark"] .sidebar-toggle { - color: #94a3b8; +/* ── cards.css ── */ +[data-theme="dark"] .files-grid-view .file-item { + background-color: var(--color-bg-surface); + border-color: var(--color-border); } -[data-theme="dark"] .sidebar-toggle:hover { - background-color: #334155; - color: #ff5e3a; +[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); } diff --git a/static/css/views/admin.css b/static/css/views/admin.css index bb7df67a..04800bb2 100644 --- a/static/css/views/admin.css +++ b/static/css/views/admin.css @@ -5,8 +5,8 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } body { - background: #f5f7fa; - color: #1e293b; + background: var(--color-bg-page); + color: var(--color-text-heading); min-height: 100vh; height: auto; display: flex; @@ -40,10 +40,10 @@ body { .toggle-row-strong { margin-top: 10px; padding: 12px 0; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--color-border); } .icon-muted-right { - color: #64748b; + color: var(--color-text-subtle); margin-right: 6px; } .h2-space-between { @@ -57,11 +57,11 @@ body { margin-bottom: 12px; } .secret-icon { - color: #059669; + color: var(--color-secret-green); } .small-muted { font-weight: 400; - color: #94a3b8; + color: var(--color-text-faint); } .summary-icon-right { margin-right: 6px; @@ -73,7 +73,7 @@ body { justify-content: flex-end; } .modal-title-icon { - color: #ff5e3a; + color: var(--color-accent); margin-right: 8px; } .quota-input-row { @@ -87,10 +87,10 @@ body { .select-qm-unit { width: 90px; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; + background: var(--color-bg-hover); } .form-row { display: flex; @@ -99,10 +99,10 @@ body { .select-cu-role { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; + background: var(--color-bg-hover); } .quota-row { display: flex; @@ -111,10 +111,10 @@ body { .select-cu-quota-unit { width: 70px; padding: 10px 8px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 13px; - background: #f8fafc; + background: var(--color-bg-hover); } .alert-no-margin { margin-top: 0; @@ -122,19 +122,19 @@ body { .table-loading-cell { text-align: center; padding: 28px; - color: #94a3b8; + color: var(--color-text-faint); } .table-status-error { - color: #991b1b; + color: var(--color-error-text-dark); padding: 20px; } .table-status-empty { text-align: center; padding: 28px; - color: #94a3b8; + color: var(--color-text-faint); } .user-self-badge { - color: #94a3b8; + color: var(--color-text-faint); font-weight: 400; } .badge-admin-icon-small { @@ -145,7 +145,7 @@ body { } .user-last-login-cell { font-size: 12px; - color: #94a3b8; + color: var(--color-text-faint); } /* ── Scrollbar ── */ @@ -156,26 +156,26 @@ body { background: transparent; } ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.15); + background: var(--color-shadow-md); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--color-shadow-2xl); } * { scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.15) transparent; + scrollbar-color: var(--color-shadow-md) transparent; } /* ── Top Header Bar ── */ .admin-header { - background: linear-gradient(135deg, #2a3042 0%, #232838 100%); + background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%); padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 12px var(--color-shadow-md); position: sticky; top: 0; z-index: 100; @@ -188,32 +188,32 @@ body { .admin-logo { width: 38px; height: 38px; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); + background: var(--color-accent-gradient); border-radius: 11px; display: flex; align-items: center; justify-content: center; - box-shadow: 0 3px 10px rgba(255, 94, 58, 0.35); + box-shadow: 0 3px 10px var(--color-sidebar-shadow); } .admin-logo svg { width: 20px; height: 20px; - fill: #fff; + fill: var(--color-sidebar-text-active); } .admin-title-text { font-size: 17px; font-weight: 700; - color: #fff; + color: var(--color-sidebar-text-active); letter-spacing: 0.3px; } .admin-title-separator { font-size: 17px; - color: rgba(255, 255, 255, 0.5); + color: var(--color-sidebar-storage-faint); font-weight: 400; margin-left: 6px; } .admin-header-right a { - color: rgba(255, 255, 255, 0.65); + color: var(--color-sidebar-text); text-decoration: none; font-size: 13px; font-weight: 500; @@ -223,7 +223,7 @@ body { transition: color 0.2s; } .admin-header-right a:hover { - color: #fff; + color: var(--color-sidebar-text-active); } /* ── Container ── */ @@ -240,10 +240,10 @@ body { display: flex; gap: 6px; margin-bottom: 28px; - background: #fff; + background: var(--color-bg-surface); border-radius: 14px; padding: 6px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + box-shadow: 0 1px 4px var(--color-shadow-xs); position: sticky; top: 64px; z-index: 50; @@ -253,7 +253,7 @@ body { cursor: pointer; font-weight: 600; font-size: 13.5px; - color: #64748b; + color: var(--color-text-subtle); border: none; background: none; border-radius: 10px; @@ -263,16 +263,16 @@ body { gap: 8px; } .admin-tab:hover { - color: #1e293b; - background: #f8fafc; + color: var(--color-text-heading); + background: var(--color-bg-hover); } .admin-tab.active { - color: #fff; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); - box-shadow: 0 3px 12px rgba(255, 94, 58, 0.25); + color: var(--color-sidebar-text-active); + background: var(--color-accent-gradient); + box-shadow: 0 3px 12px var(--color-accent-shadow-sm); } .admin-tab.active i { - color: #fff; + color: var(--color-sidebar-text-active); } .admin-tab i { font-size: 14px; @@ -314,11 +314,11 @@ body { /* ── Cards ── */ .admin-card { - background: #fff; + background: var(--color-bg-surface); border-radius: 16px; box-shadow: - 0 1px 4px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(0, 0, 0, 0.03); + 0 1px 4px var(--color-shadow-xs), + 0 0 0 1px var(--color-shadow-xs); padding: 28px; margin-bottom: 22px; } @@ -326,13 +326,13 @@ body { font-size: 16px; font-weight: 700; margin-bottom: 20px; - color: #1e293b; + color: var(--color-text-heading); display: flex; align-items: center; gap: 10px; } .admin-card h2 i { - color: #ff5e3a; + color: var(--color-accent); font-size: 17px; } @@ -358,57 +358,57 @@ body { } .stat-card { padding: 20px; - background: #f8fafc; + background: var(--color-bg-hover); border-radius: 14px; text-align: center; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); transition: transform 0.15s, box-shadow 0.15s; } .stat-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); + box-shadow: 0 4px 12px var(--color-shadow-xs); } .stat-value { font-size: 1.75rem; font-weight: 800; - color: #1e293b; + color: var(--color-text-heading); } .stat-label { font-size: 11.5px; - color: #94a3b8; + color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; font-weight: 600; } .stat-card.warn { - border-color: #fbbf24; - background: #fffbeb; + border-color: var(--color-stat-warn-border); + background: var(--color-warning-bg-faint); } .stat-card.danger { - border-color: #ef4444; - background: #fef2f2; + border-color: var(--color-danger-alt); + background: var(--color-danger-light-bg); } .text-blue { - color: #3b82f6 !important; + color: var(--color-info-blue) !important; } .text-green { - color: #059669 !important; + color: var(--color-secret-green) !important; } .text-orange { - color: #d97706 !important; + color: var(--color-star-active) !important; } .text-red { - color: #dc2626 !important; + color: var(--color-error-text-dark) !important; } /* ── Progress bar ── */ .progress-bar { width: 100%; height: 8px; - background: #e2e8f0; + background: var(--color-border); border-radius: 4px; overflow: hidden; } @@ -418,20 +418,20 @@ body { transition: width 0.5s ease; } .progress-fill.green { - background: linear-gradient(90deg, #059669, #10b981); + background: var(--color-storage-fill-green); } .progress-fill.orange { - background: linear-gradient(90deg, #d97706, #f59e0b); + background: var(--color-storage-fill-orange); } .progress-fill.red { - background: linear-gradient(90deg, #dc2626, #ef4444); + background: var(--color-storage-fill-red); } /* ── Table ── */ .table-wrap { overflow-x: auto; border-radius: 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); } table { width: 100%; @@ -441,25 +441,25 @@ table { th { text-align: left; padding: 12px 16px; - background: #f8fafc; - color: #94a3b8; + background: var(--color-bg-hover); + color: var(--color-text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); } td { padding: 14px 16px; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--color-border-light); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover { - background: #fafbfd; + background: var(--color-bg-off-white); } .user-info { display: flex; @@ -468,11 +468,11 @@ tr:hover { } .user-name { font-weight: 600; - color: #1e293b; + color: var(--color-text-heading); } .user-email { font-size: 12px; - color: #94a3b8; + color: var(--color-text-faint); } /* ── Badges ── */ @@ -486,32 +486,32 @@ tr:hover { font-weight: 600; } .badge-admin { - background: #dbeafe; - color: #1d4ed8; + background: var(--color-role-admin-bg); + color: var(--color-role-admin-text); } .badge-user { - background: #f1f5f9; - color: #64748b; + background: var(--color-border-light); + color: var(--color-text-subtle); } .badge-active { - background: #d1fae5; - color: #065f46; + background: var(--color-badge-success-bg-medium); + color: var(--color-badge-success-text); } .badge-inactive { - background: #fee2e2; - color: #991b1b; + background: var(--color-error-bg); + color: var(--color-error-text-dark); } .badge-oidc { - background: #ede9fe; - color: #6d28d9; + background: var(--color-badge-indigo-bg); + color: var(--color-badge-indigo-text); } .badge-local { - background: #f1f5f9; - color: #64748b; + background: var(--color-border-light); + color: var(--color-text-subtle); } .badge-env { - background: #fef3c7; - color: #92400e; + background: var(--color-warning-bg-light); + color: var(--color-badge-warning-text); font-size: 10px; padding: 1px 6px; margin-left: 4px; @@ -537,38 +537,38 @@ tr:hover { border-radius: 8px; } .btn-primary { - background: linear-gradient(135deg, #ff5e3a, #ff2d55); - color: #fff; - box-shadow: 0 2px 8px rgba(255, 94, 58, 0.25); + background: var(--color-accent-gradient); + color: var(--color-sidebar-text-active); + box-shadow: 0 2px 8px var(--color-accent-shadow-sm); } .btn-primary:hover { - box-shadow: 0 4px 14px rgba(255, 94, 58, 0.35); + box-shadow: 0 4px 14px var(--color-sidebar-shadow); transform: translateY(-1px); } .btn-secondary { - background: #fff; - color: #334155; - border: 1px solid #e2e8f0; + background: var(--color-bg-surface); + color: var(--color-text-dark); + border: 1px solid var(--color-border); } .btn-secondary:hover { - background: #f8fafc; - border-color: #cbd5e1; + background: var(--color-bg-hover); + border-color: var(--color-border-medium); } .btn-danger { - background: #fef2f2; - color: #991b1b; - border: 1px solid #fecaca; + background: var(--color-danger-light-bg); + color: var(--color-error-text-dark); + border: 1px solid var(--color-badge-error-border); } .btn-danger:hover { - background: #fee2e2; + background: var(--color-error-bg); } .btn-success { - background: #ecfdf5; - color: #065f46; - border: 1px solid #a7f3d0; + background: var(--color-badge-success-bg); + color: var(--color-badge-success-text); + border: 1px solid var(--color-badge-success-border); } .btn-success:hover { - background: #d1fae5; + background: var(--color-badge-success-bg-medium); } .btn:disabled { opacity: 0.4; @@ -590,7 +590,7 @@ tr:hover { font-size: 13px; font-weight: 600; margin-bottom: 4px; - color: #334155; + color: var(--color-text-dark); } .form-group input[type="text"], .form-group input[type="password"], @@ -599,23 +599,23 @@ tr:hover { .form-group select { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; + background: var(--color-bg-hover); transition: all 0.2s; font-family: inherit; - color: #1e293b; + color: var(--color-text-heading); } .form-group input:focus, .form-group select:focus { outline: none; - border-color: #ff5e3a; - background: #fff; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .form-group small { - color: #94a3b8; + color: var(--color-text-faint); font-size: 12px; display: block; margin-top: 3px; @@ -630,7 +630,7 @@ tr:hover { .toggle-row label { font-size: 14px; font-weight: 500; - color: #334155; + color: var(--color-text-dark); } .switch { position: relative; @@ -647,7 +647,7 @@ tr:hover { position: absolute; cursor: pointer; inset: 0; - background: #d1d5db; + background: var(--color-badge-gray); border-radius: 24px; transition: 0.3s; } @@ -658,13 +658,13 @@ tr:hover { width: 18px; left: 3px; bottom: 3px; - background: #fff; + background: var(--color-bg-surface); border-radius: 50%; transition: 0.3s; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 3px var(--color-shadow-md); } .switch input:checked + .slider { - background: linear-gradient(135deg, #ff5e3a, #ff2d55); + background: var(--color-accent-gradient); } .switch input:checked + .slider:before { transform: translateX(20px); @@ -674,29 +674,29 @@ tr:hover { display: flex; align-items: center; gap: 8px; - background: #f8fafc; - border: 2px solid #e2e8f0; + background: var(--color-bg-hover); + border: 2px solid var(--color-border); border-radius: 10px; padding: 10px 14px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 13px; word-break: break-all; - color: #334155; + color: var(--color-text-dark); } .readonly-field button { flex-shrink: 0; padding: 6px 10px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 8px; - background: #fff; + background: var(--color-bg-surface); cursor: pointer; font-size: 12px; transition: all 0.15s; - color: #64748b; + color: var(--color-text-subtle); } .readonly-field button:hover { - background: #f1f5f9; - color: #334155; + background: var(--color-border-light); + color: var(--color-text-dark); } /* ── Alerts ── */ @@ -709,30 +709,30 @@ tr:hover { font-weight: 500; } .alert-success { - background: #ecfdf5; - color: #065f46; - border: 1px solid #a7f3d0; + background: var(--color-badge-success-bg); + color: var(--color-badge-success-text); + border: 1px solid var(--color-badge-success-border); display: block; } .alert-error { - background: #fef2f2; - color: #991b1b; - border: 1px solid #fecaca; + background: var(--color-danger-light-bg); + color: var(--color-error-text-dark); + border: 1px solid var(--color-badge-error-border); display: block; } .alert-info { - background: #eff6ff; - color: #1e40af; - border: 1px solid #bfdbfe; + background: var(--color-badge-blue-bg); + color: var(--color-badge-blue-text); + border: 1px solid var(--color-badge-blue-border); display: block; } .warning { - background: #fffbeb; - border: 1px solid #fde68a; + background: var(--color-warning-bg-faint); + border: 1px solid var(--color-badge-warning-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; - color: #92400e; + color: var(--color-badge-warning-text); margin-top: 8px; display: flex; align-items: center; @@ -748,14 +748,14 @@ tr:hover { font-size: 13px; } .discovery-result.ok { - background: #ecfdf5; - border: 1px solid #a7f3d0; - color: #065f46; + background: var(--color-badge-success-bg); + border: 1px solid var(--color-badge-success-border); + color: var(--color-badge-success-text); } .discovery-result.fail { - background: #fef2f2; - border: 1px solid #fecaca; - color: #991b1b; + background: var(--color-danger-light-bg); + border: 1px solid var(--color-badge-error-border); + color: var(--color-error-text-dark); } .discovery-result dt { font-weight: 700; @@ -769,31 +769,31 @@ tr:hover { /* ── Details ── */ details { margin-top: 14px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--color-border); padding-top: 12px; } details summary { cursor: pointer; font-weight: 600; font-size: 14px; - color: #64748b; + color: var(--color-text-subtle); padding: 6px 0; user-select: none; transition: color 0.2s; } details summary:hover { - color: #ff5e3a; + color: var(--color-accent); } details[open] summary { margin-bottom: 14px; - color: #ff5e3a; + color: var(--color-accent); } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: var(--color-overlay-light); backdrop-filter: blur(4px); display: flex; align-items: center; @@ -802,12 +802,12 @@ details[open] summary { opacity: 1; } .modal { - background: #fff; + background: var(--color-bg-surface); border-radius: 20px; padding: 28px; width: 420px; max-width: 90vw; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); + box-shadow: 0 20px 60px var(--color-shadow-xl); animation: modalIn 0.2s ease-out; } @keyframes modalIn { @@ -823,7 +823,7 @@ details[open] summary { .modal h3 { margin-bottom: 18px; font-size: 17px; - color: #1e293b; + color: var(--color-text-heading); display: flex; align-items: center; } @@ -846,7 +846,7 @@ details[open] summary { } .quota-text { font-size: 12px; - color: #94a3b8; + color: var(--color-text-faint); white-space: nowrap; } @@ -859,7 +859,7 @@ details[open] summary { #access-denied .access-icon { width: 80px; height: 80px; - background: #fef2f2; + background: var(--color-danger-light-bg); border-radius: 50%; display: flex; align-items: center; @@ -868,15 +868,15 @@ details[open] summary { } #access-denied .access-icon i { font-size: 32px; - color: #ef4444; + color: var(--color-danger-alt); } #access-denied h2 { - color: #991b1b; + color: var(--color-error-text-dark); margin-bottom: 8px; font-size: 20px; } #access-denied p { - color: #64748b; + color: var(--color-text-subtle); margin-bottom: 20px; font-size: 14px; } @@ -885,28 +885,28 @@ details[open] summary { align-items: center; gap: 6px; padding: 10px 24px; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); - color: #fff; + background: var(--color-accent-gradient); + color: var(--color-sidebar-text-active); text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 14px; - box-shadow: 0 3px 12px rgba(255, 94, 58, 0.3); + box-shadow: 0 3px 12px var(--color-accent-shadow); transition: all 0.2s; } #access-denied a:hover { transform: translateY(-1px); - box-shadow: 0 5px 18px rgba(255, 94, 58, 0.4); + box-shadow: 0 5px 18px var(--color-accent-shadow-lg); } #loading { text-align: center; padding: 80px; - color: #94a3b8; + color: var(--color-text-faint); font-size: 15px; } #loading i { font-size: 32px; - color: #ff5e3a; + color: var(--color-accent); display: block; margin-bottom: 12px; animation: spin 1s linear infinite; @@ -924,261 +924,29 @@ details[open] summary { justify-content: space-between; margin-top: 14px; font-size: 13px; - color: #94a3b8; + color: var(--color-text-faint); padding: 0 4px; } .pagination button { padding: 6px 14px; } -/* ── Dark Mode ── */ -[data-theme="dark"] body { - background: #0f172a; - color: #e2e8f0; -} -[data-theme="dark"] ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.15); -} -[data-theme="dark"] * { - scrollbar-color: rgba(255, 255, 255, 0.15) transparent; -} -[data-theme="dark"] .admin-tabs { - background: #1e293b; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -} -[data-theme="dark"] .admin-tab { - color: #94a3b8; -} -[data-theme="dark"] .admin-tab:hover { - color: #f1f5f9; - background: #162032; -} -[data-theme="dark"] .admin-card { - background: #1e293b; - box-shadow: - 0 1px 4px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} -[data-theme="dark"] .admin-card h2 { - color: #f1f5f9; -} -[data-theme="dark"] .stat-card { - background: #162032; - border-color: #334155; -} -[data-theme="dark"] .stat-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} -[data-theme="dark"] .stat-value { - color: #f1f5f9; -} -[data-theme="dark"] .stat-label { - color: #64748b; -} -[data-theme="dark"] .stat-card.warn { - border-color: #92400e; - background: #422006; -} -[data-theme="dark"] .stat-card.danger { - border-color: #991b1b; - background: #3b1111; -} -[data-theme="dark"] .progress-bar { - background: #334155; -} -[data-theme="dark"] .table-wrap { - border-color: #334155; -} -[data-theme="dark"] th { - background: #162032; - color: #64748b; - border-bottom-color: #334155; -} -[data-theme="dark"] td { - border-bottom-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] tr:hover { - background: #162032; -} -[data-theme="dark"] .user-name { - color: #f1f5f9; -} -[data-theme="dark"] .user-email { - color: #64748b; -} -[data-theme="dark"] .badge-admin { - background: #1e3a5f; - color: #60a5fa; -} -[data-theme="dark"] .badge-user { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .badge-active { - background: #052e16; - color: #86efac; -} -[data-theme="dark"] .badge-inactive { - background: #3b1111; - color: #fca5a5; -} -[data-theme="dark"] .badge-oidc { - background: #2e1065; - color: #c4b5fd; -} -[data-theme="dark"] .badge-local { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .btn-secondary { - background: #1e293b; - color: #e2e8f0; - border-color: #334155; -} -[data-theme="dark"] .btn-secondary:hover { - background: #334155; - border-color: #475569; -} -[data-theme="dark"] .btn-danger { - background: #3b1111; - color: #fca5a5; - border-color: #991b1b; -} -[data-theme="dark"] .btn-danger:hover { - background: #4a1515; -} -[data-theme="dark"] .btn-success { - background: #052e16; - color: #86efac; - border-color: #065f46; -} -[data-theme="dark"] .btn-success:hover { - background: #064e27; -} -[data-theme="dark"] .form-group label { - color: #94a3b8; -} -[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: #0f172a; - border-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] .form-group input:focus, -[data-theme="dark"] .form-group select:focus { - border-color: #ff5e3a; - background: #0f172a; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.15); -} -[data-theme="dark"] .form-group small { - color: #64748b; -} -[data-theme="dark"] .toggle-row label { - color: #94a3b8; -} -[data-theme="dark"] .slider { - background: #475569; -} -[data-theme="dark"] .readonly-field { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] .readonly-field button { - background: #1e293b; - border-color: #334155; - color: #94a3b8; -} -[data-theme="dark"] .readonly-field button:hover { - background: #334155; - color: #f1f5f9; -} -[data-theme="dark"] .warning { - background: #422006; - border-color: #92400e; - color: #fbbf24; -} -[data-theme="dark"] .alert-success { - background: #052e16; - color: #86efac; - border-color: #065f46; -} -[data-theme="dark"] .alert-error { - background: #3b1111; - color: #fca5a5; - border-color: #991b1b; -} -[data-theme="dark"] .alert-info { - background: #0c2d48; - color: #93c5fd; - border-color: #1d4ed8; -} -[data-theme="dark"] .discovery-result.ok { - background: #052e16; - border-color: #065f46; - color: #86efac; -} -[data-theme="dark"] .discovery-result.fail { - background: #3b1111; - border-color: #991b1b; - color: #fca5a5; -} -[data-theme="dark"] details { - border-top-color: #334155; -} -[data-theme="dark"] details summary { - color: #94a3b8; -} -[data-theme="dark"] details summary:hover { - color: #ff5e3a; -} -[data-theme="dark"] details[open] summary { - color: #ff5e3a; -} -[data-theme="dark"] .modal { - background: #1e293b; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); -} -[data-theme="dark"] .modal h3 { - color: #f1f5f9; -} -[data-theme="dark"] .modal-overlay { - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(4px); -} -[data-theme="dark"] .quota-text { - color: #64748b; -} -[data-theme="dark"] .pagination { - color: #64748b; -} -[data-theme="dark"] #access-denied h2 { - color: #fca5a5; -} -[data-theme="dark"] #access-denied p { - color: #94a3b8; -} - /* ── Confirm modal ── */ .modal-confirm { max-width: 420px; } .modal-confirm h3 { - color: #dc2626; + color: var(--color-error-text-dark); } .modal-confirm p { margin: 14px 0 22px; font-size: 14px; line-height: 1.55; - color: #475569; + color: var(--color-dark-mid); } .btn-danger { - background: linear-gradient(135deg, #dc2626, #b91c1c); - color: #fff; + background: var(--color-danger-gradient); + color: var(--color-danger-text); border: none; padding: 10px 22px; border-radius: 10px; @@ -1189,18 +957,3 @@ details[open] summary { .btn-danger:hover { opacity: 0.88; } -[data-theme="dark"] .modal-confirm p { - color: #94a3b8; -} -[data-theme="dark"] .btn-danger { - background: linear-gradient(135deg, #ef4444, #dc2626); -} -[data-theme="dark"] #access-denied .access-icon { - background: #3b1111; -} -[data-theme="dark"] #loading { - color: #64748b; -} -[data-theme="dark"] .toggle-row { - border-top-color: #334155; -} diff --git a/static/css/views/auth.css b/static/css/views/auth.css index c16c36d3..849af480 100644 --- a/static/css/views/auth.css +++ b/static/css/views/auth.css @@ -46,7 +46,7 @@ .auth-logo-icon svg { width: 30px; height: 30px; - fill: white; + fill: var(--color-danger-text); } .auth-logo-text { @@ -120,7 +120,7 @@ padding: 14px 18px; border-radius: 12px; background: var(--color-accent-gradient); - color: white; + color: var(--color-danger-text); font-weight: 700; border: none; cursor: pointer; @@ -132,7 +132,7 @@ .auth-button:hover { transform: translateY(-1px); - box-shadow: 0 6px 20px rgba(255, 94, 58, 0.4); + box-shadow: 0 6px 20px var(--color-accent-shadow-lg); filter: brightness(1.05); } @@ -159,8 +159,8 @@ /* SSO / OIDC button */ .auth-button-oidc { - background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); - box-shadow: 0 4px 12px rgba(45, 55, 72, 0.3); + background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%); + box-shadow: 0 4px 12px var(--color-shadow-3xl); display: flex; align-items: center; justify-content: center; @@ -168,15 +168,15 @@ } .auth-button-oidc:hover { - box-shadow: 0 6px 20px rgba(45, 55, 72, 0.4); + box-shadow: 0 6px 20px var(--color-shadow-4xl); } .auth-button-sso { - background: #4f46e5; - box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); + background: var(--color-oidc-bg); + box-shadow: 0 4px 12px var(--color-oidc-shadow); } .auth-button-sso:hover { - box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); + box-shadow: 0 6px 20px var(--color-oidc-shadow-lg); } .auth-button-oidc i { @@ -280,7 +280,7 @@ .step-number.active { background: var(--color-accent-gradient); border-color: transparent; - color: white; + color: var(--color-danger-text); box-shadow: 0 2px 8px var(--color-accent-shadow); } diff --git a/static/css/views/device-verify.css b/static/css/views/device-verify.css index 8ce7609a..9c02a5fa 100644 --- a/static/css/views/device-verify.css +++ b/static/css/views/device-verify.css @@ -1,17 +1,4 @@ /* device-verify.css — stand-alone styles for the device authorization page */ -:root { - --primary: #2563eb; - --primary-hover: #1d4ed8; - --danger: #dc2626; - --danger-hover: #b91c1c; - --success: #16a34a; - --bg: #f8fafc; - --card: #ffffff; - --text: #1e293b; - --muted: #64748b; - --border: #e2e8f0; - --radius: 12px; -} * { box-sizing: border-box; margin: 0; @@ -19,8 +6,8 @@ } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - background: var(--bg); - color: var(--text); + background: var(--color-bg-hover); + color: var(--color-text-heading); display: flex; justify-content: center; align-items: center; @@ -28,9 +15,9 @@ body { padding: 1rem; } .card { - background: var(--card); - border-radius: var(--radius); - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); + background: var(--color-bg-surface); + border-radius: var(--radius, 12px); + box-shadow: 0 4px 24px var(--color-shadow-sm); padding: 2.5rem; max-width: 440px; width: 100%; @@ -44,14 +31,14 @@ body { font-weight: 700; } .logo span { - color: var(--primary); + color: var(--color-primary); } h2 { font-size: 1.15rem; margin-bottom: 0.5rem; } p.subtitle { - color: var(--muted); + color: var(--color-text-gray); font-size: 0.9rem; margin-bottom: 1.5rem; } @@ -68,16 +55,16 @@ input[type="text"] { letter-spacing: 0.15em; text-align: center; text-transform: uppercase; - border: 2px solid var(--border); + border: 2px solid var(--color-border); border-radius: 8px; outline: none; transition: border-color 0.2s; } input[type="text"]:focus { - border-color: var(--primary); + border-color: var(--color-primary); } .device-info { - background: #f1f5f9; + background: var(--color-border-light); border-radius: 8px; padding: 1rem; margin: 1rem 0; @@ -88,7 +75,7 @@ input[type="text"]:focus { margin-bottom: 0.3rem; } .device-info .label { - color: var(--muted); + color: var(--color-text-gray); font-size: 0.85rem; } .device-info .value { @@ -111,18 +98,18 @@ button { transition: background 0.2s; } .btn-approve { - background: var(--primary); - color: #fff; + background: var(--color-primary); + color: var(--color-danger-text); } .btn-approve:hover { - background: var(--primary-hover); + background: var(--color-primary-hover); } .btn-deny { - background: var(--danger); - color: #fff; + background: var(--color-error-text); + color: var(--color-danger-text); } .btn-deny:hover { - background: var(--danger-hover); + background: var(--color-danger-bg-hover); } button:disabled { opacity: 0.5; @@ -136,19 +123,19 @@ button:disabled { font-weight: 600; } .status.success { - background: #dcfce7; - color: var(--success); + background: var(--color-success-bg); + color: var(--color-success-text); } .status.denied { - background: #fef2f2; - color: var(--danger); + background: var(--color-danger-light-bg); + color: var(--color-error-text); } .status.error { - background: #fef2f2; - color: var(--danger); + background: var(--color-danger-light-bg); + color: var(--color-error-text); } .error-text { - color: var(--danger); + color: var(--color-error-text); font-size: 0.85rem; margin-top: 0.5rem; } diff --git a/static/css/views/favorites.css b/static/css/views/favorites.css index 1d78849b..8b09a670 100644 --- a/static/css/views/favorites.css +++ b/static/css/views/favorites.css @@ -11,7 +11,7 @@ align-items: center; justify-content: center; border-radius: 50%; - color: #ccc; + color: var(--color-device-verify-dim); cursor: pointer; z-index: 5; transition: all 0.2s ease; @@ -27,8 +27,8 @@ } .favorite-indicator.active { - color: #ffc107; - text-shadow: 0 0 5px rgba(255, 193, 7, 0.5); + color: var(--color-warning-text); + text-shadow: 0 0 5px var(--color-warning-shadow); } /* Styles for the favorites view items */ @@ -38,10 +38,10 @@ /* Adjustments for grid view */ .file-item.favorite-item { - border-left: 3px solid #ffc107; + border-left: 3px solid var(--color-warning-border); [dir="rtl"] & { - border-right: 3px solid #ffc107; + border-right: 3px solid var(--color-warning-border); border-left: unset; } } @@ -72,12 +72,12 @@ justify-content: center; padding: 50px 20px; text-align: center; - color: #6c757d; + color: var(--color-text-gray); } .favorites-empty-state i { font-size: 48px; - color: #ffc107; + color: var(--color-warning-text); margin-bottom: 20px; opacity: 0.6; } @@ -119,11 +119,11 @@ /* List view: small star next to the name */ .favorite-star-inline { - color: #ffc107; + color: var(--color-warning-text); font-size: 11px; margin-left: 6px; vertical-align: middle; - filter: drop-shadow(0 0 1px rgba(255, 193, 7, 0.4)); + filter: drop-shadow(0 0 1px var(--color-device-verify-drop-shadow)); [dir="rtl"] & { margin-left: 0; diff --git a/static/css/views/inlineViewer.css b/static/css/views/inlineViewer.css index 12c46a0d..888f6ee3 100644 --- a/static/css/views/inlineViewer.css +++ b/static/css/views/inlineViewer.css @@ -7,7 +7,7 @@ width: 100%; height: 100%; z-index: 9999; - background-color: rgba(0, 0, 0, 0.85); + background-color: var(--color-overlay-heavy); display: none; opacity: 0; transition: opacity 0.3s ease; @@ -26,12 +26,12 @@ width: 90%; height: 90%; max-width: 1200px; - background-color: #fff; + background-color: var(--color-bg-surface); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 20px var(--color-shadow-3xl); } .inline-viewer-header { @@ -39,14 +39,14 @@ justify-content: space-between; align-items: center; padding: 12px 16px; - background-color: #f8f9fa; - border-bottom: 1px solid #e2e8f0; + background-color: var(--color-bg-subtle); + border-bottom: 1px solid var(--color-border); } .inline-viewer-title { font-size: 18px; font-weight: 500; - color: #2d3748; + color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -57,7 +57,7 @@ border: none; font-size: 18px; cursor: pointer; - color: #718096; + color: var(--color-text-muted); width: 36px; height: 36px; border-radius: 50%; @@ -68,14 +68,14 @@ } .inline-viewer-close:hover { - background-color: #e2e8f0; - color: #4a5568; + background-color: var(--color-border); + color: var(--color-text-secondary); } .inline-viewer-container { flex-grow: 1; overflow: auto; - background-color: #f0f3f7; + background-color: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; @@ -87,13 +87,13 @@ justify-content: space-between; align-items: center; padding: 12px 16px; - background-color: #f8f9fa; - border-top: 1px solid #e2e8f0; + background-color: var(--color-bg-subtle); + border-top: 1px solid var(--color-border); } .inline-viewer-download { - background-color: #ff5e3a; - color: white; + background-color: var(--color-accent); + color: var(--color-danger-text); border: none; border-radius: 4px; padding: 8px 16px; @@ -107,7 +107,7 @@ } .inline-viewer-download:hover { - background-color: #e74c3c; + background-color: var(--color-danger-alt); } .inline-viewer-controls { @@ -116,8 +116,8 @@ } .inline-viewer-controls button { - background-color: #f1f5f9; - border: 1px solid #cbd5e1; + background-color: var(--color-border-light); + border: 1px solid var(--color-border-medium); border-radius: 4px; width: 36px; height: 36px; @@ -125,13 +125,13 @@ align-items: center; justify-content: center; cursor: pointer; - color: #64748b; + color: var(--color-text-subtle); transition: all 0.2s; } .inline-viewer-controls button:hover { - background-color: #e2e8f0; - color: #334155; + background-color: var(--color-border); + color: var(--color-text-dark); } /* Image viewer */ @@ -168,7 +168,7 @@ left: 50%; transform: translate(-50%, -50%); font-size: 36px; - color: #64748b; + color: var(--color-text-subtle); } /* Download progress container */ @@ -178,16 +178,16 @@ align-items: center; gap: 12px; padding: 20px; - background: rgba(255, 255, 255, 0.95); + background: var(--color-progress-overlay); border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px var(--color-shadow); } /* Progress bar track */ .inline-viewer-progress-bar { width: 200px; height: 8px; - background: #e2e8f0; + background: var(--color-border); border-radius: 4px; overflow: hidden; } @@ -195,7 +195,7 @@ /* Progress bar fill */ .inline-viewer-progress-fill { height: 100%; - background: linear-gradient(90deg, #3b82f6, #60a5fa); + background: linear-gradient(90deg, var(--color-info-blue), var(--color-admin-blue)); border-radius: 4px; transition: width 0.2s ease; } @@ -204,23 +204,10 @@ .inline-viewer-progress-text { font-size: 14px; font-weight: 600; - color: #475569; + color: var(--color-text-secondary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } -/* Dark theme support */ -[data-theme="dark"] .inline-viewer-progress { - background: rgba(30, 41, 59, 0.95); -} - -[data-theme="dark"] .inline-viewer-progress-bar { - background: #334155; -} - -[data-theme="dark"] .inline-viewer-progress-text { - color: #cbd5e1; -} - /* Error and unsupported message */ .inline-viewer-message { padding: 32px; @@ -230,12 +217,12 @@ .inline-viewer-icon { font-size: 64px; - color: #cbd5e1; + color: var(--color-text-dark); margin-bottom: 24px; } .inline-viewer-text { - color: #64748b; + color: var(--color-text-subtle); line-height: 1.6; } @@ -252,8 +239,8 @@ font-family: "Courier New", Consolas, Monaco, monospace; font-size: 14px; line-height: 1.6; - color: #2d3748; - background-color: #fff; + color: var(--color-text); + background-color: var(--color-bg-surface); overflow: auto; white-space: pre-wrap; word-wrap: break-word; @@ -268,7 +255,7 @@ max-height: 100%; object-fit: contain; border-radius: 4px; - background-color: #000; + background-color: var(--color-black); } /* Audio viewer */ @@ -285,7 +272,7 @@ .inline-viewer-audio-icon { font-size: 80px; - color: #94a3b8; + color: var(--color-text-faint); animation: audio-pulse 2s ease-in-out infinite; } @@ -304,7 +291,7 @@ .inline-viewer-audio-name { font-size: 16px; font-weight: 500; - color: #475569; + color: var(--color-text-secondary); text-align: center; word-break: break-word; max-width: 100%; diff --git a/static/css/views/photos.css b/static/css/views/photos.css index 589e4870..4bcbc0d0 100644 --- a/static/css/views/photos.css +++ b/static/css/views/photos.css @@ -29,12 +29,12 @@ padding: 16px 8px 10px; font-size: 15px; font-weight: 600; - color: #2d3748; + color: var(--color-text); } .photos-day-header .photos-day-count { font-weight: 400; - color: #94a3b8; + color: var(--color-text-faint); font-size: 13px; margin-left: 8px; } @@ -76,10 +76,10 @@ aspect-ratio: 1; overflow: hidden; border-radius: 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); cursor: pointer; - background: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + background: var(--color-bg-surface); + box-shadow: 0 1px 3px var(--color-shadow-xs); transition: transform 0.2s ease, box-shadow 0.2s ease, @@ -96,8 +96,8 @@ .photo-tile:hover { transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); - border-color: #cbd5e0; + box-shadow: 0 5px 15px var(--color-shadow-sm); + border-color: var(--color-border-medium); } .photo-tile:hover img { @@ -112,14 +112,14 @@ width: 22px; height: 22px; border-radius: 50%; - border: 2px solid rgba(255, 255, 255, 0.8); - background: rgba(0, 0, 0, 0.25); + border: 2px solid var(--color-photo-check-border); + background: var(--color-shadow-2xl); opacity: 0; transition: opacity 0.15s ease; display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--color-danger-text); font-size: 11px; z-index: 2; } @@ -130,16 +130,16 @@ } .photo-tile.selected .photo-check { - background: #ff5e3a; - border-color: #ff5e3a; + background: var(--color-accent); + border-color: var(--color-accent); } .photo-tile.selected { - border-color: #ff5e3a; - background: #fff8f6; + border-color: var(--color-accent); + background: var(--color-item-selected); box-shadow: - 0 0 0 1px rgba(255, 94, 58, 0.15), - 0 4px 12px rgba(255, 94, 58, 0.1); + 0 0 0 1px var(--color-accent-ring-dark), + 0 4px 12px var(--color-accent-ring); } .photo-tile.selected img { @@ -154,11 +154,11 @@ width: 28px; height: 28px; border-radius: 50%; - background: rgba(0, 0, 0, 0.55); + background: var(--color-overlay-video); display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--color-danger-text); font-size: 12px; z-index: 2; } @@ -169,8 +169,8 @@ bottom: 6px; left: 6px; font-size: 11px; - color: #fff; - background: rgba(0, 0, 0, 0.55); + color: var(--color-danger-text); + background: var(--color-overlay-video); padding: 2px 6px; border-radius: 4px; z-index: 2; @@ -184,13 +184,13 @@ justify-content: center; padding: 80px 20px; text-align: center; - color: #94a3b8; + color: var(--color-text-faint); } .photos-empty i { font-size: 56px; margin-bottom: 16px; - color: #cbd5e1; + color: var(--color-border-medium); } .photos-empty p { @@ -201,7 +201,7 @@ .photos-empty .photos-empty-title { font-size: 18px; font-weight: 600; - color: #64748b; + color: var(--color-text-subtle); } /* Infinite scroll sentinel */ @@ -216,7 +216,7 @@ align-items: center; justify-content: center; padding: 24px; - color: #94a3b8; + color: var(--color-text-faint); font-size: 14px; gap: 8px; } @@ -237,14 +237,14 @@ bottom: 20px; left: 50%; transform: translateX(-50%); - background: #1e293b; - color: #fff; + background: var(--color-multiselect-bg); + color: var(--color-multiselect-text); padding: 10px 20px; border-radius: 12px; display: flex; align-items: center; gap: 16px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); + box-shadow: 0 8px 30px var(--color-shadow-3xl); z-index: 1000; font-size: 14px; } @@ -252,7 +252,7 @@ .photos-selection-bar button { background: none; border: none; - color: #fff; + color: var(--color-multiselect-text); cursor: pointer; padding: 6px 10px; border-radius: 6px; @@ -261,7 +261,7 @@ } .photos-selection-bar button:hover { - background: rgba(255, 255, 255, 0.15); + background: var(--color-multiselect-action-hover); } .photos-selection-bar .selection-count { @@ -298,24 +298,3 @@ padding: 6px 4px 2px; } } - -/* Dark theme */ -[data-theme="dark"] .photos-day-header { - color: #e2e8f0; -} - -[data-theme="dark"] .photo-tile { - background: #334155; -} - -[data-theme="dark"] .photos-empty i { - color: #475569; -} - -[data-theme="dark"] .photos-empty .photos-empty-title { - color: #94a3b8; -} - -[data-theme="dark"] .photos-empty p { - color: #64748b; -} diff --git a/static/css/views/photosLightbox.css b/static/css/views/photosLightbox.css index 7f7f228e..71735844 100644 --- a/static/css/views/photosLightbox.css +++ b/static/css/views/photosLightbox.css @@ -3,7 +3,7 @@ position: fixed; inset: 0; z-index: 10000; - background: rgba(0, 0, 0, 0.92); + background: var(--color-lightbox-overlay); display: flex; flex-direction: column; align-items: center; @@ -46,8 +46,8 @@ height: 48px; border-radius: 50%; border: none; - background: rgba(255, 255, 255, 0.12); - color: #fff; + background: var(--color-lightbox-btn-bg); + color: var(--color-lightbox-btn-text); font-size: 20px; cursor: pointer; display: flex; @@ -58,7 +58,7 @@ } .lightbox-nav:hover { - background: rgba(255, 255, 255, 0.25); + background: var(--color-lightbox-btn-hover); } .lightbox-prev { @@ -78,8 +78,8 @@ height: 40px; border-radius: 50%; border: none; - background: rgba(255, 255, 255, 0.12); - color: #fff; + background: var(--color-lightbox-btn-bg); + color: var(--color-lightbox-btn-text); font-size: 18px; cursor: pointer; display: flex; @@ -90,7 +90,7 @@ } .lightbox-close:hover { - background: rgba(255, 255, 255, 0.25); + background: var(--color-lightbox-btn-hover); } /* Top info bar */ @@ -100,8 +100,8 @@ left: 0; right: 0; padding: 16px 70px 16px 20px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent); - color: #fff; + background: var(--color-lightbox-gradient-top); + color: var(--color-lightbox-btn-text); z-index: 10001; } @@ -116,7 +116,7 @@ .lightbox-meta { font-size: 12px; - color: rgba(255, 255, 255, 0.7); + color: var(--color-lightbox-text-muted); display: flex; gap: 12px; flex-wrap: wrap; @@ -129,7 +129,7 @@ left: 0; right: 0; padding: 16px 20px; - background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); + background: var(--color-lightbox-gradient-bottom); display: flex; align-items: center; justify-content: center; @@ -138,9 +138,9 @@ } .lightbox-toolbar button { - background: rgba(255, 255, 255, 0.12); + background: var(--color-lightbox-btn-bg); border: none; - color: #fff; + color: var(--color-lightbox-btn-text); width: 40px; height: 40px; border-radius: 50%; @@ -153,11 +153,11 @@ } .lightbox-toolbar button:hover { - background: rgba(255, 255, 255, 0.25); + background: var(--color-lightbox-btn-hover); } .lightbox-toolbar button.active { - color: #ff5e3a; + color: var(--color-accent); } /* Counter */ @@ -165,7 +165,7 @@ position: absolute; bottom: 16px; left: 20px; - color: rgba(255, 255, 255, 0.5); + color: var(--color-lightbox-text-faint); font-size: 13px; z-index: 10001; } diff --git a/static/css/views/profile.css b/static/css/views/profile.css index acdddc45..c7843d65 100644 --- a/static/css/views/profile.css +++ b/static/css/views/profile.css @@ -5,8 +5,8 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } body { - background: #f5f7fa; - color: #1e293b; + background: var(--color-bg-page); + color: var(--color-text-heading); min-height: 100vh; height: auto; display: flex; @@ -35,23 +35,23 @@ body { background: transparent; } ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.15); + background: var(--color-shadow-md); border-radius: 4px; } * { scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.15) transparent; + scrollbar-color: var(--color-shadow-md) transparent; } /* ── Header ── */ .profile-header { - background: linear-gradient(135deg, #2a3042 0%, #232838 100%); + background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%); padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 12px var(--color-shadow-md); position: sticky; top: 0; z-index: 100; @@ -64,32 +64,32 @@ body { .profile-logo { width: 38px; height: 38px; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); + background: var(--color-accent-gradient); border-radius: 11px; display: flex; align-items: center; justify-content: center; - box-shadow: 0 3px 10px rgba(255, 94, 58, 0.35); + box-shadow: 0 3px 10px var(--color-sidebar-shadow); } .profile-logo svg { width: 20px; height: 20px; - fill: #fff; + fill: var(--color-sidebar-text-active); } .profile-title-text { font-size: 17px; font-weight: 700; - color: #fff; + color: var(--color-sidebar-text-active); letter-spacing: 0.3px; } .profile-title-separator { font-size: 17px; - color: rgba(255, 255, 255, 0.5); + color: var(--color-sidebar-storage-faint); font-weight: 400; margin-left: 6px; } .profile-header-right a { - color: rgba(255, 255, 255, 0.65); + color: var(--color-sidebar-text); text-decoration: none; font-size: 13px; font-weight: 500; @@ -99,7 +99,7 @@ body { transition: color 0.2s; } .profile-header-right a:hover { - color: #fff; + color: var(--color-sidebar-text-active); } /* ── Container ── */ @@ -112,11 +112,11 @@ body { /* ── Card ── */ .profile-card { - background: #fff; + background: var(--color-bg-surface); border-radius: 16px; box-shadow: - 0 1px 4px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(0, 0, 0, 0.03); + 0 1px 4px var(--color-shadow-xs), + 0 0 0 1px var(--color-shadow-xs); padding: 32px; margin-bottom: 22px; } @@ -124,13 +124,13 @@ body { font-size: 16px; font-weight: 700; margin-bottom: 20px; - color: #1e293b; + color: var(--color-text-heading); display: flex; align-items: center; gap: 10px; } .profile-card h2 i { - color: #ff5e3a; + color: var(--color-accent); font-size: 17px; } @@ -145,26 +145,26 @@ body { width: 88px; height: 88px; border-radius: 50%; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); + background: var(--color-accent-gradient); display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--color-sidebar-text-active); font-size: 32px; font-weight: 700; letter-spacing: 1px; - box-shadow: 0 6px 20px rgba(255, 94, 58, 0.3); + box-shadow: 0 6px 20px var(--color-accent-shadow); flex-shrink: 0; } .avatar-info h1 { font-size: 22px; font-weight: 700; - color: #1e293b; + color: var(--color-text-heading); margin-bottom: 4px; } .avatar-info .email { font-size: 14px; - color: #64748b; + color: var(--color-text-subtle); margin-bottom: 8px; } .avatar-info .role-badge { @@ -177,12 +177,12 @@ body { border-radius: 20px; } .role-badge-admin { - background: #dbeafe; - color: #1d4ed8; + background: var(--color-role-admin-bg); + color: var(--color-role-admin-text); } .role-badge-user { - background: #f1f5f9; - color: #64748b; + background: var(--color-border-light); + color: var(--color-text-subtle); } /* ── Info Grid ── */ @@ -198,13 +198,13 @@ body { } .info-item { padding: 16px; - background: #f8fafc; + background: var(--color-bg-hover); border-radius: 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); } .info-item .info-label { font-size: 11.5px; - color: #94a3b8; + color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; @@ -215,12 +215,12 @@ body { } .info-item .info-label i { font-size: 12px; - color: #cbd5e1; + color: var(--color-text-dark); } .info-item .info-value { font-size: 15px; font-weight: 600; - color: #1e293b; + color: var(--color-text-heading); } /* ── Storage ── */ @@ -241,18 +241,18 @@ body { .storage-stat { text-align: center; padding: 16px; - background: #f8fafc; + background: var(--color-bg-hover); border-radius: 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); } .storage-stat .stat-value { font-size: 1.5rem; font-weight: 800; - color: #1e293b; + color: var(--color-text-heading); } .storage-stat .stat-label { font-size: 11px; - color: #94a3b8; + color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; @@ -263,7 +263,7 @@ body { } .storage-bar { height: 10px; - background: #e2e8f0; + background: var(--color-border); border-radius: 5px; overflow: hidden; } @@ -273,17 +273,17 @@ body { transition: width 0.6s ease; } .storage-fill.green { - background: linear-gradient(90deg, #059669, #10b981); + background: var(--color-storage-fill-green); } .storage-fill.orange { - background: linear-gradient(90deg, #d97706, #f59e0b); + background: var(--color-storage-fill-orange); } .storage-fill.red { - background: linear-gradient(90deg, #dc2626, #ef4444); + background: var(--color-storage-fill-red); } .storage-text { font-size: 12px; - color: #94a3b8; + color: var(--color-text-faint); text-align: right; margin-top: 6px; } @@ -297,27 +297,27 @@ body { font-size: 13px; font-weight: 600; margin-bottom: 4px; - color: #334155; + color: var(--color-text-dark); } .form-group input { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; + background: var(--color-bg-hover); transition: all 0.2s; font-family: inherit; - color: #1e293b; + color: var(--color-text-heading); } .form-group input:focus { outline: none; - border-color: #ff5e3a; - background: #fff; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .form-group small { - color: #94a3b8; + color: var(--color-text-faint); font-size: 12px; display: block; margin-top: 3px; @@ -337,12 +337,12 @@ body { gap: 6px; } .btn-primary { - background: linear-gradient(135deg, #ff5e3a, #ff2d55); - color: #fff; - box-shadow: 0 2px 8px rgba(255, 94, 58, 0.25); + background: var(--color-accent-gradient); + color: var(--color-sidebar-text-active); + box-shadow: 0 2px 8px var(--color-accent-shadow-sm); } .btn-primary:hover { - box-shadow: 0 4px 14px rgba(255, 94, 58, 0.35); + box-shadow: 0 4px 14px var(--color-sidebar-shadow); transform: translateY(-1px); } .btn-primary:disabled { @@ -359,20 +359,20 @@ body { font-weight: 500; } .alert-success { - background: #ecfdf5; - color: #065f46; - border: 1px solid #a7f3d0; + background: var(--color-badge-success-bg); + color: var(--color-badge-success-text); + border: 1px solid var(--color-badge-success-border); } .alert-error { - background: #fef2f2; - color: #991b1b; - border: 1px solid #fecaca; + background: var(--color-danger-light-bg); + color: var(--color-error-text-dark); + border: 1px solid var(--color-badge-error-border); } /* ── App Passwords ── */ .section-desc { font-size: 13px; - color: #64748b; + color: var(--color-text-subtle); margin-bottom: 16px; line-height: 1.5; } @@ -387,47 +387,47 @@ body { gap: 5px; font-size: 13px; font-weight: 500; - color: #334155; + color: var(--color-text-dark); cursor: pointer; } .checkbox-label input[type="checkbox"] { - accent-color: #ff5e3a; + accent-color: var(--color-accent); width: 16px; height: 16px; } .form-select { width: 100%; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; - color: #1e293b; + background: var(--color-bg-hover); + color: var(--color-text-heading); font-family: inherit; transition: all 0.2s; appearance: auto; } .form-select:focus { outline: none; - border-color: #ff5e3a; - background: #fff; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .btn-secondary { - background: #f1f5f9; - color: #334155; - border: 2px solid #e2e8f0; + background: var(--color-border-light); + color: var(--color-text-dark); + border: 2px solid var(--color-border); } .btn-secondary:hover { - background: #e2e8f0; + background: var(--color-border); } .btn-danger { - background: linear-gradient(135deg, #dc2626, #ef4444); - color: #fff; - box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2); + background: var(--color-danger-gradient); + color: var(--color-danger-text); + box-shadow: 0 2px 8px var(--color-danger-shadow); } .btn-danger:hover { - box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3); + box-shadow: 0 4px 14px var(--color-danger-shadow-lg); transform: translateY(-1px); } .btn-sm { @@ -446,14 +446,14 @@ body { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; - color: #94a3b8; + color: var(--color-text-faint); font-weight: 700; padding: 8px 10px; - border-bottom: 2px solid #e2e8f0; + border-bottom: 2px solid var(--color-border); } .app-pw-table td { padding: 10px; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--color-border-light); vertical-align: middle; } .app-pw-table tr:last-child td { @@ -461,14 +461,14 @@ body { } .app-pw-label-cell { font-weight: 600; - color: #1e293b; + color: var(--color-text-heading); } .app-pw-prefix code { font-size: 12px; - background: #f1f5f9; + background: var(--color-border-light); padding: 2px 8px; border-radius: 6px; - color: #64748b; + color: var(--color-text-subtle); } .badge { @@ -479,12 +479,12 @@ body { border-radius: 12px; } .badge-active { - background: #ecfdf5; - color: #065f46; + background: var(--color-badge-success-bg); + color: var(--color-badge-success-text); } .badge-expired { - background: #fef2f2; - color: #991b1b; + background: var(--color-danger-light-bg); + color: var(--color-error-text-dark); } @media (max-width: 640px) { @@ -501,7 +501,7 @@ body { .app-pw-empty { text-align: center; padding: 24px; - color: #94a3b8; + color: var(--color-text-faint); font-size: 13px; } .app-pw-empty i { @@ -536,12 +536,12 @@ body { .app-pw-token-input { flex: 1; padding: 10px 14px; - border: 2px solid #a7f3d0; + border: 2px solid var(--color-badge-success-border); border-radius: 10px; font-size: 14px; font-family: "Courier New", Courier, monospace; - background: #f0fdf4; - color: #065f46; + background: var(--color-badge-success-fill-faint); + color: var(--color-badge-success-text); } .app-pw-instr-list { font-size: 12px; @@ -549,7 +549,7 @@ body { margin-top: 8px; } .app-pw-instr-list code { - background: #f0fdf4; + background: var(--color-badge-success-fill-faint); padding: 1px 6px; border-radius: 4px; font-size: 12px; @@ -559,12 +559,12 @@ body { #loading { text-align: center; padding: 80px; - color: #94a3b8; + color: var(--color-text-faint); font-size: 15px; } #loading i { font-size: 32px; - color: #ff5e3a; + color: var(--color-accent); display: block; margin-bottom: 12px; animation: spin 1s linear infinite; @@ -581,7 +581,7 @@ body { #auth-error .err-icon { width: 80px; height: 80px; - background: #fef2f2; + background: var(--color-danger-light-bg); border-radius: 50%; display: flex; align-items: center; @@ -590,15 +590,15 @@ body { } #auth-error .err-icon i { font-size: 32px; - color: #ef4444; + color: var(--color-danger-alt); } #auth-error h2 { - color: #991b1b; + color: var(--color-error-text-dark); margin-bottom: 8px; font-size: 20px; } #auth-error p { - color: #64748b; + color: var(--color-text-subtle); margin-bottom: 20px; font-size: 14px; } @@ -607,24 +607,24 @@ body { align-items: center; gap: 6px; padding: 10px 24px; - background: linear-gradient(135deg, #ff5e3a, #ff2d55); - color: #fff; + background: var(--color-accent-gradient); + color: var(--color-sidebar-text-active); text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 14px; - box-shadow: 0 3px 12px rgba(255, 94, 58, 0.3); + box-shadow: 0 3px 12px var(--color-accent-shadow); transition: all 0.2s; } #auth-error a:hover { transform: translateY(-1px); - box-shadow: 0 5px 18px rgba(255, 94, 58, 0.4); + box-shadow: 0 5px 18px var(--color-accent-shadow-lg); } /* ── App Passwords ── */ .app-pw-desc { font-size: 13px; - color: #64748b; + color: var(--color-text-subtle); margin-bottom: 16px; line-height: 1.5; } @@ -636,30 +636,30 @@ body { .app-pw-create input { flex: 1; padding: 10px 14px; - border: 2px solid #e2e8f0; + border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: #f8fafc; + background: var(--color-bg-hover); transition: all 0.2s; font-family: inherit; - color: #1e293b; + color: var(--color-text-heading); } .app-pw-create input:focus { outline: none; - border-color: #ff5e3a; - background: #fff; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background: var(--color-bg-surface); + box-shadow: 0 0 0 3px var(--color-accent-ring); } .app-pw-created { - background: #ecfdf5; - border: 1px solid #a7f3d0; + background: var(--color-badge-success-bg); + border: 1px solid var(--color-badge-success-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .app-pw-created-label { font-size: 13px; - color: #065f46; + color: var(--color-badge-success-text); margin-bottom: 8px; font-weight: 500; } @@ -673,9 +673,9 @@ body { font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 16px; font-weight: 700; - color: #065f46; + color: var(--color-badge-success-text); letter-spacing: 1px; - background: #d1fae5; + background: var(--color-badge-success-bg-medium); padding: 8px 14px; border-radius: 8px; flex: 1; @@ -685,19 +685,19 @@ body { padding: 8px 12px; border: none; border-radius: 8px; - background: #059669; - color: #fff; + background: var(--color-secret-green); + color: var(--color-sidebar-text-active); cursor: pointer; font-size: 14px; transition: all 0.15s; flex-shrink: 0; } .btn-copy:hover { - background: #047857; + background: var(--color-badge-success-fill); } .app-pw-created small { font-size: 12px; - color: #047857; + color: var(--color-badge-success-fill); } .app-pw-table { width: 100%; @@ -707,17 +707,17 @@ body { .app-pw-table thead th { text-align: left; font-size: 11.5px; - color: #94a3b8; + color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 8px 12px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--color-border); } .app-pw-table tbody td { padding: 10px 12px; - border-bottom: 1px solid #f1f5f9; - color: #334155; + border-bottom: 1px solid var(--color-border-light); + color: var(--color-text-dark); } .app-pw-table tbody tr:last-child td { border-bottom: none; @@ -726,25 +726,25 @@ body { padding: 6px 10px; border: none; border-radius: 8px; - background: #fef2f2; - color: #dc2626; + background: var(--color-danger-light-bg); + color: var(--color-error-text-dark); cursor: pointer; font-size: 13px; transition: all 0.15s; } .btn-danger-sm:hover { - background: #fee2e2; - color: #b91c1c; + background: var(--color-error-bg); + color: var(--color-error-text); } .app-pw-empty { text-align: center; - color: #94a3b8; + color: var(--color-text-faint); font-size: 14px; padding: 24px 0; } .app-pw-auto-section { margin-top: 20px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--color-border); padding-top: 16px; } .app-pw-auto-toggle { @@ -756,13 +756,13 @@ body { cursor: pointer; font-size: 14px; font-weight: 600; - color: #64748b; + color: var(--color-text-subtle); padding: 0; transition: color 0.15s; width: 100%; } .app-pw-auto-toggle:hover { - color: #334155; + color: var(--color-text-dark); } .app-pw-auto-toggle i { font-size: 11px; @@ -772,240 +772,15 @@ body { .app-pw-auto-count { font-size: 11px; font-weight: 700; - background: #e2e8f0; - color: #64748b; + background: var(--color-border); + color: var(--color-text-subtle); padding: 2px 8px; border-radius: 10px; margin-left: auto; } .app-pw-auto-desc { font-size: 12px; - color: #94a3b8; + color: var(--color-text-faint); margin: 12px 0 8px; line-height: 1.4; } - -/* ── Dark Mode ── */ -[data-theme="dark"] body { - background: #0f172a; - color: #e2e8f0; -} -[data-theme="dark"] ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.15); -} -[data-theme="dark"] * { - scrollbar-color: rgba(255, 255, 255, 0.15) transparent; -} -[data-theme="dark"] .profile-card { - background: #1e293b; - box-shadow: - 0 1px 4px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} -[data-theme="dark"] .profile-card h2 { - color: #f1f5f9; -} -[data-theme="dark"] .avatar-info h1 { - color: #f1f5f9; -} -[data-theme="dark"] .avatar-info .email { - color: #94a3b8; -} -[data-theme="dark"] .role-badge-admin { - background: #1e3a5f; - color: #60a5fa; -} -[data-theme="dark"] .role-badge-user { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .info-item { - background: #162032; - border-color: #334155; -} -[data-theme="dark"] .info-item .info-label { - color: #64748b; -} -[data-theme="dark"] .info-item .info-label i { - color: #475569; -} -[data-theme="dark"] .info-item .info-value { - color: #f1f5f9; -} -[data-theme="dark"] .storage-stat { - background: #162032; - border-color: #334155; -} -[data-theme="dark"] .storage-stat .stat-value { - color: #f1f5f9; -} -[data-theme="dark"] .storage-stat .stat-label { - color: #64748b; -} -[data-theme="dark"] .storage-bar { - background: #334155; -} -[data-theme="dark"] .storage-text { - color: #64748b; -} -[data-theme="dark"] .form-group label { - color: #94a3b8; -} -[data-theme="dark"] .form-group input { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] .form-group input:focus { - border-color: #ff5e3a; - background: #0f172a; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.15); -} -[data-theme="dark"] .form-group small { - color: #64748b; -} -[data-theme="dark"] .alert-success { - background: #052e16; - color: #86efac; - border-color: #065f46; -} -[data-theme="dark"] .alert-error { - background: #3b1111; - color: #fca5a5; - border-color: #991b1b; -} -[data-theme="dark"] #auth-error { - background: transparent; -} -[data-theme="dark"] #auth-error .err-icon { - background: #3b1111; -} -[data-theme="dark"] #auth-error h2 { - color: #fca5a5; -} -[data-theme="dark"] #auth-error p { - color: #94a3b8; -} -[data-theme="dark"] .section-desc { - color: #64748b; -} -[data-theme="dark"] .checkbox-label { - color: #94a3b8; -} -[data-theme="dark"] .form-select { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] .form-select:focus { - border-color: #ff5e3a; - background: #0f172a; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.15); -} -[data-theme="dark"] .btn-secondary { - background: #334155; - color: #e2e8f0; - border-color: #475569; -} -[data-theme="dark"] .btn-secondary:hover { - background: #475569; -} -[data-theme="dark"] .app-pw-table th { - color: #64748b; - border-bottom-color: #334155; -} -[data-theme="dark"] .app-pw-table td { - border-bottom-color: #1e293b; -} -[data-theme="dark"] .app-pw-label-cell { - color: #f1f5f9; -} -[data-theme="dark"] .app-pw-prefix code { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .badge-active { - background: #052e16; - color: #86efac; -} -[data-theme="dark"] .badge-expired { - background: #3b1111; - color: #fca5a5; -} -[data-theme="dark"] .app-pw-empty { - color: #64748b; -} -[data-theme="dark"] .app-pw-token-input { - background: #052e16; - border-color: #065f46; - color: #86efac; -} -[data-theme="dark"] .app-pw-instr-list code { - background: #052e16; - color: #86efac; -} -[data-theme="dark"] #loading { - color: #64748b; -} -[data-theme="dark"] .app-pw-desc { - color: #94a3b8; -} -[data-theme="dark"] .app-pw-create input { - background: #0f172a; - border-color: #334155; - color: #e2e8f0; -} -[data-theme="dark"] .app-pw-create input:focus { - border-color: #ff5e3a; - background: #0f172a; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.15); -} -[data-theme="dark"] .app-pw-created { - background: #052e16; - border-color: #065f46; -} -[data-theme="dark"] .app-pw-created-label { - color: #86efac; -} -[data-theme="dark"] .app-pw-created-value code { - background: #064e3b; - color: #86efac; -} -[data-theme="dark"] .app-pw-created small { - color: #6ee7b7; -} -[data-theme="dark"] .app-pw-table thead th { - color: #64748b; - border-bottom-color: #334155; -} -[data-theme="dark"] .app-pw-table tbody td { - color: #e2e8f0; - border-bottom-color: #1e293b; -} -[data-theme="dark"] .btn-danger-sm { - background: #3b1111; - color: #fca5a5; -} -[data-theme="dark"] .btn-danger-sm:hover { - background: #501111; - color: #fecaca; -} -[data-theme="dark"] .app-pw-empty { - color: #64748b; -} -[data-theme="dark"] .app-pw-auto-section { - border-top-color: #334155; -} -[data-theme="dark"] .app-pw-auto-toggle { - color: #94a3b8; -} -[data-theme="dark"] .app-pw-auto-toggle:hover { - color: #e2e8f0; -} -[data-theme="dark"] .app-pw-auto-count { - background: #334155; - color: #94a3b8; -} -[data-theme="dark"] .app-pw-auto-desc { - color: #64748b; -} diff --git a/static/css/views/recent.css b/static/css/views/recent.css index 2c433f6a..a1d2b557 100644 --- a/static/css/views/recent.css +++ b/static/css/views/recent.css @@ -11,7 +11,7 @@ align-items: center; justify-content: center; border-radius: 50%; - color: #6c757d; + color: var(--color-recent-muted); z-index: 5; [dir="rtl"] & { @@ -27,10 +27,10 @@ /* Adjustments for grid view */ .files-grid-view .file-item.recent-item { - border-left: 3px solid #6c757d; + border-left: 3px solid var(--color-recent-border); [dir="rtl"] & { - border-right: 3px solid #6c757d; + border-right: 3px solid var(--color-recent-border); border-left: unset; } } @@ -61,12 +61,12 @@ justify-content: center; padding: 50px 20px; text-align: center; - color: #6c757d; + color: var(--color-recent-muted); } .recents-empty-state i { font-size: 48px; - color: #6c757d; + color: var(--color-recent-muted); margin-bottom: 20px; opacity: 0.6; } diff --git a/static/css/views/shared.css b/static/css/views/shared.css index e36a62c9..4b5444f8 100644 --- a/static/css/views/shared.css +++ b/static/css/views/shared.css @@ -1,5 +1,5 @@ .page-description { - color: #718096; + color: var(--color-text-muted); font-size: 16px; margin-top: -15px; margin-bottom: 25px; @@ -17,12 +17,12 @@ .shared-header h2 { font-size: 24px; - color: #2d3748; + color: var(--color-text); margin-bottom: 8px; } .shared-header p { - color: #718096; + color: var(--color-text-muted); font-size: 16px; } @@ -39,12 +39,12 @@ flex-wrap: wrap; margin-bottom: 0; padding: 15px; - background-color: #f8f9fa; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + background-color: var(--color-bg-subtle); + box-shadow: 0 1px 3px var(--color-shadow-xs); border-radius: 10px 10px 0 0; - border-bottom: 1px solid #e0e6ed; + border-bottom: 1px solid var(--color-border-faint); font-weight: 600; - color: #2d3748; + color: var(--color-text); } .shared-view-container .shared-custom-select { @@ -58,11 +58,11 @@ width: 100%; padding: 10px 40px 10px 16px; border-radius: 12px; - border: 2px solid #e2e8f0; - background-color: #f8fafc; + border: 2px solid var(--color-border); + background-color: var(--color-bg-hover); font-size: 14px; font-weight: 500; - color: #1a202c; + color: var(--color-text-heading); cursor: pointer; min-width: 170px; height: 44px; @@ -71,14 +71,14 @@ } .shared-view-container .shared-select-toggle:hover { - border-color: #cbd5e0; - background-color: #fff; + border-color: var(--color-border-medium); + background-color: var(--color-bg-surface); } .shared-view-container .shared-custom-select.open .shared-select-toggle { - border-color: #ff5e3a; - background-color: #fff; - box-shadow: 0 0 0 4px rgba(255, 94, 58, 0.1); + border-color: var(--color-accent); + background-color: var(--color-bg-surface); + box-shadow: 0 0 0 4px var(--color-accent-ring); } .shared-view-container .shared-select-arrow { @@ -87,7 +87,7 @@ top: 50%; transform: translateY(-50%); font-size: 10px; - color: #718096; + color: var(--color-text-muted); transition: transform 0.2s ease; pointer-events: none; } @@ -101,10 +101,10 @@ top: calc(100% + 6px); left: 0; min-width: 100%; - background-color: white; + background-color: var(--color-bg-surface); border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - border: 1px solid #e2e8f0; + box-shadow: 0 4px 20px var(--color-shadow-md); + border: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateY(-10px); @@ -126,17 +126,17 @@ cursor: pointer; font-size: 14px; font-weight: 400; - color: #4a5568; + color: var(--color-text-secondary); transition: background-color 0.15s ease; } .shared-view-container .shared-select-option:hover { - background-color: #f7fafc; + background-color: var(--color-bg-alt); } .shared-view-container .shared-select-option.active { - background-color: #fff5f3; - color: #ff5e3a; + background-color: var(--color-accent-tint); + color: var(--color-accent); font-weight: 500; } @@ -147,13 +147,13 @@ margin-bottom: 0; flex-wrap: wrap; gap: 15px; - background-color: #f8f9fa; + background-color: var(--color-bg-subtle); border-radius: 10px 10px 0 0; padding: 15px; - border-bottom: 1px solid #e0e6ed; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + border-bottom: 1px solid var(--color-border-faint); + box-shadow: 0 1px 3px var(--color-shadow-xs); font-weight: 600; - color: #2d3748; + color: var(--color-text); } .filter-group { @@ -164,15 +164,15 @@ .filter-group label { font-size: 14px; - color: #4a5568; + color: var(--color-text-secondary); font-weight: 500; } .filter-group select { padding: 8px 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 6px; - background-color: white; + background-color: var(--color-bg-surface); font-size: 14px; min-width: 120px; } @@ -184,16 +184,16 @@ .search-box input { padding: 8px 15px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; width: 250px; } .shared-list-container { - background-color: white; + background-color: var(--color-bg-surface); border-radius: 0 0 10px 10px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 3px var(--color-shadow-xs); overflow: hidden; margin-bottom: 25px; } @@ -209,15 +209,15 @@ padding: 15px; text-align: left; font-weight: 600; - color: #2d3748; - background-color: #f8f9fa; - border-bottom: 1px solid #e0e6ed; + color: var(--color-text); + background-color: var(--color-bg-subtle); + border-bottom: 1px solid var(--color-border-faint); } .shared-list tbody td, .shared-table tbody td { padding: 15px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--color-border-xfaint); vertical-align: middle; } @@ -236,9 +236,9 @@ .shared-table .action-btn { width: 32px; height: 32px; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border); border-radius: 6px; - background-color: white; + background-color: var(--color-bg-surface); display: flex; align-items: center; justify-content: center; @@ -248,8 +248,8 @@ .shared-list .action-btn:hover, .shared-table .action-btn:hover { - background-color: #f0f8ff; - border-color: #90cdf4; + background-color: var(--color-item-hover-blue); + border-color: var(--color-info-border-light); } .action-icon { @@ -266,7 +266,7 @@ border-radius: 0; box-shadow: none; text-align: center; - color: #6c757d; + color: var(--color-text-gray); } #empty-shared-state p { @@ -291,130 +291,3 @@ display: none; } } - -[data-theme="dark"] .shared-filters { - background-color: #162032; - color: #94a3b8; - border-bottom-color: #334155; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} - -[data-theme="dark"] .shared-view-container .shared-select-toggle { - background-color: #1e293b; - border-color: #334155; - color: #cbd5e1; -} - -[data-theme="dark"] .shared-view-container .shared-filters { - background-color: #162032; - color: #94a3b8; - border-bottom-color: #334155; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} - -[data-theme="dark"] .shared-view-container .shared-select-toggle:hover { - background-color: #334155; - border-color: #475569; -} - -[data-theme="dark"] .shared-view-container .shared-custom-select.open .shared-select-toggle { - border-color: #ff5e3a; - box-shadow: 0 0 0 4px rgba(255, 94, 58, 0.15); - background-color: #1e293b; -} - -[data-theme="dark"] .shared-view-container .shared-select-arrow { - color: #94a3b8; -} - -[data-theme="dark"] .shared-view-container .shared-select-dropdown { - background-color: #1e293b; - border-color: #334155; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); -} - -[data-theme="dark"] .shared-view-container .shared-select-option { - color: #cbd5e1; -} - -[data-theme="dark"] .shared-view-container .shared-select-option:hover { - background-color: #334155; -} - -[data-theme="dark"] .shared-view-container .shared-select-option.active { - background-color: rgba(255, 94, 58, 0.1); - color: #ff5e3a; -} - -[data-theme="dark"] .filter-group label { - color: #94a3b8; -} - -[data-theme="dark"] .filter-group select { - background-color: #1e293b; - border-color: #334155; - color: #e2e8f0; - 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: #ff5e3a; - box-shadow: 0 0 0 3px rgba(255, 94, 58, 0.15); -} - -[data-theme="dark"] .search-box input { - background-color: #1e293b; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .search-box input::placeholder { - color: #64748b; -} - -[data-theme="dark"] .shared-list-container { - background-color: #1e293b; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -} - -[data-theme="dark"] .shared-list thead th, -[data-theme="dark"] .shared-table thead th { - background-color: #162032; - color: #94a3b8; - border-bottom-color: #334155; -} - -[data-theme="dark"] .shared-list tbody td, -[data-theme="dark"] .shared-table tbody td { - border-bottom-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .shared-list tbody tr:hover, -[data-theme="dark"] .shared-table tbody tr:hover { - background-color: #162032; -} - -[data-theme="dark"] .page-description { - color: #94a3b8; -} - -[data-theme="dark"] #empty-shared-state.empty-state { - background-color: transparent; - box-shadow: none; - color: #64748b; -} - -[data-theme="dark"] #empty-shared-state p { - color: #94a3b8; -} - -[data-theme="dark"] .shared-list .action-btn, -[data-theme="dark"] .shared-table .action-btn { - color: #94a3b8; -} - -[data-theme="dark"] .shared-list .action-btn:hover, -[data-theme="dark"] .shared-table .action-btn:hover { - color: #ff5e3a; -} diff --git a/static/css/views/trash.css b/static/css/views/trash.css index 484a0e49..5740d623 100644 --- a/static/css/views/trash.css +++ b/static/css/views/trash.css @@ -17,8 +17,8 @@ .trash-actions button, .actions-cell button { - background: #fff; - border: 1px solid #ddd; + background: var(--color-trash-surface); + border: 1px solid var(--color-trash-border); border-radius: 4px; padding: 4px 8px; cursor: pointer; @@ -32,15 +32,15 @@ .trash-actions button:hover, .actions-cell button:hover { - background: #f0f0f0; + background: var(--color-trash-empty-bg); } .btn-restore { - color: #4caf50; + color: var(--color-trash-restore); } .btn-delete { - color: #f44336; + color: var(--color-trash-delete); } .actions-cell { @@ -51,18 +51,6 @@ } .btn-danger { - background-color: #f44336; - color: white; -} - -[data-theme="dark"] .trash-actions button, -[data-theme="dark"] .actions-cell button { - background: #1e293b; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .trash-actions button:hover, -[data-theme="dark"] .actions-cell button:hover { - background: #334155; + background-color: var(--color-trash-delete); + color: var(--color-danger-text); }