switch to matomo domain as well
[lantea.git] / style / lantea.css
CommitLineData
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
5body {
6 font-family: sans-serif;
b47b4a65 7 margin: 0;
68afcd96 8 background: url("loading.png") repeat;
b47b4a65
RK
9}
10
11h1 {
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}