Enhance calendar layout and duty list rendering
- Introduced a sticky header for the calendar to improve navigation. - Updated the duty list display to highlight today's date with a distinct style. - Added new CSS styles for better visual presentation of duty days and improved layout consistency.
This commit is contained in:
@@ -73,6 +73,19 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: var(--bg);
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.calendar-sticky.is-scrolled {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
@@ -215,6 +228,26 @@ body {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.duty-list-day {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.duty-list-day--today .duty-list-day-title {
|
||||
color: var(--today);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.duty-list-day--today .duty-list-day-title::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 1em;
|
||||
background: var(--today);
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.duty-item {
|
||||
display: grid;
|
||||
grid-template-columns: 5.5em 1fr;
|
||||
|
||||
Reference in New Issue
Block a user