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