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