@sailingrotevista/rotevista-dash 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Public Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/style.css

@@ -81,58 +81,45 @@ body {
 }
 
 /* ==========================================================================
-   4. TIPOGRAFIA GERARCHICA (REGOLE BASE + PROTEZIONE SCHERMI BASSI)
+   4. TIPOGRAFIA GERARCHICA (OTTIMIZZATA PER TUTTI I DISPLAY)
    ========================================================================== */
 
 /* --- VALORI STANDARD (STW, SOG, DEPTH, TWS) --- */
 .value {
     color: #000;
-    /* Default Tablet: Usiamo cqw per la larghezza ma controlliamo l'altezza con cqh */
-    font-size: clamp(1.2rem, 25cqh, 32cqw);
+    /* Su Tablet: 25% altezza box. Su schermi stretti max 32% larghezza */
+    font-size: clamp(1.1rem, 25cqh, 32cqw);
     font-weight: 600; line-height: 0.85; letter-spacing: -1.5px;
     margin-top: auto; margin-bottom: 2px;
 }
 
-/* PROTEZIONE IPHONE LANDSCAPE: Se lo schermo è basso (<450px), riduciamo l'altezza del font */
+/* Protezione iPhone Landscape: Schermi molto bassi */
 @media screen and (max-height: 450px) {
-    .value { font-size: clamp(1.1rem, 18cqh, 28cqw) !important; }
-}
-
-/* PROTEZIONE SMART: Se il box è stretto (Split View), riduciamo leggermente */
-@container (max-width: 300px) {
-    .value { font-size: clamp(1.1rem, 24cqw, 2.8rem) !important; letter-spacing: -1px; }
+    .value { font-size: clamp(1rem, 18cqh, 25cqw) !important; }
 }
 
 /* --- VALORI MEDIATI (HEADING, COG, TWA, AWA) --- */
 .value-large {
     font-weight: 600; line-height: 1; margin: auto 0;
-    /* Default Tablet: 55% dell'altezza del box */
-    font-size: clamp(1.5rem, 55cqh, 25cqw) !important;
+    /* 55cqh riempie il box verticalmente, 22cqw protegge la larghezza */
+    font-size: clamp(1.5rem, 55cqh, 22cqw) !important;
 }
 
-/* PROTEZIONE IPHONE LANDSCAPE: Se lo schermo è basso, abbassiamo al 40% */
 @media screen and (max-height: 450px) {
-    .value-large { font-size: clamp(1.4rem, 40cqh, 22cqw) !important; }
-}
-
-@container (max-width: 300px) {
-    .value-large { font-size: clamp(1.4rem, 45cqh, 25cqw) !important; }
+    .value-large { font-size: clamp(1.4rem, 40cqh, 20cqw) !important; }
 }
 
 /* --- BOX TWD (Bussola Meteo) --- */
 .value-with-compass {
     display: flex; flex-direction: row; justify-content: space-between;
-    align-items: center; width: 100%; height: 85%;
+    align-items: center; width: 100%; height: 85%; 
 }
-
 .box-twd .mini-compass {
     height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0;
 }
-
-/* PROTEZIONE IPHONE LANDSCAPE: Rimpiccioliamo la bussola se il box è basso */
 @media screen and (max-height: 450px) {
     .box-twd .mini-compass { height: 65cqh !important; }
-    .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 22cqw) !important; }
+    .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 20cqw) !important; }
 }
 
 /* --- BOX TACK (Mure Opposte) --- */
