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