855 lines
16 KiB
CSS
855 lines
16 KiB
CSS
/* public/css/activityModal.css */
|
|
|
|
/* ===============================
|
|
OVERLAY ATTIVITÀ
|
|
=============================== */
|
|
|
|
#activityModal {
|
|
position: fixed;
|
|
inset: 0;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
|
|
display: none;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
background: rgb(0 0 0 / 92%);
|
|
|
|
z-index: 12000;
|
|
}
|
|
|
|
#activityModal.open {
|
|
display: block;
|
|
}
|
|
|
|
/* ===============================
|
|
CONTENITORE
|
|
=============================== */
|
|
|
|
#activityModalContent {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
#activityModal .activity-modal-wrapper {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===============================
|
|
MAPPA LEAFLET / MAPBOX
|
|
=============================== */
|
|
|
|
#activityModal #activityMap {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background: #d8d8d8;
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
#activityModal .leaflet-container,
|
|
#activityModal .mapboxgl-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
* Protegge le tile Leaflet da eventuali
|
|
* regole globali applicate alle immagini.
|
|
*/
|
|
#activityModal img.leaflet-tile {
|
|
width: 256px !important;
|
|
height: 256px !important;
|
|
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
|
|
object-fit: initial !important;
|
|
filter: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ===============================
|
|
SELETTORE MAPPA SU DESKTOP
|
|
=============================== */
|
|
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle {
|
|
position: fixed;
|
|
|
|
top: calc(11px + env(safe-area-inset-top));
|
|
right: calc(72px + env(safe-area-inset-right));
|
|
left: auto;
|
|
|
|
z-index: 15000;
|
|
|
|
width: auto !important;
|
|
min-width: 0 !important;
|
|
max-width: calc(
|
|
100vw -
|
|
100px -
|
|
env(safe-area-inset-left) -
|
|
env(safe-area-inset-right)
|
|
) !important;
|
|
|
|
height: auto !important;
|
|
min-height: 0 !important;
|
|
max-height: none !important;
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background-image: none !important;
|
|
|
|
border: 0;
|
|
border-radius: 0;
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#activityModal .activity-map-style-select {
|
|
min-height: 38px;
|
|
max-width: 220px;
|
|
|
|
padding: 7px 32px 7px 10px;
|
|
|
|
border: 1px solid rgb(0 0 0 / 20%);
|
|
border-radius: 8px;
|
|
|
|
background: rgb(255 255 255 / 96%);
|
|
color: #222;
|
|
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 22%);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#activityModal .activity-map-style-select:focus-visible {
|
|
outline: 3px solid rgb(43 140 255 / 45%);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ===============================
|
|
CONTROLLI MAPBOX
|
|
=============================== */
|
|
|
|
#activityModal
|
|
#activityMap
|
|
.mapboxgl-ctrl-top-left {
|
|
top: calc(8px + env(safe-area-inset-top));
|
|
left: calc(8px + env(safe-area-inset-left));
|
|
|
|
z-index: 13000;
|
|
}
|
|
|
|
#activityModal
|
|
#activityMap
|
|
.mapboxgl-ctrl-top-left
|
|
.mapboxgl-ctrl {
|
|
margin: 0;
|
|
}
|
|
|
|
#activityModal
|
|
#activityMap
|
|
.mapboxgl-ctrl-group {
|
|
overflow: hidden;
|
|
|
|
border-radius: 8px;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 25%);
|
|
}
|
|
|
|
/* ===============================
|
|
CONTROLLO ALTEZZA TERRAIN 3D
|
|
=============================== */
|
|
|
|
#activityModal .activity-terrain-control {
|
|
position: fixed;
|
|
|
|
top: calc(8px + env(safe-area-inset-top));
|
|
left: calc(60px + env(safe-area-inset-left));
|
|
|
|
z-index: 15000;
|
|
|
|
box-sizing: border-box;
|
|
|
|
width: 220px;
|
|
height: 38px;
|
|
|
|
padding: 0 10px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
border: 1px solid rgb(0 0 0 / 20%);
|
|
border-radius: 8px;
|
|
|
|
background: rgb(255 255 255 / 96%);
|
|
color: #222;
|
|
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 22%);
|
|
}
|
|
|
|
#activityModal .activity-terrain-control[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#activityModal .activity-terrain-control label {
|
|
flex: 0 0 auto;
|
|
|
|
margin: 0;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#activityModal .activity-terrain-range {
|
|
flex: 1 1 auto;
|
|
|
|
min-width: 0;
|
|
height: 20px;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
cursor: pointer;
|
|
|
|
accent-color: #2b8cff;
|
|
}
|
|
|
|
#activityModal
|
|
.activity-terrain-control
|
|
output {
|
|
flex: 0 0 34px;
|
|
|
|
min-width: 34px;
|
|
|
|
margin: 0;
|
|
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ===============================
|
|
PULSANTE INFO ATTIVITÀ
|
|
=============================== */
|
|
|
|
#activityInfoBtn {
|
|
position: fixed;
|
|
|
|
top: calc(60px + env(safe-area-inset-top));
|
|
right: calc(12px + env(safe-area-inset-right));
|
|
|
|
width: 44px;
|
|
height: 44px;
|
|
|
|
padding: 0;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
color: #0033aa;
|
|
background: #eef4ff;
|
|
|
|
border: 1px solid #d0d8ff;
|
|
border-radius: 50%;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 35%);
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 21px;
|
|
line-height: 1;
|
|
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
z-index: 13000;
|
|
}
|
|
|
|
#activityInfoBtn:hover,
|
|
#activityInfoBtn.active {
|
|
background: #dfe9ff;
|
|
border-color: #9fb4ff;
|
|
}
|
|
|
|
#activityInfoBtn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
#activityInfoBtn:focus-visible {
|
|
outline: 2px solid #4c9ffe;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ===============================
|
|
PULSANTE FOTO
|
|
=============================== */
|
|
|
|
#activityModal .activity-media-btn {
|
|
position: fixed;
|
|
|
|
top: calc(112px + env(safe-area-inset-top));
|
|
right: calc(12px + env(safe-area-inset-right));
|
|
|
|
z-index: 13000;
|
|
|
|
min-width: 58px;
|
|
min-height: 38px;
|
|
|
|
padding: 8px 12px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border: 1px solid rgb(0 0 0 / 20%);
|
|
border-radius: 9px;
|
|
|
|
background: rgb(255 255 255 / 96%);
|
|
color: #222;
|
|
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 30%);
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
#activityModal .activity-media-btn:hover {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
#activityModal .activity-media-btn.active {
|
|
border-color: #2b8cff;
|
|
background: #2b8cff;
|
|
color: #fff;
|
|
}
|
|
|
|
#activityModal .activity-media-btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
#activityModal .activity-media-btn:focus-visible {
|
|
outline: 3px solid rgb(43 140 255 / 45%);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ===============================
|
|
INDICATORE CARICAMENTO TRACCIA
|
|
=============================== */
|
|
|
|
#activityModal .activity-route-loading {
|
|
position: absolute;
|
|
|
|
right: calc(14px + env(safe-area-inset-right));
|
|
bottom: calc(120px + env(safe-area-inset-bottom));
|
|
|
|
z-index: 13000;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
max-width: calc(100% - 28px);
|
|
|
|
padding: 8px 12px;
|
|
|
|
border-radius: 999px;
|
|
|
|
background: rgb(20 30 42 / 88%);
|
|
color: #fff;
|
|
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
|
|
box-shadow:
|
|
0 2px 10px
|
|
rgb(0 0 0 / 25%);
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
#activityModal .activity-route-loading.is-error {
|
|
background: rgb(95 25 30 / 92%);
|
|
}
|
|
|
|
#activityModal .activity-route-loading-spinner {
|
|
width: 15px;
|
|
height: 15px;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
border: 2px solid rgb(255 255 255 / 25%);
|
|
border-top-color: #fff;
|
|
border-radius: 50%;
|
|
|
|
animation:
|
|
activity-route-spin
|
|
0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes activity-route-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#activityModal .activity-route-loading-spinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ===============================
|
|
MARKER MEDIA MAPBOX
|
|
=============================== */
|
|
|
|
#activityModal .activity-media-mapbox-marker {
|
|
position: relative;
|
|
|
|
width: 46px;
|
|
height: 46px;
|
|
|
|
padding: 0;
|
|
|
|
border: 2px solid #fff;
|
|
border-radius: 7px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 35%);
|
|
|
|
cursor: pointer;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
#activityModal .activity-media-mapbox-marker img {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
max-width: none;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
#activityModal .activity-media-mapbox-marker:focus-visible {
|
|
outline: 3px solid rgb(43 140 255 / 60%);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
#activityModal .activity-media-video-icon {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 18px;
|
|
|
|
background: rgb(0 0 0 / 25%);
|
|
|
|
text-shadow:
|
|
0 1px 3px
|
|
rgb(0 0 0 / 80%);
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===============================
|
|
MARKER MEDIA LEAFLET
|
|
=============================== */
|
|
|
|
#activityModal .activity-media-marker,
|
|
#activityModal .photo-marker {
|
|
border-radius: 7px;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 35%);
|
|
}
|
|
|
|
/* ===============================
|
|
INFORMAZIONI ATTIVITÀ
|
|
=============================== */
|
|
|
|
#activityModal .activity-modal-info {
|
|
position: absolute;
|
|
|
|
left: max(12px, env(safe-area-inset-left));
|
|
right: max(12px, env(safe-area-inset-right));
|
|
bottom: max(12px, env(safe-area-inset-bottom));
|
|
|
|
padding: 12px 16px;
|
|
|
|
color: #fff;
|
|
background: rgb(0 0 0 / 76%);
|
|
|
|
border: 1px solid rgb(255 255 255 / 18%);
|
|
border-radius: 12px;
|
|
|
|
box-shadow:
|
|
0 4px 16px
|
|
rgb(0 0 0 / 35%);
|
|
|
|
pointer-events: none;
|
|
|
|
z-index: 12500;
|
|
}
|
|
|
|
#activityModal .activity-modal-title {
|
|
margin: 0 0 4px;
|
|
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
#activityModal .activity-modal-meta {
|
|
margin-top: 2px;
|
|
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* ===============================
|
|
PULSANTE CHIUSURA
|
|
=============================== */
|
|
|
|
#activityModalClose.modal-close {
|
|
z-index: 16000 !important;
|
|
}
|
|
|
|
/* ===============================
|
|
INFO PANEL SOPRA LA MAPPA
|
|
=============================== */
|
|
|
|
#infoPanel.open,
|
|
#infoPanel[data-open="1"] {
|
|
z-index: 21000 !important;
|
|
}
|
|
|
|
/* ===============================
|
|
VISUALIZZAZIONE MOBILE
|
|
=============================== */
|
|
|
|
@media (max-width: 768px) {
|
|
/* Informazioni attività */
|
|
#activityModal .activity-modal-info {
|
|
left: max(8px, env(safe-area-inset-left));
|
|
right: max(8px, env(safe-area-inset-right));
|
|
bottom: max(8px, env(safe-area-inset-bottom));
|
|
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
#activityModal .activity-modal-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
#activityModal .activity-modal-meta {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Pulsante informazioni */
|
|
#activityInfoBtn {
|
|
top: calc(58px + env(safe-area-inset-top));
|
|
right: calc(10px + env(safe-area-inset-right));
|
|
}
|
|
|
|
/* Pulsante Foto */
|
|
#activityModal .activity-media-btn {
|
|
top: calc(110px + env(safe-area-inset-top));
|
|
right: calc(10px + env(safe-area-inset-right));
|
|
}
|
|
|
|
/* Indicatore caricamento traccia completa */
|
|
#activityModal .activity-route-loading {
|
|
right: calc(8px + env(safe-area-inset-right));
|
|
bottom: calc(112px + env(safe-area-inset-bottom));
|
|
|
|
max-width: calc(
|
|
100% -
|
|
16px -
|
|
env(safe-area-inset-left) -
|
|
env(safe-area-inset-right)
|
|
);
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
/*
|
|
* Controllo Altezza Terrain 3D.
|
|
* Si trova a destra dei controlli
|
|
* zoom e bussola di Mapbox.
|
|
*/
|
|
#activityModal .activity-terrain-control {
|
|
top: calc(8px + env(safe-area-inset-top));
|
|
left: calc(60px + env(safe-area-inset-left));
|
|
|
|
width: min(
|
|
190px,
|
|
calc(
|
|
100vw -
|
|
190px -
|
|
env(safe-area-inset-left) -
|
|
env(safe-area-inset-right)
|
|
)
|
|
);
|
|
|
|
height: 44px;
|
|
|
|
gap: 6px;
|
|
padding: 0 8px;
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
#activityModal .activity-terrain-control label {
|
|
flex: 0 0 auto;
|
|
|
|
margin: 0;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#activityModal .activity-terrain-range {
|
|
flex: 1 1 auto;
|
|
|
|
min-width: 45px;
|
|
height: 18px;
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
#activityModal
|
|
.activity-terrain-control
|
|
output {
|
|
flex: 0 0 30px;
|
|
|
|
min-width: 30px;
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*
|
|
* Pulsante Layers ufficiale di Leaflet.
|
|
* È posizionato a sinistra della chiusura.
|
|
*/
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle {
|
|
position: fixed !important;
|
|
|
|
top: calc(
|
|
8px +
|
|
env(safe-area-inset-top)
|
|
) !important;
|
|
|
|
right: calc(
|
|
68px +
|
|
env(safe-area-inset-right)
|
|
) !important;
|
|
|
|
left: auto !important;
|
|
|
|
z-index: 15000 !important;
|
|
|
|
box-sizing: border-box !important;
|
|
|
|
width: 44px !important;
|
|
min-width: 44px !important;
|
|
max-width: 44px !important;
|
|
|
|
height: 44px !important;
|
|
min-height: 44px !important;
|
|
max-height: 44px !important;
|
|
|
|
display: block !important;
|
|
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
|
|
overflow: hidden !important;
|
|
|
|
border:
|
|
2px solid
|
|
rgb(0 0 0 / 25%) !important;
|
|
|
|
border-radius: 9px !important;
|
|
|
|
background-color:
|
|
rgb(255 255 255 / 98%) !important;
|
|
|
|
background-image:
|
|
url("https://unpkg.com/leaflet@1.9.4/dist/images/layers.png")
|
|
!important;
|
|
|
|
background-position:
|
|
center !important;
|
|
|
|
background-repeat:
|
|
no-repeat !important;
|
|
|
|
background-size:
|
|
26px 26px !important;
|
|
|
|
box-shadow:
|
|
0 2px 8px
|
|
rgb(0 0 0 / 35%) !important;
|
|
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle:hover {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/*
|
|
* Disabilita eventuali vecchie icone
|
|
* create tramite pseudo-elementi.
|
|
*/
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle::before,
|
|
#activityModal
|
|
.activity-map-style-control.leaflet-control-layers-toggle::after {
|
|
content: none !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
* Il select copre completamente il pulsante,
|
|
* ma resta trasparente e cliccabile.
|
|
*/
|
|
#activityModal
|
|
.activity-map-style-control
|
|
.activity-map-style-select {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
|
|
z-index: 2 !important;
|
|
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
max-width: none !important;
|
|
|
|
height: 100% !important;
|
|
min-height: 0 !important;
|
|
max-height: none !important;
|
|
|
|
display: block !important;
|
|
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
|
|
background: transparent !important;
|
|
|
|
opacity: 0 !important;
|
|
|
|
cursor: pointer !important;
|
|
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
#activityModal
|
|
.activity-map-style-control:focus-within {
|
|
outline:
|
|
3px solid
|
|
rgb(43 140 255 / 50%);
|
|
|
|
outline-offset: 2px;
|
|
}
|
|
}
|