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