feat: enhance calendar styling for today and holiday events
All checks were successful
CI / lint-and-test (push) Successful in 22s

- Added CSS styles for the "today" cell to visually distinguish it with a solid background and border when it has external events.
- Updated the margin for day elements to improve layout consistency.
- Introduced new styles for duty, unavailable, vacation, and event indicator dots on the "today" cell to enhance visual contrast and clarity.
- Improved overall calendar aesthetics to better represent different event types.
This commit is contained in:
2026-02-21 00:16:10 +03:00
parent 4824450088
commit bf8ac87a73

View File

@@ -176,6 +176,13 @@ body {
border: 1px solid color-mix(in srgb, var(--today) 35%, transparent); border: 1px solid color-mix(in srgb, var(--today) 35%, transparent);
} }
/* Today + external calendar: same solid "today" look as weekday, plus a border to show it has external events */
.day.today.holiday {
background: var(--today);
color: var(--bg);
border: 1px solid color-mix(in srgb, var(--bg) 50%, transparent);
}
.day { .day {
cursor: pointer; cursor: pointer;
} }
@@ -185,7 +192,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
margin-top: 2px; margin-top: 6px;
} }
.day-indicator-dot { .day-indicator-dot {
@@ -211,6 +218,20 @@ body {
background: var(--accent); background: var(--accent);
} }
/* On "today" cell: dots darkened for contrast on --today background */
.day.today .day-indicator-dot.duty {
background: color-mix(in srgb, var(--duty) 65%, var(--bg));
}
.day.today .day-indicator-dot.unavailable {
background: color-mix(in srgb, var(--unavailable) 65%, var(--bg));
}
.day.today .day-indicator-dot.vacation {
background: color-mix(in srgb, var(--vacation) 65%, var(--bg));
}
.day.today .day-indicator-dot.events {
background: color-mix(in srgb, var(--accent) 65%, var(--bg));
}
/* === Day detail panel (popover / bottom sheet) */ /* === Day detail panel (popover / bottom sheet) */
/* Блокировка фона при открытом bottom sheet: прокрутка и свайпы отключены */ /* Блокировка фона при открытом bottom sheet: прокрутка и свайпы отключены */
body.day-detail-sheet-open { body.day-detail-sheet-open {