CoCalc -- leaflet-1.9.3.css

GitHub Repository: galaxyproject/training-material
Path: blob/main/assets/css/leaflet-1.9.3.css
²⁵⁹⁴ views
1
/* required styles */
2

3
.leaflet-pane,
4
.leaflet-tile,
5
.leaflet-marker-icon,
6
.leaflet-marker-shadow,
7
.leaflet-tile-container,
8
.leaflet-pane > svg,
9
.leaflet-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
	}
20
.leaflet-tile,
21
.leaflet-marker-icon,
22
.leaflet-marker-shadow {
23
	-webkit-user-select: none;
24
	   -moz-user-select: none;
25
	        user-select: none;
26
	  -webkit-user-drag: none;
27
	}
28
/* Prevents IE11 from highlighting tiles in blue */
29
.leaflet-tile::selection {
30
	background: transparent;
31
}
32
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
33
.leaflet-safari .leaflet-tile {
34
	image-rendering: -webkit-optimize-contrast;
35
	}
36
/* hack that prevents hw layers "stretching" when loading new tiles */
37
.leaflet-safari .leaflet-tile-container {
38
	width: 1600px;
39
	height: 1600px;
40
	-webkit-transform-origin: 0 0;
41
	}
42
.leaflet-marker-icon,
43
.leaflet-marker-shadow {
44
	display: block;
45
	}
46
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
47
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
48
.leaflet-container .leaflet-overlay-pane svg {
49
	max-width: none !important;
50
	max-height: none !important;
51
	}
52
.leaflet-container .leaflet-marker-pane img,
53
.leaflet-container .leaflet-shadow-pane img,
54
.leaflet-container .leaflet-tile-pane img,
55
.leaflet-container img.leaflet-image-layer,
56
.leaflet-container .leaflet-tile {
57
	max-width: none !important;
58
	max-height: none !important;
59
	width: auto;
60
	padding: 0;
61
	}
62

63
.leaflet-container.leaflet-touch-zoom {
64
	-ms-touch-action: pan-x pan-y;
65
	touch-action: pan-x pan-y;
66
	}
67
.leaflet-container.leaflet-touch-drag {
68
	-ms-touch-action: pinch-zoom;
69
	/* Fallback for FF which doesn't support pinch-zoom */
70
	touch-action: none;
71
	touch-action: pinch-zoom;
72
}
73
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
74
	-ms-touch-action: none;
75
	touch-action: none;
76
}
77
.leaflet-container {
78
	-webkit-tap-highlight-color: transparent;
79
}
80
.leaflet-container a {
81
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
82
}
83
.leaflet-tile {
84
	filter: inherit;
85
	visibility: hidden;
86
	}
87
.leaflet-tile-loaded {
88
	visibility: inherit;
89
	}
90
.leaflet-zoom-box {
91
	width: 0;
92
	height: 0;
93
	-moz-box-sizing: border-box;
94
	     box-sizing: border-box;
95
	z-index: 800;
96
	}
97
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
98
.leaflet-overlay-pane svg {
99
	-moz-user-select: none;
100
	}
101

102
.leaflet-pane         { z-index: 400; }
103

104
.leaflet-tile-pane    { z-index: 200; }
105
.leaflet-overlay-pane { z-index: 400; }
106
.leaflet-shadow-pane  { z-index: 500; }
107
.leaflet-marker-pane  { z-index: 600; }
108
.leaflet-tooltip-pane   { z-index: 650; }
109
.leaflet-popup-pane   { z-index: 700; }
110

111
.leaflet-map-pane canvas { z-index: 100; }
112
.leaflet-map-pane svg    { z-index: 200; }
113

114
.leaflet-vml-shape {
115
	width: 1px;
116
	height: 1px;
117
	}
