|
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, |
|
245 svg.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 -ms-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 } |