leaflet.css (14.5 KB)

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