5th

public/css/infoPanel.css

@@ -1,44 +1,88 @@
-.info-panel {
+/* ===============================
-  position: fixed;
+   Variabili (scala tipografica pannello info)
-  top: 0;
+   Modifica qui per regolare tutto il pannello
-  right: 0;
+   =============================== */
-  width: 320px;
+:root {
-  height: 100%;
+  --info-font: 14px;      /* base testo pannello (prima ~16px) */
-  background: #fff;
+  --info-line: 1.4;       /* interlinea per migliorare leggibilità */
-  padding: 16px;
+
-  box-shadow: -2px 0 6px rgba(0,0,0,0.25);
+  --info-heading: 15px;   /* dimensione titoli h3 nel pannello */
-  overflow-y: auto;
+  --info-h3-mt: 6px;      /* margin-top h3 */
-  z-index: 10000;
+  --info-h3-mb: 10px;     /* margin-bottom h3 */
-  transform: translateX(100%);
+
-  transition: transform 0.3s ease;
+  --info-row-gap: 8px;    /* spazio verticale tra righe (era 10px) */
-}
+  --info-label-w: 100px;  /* larghezza colonna etichette (era 110px) */
-
+
-.info-panel.open {
+  --info-map-h: 220px;    /* altezza mappa (era 250px) */
-  transform: translateX(0);
+  --info-map-mt: 15px;    /* spazio sopra la mappa */
-}
+
-
+  --info-spacer-h: 16px;  /* altezza degli spacer */
-.info-panel h3 {
+}
-  margin-top: 0;
+
-}
+/* ===============================
-
+   PANNELLO INFO
-.info-row {
+   =============================== */
-  margin-bottom: 10px;
+.info-panel {
-}
+  position: fixed;
-
+  top: 0;
-.info-row b {
+  right: 0;
-  display: inline-block;
+  width: 320px;
-  width: 110px;
+  height: 100%;
-}
+  background: #fff;
-
+  padding: 16px;
-.info-map {
+  box-shadow: -2px 0 6px rgba(0,0,0,0.25);
-  width: 100%;
+  overflow-y: auto;
-  height: 250px;
+  z-index: 10000;
-  margin-top: 15px;
+  transform: translateX(100%);
-  border-radius: 6px;
+  transition: transform 0.3s ease;
-  overflow: hidden;
+
-  border: 1px solid #ccc;
+  /* Scala tipografica via variabili */
-}
+  font-size: var(--info-font);
-
+  line-height: var(--info-line);
-.info-spacer {
+}
-  height: 16px;   /* o 20px se vuoi più spazio */
+
-}
+.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; }
+}
+*/