Commit | Line | Data |
---|---|---|
a7393a71 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 file, | |
3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
23cd2dcc RK |
4 | |
5 | body { | |
6 | font-family: sans-serif; | |
b47b4a65 | 7 | margin: 0; |
68afcd96 | 8 | background: url("loading.png") repeat; |
b47b4a65 RK |
9 | } |
10 | ||
11 | h1 { | |
12 | display: none; | |
13 | } | |
14 | ||
8f9306c5 RK |
15 | .hidden { |
16 | display: none; | |
17 | } | |
18 | ||
43255174 | 19 | #dialogArea, |
867ee0af | 20 | #libraryArea, |
8389557a | 21 | .overlayArea { |
c5378747 | 22 | position: absolute; |
c5378747 | 23 | z-index: 5; |
7a549148 RK |
24 | transition-property: opacity; |
25 | transition-duration: .2s; | |
26 | } | |
27 | ||
43255174 | 28 | #dialogArea.hidden, |
867ee0af | 29 | #libraryArea.hidden, |
7a549148 RK |
30 | .overlayArea.hidden { |
31 | opacity: 0; | |
32 | transition-duration: 1s; | |
8f9306c5 | 33 | display: block; |
7a549148 RK |
34 | } |
35 | ||
43255174 | 36 | #dialogArea:-moz-system-metric(touch-enabled), |
867ee0af | 37 | #libraryArea.hidden:-moz-system-metric(touch-enabled), |
123b3142 RK |
38 | .overlayArea:-moz-system-metric(touch-enabled), |
39 | .menuDrawer:-moz-system-metric(touch-enabled) { | |
ac788e28 RK |
40 | font-size: 3mozmm; |
41 | } | |
42 | ||
db2008ca | 43 | #dialogArea input[type="button"], |
8f9306c5 | 44 | #dialogArea button, |
db2008ca RK |
45 | #dialogArea input[type="text"], |
46 | #dialogArea select, | |
867ee0af RK |
47 | #libraryArea input[type="button"], |
48 | #libraryArea button, | |
db2008ca | 49 | .overlayArea input[type="button"], |
8f9306c5 | 50 | .overlayArea button, |
db2008ca RK |
51 | .overlayArea select, |
52 | .menuDrawer input[type="button"], | |
8f9306c5 | 53 | .menuDrawer button, |
867ee0af RK |
54 | .menuDrawer input[type="text"], |
55 | .menuDrawer input[type="number"], | |
db2008ca RK |
56 | .menuDrawer select { |
57 | font-size: inherit; | |
ac788e28 RK |
58 | } |
59 | ||
8389557a RK |
60 | #menuArea { |
61 | /* width: 30em; */ | |
62 | left: 1%; | |
63 | top: 1em; | |
64 | } | |
65 | ||
66 | #zoomArea { | |
67 | right: 1%; | |
68 | top: 1em; | |
69 | text-align: center; | |
70 | } | |
71 | ||
ed4c478c | 72 | #zoomArea > input[type="button"], |
8028e42b RK |
73 | #fullscreenArea > input[type="button"], |
74 | #trackButton, | |
75 | #settingsButton { | |
858b60b8 | 76 | font-size: 1.2em; |
ac45368e RK |
77 | font-weight: bold; |
78 | width: 2em; | |
79 | height: 2em; | |
80 | border-radius: 2em; | |
858b60b8 RK |
81 | background-color: rgba(255, 255, 255, .25); |
82 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
ac45368e | 83 | color: #0000FF; |
ed4c478c RK |
84 | border: none; |
85 | } | |
86 | ||
87 | #zoomArea > input[type="button"] { | |
ac45368e RK |
88 | border: 2px solid #0000FF; |
89 | } | |
90 | ||
ed4c478c | 91 | #zoomArea > input[type="button"]:hover, |
8028e42b RK |
92 | #fullscreenArea > input[type="button"]:hover, |
93 | #trackButton:hover, | |
94 | #settingsButton:hover { | |
ac45368e RK |
95 | background-color: rgba(255, 255, 255, .8); |
96 | } | |
97 | ||
ed4c478c | 98 | #zoomArea > input[type="button"]:active, |
8028e42b RK |
99 | #fullscreenArea > input[type="button"]:active, |
100 | #trackButton:active, | |
101 | #settingsButton:active { | |
ac45368e RK |
102 | background-color: rgba(255, 255, 127, .8); |
103 | } | |
104 | ||
ed4c478c | 105 | #zoomArea > input[type="button"]:focus, |
8028e42b RK |
106 | #fullscreenArea > input[type="button"]:focus, |
107 | #trackButton:focus, | |
108 | #settingsButton:focus { | |
858b60b8 RK |
109 | background-color: rgba(255, 255, 255, .5); |
110 | } | |
111 | ||
8389557a RK |
112 | #fullscreenArea { |
113 | right: 1%; | |
114 | bottom: 2em; | |
115 | text-align: center; | |
116 | } | |
117 | ||
b395419b | 118 | #zoomLevel { |
858b60b8 RK |
119 | /* background-color: rgba(255, 255, 255, .8); */ |
120 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
121 | border-radius: .5em; | |
122 | padding: .5em .2em; | |
ac45368e | 123 | margin: 2px 0; |
b395419b RK |
124 | } |
125 | ||
123b3142 RK |
126 | .menuDrawer { |
127 | position: absolute; | |
128 | top: 0; | |
129 | bottom: 0; | |
e2424f35 | 130 | transform: translateX(calc(-40ch - 1ch)); /* account for padding */ |
123b3142 | 131 | width: 40ch; |
4a6b0232 | 132 | max-width: 95%; /* make sure we don't overflow the screen */ |
123b3142 RK |
133 | background-color: rgba(15, 15, 15, .9); |
134 | color: #CCCCCC; | |
b47b4a65 | 135 | border: 0; |
123b3142 RK |
136 | padding: 0 .5ch; /* account for legend */ |
137 | margin: 0; | |
138 | z-index: 10; | |
e2424f35 | 139 | transition-property: transform; |
123b3142 RK |
140 | transition-duration: 1s; |
141 | transition-timing-function: ease; | |
b47b4a65 RK |
142 | } |
143 | ||
123b3142 | 144 | .menuDrawer:not(.hidden) { |
e2424f35 | 145 | transform: translateX(0); |
123b3142 RK |
146 | } |
147 | ||
148 | @media screen and (max-width: 330px) { | |
149 | .menuDrawer { | |
150 | left: calc(-300px - 1ch); /* account for padding */ | |
151 | width: 300px; | |
152 | } | |
153 | } | |
154 | ||
e180feb4 | 155 | .menuDrawer p { |
db2008ca RK |
156 | margin: .5em 0; |
157 | } | |
158 | ||
159 | /* Menu title */ | |
123b3142 RK |
160 | .menuDrawer > h2 { |
161 | font-size: 1.2em; | |
162 | font-weight: bold; | |
163 | margin: .5em 0; | |
db2008ca | 164 | background-color: #CCCCCC; |
123b3142 | 165 | color: #404040; |
b47b4a65 | 166 | border-radius: 3px; |
123b3142 RK |
167 | padding: 2px; |
168 | } | |
169 | ||
170 | .menuDrawer > h2 > img { | |
171 | vertical-align: text-top; | |
172 | height: 1.2em; | |
b47b4a65 RK |
173 | } |
174 | ||
46c03176 RK |
175 | /* For optical conveniece, display an "x" for closing. */ |
176 | .menuDrawer > h2:after { | |
177 | content: '\00D7'; /* multiplication sign */ | |
178 | display: inline-block; | |
179 | vertical-align: text-top; | |
180 | float: right; | |
181 | margin-top: 0; | |
182 | margin-right: .2em; | |
183 | font-size: .75em; | |
184 | } | |
185 | ||
db2008ca RK |
186 | /* Custom checkbox design */ |
187 | .menuDrawer input[type="checkbox"] { | |
188 | display: none; | |
189 | } | |
190 | ||
191 | .menuDrawer input[type="checkbox"] + label:before { | |
192 | content: '\00A0'; /* non-breaking space */ | |
193 | display: inline-block; | |
194 | width: 1.2em; | |
195 | height: 1.2em; | |
196 | margin-right: .3em; | |
197 | text-align: center; | |
198 | vertical-align: middle; | |
199 | background-color: rgba(204, 204, 204, .2); | |
200 | border: 1px solid #CCCCCC; | |
201 | border-radius: 3px; | |
202 | } | |
203 | ||
204 | .menuDrawer input[type="checkbox"]:hover + label:before { | |
205 | background-color: rgba(204, 204, 204, .4); | |
206 | border: 1px solid #FFFFFF; | |
207 | } | |
208 | .menuDrawer input[type="checkbox"]:hover + label { | |
209 | color: #FFFFFF; | |
210 | position:relative; | |
211 | height: 1.2em; | |
212 | } | |
213 | ||
214 | .menuDrawer input[type="checkbox"]:active + label:before { | |
215 | background-color: rgba(204, 204, 255, .3); | |
216 | border: 1px solid #FFCCAA; | |
217 | } | |
218 | .menuDrawer input[type="checkbox"]:active + label { | |
219 | color: #FFCCAA; | |
220 | } | |
221 | ||
222 | .menuDrawer input[type="checkbox"]:checked + label:before { | |
223 | content: '\2714'; /* tick mark */ | |
224 | } | |
225 | ||
226 | /* Custom button design */ | |
8f9306c5 RK |
227 | .menuDrawer input[type="button"], |
228 | .menuDrawer button { | |
db2008ca RK |
229 | text-align: center; |
230 | vertical-align: middle; | |
231 | background-image: none; | |
232 | background-color: rgba(204, 204, 204, .2); | |
233 | color: #CCCCCC; | |
234 | padding: 1px .5em; | |
235 | border: 1px solid #CCCCCC; | |
236 | border-radius: 3px; | |
237 | } | |
238 | ||
8f9306c5 RK |
239 | .menuDrawer input[type="button"]:disabled, |
240 | .menuDrawer button:disabled { | |
241 | background-color: rgba(204, 204, 204, .1); | |
242 | color: rgba(204, 204, 204, .5); | |
243 | border: 1px solid rgba(255, 255, 255, .5); | |
244 | } | |
245 | ||
246 | .menuDrawer input[type="button"]:not(:disabled):hover, | |
247 | .menuDrawer button:not(:disabled):hover { | |
db2008ca RK |
248 | background-color: rgba(204, 204, 204, .4); |
249 | border: 1px solid #FFFFFF; | |
250 | } | |
251 | ||
8f9306c5 RK |
252 | .menuDrawer input[type="button"]:not(:disabled):active, |
253 | .menuDrawer button:not(:disabled):active { | |
db2008ca RK |
254 | background-color: rgba(204, 204, 255, .3); |
255 | color: #FFCCAA; | |
256 | padding-top: 2px; | |
257 | padding-right: calc(.5em - 1px); | |
258 | padding-bottom: 0; | |
259 | padding-left: calc(.5em + 1px); | |
260 | } | |
261 | ||
262 | /* Custom select design */ | |
263 | .menuDrawer select { | |
264 | text-align: left; | |
265 | vertical-align: middle; | |
266 | background-image: none; | |
267 | background-color: rgba(204, 204, 204, .2); | |
268 | color: #CCCCCC; | |
269 | padding: 0 .5em; | |
270 | border: 1px solid #CCCCCC; | |
271 | border-radius: 3px; | |
272 | } | |
273 | ||
274 | .menuDrawer select:hover { | |
275 | background-color: rgba(204, 204, 204, .4); | |
276 | border: 1px solid #FFFFFF; | |
277 | } | |
278 | ||
279 | .menuDrawer select:active { | |
280 | background-color: rgba(204, 204, 255, .3); | |
281 | color: #FFCCAA; | |
282 | } | |
283 | ||
284 | .menuDrawer option:checked:not(:hover) { | |
285 | background-color: rgba(204, 204, 204, .1); | |
286 | } | |
287 | ||
288 | .menuDrawer option:hover { | |
289 | background-color: #CCCCCC; | |
290 | color: #404040; | |
291 | } | |
292 | ||
65946832 RK |
293 | .menuDrawer input[type="text"], |
294 | .menuDrawer input[type="number"] { | |
e180feb4 | 295 | font-size: 1em; |
65946832 RK |
296 | vertical-align: middle; |
297 | background-image: none; | |
298 | background-color: rgba(204, 204, 204, .7); | |
299 | color: #404040; | |
300 | padding: 1px .5em; | |
65946832 RK |
301 | border: 1px solid #CCCCCC; |
302 | border-radius: 3px; | |
303 | } | |
304 | ||
305 | .menuDrawer input[type="text"] { | |
306 | text-align: left; | |
307 | } | |
308 | ||
309 | .menuDrawer input[type="number"] { | |
310 | text-align: right; | |
311 | } | |
312 | ||
313 | .menuDrawer input[type="text"]:disabled, | |
314 | .menuDrawer input[type="number"]:disabled { | |
315 | background-color: rgba(204, 204, 204, .1); | |
316 | color: rgba(204, 204, 204, .5); | |
317 | border: 1px solid rgba(255, 255, 255, .5); | |
318 | } | |
319 | ||
320 | .menuDrawer input[type="text"]:not(:disabled):hover, | |
321 | .menuDrawer input[type="number"]:not(:disabled):hover { | |
322 | border: 1px solid #FFFFFF; | |
323 | } | |
324 | ||
325 | .menuDrawer input[type="text"]:not(:disabled):focus, | |
326 | .menuDrawer input[type="number"]:not(:disabled):focus { | |
327 | background-color: rgba(204, 204, 255, .8); | |
328 | border: 1px solid #FFFFFF; | |
329 | color: #202020; | |
330 | } | |
331 | ||
e180feb4 RK |
332 | .menuDrawer p.subTitle { |
333 | margin: .75em 0 .5em; | |
334 | font-weight: bold; | |
335 | } | |
336 | ||
7a076538 RK |
337 | #trackData { |
338 | margin: 0; | |
339 | } | |
340 | ||
e180feb4 RK |
341 | #trackDialogArea { |
342 | border-top: 2px solid; | |
343 | border-bottom: 2px solid; | |
344 | padding: 3px 0; | |
345 | } | |
346 | ||
ac6286bd | 347 | #map, #track { |
4b1d0915 | 348 | position: fixed; |
b47b4a65 | 349 | border: 0; |
c5378747 RK |
350 | top: 0; |
351 | left: 0; | |
352 | right: 0; | |
353 | bottom: 0; | |
ecde0af2 RK |
354 | } |
355 | ||
356 | #map { | |
b47b4a65 | 357 | z-index: 1; |
23cd2dcc RK |
358 | } |
359 | ||
ecde0af2 RK |
360 | #track { |
361 | z-index: 3; | |
362 | } | |
363 | ||
68afcd96 | 364 | #action { |
b395419b | 365 | position: absolute; |
6b1e7340 | 366 | bottom: 5px; |
b395419b RK |
367 | left: .5em; |
368 | margin: 0; | |
6b1e7340 RK |
369 | z-index: 3; |
370 | background-color: rgba(255, 255, 255, .8); | |
371 | border-radius: 3px; | |
372 | padding: 0 3px; | |
b395419b RK |
373 | } |
374 | ||
68afcd96 RK |
375 | #actionimg { |
376 | vertical-align: text-bottom; | |
377 | } | |
378 | ||
4b12da3a RK |
379 | .debugHide { |
380 | display: none; | |
381 | } | |
382 | ||
23cd2dcc | 383 | #copyright { |
6b1e7340 | 384 | bottom: 5px; |
23cd2dcc RK |
385 | right: .5em; |
386 | margin: 0; | |
65946832 | 387 | font-size: .8em; |
6b1e7340 RK |
388 | opacity: .66; |
389 | z-index: 2; | |
390 | background-color: rgba(255, 255, 255, 1); | |
391 | border-radius: 3px; | |
392 | padding: 0 3px; | |
23cd2dcc | 393 | } |
1e48ccb4 | 394 | |
b5c85133 RK |
395 | #copyright.hidden { |
396 | opacity: 0; | |
8f9306c5 | 397 | display: block; |
b5c85133 | 398 | } |
1e48ccb4 | 399 | |
43255174 RK |
400 | #dialogArea { |
401 | top: 20%; | |
402 | right: 0; | |
403 | left: 0; | |
404 | width: 30ch; | |
405 | max-width: 92%; | |
406 | z-index: 10; | |
407 | background-color: rgba(255, 255, 255, .8); | |
408 | border: 0; | |
409 | margin: auto; | |
410 | padding: .5em; | |
411 | border-radius: 5px; | |
412 | } | |
413 | ||
414 | #dialogArea.hidden { | |
415 | top: -100%; | |
8f9306c5 | 416 | display: block; |
43255174 RK |
417 | } |
418 | ||
419 | .dialogTitle { | |
420 | margin: 0 0 .5em; | |
421 | font-weight: bold; | |
422 | } | |
423 | ||
424 | .dialogHelp { | |
425 | margin: .5em 0; | |
65946832 | 426 | font-size: .8em; |
43255174 RK |
427 | opacity: .66; |
428 | } | |
429 | ||
867ee0af RK |
430 | #libraryArea { |
431 | top: 1%; | |
432 | bottom: 1%; | |
433 | right: 1%; | |
434 | left: 1%; | |
435 | z-index: 10; | |
436 | background-color: rgba(255, 255, 255, .95); | |
437 | border: 0; | |
438 | margin: auto; | |
439 | padding: .5em; | |
440 | border-radius: 5px; | |
441 | } | |
442 | ||
443 | #libraryArea.hidden { | |
444 | top: -100%; | |
445 | bottom: auto; | |
446 | height: 90%; | |
447 | display: block; | |
448 | } | |
449 | ||
450 | #libButtonLine { | |
451 | position: absolute; | |
452 | bottom: 0; | |
453 | left: 0; | |
454 | right: 0; | |
455 | margin: 0; | |
456 | padding: 0 0.5em 0.5em; | |
457 | text-align: right; | |
458 | } | |
459 | ||
d7ffc7b8 RK |
460 | #uploadDesc { |
461 | max-width: 95%; | |
462 | } | |
463 | ||
0a41c294 RK |
464 | @media screen and (max-width: 500px), |
465 | screen and (max-height: 500px) { | |
f84a3fd4 RK |
466 | body { |
467 | font-size: 10px; | |
468 | } | |
336097e2 | 469 | #menuArea { |
8028e42b RK |
470 | top: 2px; |
471 | left: 2px; | |
0c08f848 | 472 | } |
336097e2 | 473 | #zoomArea { |
8028e42b RK |
474 | top: 2px; |
475 | right: 2px; | |
336097e2 | 476 | } |
c5378747 | 477 | #fullscreenArea { |
8028e42b | 478 | right: 2px; |
0a41c294 | 479 | bottom: 20px; |
c5378747 | 480 | } |
a9c9022b | 481 | #copyright { |
f84a3fd4 RK |
482 | bottom: 1px; |
483 | right: 1px; | |
1e48ccb4 RK |
484 | } |
485 | } |