Commit | Line | Data |
---|---|---|
987dae1b RK |
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/. */ | |
4 | ||
5 | :root { | |
6 | --font-size-default: 1.1rem; | |
7 | --spinner-width: 3rem; | |
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; | |
12 | --colon-width: 2rem; | |
13 | --day-period-spacing-width: 1rem; | |
14 | --calendar-width: 23.1rem; | |
dbad77ea RK |
15 | --date-picker-item-height: 2.5rem; |
16 | --date-picker-item-width: 3.3rem; | |
987dae1b RK |
17 | |
18 | --border: 0.1rem solid #9999CC; | |
19 | --border-radius: 0.3rem; | |
20 | --border-active-color: #666699; | |
21 | ||
22 | --font-color: #000000; | |
23 | --fill-color: #CCD0DD; | |
24 | ||
dbad77ea RK |
25 | --today-fill-color: #33FF33; |
26 | ||
987dae1b RK |
27 | --selected-font-color: #FFFFFF; |
28 | --selected-fill-color: #336699; | |
29 | ||
30 | --button-font-color: #666699; | |
31 | --button-font-color-hover: #6666CC; | |
32 | --button-font-color-active: #9999CC; | |
33 | --button-fill-color-active: #000000; | |
34 | ||
dbad77ea RK |
35 | --weekday-header-font-color: #6C6C6C; |
36 | --weekend-header-font-color: rgb(218, 78, 68); | |
37 | ||
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); | |
41 | ||
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); | |
987dae1b RK |
45 | |
46 | --disabled-opacity: 0.2; | |
47 | } | |
48 | ||
49 | html { | |
50 | font-size: 10px; | |
51 | } | |
52 | ||
53 | body { | |
54 | margin: 0; | |
55 | color: var(--font-color); | |
56 | font: message-box; | |
57 | font-size: var(--font-size-default); | |
58 | } | |
59 | ||
60 | button { | |
61 | -moz-appearance: none; | |
62 | background: none; | |
63 | border: none; | |
64 | } | |
65 | ||
66 | .nav { | |
67 | display: flex; | |
68 | width: var(--calendar-width); | |
69 | height: 2.4rem; | |
70 | margin-bottom: 0.8rem; | |
71 | justify-content: space-between; | |
72 | } | |
73 | ||
74 | .nav > button { | |
75 | width: 3rem; | |
76 | height: var(--date-picker-item-height); | |
dbad77ea | 77 | -moz-context-properties: fill; |
987dae1b RK |
78 | fill: var(--button-font-color); |
79 | } | |
80 | ||
81 | .nav > button:hover { | |
82 | fill: var(--button-font-color-hover); | |
83 | } | |
84 | ||
85 | .nav > button.active { | |
86 | fill: var(--button-font-color-active); | |
87 | } | |
88 | ||
dbad77ea RK |
89 | .nav > button.prev, |
90 | .nav > button.next:dir(rtl) { | |
91 | background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%; | |
987dae1b RK |
92 | } |
93 | ||
dbad77ea RK |
94 | .nav > button.next, |
95 | .nav > button.prev:dir(rtl) { | |
96 | background: url("chrome://global/skin/icons/calendar-arrow-right.svg") no-repeat 50% 50%; | |
987dae1b RK |
97 | } |
98 | ||
99 | .month-year-container { | |
100 | position: absolute; | |
101 | display: flex; | |
102 | justify-content: center; | |
103 | align-items: center; | |
104 | top: 0; | |
105 | left: 3rem; | |
0282321d | 106 | right: 3rem; |
987dae1b RK |
107 | width: 17.1rem; |
108 | height: var(--date-picker-item-height); | |
109 | z-index: 10; | |
110 | } | |
111 | ||
112 | button.month-year { | |
113 | font-size: 1.3rem; | |
114 | border: var(--border); | |
115 | border-radius: 0.3rem; | |
0282321d RK |
116 | padding-top: 0.2rem; |
117 | padding-bottom: 0.2rem; | |
118 | padding-inline-start: 1.2rem; | |
119 | padding-inline-end: 2.6rem; | |
987dae1b RK |
120 | } |
121 | ||
122 | button.month-year:hover { | |
123 | background: var(--fill-color); | |
124 | } | |
125 | ||
126 | button.month-year.active { | |
127 | border-color: var(--border-active-color); | |
128 | background: var(--button-fill-color-active); | |
129 | } | |
130 | ||
131 | button.month-year::after { | |
132 | position: absolute; | |
133 | content: ""; | |
134 | width: 2.6rem; | |
135 | height: 1.6rem; | |
dbad77ea RK |
136 | background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%; |
137 | -moz-context-properties: fill; | |
987dae1b RK |
138 | fill: var(--button-font-color); |
139 | } | |
140 | ||
141 | button.month-year.active::after { | |
dbad77ea | 142 | background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%; |
987dae1b RK |
143 | } |
144 | ||
145 | .month-year-view { | |
146 | position: absolute; | |
147 | z-index: 5; | |
148 | padding-top: 3.2rem; | |
149 | top: 0; | |
150 | left: 0; | |
151 | bottom: 0; | |
152 | width: var(--calendar-width); | |
153 | background: window; | |
154 | opacity: 1; | |
155 | transition: opacity 0.15s; | |
156 | } | |
157 | ||
158 | .month-year-view.hidden { | |
159 | visibility: hidden; | |
160 | opacity: 0; | |
161 | } | |
162 | ||
163 | .month-year-view > .spinner-container { | |
164 | width: 5.5rem; | |
165 | margin: 0 0.5rem; | |
166 | } | |
167 | ||
168 | .month-year-view .spinner { | |
169 | transform: scaleY(1); | |
170 | transform-origin: top; | |
171 | transition: transform 0.15s; | |
172 | } | |
173 | ||
174 | .month-year-view.hidden .spinner { | |
175 | transform: scaleY(0); | |
176 | transition: none; | |
177 | } | |
178 | ||
179 | .month-year-view .spinner > div { | |
180 | transform: scaleY(1); | |
181 | transition: transform 0.15s; | |
182 | } | |
183 | ||
184 | .month-year-view.hidden .spinner > div { | |
185 | transform: scaleY(2.5); | |
186 | transition: none; | |
187 | } | |
188 | ||
189 | .order-month-year > #spinner-month, | |
190 | .order-year-month > #spinner-year { | |
191 | order: 1; | |
192 | } | |
193 | ||
194 | .order-month-year > #spinner-year, | |
195 | .order-year-month > #spinner-month { | |
196 | order: 2; | |
197 | } | |
198 | ||
199 | .calendar-container { | |
200 | cursor: default; | |
201 | display: flex; | |
202 | flex-direction: column; | |
203 | width: var(--calendar-width); | |
204 | } | |
205 | ||
206 | .week-header { | |
207 | display: flex; | |
208 | } | |
209 | ||
210 | .week-header > div { | |
dbad77ea | 211 | color: var(--weekday-header-font-color); |
987dae1b RK |
212 | } |
213 | ||
214 | .week-header > div.weekend { | |
dbad77ea | 215 | color: var(--weekend-header-font-color); |
987dae1b RK |
216 | } |
217 | ||
218 | .days-viewport { | |
219 | height: 15rem; | |
220 | overflow: hidden; | |
221 | position: relative; | |
222 | } | |
223 | ||
224 | .days-view { | |
225 | position: absolute; | |
226 | display: flex; | |
227 | flex-wrap: wrap; | |
228 | flex-direction: row; | |
229 | } | |
230 | ||
231 | .week-header > div, | |
232 | .days-view > div { | |
233 | align-items: center; | |
234 | display: flex; | |
235 | height: var(--date-picker-item-height); | |
987dae1b RK |
236 | position: relative; |
237 | justify-content: center; | |
dbad77ea | 238 | width: var(--date-picker-item-width); |
987dae1b RK |
239 | } |
240 | ||
dbad77ea | 241 | .days-view > .outside { |
987dae1b RK |
242 | color: var(--weekday-outside-font-color); |
243 | } | |
244 | ||
dbad77ea | 245 | .days-view > .weekend { |
987dae1b RK |
246 | color: var(--weekend-font-color); |
247 | } | |
248 | ||
dbad77ea | 249 | .days-view > .weekend.outside { |
987dae1b RK |
250 | color: var(--weekend-outside-font-color); |
251 | } | |
252 | ||
dbad77ea RK |
253 | .days-view > .out-of-range { |
254 | color: var(--weekday-disabled-font-color); | |
255 | background: var(--disabled-fill-color); | |
256 | } | |
257 | ||
258 | .days-view > .out-of-range.weekend { | |
259 | color: var(--weekend-disabled-font-color); | |
260 | } | |
261 | ||
262 | .days-view > .out-of-range::before { | |
263 | display: none; | |
264 | } | |
265 | ||
266 | .days-view > div:hover::before, | |
267 | .days-view > .select::before, | |
268 | .days-view > .today::before { | |
269 | top: 5%; | |
270 | bottom: 5%; | |
271 | left: 5%; | |
272 | right: 5%; | |
273 | } | |
274 | ||
987dae1b RK |
275 | #time-picker, |
276 | .month-year-view { | |
277 | display: flex; | |
278 | flex-direction: row; | |
279 | justify-content: center; | |
280 | } | |
281 | ||
282 | .spinner-container { | |
283 | display: flex; | |
284 | flex-direction: column; | |
285 | width: var(--spinner-width); | |
286 | } | |
287 | ||
288 | .spinner-container > button { | |
289 | height: var(--spinner-button-height); | |
dbad77ea | 290 | -moz-context-properties: fill; |
987dae1b RK |
291 | fill: var(--button-font-color); |
292 | } | |
293 | ||
294 | .spinner-container > button:hover { | |
295 | fill: var(--button-font-color-hover); | |
296 | } | |
297 | ||
298 | .spinner-container > button.active { | |
299 | fill: var(--button-font-color-active); | |
300 | } | |
301 | ||
302 | .spinner-container > button.up { | |
dbad77ea | 303 | background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%; |
987dae1b RK |
304 | } |
305 | ||
306 | .spinner-container > button.down { | |
dbad77ea | 307 | background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%; |
987dae1b RK |
308 | } |
309 | ||
310 | .spinner-container.hide-buttons > button { | |
311 | visibility: hidden; | |
312 | } | |
313 | ||
314 | .spinner-container > .spinner { | |
315 | position: relative; | |
316 | width: 100%; | |
317 | margin: var(--spinner-margin-top-bottom) 0; | |
318 | cursor: default; | |
319 | overflow-y: scroll; | |
320 | scroll-snap-type: mandatory; | |
321 | scroll-snap-points-y: repeat(100%); | |
322 | } | |
323 | ||
324 | .spinner-container > .spinner > div { | |
325 | box-sizing: border-box; | |
326 | position: relative; | |
327 | text-align: center; | |
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; | |
333 | } | |
334 | ||
dbad77ea RK |
335 | .spinner-container > .spinner > div::before, |
336 | .calendar-container .days-view > div::before { | |
337 | position: absolute; | |
338 | top: 5%; | |
339 | bottom: 5%; | |
340 | left: 5%; | |
341 | right: 5%; | |
342 | z-index: -10; | |
343 | border-radius: var(--border-radius); | |
344 | } | |
345 | ||
987dae1b RK |
346 | .spinner-container > .spinner > div:hover::before, |
347 | .calendar-container .days-view > div:hover::before { | |
348 | background: var(--fill-color); | |
349 | border: var(--border); | |
987dae1b | 350 | content: ""; |
987dae1b RK |
351 | } |
352 | ||
353 | .spinner-container > .spinner:not(.scrolling) > div.selection, | |
dbad77ea | 354 | .calendar-container .days-view > div.selection:not(.out-of-range) { |
987dae1b RK |
355 | color: var(--selected-font-color); |
356 | } | |
357 | ||
358 | .spinner-container > .spinner > div.selection::before, | |
359 | .calendar-container .days-view > div.selection::before { | |
360 | background: var(--selected-fill-color); | |
361 | border: none; | |
987dae1b | 362 | content: ""; |
987dae1b RK |
363 | } |
364 | ||
365 | .spinner-container > .spinner > div.disabled::before, | |
366 | .spinner-container > .spinner.scrolling > div.selection::before, | |
367 | .spinner-container > .spinner.scrolling > div:hover::before { | |
368 | display: none; | |
369 | } | |
370 | ||
371 | .spinner-container > .spinner > div.disabled { | |
372 | opacity: var(--disabled-opacity); | |
373 | } | |
374 | ||
375 | .colon { | |
376 | display: flex; | |
377 | justify-content: center; | |
378 | align-items: center; | |
379 | width: var(--colon-width); | |
380 | margin-bottom: 0.3rem; | |
381 | } | |
382 | ||
383 | .spacer { | |
384 | width: var(--day-period-spacing-width); | |
385 | } |