2025-04-18 11:21:47 +03:00

173 lines
4.0 KiB
CSS

.calendar-dropdown-widget *,
.calendar-dropdown-widget *:before,
.calendar-dropdown-widget *:after {
box-sizing: border-box;
}
.calendar-dropdown-widget {
margin: 0 auto;
overflow: hidden;
width: 100%;
}
.calendar-dropdown-widget .calendar-btn {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: button;
appearance: none;
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: x-large;
line-height: normal;
min-width: 27px;
outline: none;
overflow: visible;
padding: 0;
text-align: center;
}
.calendar-dropdown-widget .calendar-header {
align-items: center;
display: flex;
padding: 0 0.5rem 0.5rem 0.5rem;
}
.calendar-dropdown-widget .calendar-header>div {
display: flex;
justify-content: center;
flex-grow: 1;
}
.calendar-dropdown-widget .calendar-header input[type="number"] {
appearance: textfield !important;
}
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.calendar-dropdown-widget .calendar-header select {
cursor: pointer;
}
.calendar-dropdown-widget .calendar-header input,
.calendar-dropdown-widget .calendar-header .dropdown-toggle {
appearance: none;
text-align: center;
border: 0;
border-left: unset;
background-color: var(--menu-background-color);
font-weight: bold;
outline: 0;
}
.calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
border: unset;
/* Disable the dropdown arrow */
}
.calendar-dropdown-widget .calendar-week {
display: flex;
flex-wrap: wrap;
}
.calendar-dropdown-widget .calendar-week span {
flex-direction: column;
flex: 0 0 12.5%;
font-size: 1rem;
font-weight: bold;
max-width: 12.5%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
}
.calendar-dropdown-widget .calendar-body {
display: flex;
flex-wrap: wrap;
}
.calendar-dropdown-widget .calendar-week-number {
color: var(--muted-text-color) !important;
position: relative;
}
.calendar-dropdown-widget .calendar-week-number::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background-color: var(--main-border-color);
z-index: 2;
}
.calendar-dropdown-widget .calendar-week-number-disabled {
align-items: center;
color: var(--main-text-color);
display: flex;
flex-direction: column;
flex: 0 0 12.5%;
max-width: 12.5%;
padding: 0.4rem 0;
font-size: 120%;
}
.calendar-dropdown-widget .calendar-date {
align-items: center;
color: var(--main-text-color);
display: flex;
flex-direction: column;
flex: 0 0 12.5%;
max-width: 12.5%;
padding: 0.4rem 0;
font-size: 120%;
}
.calendar-dropdown-widget .calendar-date:hover {
color: var(--hover-item-text-color);
background-color: var(--hover-item-background-color);
text-decoration: underline;
}
.calendar-dropdown-widget .calendar-date-active {
background-color: var(--active-item-background-color);
color: var(--active-item-text-color);
}
.calendar-dropdown-widget .calendar-date-today {
font-weight: bold;
}
.calendar-dropdown-widget a {
text-decoration: none;
}
.calendar-dropdown-widget .calendar-date-exists {
text-decoration: underline !important;
}
.calendar-dropdown-widget .calendar-date:not(.calendar-date-active) {
cursor: pointer;
}
.calendar-dropdown-widget .calendar-date-prev-month,
.calendar-dropdown-widget .calendar-date-next-month {
color: var(--muted-text-color);
opacity: 0.6;
}
.calendar-dropdown-widget .calendar-date-prev-month:hover,
.calendar-dropdown-widget .calendar-date-next-month:hover {
opacity: 1;
background-color: var(--hover-item-background-color);
color: var(--hover-item-text-color);
text-decoration: underline;
}