diff --git a/static/css/components/dialogs.css b/static/css/components/dialogs.css index d663c226..0e5a2e34 100644 --- a/static/css/components/dialogs.css +++ b/static/css/components/dialogs.css @@ -144,7 +144,7 @@ border: 2px solid var(--color-border); border-radius: 10px; font-size: 14px; - background: var(--color-bg-hover); + background: var(--color-bg-input); color: var(--color-text-heading); transition: all 0.15s ease; outline: none; @@ -386,7 +386,7 @@ } .move-breadcrumb-item:hover { - background: var(--color-border); + background: var(--color-bg-hover); color: var(--color-text-heading); } @@ -415,7 +415,7 @@ } .folder-select-item:hover { - background-color: var(--color-bg-muted); + background-color: var(--color-bg-hover); } .folder-select-item.selected { diff --git a/static/css/components/userMenu.css b/static/css/components/userMenu.css index b67b3c15..e5a3dedc 100644 --- a/static/css/components/userMenu.css +++ b/static/css/components/userMenu.css @@ -226,7 +226,7 @@ } .user-menu-admin { - color: var(--color-primary-hover); + color: var(--color-primary); } .user-menu-admin i { @@ -253,7 +253,7 @@ .role-badge-admin { background: var(--color-info-surface); - color: var(--color-primary-hover); + color: var(--color-primary); } .role-badge i { diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css index 1bdd6ae7..718c9e63 100644 --- a/static/css/themes/dark.css +++ b/static/css/themes/dark.css @@ -23,7 +23,7 @@ --color-text: #e2e8f0; --color-text-heading: #f1f5f9; --color-text-muted: #94a3b8; - --color-text-faint: #64748b; + --color-text-faint: #7a8a9f; --color-text-secondary: #cbd5e1; --color-text-subtle: #94a3b8; --color-text-dark: #cbd5e1; @@ -49,9 +49,10 @@ --color-success-bg: #052e16; --color-success-text: #86efac; - /* Shadows */ + /* Shadows (stronger on dark mode) */ --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-lg: rgba(0, 0, 0, 0.3); + --color-shadow-md: rgba(0, 0, 0, 0.3); /* Additional dark overrides */ --color-warning-bg: #3d2e00; @@ -60,7 +61,7 @@ --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-bg: linear-gradient(135deg, #1a2332 0%, #1e2940 100%); --color-user-menu-header-border: #3a2520; --color-info-bg: #0c1e35; --color-info-bg-alt: #0c1e35; @@ -80,6 +81,11 @@ /* Items */ --color-item-selected: #1a1520; --color-item-hover-accent: #21262d; + + /* Primary */ + /* TODO: rename into primary-blue ? */ + --color-primary: #60a5fa; + --color-primary-hover: #6fa8ee; } /* ------------ */ @@ -99,790 +105,8 @@ background-color: #1e293b; } -[data-theme="dark"] .breadcrumb { - color: #94a3b8; -} - -[data-theme="dark"] .breadcrumb-link { - color: #94a3b8; -} - -[data-theme="dark"] .breadcrumb-link:hover { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.1); -} - -[data-theme="dark"] .breadcrumb-current { - color: #e2e8f0; -} - -[data-theme="dark"] .breadcrumb-separator { - color: #64748b; -} - -[data-theme="dark"] .breadcrumb-home { - color: #94a3b8; -} - -[data-theme="dark"] .breadcrumb-home.breadcrumb-link:hover { - color: #ff5e3a; - background: rgba(255, 94, 58, 0.15); -} - -[data-theme="dark"] .btn-secondary { - background-color: #1e293b; - color: #cbd5e1; - border-color: #334155; -} - -[data-theme="dark"] .btn-secondary:hover { - background-color: #334155; - border-color: #475569; -} - -[data-theme="dark"] .btn-secondary:active { - background-color: #475569; -} - -[data-theme="dark"] .search-results-header h3 { - color: #f1f5f9; -} - -[data-theme="dark"] .search-results-header { - color: #f1f5f9; - border-bottom-color: #334155; -} - -[data-theme="dark"] .search-results-header .search-time { - color: #64748b; -} - -[data-theme="dark"] .search-results-header .btn-secondary { - background: #1e293b; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .search-results-header .btn-secondary:hover { - background: #334155; -} - -[data-theme="dark"] .search-sort-select { - background: #1e293b; - border-color: #334155; - color: #e2e8f0; -} - -[data-theme="dark"] .search-sort-select:focus { - border-color: #ff5e3a; -} - -/* ── csp-utilities.css ── */ -[data-theme="dark"] .empty-state-icon { - color: var(--color-dark-mid); -} -[data-theme="dark"] .empty-state-icon.error { - color: var(--color-danger-alt); -} -[data-theme="dark"] .about-modal-username { - color: var(--color-text-heading); -} -[data-theme="dark"] .about-modal-email { - color: var(--color-text-faint); -} -[data-theme="dark"] .about-modal-role-admin { - background: var(--color-role-admin-dark-bg); - color: var(--color-admin-blue); -} -[data-theme="dark"] .about-modal-role-user { - background: var(--color-border); - color: var(--color-text-faint); -} -[data-theme="dark"] .about-modal-storage-label { - color: var(--color-text-faint); -} -[data-theme="dark"] .about-modal-bar-bg { - background: var(--color-border); -} -[data-theme="dark"] .about-modal-bar-text { - color: var(--color-text-faint); -} -[data-theme="dark"] .about-modal-close-btn { - background: var(--color-bg-surface); - border-color: var(--color-border); - color: var(--color-text-dark); -} -[data-theme="dark"] .move-dialog-hint { - color: var(--color-text-faint); -} -[data-theme="dark"] .search-empty-text { - color: var(--color-text-faint); -} - -/* ── dialogs.css ── */ -[data-theme="dark"] .rename-dialog-content { - background-color: var(--color-bg-surface); - box-shadow: 0 8px 32px var(--color-shadow-5xl); -} - -[data-theme="dark"] .rename-dialog-header { - color: var(--color-text-heading); - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .rename-dialog input { - background: var(--color-bg-input); - color: var(--color-text); - border-color: var(--color-border); -} - -[data-theme="dark"] .rename-dialog input:focus { - border-color: var(--color-accent); - background: var(--color-bg-input); -} - -[data-theme="dark"] .rename-dialog-buttons { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .rename-dialog-buttons .btn-outline { - background: transparent; - color: var(--color-text-faint); - border-color: var(--color-border-medium); -} - -[data-theme="dark"] .rename-dialog-buttons .btn-outline:hover { - background: var(--color-border); - border-color: var(--color-text-subtle); -} - -[data-theme="dark"] .shared-dialog-content { - background-color: var(--color-bg-surface); -} - -[data-theme="dark"] .shared-dialog-header { - color: var(--color-text); - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .shared-dialog-header .close-dialog-btn { - color: var(--color-text-faint); -} - -[data-theme="dark"] .shared-dialog-header .close-dialog-btn:hover { - background: var(--color-border); - color: var(--color-text); -} - -[data-theme="dark"] .shared-dialog .share-link-input input, -[data-theme="dark"] .shared-dialog .password-input-group input, -[data-theme="dark"] .shared-dialog .share-expiration-section input, -[data-theme="dark"] .shared-dialog .notification-form input, -[data-theme="dark"] .shared-dialog .notification-form textarea { - background: var(--color-bg-input); - border-color: var(--color-border); - color: var(--color-text); -} - -[data-theme="dark"] .shared-dialog .share-link-input input:focus, -[data-theme="dark"] .shared-dialog .notification-form input:focus, -[data-theme="dark"] .shared-dialog .notification-form textarea:focus { - border-color: var(--color-accent); - background: var(--color-bg-surface); -} - -[data-theme="dark"] .shared-dialog .share-link-section label, -[data-theme="dark"] .shared-dialog .share-permissions-section h4, -[data-theme="dark"] .shared-dialog .notification-form label { - color: var(--color-text); -} - -[data-theme="dark"] .shared-dialog .share-permissions-section label, -[data-theme="dark"] .shared-dialog .share-password-section label, -[data-theme="dark"] .shared-dialog .share-expiration-section label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .shared-dialog .share-actions, -[data-theme="dark"] .shared-dialog .notification-actions { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .confirm-dialog-content { - background-color: var(--color-bg-surface); - box-shadow: 0 8px 32px var(--color-shadow-5xl); -} - -[data-theme="dark"] .confirm-dialog-header { - color: var(--color-text-heading); -} - -[data-theme="dark"] .confirm-dialog-message { - color: var(--color-text-faint); -} - -[data-theme="dark"] .confirm-dialog-buttons { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .move-dialog-content { - background-color: var(--color-bg-surface); -} - -[data-theme="dark"] .move-dialog-header { - color: var(--color-text-heading); - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .move-dialog .folder-tree { - background: var(--color-bg-input); - border-color: var(--color-border); -} - -[data-theme="dark"] .move-dialog .folder-tree-item { - color: var(--color-text-dark); -} - -[data-theme="dark"] .move-dialog .folder-tree-item:hover { - background: var(--color-border); -} - -[data-theme="dark"] .move-dialog .folder-tree-item.selected { - background: var(--color-accent-ring); - color: var(--color-accent); -} - -[data-theme="dark"] .move-dialog-buttons { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .share-dialog-content { - background-color: var(--color-bg-surface); -} - -[data-theme="dark"] .share-dialog-header { - color: var(--color-text-heading); - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .share-dialog-body label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .share-dialog-body input { - background: var(--color-bg-input); - border-color: var(--color-border); - color: var(--color-text); -} - -[data-theme="dark"] .share-dialog-body input:focus { - border-color: var(--color-accent); - background: var(--color-bg-input); -} - -[data-theme="dark"] .share-link-container { - background: var(--color-bg-input); - border-color: var(--color-border); -} - -[data-theme="dark"] .share-link-container input { - color: var(--color-text); -} - -[data-theme="dark"] .share-dialog-buttons { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .dialog { - background-color: var(--color-overlay-mid); -} - -[data-theme="dark"] .dialog-content { - background-color: var(--color-bg-surface); - color: var(--color-text); -} - -[data-theme="dark"] .dialog-header { - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .dialog-header h3 { - color: var(--color-text-heading); -} - -[data-theme="dark"] .dialog-body label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .dialog-body input, -[data-theme="dark"] .dialog-body textarea { - background-color: var(--color-bg-input); - border-color: var(--color-border); - color: var(--color-text); -} - -[data-theme="dark"] .dialog-body input:focus, -[data-theme="dark"] .dialog-body textarea:focus { - border-color: var(--color-accent); -} - -[data-theme="dark"] .close-dialog-btn { - color: var(--color-text-faint); -} - -[data-theme="dark"] .close-dialog-btn:hover { - color: var(--color-text-heading); -} - -[data-theme="dark"] .share-setting label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .permissions-options label span { - color: var(--color-text); -} - -[data-theme="dark"] .share-item-info { - color: var(--color-text); -} - -/* Dark mode for move dialog breadcrumb */ -[data-theme="dark"] .move-dialog-breadcrumb { - background: var(--color-bg-input); -} - -[data-theme="dark"] .move-breadcrumb-item { - color: var(--color-text-faint); -} - -[data-theme="dark"] .move-breadcrumb-item:hover { - background: var(--color-border); - color: var(--color-text); -} - -[data-theme="dark"] .move-breadcrumb-item.current { - color: var(--color-accent); -} - -[data-theme="dark"] .move-breadcrumb-separator { - color: var(--color-border-medium); -} - -/* Dark mode for folder select items */ -[data-theme="dark"] .folder-select-item { - color: var(--color-text-dark); -} - -[data-theme="dark"] .folder-select-item:hover { - background-color: var(--color-border); -} - -[data-theme="dark"] .folder-select-item.selected { - background-color: var(--color-accent-ring-dark); - color: var(--color-accent); -} - -[data-theme="dark"] .folder-select-item i { - color: var(--color-star-text); -} - -[data-theme="dark"] .folder-select-item.selected i { - color: var(--color-accent); -} - -[data-theme="dark"] .folder-select-item.folder-select-current { - background-color: var(--color-success-ring-vivid); - color: var(--color-success-text-vivid); -} - -[data-theme="dark"] .folder-select-item.folder-select-current:hover { - background-color: var(--color-success-ring-vivid-lg); -} - -[data-theme="dark"] .folder-select-item.folder-select-current i { - color: var(--color-success-icon-vivid); -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up { - color: var(--color-text-subtle); -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up:hover { - color: var(--color-text-faint); -} - -[data-theme="dark"] .folder-select-item.folder-navigate-up i { - color: var(--color-border-medium); -} - -[data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon { - color: var(--color-border-medium); -} - -[data-theme="dark"] .folder-select-empty { - color: var(--color-border-medium); -} - -/* ── modals.css ── */ -[data-theme="dark"] .about-modal { - background: var(--color-bg-surface); -} - -[data-theme="dark"] .about-modal h2 { - color: var(--color-text-heading); -} - -[data-theme="dark"] .about-modal .about-version, -[data-theme="dark"] .about-modal .about-description { - color: var(--color-text-faint); -} - -[data-theme="dark"] .about-modal .about-tech-badge { - background: var(--color-border); - border-color: var(--color-dark-mid); - color: var(--color-text-dark); -} - -[data-theme="dark"] .modal-overlay { - background-color: var(--color-overlay-mid); -} - -[data-theme="dark"] .modal-container { - background-color: var(--color-bg-surface); - box-shadow: 0 8px 32px var(--color-shadow-5xl); -} - -[data-theme="dark"] .modal-header { - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .modal-header h3 { - color: var(--color-text-heading); -} - -[data-theme="dark"] .modal-close-btn { - background: var(--color-border); - color: var(--color-text-faint); -} - -[data-theme="dark"] .modal-close-btn:hover { - background: var(--color-dark-mid); - color: var(--color-border); -} - -[data-theme="dark"] .modal-body label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .modal-input { - border-color: var(--color-border); - background: var(--color-bg-input); - color: var(--color-text); -} - -[data-theme="dark"] .modal-input:focus { - border-color: var(--color-accent); - background: var(--color-bg-input); -} - -[data-theme="dark"] .modal-input::placeholder { - color: var(--color-dark-mid); -} - -[data-theme="dark"] .modal-footer { - background: var(--color-bg-hover); - border-top-color: var(--color-border); -} - -[data-theme="dark"] .modal-footer .btn-secondary { - background: var(--color-border); - border-color: var(--color-dark-mid); - color: var(--color-text-dark); -} - -[data-theme="dark"] .modal-footer .btn-secondary:hover { - background: var(--color-dark-mid); -} - -/* ── multiSelect.css ── */ -[data-theme="dark"] .list-header-checkbox input, -[data-theme="dark"] .file-item .checkbox-cell input, -[data-theme="dark"] .file-item .checkbox-cell input { - accent-color: var(--color-accent); -} - -[data-theme="dark"] .batch-selection-bar { - background-color: var(--color-multiselect-bg); - border-color: var(--color-multiselect-border); - color: var(--color-text); -} - -[data-theme="dark"] .list-header.selection-mode { - background-color: var(--color-bg-page); - border-bottom-color: var(--color-multiselect-border); - color: var(--color-text); -} - -[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); -} - -/* ── uploadDropdown.css ── */ -[data-theme="dark"] .upload-dropdown-menu { - background: var(--color-bg-surface); - border-color: var(--color-border); - box-shadow: 0 8px 24px var(--color-shadow-5xl); -} - -[data-theme="dark"] .upload-dropdown-item { - color: var(--color-text-dark); -} - -[data-theme="dark"] .upload-dropdown-item:hover { - background: var(--color-border); -} - -[data-theme="dark"] .upload-dropdown-item:active { - background: var(--color-border-medium); -} - -[data-theme="dark"] .upload-dropdown-item i { - color: var(--color-text-faint); -} - -/* ── userMenu.css ── */ -[data-theme="dark"] .user-menu { - background: var(--color-bg-surface); - border-color: var(--color-border); - box-shadow: 0 8px 30px var(--color-shadow-5xl); -} - -[data-theme="dark"] .user-menu-header { - background: var(--color-user-menu-header-bg); - border-bottom-color: var(--color-border); -} - -[data-theme="dark"] .user-menu-name { - color: var(--color-text-heading); -} - -[data-theme="dark"] .user-menu-email { - color: var(--color-text-subtle); -} - -[data-theme="dark"] .user-menu-storage-label { - color: var(--color-text-faint); -} - -[data-theme="dark"] .user-menu-storage-bar { - background: var(--color-border); -} - -[data-theme="dark"] .user-menu-storage-text { - color: var(--color-text-subtle); -} - -[data-theme="dark"] .user-menu-divider { - background: var(--color-border); -} - -[data-theme="dark"] .user-menu-item { - color: var(--color-text-dark); -} - -[data-theme="dark"] .user-menu-item:hover { - background: var(--color-border); -} - -[data-theme="dark"] .user-menu-item i { - color: var(--color-text-faint); -} - -[data-theme="dark"] .theme-toggle-pill { - background: var(--color-border-medium); -} - -[data-theme="dark"] .user-menu-admin { - color: var(--color-admin-blue); -} - -[data-theme="dark"] .user-menu-admin:hover { - background: var(--color-admin-blue-bg); -} - -[data-theme="dark"] .role-badge-admin { - background: var(--color-admin-blue-bg-sm); - color: var(--color-admin-blue); -} - -[data-theme="dark"] .user-menu-logout:hover { - background: var(--color-danger-hover-bg); -} - -/* ── inlineViewer.css ── */ -[data-theme="dark"] .inline-viewer-progress { - background: var(--color-progress-overlay-dark); -} - -[data-theme="dark"] .inline-viewer-progress-bar { - background: var(--color-border); -} - -[data-theme="dark"] .inline-viewer-progress-text { - color: var(--color-text-dark); -} - -/* ── 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 ── */ +/* FIXME avoir as much as possible specific cases */ [data-theme="dark"] .trash-actions button, [data-theme="dark"] .actions-cell button { background: var(--color-bg-surface); @@ -892,5 +116,6 @@ [data-theme="dark"] .trash-actions button:hover, [data-theme="dark"] .actions-cell button:hover { - background: var(--color-border); + background: var(--color-bg-alt); + color: var(--color-accent); } diff --git a/static/css/views/admin.css b/static/css/views/admin.css index 1820acc6..012bbebf 100644 --- a/static/css/views/admin.css +++ b/static/css/views/admin.css @@ -145,7 +145,7 @@ body { } .user-last-login-cell { font-size: 12px; - color: var(--color-text-faint); + color: var(--color-text); } /* ── Top Header Bar ── */ @@ -422,7 +422,7 @@ table { th { text-align: left; padding: 12px 16px; - background: var(--color-bg-hover); + background: var(--color-bg-subtle); color: var(--color-text-faint); font-size: 11px; text-transform: uppercase; @@ -440,7 +440,7 @@ tr:last-child td { border-bottom: none; } tr:hover { - background: var(--color-bg-off-white); + background: var(--color-bg-hover); } .user-info { display: flex; diff --git a/static/css/views/shared.css b/static/css/views/shared.css index 4b5444f8..380605b2 100644 --- a/static/css/views/shared.css +++ b/static/css/views/shared.css @@ -219,6 +219,7 @@ padding: 15px; border-bottom: 1px solid var(--color-border-xfaint); vertical-align: middle; + color: var(--color-text); } .shared-item-name {