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