156 lines
3.4 KiB
CSS
156 lines
3.4 KiB
CSS
/* map + overlay wrapper */
|
||
.map-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
/* Map */
|
||
.map {
|
||
width: 100%;
|
||
height: 70vh; /* adjust as you like */
|
||
border-radius: 10px !important; /* ← rounded corners */
|
||
|
||
margin-top: 1rem;
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* removing watermark */
|
||
.mapboxgl-ctrl-logo { display: none !important; }
|
||
|
||
/* Company list */
|
||
.company-list {
|
||
position: absolute;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
padding: 0.5rem;
|
||
max-height: 50vh;
|
||
overflow-y: auto;
|
||
z-index: 1;
|
||
color: var(--fg-one);
|
||
|
||
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 */
|
||
}
|
||
|
||
/* company list button*/
|
||
.company-list button {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
|
||
background: none;
|
||
border-radius: 10px; /* ← rounded corners */
|
||
border-width: 0px;
|
||
}
|
||
|
||
.company-list button:hover {
|
||
background: rgb(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.company-list button + button {
|
||
margin-top: 0.5rem; /* Only applies if there's a previous button */
|
||
}
|
||
|
||
/* pressed company list button */
|
||
|
||
.company-list button.active {
|
||
background: rgb(255, 255, 255, 0.2);
|
||
filter: drop-shadow(0 0 2px gray) !important; /* <- gives a border */
|
||
color: var(--fg-one);
|
||
}
|
||
|
||
/* popup */
|
||
.mapboxgl-popup {
|
||
position: absolute !important;
|
||
transform: none !important; /* cancel out Mapbox’s translate() */
|
||
|
||
overflow-y: auto;
|
||
z-index: 1;
|
||
|
||
top: 1rem !important;
|
||
left: auto !important;
|
||
right: 1rem !important;
|
||
}
|
||
|
||
/* popup bg */
|
||
.mapboxgl-popup-content {
|
||
background: rgba(0, 0, 0, 0.1) !important;
|
||
-webkit-backdrop-filter: blur(4px) !important;
|
||
backdrop-filter: blur(4px) !important;
|
||
border-radius: 10px !important; /* ← rounded corners */
|
||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||
|
||
color: var(--bg-one);
|
||
padding-bottom: 5px; /* or else its too big */
|
||
}
|
||
|
||
/* popup image */
|
||
.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;
|
||
}
|
||
|
||
/* Caption */
|
||
.blurb {
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
padding: 1rem;
|
||
|
||
background: var(--bg-two);
|
||
color: var(--fg-one);
|
||
|
||
border-radius: 10px;
|
||
min-height: 8rem; /* optional */
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* blurb title */
|
||
.blurb h2 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
/* fixed popup that won’t move with the map */
|
||
.fixed-popup {
|
||
position: absolute !important;
|
||
transform: none !important; /* cancel out Mapbox’s translate() */
|
||
|
||
z-index: 1;
|
||
|
||
top: 1rem !important;
|
||
right: -1rem !important;
|
||
|
||
background: rgba(0, 0, 0, 0.1) !important;
|
||
-webkit-backdrop-filter: blur(4px) !important;
|
||
backdrop-filter: blur(4px) !important;
|
||
border-radius: 10px !important; /* ← rounded corners */
|
||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||
|
||
color: var(--bg-one);
|
||
|
||
padding: 0.75rem;
|
||
border-radius: 6px;
|
||
max-width: 200px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.fixed-popup img {
|
||
width: 100%;
|
||
border-radius: 4px;
|
||
margin-bottom: 0.5rem;
|
||
}
|