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