Add current time indicator to week view

- Add real-time current time indicator that updates every 5 seconds
- Display horizontal line with dot and time label on current day only
- Position indicator accurately based on time increment mode (15/30 min)
- Use theme-aware colors with subdued gray styling for dark mode
- Include subtle shadows and proper z-indexing for visibility

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-05 10:33:07 -04:00
parent bbad327ea2
commit efbaea5ac1
2 changed files with 118 additions and 0 deletions

View File

@@ -1052,6 +1052,76 @@ body {
background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important;
}
/* Current Time Indicator */
.current-time-indicator-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 20;
}
.current-time-indicator {
position: absolute;
left: 0;
right: 0;
height: 2px;
z-index: 20;
display: flex;
align-items: center;
pointer-events: none;
}
.current-time-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary-color, #667eea);
position: absolute;
left: -4px;
z-index: 21;
flex-shrink: 0;
}
.current-time-line {
flex: 1;
height: 2px;
background-color: var(--primary-color, #667eea);
position: relative;
}
.current-time-label {
position: absolute;
right: -50px;
top: -10px;
background-color: var(--primary-color, #667eea);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Dark theme override for current time indicator */
[data-theme="dark"] .current-time-dot {
background-color: #9ca3af;
box-shadow: 0 0 6px rgba(156, 163, 175, 0.4);
}
[data-theme="dark"] .current-time-line {
background-color: #9ca3af;
box-shadow: 0 1px 3px rgba(156, 163, 175, 0.3);
}
[data-theme="dark"] .current-time-label {
background-color: #6b7280;
box-shadow: 0 2px 8px rgba(107, 114, 128, 0.4);
}
/* Legacy Week Grid (for backward compatibility) */
.week-grid {
display: grid;