feat: enhance calendar styling for today and holiday events
All checks were successful
CI / lint-and-test (push) Successful in 22s
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user