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 { /* TODO optimize classes */ |
|
15 position: absolute; |
|
16 } |
|
17 .leaflet-container { |
|
18 overflow: hidden; |
|
19 } |
|
20 .leaflet-tile-pane { |
|
21 -webkit-transform: translate3d(0,0,0); |
|
22 } |
|
23 .leaflet-tile, |
|
24 .leaflet-marker-icon, |
|
25 .leaflet-marker-shadow { |
|
26 -moz-user-select: none; |
|
27 -webkit-user-select: none; |
|
28 user-select: none; |
|
29 } |
|
30 .leaflet-marker-icon, |
|
31 .leaflet-marker-shadow { |
|
32 display: block; |
|
33 } |
|
34 .leaflet-clickable { |
|
35 cursor: pointer; |
|
36 } |
|
37 .leaflet-container img { |
|
38 max-width: none !important; |
|
39 } |
|
40 |
|
41 .leaflet-tile-pane { z-index: 2; } |
|
42 |
|
43 .leaflet-objects-pane { z-index: 3; } |
|
44 .leaflet-overlay-pane { z-index: 4; } |
|
45 .leaflet-shadow-pane { z-index: 5; } |
|
46 .leaflet-marker-pane { z-index: 6; } |
|
47 .leaflet-popup-pane { z-index: 7; } |
|
48 |
|
49 .leaflet-zoom-box { |
|
50 width: 0; |
|
51 height: 0; |
|
52 } |
|
53 |
|
54 .leaflet-tile { |
|
55 visibility: hidden; |
|
56 } |
|
57 .leaflet-tile-loaded { |
|
58 visibility: inherit; |
|
59 } |
|
60 |
|
61 a.leaflet-active { |
|
62 outline: 2px solid orange; |
|
63 } |
|
64 |
|
65 |
|
66 /* Leaflet controls */ |
|
67 |
|
68 .leaflet-control { |
|
69 position: relative; |
|
70 z-index: 7; |
|
71 } |
|
72 .leaflet-top, |
|
73 .leaflet-bottom { |
|
74 position: absolute; |
|
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 .leaflet-control-zoom, .leaflet-control-layers { |
|
109 -moz-border-radius: 7px; |
|
110 -webkit-border-radius: 7px; |
|
111 border-radius: 7px; |
|
112 } |
|
113 .leaflet-control-zoom { |
|
114 padding: 5px; |
|
115 background: rgba(0, 0, 0, 0.25); |
|
116 } |
|
117 .leaflet-control-zoom a { |
|
118 background-color: rgba(255, 255, 255, 0.75); |
|
119 } |
|
120 .leaflet-control-zoom a, .leaflet-control-layers a { |
|
121 background-position: 50% 50%; |
|
122 background-repeat: no-repeat; |
|
123 display: block; |
|
124 } |
|
125 .leaflet-control-zoom a { |
|
126 -moz-border-radius: 4px; |
|
127 -webkit-border-radius: 4px; |
|
128 border-radius: 4px; |
|
129 width: 19px; |
|
130 height: 19px; |
|
131 } |
|
132 .leaflet-control-zoom a:hover { |
|
133 background-color: #fff; |
|
134 } |
|
135 .leaflet-big-buttons .leaflet-control-zoom a { |
|
136 width: 27px; |
|
137 height: 27px; |
|
138 } |
|
139 .leaflet-control-zoom-in { |
|
140 background-image: url(images/zoom-in.png); |
|
141 margin-bottom: 5px; |
|
142 } |
|
143 .leaflet-control-zoom-out { |
|
144 background-image: url(images/zoom-out.png); |
|
145 } |
|
146 |
|
147 .leaflet-control-layers { |
|
148 -moz-box-shadow: 0 0 7px #999; |
|
149 -webkit-box-shadow: 0 0 7px #999; |
|
150 box-shadow: 0 0 7px #999; |
|
151 |
|
152 background: #f8f8f9; |
|
153 } |
|
154 .leaflet-control-layers a { |
|
155 background-image: url(images/layers.png); |
|
156 width: 36px; |
|
157 height: 36px; |
|
158 } |
|
159 .leaflet-big-buttons .leaflet-control-layers a { |
|
160 width: 44px; |
|
161 height: 44px; |
|
162 } |
|
163 .leaflet-control-layers .leaflet-control-layers-list, |
|
164 .leaflet-control-layers-expanded .leaflet-control-layers-toggle { |
|
165 display: none; |
|
166 } |
|
167 .leaflet-control-layers-expanded .leaflet-control-layers-list { |
|
168 display: block; |
|
169 position: relative; |
|
170 } |
|
171 .leaflet-control-layers-expanded { |
|
172 padding: 6px 10px 6px 6px; |
|
173 font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
174 color: #333; |
|
175 background: #fff; |
|
176 } |
|
177 .leaflet-control-layers input { |
|
178 margin-top: 2px; |
|
179 position: relative; |
|
180 top: 1px; |
|
181 } |
|
182 .leaflet-control-layers label { |
|
183 display: block; |
|
184 } |
|
185 .leaflet-control-layers-separator { |
|
186 height: 0; |
|
187 border-top: 1px solid #ddd; |
|
188 margin: 5px -10px 5px -6px; |
|
189 } |
|
190 |
|
191 .leaflet-container .leaflet-control-attribution { |
|
192 margin: 0; |
|
193 padding: 0 5px; |
|
194 |
|
195 font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
196 color: #333; |
|
197 |
|
198 background-color: rgba(255, 255, 255, 0.7); |
|
199 |
|
200 -moz-box-shadow: 0 0 7px #ccc; |
|
201 -webkit-box-shadow: 0 0 7px #ccc; |
|
202 box-shadow: 0 0 7px #ccc; |
|
203 } |
|
204 |
|
205 |
|
206 /* Fade animations */ |
|
207 |
|
208 .leaflet-fade-anim .leaflet-tile { |
|
209 opacity: 0; |
|
210 |
|
211 -webkit-transition: opacity 0.2s linear; |
|
212 -moz-transition: opacity 0.2s linear; |
|
213 -o-transition: opacity 0.2s linear; |
|
214 transition: opacity 0.2s linear; |
|
215 } |
|
216 .leaflet-fade-anim .leaflet-tile-loaded { |
|
217 opacity: 1; |
|
218 } |
|
219 |
|
220 .leaflet-fade-anim .leaflet-popup { |
|
221 opacity: 0; |
|
222 |
|
223 -webkit-transition: opacity 0.2s linear; |
|
224 -moz-transition: opacity 0.2s linear; |
|
225 -o-transition: opacity 0.2s linear; |
|
226 transition: opacity 0.2s linear; |
|
227 } |
|
228 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { |
|
229 opacity: 1; |
|
230 } |
|
231 |
|
232 .leaflet-zoom-anim .leaflet-tile { |
|
233 -webkit-transition: none; |
|
234 -moz-transition: none; |
|
235 -o-transition: none; |
|
236 transition: none; |
|
237 } |
|
238 |
|
239 .leaflet-zoom-anim .leaflet-objects-pane { |
|
240 visibility: hidden; |
|
241 } |
|
242 |
|
243 |
|
244 /* Popup layout */ |
|
245 |
|
246 .leaflet-popup { |
|
247 position: absolute; |
|
248 text-align: center; |
|
249 -webkit-transform: translate3d(0,0,0); |
|
250 } |
|
251 .leaflet-popup-content-wrapper { |
|
252 padding: 1px; |
|
253 text-align: left; |
|
254 } |
|
255 .leaflet-popup-content { |
|
256 margin: 19px; |
|
257 } |
|
258 .leaflet-popup-tip-container { |
|
259 margin: 0 auto; |
|
260 width: 40px; |
|
261 height: 16px; |
|
262 position: relative; |
|
263 overflow: hidden; |
|
264 } |
|
265 .leaflet-popup-tip { |
|
266 width: 15px; |
|
267 height: 15px; |
|
268 padding: 1px; |
|
269 |
|
270 margin: -8px auto 0; |
|
271 |
|
272 -moz-transform: rotate(45deg); |
|
273 -webkit-transform: rotate(45deg); |
|
274 -ms-transform: rotate(45deg); |
|
275 -o-transform: rotate(45deg); |
|
276 transform: rotate(45deg); |
|
277 } |
|
278 .leaflet-popup-close-button { |
|
279 position: absolute; |
|
280 top: 9px; |
|
281 right: 9px; |
|
282 |
|
283 width: 10px; |
|
284 height: 10px; |
|
285 |
|
286 overflow: hidden; |
|
287 } |
|
288 .leaflet-popup-content p { |
|
289 margin: 18px 0; |
|
290 } |
|
291 |
|
292 |
|
293 /* Visual appearance */ |
|
294 |
|
295 .leaflet-container { |
|
296 background: #ddd; |
|
297 } |
|
298 .leaflet-container a { |
|
299 color: #0078A8; |
|
300 } |
|
301 .leaflet-zoom-box { |
|
302 border: 2px dotted #05f; |
|
303 background: white; |
|
304 opacity: 0.5; |
|
305 } |
|
306 .leaflet-popup-content-wrapper, .leaflet-popup-tip { |
|
307 background: white; |
|
308 |
|
309 box-shadow: 0 1px 10px #888; |
|
310 -moz-box-shadow: 0 1px 10px #888; |
|
311 -webkit-box-shadow: 0 1px 14px #999; |
|
312 } |
|
313 .leaflet-popup-content-wrapper { |
|
314 -moz-border-radius: 20px; |
|
315 -webkit-border-radius: 20px; |
|
316 border-radius: 20px; |
|
317 } |
|
318 .leaflet-popup-content { |
|
319 font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
320 } |
|
321 .leaflet-popup-close-button { |
|
322 background: white url(images/popup-close.png); |
|
323 } |
|