feat: enhance duty timeline styling for improved visibility
- Added horizontal stripe and vertical tick indicators for today's date in the duty timeline, enhancing visual distinction. - Updated current duty card styling to ensure the left stripe matches the "Today" label, improving consistency in the user interface.
This commit is contained in:
@@ -205,6 +205,33 @@ html::-webkit-scrollbar {
|
|||||||
background: var(--muted);
|
background: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Duty list: timeline date cell (today) — horizontal stripe + vertical tick in today color (same geometry as non-today) */
|
||||||
|
.duty-timeline-date--today::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 5px;
|
||||||
|
width: calc(100% + var(--timeline-track-width) / 2);
|
||||||
|
height: 1px;
|
||||||
|
background: var(--today);
|
||||||
|
}
|
||||||
|
|
||||||
|
.duty-timeline-date--today::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: calc(100% + (var(--timeline-track-width) / 2) - 1px);
|
||||||
|
bottom: 2px;
|
||||||
|
width: 2px;
|
||||||
|
height: 7px;
|
||||||
|
background: var(--today);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Duty list: current duty card — ensure left stripe uses --today (matches "Today" label and date stripe) */
|
||||||
|
[data-current-duty] .border-l-today {
|
||||||
|
border-left-color: var(--today);
|
||||||
|
border-left-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Duty list: flip card (front = duty info, back = contacts) */
|
/* Duty list: flip card (front = duty info, back = contacts) */
|
||||||
.duty-flip-card {
|
.duty-flip-card {
|
||||||
perspective: 600px;
|
perspective: 600px;
|
||||||
|
|||||||
Reference in New Issue
Block a user