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