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