118
.lvml {
119
	behavior: url(#default#VML);
120
	display: inline-block;
121
	position: absolute;
122
	}
123

124

125
/* control positioning */
126

127
.leaflet-control {
128
	position: relative;
129
	z-index: 800;
130
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
131
	pointer-events: auto;
132
	}
133
.leaflet-top,
134
.leaflet-bottom {
135
	position: absolute;
136
	z-index: 1000;
137
	pointer-events: none;
138
	}
139
.leaflet-top {
140
	top: 0;
141
	}
142
.leaflet-right {
143
	right: 0;
144
	}
145
.leaflet-bottom {
146
	bottom: 0;
147
	}
148
.leaflet-left {
149
	left: 0;
150
	}
151
.leaflet-control {
152
	float: left;
153
	clear: both;
154
	}
155
.leaflet-right .leaflet-control {
156
	float: right;
157
	}
158
.leaflet-top .leaflet-control {
159
	margin-top: 10px;
160
	}
161
.leaflet-bottom .leaflet-control {
162
	margin-bottom: 10px;
163
	}
164
.leaflet-left .leaflet-control {
165
	margin-left: 10px;
166
	}
167
.leaflet-right .leaflet-control {
168
	margin-right: 10px;
169
	}
170

171

172
/* zoom and fade animations */
173

174
.leaflet-fade-anim .leaflet-popup {
175
	opacity: 0;
176
	-webkit-transition: opacity 0.2s linear;
177
	   -moz-transition: opacity 0.2s linear;
178
	        transition: opacity 0.2s linear;
179
	}
180
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
181
	opacity: 1;
182
	}
183
.leaflet-zoom-animated {
184
	-webkit-transform-origin: 0 0;
185
	    -ms-transform-origin: 0 0;
186
	        transform-origin: 0 0;
187
	}
188
svg.leaflet-zoom-animated {
189
	will-change: transform;
190
}
191

192
.leaflet-zoom-anim .leaflet-zoom-animated {
193
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
194
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
195
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
196
	}
197
.leaflet-zoom-anim .leaflet-tile,
198
.leaflet-pan-anim .leaflet-tile {
199
	-webkit-transition: none;
200
	   -moz-transition: none;
201
	        transition: none;
202
	}
203

204
.leaflet-zoom-anim .leaflet-zoom-hide {
205
	visibility: hidden;
206
	}
207

208

209
/* cursors */
210

211
.leaflet-interactive {
212
	cursor: pointer;
213
	}
214
.leaflet-grab {
215
	cursor: -webkit-grab;
216
	cursor:    -moz-grab;
217
	cursor:         grab;
218
	}
219
.leaflet-crosshair,
220
.leaflet-crosshair .leaflet-interactive {
221
	cursor: crosshair;
222
	}
223
.leaflet-popup-pane,
224
.leaflet-control {
225
	cursor: auto;
226
	}
227
.leaflet-dragging .leaflet-grab,
228
.leaflet-dragging .leaflet-grab .leaflet-interactive,
229
.leaflet-dragging .leaflet-marker-draggable {
230
	cursor: move;
231
	cursor: -webkit-grabbing;
232
	cursor:    -moz-grabbing;
233
	cursor:         grabbing;
234
	}
235

236
/* marker & overlays interactivity */
237
.leaflet-marker-icon,
238
.leaflet-marker-shadow,
239
.leaflet-image-layer,
240
.leaflet-pane > svg path,
241
.leaflet-tile-container {
242
	pointer-events: none;
243
	}
244

245
.leaflet-marker-icon.leaflet-interactive,
246
.leaflet-image-layer.leaflet-interactive,
247
.leaflet-pane > svg path.leaflet-interactive,
248
svg.leaflet-image-layer.leaflet-interactive path {
249
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
250
	pointer-events: auto;
251
	}
252

253
/* visual tweaks */
254

255
.leaflet-container {
256
	background: #ddd;
257
	outline-offset: 1px;
258
	}
259
.leaflet-container a {
260
	color: #0078A8;
261
	}
