hide copyright field as well, but make sure it's shown when we change maps and might...
[lantea.git] / style / lantea.css
... / ...
CommitLineData
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/. */
4
5body {
6 font-family: sans-serif;
7 margin: 0;
8}
9
10h1 {
11 display: none;
12}
13
14#menuArea {
15 position: absolute;
16 /* width: 30em; */
17 left: 1%;
18 top: 1em;
19 z-index: 5;
20}
21
22#zoomArea {
23 position: absolute;
24 right: 1%;
25 top: 1em;
26 z-index: 5;
27 text-align: center;
28}
29
30.overlayArea {
31 transition-property: opacity;
32 transition-duration: .2s;
33}
34
35.overlayArea.hidden {
36 opacity: 0;
37 transition-duration: 1s;
38}
39
40.overlayArea:-moz-system-metric(touch-enabled) {
41 font-size: 3mozmm;
42}
43
44.overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
45.overlayArea select:-moz-system-metric(touch-enabled) {
46 font-size: 2.5mozmm;
47}
48
49#zoomLevel {
50 background-color: rgba(255, 255, 255, .8);
51 border-radius: 3px;
52 padding: 0 3px;
53}
54
55
56#settingsArea,
57#trackArea {
58 display: none;
59 background-color: rgba(255, 255, 255, .8);
60 border: 0;
61 border-radius: 5px;
62}
63
64#settingsArea > legend,
65#trackArea > legend {
66 display: none;
67 background-color: rgba(255, 255, 255, .8);
68 border-radius: 3px;
69}
70
71#map {
72 border: 0;
73 top: 1px;
74 left: 1px;
75 right: 1px;
76 bottom: 1px;
77 z-index: 1;
78}
79
80#debug {
81 position: absolute;
82 bottom: 5px;
83 left: .5em;
84 margin: 0;
85 z-index: 3;
86 background-color: rgba(255, 255, 255, .8);
87 border-radius: 3px;
88 padding: 0 3px;
89}
90
91.debugHide {
92 display: none;
93}
94
95#copyright {
96 position: absolute;
97 bottom: 5px;
98 right: .5em;
99 margin: 0;
100 font-size: small;
101 opacity: .66;
102 z-index: 2;
103 background-color: rgba(255, 255, 255, 1);
104 border-radius: 3px;
105 padding: 0 3px;
106}
107
108#copyright.hidden {
109 opacity: 0;
110}
111
112@media screen and (max-width: 500px) {
113 body {
114 font-size: 10px;
115 }
116 #menuArea {
117 top: 1px;
118 left: 1px;
119 }
120 #zoomArea {
121 top: 1px;
122 right: 1px;
123 }
124 #copyright {
125 bottom: 1px;
126 right: 1px;
127 font-size: 8px;
128 }
129}