UNPKG

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