]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.css
Merge remote-tracking branch 'upstream/pull/2577'
[rails.git] / vendor / assets / leaflet / 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 /* 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         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         }