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