git.roojs.org Git - bootswatch/blob - mPurpose/css/leaflet.css

   1 /* required styles */
   2
   3 .leaflet-map-pane,
   4 .leaflet-tile,
   5 .leaflet-marker-icon,
   6 .leaflet-marker-shadow,
   7 .leaflet-tile-pane,
   8 .leaflet-overlay-pane,
   9 .leaflet-shadow-pane,
  10 .leaflet-marker-pane,
  11 .leaflet-popup-pane,
  12 .leaflet-overlay-pane svg,
  13 .leaflet-zoom-box,
  14 .leaflet-image-layer,
  15 .leaflet-layer {
  16         position: absolute;
  17         left: 0;
  18         top: 0;
  19         }
  20 .leaflet-container {
  21         overflow: hidden;
  22         -ms-touch-action: none;
  23         }
  24 .leaflet-tile,
  25 .leaflet-marker-icon,
  26 .leaflet-marker-shadow {
  27         -webkit-user-select: none;
  28            -moz-user-select: none;
  29                 user-select: none;
  30         }
  31 .leaflet-marker-icon,
  32 .leaflet-marker-shadow {
  33         display: block;
  34         }
  35 /* map is broken in FF if you have max-width: 100% on tiles */
  36 .leaflet-container img {
  37         max-width: none !important;
  38         }
  39 /* stupid Android 2 doesn't understand "max-width: none" properly */
  40 .leaflet-container img.leaflet-image-layer {
  41         max-width: 15000px !important;
  42         }
  43 .leaflet-tile {
  44         filter: inherit;
  45         visibility: hidden;
  46         }
  47 .leaflet-tile-loaded {
  48         visibility: inherit;
  49         }
  50 .leaflet-zoom-box {
  51         width: 0;
  52         height: 0;
  53         }
  54
  55 .leaflet-tile-pane    { z-index: 2; }
  56 .leaflet-objects-pane { z-index: 3; }
  57 .leaflet-overlay-pane { z-index: 4; }
  58 .leaflet-shadow-pane  { z-index: 5; }
  59 .leaflet-marker-pane  { z-index: 6; }
  60 .leaflet-popup-pane   { z-index: 7; }
  61
  62
  63 /* control positioning */
  64
  65 .leaflet-control {
  66         position: relative;
  67         z-index: 7;
  68         pointer-events: auto;
  69         }
  70 .leaflet-top,
  71 .leaflet-bottom {
  72         position: absolute;
  73         z-index: 1000;
  74         pointer-events: none;
  75         }
  76 .leaflet-top {
  77         top: 0;
  78         }
  79 .leaflet-right {
  80         right: 0;
  81         }
  82 .leaflet-bottom {
  83         bottom: 0;
  84         }
  85 .leaflet-left {
  86         left: 0;
  87         }
  88 .leaflet-control {
  89         float: left;
  90         clear: both;
  91         }
  92 .leaflet-right .leaflet-control {
  93         float: right;
  94         }
  95 .leaflet-top .leaflet-control {
  96         margin-top: 10px;
  97         }
  98 .leaflet-bottom .leaflet-control {
  99         margin-bottom: 10px;
 100         }
 101 .leaflet-left .leaflet-control {
 102         margin-left: 10px;
 103         }
 104 .leaflet-right .leaflet-control {
 105         margin-right: 10px;
 106         }
 107
 108
 109 /* zoom and fade animations */
 110
 111 .leaflet-fade-anim .leaflet-tile,
 112 .leaflet-fade-anim .leaflet-popup {
 113         opacity: 0;
 114         -webkit-transition: opacity 0.2s linear;
 115            -moz-transition: opacity 0.2s linear;
 116              -o-transition: opacity 0.2s linear;
 117                 transition: opacity 0.2s linear;
 118         }
 119 .leaflet-fade-anim .leaflet-tile-loaded,
 120 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 121         opacity: 1;
 122         }
 123
 124 .leaflet-zoom-anim .leaflet-zoom-animated {
 125         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 126            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
 127              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
 128                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
 129         }
 130 .leaflet-zoom-anim .leaflet-tile,
 131 .leaflet-pan-anim .leaflet-tile,
 132 .leaflet-touching .leaflet-zoom-animated {
 133         -webkit-transition: none;
 134            -moz-transition: none;
 135              -o-transition: none;
 136                 transition: none;
 137         }
 138
 139 .leaflet-zoom-anim .leaflet-zoom-hide {
 140         visibility: hidden;
 141         }
 142
 143
 144 /* cursors */
 145
 146 .leaflet-clickable {
 147         cursor: pointer;
 148         }
 149 .leaflet-container {
 150         cursor: -webkit-grab;
 151         cursor:    -moz-grab;
 152         }
 153 .leaflet-popup-pane,
 154 .leaflet-control {
 155         cursor: auto;
 156         }
 157 .leaflet-dragging,
 158 .leaflet-dragging .leaflet-clickable,
 159 .leaflet-dragging .leaflet-container {
 160         cursor: move;
 161         cursor: -webkit-grabbing;
 162         cursor:    -moz-grabbing;
 163         }
 164
 165
 166 /* visual tweaks */
 167
 168 .leaflet-container {
 169         background: #ddd;
 170         outline: 0;
 171         }
 172 .leaflet-container a {
 173         color: #0078A8;
 174         }
 175 .leaflet-container a.leaflet-active {
 176         outline: 2px solid orange;
 177         }
 178 .leaflet-zoom-box {
 179         border: 2px dotted #05f;
 180         background: white;
 181         opacity: 0.5;
 182         }
 183
 184
 185 /* general typography */
 186 .leaflet-container {
 187         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 188         }
 189
 190
 191 /* general toolbar styles */
 192
 193 .leaflet-bar {
 194         box-shadow: 0 0 8px rgba(0,0,0,0.4);
 195         border: 1px solid #888;
 196         -webkit-border-radius: 5px;
 197                 border-radius: 5px;
 198         }
 199 .leaflet-bar-part {
 200         background-color: rgba(255, 255, 255, 0.8);
 201         border-bottom: 1px solid #aaa;
 202         }
 203 .leaflet-bar-part-top {
 204         -webkit-border-radius: 4px 4px 0 0;
 205                 border-radius: 4px 4px 0 0;
 206         }
 207 .leaflet-bar-part-bottom {
 208         -webkit-border-radius: 0 0 4px 4px;
 209                 border-radius: 0 0 4px 4px;
 210         border-bottom: none;
 211         }
 212
 213 .leaflet-touch .leaflet-bar {
 214         -webkit-border-radius: 10px;
 215                 border-radius: 10px;
 216         }
 217 .leaflet-touch .leaflet-bar-part {
 218         border-bottom: 4px solid rgba(0,0,0,0.3);
 219         }
 220 .leaflet-touch .leaflet-bar-part-top {
 221         -webkit-border-radius: 7px 7px 0 0;
 222                 border-radius: 7px 7px 0 0;
 223         }
 224 .leaflet-touch .leaflet-bar-part-bottom {
 225         -webkit-border-radius: 0 0 7px 7px;
 226                 border-radius: 0 0 7px 7px;
 227         border-bottom: none;
 228         }
 229
 230
 231 /* zoom control */
 232
 233 .leaflet-container .leaflet-control-zoom {
 234         margin-left: 13px;
 235         margin-top: 12px;
 236         }
 237 .leaflet-control-zoom a {
 238         width: 22px;
 239         height: 22px;
 240         text-align: center;
 241         text-decoration: none;
 242         color: black;
 243         }
 244 .leaflet-control-zoom a,
 245 .leaflet-control-layers-toggle {
 246         background-position: 50% 50%;
 247         background-repeat: no-repeat;
 248         display: block;
 249         }
 250 .leaflet-control-zoom a:hover {
 251         background-color: #fff;
 252         color: #777;
 253         }
 254 .leaflet-control-zoom-in {
 255         font: bold 18px/24px Arial, Helvetica, sans-serif;
 256         }
 257 .leaflet-control-zoom-out {
 258         font: bold 23px/20px Tahoma, Verdana, sans-serif;
 259         }
 260 .leaflet-control-zoom a.leaflet-control-zoom-disabled {
 261         cursor: default;
 262         background-color: rgba(255, 255, 255, 0.8);
 263         color: #bbb;
 264         }
 265
 266 .leaflet-touch .leaflet-control-zoom a {
 267         width: 30px;
 268         height: 30px;
 269         }
 270 .leaflet-touch .leaflet-control-zoom-in {
 271         font-size: 24px;
 272         line-height: 29px;
 273         }
 274 .leaflet-touch .leaflet-control-zoom-out {
 275         font-size: 28px;
 276         line-height: 24px;
 277         }
 278
 279 /* layers control */
 280
 281 .leaflet-control-layers {
 282         box-shadow: 0 1px 7px rgba(0,0,0,0.4);
 283         background: #f8f8f9;
 284         -webkit-border-radius: 8px;
 285                 border-radius: 8px;
 286         }
 287 .leaflet-control-layers-toggle {
 288         background-image: url(images/layers.png);
 289         width: 36px;
 290         height: 36px;
 291         }
 292 .leaflet-touch .leaflet-control-layers-toggle {
 293         width: 44px;
 294         height: 44px;
 295         }
 296 .leaflet-control-layers .leaflet-control-layers-list,
 297 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
 298         display: none;
 299         }
 300 .leaflet-control-layers-expanded .leaflet-control-layers-list {
 301         display: block;
 302         position: relative;
 303         }
 304 .leaflet-control-layers-expanded {
 305         padding: 6px 10px 6px 6px;
 306         color: #333;
 307         background: #fff;
 308         }
 309 .leaflet-control-layers-selector {
 310         margin-top: 2px;
 311         position: relative;
 312         top: 1px;
 313         }
 314 .leaflet-control-layers label {
 315         display: block;
 316         }
 317 .leaflet-control-layers-separator {
 318         height: 0;
 319         border-top: 1px solid #ddd;
 320         margin: 5px -10px 5px -6px;
 321         }
 322
 323
 324 /* attribution and scale controls */
 325
 326 .leaflet-container .leaflet-control-attribution {
 327         background-color: rgba(255, 255, 255, 0.7);
 328         box-shadow: 0 0 5px #bbb;
 329         margin: 0;
 330         }
 331 .leaflet-control-attribution,
 332 .leaflet-control-scale-line {
 333         padding: 0 5px;
 334         color: #333;
 335         }
 336 .leaflet-container .leaflet-control-attribution,
 337 .leaflet-container .leaflet-control-scale {
 338         font-size: 11px;
 339         }
 340 .leaflet-left .leaflet-control-scale {
 341         margin-left: 5px;
 342         }
 343 .leaflet-bottom .leaflet-control-scale {
 344         margin-bottom: 5px;
 345         }
 346 .leaflet-control-scale-line {
 347         border: 2px solid #777;
 348         border-top: none;
 349         color: black;
 350         line-height: 1.1;
 351         padding: 2px 5px 1px;
 352         font-size: 11px;
 353         text-shadow: 1px 1px 1px #fff;
 354         background-color: rgba(255, 255, 255, 0.5);
 355         box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
 356         white-space: nowrap;
 357         overflow: hidden;
 358         }
 359 .leaflet-control-scale-line:not(:first-child) {
 360         border-top: 2px solid #777;
 361         border-bottom: none;
 362         margin-top: -2px;
 363         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 364         }
 365 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
 366         border-bottom: 2px solid #777;
 367         }
 368
 369 .leaflet-touch .leaflet-control-attribution,
 370 .leaflet-touch .leaflet-control-layers,
 371 .leaflet-touch .leaflet-control-zoom {
 372         box-shadow: none;
 373         }
 374 .leaflet-touch .leaflet-control-layers,
 375 .leaflet-touch .leaflet-control-zoom {
 376         border: 4px solid rgba(0,0,0,0.3);
 377         }
 378
 379
 380 /* popup */
 381
 382 .leaflet-popup {
 383         position: absolute;
 384         text-align: center;
 385         }
 386 .leaflet-popup-content-wrapper {
 387         padding: 1px;
 388         text-align: left;
 389         -webkit-border-radius: 20px;
 390                 border-radius: 20px;
 391         }
 392 .leaflet-popup-content {
 393         margin: 14px 20px;
 394         line-height: 1.4;
 395         }
 396 .leaflet-popup-content p {
 397         margin: 18px 0;
 398         }
 399 .leaflet-popup-tip-container {
 400         margin: 0 auto;
 401         width: 40px;
 402         height: 20px;
 403         position: relative;
 404         overflow: hidden;
 405         }
 406 .leaflet-popup-tip {
 407         width: 15px;
 408         height: 15px;
 409         padding: 1px;
 410
 411         margin: -8px auto 0;
 412
 413         -webkit-transform: rotate(45deg);
 414            -moz-transform: rotate(45deg);
 415             -ms-transform: rotate(45deg);
 416              -o-transform: rotate(45deg);
 417                 transform: rotate(45deg);
 418         }
 419 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
 420         background: white;
 421
 422         box-shadow: 0 3px 14px rgba(0,0,0,0.4);
 423         }
 424 .leaflet-container a.leaflet-popup-close-button {
 425         position: absolute;
 426         top: 0;
 427         right: 0;
 428         padding: 4px 5px 0 0;
 429         text-align: center;
 430         width: 18px;
 431         height: 14px;
 432         font: 16px/14px Tahoma, Verdana, sans-serif;
 433         color: #c3c3c3;
 434         text-decoration: none;
 435         font-weight: bold;
 436         background: transparent;
 437         }
 438 .leaflet-container a.leaflet-popup-close-button:hover {
 439         color: #999;
 440         }
 441 .leaflet-popup-scrolled {
 442         overflow: auto;
 443         border-bottom: 1px solid #ddd;
 444         border-top: 1px solid #ddd;
 445         }
 446
 447
 448 /* div icon */
 449
 450 .leaflet-div-icon {
 451         background: #fff;
 452         border: 1px solid #666;
 453         }
 454 .leaflet-editing-icon {
 455         -webkit-border-radius: 2px;
 456                 border-radius: 2px;
 457         }