jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive dark mode support with UI consistency fixes

Browse Source 
This commit introduces a complete dark mode implementation across the entire application,
along with various UI consistency improvements and mobile responsiveness fixes.

Dark Mode Implementation:
- Added new dark-mode.css with comprehensive CSS variable system
- Implemented theme switcher with localStorage persistence
- Created dark mode color palette optimized for readability
- Added smooth transitions between light and dark themes

Component-Specific Dark Mode Styling:
- Headers: Added glowing gradient effects with animations (pulse, shimmer)
- Tables: Unified table styling across all views with proper dark mode support
- Forms: Updated all form controls, inputs, and buttons for dark mode
- Cards: Fixed white backgrounds in project cards, stat cards, and activity items
- Navigation: Enhanced sidebar and mobile navigation dark mode styling
- Modals: Added dark mode support for all modal dialogs including task modal
- Charts: Updated chart colors for dark mode visibility

UI Consistency Improvements:
- Standardized container padding (1rem) across all pages
- Unified page widths (regular: 1400px, admin: 1600px)
- Fixed mobile bottom navigation to only show on devices ≤768px
- Resolved page header positioning inconsistencies
- Improved text contrast ratios for better accessibility

Table Consolidation:
- Created tables-consolidated.css for unified table styling
- Removed duplicate table styles across components
- Standardized table headers, borders, and hover states
- Added responsive table behavior for mobile devices

Mobile Improvements:
- Fixed splash screen viewport coverage
- Enhanced mobile menu accessibility
- Improved touch targets for mobile interactions
- Added proper mobile-specific dark mode adjustments

Technical Details:
- CSS variables for easy theme customization
- Proper specificity management with [data-theme="dark"] selectors
- Performance optimized with minimal repaints
- Browser compatibility for modern browsers

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jens Luedicke
2025-07-14 19:54:10 +02:00
parent 4264357d04
commit 80edb1be55
15 changed files with 4709 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
static/css/time-tracking.css
View File

@@ -767,4 +767,218 @@
.entries-table td {
padding: 0.5rem;
}
}
/* Dark Mode Styles for Time Tracking */
[data-theme="dark"] .timer-card {
background-color: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .timer-card.active {
border-color: var(--success-color);
background-color: var(--bg-card);
}
[data-theme="dark"] .timer-value {
color: var(--primary-color);
}
[data-theme="dark"] .timer-info {
background-color: var(--bg-secondary);
color: var(--text-secondary);
}
[data-theme="dark"] .timer-controls {
background-color: var(--bg-secondary);
border-color: var(--border-primary);
}
[data-theme="dark"] .btn-stop {
background-color: var(--error-color);
border-color: var(--error-color);
color: white;
}
[data-theme="dark"] .btn-stop:hover {
background-color: #ef4444;
border-color: #ef4444;
}
[data-theme="dark"] .entries-section {
background-color: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .entries-header {
border-color: var(--border-primary);
}
[data-theme="dark"] .filter-controls {
background-color: var(--bg-secondary);
border-color: var(--border-primary);
}
[data-theme="dark"] .search-input {
background-color: var(--bg-input);
border-color: var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .search-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(122, 141, 245, 0.1);
}
[data-theme="dark"] .entries-card {
background-color: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .entries-card:hover {
background-color: var(--bg-hover);
border-color: var(--primary-color);
}
[data-theme="dark"] .entry-header {
border-color: var(--border-secondary);
}
[data-theme="dark"] .entry-date {
color: var(--text-primary);
}
[data-theme="dark"] .entry-project {
background-color: var(--bg-tertiary);
color: var(--text-secondary);
}
[data-theme="dark"] .entry-time {
color: var(--text-tertiary);
}
[data-theme="dark"] .entry-duration {
background-color: var(--bg-tertiary);
color: var(--text-primary);
}
[data-theme="dark"] .entry-actions .btn {
background-color: var(--bg-secondary);
border-color: var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .entry-actions .btn:hover {
background-color: var(--bg-hover);
border-color: var(--border-hover);
}
[data-theme="dark"] .entry-actions .btn-danger {
background-color: transparent;
border-color: var(--error-color);
color: var(--error-color);
}
[data-theme="dark"] .entry-actions .btn-danger:hover {
background-color: var(--error-color);
color: white;
}
[data-theme="dark"] .entries-table {
background-color: var(--bg-card);
}
[data-theme="dark"] .entries-table thead {
background-color: var(--table-header-bg);
border-color: var(--border-primary);
}
[data-theme="dark"] .entries-table th {
color: var(--text-primary);
border-color: var(--border-primary);
}
[data-theme="dark"] .entries-table td {
border-color: var(--border-secondary);
color: var(--text-primary);
}
[data-theme="dark"] .entries-table tbody tr:hover {
background-color: var(--table-row-hover);
}
[data-theme="dark"] .total-row {
background-color: var(--bg-secondary);
border-color: var(--border-primary);
}
[data-theme="dark"] .modal {
background-color: rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .modal-content {
background-color: var(--bg-modal);
color: var(--text-primary);
}
[data-theme="dark"] .modal-header {
border-color: var(--border-primary);
}
[data-theme="dark"] .modal-title {
color: var(--text-primary);
}
[data-theme="dark"] .modal-close {
background-color: var(--bg-secondary);
color: var(--text-secondary);
}
[data-theme="dark"] .modal-close:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
[data-theme="dark"] .modal-footer {
border-color: var(--border-primary);
}
[data-theme="dark"] .form-label {
color: var(--text-secondary);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background-color: var(--bg-input);
border-color: var(--border-primary);
color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: var(--bg-input);
border-color: var(--primary-color);
color: var(--text-primary);
box-shadow: 0 0 0 3px rgba(122, 141, 245, 0.1);
}
[data-theme="dark"] .stats-grid {
gap: 1.5rem;
}
[data-theme="dark"] .stat-card {
background-color: var(--bg-card);
border-color: var(--border-primary);
}
[data-theme="dark"] .stat-icon {
background-color: var(--bg-secondary);
}
[data-theme="dark"] .stat-label {
color: var(--text-secondary);
}
[data-theme="dark"] .stat-value {
color: var(--text-primary);
}