@@ -141,23 +128,12 @@ body {
 .box-tack .dual-value-col:first-child { align-items: flex-start; }
 .box-tack .dual-value-col:last-child { align-items: flex-end; }
 .box-tack .dual-label { color: #888; font-size: 0.5rem; font-weight: 800; margin-bottom: -2px; }
+.box-tack .value.dual-val { font-size: clamp(1rem, 32cqh, 10cqw) !important; line-height: 0.9; }
 
-.box-tack .value.dual-val {
-    font-size: clamp(1rem, 35cqh, 12cqw) !important; line-height: 0.9;
-}
-
-/* PROTEZIONE IPHONE LANDSCAPE: TACK ancora più sottile */
 @media screen and (max-height: 450px) {
     .box-tack .value.dual-val { font-size: clamp(0.9rem, 28cqh, 10cqw) !important; }
 }
 
-/* --- TAG HERCULES --- */
-.box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
-.box-hercules .unit::before {
-    font-size: 7px; color: #ff4444; font-weight: 900;
-    letter-spacing: 1px; text-transform: uppercase; content: "HERCULES ";
-}
-
 /* ==========================================================================
    5. TACTICAL FOCUS MODE
    ========================================================================== */
@@ -183,14 +159,27 @@ body {
     justify-content: center !important;
 }
 
-/* PRIORITÀ COLORE HERCULES IN FOCUS:
-   Forza lo sfondo rosso anche quando il box è ingrandito */
+/* Ingrandimento scale nel Focus Mode */
+.focus-active .is-focused .scale-labels {
+    font-size: clamp(14px, 2vw, 24px) !important;
+    min-width: 60px !important;
+    color: #444 !important;
+}
+
+/* Margine extra per le scale nel Focus */
+.focus-active .is-focused .graph-wrapper { margin-top: 25px !important; }
+
+/* PRIORITÀ COLORE HERCULES IN FOCUS */
 .focus-active .is-focused.box-hercules {
     background: rgba(255, 0, 0, 0.12) !important;
     box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.1);
 }
 
-.focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 15rem) !important; margin-top: 20px; }
+.focus-active .is-focused .value {
+    font-size: clamp(4rem, 25cqh, 15rem) !important;
+    margin-top: 20px !important;
+}
+
 .focus-active .box-gauge { display: flex !important; grid-area: gauge !important; }
 
 /* ==========================================================================
@@ -436,91 +425,135 @@ rect[fill="#222"] { fill: #eee !important; }
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   10. NIGHT MODE (TACTICAL RED - INTEGRALE E RIFINITO)
+   10. NIGHT MODE (TACTICAL RED - VERSIONE DEFINITIVA E REVISIONATA)
    ========================================================================== */
-body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
+body.night-mode {
+    background-color: #000 !important;
+    color: #ff3333 !important;
+}
 
-/* Pannelli e Box */
-.night-mode .data-box { background: rgba(20, 0, 0, 0.4) !important; border-color: #330000; }
+/* --- STRUTTURA E GRIGLIA --- */
+.night-mode .data-box {
+    background: rgba(15, 0, 0, 0.6) !important;
+    border-color: #440000 !important; /* Confini box visibili in rosso cupo */
+}
+
+/* Etichette e Testi secondari */
 .night-mode .label,
 .night-mode .unit,
-.night-mode .dual-label { color: #800000 !important; }
+.night-mode .dual-label,
+.night-mode .dual-label {
+    color: #800000 !important;
+}
 
+/* Valori Numerici */
 .night-mode .value,
 .night-mode .value-large {
     color: #ff3333 !important;
     text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
 }
 
+/* Stato Online/Offline */
 .night-mode #status {
-    background: rgba(255, 0, 0, 0.1);
-    color: #ff0000;
+    background: rgba(255, 0, 0, 0.1) !important;
+    color: #ff3333 !important;
 }
 
-/* --- GRAFICI NIGHT MODE: Solo linee, zero abbagliamento --- */
-.night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; border: 1px solid #330000; }
-.night-mode .sparkline path:first-of-type { display: none !important; }
+/* --- GRAFICI (RIGOROSAMENTE 1PX, SENZA RIEMPIMENTO) --- */
+.night-mode .graph-wrapper { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid #330000; }
+.night-mode .sparkline path:first-of-type { display: none !important; } /* Rimuove l'alone bianco/grigio */
 .night-mode .sparkline path {
     fill: none !important;
     stroke: #ff3333 !important;
     stroke-width: 1px !important;
     filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
 }
-.night-mode .sparkline line { stroke: rgba(150, 0, 0, 0.1) !important; }
+.night-mode .sparkline line { stroke: rgba(150, 0, 0, 0.15) !important; } /* Griglia soffusa */
 .night-mode #tws-graph line:not([stroke*="rgba"]) {
     stroke: #ff3333 !important;
     stroke-width: 1px !important;
 }
-.night-mode .scale-labels { color: #660000 !important; }
 
-/* Hercules in Night Mode */
-.night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
-.night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
+/* Scale graduate dei grafici */
+.night-mode .scale-labels { color: #800000 !important; }
+.night-mode .is-focused .scale-labels { color: #ff3333 !important; }
 
-/* --- WIND GAUGE NIGHT: Scurimento settori e icone --- */
-.night-mode #wind-gauge circle[fill="#050505"],
-.night-mode #wind-gauge circle[fill="#fcfcfc"] { fill: #050505 !important; }
+/* --- WIND GAUGE NIGHT (OSCURAMENTO TOTALE E FIX BIANCO) --- */
+/* Forza tutti i cerchi della bussola al nero per eliminare il disco bianco */
+.night-mode #wind-gauge circle {
+    fill: #000 !important;
+    stroke: #220000 !important;
+}
 
-.night-mode #wind-gauge circle[fill="#121212"],
-.night-mode #wind-gauge circle[fill="#f0f0f0"] { fill: #0a0000 !important; }
+/* Cerchio intermedio e hotspot centrale */
+.night-mode #wind-gauge circle:nth-of-type(2),
+.night-mode #fullscreen-hotspot {
+    fill: #050000 !important;
+    stroke: #330000 !important;
+}
 
-/* Glow e Hotspot centrale */
-.night-mode #fullscreen-hotspot { fill: #000 !important; stroke: #330000 !important; }
-.night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
+/* Correzione Glow centrale (da bianco a rosso neon) */
+.night-mode #center-glow feDropShadow {
+    flood-color: #ff0000 !important;
+    flood-opacity: 0.6 !important;
+}
 
-.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6 !important; }
+/* AWS Interno: Etichetta e Valore */
+.night-mode #aws-display-group text { fill: #800000 !important; }
 .night-mode #aws-val-svg { fill: #ff3333 !important; }
