]> git.ipfire.org Git - ipfire.org.git/blame - src/static/css/leaflet.css
location: Bring back map
[ipfire.org.git] / src / static / css / leaflet.css
CommitLineData
cf503f2b
MT
1/* required styles */\r
2\r
3.leaflet-pane,\r
4.leaflet-tile,\r
5.leaflet-marker-icon,\r
6.leaflet-marker-shadow,\r
7.leaflet-tile-container,\r
8.leaflet-pane > svg,\r
9.leaflet-pane > canvas,\r
10.leaflet-zoom-box,\r
11.leaflet-image-layer,\r
12.leaflet-layer {\r
13 position: absolute;\r
14 left: 0;\r
15 top: 0;\r
16 }\r
17.leaflet-container {\r
18 overflow: hidden;\r
19 }\r
20.leaflet-tile,\r
21.leaflet-marker-icon,\r
22.leaflet-marker-shadow {\r
23 -webkit-user-select: none;\r
24 -moz-user-select: none;\r
25 user-select: none;\r
26 -webkit-user-drag: none;\r
27 }\r
28/* Safari renders non-retina tile on retina better with this, but Chrome is worse */\r
29.leaflet-safari .leaflet-tile {\r
30 image-rendering: -webkit-optimize-contrast;\r
31 }\r
32/* hack that prevents hw layers "stretching" when loading new tiles */\r
33.leaflet-safari .leaflet-tile-container {\r
34 width: 1600px;\r
35 height: 1600px;\r
36 -webkit-transform-origin: 0 0;\r
37 }\r
38.leaflet-marker-icon,\r
39.leaflet-marker-shadow {\r
40 display: block;\r
41 }\r
42/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */\r
43/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */\r
44.leaflet-container .leaflet-overlay-pane svg,\r
45.leaflet-container .leaflet-marker-pane img,\r
46.leaflet-container .leaflet-shadow-pane img,\r
47.leaflet-container .leaflet-tile-pane img,\r
48.leaflet-container img.leaflet-image-layer,\r
49.leaflet-container .leaflet-tile {\r
50 max-width: none !important;\r
51 max-height: none !important;\r
52 }\r
53\r
54.leaflet-container.leaflet-touch-zoom {\r
55 -ms-touch-action: pan-x pan-y;\r
56 touch-action: pan-x pan-y;\r
57 }\r
58.leaflet-container.leaflet-touch-drag {\r
59 -ms-touch-action: pinch-zoom;\r
60 /* Fallback for FF which doesn't support pinch-zoom */\r
61 touch-action: none;\r
62 touch-action: pinch-zoom;\r
63}\r
64.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {\r
65 -ms-touch-action: none;\r
66 touch-action: none;\r
67}\r
68.leaflet-container {\r
69 -webkit-tap-highlight-color: transparent;\r
70}\r
71.leaflet-container a {\r
72 -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);\r
73}\r
74.leaflet-tile {\r
75 filter: inherit;\r
76 visibility: hidden;\r
77 }\r
78.leaflet-tile-loaded {\r
79 visibility: inherit;\r
80 }\r
81.leaflet-zoom-box {\r
82 width: 0;\r
83 height: 0;\r
84 -moz-box-sizing: border-box;\r
85 box-sizing: border-box;\r
86 z-index: 800;\r
87 }\r
88/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
89.leaflet-overlay-pane svg {\r
90 -moz-user-select: none;\r
91 }\r
92\r
93.leaflet-pane { z-index: 400; }\r
94\r
95.leaflet-tile-pane { z-index: 200; }\r
96.leaflet-overlay-pane { z-index: 400; }\r
97.leaflet-shadow-pane { z-index: 500; }\r
98.leaflet-marker-pane { z-index: 600; }\r
99.leaflet-tooltip-pane { z-index: 650; }\r
100.leaflet-popup-pane { z-index: 700; }\r
101\r
102.leaflet-map-pane canvas { z-index: 100; }\r
103.leaflet-map-pane svg { z-index: 200; }\r
104\r
105.leaflet-vml-shape {\r
106 width: 1px;\r
107 height: 1px;\r
108 }\r
109.lvml {\r
110 behavior: url(#default#VML);\r
111 display: inline-block;\r
112 position: absolute;\r
113 }\r
114\r
115\r
116/* control positioning */\r
117\r
118.leaflet-control {\r
119 position: relative;\r
120 z-index: 800;\r
121 pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r
122 pointer-events: auto;\r
123 }\r
124.leaflet-top,\r
125.leaflet-bottom {\r
126 position: absolute;\r
127 z-index: 1000;\r
128 pointer-events: none;\r
129 }\r
130.leaflet-top {\r
131 top: 0;\r
132 }\r
133.leaflet-right {\r
134 right: 0;\r
135 }\r
136.leaflet-bottom {\r
137 bottom: 0;\r
138 }\r
139.leaflet-left {\r
140 left: 0;\r
141 }\r
142.leaflet-control {\r
143 float: left;\r
144 clear: both;\r
145 }\r
146.leaflet-right .leaflet-control {\r
147 float: right;\r
148 }\r
149.leaflet-top .leaflet-control {\r
150 margin-top: 10px;\r
151 }\r
152.leaflet-bottom .leaflet-control {\r
153 margin-bottom: 10px;\r
154 }\r
155.leaflet-left .leaflet-control {\r
156 margin-left: 10px;\r
157 }\r
158.leaflet-right .leaflet-control {\r
159 margin-right: 10px;\r
160 }\r
161\r
162\r
163/* zoom and fade animations */\r
164\r
165.leaflet-fade-anim .leaflet-tile {\r
166 will-change: opacity;\r
167 }\r
168.leaflet-fade-anim .leaflet-popup {\r
169 opacity: 0;\r
170 -webkit-transition: opacity 0.2s linear;\r
171 -moz-transition: opacity 0.2s linear;\r
172 transition: opacity 0.2s linear;\r
173 }\r
174.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
175 opacity: 1;\r
176 }\r
177.leaflet-zoom-animated {\r
178 -webkit-transform-origin: 0 0;\r
179 -ms-transform-origin: 0 0;\r
180 transform-origin: 0 0;\r
181 }\r
182.leaflet-zoom-anim .leaflet-zoom-animated {\r
183 will-change: transform;\r
184 }\r
185.leaflet-zoom-anim .leaflet-zoom-animated {\r
186 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
187 -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
188 transition: transform 0.25s cubic-bezier(0,0,0.25,1);\r
189 }\r
190.leaflet-zoom-anim .leaflet-tile,\r
191.leaflet-pan-anim .leaflet-tile {\r
192 -webkit-transition: none;\r
193 -moz-transition: none;\r
194 transition: none;\r
195 }\r
196\r
197.leaflet-zoom-anim .leaflet-zoom-hide {\r
198 visibility: hidden;\r
199 }\r
200\r
201\r
202/* cursors */\r
203\r
204.leaflet-interactive {\r
205 cursor: pointer;\r
206 }\r
207.leaflet-grab {\r
208 cursor: -webkit-grab;\r
209 cursor: -moz-grab;\r
210 cursor: grab;\r
211 }\r
212.leaflet-crosshair,\r
213.leaflet-crosshair .leaflet-interactive {\r
214 cursor: crosshair;\r
215 }\r
216.leaflet-popup-pane,\r
217.leaflet-control {\r
218 cursor: auto;\r
219 }\r
220.leaflet-dragging .leaflet-grab,\r
221.leaflet-dragging .leaflet-grab .leaflet-interactive,\r
222.leaflet-dragging .leaflet-marker-draggable {\r
223 cursor: move;\r
224 cursor: -webkit-grabbing;\r
225 cursor: -moz-grabbing;\r
226 cursor: grabbing;\r
227 }\r
228\r
229/* marker & overlays interactivity */\r
230.leaflet-marker-icon,\r
231.leaflet-marker-shadow,\r
232.leaflet-image-layer,\r
233.leaflet-pane > svg path,\r
234.leaflet-tile-container {\r
235 pointer-events: none;\r
236 }\r
237\r
238.leaflet-marker-icon.leaflet-interactive,\r
239.leaflet-image-layer.leaflet-interactive,\r
240.leaflet-pane > svg path.leaflet-interactive {\r
241 pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r
242 pointer-events: auto;\r
243 }\r
244\r
245/* visual tweaks */\r
246\r
247.leaflet-container {\r
248 background: #ddd;\r
249 outline: 0;\r
250 }\r
251.leaflet-container a {\r
252 color: #0078A8;\r
253 }\r
254.leaflet-container a.leaflet-active {\r
255 outline: 2px solid orange;\r
256 }\r
257.leaflet-zoom-box {\r
258 border: 2px dotted #38f;\r
259 background: rgba(255,255,255,0.5);\r
260 }\r
261\r
262\r
263/* general typography */\r
264.leaflet-container {\r
265 font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;\r
266 }\r
267\r
268\r
269/* general toolbar styles */\r
270\r
271.leaflet-bar {\r
272 box-shadow: 0 1px 5px rgba(0,0,0,0.65);\r
273 border-radius: 4px;\r
274 }\r
275.leaflet-bar a,\r
276.leaflet-bar a:hover {\r
277 background-color: #fff;\r
278 border-bottom: 1px solid #ccc;\r
279 width: 26px;\r
280 height: 26px;\r
281 line-height: 26px;\r
282 display: block;\r
283 text-align: center;\r
284 text-decoration: none;\r
285 color: black;\r
286 }\r
287.leaflet-bar a,\r
288.leaflet-control-layers-toggle {\r
289 background-position: 50% 50%;\r
290 background-repeat: no-repeat;\r
291 display: block;\r
292 }\r
293.leaflet-bar a:hover {\r
294 background-color: #f4f4f4;\r
295 }\r
296.leaflet-bar a:first-child {\r
297 border-top-left-radius: 4px;\r
298 border-top-right-radius: 4px;\r
299 }\r
300.leaflet-bar a:last-child {\r
301 border-bottom-left-radius: 4px;\r
302 border-bottom-right-radius: 4px;\r
303 border-bottom: none;\r
304 }\r
305.leaflet-bar a.leaflet-disabled {\r
306 cursor: default;\r
307 background-color: #f4f4f4;\r
308 color: #bbb;\r
309 }\r
310\r
311.leaflet-touch .leaflet-bar a {\r
312 width: 30px;\r
313 height: 30px;\r
314 line-height: 30px;\r
315 }\r
316.leaflet-touch .leaflet-bar a:first-child {\r
317 border-top-left-radius: 2px;\r
318 border-top-right-radius: 2px;\r
319 }\r
320.leaflet-touch .leaflet-bar a:last-child {\r
321 border-bottom-left-radius: 2px;\r
322 border-bottom-right-radius: 2px;\r
323 }\r
324\r
325/* zoom control */\r
326\r
327.leaflet-control-zoom-in,\r
328.leaflet-control-zoom-out {\r
329 font: bold 18px 'Lucida Console', Monaco, monospace;\r
330 text-indent: 1px;\r
331 }\r
332\r
333.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {\r
334 font-size: 22px;\r
335 }\r
336\r
337\r
338/* layers control */\r
339\r
340.leaflet-control-layers {\r
341 box-shadow: 0 1px 5px rgba(0,0,0,0.4);\r
342 background: #fff;\r
343 border-radius: 5px;\r
344 }\r
345.leaflet-control-layers-toggle {\r
346 background-image: url(../images/layers.png);\r
347 width: 36px;\r
348 height: 36px;\r
349 }\r
350.leaflet-retina .leaflet-control-layers-toggle {\r
351 background-image: url(../images/layers-2x.png);\r
352 background-size: 26px 26px;\r
353 }\r
354.leaflet-touch .leaflet-control-layers-toggle {\r
355 width: 44px;\r
356 height: 44px;\r
357 }\r
358.leaflet-control-layers .leaflet-control-layers-list,\r
359.leaflet-control-layers-expanded .leaflet-control-layers-toggle {\r
360 display: none;\r
361 }\r
362.leaflet-control-layers-expanded .leaflet-control-layers-list {\r
363 display: block;\r
364 position: relative;\r
365 }\r
366.leaflet-control-layers-expanded {\r
367 padding: 6px 10px 6px 6px;\r
368 color: #333;\r
369 background: #fff;\r
370 }\r
371.leaflet-control-layers-scrollbar {\r
372 overflow-y: scroll;\r
373 overflow-x: hidden;\r
374 padding-right: 5px;\r
375 }\r
376.leaflet-control-layers-selector {\r
377 margin-top: 2px;\r
378 position: relative;\r
379 top: 1px;\r
380 }\r
381.leaflet-control-layers label {\r
382 display: block;\r
383 }\r
384.leaflet-control-layers-separator {\r
385 height: 0;\r
386 border-top: 1px solid #ddd;\r
387 margin: 5px -10px 5px -6px;\r
388 }\r
389\r
390/* Default icon URLs */\r
391.leaflet-default-icon-path {\r
392 background-image: url(../images/marker-icon.png);\r
393 }\r
394\r
395\r
396/* attribution and scale controls */\r
397\r
398.leaflet-container .leaflet-control-attribution {\r
399 background: #fff;\r
400 background: rgba(255, 255, 255, 0.7);\r
401 margin: 0;\r
402 }\r
403.leaflet-control-attribution,\r
404.leaflet-control-scale-line {\r
405 padding: 0 5px;\r
406 color: #333;\r
407 }\r
408.leaflet-control-attribution a {\r
409 text-decoration: none;\r
410 }\r
411.leaflet-control-attribution a:hover {\r
412 text-decoration: underline;\r
413 }\r
414.leaflet-container .leaflet-control-attribution,\r
415.leaflet-container .leaflet-control-scale {\r
416 font-size: 11px;\r
417 }\r
418.leaflet-left .leaflet-control-scale {\r
419 margin-left: 5px;\r
420 }\r
421.leaflet-bottom .leaflet-control-scale {\r
422 margin-bottom: 5px;\r
423 }\r
424.leaflet-control-scale-line {\r
425 border: 2px solid #777;\r
426 border-top: none;\r
427 line-height: 1.1;\r
428 padding: 2px 5px 1px;\r
429 font-size: 11px;\r
430 white-space: nowrap;\r
431 overflow: hidden;\r
432 -moz-box-sizing: border-box;\r
433 box-sizing: border-box;\r
434\r
435 background: #fff;\r
436 background: rgba(255, 255, 255, 0.5);\r
437 }\r
438.leaflet-control-scale-line:not(:first-child) {\r
439 border-top: 2px solid #777;\r
440 border-bottom: none;\r
441 margin-top: -2px;\r
442 }\r
443.leaflet-control-scale-line:not(:first-child):not(:last-child) {\r
444 border-bottom: 2px solid #777;\r
445 }\r
446\r
447.leaflet-touch .leaflet-control-attribution,\r
448.leaflet-touch .leaflet-control-layers,\r
449.leaflet-touch .leaflet-bar {\r
450 box-shadow: none;\r
451 }\r
452.leaflet-touch .leaflet-control-layers,\r
453.leaflet-touch .leaflet-bar {\r
454 border: 2px solid rgba(0,0,0,0.2);\r
455 background-clip: padding-box;\r
456 }\r
457\r
458\r
459/* popup */\r
460\r
461.leaflet-popup {\r
462 position: absolute;\r
463 text-align: center;\r
464 margin-bottom: 20px;\r
465 }\r
466.leaflet-popup-content-wrapper {\r
467 padding: 1px;\r
468 text-align: left;\r
469 border-radius: 12px;\r
470 }\r
471.leaflet-popup-content {\r
472 margin: 13px 19px;\r
473 line-height: 1.4;\r
474 }\r
475.leaflet-popup-content p {\r
476 margin: 18px 0;\r
477 }\r
478.leaflet-popup-tip-container {\r
479 width: 40px;\r
480 height: 20px;\r
481 position: absolute;\r
482 left: 50%;\r
483 margin-left: -20px;\r
484 overflow: hidden;\r
485 pointer-events: none;\r
486 }\r
487.leaflet-popup-tip {\r
488 width: 17px;\r
489 height: 17px;\r
490 padding: 1px;\r
491\r
492 margin: -10px auto 0;\r
493\r
494 -webkit-transform: rotate(45deg);\r
495 -moz-transform: rotate(45deg);\r
496 -ms-transform: rotate(45deg);\r
497 transform: rotate(45deg);\r
498 }\r
499.leaflet-popup-content-wrapper,\r
500.leaflet-popup-tip {\r
501 background: white;\r
502 color: #333;\r
503 box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
504 }\r
505.leaflet-container a.leaflet-popup-close-button {\r
506 position: absolute;\r
507 top: 0;\r
508 right: 0;\r
509 padding: 4px 4px 0 0;\r
510 border: none;\r
511 text-align: center;\r
512 width: 18px;\r
513 height: 14px;\r
514 font: 16px/14px Tahoma, Verdana, sans-serif;\r
515 color: #c3c3c3;\r
516 text-decoration: none;\r
517 font-weight: bold;\r
518 background: transparent;\r
519 }\r
520.leaflet-container a.leaflet-popup-close-button:hover {\r
521 color: #999;\r
522 }\r
523.leaflet-popup-scrolled {\r
524 overflow: auto;\r
525 border-bottom: 1px solid #ddd;\r
526 border-top: 1px solid #ddd;\r
527 }\r
528\r
529.leaflet-oldie .leaflet-popup-content-wrapper {\r
530 zoom: 1;\r
531 }\r
532.leaflet-oldie .leaflet-popup-tip {\r
533 width: 24px;\r
534 margin: 0 auto;\r
535\r
536 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";\r
537 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);\r
538 }\r
539.leaflet-oldie .leaflet-popup-tip-container {\r
540 margin-top: -1px;\r
541 }\r
542\r
543.leaflet-oldie .leaflet-control-zoom,\r
544.leaflet-oldie .leaflet-control-layers,\r
545.leaflet-oldie .leaflet-popup-content-wrapper,\r
546.leaflet-oldie .leaflet-popup-tip {\r
547 border: 1px solid #999;\r
548 }\r
549\r
550\r
551/* div icon */\r
552\r
553.leaflet-div-icon {\r
554 background: #fff;\r
555 border: 1px solid #666;\r
556 }\r
557\r
558\r
559/* Tooltip */\r
560/* Base styles for the element that has a tooltip */\r
561.leaflet-tooltip {\r
562 position: absolute;\r
563 padding: 6px;\r
564 background-color: #fff;\r
565 border: 1px solid #fff;\r
566 border-radius: 3px;\r
567 color: #222;\r
568 white-space: nowrap;\r
569 -webkit-user-select: none;\r
570 -moz-user-select: none;\r
571 -ms-user-select: none;\r
572 user-select: none;\r
573 pointer-events: none;\r
574 box-shadow: 0 1px 3px rgba(0,0,0,0.4);\r
575 }\r
576.leaflet-tooltip.leaflet-clickable {\r
577 cursor: pointer;\r
578 pointer-events: auto;\r
579 }\r
580.leaflet-tooltip-top:before,\r
581.leaflet-tooltip-bottom:before,\r
582.leaflet-tooltip-left:before,\r
583.leaflet-tooltip-right:before {\r
584 position: absolute;\r
585 pointer-events: none;\r
586 border: 6px solid transparent;\r
587 background: transparent;\r
588 content: "";\r
589 }\r
590\r
591/* Directions */\r
592\r
593.leaflet-tooltip-bottom {\r
594 margin-top: 6px;\r
595}\r
596.leaflet-tooltip-top {\r
597 margin-top: -6px;\r
598}\r
599.leaflet-tooltip-bottom:before,\r
600.leaflet-tooltip-top:before {\r
601 left: 50%;\r
602 margin-left: -6px;\r
603 }\r
604.leaflet-tooltip-top:before {\r
605 bottom: 0;\r
606 margin-bottom: -12px;\r
607 border-top-color: #fff;\r
608 }\r
609.leaflet-tooltip-bottom:before {\r
610 top: 0;\r
611 margin-top: -12px;\r
612 margin-left: -6px;\r
613 border-bottom-color: #fff;\r
614 }\r
615.leaflet-tooltip-left {\r
616 margin-left: -6px;\r
617}\r
618.leaflet-tooltip-right {\r
619 margin-left: 6px;\r
620}\r
621.leaflet-tooltip-left:before,\r
622.leaflet-tooltip-right:before {\r
623 top: 50%;\r
624 margin-top: -6px;\r
625 }\r
626.leaflet-tooltip-left:before {\r
627 right: 0;\r
628 margin-right: -12px;\r
629 border-left-color: #fff;\r
630 }\r
631.leaflet-tooltip-right:before {\r
632 left: 0;\r
633 margin-left: -12px;\r
634 border-right-color: #fff;\r
635 }\r