website/css/leaflet.css

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