262
.leaflet-zoom-box {
263
	border: 2px dotted #38f;
264
	background: rgba(255,255,255,0.5);
265
	}
266

267

268
/* general typography */
269
.leaflet-container {
270
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
271
	font-size: 12px;
272
	font-size: 0.75rem;
273
	line-height: 1.5;
274
	}
275

276

277
/* general toolbar styles */
278

279
.leaflet-bar {
280
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
281
	border-radius: 4px;
282
	}
283
.leaflet-bar a {
284
	background-color: #fff;
285
	border-bottom: 1px solid #ccc;
286
	width: 26px;
287
	height: 26px;
288
	line-height: 26px;
289
	display: block;
290
	text-align: center;
291
	text-decoration: none;
292
	color: black;
293
	}
294
.leaflet-bar a,
295
.leaflet-control-layers-toggle {
296
	background-position: 50% 50%;
297
	background-repeat: no-repeat;
298
	display: block;
299
	}
300
.leaflet-bar a:hover,
301
.leaflet-bar a:focus {
302
	background-color: #f4f4f4;
303
	}
304
.leaflet-bar a:first-child {
305
	border-top-left-radius: 4px;
306
	border-top-right-radius: 4px;
307
	}
308
.leaflet-bar a:last-child {
309
	border-bottom-left-radius: 4px;
310
	border-bottom-right-radius: 4px;
311
	border-bottom: none;
312
	}
313
.leaflet-bar a.leaflet-disabled {
314
	cursor: default;
315
	background-color: #f4f4f4;
316
	color: #bbb;
317
	}
318

319
.leaflet-touch .leaflet-bar a {
320
	width: 30px;
321
	height: 30px;
322
	line-height: 30px;
323
	}
324
.leaflet-touch .leaflet-bar a:first-child {
325
	border-top-left-radius: 2px;
326
	border-top-right-radius: 2px;
327
	}
328
.leaflet-touch .leaflet-bar a:last-child {
329
	border-bottom-left-radius: 2px;
330
	border-bottom-right-radius: 2px;
331
	}
332

333
/* zoom control */
334

335
.leaflet-control-zoom-in,
336
.leaflet-control-zoom-out {
337
	font: bold 18px 'Lucida Console', Monaco, monospace;
338
	text-indent: 1px;
339
	}
340

341
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
342
	font-size: 22px;
343
	}
344

345

346
/* layers control */
347

348
.leaflet-control-layers {
349
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
350
	background: #fff;
351
	border-radius: 5px;
352
	}
353
.leaflet-control-layers-toggle {
354
	background-image: url(images/layers.png);
355
	width: 36px;
356
	height: 36px;
357
	}
358
.leaflet-retina .leaflet-control-layers-toggle {
359
	background-image: url(images/layers-2x.png);
360
	background-size: 26px 26px;
361
	}
362
.leaflet-touch .leaflet-control-layers-toggle {
363
	width: 44px;
364
	height: 44px;
365
	}
366
.leaflet-control-layers .leaflet-control-layers-list,
367
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
368
	display: none;
369
	}
370
.leaflet-control-layers-expanded .leaflet-control-layers-list {
371
	display: block;
372
	position: relative;
373
	}
374
.leaflet-control-layers-expanded {
375
	padding: 6px 10px 6px 6px;
376
	color: #333;
377
	background: #fff;
378
	}
379
.leaflet-control-layers-scrollbar {
380
	overflow-y: scroll;
381
	overflow-x: hidden;
382
	padding-right: 5px;
383
	}
384
.leaflet-control-layers-selector {
385
	margin-top: 2px;
386
	position: relative;
387
	top: 1px;
388
	}
389
.leaflet-control-layers label {
390
	display: block;
391
	font-size: 13px;
392
	font-size: 1.08333em;
393
	}
394
.leaflet-control-layers-separator {
395
	height: 0;
396
	border-top: 1px solid #ddd;
397
	margin: 5px -10px 5px -6px;
398
	}
