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);
}
/* 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 {
cursor: pointer;
}
@@ -185,7 +192,7 @@ body {
flex-wrap: wrap;
justify-content: center;
gap: 2px;
margin-top: 2px;
margin-top: 6px;
}
.day-indicator-dot {
@@ -211,6 +218,20 @@ body {
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) */
/* Блокировка фона при открытом bottom sheet: прокрутка и свайпы отключены */
body.day-detail-sheet-open {