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