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