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 | ||
6d5072d8 RK |
19 | .debugHide { |
20 | display: none; | |
21 | } | |
22 | ||
23 | /* Main window UI areas */ | |
24 | #map, #track { | |
25 | position: fixed; | |
26 | border: 0; | |
27 | top: 0; | |
28 | left: 0; | |
29 | right: 0; | |
30 | bottom: 0; | |
31 | } | |
32 | ||
33 | #map { | |
34 | z-index: 1; | |
35 | } | |
36 | ||
37 | #track { | |
38 | z-index: 3; | |
39 | } | |
40 | ||
41 | .autoFade { | |
c5378747 | 42 | position: absolute; |
c5378747 | 43 | z-index: 5; |
7a549148 RK |
44 | transition-property: opacity; |
45 | transition-duration: .2s; | |
46 | } | |
47 | ||
6d5072d8 | 48 | .autoFade.hidden { |
7a549148 RK |
49 | opacity: 0; |
50 | transition-duration: 1s; | |
8f9306c5 | 51 | display: block; |
7a549148 RK |
52 | } |
53 | ||
8389557a RK |
54 | #menuArea { |
55 | /* width: 30em; */ | |
56 | left: 1%; | |
57 | top: 1em; | |
58 | } | |
59 | ||
60 | #zoomArea { | |
61 | right: 1%; | |
62 | top: 1em; | |
63 | text-align: center; | |
64 | } | |
65 | ||
6d5072d8 RK |
66 | .autoFade > input[type="button"], |
67 | .autoFade > .controlButton { | |
858b60b8 | 68 | font-size: 1.2em; |
ac45368e RK |
69 | font-weight: bold; |
70 | width: 2em; | |
71 | height: 2em; | |
72 | border-radius: 2em; | |
858b60b8 RK |
73 | background-color: rgba(255, 255, 255, .25); |
74 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
ac45368e | 75 | color: #0000FF; |
ed4c478c | 76 | border: none; |
28200143 RK |
77 | padding: 0; |
78 | margin: 0; | |
ed4c478c RK |
79 | } |
80 | ||
81 | #zoomArea > input[type="button"] { | |
ac45368e RK |
82 | border: 2px solid #0000FF; |
83 | } | |
84 | ||
6d5072d8 RK |
85 | .autoFade > input[type="button"]:hover, |
86 | .autoFade > .controlButton:hover { | |
ac45368e RK |
87 | background-color: rgba(255, 255, 255, .8); |
88 | } | |
89 | ||
6d5072d8 RK |
90 | .autoFade > input[type="button"]:active, |
91 | .autoFade > .controlButton:active { | |
ac45368e RK |
92 | background-color: rgba(255, 255, 127, .8); |
93 | } | |
94 | ||
6d5072d8 RK |
95 | .autoFade > input[type="button"]:focus, |
96 | .autoFade > .controlButton:focus { | |
858b60b8 RK |
97 | background-color: rgba(255, 255, 255, .5); |
98 | } | |
99 | ||
8389557a RK |
100 | #fullscreenArea { |
101 | right: 1%; | |
102 | bottom: 2em; | |
103 | text-align: center; | |
104 | } | |
105 | ||
b395419b | 106 | #zoomLevel { |
858b60b8 RK |
107 | /* background-color: rgba(255, 255, 255, .8); */ |
108 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
109 | border-radius: .5em; | |
110 | padding: .5em .2em; | |
ac45368e | 111 | margin: 2px 0; |
b395419b RK |
112 | } |
113 | ||
6d5072d8 RK |
114 | #action { |
115 | position: absolute; | |
116 | bottom: 5px; | |
117 | left: .5em; | |
118 | margin: 0; | |
119 | z-index: 3; | |
120 | background-color: rgba(255, 255, 255, .8); | |
121 | border-radius: 3px; | |
122 | padding: 0 3px; | |
123 | } | |
124 | ||
125 | #actionimg { | |
126 | vertical-align: text-bottom; | |
127 | } | |
128 | ||
129 | #copyright { | |
130 | bottom: 5px; | |
131 | right: .5em; | |
132 | margin: 0; | |
133 | font-size: .8em; | |
134 | opacity: .66; | |
135 | z-index: 2; | |
136 | background-color: rgba(255, 255, 255, 1); | |
137 | border-radius: 3px; | |
138 | padding: 0 3px; | |
139 | } | |
140 | ||
141 | #copyright.hidden { | |
142 | opacity: 0; | |
143 | display: block; | |
144 | } | |
145 | ||
740a3861 | 146 | /* non-standard touch screen detection for Mozilla browsers */ |
6d5072d8 RK |
147 | .overlayArea:-moz-system-metric(touch-enabled), |
148 | .menuDrawer:-moz-system-metric(touch-enabled) { | |
740a3861 | 149 | font-size: 3mm; |
6d5072d8 RK |
150 | font-size: 3mozmm; |
151 | } | |
740a3861 RK |
152 | /* Standard, Media Queries Level 4 touch screen detection */ |
153 | @media (pointer:coarse) { | |
154 | .overlayArea, | |
155 | .menuDrawer { | |
156 | font-size: 16px; | |
157 | } | |
158 | } | |
6d5072d8 RK |
159 | |
160 | .overlayArea input[type="button"], | |
161 | .overlayArea button, | |
162 | .overlayArea select, | |
163 | .menuDrawer input[type="button"], | |
164 | .menuDrawer button, | |
165 | .menuDrawer input[type="text"], | |
166 | .menuDrawer input[type="number"], | |
167 | .menuDrawer select { | |
168 | font-size: inherit; | |
169 | } | |
170 | ||
171 | /* Menu Drawers */ | |
123b3142 RK |
172 | .menuDrawer { |
173 | position: absolute; | |
174 | top: 0; | |
175 | bottom: 0; | |
6d5072d8 | 176 | overflow: auto; |
e2424f35 | 177 | transform: translateX(calc(-40ch - 1ch)); /* account for padding */ |
123b3142 | 178 | width: 40ch; |
4a6b0232 | 179 | max-width: 95%; /* make sure we don't overflow the screen */ |
b47b4a65 | 180 | border: 0; |
123b3142 RK |
181 | padding: 0 .5ch; /* account for legend */ |
182 | margin: 0; | |
183 | z-index: 10; | |
e2424f35 | 184 | transition-property: transform; |
123b3142 RK |
185 | transition-duration: 1s; |
186 | transition-timing-function: ease; | |
b47b4a65 RK |
187 | } |
188 | ||
123b3142 | 189 | .menuDrawer:not(.hidden) { |
e2424f35 | 190 | transform: translateX(0); |
123b3142 RK |
191 | } |
192 | ||
193 | @media screen and (max-width: 330px) { | |
194 | .menuDrawer { | |
0713fd6a | 195 | transform: translateX(calc(-300px - 1ch)); /* account for padding */ |
123b3142 RK |
196 | width: 300px; |
197 | } | |
198 | } | |
199 | ||
e180feb4 | 200 | .menuDrawer p { |
db2008ca RK |
201 | margin: .5em 0; |
202 | } | |
203 | ||
204 | /* Menu title */ | |
123b3142 RK |
205 | .menuDrawer > h2 { |
206 | font-size: 1.2em; | |
207 | font-weight: bold; | |
208 | margin: .5em 0; | |
db2008ca | 209 | background-color: #CCCCCC; |
123b3142 | 210 | color: #404040; |
b47b4a65 | 211 | border-radius: 3px; |
123b3142 RK |
212 | padding: 2px; |
213 | } | |
214 | ||
215 | .menuDrawer > h2 > img { | |
216 | vertical-align: text-top; | |
217 | height: 1.2em; | |
b47b4a65 RK |
218 | } |
219 | ||
46c03176 RK |
220 | /* For optical conveniece, display an "x" for closing. */ |
221 | .menuDrawer > h2:after { | |
222 | content: '\00D7'; /* multiplication sign */ | |
223 | display: inline-block; | |
224 | vertical-align: text-top; | |
225 | float: right; | |
226 | margin-top: 0; | |
227 | margin-right: .2em; | |
228 | font-size: .75em; | |
229 | } | |
230 | ||
6d5072d8 RK |
231 | .dialogHelp { |
232 | margin: .5em 0; | |
233 | font-size: .8em; | |
234 | opacity: .66; | |
235 | } | |
236 | ||
237 | #trackData { | |
238 | margin: 0; | |
239 | } | |
240 | ||
241 | #trackDialogArea { | |
242 | border-top: 2px solid; | |
243 | border-bottom: 2px solid; | |
244 | padding: 3px 0; | |
245 | } | |
246 | ||
247 | #uploadDesc { | |
248 | max-width: 95%; | |
249 | } | |
250 | ||
251 | /* Secondary UI: menu drawers, full screen overlays, etc. */ | |
252 | .secondaryUI { | |
253 | background-color: rgba(15, 15, 15, .9); | |
254 | color: #CCCCCC; | |
255 | } | |
256 | ||
db2008ca | 257 | /* Custom checkbox design */ |
6d5072d8 | 258 | .secondaryUI input[type="checkbox"] { |
db2008ca RK |
259 | display: none; |
260 | } | |
261 | ||
6d5072d8 | 262 | .secondaryUI input[type="checkbox"] + label:before { |
db2008ca RK |
263 | content: '\00A0'; /* non-breaking space */ |
264 | display: inline-block; | |
265 | width: 1.2em; | |
266 | height: 1.2em; | |
267 | margin-right: .3em; | |
268 | text-align: center; | |
269 | vertical-align: middle; | |
270 | background-color: rgba(204, 204, 204, .2); | |
271 | border: 1px solid #CCCCCC; | |
272 | border-radius: 3px; | |
273 | } | |
274 | ||
6d5072d8 | 275 | .secondaryUI input[type="checkbox"]:hover + label:before { |
db2008ca RK |
276 | background-color: rgba(204, 204, 204, .4); |
277 | border: 1px solid #FFFFFF; | |
278 | } | |
6d5072d8 | 279 | .secondaryUI input[type="checkbox"]:hover + label { |
db2008ca RK |
280 | color: #FFFFFF; |
281 | position:relative; | |
282 | height: 1.2em; | |
283 | } | |
284 | ||
6d5072d8 | 285 | .secondaryUI input[type="checkbox"]:active + label:before { |
db2008ca RK |
286 | background-color: rgba(204, 204, 255, .3); |
287 | border: 1px solid #FFCCAA; | |
288 | } | |
6d5072d8 | 289 | .secondaryUI input[type="checkbox"]:active + label { |
db2008ca RK |
290 | color: #FFCCAA; |
291 | } | |
292 | ||
6d5072d8 | 293 | .secondaryUI input[type="checkbox"]:checked + label:before { |
db2008ca RK |
294 | content: '\2714'; /* tick mark */ |
295 | } | |
296 | ||
297 | /* Custom button design */ | |
6d5072d8 RK |
298 | .secondaryUI input[type="button"], |
299 | .secondaryUI button { | |
db2008ca RK |
300 | text-align: center; |
301 | vertical-align: middle; | |
302 | background-image: none; | |
303 | background-color: rgba(204, 204, 204, .2); | |
304 | color: #CCCCCC; | |
305 | padding: 1px .5em; | |
306 | border: 1px solid #CCCCCC; | |
307 | border-radius: 3px; | |
308 | } | |
309 | ||
6d5072d8 RK |
310 | .secondaryUI input[type="button"]:disabled, |
311 | .secondaryUI button:disabled { | |
8f9306c5 RK |
312 | background-color: rgba(204, 204, 204, .1); |
313 | color: rgba(204, 204, 204, .5); | |
314 | border: 1px solid rgba(255, 255, 255, .5); | |
315 | } | |
316 | ||
6d5072d8 RK |
317 | .secondaryUI input[type="button"]:not(:disabled):hover, |
318 | .secondaryUI button:not(:disabled):hover { | |
db2008ca RK |
319 | background-color: rgba(204, 204, 204, .4); |
320 | border: 1px solid #FFFFFF; | |
321 | } | |
322 | ||
6d5072d8 RK |
323 | .secondaryUI input[type="button"]:not(:disabled):active, |
324 | .secondaryUI button:not(:disabled):active { | |
db2008ca RK |
325 | background-color: rgba(204, 204, 255, .3); |
326 | color: #FFCCAA; | |
327 | padding-top: 2px; | |
328 | padding-right: calc(.5em - 1px); | |
329 | padding-bottom: 0; | |
330 | padding-left: calc(.5em + 1px); | |
331 | } | |
332 | ||
333 | /* Custom select design */ | |
6d5072d8 | 334 | .secondaryUI select { |
db2008ca RK |
335 | text-align: left; |
336 | vertical-align: middle; | |
337 | background-image: none; | |
338 | background-color: rgba(204, 204, 204, .2); | |
339 | color: #CCCCCC; | |
340 | padding: 0 .5em; | |
341 | border: 1px solid #CCCCCC; | |
342 | border-radius: 3px; | |
343 | } | |
344 | ||
6d5072d8 | 345 | .secondaryUI select:hover { |
db2008ca RK |
346 | background-color: rgba(204, 204, 204, .4); |
347 | border: 1px solid #FFFFFF; | |
348 | } | |
349 | ||
6d5072d8 | 350 | .secondaryUI select:active { |
db2008ca RK |
351 | background-color: rgba(204, 204, 255, .3); |
352 | color: #FFCCAA; | |
353 | } | |
354 | ||
6d5072d8 | 355 | .secondaryUI option:checked:not(:hover) { |
db2008ca RK |
356 | background-color: rgba(204, 204, 204, .1); |
357 | } | |
358 | ||
6d5072d8 | 359 | .secondaryUI option:hover { |
db2008ca RK |
360 | background-color: #CCCCCC; |
361 | color: #404040; | |
362 | } | |
363 | ||
6d5072d8 RK |
364 | /* Custom textbox design */ |
365 | .secondaryUI input[type="text"], | |
366 | .secondaryUI input[type="number"] { | |
e180feb4 | 367 | font-size: 1em; |
65946832 RK |
368 | vertical-align: middle; |
369 | background-image: none; | |
370 | background-color: rgba(204, 204, 204, .7); | |
371 | color: #404040; | |
372 | padding: 1px .5em; | |
65946832 RK |
373 | border: 1px solid #CCCCCC; |
374 | border-radius: 3px; | |
375 | } | |
376 | ||
6d5072d8 | 377 | .secondaryUI input[type="text"] { |
65946832 RK |
378 | text-align: left; |
379 | } | |
380 | ||
6d5072d8 | 381 | .secondaryUI input[type="number"] { |
65946832 RK |
382 | text-align: right; |
383 | } | |
384 | ||
6d5072d8 RK |
385 | .secondaryUI input[type="text"]:disabled, |
386 | .secondaryUI input[type="number"]:disabled { | |
65946832 RK |
387 | background-color: rgba(204, 204, 204, .1); |
388 | color: rgba(204, 204, 204, .5); | |
389 | border: 1px solid rgba(255, 255, 255, .5); | |
390 | } | |
391 | ||
6d5072d8 RK |
392 | .secondaryUI input[type="text"]:not(:disabled):hover, |
393 | .secondaryUI input[type="number"]:not(:disabled):hover { | |
65946832 RK |
394 | border: 1px solid #FFFFFF; |
395 | } | |
396 | ||
6d5072d8 RK |
397 | .secondaryUI input[type="text"]:not(:disabled):focus, |
398 | .secondaryUI input[type="number"]:not(:disabled):focus { | |
65946832 RK |
399 | background-color: rgba(204, 204, 255, .8); |
400 | border: 1px solid #FFFFFF; | |
401 | color: #202020; | |
402 | } | |
403 | ||
6d5072d8 RK |
404 | /* custom style for paragraphs and links */ |
405 | .secondaryUI p.subTitle { | |
e180feb4 RK |
406 | margin: .75em 0 .5em; |
407 | font-weight: bold; | |
408 | } | |
409 | ||
6d5072d8 RK |
410 | .secondaryUI a:link { |
411 | color: #DDDDDD; | |
7a076538 RK |
412 | } |
413 | ||
6d5072d8 RK |
414 | .secondaryUI a:visited { |
415 | color: #AAAAAA; | |
ecde0af2 RK |
416 | } |
417 | ||
6d5072d8 RK |
418 | .secondaryUI a:hover { |
419 | color: #FFFFFF; | |
b5c85133 | 420 | } |
1e48ccb4 | 421 | |
3b76e071 RK |
422 | .overlayArea .minorbutton { |
423 | font-size: 75%; | |
424 | border: none !important; | |
425 | padding: 0 2px; | |
426 | } | |
427 | .overlayArea .minorbutton:not(:disabled):active { | |
428 | padding: 0 1px 0 3px; | |
429 | } | |
430 | .overlayArea .statusmsg { | |
431 | font-size: 75%; | |
432 | } | |
433 | .overlayArea .statusmsg.error { | |
434 | color: #FF8080; | |
435 | } | |
436 | ||
662078d1 RK |
437 | #loginerror { |
438 | color: red; | |
439 | font-weight: bold; | |
440 | padding: .5em; | |
441 | } | |
442 | ||
e1c3d337 | 443 | /* dialog area - for loading error and welcome messages */ |
43255174 | 444 | #dialogArea { |
e1c3d337 | 445 | position: absolute; |
43255174 RK |
446 | top: 20%; |
447 | right: 0; | |
448 | left: 0; | |
e1c3d337 | 449 | width: 50ch; |
43255174 RK |
450 | max-width: 92%; |
451 | z-index: 10; | |
452 | background-color: rgba(255, 255, 255, .8); | |
453 | border: 0; | |
454 | margin: auto; | |
455 | padding: .5em; | |
456 | border-radius: 5px; | |
457 | } | |
458 | ||
459 | #dialogArea.hidden { | |
e1c3d337 | 460 | top: -1000%; |
8f9306c5 | 461 | display: block; |
43255174 RK |
462 | } |
463 | ||
e1c3d337 RK |
464 | .dialogTitle { |
465 | margin: 0 0 .5em; | |
466 | font-weight: bold; | |
467 | } | |
468 | ||
469 | .dialogButtonLine { | |
470 | text-align: center; | |
471 | } | |
472 | ||
6d5072d8 RK |
473 | /* full screen overlay - library, etc. */ |
474 | .fullScreenOverlay { | |
475 | position: absolute; | |
867ee0af RK |
476 | top: 1%; |
477 | bottom: 1%; | |
478 | right: 1%; | |
479 | left: 1%; | |
480 | z-index: 10; | |
6d5072d8 | 481 | background-color: rgba(15, 15, 15, 1.0); |
867ee0af RK |
482 | border: 0; |
483 | margin: auto; | |
484 | padding: .5em; | |
485 | border-radius: 5px; | |
486 | } | |
487 | ||
6d5072d8 | 488 | .fullScreenOverlay.hidden { |
28200143 | 489 | top: -1000%; |
867ee0af RK |
490 | bottom: auto; |
491 | height: 90%; | |
492 | display: block; | |
493 | } | |
494 | ||
6d5072d8 | 495 | .fullScreenOverlay > .closeButtonContainer { |
867ee0af | 496 | position: absolute; |
6d5072d8 | 497 | top: 0; |
867ee0af RK |
498 | right: 0; |
499 | margin: 0; | |
6d5072d8 | 500 | padding: 0.5em; |
867ee0af RK |
501 | text-align: right; |
502 | } | |
6d5072d8 RK |
503 | /* |
504 | .fullScreenOverlay > .closeButtonContainer > .closeButton { | |
505 | font-size: 2em; | |
d7ffc7b8 | 506 | } |
6d5072d8 | 507 | */ |
d7ffc7b8 | 508 | |
34402ca5 RK |
509 | .fullScreenOverlay p { |
510 | margin: 0.5em 0; | |
511 | } | |
512 | ||
513 | .fullScreenOverlay > p:first-child { | |
514 | margin-top: 0; | |
515 | /* leave space for close button */ | |
516 | margin-right: 1.5em; | |
517 | } | |
518 | ||
519 | #libTrackList { | |
520 | overflow: auto; | |
521 | /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */ | |
522 | height: calc(100% - 5em); | |
523 | } | |
524 | ||
525 | #libTrackPages { | |
526 | margin-bottom: 0; | |
527 | } | |
528 | ||
6d5072d8 | 529 | /* small screen media adaptations */ |
0a41c294 RK |
530 | @media screen and (max-width: 500px), |
531 | screen and (max-height: 500px) { | |
f84a3fd4 RK |
532 | body { |
533 | font-size: 10px; | |
534 | } | |
336097e2 | 535 | #menuArea { |
8028e42b RK |
536 | top: 2px; |
537 | left: 2px; | |
0c08f848 | 538 | } |
336097e2 | 539 | #zoomArea { |
8028e42b RK |
540 | top: 2px; |
541 | right: 2px; | |
336097e2 | 542 | } |
c5378747 | 543 | #fullscreenArea { |
8028e42b | 544 | right: 2px; |
0a41c294 | 545 | bottom: 20px; |
c5378747 | 546 | } |
a9c9022b | 547 | #copyright { |
f84a3fd4 RK |
548 | bottom: 1px; |
549 | right: 1px; | |
1e48ccb4 RK |
550 | } |
551 | } |