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