add custom style for buttons, checkboxes and selects in menu drawer
[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 background: url("loading.png") repeat;
9}
10
11h1 {
12 display: none;
13}
14
15#dialogArea,
16.overlayArea {
17 position: absolute;
18 z-index: 5;
19 transition-property: opacity;
20 transition-duration: .2s;
21}
22
23#dialogArea.hidden,
24.overlayArea.hidden {
25 opacity: 0;
26 transition-duration: 1s;
27}
28
29#dialogArea:-moz-system-metric(touch-enabled),
30.overlayArea:-moz-system-metric(touch-enabled),
31.menuDrawer:-moz-system-metric(touch-enabled) {
32 font-size: 3mozmm;
33}
34
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;
43}
44
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
57#zoomArea > input[type="button"],
58#fullscreenArea > input[type="button"],
59#trackButton,
60#settingsButton {
61 font-size: 1.2em;
62 font-weight: bold;
63 width: 2em;
64 height: 2em;
65 border-radius: 2em;
66 background-color: rgba(255, 255, 255, .25);
67 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
68 color: #0000FF;
69 border: none;
70}
71
72#zoomArea > input[type="button"] {
73 border: 2px solid #0000FF;
74}
75
76#zoomArea > input[type="button"]:hover,
77#fullscreenArea > input[type="button"]:hover,
78#trackButton:hover,
79#settingsButton:hover {
80 background-color: rgba(255, 255, 255, .8);
81}
82
83#zoomArea > input[type="button"]:active,
84#fullscreenArea > input[type="button"]:active,
85#trackButton:active,
86#settingsButton:active {
87 background-color: rgba(255, 255, 127, .8);
88}
89
90#zoomArea > input[type="button"]:focus,
91#fullscreenArea > input[type="button"]:focus,
92#trackButton:focus,
93#settingsButton:focus {
94 background-color: rgba(255, 255, 255, .5);
95}
96
97#fullscreenArea {
98 right: 1%;
99 bottom: 2em;
100 text-align: center;
101}
102
103#zoomLevel {
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;
108 margin: 2px 0;
109}
110
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;
119 border: 0;
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;
126}
127
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
139.menuDrawer > p {
140 margin: .5em 0;
141}
142
143/* Menu title */
144.menuDrawer > h2 {
145 font-size: 1.2em;
146 font-weight: bold;
147 margin: .5em 0;
148 background-color: #CCCCCC;
149 color: #404040;
150 border-radius: 3px;
151 padding: 2px;
152}
153
154.menuDrawer > h2 > img {
155 vertical-align: text-top;
156 height: 1.2em;
157}
158
159/* Custom checkbox design */
160.menuDrawer input[type="checkbox"] {
161 display: none;
162}
163
164.menuDrawer input[type="checkbox"] + label:before {
165 content: '\00A0'; /* non-breaking space */
166 display: inline-block;
167 width: 1.2em;
168 height: 1.2em;
169 margin-right: .3em;
170 text-align: center;
171 vertical-align: middle;
172 background-color: rgba(204, 204, 204, .2);
173 border: 1px solid #CCCCCC;
174 border-radius: 3px;
175}
176
177.menuDrawer input[type="checkbox"]:hover + label:before {
178 background-color: rgba(204, 204, 204, .4);
179 border: 1px solid #FFFFFF;
180}
181.menuDrawer input[type="checkbox"]:hover + label {
182 color: #FFFFFF;
183 position:relative;
184 height: 1.2em;
185}
186
187.menuDrawer input[type="checkbox"]:active + label:before {
188 background-color: rgba(204, 204, 255, .3);
189 border: 1px solid #FFCCAA;
190}
191.menuDrawer input[type="checkbox"]:active + label {
192 color: #FFCCAA;
193}
194
195.menuDrawer input[type="checkbox"]:checked + label:before {
196 content: '\2714'; /* tick mark */
197}
198
199/* Custom button design */
200.menuDrawer input[type="button"] {
201 text-align: center;
202 vertical-align: middle;
203 background-image: none;
204 background-color: rgba(204, 204, 204, .2);
205 color: #CCCCCC;
206 padding: 1px .5em;
207 border: 1px solid #CCCCCC;
208 border-radius: 3px;
209}
210
211.menuDrawer input[type="button"]:hover {
212 background-color: rgba(204, 204, 204, .4);
213 border: 1px solid #FFFFFF;
214}
215
216.menuDrawer input[type="button"]:active {
217 background-color: rgba(204, 204, 255, .3);
218 color: #FFCCAA;
219 padding-top: 2px;
220 padding-right: calc(.5em - 1px);
221 padding-bottom: 0;
222 padding-left: calc(.5em + 1px);
223}
224
225/* Custom select design */
226.menuDrawer select {
227 text-align: left;
228 vertical-align: middle;
229 background-image: none;
230 background-color: rgba(204, 204, 204, .2);
231 color: #CCCCCC;
232 padding: 0 .5em;
233 border: 1px solid #CCCCCC;
234 border-radius: 3px;
235}
236
237.menuDrawer select:hover {
238 background-color: rgba(204, 204, 204, .4);
239 border: 1px solid #FFFFFF;
240}
241
242.menuDrawer select:active {
243 background-color: rgba(204, 204, 255, .3);
244 color: #FFCCAA;
245}
246
247.menuDrawer option:checked:not(:hover) {
248 background-color: rgba(204, 204, 204, .1);
249}
250
251.menuDrawer option:hover {
252 background-color: #CCCCCC;
253 color: #404040;
254}
255
256#trackData {
257 margin: 0;
258}
259
260#map, #track {
261 position: fixed;
262 border: 0;
263 top: 0;
264 left: 0;
265 right: 0;
266 bottom: 0;
267}
268
269#map {
270 z-index: 1;
271}
272
273#track {
274 z-index: 3;
275}
276
277#action {
278 position: absolute;
279 bottom: 5px;
280 left: .5em;
281 margin: 0;
282 z-index: 3;
283 background-color: rgba(255, 255, 255, .8);
284 border-radius: 3px;
285 padding: 0 3px;
286}
287
288#actionimg {
289 vertical-align: text-bottom;
290}
291
292.debugHide {
293 display: none;
294}
295
296.settingsSubTitle {
297 margin: .5em 0 0;
298 font-weight: bold;
299}
300
301#copyright {
302 bottom: 5px;
303 right: .5em;
304 margin: 0;
305 font-size: small;
306 opacity: .66;
307 z-index: 2;
308 background-color: rgba(255, 255, 255, 1);
309 border-radius: 3px;
310 padding: 0 3px;
311}
312
313#copyright.hidden {
314 opacity: 0;
315}
316
317#dialogArea {
318 top: 20%;
319 right: 0;
320 left: 0;
321 width: 30ch;
322 max-width: 92%;
323 z-index: 10;
324 background-color: rgba(255, 255, 255, .8);
325 border: 0;
326 margin: auto;
327 padding: .5em;
328 border-radius: 5px;
329}
330
331#dialogArea.hidden {
332 top: -100%;
333}
334
335.dialogTitle {
336 margin: 0 0 .5em;
337 font-weight: bold;
338}
339
340.dialogHelp {
341 margin: .5em 0;
342 font-size: small;
343 opacity: .66;
344}
345
346#uploadDesc {
347 max-width: 95%;
348}
349
350@media screen and (max-width: 500px),
351 screen and (max-height: 500px) {
352 body {
353 font-size: 10px;
354 }
355 #menuArea {
356 top: 2px;
357 left: 2px;
358 }
359 #zoomArea {
360 top: 2px;
361 right: 2px;
362 }
363 #fullscreenArea {
364 right: 2px;
365 bottom: 20px;
366 }
367 #copyright {
368 bottom: 1px;
369 right: 1px;
370 font-size: 8px;
371 }
372}