117 lines
2.7 KiB
CSS
117 lines
2.7 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);
|
||
}
|
||
|
||
|
||
|
||
/* ===============================
|
||
MARKER CLUSTER
|
||
=============================== */
|
||
|
||
|
||
.marker-cluster-wrapper { background: transparent; border: 0; }
|
||
.gp-cluster {
|
||
position: relative;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||
border: 3px solid rgba(255,255,255,0.85);
|
||
transition: width .12s, height .12s, font-size .12s;
|
||
}
|
||
.gp-cluster .cluster-collage { position:absolute; inset:0; display:grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
|
||
.gp-cluster .cluster-collage div img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.gp-cluster .gp-count {
|
||
position:absolute; right:6px; bottom:6px;
|
||
background: rgba(0,0,0,0.55); padding:4px 7px; border-radius:12px;
|
||
color:#fff; font-weight:700; font-size:12px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||
}
|
||
.gp-cluster.cluster-sm .gp-count { font-size:11px; }
|
||
.gp-cluster.cluster-md .gp-count { font-size:13px; }
|
||
.gp-cluster.cluster-lg .gp-count { font-size:15px; }
|
||
.gp-cluster.cluster-xl .gp-count { font-size:17px; }
|