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