1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 --font-size-default: 1.1rem;
8 --spinner-margin-top-bottom: 0.4rem;
9 --spinner-item-height: 2.4rem;
10 --spinner-item-margin-bottom: 0.1rem;
11 --spinner-button-height: 1.2rem;
13 --day-period-spacing-width: 1rem;
14 --calendar-width: 23.1rem;
15 --date-picker-item-height: 2.5rem;
16 --date-picker-item-width: 3.3rem;
18 --border: 0.1rem solid #9999CC;
19 --border-radius: 0.3rem;
20 --border-active-color: #666699;
22 --font-color: #000000;
23 --fill-color: #CCD0DD;
25 --today-fill-color: #33FF33;
27 --selected-font-color: #FFFFFF;
28 --selected-fill-color: #336699;
30 --button-font-color: #666699;
31 --button-font-color-hover: #6666CC;
32 --button-font-color-active: #9999CC;
33 --button-fill-color-active: #000000;
35 --weekday-header-font-color: #6C6C6C;
36 --weekend-header-font-color: rgb(218, 78, 68);
38 --weekend-font-color: rgb(218, 78, 68);
39 --weekday-outside-font-color: rgb(153, 153, 153);
40 --weekend-outside-font-color: rgb(255, 152, 143);
42 --weekday-disabled-font-color: rgba(25, 25, 25, 0.2);
43 --weekend-disabled-font-color: rgba(218, 78, 68, 0.2);
44 --disabled-fill-color: rgba(235, 235, 235, 0.8);
46 --disabled-opacity: 0.2;
55 color: var(--font-color);
57 font-size: var(--font-size-default);
61 -moz-appearance: none;
68 width: var(--calendar-width);
70 margin-bottom: 0.8rem;
71 justify-content: space-between;
76 height: var(--date-picker-item-height);
77 -moz-context-properties: fill;
78 fill: var(--button-font-color);
82 fill: var(--button-font-color-hover);
85 .nav > button.active {
86 fill: var(--button-font-color-active);
90 .nav > button.next:dir(rtl) {
91 background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
95 .nav > button.prev:dir(rtl) {
96 background: url("chrome://global/skin/icons/calendar-arrow-right.svg") no-repeat 50% 50%;
99 .month-year-container {
102 justify-content: center;
108 height: var(--date-picker-item-height);
114 border: var(--border);
115 border-radius: 0.3rem;
117 padding-bottom: 0.2rem;
118 padding-inline-start: 1.2rem;
119 padding-inline-end: 2.6rem;
122 button.month-year:hover {
123 background: var(--fill-color);
126 button.month-year.active {
127 border-color: var(--border-active-color);
128 background: var(--button-fill-color-active);
131 button.month-year::after {
136 background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
137 -moz-context-properties: fill;
138 fill: var(--button-font-color);
141 button.month-year.active::after {
142 background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
152 width: var(--calendar-width);
155 transition: opacity 0.15s;
158 .month-year-view.hidden {
163 .month-year-view > .spinner-container {
168 .month-year-view .spinner {
169 transform: scaleY(1);
170 transform-origin: top;
171 transition: transform 0.15s;
174 .month-year-view.hidden .spinner {
175 transform: scaleY(0);
179 .month-year-view .spinner > div {
180 transform: scaleY(1);
181 transition: transform 0.15s;
184 .month-year-view.hidden .spinner > div {
185 transform: scaleY(2.5);
189 .order-month-year > #spinner-month,
190 .order-year-month > #spinner-year {
194 .order-month-year > #spinner-year,
195 .order-year-month > #spinner-month {
199 .calendar-container {
202 flex-direction: column;
203 width: var(--calendar-width);
211 color: var(--weekday-header-font-color);
214 .week-header > div.weekend {
215 color: var(--weekend-header-font-color);
235 height: var(--date-picker-item-height);
237 justify-content: center;
238 width: var(--date-picker-item-width);
241 .days-view > .outside {
242 color: var(--weekday-outside-font-color);
245 .days-view > .weekend {
246 color: var(--weekend-font-color);
249 .days-view > .weekend.outside {
250 color: var(--weekend-outside-font-color);
253 .days-view > .out-of-range {
254 color: var(--weekday-disabled-font-color);
255 background: var(--disabled-fill-color);
258 .days-view > .out-of-range.weekend {
259 color: var(--weekend-disabled-font-color);
262 .days-view > .out-of-range::before {
266 .days-view > div:hover::before,
267 .days-view > .select::before,
268 .days-view > .today::before {
279 justify-content: center;
284 flex-direction: column;
285 width: var(--spinner-width);
288 .spinner-container > button {
289 height: var(--spinner-button-height);
290 -moz-context-properties: fill;
291 fill: var(--button-font-color);
294 .spinner-container > button:hover {
295 fill: var(--button-font-color-hover);
298 .spinner-container > button.active {
299 fill: var(--button-font-color-active);
302 .spinner-container > button.up {
303 background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
306 .spinner-container > button.down {
307 background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
310 .spinner-container.hide-buttons > button {
314 .spinner-container > .spinner {
317 margin: var(--spinner-margin-top-bottom) 0;
320 scroll-snap-type: mandatory;
321 scroll-snap-points-y: repeat(100%);
324 .spinner-container > .spinner > div {
325 box-sizing: border-box;
328 padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
329 margin-bottom: var(--spinner-item-margin-bottom);
330 height: var(--spinner-item-height);
331 -moz-user-select: none;
332 scroll-snap-coordinate: 0 0;
335 .spinner-container > .spinner > div::before,
336 .calendar-container .days-view > div::before {
343 border-radius: var(--border-radius);
346 .spinner-container > .spinner > div:hover::before,
347 .calendar-container .days-view > div:hover::before {
348 background: var(--fill-color);
349 border: var(--border);
353 .spinner-container > .spinner:not(.scrolling) > div.selection,
354 .calendar-container .days-view > div.selection:not(.out-of-range) {
355 color: var(--selected-font-color);
358 .spinner-container > .spinner > div.selection::before,
359 .calendar-container .days-view > div.selection::before {
360 background: var(--selected-fill-color);
365 .spinner-container > .spinner > div.disabled::before,
366 .spinner-container > .spinner.scrolling > div.selection::before,
367 .spinner-container > .spinner.scrolling > div:hover::before {
371 .spinner-container > .spinner > div.disabled {
372 opacity: var(--disabled-opacity);
377 justify-content: center;
379 width: var(--colon-width);
380 margin-bottom: 0.3rem;
384 width: var(--day-period-spacing-width);