]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.css
Update to Leaflet 0.7.5
[rails.git] / vendor / assets / leaflet / leaflet.css
1 /* required styles */\r
2 \r
3 .leaflet-map-pane,\r
4 .leaflet-tile,\r
5 .leaflet-marker-icon,\r
6 .leaflet-marker-shadow,\r
7 .leaflet-tile-pane,\r
8 .leaflet-tile-container,\r
9 .leaflet-overlay-pane,\r
10 .leaflet-shadow-pane,\r
11 .leaflet-marker-pane,\r
12 .leaflet-popup-pane,\r
13 .leaflet-overlay-pane svg,\r
14 .leaflet-zoom-box,\r
15 .leaflet-image-layer,\r
16 .leaflet-layer {\r
17         position: absolute;\r
18         left: 0;\r
19         top: 0;\r
20         }\r
21 .leaflet-container {\r
22         overflow: hidden;\r
23         -ms-touch-action: none;\r
24         }\r
25 .leaflet-tile,\r
26 .leaflet-marker-icon,\r
27 .leaflet-marker-shadow {\r
28         -webkit-user-select: none;\r
29            -moz-user-select: none;\r
30                 user-select: none;\r
31         -webkit-user-drag: none;\r
32         }\r
33 .leaflet-marker-icon,\r
34 .leaflet-marker-shadow {\r
35         display: block;\r
36         }\r
37 /* map is broken in FF if you have max-width: 100% on tiles */\r
38 .leaflet-container img {\r
39         max-width: none !important;\r
40         }\r
41 /* stupid Android 2 doesn't understand "max-width: none" properly */\r
42 .leaflet-container img.leaflet-image-layer {\r
43         max-width: 15000px !important;\r
44         }\r
45 .leaflet-tile {\r
46         filter: inherit;\r
47         visibility: hidden;\r
48         }\r
49 .leaflet-tile-loaded {\r
50         visibility: inherit;\r
51         }\r
52 .leaflet-zoom-box {\r
53         width: 0;\r
54         height: 0;\r
55         }\r
56 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
57 .leaflet-overlay-pane svg {\r
58         -moz-user-select: none;\r
59         }\r
60 \r
61 .leaflet-tile-pane    { z-index: 2; }\r
62 .leaflet-objects-pane { z-index: 3; }\r
63 .leaflet-overlay-pane { z-index: 4; }\r
64 .leaflet-shadow-pane  { z-index: 5; }\r
65 .leaflet-marker-pane  { z-index: 6; }\r
66 .leaflet-popup-pane   { z-index: 7; }\r
67 \r
68 .leaflet-vml-shape {\r
69         width: 1px;\r
70         height: 1px;\r
71         }\r
72 .lvml {\r
73         behavior: url(#default#VML);\r
74         display: inline-block;\r
75         position: absolute;\r
76         }\r
77 \r
78 \r
79 /* control positioning */\r
80 \r
81 .leaflet-control {\r
82         position: relative;\r
83         z-index: 7;\r
84         pointer-events: auto;\r
85         }\r
86 .leaflet-top,\r
87 .leaflet-bottom {\r
88         position: absolute;\r
89         z-index: 1000;\r
90         pointer-events: none;\r
91         }\r
92 .leaflet-top {\r
93         top: 0;\r
94         }\r
95 .leaflet-right {\r
96         right: 0;\r
97         }\r
98 .leaflet-bottom {\r
99         bottom: 0;\r
100         }\r
101 .leaflet-left {\r
102         left: 0;\r
103         }\r
104 .leaflet-control {\r
105         float: left;\r
106         clear: both;\r
107         }\r
108 .leaflet-right .leaflet-control {\r
109         float: right;\r
110         }\r
111 .leaflet-top .leaflet-control {\r
112         margin-top: 10px;\r
113         }\r
114 .leaflet-bottom .leaflet-control {\r
115         margin-bottom: 10px;\r
116         }\r
117 .leaflet-left .leaflet-control {\r
118         margin-left: 10px;\r
119         }\r
120 .leaflet-right .leaflet-control {\r
121         margin-right: 10px;\r
122         }\r
123 \r
124 \r
125 /* zoom and fade animations */\r
126 \r
127 .leaflet-fade-anim .leaflet-tile,\r
128 .leaflet-fade-anim .leaflet-popup {\r
129         opacity: 0;\r
130         -webkit-transition: opacity 0.2s linear;\r
131            -moz-transition: opacity 0.2s linear;\r
132              -o-transition: opacity 0.2s linear;\r
133                 transition: opacity 0.2s linear;\r
134         }\r
135 .leaflet-fade-anim .leaflet-tile-loaded,\r
136 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
137         opacity: 1;\r
138         }\r
139 \r
140 .leaflet-zoom-anim .leaflet-zoom-animated {\r
141         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
142            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
143              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);\r
144                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);\r
145         }\r
146 .leaflet-zoom-anim .leaflet-tile,\r
147 .leaflet-pan-anim .leaflet-tile,\r
148 .leaflet-touching .leaflet-zoom-animated {\r
149         -webkit-transition: none;\r
150            -moz-transition: none;\r
151              -o-transition: none;\r
152                 transition: none;\r
153         }\r
154 \r
155 .leaflet-zoom-anim .leaflet-zoom-hide {\r
156         visibility: hidden;\r
157         }\r
158 \r
159 \r
160 /* cursors */\r
161 \r
162 .leaflet-clickable {\r
163         cursor: pointer;\r
164         }\r
165 .leaflet-container {\r
166         cursor: -webkit-grab;\r
167         cursor:    -moz-grab;\r
168         }\r
169 .leaflet-popup-pane,\r
170 .leaflet-control {\r
171         cursor: auto;\r
172         }\r
173 .leaflet-dragging .leaflet-container,\r
174 .leaflet-dragging .leaflet-clickable {\r
175         cursor: move;\r
176         cursor: -webkit-grabbing;\r
177         cursor:    -moz-grabbing;\r
178         }\r
179 \r
180 \r
181 /* visual tweaks */\r
182 \r
183 .leaflet-container {\r
184         background: #ddd;\r
185         outline: 0;\r
186         }\r
187 .leaflet-container a {\r
188         color: #0078A8;\r
189         }\r
190 .leaflet-container a.leaflet-active {\r
191         outline: 2px solid orange;\r
192         }\r
193 .leaflet-zoom-box {\r
194         border: 2px dotted #38f;\r
195         background: rgba(255,255,255,0.5);\r
196         }\r
197 \r
198 \r
199 /* general typography */\r
200 .leaflet-container {\r
201         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;\r
202         }\r
203 \r
204 \r
205 /* general toolbar styles */\r
206 \r
207 .leaflet-bar {\r
208         box-shadow: 0 1px 5px rgba(0,0,0,0.65);\r
209         border-radius: 4px;\r
210         }\r
211 .leaflet-bar a,\r
212 .leaflet-bar a:hover {\r
213         background-color: #fff;\r
214         border-bottom: 1px solid #ccc;\r
215         width: 26px;\r
216         height: 26px;\r
217         line-height: 26px;\r
218         display: block;\r
219         text-align: center;\r
220         text-decoration: none;\r
221         color: black;\r
222         }\r
223 .leaflet-bar a,\r
224 .leaflet-control-layers-toggle {\r
225         background-position: 50% 50%;\r
226         background-repeat: no-repeat;\r
227         display: block;\r
228         }\r
229 .leaflet-bar a:hover {\r
230         background-color: #f4f4f4;\r
231         }\r
232 .leaflet-bar a:first-child {\r
233         border-top-left-radius: 4px;\r
234         border-top-right-radius: 4px;\r
235         }\r
236 .leaflet-bar a:last-child {\r
237         border-bottom-left-radius: 4px;\r
238         border-bottom-right-radius: 4px;\r
239         border-bottom: none;\r
240         }\r
241 .leaflet-bar a.leaflet-disabled {\r
242         cursor: default;\r
243         background-color: #f4f4f4;\r
244         color: #bbb;\r
245         }\r
246 \r
247 .leaflet-touch .leaflet-bar a {\r
248         width: 30px;\r
249         height: 30px;\r
250         line-height: 30px;\r
251         }\r
252 \r
253 \r
254 /* zoom control */\r
255 \r
256 .leaflet-control-zoom-in,\r
257 .leaflet-control-zoom-out {\r
258         font: bold 18px 'Lucida Console', Monaco, monospace;\r
259         text-indent: 1px;\r
260         }\r
261 .leaflet-control-zoom-out {\r
262         font-size: 20px;\r
263         }\r
264 \r
265 .leaflet-touch .leaflet-control-zoom-in {\r
266         font-size: 22px;\r
267         }\r
268 .leaflet-touch .leaflet-control-zoom-out {\r
269         font-size: 24px;\r
270         }\r
271 \r
272 \r
273 /* layers control */\r
274 \r
275 .leaflet-control-layers {\r
276         box-shadow: 0 1px 5px rgba(0,0,0,0.4);\r
277         background: #fff;\r
278         border-radius: 5px;\r
279         }\r
280 .leaflet-control-layers-toggle {\r
281         background-image: url(images/layers.png);\r
282         width: 36px;\r
283         height: 36px;\r
284         }\r
285 .leaflet-retina .leaflet-control-layers-toggle {\r
286         background-image: url(images/layers-2x.png);\r
287         background-size: 26px 26px;\r
288         }\r
289 .leaflet-touch .leaflet-control-layers-toggle {\r
290         width: 44px;\r
291         height: 44px;\r
292         }\r
293 .leaflet-control-layers .leaflet-control-layers-list,\r
294 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {\r
295         display: none;\r
296         }\r
297 .leaflet-control-layers-expanded .leaflet-control-layers-list {\r
298         display: block;\r
299         position: relative;\r
300         }\r
301 .leaflet-control-layers-expanded {\r
302         padding: 6px 10px 6px 6px;\r
303         color: #333;\r
304         background: #fff;\r
305         }\r
306 .leaflet-control-layers-selector {\r
307         margin-top: 2px;\r
308         position: relative;\r
309         top: 1px;\r
310         }\r
311 .leaflet-control-layers label {\r
312         display: block;\r
313         }\r
314 .leaflet-control-layers-separator {\r
315         height: 0;\r
316         border-top: 1px solid #ddd;\r
317         margin: 5px -10px 5px -6px;\r
318         }\r
319 \r
320 \r
321 /* attribution and scale controls */\r
322 \r
323 .leaflet-container .leaflet-control-attribution {\r
324         background: #fff;\r
325         background: rgba(255, 255, 255, 0.7);\r
326         margin: 0;\r
327         }\r
328 .leaflet-control-attribution,\r
329 .leaflet-control-scale-line {\r
330         padding: 0 5px;\r
331         color: #333;\r
332         }\r
333 .leaflet-control-attribution a {\r
334         text-decoration: none;\r
335         }\r
336 .leaflet-control-attribution a:hover {\r
337         text-decoration: underline;\r
338         }\r
339 .leaflet-container .leaflet-control-attribution,\r
340 .leaflet-container .leaflet-control-scale {\r
341         font-size: 11px;\r
342         }\r
343 .leaflet-left .leaflet-control-scale {\r
344         margin-left: 5px;\r
345         }\r
346 .leaflet-bottom .leaflet-control-scale {\r
347         margin-bottom: 5px;\r
348         }\r
349 .leaflet-control-scale-line {\r
350         border: 2px solid #777;\r
351         border-top: none;\r
352         line-height: 1.1;\r
353         padding: 2px 5px 1px;\r
354         font-size: 11px;\r
355         white-space: nowrap;\r
356         overflow: hidden;\r
357         -moz-box-sizing: content-box;\r
358              box-sizing: content-box;\r
359 \r
360         background: #fff;\r
361         background: rgba(255, 255, 255, 0.5);\r
362         }\r
363 .leaflet-control-scale-line:not(:first-child) {\r
364         border-top: 2px solid #777;\r
365         border-bottom: none;\r
366         margin-top: -2px;\r
367         }\r
368 .leaflet-control-scale-line:not(:first-child):not(:last-child) {\r
369         border-bottom: 2px solid #777;\r
370         }\r
371 \r
372 .leaflet-touch .leaflet-control-attribution,\r
373 .leaflet-touch .leaflet-control-layers,\r
374 .leaflet-touch .leaflet-bar {\r
375         box-shadow: none;\r
376         }\r
377 .leaflet-touch .leaflet-control-layers,\r
378 .leaflet-touch .leaflet-bar {\r
379         border: 2px solid rgba(0,0,0,0.2);\r
380         background-clip: padding-box;\r
381         }\r
382 \r
383 \r
384 /* popup */\r
385 \r
386 .leaflet-popup {\r
387         position: absolute;\r
388         text-align: center;\r
389         }\r
390 .leaflet-popup-content-wrapper {\r
391         padding: 1px;\r
392         text-align: left;\r
393         border-radius: 12px;\r
394         }\r
395 .leaflet-popup-content {\r
396         margin: 13px 19px;\r
397         line-height: 1.4;\r
398         }\r
399 .leaflet-popup-content p {\r
400         margin: 18px 0;\r
401         }\r
402 .leaflet-popup-tip-container {\r
403         margin: 0 auto;\r
404         width: 40px;\r
405         height: 20px;\r
406         position: relative;\r
407         overflow: hidden;\r
408         }\r
409 .leaflet-popup-tip {\r
410         width: 17px;\r
411         height: 17px;\r
412         padding: 1px;\r
413 \r
414         margin: -10px auto 0;\r
415 \r
416         -webkit-transform: rotate(45deg);\r
417            -moz-transform: rotate(45deg);\r
418             -ms-transform: rotate(45deg);\r
419              -o-transform: rotate(45deg);\r
420                 transform: rotate(45deg);\r
421         }\r
422 .leaflet-popup-content-wrapper,\r
423 .leaflet-popup-tip {\r
424         background: white;\r
425 \r
426         box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
427         }\r
428 .leaflet-container a.leaflet-popup-close-button {\r
429         position: absolute;\r
430         top: 0;\r
431         right: 0;\r
432         padding: 4px 4px 0 0;\r
433         text-align: center;\r
434         width: 18px;\r
435         height: 14px;\r
436         font: 16px/14px Tahoma, Verdana, sans-serif;\r
437         color: #c3c3c3;\r
438         text-decoration: none;\r
439         font-weight: bold;\r
440         background: transparent;\r
441         }\r
442 .leaflet-container a.leaflet-popup-close-button:hover {\r
443         color: #999;\r
444         }\r
445 .leaflet-popup-scrolled {\r
446         overflow: auto;\r
447         border-bottom: 1px solid #ddd;\r
448         border-top: 1px solid #ddd;\r
449         }\r
450 \r
451 .leaflet-oldie .leaflet-popup-content-wrapper {\r
452         zoom: 1;\r
453         }\r
454 .leaflet-oldie .leaflet-popup-tip {\r
455         width: 24px;\r
456         margin: 0 auto;\r
457 \r
458         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";\r
459         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);\r
460         }\r
461 .leaflet-oldie .leaflet-popup-tip-container {\r
462         margin-top: -1px;\r
463         }\r
464 \r
465 .leaflet-oldie .leaflet-control-zoom,\r
466 .leaflet-oldie .leaflet-control-layers,\r
467 .leaflet-oldie .leaflet-popup-content-wrapper,\r
468 .leaflet-oldie .leaflet-popup-tip {\r
469         border: 1px solid #999;\r
470         }\r
471 \r
472 \r
473 /* div icon */\r
474 \r
475 .leaflet-div-icon {\r
476         background: #fff;\r
477         border: 1px solid #666;\r
478         }\r