still initial code for geo and map + basic ui stuff
[outofuni/glowingpatrol.git] / app / www / css / leaflet.css
1 /* required styles */\r
2 \r
3 .leaflet-map-pane,\r
4 .leaflet-tile,\r
5 .leaflet-marker-icon,\r
6 .leaflet-marker-shadow,\r
7 .leaflet-tile-pane,\r
8 .leaflet-tile-container,\r
9 .leaflet-overlay-pane,\r
10 .leaflet-shadow-pane,\r
11 .leaflet-marker-pane,\r
12 .leaflet-popup-pane,\r
13 .leaflet-overlay-pane svg,\r
14 .leaflet-zoom-box,\r
15 .leaflet-image-layer,\r
16 .leaflet-layer {\r
17         position: absolute;\r
18         left: 0;\r
19         top: 0;\r
20         }\r
21 .leaflet-container {\r
22         overflow: hidden;\r
23         -ms-touch-action: none;\r
24         touch-action: none;\r
25         }\r
26 .leaflet-tile,\r
27 .leaflet-marker-icon,\r
28 .leaflet-marker-shadow {\r
29         -webkit-user-select: none;\r
30            -moz-user-select: none;\r
31                 user-select: none;\r
32         -webkit-user-drag: none;\r
33         }\r
34 .leaflet-marker-icon,\r
35 .leaflet-marker-shadow {\r
36         display: block;\r
37         }\r
38 /* map is broken in FF if you have max-width: 100% on tiles */\r
39 .leaflet-container img {\r
40         max-width: none !important;\r
41         }\r
42 /* stupid Android 2 doesn't understand "max-width: none" properly */\r
43 .leaflet-container img.leaflet-image-layer {\r
44         max-width: 15000px !important;\r
45         }\r
46 .leaflet-tile {\r
47         filter: inherit;\r
48         visibility: hidden;\r
49         }\r
50 .leaflet-tile-loaded {\r
51         visibility: inherit;\r
52         }\r
53 .leaflet-zoom-box {\r
54         width: 0;\r
55         height: 0;\r
56         }\r
57 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
58 .leaflet-overlay-pane svg {\r
59         -moz-user-select: none;\r
60         }\r
61 \r
62 .leaflet-tile-pane    { z-index: 2; }\r
63 .leaflet-objects-pane { z-index: 3; }\r
64 .leaflet-overlay-pane { z-index: 4; }\r
65 .leaflet-shadow-pane  { z-index: 5; }\r
66 .leaflet-marker-pane  { z-index: 6; }\r
67 .leaflet-popup-pane   { z-index: 7; }\r
68 \r
69 .leaflet-vml-shape {\r
70         width: 1px;\r
71         height: 1px;\r
72         }\r
73 .lvml {\r
74         behavior: url(#default#VML);\r
75         display: inline-block;\r
76         position: absolute;\r
77         }\r
78 \r
79 \r
80 /* control positioning */\r
81 \r
82 .leaflet-control {\r
83         position: relative;\r
84         z-index: 7;\r
85         pointer-events: auto;\r
86         }\r
87 .leaflet-top,\r
88 .leaflet-bottom {\r
89         position: absolute;\r
90         z-index: 1000;\r
91         pointer-events: none;\r
92         }\r
93 .leaflet-top {\r
94         top: 0;\r
95         }\r
96 .leaflet-right {\r
97         right: 0;\r
98         }\r
99 .leaflet-bottom {\r
100         bottom: 0;\r
101         }\r
102 .leaflet-left {\r
103         left: 0;\r
104         }\r
105 .leaflet-control {\r
106         float: left;\r
107         clear: both;\r
108         }\r
109 .leaflet-right .leaflet-control {\r
110         float: right;\r
111         }\r
112 .leaflet-top .leaflet-control {\r
113         margin-top: 10px;\r
114         }\r
115 .leaflet-bottom .leaflet-control {\r
116         margin-bottom: 10px;\r
117         }\r
118 .leaflet-left .leaflet-control {\r
119         margin-left: 10px;\r
120         }\r
121 .leaflet-right .leaflet-control {\r
122         margin-right: 10px;\r
123         }\r
124 \r
125 \r
126 /* zoom and fade animations */\r
127 \r
128 .leaflet-fade-anim .leaflet-tile,\r
129 .leaflet-fade-anim .leaflet-popup {\r
130         opacity: 0;\r
131         -webkit-transition: opacity 0.2s linear;\r
132            -moz-transition: opacity 0.2s linear;\r
133              -o-transition: opacity 0.2s linear;\r
134                 transition: opacity 0.2s linear;\r
135         }\r
136 .leaflet-fade-anim .leaflet-tile-loaded,\r
137 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
138         opacity: 1;\r
139         }\r
140 \r
141 .leaflet-zoom-anim .leaflet-zoom-animated {\r
142         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
143            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
144              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);\r
145                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);\r
146         }\r
147 .leaflet-zoom-anim .leaflet-tile,\r
148 .leaflet-pan-anim .leaflet-tile,\r
149 .leaflet-touching .leaflet-zoom-animated {\r
150         -webkit-transition: none;\r
151            -moz-transition: none;\r
152              -o-transition: none;\r
153                 transition: none;\r
154         }\r
155 \r
156 .leaflet-zoom-anim .leaflet-zoom-hide {\r
157         visibility: hidden;\r
158         }\r
159 \r
160 \r
161 /* cursors */\r
162 \r
163 .leaflet-clickable {\r
164         cursor: pointer;\r
165         }\r
166 .leaflet-container {\r
167         cursor: -webkit-grab;\r
168         cursor:    -moz-grab;\r
169         }\r
170 .leaflet-popup-pane,\r
171 .leaflet-control {\r
172         cursor: auto;\r
173         }\r
174 .leaflet-dragging .leaflet-container,\r
175 .leaflet-dragging .leaflet-clickable {\r
176         cursor: move;\r
177         cursor: -webkit-grabbing;\r
178         cursor:    -moz-grabbing;\r
179         }\r
180 \r
181 \r
182 /* visual tweaks */\r
183 \r
184 .leaflet-container {\r
185         background: #ddd;\r
186         outline: 0;\r
187         }\r
188 .leaflet-container a {\r
189         color: #0078A8;\r
190         }\r
191 .leaflet-container a.leaflet-active {\r
192         outline: 2px solid orange;\r
193         }\r
194 .leaflet-zoom-box {\r
195         border: 2px dotted #38f;\r
196         background: rgba(255,255,255,0.5);\r
197         }\r
198 \r
199 \r
200 /* general typography */\r
201 .leaflet-container {\r
202         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;\r
203         }\r
204 \r
205 \r
206 /* general toolbar styles */\r
207 \r
208 .leaflet-bar {\r
209         box-shadow: 0 1px 5px rgba(0,0,0,0.65);\r
210         border-radius: 4px;\r
211         }\r
212 .leaflet-bar a,\r
213 .leaflet-bar a:hover {\r
214         background-color: #fff;\r
215         border-bottom: 1px solid #ccc;\r
216         width: 26px;\r
217         height: 26px;\r
218         line-height: 26px;\r
219         display: block;\r
220         text-align: center;\r
221         text-decoration: none;\r
222         color: black;\r
223         }\r
224 .leaflet-bar a,\r
225 .leaflet-control-layers-toggle {\r
226         background-position: 50% 50%;\r
227         background-repeat: no-repeat;\r
228         display: block;\r
229         }\r
230 .leaflet-bar a:hover {\r
231         background-color: #f4f4f4;\r
232         }\r
233 .leaflet-bar a:first-child {\r
234         border-top-left-radius: 4px;\r
235         border-top-right-radius: 4px;\r
236         }\r
237 .leaflet-bar a:last-child {\r
238         border-bottom-left-radius: 4px;\r
239         border-bottom-right-radius: 4px;\r
240         border-bottom: none;\r
241         }\r
242 .leaflet-bar a.leaflet-disabled {\r
243         cursor: default;\r
244         background-color: #f4f4f4;\r
245         color: #bbb;\r
246         }\r
247 \r
248 .leaflet-touch .leaflet-bar a {\r
249         width: 30px;\r
250         height: 30px;\r
251         line-height: 30px;\r
252         }\r
253 \r
254 \r
255 /* zoom control */\r
256 \r
257 .leaflet-control-zoom-in,\r
258 .leaflet-control-zoom-out {\r
259         font: bold 18px 'Lucida Console', Monaco, monospace;\r
260         text-indent: 1px;\r
261         }\r
262 .leaflet-control-zoom-out {\r
263         font-size: 20px;\r
264         }\r
265 \r
266 .leaflet-touch .leaflet-control-zoom-in {\r
267         font-size: 22px;\r
268         }\r
269 .leaflet-touch .leaflet-control-zoom-out {\r
270         font-size: 24px;\r
271         }\r
272 \r
273 \r
274 /* layers control */\r
275 \r
276 .leaflet-control-layers {\r
277         box-shadow: 0 1px 5px rgba(0,0,0,0.4);\r
278         background: #fff;\r
279         border-radius: 5px;\r
280         }\r
281 .leaflet-control-layers-toggle {\r
282         background-image: url(images/layers.png);\r
283         width: 36px;\r
284         height: 36px;\r
285         }\r
286 .leaflet-retina .leaflet-control-layers-toggle {\r
287         background-image: url(images/layers-2x.png);\r
288         background-size: 26px 26px;\r
289         }\r
290 .leaflet-touch .leaflet-control-layers-toggle {\r
291         width: 44px;\r
292         height: 44px;\r
293         }\r
294 .leaflet-control-layers .leaflet-control-layers-list,\r
295 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {\r
296         display: none;\r
297         }\r
298 .leaflet-control-layers-expanded .leaflet-control-layers-list {\r
299         display: block;\r
300         position: relative;\r
301         }\r
302 .leaflet-control-layers-expanded {\r
303         padding: 6px 10px 6px 6px;\r
304         color: #333;\r
305         background: #fff;\r
306         }\r
307 .leaflet-control-layers-selector {\r
308         margin-top: 2px;\r
309         position: relative;\r
310         top: 1px;\r
311         }\r
312 .leaflet-control-layers label {\r
313         display: block;\r
314         }\r
315 .leaflet-control-layers-separator {\r
316         height: 0;\r
317         border-top: 1px solid #ddd;\r
318         margin: 5px -10px 5px -6px;\r
319         }\r
320 \r
321 \r
322 /* attribution and scale controls */\r
323 \r
324 .leaflet-container .leaflet-control-attribution {\r
325         background: #fff;\r
326         background: rgba(255, 255, 255, 0.7);\r
327         margin: 0;\r
328         }\r
329 .leaflet-control-attribution,\r
330 .leaflet-control-scale-line {\r
331         padding: 0 5px;\r
332         color: #333;\r
333         }\r
334 .leaflet-control-attribution a {\r
335         text-decoration: none;\r
336         }\r
337 .leaflet-control-attribution a:hover {\r
338         text-decoration: underline;\r
339         }\r
340 .leaflet-container .leaflet-control-attribution,\r
341 .leaflet-container .leaflet-control-scale {\r
342         font-size: 11px;\r
343         }\r
344 .leaflet-left .leaflet-control-scale {\r
345         margin-left: 5px;\r
346         }\r
347 .leaflet-bottom .leaflet-control-scale {\r
348         margin-bottom: 5px;\r
349         }\r
350 .leaflet-control-scale-line {\r
351         border: 2px solid #777;\r
352         border-top: none;\r
353         line-height: 1.1;\r
354         padding: 2px 5px 1px;\r
355         font-size: 11px;\r
356         white-space: nowrap;\r
357         overflow: hidden;\r
358         -moz-box-sizing: content-box;\r
359              box-sizing: content-box;\r
360 \r
361         background: #fff;\r
362         background: rgba(255, 255, 255, 0.5);\r
363         }\r
364 .leaflet-control-scale-line:not(:first-child) {\r
365         border-top: 2px solid #777;\r
366         border-bottom: none;\r
367         margin-top: -2px;\r
368         }\r
369 .leaflet-control-scale-line:not(:first-child):not(:last-child) {\r
370         border-bottom: 2px solid #777;\r
371         }\r
372 \r
373 .leaflet-touch .leaflet-control-attribution,\r
374 .leaflet-touch .leaflet-control-layers,\r
375 .leaflet-touch .leaflet-bar {\r
376         box-shadow: none;\r
377         }\r
378 .leaflet-touch .leaflet-control-layers,\r
379 .leaflet-touch .leaflet-bar {\r
380         border: 2px solid rgba(0,0,0,0.2);\r
381         background-clip: padding-box;\r
382         }\r
383 \r
384 \r
385 /* popup */\r
386 \r
387 .leaflet-popup {\r
388         position: absolute;\r
389         text-align: center;\r
390         }\r
391 .leaflet-popup-content-wrapper {\r
392         padding: 1px;\r
393         text-align: left;\r
394         border-radius: 12px;\r
395         }\r
396 .leaflet-popup-content {\r
397         margin: 13px 19px;\r
398         line-height: 1.4;\r
399         }\r
400 .leaflet-popup-content p {\r
401         margin: 18px 0;\r
402         }\r
403 .leaflet-popup-tip-container {\r
404         margin: 0 auto;\r
405         width: 40px;\r
406         height: 20px;\r
407         position: relative;\r
408         overflow: hidden;\r
409         }\r
410 .leaflet-popup-tip {\r
411         width: 17px;\r
412         height: 17px;\r
413         padding: 1px;\r
414 \r
415         margin: -10px auto 0;\r
416 \r
417         -webkit-transform: rotate(45deg);\r
418            -moz-transform: rotate(45deg);\r
419             -ms-transform: rotate(45deg);\r
420              -o-transform: rotate(45deg);\r
421                 transform: rotate(45deg);\r
422         }\r
423 .leaflet-popup-content-wrapper,\r
424 .leaflet-popup-tip {\r
425         background: white;\r
426 \r
427         box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
428         }\r
429 .leaflet-container a.leaflet-popup-close-button {\r
430         position: absolute;\r
431         top: 0;\r
432         right: 0;\r
433         padding: 4px 4px 0 0;\r
434         text-align: center;\r
435         width: 18px;\r
436         height: 14px;\r
437         font: 16px/14px Tahoma, Verdana, sans-serif;\r
438         color: #c3c3c3;\r
439         text-decoration: none;\r
440         font-weight: bold;\r
441         background: transparent;\r
442         }\r
443 .leaflet-container a.leaflet-popup-close-button:hover {\r
444         color: #999;\r
445         }\r
446 .leaflet-popup-scrolled {\r
447         overflow: auto;\r
448         border-bottom: 1px solid #ddd;\r
449         border-top: 1px solid #ddd;\r
450         }\r
451 \r
452 .leaflet-oldie .leaflet-popup-content-wrapper {\r
453         zoom: 1;\r
454         }\r
455 .leaflet-oldie .leaflet-popup-tip {\r
456         width: 24px;\r
457         margin: 0 auto;\r
458 \r
459         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";\r
460         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);\r
461         }\r
462 .leaflet-oldie .leaflet-popup-tip-container {\r
463         margin-top: -1px;\r
464         }\r
465 \r
466 .leaflet-oldie .leaflet-control-zoom,\r
467 .leaflet-oldie .leaflet-control-layers,\r
468 .leaflet-oldie .leaflet-popup-content-wrapper,\r
469 .leaflet-oldie .leaflet-popup-tip {\r
470         border: 1px solid #999;\r
471         }\r
472 \r
473 \r
474 /* div icon */\r
475 \r
476 .leaflet-div-icon {\r
477         background: #fff;\r
478         border: 1px solid #666;\r
479         }\r