leaflet/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-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 .leaflet-container .leaflet-marker-pane img,
  50 .leaflet-container .leaflet-shadow-pane img,
  51 .leaflet-container .leaflet-tile-pane img,
  52 .leaflet-container img.leaflet-image-layer,
  53 .leaflet-container .leaflet-tile {
  54         max-width: none !important;
  55         max-height: none !important;
  56         }
  57
  58 .leaflet-container.leaflet-touch-zoom {
  59         -ms-touch-action: pan-x pan-y;
  60         touch-action: pan-x pan-y;
  61         }
  62 .leaflet-container.leaflet-touch-drag {
  63         -ms-touch-action: pinch-zoom;
  64         /* Fallback for FF which doesn't support pinch-zoom */
  65         touch-action: none;
  66         touch-action: pinch-zoom;
  67 }
  68 .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  69         -ms-touch-action: none;
  70         touch-action: none;
  71 }
  72 .leaflet-container {
  73         -webkit-tap-highlight-color: transparent;
  74 }
  75 .leaflet-container a {
  76         -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
  77 }
  78 .leaflet-tile {
  79         filter: inherit;
  80         visibility: hidden;
  81         }
  82 .leaflet-tile-loaded {
  83         visibility: inherit;
  84         }
  85 .leaflet-zoom-box {
  86         width: 0;
  87         height: 0;
  88         -moz-box-sizing: border-box;
  89              box-sizing: border-box;
  90         z-index: 800;
  91         }
  92 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  93 .leaflet-overlay-pane svg {
  94         -moz-user-select: none;
  95         }
  96
  97 .leaflet-pane         { z-index: 400; }
  98
  99 .leaflet-tile-pane    { z-index: 200; }
 100 .leaflet-overlay-pane { z-index: 400; }
 101 .leaflet-shadow-pane  { z-index: 500; }
 102 .leaflet-marker-pane  { z-index: 600; }
 103 .leaflet-tooltip-pane   { z-index: 650; }
 104 .leaflet-popup-pane   { z-index: 700; }
 105
 106 .leaflet-map-pane canvas { z-index: 100; }
 107 .leaflet-map-pane svg    { z-index: 200; }
 108
 109 .leaflet-vml-shape {
 110         width: 1px;
 111         height: 1px;
 112         }
 113 .lvml {
 114         behavior: url(#default#VML);
 115         display: inline-block;
 116         position: absolute;
 117         }
 118
 119
 120 /* control positioning */
 121
 122 .leaflet-control {
 123         position: relative;
 124         z-index: 800;
 125         pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
 126         pointer-events: auto;
 127         }
 128 .leaflet-top,
 129 .leaflet-bottom {
 130         position: absolute;
 131         z-index: 1000;
 132         pointer-events: none;
 133         }
 134 .leaflet-top {
 135         top: 0;
 136         }
 137 .leaflet-right {
 138         right: 0;
 139         }
 140 .leaflet-bottom {
 141         bottom: 0;
 142         }
 143 .leaflet-left {
 144         left: 0;
 145         }
 146 .leaflet-control {
 147         float: left;
 148         clear: both;
 149         }
 150 .leaflet-right .leaflet-control {
 151         float: right;
 152         }
 153 .leaflet-top .leaflet-control {
 154         margin-top: 10px;
 155         }
 156 .leaflet-bottom .leaflet-control {
 157         margin-bottom: 10px;
 158         }
 159 .leaflet-left .leaflet-control {
 160         margin-left: 10px;
 161         }
 162 .leaflet-right .leaflet-control {
 163         margin-right: 10px;
 164         }
 165
 166
 167 /* zoom and fade animations */
 168
 169 .leaflet-fade-anim .leaflet-tile {
 170         will-change: opacity;
 171         }
 172 .leaflet-fade-anim .leaflet-popup {
 173         opacity: 0;
 174         -webkit-transition: opacity 0.2s linear;
 175            -moz-transition: opacity 0.2s linear;
 176                 transition: opacity 0.2s linear;
 177         }
 178 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 179         opacity: 1;
 180         }
 181 .leaflet-zoom-animated {
 182         -webkit-transform-origin: 0 0;
 183             -ms-transform-origin: 0 0;
 184                 transform-origin: 0 0;
 185         }
 186 .leaflet-zoom-anim .leaflet-zoom-animated {
 187         will-change: transform;
 188         }
 189 .leaflet-zoom-anim .leaflet-zoom-animated {
 190         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 191            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
 192                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
 193         }
 194 .leaflet-zoom-anim .leaflet-tile,
 195 .leaflet-pan-anim .leaflet-tile {
 196         -webkit-transition: none;
 197            -moz-transition: none;
 198                 transition: none;
 199         }
 200
 201 .leaflet-zoom-anim .leaflet-zoom-hide {
 202         visibility: hidden;
 203         }
 204
 205
 206 /* cursors */
 207
 208 .leaflet-interactive {
 209         cursor: pointer;
 210         }
 211 .leaflet-grab {
 212         cursor: -webkit-grab;
 213         cursor:    -moz-grab;
 214         cursor:         grab;
 215         }
 216 .leaflet-crosshair,
 217 .leaflet-crosshair .leaflet-interactive {
 218         cursor: crosshair;
 219         }
 220 .leaflet-popup-pane,
 221 .leaflet-control {
 222         cursor: auto;
 223         }
 224 .leaflet-dragging .leaflet-grab,
 225 .leaflet-dragging .leaflet-grab .leaflet-interactive,
 226 .leaflet-dragging .leaflet-marker-draggable {
 227         cursor: move;
 228         cursor: -webkit-grabbing;
 229         cursor:    -moz-grabbing;
 230         cursor:         grabbing;
 231         }
 232
 233 /* marker & overlays interactivity */
 234 .leaflet-marker-icon,
 235 .leaflet-marker-shadow,
 236 .leaflet-image-layer,
 237 .leaflet-pane > svg path,
 238 .leaflet-tile-container {
 239         pointer-events: none;
 240         }
 241
 242 .leaflet-marker-icon.leaflet-interactive,
 243 .leaflet-image-layer.leaflet-interactive,
 244 .leaflet-pane > svg path.leaflet-interactive,
 245 svg.leaflet-image-layer.leaflet-interactive path {
 246         pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
 247         pointer-events: auto;
 248         }
 249
 250 /* visual tweaks */
 251
 252 .leaflet-container {
 253         background: #ddd;
 254         outline: 0;
 255         }
 256 .leaflet-container a {
 257         color: #0078A8;
 258         }
 259 .leaflet-container a.leaflet-active {
 260         outline: 2px solid orange;
 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: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 271         }
 272
 273
 274 /* general toolbar styles */
 275
 276 .leaflet-bar {
 277         box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 278         border-radius: 4px;
 279         }
 280 .leaflet-bar a,
 281 .leaflet-bar a:hover {
 282         background-color: #fff;
 283         border-bottom: 1px solid #ccc;
 284         width: 26px;
 285         height: 26px;
 286         line-height: 26px;
 287         display: block;
 288         text-align: center;
 289         text-decoration: none;
 290         color: black;
 291         }
 292 .leaflet-bar a,
 293 .leaflet-control-layers-toggle {
 294         background-position: 50% 50%;
 295         background-repeat: no-repeat;
 296         display: block;
 297         }
 298 .leaflet-bar a:hover {
 299         background-color: #f4f4f4;
 300         }
 301 .leaflet-bar a:first-child {
 302         border-top-left-radius: 4px;
 303         border-top-right-radius: 4px;
 304         }
 305 .leaflet-bar a:last-child {
 306         border-bottom-left-radius: 4px;
 307         border-bottom-right-radius: 4px;
 308         border-bottom: none;
 309         }
 310 .leaflet-bar a.leaflet-disabled {
 311         cursor: default;
 312         background-color: #f4f4f4;
 313         color: #bbb;
 314         }
 315
 316 .leaflet-touch .leaflet-bar a {
 317         width: 30px;
 318         height: 30px;
 319         line-height: 30px;
 320         }
 321 .leaflet-touch .leaflet-bar a:first-child {
 322         border-top-left-radius: 2px;
 323         border-top-right-radius: 2px;
 324         }
 325 .leaflet-touch .leaflet-bar a:last-child {
 326         border-bottom-left-radius: 2px;
 327         border-bottom-right-radius: 2px;
 328         }
 329
 330 /* zoom control */
 331
 332 .leaflet-control-zoom-in,
 333 .leaflet-control-zoom-out {
 334         font: bold 18px 'Lucida Console', Monaco, monospace;
 335         text-indent: 1px;
 336         }
 337
 338 .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
 339         font-size: 22px;
 340         }
 341
 342
 343 /* layers control */
 344
 345 .leaflet-control-layers {
 346         box-shadow: 0 1px 5px rgba(0,0,0,0.4);
 347         background: #fff;
 348         border-radius: 5px;
 349         }
 350 .leaflet-control-layers-toggle {
 351         background-image: url(images/layers.png);
 352         width: 36px;
 353         height: 36px;
 354         }
 355 .leaflet-retina .leaflet-control-layers-toggle {
 356         background-image: url(images/layers-2x.png);
 357         background-size: 26px 26px;
 358         }
 359 .leaflet-touch .leaflet-control-layers-toggle {
 360         width: 44px;
 361         height: 44px;
 362         }
 363 .leaflet-control-layers .leaflet-control-layers-list,
 364 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
 365         display: none;
 366         }
 367 .leaflet-control-layers-expanded .leaflet-control-layers-list {
 368         display: block;
 369         position: relative;
 370         }
 371 .leaflet-control-layers-expanded {
 372         padding: 6px 10px 6px 6px;
 373         color: #333;
 374         background: #fff;
 375         }
 376 .leaflet-control-layers-scrollbar {
 377         overflow-y: scroll;
 378         overflow-x: hidden;
 379         padding-right: 5px;
 380         }
 381 .leaflet-control-layers-selector {
 382         margin-top: 2px;
 383         position: relative;
 384         top: 1px;
 385         }
 386 .leaflet-control-layers label {
 387         display: block;
 388         }
 389 .leaflet-control-layers-separator {
 390         height: 0;
 391         border-top: 1px solid #ddd;
 392         margin: 5px -10px 5px -6px;
 393         }
 394
 395 /* Default icon URLs */
 396 .leaflet-default-icon-path {
 397         background-image: url(images/marker-icon.png);
 398         }
 399
 400
 401 /* attribution and scale controls */
 402
 403 .leaflet-container .leaflet-control-attribution {
 404         background: #fff;
 405         background: rgba(255, 255, 255, 0.7);
 406         margin: 0;
 407         }
 408 .leaflet-control-attribution,
 409 .leaflet-control-scale-line {
 410         padding: 0 5px;
 411         color: #333;
 412         }
 413 .leaflet-control-attribution a {
 414         text-decoration: none;
 415         }
 416 .leaflet-control-attribution a:hover {
 417         text-decoration: underline;
 418         }
 419 .leaflet-container .leaflet-control-attribution,
 420 .leaflet-container .leaflet-control-scale {
 421         font-size: 11px;
 422         }
 423 .leaflet-left .leaflet-control-scale {
 424         margin-left: 5px;
 425         }
 426 .leaflet-bottom .leaflet-control-scale {
 427         margin-bottom: 5px;
 428         }
 429 .leaflet-control-scale-line {
 430         border: 2px solid #777;
 431         border-top: none;
 432         line-height: 1.1;
 433         padding: 2px 5px 1px;
 434         font-size: 11px;
 435         white-space: nowrap;
 436         overflow: hidden;
 437         -moz-box-sizing: border-box;
 438              box-sizing: border-box;
 439
 440         background: #fff;
 441         background: rgba(255, 255, 255, 0.5);
 442         }
 443 .leaflet-control-scale-line:not(:first-child) {
 444         border-top: 2px solid #777;
 445         border-bottom: none;
 446         margin-top: -2px;
 447         }
 448 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
 449         border-bottom: 2px solid #777;
 450         }
 451
 452 .leaflet-touch .leaflet-control-attribution,
 453 .leaflet-touch .leaflet-control-layers,
 454 .leaflet-touch .leaflet-bar {
 455         box-shadow: none;
 456         }
 457 .leaflet-touch .leaflet-control-layers,
 458 .leaflet-touch .leaflet-bar {
 459         border: 2px solid rgba(0,0,0,0.2);
 460         background-clip: padding-box;
 461         }
 462
 463
 464 /* popup */
 465
 466 .leaflet-popup {
 467         position: absolute;
 468         text-align: center;
 469         margin-bottom: 20px;
 470         }
 471 .leaflet-popup-content-wrapper {
 472         padding: 1px;
 473         text-align: left;
 474         border-radius: 12px;
 475         }
 476 .leaflet-popup-content {
 477         margin: 13px 19px;
 478         line-height: 1.4;
 479         }
 480 .leaflet-popup-content p {
 481         margin: 18px 0;
 482         }
 483 .leaflet-popup-tip-container {
 484         width: 40px;
 485         height: 20px;
 486         position: absolute;
 487         left: 50%;
 488         margin-left: -20px;
 489         overflow: hidden;
 490         pointer-events: none;
 491         }
 492 .leaflet-popup-tip {
 493         width: 17px;
 494         height: 17px;
 495         padding: 1px;
 496
 497         margin: -10px auto 0;
 498
 499         -webkit-transform: rotate(45deg);
 500            -moz-transform: rotate(45deg);
 501             -ms-transform: rotate(45deg);
 502                 transform: rotate(45deg);
 503         }
 504 .leaflet-popup-content-wrapper,
 505 .leaflet-popup-tip {
 506         background: white;
 507         color: #333;
 508         box-shadow: 0 3px 14px rgba(0,0,0,0.4);
 509         }
 510 .leaflet-container a.leaflet-popup-close-button {
 511         position: absolute;
 512         top: 0;
 513         right: 0;
 514         padding: 4px 4px 0 0;
 515         border: none;
 516         text-align: center;
 517         width: 18px;
 518         height: 14px;
 519         font: 16px/14px Tahoma, Verdana, sans-serif;
 520         color: #c3c3c3;
 521         text-decoration: none;
 522         font-weight: bold;
 523         background: transparent;
 524         }
 525 .leaflet-container a.leaflet-popup-close-button:hover {
 526         color: #999;
 527         }
 528 .leaflet-popup-scrolled {
 529         overflow: auto;
 530         border-bottom: 1px solid #ddd;
 531         border-top: 1px solid #ddd;
 532         }
 533
 534 .leaflet-oldie .leaflet-popup-content-wrapper {
 535         -ms-zoom: 1;
 536         }
 537 .leaflet-oldie .leaflet-popup-tip {
 538         width: 24px;
 539         margin: 0 auto;
 540
 541         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
 542         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 543         }
 544 .leaflet-oldie .leaflet-popup-tip-container {
 545         margin-top: -1px;
 546         }
 547
 548 .leaflet-oldie .leaflet-control-zoom,
 549 .leaflet-oldie .leaflet-control-layers,
 550 .leaflet-oldie .leaflet-popup-content-wrapper,
 551 .leaflet-oldie .leaflet-popup-tip {
 552         border: 1px solid #999;
 553         }
 554
 555
 556 /* div icon */
 557
 558 .leaflet-div-icon {
 559         background: #fff;
 560         border: 1px solid #666;
 561         }
 562
 563
 564 /* Tooltip */
 565 /* Base styles for the element that has a tooltip */
 566 .leaflet-tooltip {
 567         position: absolute;
 568         padding: 6px;
 569         background-color: #fff;
 570         border: 1px solid #fff;
 571         border-radius: 3px;
 572         color: #222;
 573         white-space: nowrap;
 574         -webkit-user-select: none;
 575         -moz-user-select: none;
 576         -ms-user-select: none;
 577         user-select: none;
 578         pointer-events: none;
 579         box-shadow: 0 1px 3px rgba(0,0,0,0.4);
 580         }
 581 .leaflet-tooltip.leaflet-clickable {
 582         cursor: pointer;
 583         pointer-events: auto;
 584         }
 585 .leaflet-tooltip-top:before,
 586 .leaflet-tooltip-bottom:before,
 587 .leaflet-tooltip-left:before,
 588 .leaflet-tooltip-right:before {
 589         position: absolute;
 590         pointer-events: none;
 591         border: 6px solid transparent;
 592         background: transparent;
 593         content: "";
 594         }
 595
 596 /* Directions */
 597
 598 .leaflet-tooltip-bottom {
 599         margin-top: 6px;
 600 }
 601 .leaflet-tooltip-top {
 602         margin-top: -6px;
 603 }
 604 .leaflet-tooltip-bottom:before,
 605 .leaflet-tooltip-top:before {
 606         left: 50%;
 607         margin-left: -6px;
 608         }
 609 .leaflet-tooltip-top:before {
 610         bottom: 0;
 611         margin-bottom: -12px;
 612         border-top-color: #fff;
 613         }
 614 .leaflet-tooltip-bottom:before {
 615         top: 0;
 616         margin-top: -12px;
 617         margin-left: -6px;
 618         border-bottom-color: #fff;
 619         }
 620 .leaflet-tooltip-left {
 621         margin-left: -6px;
 622 }
 623 .leaflet-tooltip-right {
 624         margin-left: 6px;
 625 }
 626 .leaflet-tooltip-left:before,
 627 .leaflet-tooltip-right:before {
 628         top: 50%;
 629         margin-top: -6px;
 630         }
 631 .leaflet-tooltip-left:before {
 632         right: 0;
 633         margin-right: -12px;
 634         border-left-color: #fff;
 635         }
 636 .leaflet-tooltip-right:before {
 637         left: 0;
 638         margin-left: -12px;
 639         border-right-color: #fff;
 640         }