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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user