:root {
--litepicker-container-months-color-bg: #fff;
--litepicker-container-months-box-shadow-color: #ddd;
--litepicker-footer-color-bg: #fafafa;
--litepicker-footer-box-shadow-color: #ddd;
--litepicker-tooltip-color-bg: #fff;
--litepicker-month-header-color: #333;
--litepicker-button-prev-month-color: #9e9e9e;
--litepicker-button-next-month-color: #9e9e9e;
--litepicker-button-prev-month-color-hover: #2196f3;
--litepicker-button-next-month-color-hover: #2196f3;
--litepicker-month-width: calc(var(--litepicker-day-width) * 7);
--litepicker-month-weekday-color: #9e9e9e;
--litepicker-month-week-number-color: #9e9e9e;
--litepicker-day-width: 38px;
--litepicker-day-color: #333;
--litepicker-day-color-hover: #2196f3;
--litepicker-is-today-color: #f44336;
--litepicker-is-in-range-color: #bbdefb;
--litepicker-is-locked-color: #9e9e9e;
--litepicker-is-start-color: #fff;
--litepicker-is-start-color-bg: #2196f3;
--litepicker-is-end-color: #fff;
--litepicker-is-end-color-bg: #2196f3;
--litepicker-button-cancel-color: #fff;
--litepicker-button-cancel-color-bg: #9e9e9e;
--litepicker-button-apply-color: #fff;
--litepicker-button-apply-color-bg: #2196f3;
--litepicker-button-reset-color: #909090;
--litepicker-button-reset-color-hover: #2196f3;
--litepicker-highlighted-day-color: #333;
--litepicker-highlighted-day-color-bg: #ffeb3b;
}
.show-week-numbers {
--litepicker-month-width: calc(var(--litepicker-day-width) * 8);
} .litepicker {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 0.8em;
display: none;
}
.litepicker button {
border: none;
background: none;
} .litepicker .container__main {
display: flex;
}
.litepicker .container__months {
display: flex;
flex-wrap: wrap;
background-color: var(--litepicker-container-months-color-bg);
border-radius: 5px;
box-shadow: 0 0 5px var(--litepicker-container-months-box-shadow-color);
width: calc(var(--litepicker-month-width) + 10px);
box-sizing: content-box;
}
.litepicker .container__months.columns-2 {
width: calc((var(--litepicker-month-width) * 2) + 20px);
}
.litepicker .container__months.columns-3 {
width: calc((var(--litepicker-month-width) * 3) + 30px);
}
.litepicker .container__months.columns-4 {
width: calc((var(--litepicker-month-width) * 4) + 40px);
} .litepicker .month-item {
padding: 5px;
width: var(--litepicker-month-width);
box-sizing: content-box;
}
.litepicker .month-item-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
padding: 10px 5px;
text-align: center;
color: var(--litepicker-month-header-color);
}
.litepicker .month-item-header .button-previous-month,
.litepicker .month-item-header .button-next-month {
visibility: hidden;
padding: 3px 5px;
border-radius: 3px;
cursor: default;
transition: color 0.3s;
}
.litepicker .month-item:first-child .button-previous-month {
visibility: visible;
}
.litepicker .month-item:last-child .button-next-month {
visibility: visible;
} .litepicker .container__days {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.litepicker .day-item {
width: var(--litepicker-day-width);
padding: 5px 0;
border-radius: 3px;
color: var(--litepicker-day-color);
cursor: default;
transition: color 0.3s, box-shadow 0.3s;
}
.litepicker .day-item:hover {
color: var(--litepicker-day-color-hover);
box-shadow: inset 0 0 0 1px var(--litepicker-day-color-hover);
}
.litepicker .day-item.is-today {
color: var(--litepicker-is-today-color);
}
.litepicker .day-item.is-in-range {
background-color: var(--litepicker-is-in-range-color);
border-radius: 0;
}
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
color: #fff;
background-color: var(--litepicker-is-start-color-bg);
} .litepicker .container__footer {
padding: 10px 5px;
text-align: right;
background-color: var(--litepicker-footer-color-bg);
box-shadow: inset 0 3px 3px var(--litepicker-footer-box-shadow-color);
border-radius: 0 0 5px 5px;
} .litepicker .container__tooltip {
position: absolute;
padding: 4px 8px;
font-size: 11px;
background-color: var(--litepicker-tooltip-color-bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 4px;
visibility: hidden;
}