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