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.4rem;
17 --border: 0.1rem solid #9999CC;
18 --border-radius: 0.3rem;
19 --border-active-color: #666699;
21 --font-color: #000000;
22 --fill-color: #CCD0DD;
24 --selected-font-color: #FFFFFF;
25 --selected-fill-color: #336699;
27 --button-font-color: #666699;
28 --button-font-color-hover: #6666CC;
29 --button-font-color-active: #9999CC;
30 --button-fill-color-active: #000000;
32 --weekday-font-color: #6C6C6C;
33 --weekday-outside-font-color: #6C6C6C;
34 --weekend-font-color: #DA4E44;
35 --weekend-outside-font-color: #FF988F;
37 --disabled-opacity: 0.2;
46 color: var(--font-color);
48 font-size: var(--font-size-default);
52 -moz-appearance: none;
59 width: var(--calendar-width);
61 margin-bottom: 0.8rem;
62 justify-content: space-between;
67 height: var(--date-picker-item-height);
68 filter: url("chrome://global/skin/filters.svg#fill");
69 fill: var(--button-font-color);
73 fill: var(--button-font-color-hover);
76 .nav > button.active {
77 fill: var(--button-font-color-active);
81 background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
85 background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
88 .month-year-container {
91 justify-content: center;
97 height: var(--date-picker-item-height);
103 border: var(--border);
104 border-radius: 0.3rem;
106 padding-bottom: 0.2rem;
107 padding-inline-start: 1.2rem;
108 padding-inline-end: 2.6rem;
111 button.month-year:hover {
112 background: var(--fill-color);
115 button.month-year.active {
116 border-color: var(--border-active-color);
117 background: var(--button-fill-color-active);
120 button.month-year::after {
125 background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
126 filter: url("chrome://global/skin/filters.svg#fill");
127 fill: var(--button-font-color);
130 button.month-year.active::after {
131 background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
141 width: var(--calendar-width);
144 transition: opacity 0.15s;
147 .month-year-view.hidden {
152 .month-year-view > .spinner-container {
157 .month-year-view .spinner {
158 transform: scaleY(1);
159 transform-origin: top;
160 transition: transform 0.15s;
163 .month-year-view.hidden .spinner {
164 transform: scaleY(0);
168 .month-year-view .spinner > div {
169 transform: scaleY(1);
170 transition: transform 0.15s;
173 .month-year-view.hidden .spinner > div {
174 transform: scaleY(2.5);
178 .order-month-year > #spinner-month,
179 .order-year-month > #spinner-year {
183 .order-month-year > #spinner-year,
184 .order-year-month > #spinner-month {
188 .calendar-container {
191 flex-direction: column;
192 width: var(--calendar-width);
200 color: var(--weekday-font-color);
203 .week-header > div.weekend {
204 color: var(--weekend-font-color);
224 height: var(--date-picker-item-height);
225 margin: 0.05rem 0.15rem;
227 justify-content: center;
231 .days-view > div.outside {
232 color: var(--weekday-outside-font-color);
235 .days-view > div.weekend {
236 color: var(--weekend-font-color);
239 .days-view > div.weekend.outside {
240 color: var(--weekend-outside-font-color);
247 justify-content: center;
252 flex-direction: column;
253 width: var(--spinner-width);
256 .spinner-container > button {
257 height: var(--spinner-button-height);
258 filter: url("chrome://global/skin/filters.svg#fill");
259 fill: var(--button-font-color);
262 .spinner-container > button:hover {
263 fill: var(--button-font-color-hover);
266 .spinner-container > button.active {
267 fill: var(--button-font-color-active);
270 .spinner-container > button.up {
271 background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
274 .spinner-container > button.down {
275 background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
278 .spinner-container.hide-buttons > button {
282 .spinner-container > .spinner {
285 margin: var(--spinner-margin-top-bottom) 0;
288 scroll-snap-type: mandatory;
289 scroll-snap-points-y: repeat(100%);
292 .spinner-container > .spinner > div {
293 box-sizing: border-box;
296 padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
297 margin-bottom: var(--spinner-item-margin-bottom);
298 height: var(--spinner-item-height);
299 -moz-user-select: none;
300 scroll-snap-coordinate: 0 0;
303 .spinner-container > .spinner > div:hover::before,
304 .calendar-container .days-view > div:hover::before {
305 background: var(--fill-color);
306 border: var(--border);
307 border-radius: var(--border-radius);
317 .spinner-container > .spinner:not(.scrolling) > div.selection,
318 .calendar-container .days-view > div.selection {
319 color: var(--selected-font-color);
322 .spinner-container > .spinner > div.selection::before,
323 .calendar-container .days-view > div.selection::before {
324 background: var(--selected-fill-color);
326 border-radius: var(--border-radius);
336 .spinner-container > .spinner > div.disabled::before,
337 .spinner-container > .spinner.scrolling > div.selection::before,
338 .spinner-container > .spinner.scrolling > div:hover::before {
342 .spinner-container > .spinner > div.disabled {
343 opacity: var(--disabled-opacity);
348 justify-content: center;
350 width: var(--colon-width);
351 margin-bottom: 0.3rem;
355 width: var(--day-period-spacing-width);