.system-calendar {
/* width: 400px; */
/* width: 100%; */
background: #fff;
padding: 0 10px;
border-radius: 8px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
/* padding: 16px; */
/* font-family: system-ui, -apple-system, sans-serif; */
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.navigation {
display: flex;
align-items: center;
gap: 8px;
}
.month-year {
display: flex;
gap: 4px;
span {
font-size: 22px;
}
}
.year-select,
.month-select {
border: 1px solid #ddd;
border-radius: 4px;
padding: 4px 8px;
font-size: 18px;
}
.today-btn {
background: #0078d4;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
margin: 10px;
}
.left {
.arrow-btn {
border: none;
background: none;
font-size: 28px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.arrow-btn:hover {
background: #f0f0f0;
}
.pre {
margin-right: 10px;
}
}
.today-btn:hover {
// background: #006cbd;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 8px;
}
.weekday {
text-align: center;
font-size: 18px;
color: #666;
padding: 4px;
/* border: 1px solid red; */
text-align: left;
}
.weekday.weekend {
/* color: #d13438; */
}
.date-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.date-cell {
aspect-ratio: 1;
padding: 4px;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
/* border: 1px solid red; */
height: 46px;
}
.date-cell:hover {
background: #f0f0f0;
}
.date-cell.other-month {
// color: #999;
}
.date-cell.today {
/* background: #d13438; */
background: #8c2c2f;
color: white;
}
.date-cell.today .lunar {
color: rgba(255, 255, 255, 0.8);
}
.date-cell.selected {
// background: #8c2c2f;
// color: white;
border: 1px solid #8c2c2f;
box-sizing: border-box;
/* background: #e5f1fb; */
// .lunar {
// // color: white;
// margin-bottom: 6px;
// }
}
.date-cell.weekend:not(.other-month) {
/* color: #d13438; */
}
.solar {
font-size: 18px;
font-weight: 500;
}
.lunar {
font-size: 16px;
color: #666;
margin-top: 2px;
}
.other-month .lunar {
/* color: #aaa; */
}
