--colon-width: 2rem;
--day-period-spacing-width: 1rem;
--calendar-width: 23.1rem;
- --date-picker-item-height: 2.4rem;
+ --date-picker-item-height: 2.5rem;
+ --date-picker-item-width: 3.3rem;
--border: 0.1rem solid #9C9CFF;
--border-radius: 0.3rem;
--font-color: #FF9F00;
--fill-color: #000000;
+ --today-fill-color: #008484;
+
--selected-font-color: #000000;
--selected-fill-color: #008484;
--button-font-color-active: #FF9F00;
--button-fill-color-active: #000000;
- --weekday-font-color: #6C6C6C;
- --weekday-outside-font-color: #6C6C6C;
- --weekend-font-color: #DA4E44;
- --weekend-outside-font-color: #FF988F;
+ --weekday-header-font-color: #FF9F00;
+ --weekend-header-font-color: #FF0000;
+
+ --weekend-font-color: #FF0000;
+ --weekday-outside-font-color: #A09090;
+ --weekend-outside-font-color: #E7ADE7;
+
+ --weekday-disabled-font-color: rgba(255, 159, 0, 0.2);
+ --weekend-disabled-font-color: rgba(255, 0, 0, 0.2);
+ --disabled-fill-color: rgba(160, 144, 144, 0.8);
--disabled-opacity: 0.2;
}
.nav > button {
width: 3rem;
height: var(--date-picker-item-height);
- filter: url("chrome://global/skin/filters.svg#fill");
+ -moz-context-properties: fill;
fill: var(--button-font-color);
}
fill: var(--button-font-color-active);
}
-.nav > button.left {
- background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
+.nav > button.prev,
+.nav > button.next:dir(rtl) {
+ background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
}
-.nav > button.right {
- background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
+.nav > button.next,
+.nav > button.prev:dir(rtl) {
+ background: url("chrome://global/skin/icons/calendar-arrow-right.svg") no-repeat 50% 50%;
}
.month-year-container {
content: "";
width: 2.6rem;
height: 1.6rem;
- background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
- filter: url("chrome://global/skin/filters.svg#fill");
+ background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
+ -moz-context-properties: fill;
fill: var(--button-font-color);
}
button.month-year.active::after {
- background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+ background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
}
.month-year-view {
}
.week-header > div {
- color: var(--weekday-font-color);
+ color: var(--weekday-header-font-color);
}
.week-header > div.weekend {
- color: var(--weekend-font-color);
+ color: var(--weekend-header-font-color);
}
.days-viewport {
align-items: center;
display: flex;
height: var(--date-picker-item-height);
- margin: 0.05rem 0.15rem;
position: relative;
justify-content: center;
- width: 3rem;
+ width: var(--date-picker-item-width);
}
-.days-view > div.outside {
+.days-view > .outside {
color: var(--weekday-outside-font-color);
}
-.days-view > div.weekend {
+.days-view > .weekend {
color: var(--weekend-font-color);
}
-.days-view > div.weekend.outside {
+.days-view > .weekend.outside {
color: var(--weekend-outside-font-color);
}
+.days-view > .out-of-range {
+ color: var(--weekday-disabled-font-color);
+ background: var(--disabled-fill-color);
+}
+
+.days-view > .out-of-range.weekend {
+ color: var(--weekend-disabled-font-color);
+}
+
+.days-view > .out-of-range::before {
+ display: none;
+}
+
+.days-view > div:hover::before,
+.days-view > .select::before,
+.days-view > .today::before {
+ top: 5%;
+ bottom: 5%;
+ left: 5%;
+ right: 5%;
+}
+
#time-picker,
.month-year-view {
display: flex;
.spinner-container > button {
height: var(--spinner-button-height);
- filter: url("chrome://global/skin/filters.svg#fill");
+ -moz-context-properties: fill;
fill: var(--button-font-color);
}
}
.spinner-container > button.up {
- background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+ background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
}
.spinner-container > button.down {
- background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
+ background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
}
.spinner-container.hide-buttons > button {
scroll-snap-coordinate: 0 0;
}
+.spinner-container > .spinner > div::before,
+.calendar-container .days-view > div::before {
+ position: absolute;
+ top: 5%;
+ bottom: 5%;
+ left: 5%;
+ right: 5%;
+ z-index: -10;
+ border-radius: var(--border-radius);
+}
+
.spinner-container > .spinner > div:hover::before,
.calendar-container .days-view > div:hover::before {
background: var(--fill-color);
border: var(--border);
- border-radius: var(--border-radius);
content: "";
- position: absolute;
- top: 0%;
- bottom: 0%;
- left: 0%;
- right: 0%;
- z-index: -10;
}
.spinner-container > .spinner:not(.scrolling) > div.selection,
-.calendar-container .days-view > div.selection {
+.calendar-container .days-view > div.selection:not(.out-of-range) {
color: var(--selected-font-color);
}
.calendar-container .days-view > div.selection::before {
background: var(--selected-fill-color);
border: none;
- border-radius: var(--border-radius);
content: "";
- position: absolute;
- top: 0%;
- bottom: 0%;
- left: 0%;
- right: 0%;
- z-index: -10;
}
.spinner-container > .spinner > div.disabled::before,