399

400
/* Default icon URLs */
401
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
402
	background-image: url(images/marker-icon.png);
403
	}
404

405

406
/* attribution and scale controls */
407

408
.leaflet-container .leaflet-control-attribution {
409
	background: #fff;
410
	background: rgba(255, 255, 255, 0.8);
411
	margin: 0;
412
	}
413
.leaflet-control-attribution,
414
.leaflet-control-scale-line {
415
	padding: 0 5px;
416
	color: #333;
417
	line-height: 1.4;
418
	}
419
.leaflet-control-attribution a {
420
	text-decoration: none;
421
	}
422
.leaflet-control-attribution a:hover,
423
.leaflet-control-attribution a:focus {
424
	text-decoration: underline;
425
	}
426
.leaflet-attribution-flag {
427
	display: inline !important;
428
	vertical-align: baseline !important;
429
	width: 1em;
430
	height: 0.6669em;
431
	}
432
.leaflet-left .leaflet-control-scale {
433
	margin-left: 5px;
434
	}
435
.leaflet-bottom .leaflet-control-scale {
436
	margin-bottom: 5px;
437
	}
438
.leaflet-control-scale-line {
439
	border: 2px solid #777;
440
	border-top: none;
441
	line-height: 1.1;
442
	padding: 2px 5px 1px;
443
	white-space: nowrap;
444
	-moz-box-sizing: border-box;
445
	     box-sizing: border-box;
446
	background: rgba(255, 255, 255, 0.8);
447
	text-shadow: 1px 1px #fff;
448
	}
449
.leaflet-control-scale-line:not(:first-child) {
450
	border-top: 2px solid #777;
451
	border-bottom: none;
452
	margin-top: -2px;
453
	}
454
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
455
	border-bottom: 2px solid #777;
456
	}
457

458
.leaflet-touch .leaflet-control-attribution,
459
.leaflet-touch .leaflet-control-layers,
460
.leaflet-touch .leaflet-bar {
461
	box-shadow: none;
462
	}
463
.leaflet-touch .leaflet-control-layers,
464
.leaflet-touch .leaflet-bar {
465
	border: 2px solid rgba(0,0,0,0.2);
466
	background-clip: padding-box;
467
	}
468

469

470
/* popup */
471

472
.leaflet-popup {
473
	position: absolute;
474
	text-align: center;
475
	margin-bottom: 20px;
476
	}
477
.leaflet-popup-content-wrapper {
478
	padding: 1px;
479
	text-align: left;
480
	border-radius: 12px;
481
	}
482
.leaflet-popup-content {
483
	margin: 13px 24px 13px 20px;
484
	line-height: 1.3;
485
	font-size: 13px;
486
	font-size: 1.08333em;
487
	min-height: 1px;
488
	}
489
.leaflet-popup-content p {
490
	margin: 17px 0;
491
	margin: 1.3em 0;
492
	}
493
.leaflet-popup-tip-container {
494
	width: 40px;
495
	height: 20px;
496
	position: absolute;
497
	left: 50%;
498
	margin-top: -1px;
499
	margin-left: -20px;
500
	overflow: hidden;
501
	pointer-events: none;
502
	}
503
.leaflet-popup-tip {
504
	width: 17px;
505
	height: 17px;
506
	padding: 1px;
507

508
	margin: -10px auto 0;
509
	pointer-events: auto;
510

511
	-webkit-transform: rotate(45deg);
512
	   -moz-transform: rotate(45deg);
513
	    -ms-transform: rotate(45deg);
514
	        transform: rotate(45deg);
515
	}
516
.leaflet-popup-content-wrapper,
517
.leaflet-popup-tip {
518
	background: white;
519
	color: #333;
520
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
521
	}
