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; | |
95 | width: 17.1rem; | |
96 | height: var(--date-picker-item-height); | |
97 | z-index: 10; | |
98 | } | |
99 | ||
100 | button.month-year { | |
101 | font-size: 1.3rem; | |
102 | border: var(--border); | |
103 | border-radius: 0.3rem; | |
104 | padding: 0.2rem 2.6rem 0.2rem 1.2rem; | |
105 | } | |
106 | ||
107 | button.month-year:hover { | |
108 | background: var(--fill-color); | |
109 | } | |
110 | ||
111 | button.month-year.active { | |
112 | border-color: var(--border-active-color); | |
113 | background: var(--button-fill-color-active); | |
114 | } | |
115 | ||
116 | button.month-year::after { | |
117 | position: absolute; | |
118 | content: ""; | |
119 | width: 2.6rem; | |
120 | height: 1.6rem; | |
121 | background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; | |
122 | filter: url("chrome://global/skin/filters.svg#fill"); | |
123 | fill: var(--button-font-color); | |
124 | } | |
125 | ||
126 | button.month-year.active::after { | |
127 | background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; | |
128 | } | |
129 | ||
130 | .month-year-view { | |
131 | position: absolute; | |
132 | z-index: 5; | |
133 | padding-top: 3.2rem; | |
134 | top: 0; | |
135 | left: 0; | |
136 | bottom: 0; | |
137 | width: var(--calendar-width); | |
138 | background: window; | |
139 | opacity: 1; | |
140 | transition: opacity 0.15s; | |
141 | } | |
142 | ||
143 | .month-year-view.hidden { | |
144 | visibility: hidden; | |
145 | opacity: 0; | |
146 | } | |
147 | ||
148 | .month-year-view > .spinner-container { | |
149 | width: 5.5rem; | |
150 | margin: 0 0.5rem; | |
151 | } | |
152 | ||
153 | .month-year-view .spinner { | |
154 | transform: scaleY(1); | |
155 | transform-origin: top; | |
156 | transition: transform 0.15s; | |
157 | } | |
158 | ||
159 | .month-year-view.hidden .spinner { | |
160 | transform: scaleY(0); | |
161 | transition: none; | |
162 | } | |
163 | ||
164 | .month-year-view .spinner > div { | |
165 | transform: scaleY(1); | |
166 | transition: transform 0.15s; | |
167 | } | |
168 | ||
169 | .month-year-view.hidden .spinner > div { | |
170 | transform: scaleY(2.5); | |
171 | transition: none; | |
172 | } | |
173 | ||
174 | .order-month-year > #spinner-month, | |
175 | .order-year-month > #spinner-year { | |
176 | order: 1; | |
177 | } | |
178 | ||
179 | .order-month-year > #spinner-year, | |
180 | .order-year-month > #spinner-month { | |
181 | order: 2; | |
182 | } | |
183 | ||
184 | .calendar-container { | |
185 | cursor: default; | |
186 | display: flex; | |
187 | flex-direction: column; | |
188 | width: var(--calendar-width); | |
189 | } | |
190 | ||
191 | .week-header { | |
192 | display: flex; | |
193 | } | |
194 | ||
195 | .week-header > div { | |
196 | color: var(--weekday-font-color); | |
197 | } | |
198 | ||
199 | .week-header > div.weekend { | |
200 | color: var(--weekend-font-color); | |
201 | } | |
202 | ||
203 | .days-viewport { | |
204 | height: 15rem; | |
205 | overflow: hidden; | |
206 | position: relative; | |
207 | } | |
208 | ||
209 | .days-view { | |
210 | position: absolute; | |
211 | display: flex; | |
212 | flex-wrap: wrap; | |
213 | flex-direction: row; | |
214 | } | |
215 | ||
216 | .week-header > div, | |
217 | .days-view > div { | |
218 | align-items: center; | |
219 | display: flex; | |
220 | height: var(--date-picker-item-height); | |
221 | margin: 0.05rem 0.15rem; | |
222 | position: relative; | |
223 | justify-content: center; | |
224 | width: 3rem; | |
225 | } | |
226 | ||
227 | .days-view > div.outside { | |
228 | color: var(--weekday-outside-font-color); | |
229 | } | |
230 | ||
231 | .days-view > div.weekend { | |
232 | color: var(--weekend-font-color); | |
233 | } | |
234 | ||
235 | .days-view > div.weekend.outside { | |
236 | color: var(--weekend-outside-font-color); | |
237 | } | |
238 | ||
239 | #time-picker, | |
240 | .month-year-view { | |
241 | display: flex; | |
242 | flex-direction: row; | |
243 | justify-content: center; | |
244 | } | |
245 | ||
246 | .spinner-container { | |
247 | display: flex; | |
248 | flex-direction: column; | |
249 | width: var(--spinner-width); | |
250 | } | |
251 | ||
252 | .spinner-container > button { | |
253 | height: var(--spinner-button-height); | |
254 | filter: url("chrome://global/skin/filters.svg#fill"); | |
255 | fill: var(--button-font-color); | |
256 | } | |
257 | ||
258 | .spinner-container > button:hover { | |
259 | fill: var(--button-font-color-hover); | |
260 | } | |
261 | ||
262 | .spinner-container > button.active { | |
263 | fill: var(--button-font-color-active); | |
264 | } | |
265 | ||
266 | .spinner-container > button.up { | |
267 | background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; | |
268 | } | |
269 | ||
270 | .spinner-container > button.down { | |
271 | background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; | |
272 | } | |
273 | ||
274 | .spinner-container.hide-buttons > button { | |
275 | visibility: hidden; | |
276 | } | |
277 | ||
278 | .spinner-container > .spinner { | |
279 | position: relative; | |
280 | width: 100%; | |
281 | margin: var(--spinner-margin-top-bottom) 0; | |
282 | cursor: default; | |
283 | overflow-y: scroll; | |
284 | scroll-snap-type: mandatory; | |
285 | scroll-snap-points-y: repeat(100%); | |
286 | } | |
287 | ||
288 | .spinner-container > .spinner > div { | |
289 | box-sizing: border-box; | |
290 | position: relative; | |
291 | text-align: center; | |
292 | padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; | |
293 | margin-bottom: var(--spinner-item-margin-bottom); | |
294 | height: var(--spinner-item-height); | |
295 | -moz-user-select: none; | |
296 | scroll-snap-coordinate: 0 0; | |
297 | } | |
298 | ||
299 | .spinner-container > .spinner > div:hover::before, | |
300 | .calendar-container .days-view > div:hover::before { | |
301 | background: var(--fill-color); | |
302 | border: var(--border); | |
303 | border-radius: var(--border-radius); | |
304 | content: ""; | |
305 | position: absolute; | |
306 | top: 0%; | |
307 | bottom: 0%; | |
308 | left: 0%; | |
309 | right: 0%; | |
310 | z-index: -10; | |
311 | } | |
312 | ||
313 | .spinner-container > .spinner:not(.scrolling) > div.selection, | |
314 | .calendar-container .days-view > div.selection { | |
315 | color: var(--selected-font-color); | |
316 | } | |
317 | ||
318 | .spinner-container > .spinner > div.selection::before, | |
319 | .calendar-container .days-view > div.selection::before { | |
320 | background: var(--selected-fill-color); | |
321 | border: none; | |
322 | border-radius: var(--border-radius); | |
323 | content: ""; | |
324 | position: absolute; | |
325 | top: 0%; | |
326 | bottom: 0%; | |
327 | left: 0%; | |
328 | right: 0%; | |
329 | z-index: -10; | |
330 | } | |
331 | ||
332 | .spinner-container > .spinner > div.disabled::before, | |
333 | .spinner-container > .spinner.scrolling > div.selection::before, | |
334 | .spinner-container > .spinner.scrolling > div:hover::before { | |
335 | display: none; | |
336 | } | |
337 | ||
338 | .spinner-container > .spinner > div.disabled { | |
339 | opacity: var(--disabled-opacity); | |
340 | } | |
341 | ||
342 | .colon { | |
343 | display: flex; | |
344 | justify-content: center; | |
345 | align-items: center; | |
346 | width: var(--colon-width); | |
347 | margin-bottom: 0.3rem; | |
348 | } | |
349 | ||
350 | .spacer { | |
351 | width: var(--day-period-spacing-width); | |
352 | } |