88 lines
No EOL
1.6 KiB
CSS
88 lines
No EOL
1.6 KiB
CSS
/* ===============================
|
||
MAPPA GLOBALE
|
||
=============================== */
|
||
|
||
/* La mappa occupa tutto lo schermo SOTTO l’header */
|
||
.global-map {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: calc(var(--header-h, 60px) + var(--safe-top, 0px)); /* niente hard-code */
|
||
bottom: 0;
|
||
z-index: 50;
|
||
|
||
display: none; /* chiusa di default */
|
||
}
|
||
|
||
/* Quando è aperta, visibile */
|
||
.global-map.open {
|
||
display: block;
|
||
}
|
||
|
||
/* La Leaflet container deve riempire il contenitore */
|
||
.global-map,
|
||
.global-map .leaflet-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* Nasconde la gallery quando la mappa è aperta */
|
||
.gallery.hidden {
|
||
display: none;
|
||
}
|
||
|
||
/* ===============================
|
||
MARKER FOTO
|
||
=============================== */
|
||
|
||
.photo-marker {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||
background: #fff;
|
||
}
|
||
|
||
.photo-marker img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ===============================
|
||
CLUSTER
|
||
=============================== */
|
||
|
||
.photo-cluster {
|
||
width: 56px;
|
||
height: 56px;
|
||
position: relative;
|
||
border-radius: 12px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.cluster-back {
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 6px;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
object-fit: cover;
|
||
opacity: 0.5;
|
||
filter: blur(1px);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.cluster-front {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
object-fit: cover;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
|
||
} |