diff --git a/public/css/infoPanel.css b/public/css/infoPanel.css index 77794fc..3edea8e 100644 --- a/public/css/infoPanel.css +++ b/public/css/infoPanel.css @@ -1,44 +1,88 @@ -.info-panel { - position: fixed; - top: 0; - right: 0; - width: 320px; - height: 100%; - background: #fff; - padding: 16px; - box-shadow: -2px 0 6px rgba(0,0,0,0.25); - overflow-y: auto; - z-index: 10000; - transform: translateX(100%); - transition: transform 0.3s ease; -} - -.info-panel.open { - transform: translateX(0); -} - -.info-panel h3 { - margin-top: 0; -} - -.info-row { - margin-bottom: 10px; -} - -.info-row b { - display: inline-block; - width: 110px; -} - -.info-map { - width: 100%; - height: 250px; - margin-top: 15px; - border-radius: 6px; - overflow: hidden; - border: 1px solid #ccc; -} - -.info-spacer { - height: 16px; /* o 20px se vuoi più spazio */ -} +/* =============================== + Variabili (scala tipografica pannello info) + Modifica qui per regolare tutto il pannello + =============================== */ +:root { + --info-font: 14px; /* base testo pannello (prima ~16px) */ + --info-line: 1.4; /* interlinea per migliorare leggibilità */ + + --info-heading: 15px; /* dimensione titoli h3 nel pannello */ + --info-h3-mt: 6px; /* margin-top h3 */ + --info-h3-mb: 10px; /* margin-bottom h3 */ + + --info-row-gap: 8px; /* spazio verticale tra righe (era 10px) */ + --info-label-w: 100px; /* larghezza colonna etichette (era 110px) */ + + --info-map-h: 220px; /* altezza mappa (era 250px) */ + --info-map-mt: 15px; /* spazio sopra la mappa */ + + --info-spacer-h: 16px; /* altezza degli spacer */ +} + +/* =============================== + PANNELLO INFO + =============================== */ +.info-panel { + position: fixed; + top: 0; + right: 0; + width: 320px; + height: 100%; + background: #fff; + padding: 16px; + box-shadow: -2px 0 6px rgba(0,0,0,0.25); + overflow-y: auto; + z-index: 10000; + transform: translateX(100%); + transition: transform 0.3s ease; + + /* Scala tipografica via variabili */ + font-size: var(--info-font); + line-height: var(--info-line); +} + +.info-panel.open { + transform: translateX(0); +} + +/* Titoli un filo più compatti */ +.info-panel h3 { + font-size: var(--info-heading); + margin: var(--info-h3-mt) 0 var(--info-h3-mb); +} + +/* Righe e label */ +.info-row { + margin-bottom: var(--info-row-gap); +} + +.info-row b { + display: inline-block; + width: var(--info-label-w); +} + +/* Mappa nel pannello */ +.info-map { + width: 100%; + height: var(--info-map-h); + margin-top: var(--info-map-mt); + border-radius: 6px; + overflow: hidden; + border: 1px solid #ccc; +} + +/* Spacer verticali */ +.info-spacer { + height: var(--info-spacer-h); +} + +/* =============================== + (Opzionale) Mobile: un filo più grande < 480px + Decommenta se vuoi mantenere leggibilità maggiore su schermi piccoli + =============================== */ +/* +@media (max-width: 480px) { + .info-panel { font-size: 15px; } + .info-panel h3 { font-size: 16px; } +} +*/ \ No newline at end of file