110 lines
2.4 KiB
CSS
110 lines
2.4 KiB
CSS
.mapboxgl-ctrl-logo { display: none !important; }
|
||
|
||
html, body, #map {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: 'Open Sans', sans-serif;
|
||
}
|
||
|
||
/* Semi‑transparent popup background */
|
||
.mapboxgl-popup-content {
|
||
background: rgba(0, 0, 0, 0.1) !important;
|
||
backdrop-filter: blur(4px);
|
||
border-radius: 10px !important; /* ← rounded corners */
|
||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||
}
|
||
|
||
/* For the p inside the popup */
|
||
.mapboxgl-popup-content p {
|
||
margin: 0 0 -5px 0 !important; /* top/right/bottom/left – adjust bottom as you like */
|
||
}
|
||
|
||
.mapboxgl-popup-content h3 {
|
||
margin: 0 0 5px 0 !important; /* top/right/bottom/left – adjust bottom as you like */
|
||
}
|
||
|
||
|
||
/* For the image inside the popup */
|
||
.mapboxgl-popup-content img {
|
||
border-radius: 5px !important; /* ← rounded corners */
|
||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||
|
||
width: 100%; /* fill the popup’s width */
|
||
max-width: none; /* ignore any mapbox defaults */
|
||
height: auto; /* maintain aspect ratio */
|
||
|
||
}
|
||
|
||
/* hide the popup tip/arrow */
|
||
.mapboxgl-popup-tip {
|
||
display: none;
|
||
}
|
||
|
||
/* Legend box */
|
||
#legend {
|
||
/* location */
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
z-index: 1; /* above the map */
|
||
|
||
/* styling */
|
||
background: rgba(0, 0, 0, 0.1);
|
||
backdrop-filter: blur(4px);
|
||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||
|
||
/* content */
|
||
font-family: sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
#legend h4 {
|
||
margin: 0 0 0 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#legend p {
|
||
margin: 5px 0 0 0;
|
||
}
|
||
|
||
.legend-color {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-right: 6px;
|
||
vertical-align: middle;
|
||
border: 1px solid #999;
|
||
}
|
||
|
||
/* Big Picture */
|
||
/* full‑screen, centered, hidden by default */
|
||
#overlay {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.75); /* <- dim the background */
|
||
backdrop-filter: blur(4px); /* <- blur the background */
|
||
filter: drop-shadow(0 0 4px gray) !important; /* <- gives a border */
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
/* when we add the “show” class it becomes visible/flex */
|
||
#overlay.show {
|
||
display: flex;
|
||
}
|
||
|
||
/* the enlarged image itself */
|
||
#overlay-img {
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||
}
|
||
|