522
.leaflet-container a.leaflet-popup-close-button {
523
	position: absolute;
524
	top: 0;
525
	right: 0;
526
	border: none;
527
	text-align: center;
528
	width: 24px;
529
	height: 24px;
530
	font: 16px/24px Tahoma, Verdana, sans-serif;
531
	color: #757575;
532
	text-decoration: none;
533
	background: transparent;
534
	}
535
.leaflet-container a.leaflet-popup-close-button:hover,
536
.leaflet-container a.leaflet-popup-close-button:focus {
537
	color: #585858;
538
	}
539
.leaflet-popup-scrolled {
540
	overflow: auto;
541
	}
542

543
.leaflet-oldie .leaflet-popup-content-wrapper {
544
	-ms-zoom: 1;
545
	}
546
.leaflet-oldie .leaflet-popup-tip {
547
	width: 24px;
548
	margin: 0 auto;
549

550
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
551
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
552
	}
553

554
.leaflet-oldie .leaflet-control-zoom,
555
.leaflet-oldie .leaflet-control-layers,
556
.leaflet-oldie .leaflet-popup-content-wrapper,
557
.leaflet-oldie .leaflet-popup-tip {
558
	border: 1px solid #999;
559
	}
560

561

562
/* div icon */
563

564
.leaflet-div-icon {
565
	background: #fff;
566
	border: 1px solid #666;
567
	}
568

569

570
/* Tooltip */
571
/* Base styles for the element that has a tooltip */
572
.leaflet-tooltip {
573
	position: absolute;
574
	padding: 6px;
575
	background-color: #fff;
576
	border: 1px solid #fff;
577
	border-radius: 3px;
578
	color: #222;
579
	white-space: nowrap;
580
	-webkit-user-select: none;
581
	-moz-user-select: none;
582
	-ms-user-select: none;
583
	user-select: none;
584
	pointer-events: none;
585
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
586
	}
587
.leaflet-tooltip.leaflet-interactive {
588
	cursor: pointer;
589
	pointer-events: auto;
590
	}
591
.leaflet-tooltip-top:before,
592
.leaflet-tooltip-bottom:before,
593
.leaflet-tooltip-left:before,
594
.leaflet-tooltip-right:before {
595
	position: absolute;
596
	pointer-events: none;
597
	border: 6px solid transparent;
598
	background: transparent;
599
	content: "";
600
	}
601

602
/* Directions */
603

604
.leaflet-tooltip-bottom {
605
	margin-top: 6px;
606
}
607
.leaflet-tooltip-top {
608
	margin-top: -6px;
609
}
610
.leaflet-tooltip-bottom:before,
611
.leaflet-tooltip-top:before {
612
	left: 50%;
613
	margin-left: -6px;
614
	}
615
.leaflet-tooltip-top:before {
616
	bottom: 0;
617
	margin-bottom: -12px;
618
	border-top-color: #fff;
619
	}
620
.leaflet-tooltip-bottom:before {
621
	top: 0;
622
	margin-top: -12px;
623
	margin-left: -6px;
624
	border-bottom-color: #fff;
625
	}
626
.leaflet-tooltip-left {
627
	margin-left: -6px;
628
}
629
.leaflet-tooltip-right {
630
	margin-left: 6px;
631
}
632
.leaflet-tooltip-left:before,
633
.leaflet-tooltip-right:before {
634
	top: 50%;
635
	margin-top: -6px;
636
	}
637
.leaflet-tooltip-left:before {
638
	right: 0;
639
	margin-right: -12px;
640
	border-left-color: #fff;
641
	}
642
.leaflet-tooltip-right:before {
643
	left: 0;
644
	margin-left: -12px;
645
	border-right-color: #fff;
646
	}
647

648
/* Printing */
649
	
650
@media print {
651
	/* Prevent printers from removing background-images of controls. */
652
	.leaflet-control {
653
		-webkit-print-color-adjust: exact;
654
		print-color-adjust: exact;
655
		}
656
	}
657

658
Product

Resources

Company
