Embed Leaflet JS library
[gpl/argeo-suite.git] / org.argeo.suite.workbench.rap / js / leaflet.css
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(images/layers.png);
336 width: 36px;
337 height: 36px;
338 }
339 .leaflet-retina .leaflet-control-layers-toggle {
340 background-image: url(images/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 }