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-attribution-flag {
427 display: inline !important;
428 vertical-align: baseline !important;
429 width: 1em;
430 height: 0.6669em;
431 }
432.leaflet-left .leaflet-control-scale {
433 margin-left: 5px;
434 }
435.leaflet-bottom .leaflet-control-scale {
436 margin-bottom: 5px;
437 }
438.leaflet-control-scale-line {
439 border: 2px solid #777;
440 border-top: none;
441 line-height: 1.1;
442 padding: 2px 5px 1px;
443 white-space: nowrap;
444 -moz-box-sizing: border-box;
445 box-sizing: border-box;
446 background: rgba(255, 255, 255, 0.8);
447 text-shadow: 1px 1px #fff;
448 }
449.leaflet-control-scale-line:not(:first-child) {
450 border-top: 2px solid #777;
451 border-bottom: none;
452 margin-top: -2px;
453 }
454.leaflet-control-scale-line:not(:first-child):not(:last-child) {
455 border-bottom: 2px solid #777;
456 }
457
458.leaflet-touch .leaflet-control-attribution,
459.leaflet-touch .leaflet-control-layers,
460.leaflet-touch .leaflet-bar {
461 box-shadow: none;
462 }
463.leaflet-touch .leaflet-control-layers,
464.leaflet-touch .leaflet-bar {
465 border: 2px solid rgba(0,0,0,0.2);
466 background-clip: padding-box;
467 }
468
469
470/* popup */
471
472.leaflet-popup {
473 position: absolute;
474 text-align: center;
475 margin-bottom: 20px;
476 }
477.leaflet-popup-content-wrapper {
478 padding: 1px;
479 text-align: left;
480 border-radius: 12px;
481 }
482.leaflet-popup-content {
483 margin: 13px 24px 13px 20px;
484 line-height: 1.3;
485 font-size: 13px;
486 font-size: 1.08333em;
487 min-height: 1px;
488 }
489.leaflet-popup-content p {
490 margin: 17px 0;
491 margin: 1.3em 0;
492 }
493.leaflet-popup-tip-container {
494 width: 40px;
495 height: 20px;
496 position: absolute;
497 left: 50%;
498 margin-top: -1px;
499 margin-left: -20px;
500 overflow: hidden;
501 pointer-events: none;
502 }
503.leaflet-popup-tip {
504 width: 17px;
505 height: 17px;
506 padding: 1px;
507
508 margin: -10px auto 0;
509 pointer-events: auto;
510
511 -webkit-transform: rotate(45deg);
512 -moz-transform: rotate(45deg);
513 -ms-transform: rotate(45deg);
514 transform: rotate(45deg);
515 }
516.leaflet-popup-content-wrapper,
517.leaflet-popup-tip {
518 background: white;
519 color: #333;
520 box-shadow: 0 3px 14px rgba(0,0,0,0.4);
521 }
522.leaflet-container a.leaflet-popup-close-button {
523 position: absolute;
524 top: 0;
525 right: 0;
526 border: none;
527 text-align: center;
528 width: 24px;
529 height: 24px;
530 font: 16px/24px Tahoma, Verdana, sans-serif;
531 color: #757575;
532 text-decoration: none;
533 background: transparent;
534 }
535.leaflet-container a.leaflet-popup-close-button:hover,
536.leaflet-container a.leaflet-popup-close-button:focus {
537 color: #585858;
538 }
539.leaflet-popup-scrolled {
540 overflow: auto;
541 }
542
543.leaflet-oldie .leaflet-popup-content-wrapper {
544 -ms-zoom: 1;
545 }
546.leaflet-oldie .leaflet-popup-tip {
547 width: 24px;
548 margin: 0 auto;
549
550 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
551 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
552 }
553
554.leaflet-oldie .leaflet-control-zoom,
555.leaflet-oldie .leaflet-control-layers,
556.leaflet-oldie .leaflet-popup-content-wrapper,
557.leaflet-oldie .leaflet-popup-tip {
558 border: 1px solid #999;
559 }
560
561
562/* div icon */
563
564.leaflet-div-icon {
565 background: #fff;
566 border: 1px solid #666;
567 }
568
569
570/* Tooltip */
571/* Base styles for the element that has a tooltip */
572.leaflet-tooltip {
573 position: absolute;
574 padding: 6px;
575 background-color: #fff;
576 border: 1px solid #fff;
577 border-radius: 3px;
578 color: #222;
579 white-space: nowrap;
580 -webkit-user-select: none;
581 -moz-user-select: none;
582 -ms-user-select: none;
583 user-select: none;
584 pointer-events: none;
585 box-shadow: 0 1px 3px rgba(0,0,0,0.4);
586 }
587.leaflet-tooltip.leaflet-interactive {
588 cursor: pointer;
589 pointer-events: auto;
590 }
591.leaflet-tooltip-top:before,
592.leaflet-tooltip-bottom:before,
593.leaflet-tooltip-left:before,
594.leaflet-tooltip-right:before {
595 position: absolute;
596 pointer-events: none;
597 border: 6px solid transparent;
598 background: transparent;
599 content: "";
600 }
601
602/* Directions */
603
604.leaflet-tooltip-bottom {
605 margin-top: 6px;
606}
607.leaflet-tooltip-top {
608 margin-top: -6px;
609}
610.leaflet-tooltip-bottom:before,
611.leaflet-tooltip-top:before {
612 left: 50%;
613 margin-left: -6px;
614 }
615.leaflet-tooltip-top:before {
616 bottom: 0;
617 margin-bottom: -12px;
618 border-top-color: #fff;
619 }
620.leaflet-tooltip-bottom:before {
621 top: 0;
622 margin-top: -12px;
623 margin-left: -6px;
624 border-bottom-color: #fff;
625 }
626.leaflet-tooltip-left {
627 margin-left: -6px;
628}
629.leaflet-tooltip-right {
630 margin-left: 6px;
631}
632.leaflet-tooltip-left:before,
633.leaflet-tooltip-right:before {
634 top: 50%;
635 margin-top: -6px;
636 }
637.leaflet-tooltip-left:before {
638 right: 0;
639 margin-right: -12px;
640 border-left-color: #fff;
641 }
642.leaflet-tooltip-right:before {
643 left: 0;
644 margin-left: -12px;
645 border-right-color: #fff;
646 }
647
648/* Printing */
649
650@media print {
651 /* Prevent printers from removing background-images of controls. */
652 .leaflet-control {
653 -webkit-print-color-adjust: exact;
654 print-color-adjust: exact;
655 }
656 }