smokesignal.events
The smokesignal.events web application
1/**
2 * Globe Map Styles
3 *
4 * Styles for the interactive globe map on the homepage.
5 */
6
7#globe-map {
8 height: 400px;
9 border-radius: 8px;
10 overflow: hidden;
11 z-index: 1;
12}
13
14.globe-controls {
15 display: flex;
16 gap: 0.5rem;
17 flex-wrap: wrap;
18 margin-top: 0.75rem;
19}
20
21.globe-controls .button {
22 font-size: 0.75rem;
23}
24
25#globe-status {
26 margin-top: 0.5rem;
27 font-size: 0.875rem;
28 color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));
29}
30
31/* MapLibre popup styles */
32.maplibregl-popup-content {
33 background: rgba(22, 33, 62, 0.95);
34 color: white;
35 padding: 10px 14px;
36 border-radius: 6px;
37 font-size: 13px;
38}
39
40.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
41 border-top-color: rgba(22, 33, 62, 0.95);
42}
43
44.maplibregl-popup-close-button {
45 color: white;
46 font-size: 16px;
47}
48
49/* Responsive adjustments */
50@media (max-width: 768px) {
51 #globe-map {
52 height: 300px;
53 }
54
55 .globe-controls {
56 justify-content: center;
57 }
58}