-.night-mode #aws-display-group text { fill: #660000 !important; }
 
-/* SCALA GRADUATA BUSSOLA: Tacche e numeri rosso cupo */
-.night-mode #ticks line { stroke: #4d0000 !important; }
+/* FIX LOGO BARCA: Ombra scura e coerente */
+.night-mode #boat-icon {
+    fill: #150000 !important;
+    opacity: 0.8 !important;
+}
+
+/* FIX COG/TRACK: Triangolo rosso senza bordo bianco */
+.night-mode #track-pointer path {
+    fill: #ff3333 !important;
+    stroke: none !important;
+}
+
+/* Tacche e Numeri Gradi Bussola */
+.night-mode #ticks line { stroke: #550000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
 
-/* SETTORI VENTO: Il verde diventa un rosso scuro trattteggiato */
-.night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; }
-.night-mode #wind-gauge path[stroke="#00ff00"] { stroke: #440000 !important; stroke-dasharray: 4, 3; opacity: 0.6; }
-.night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; }
+/* Settori Vento: Scuriti e differenziati per mure */
+.night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #800000 !important; opacity: 0.8; }
+.night-mode #wind-gauge path[stroke="#00ff00"] {
+    stroke: #440000 !important;
+    stroke-dasharray: 5, 4 !important;
+    opacity: 0.7;
+}
+.night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; opacity: 0.6; }
 
-/* --- LEEWAY & POINTERS NIGHT --- */
-.night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
-.night-mode #leeway-val { fill: #ff3333 !important; }
-.night-mode rect[fill="#222"], .night-mode rect[fill="#eee"] { fill: #0a0000 !important; stroke: #200000; }
+/* Lancette AWA/TWA */
+.night-mode #awa-pointer path { fill: #ff0000 !important; stroke: #000 !important; }
+.night-mode #twa-pointer path { fill: #800000 !important; stroke: #000 !important; }
 
-/* Scala graduata Leeway: tacche e numeri */
-.night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
-.night-mode g[fill="#555"] text { fill: #660000 !important; }
+/* --- LEEWAY NIGHT (FIX SCRITTA E GRADIENTE) --- */
+.night-mode #leeway-val {
+    fill: #ff3333 !important;
+    color: #ff3333 !important;
+}
+.night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
+.night-mode rect[fill="#eee"],
+.night-mode rect[fill="#222"] {
+    fill: #0a0000 !important;
+    stroke: #330000 !important;
+}
 
-/* Lancette */
-.night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
-.night-mode #twa-pointer path { fill: #800000; stroke: #000; }
-.night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
+/* Scala graduata Leeway (tacche e numeri) */
+.night-mode g[stroke="#555"] line { stroke: #440000 !important; }
+.night-mode g[fill="#555"] text { fill: #800000 !important; }
 
 /* --- MINI BUSSOLA TWD NIGHT --- */
-.night-mode .mini-compass { border-color: #330000; background: #000; }
+.night-mode .mini-compass { border-color: #330000 !important; background: #000 !important; }
+.night-mode .mini-compass circle { stroke: #330000 !important; }
 .night-mode .mini-compass text { fill: #800000 !important; }
-.night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; }
+.night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; } /* La "S" */
 .night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
-.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; filter: drop-shadow(0 0 4px #ff0000); }
+.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; }
 
 /* ==========================================================================
    11. TREND E ANIMAZIONI