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