UNPKG

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