@sailingrotevista/rotevista-dash 3.0.3 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/style.css +190 -98
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sailingrotevista/rotevista-dash",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "description": "Public Wind Dashboard with navigation and course aids",
5
5
  "main": "index.js",
6
6
  "publishConfig": {
package/style.css CHANGED
@@ -81,32 +81,58 @@ body {
81
81
  }
82
82
 
83
83
  /* ==========================================================================
84
- 4. TIPOGRAFIA GERARCHICA (REGOLE BASE)
84
+ 4. TIPOGRAFIA GERARCHICA (OTTIMIZZATA PER TUTTI I DISPLAY)
85
85
  ========================================================================== */
86
- .value { color: #000; font-size: clamp(1.2rem, 32cqw, 3.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -1.5px; }
87
86
 
88
- /* Valore MASSIVO (Dati reali): 55% altezza box, larghezza protetta a 22% schermo */
87
+ /* --- VALORI STANDARD (STW, SOG, DEPTH, TWS) --- */
88
+ .value {
89
+ color: #000;
90
+ /* Su Tablet: 25% altezza box. Su schermi stretti max 32% larghezza */
91
+ font-size: clamp(1.1rem, 25cqh, 32cqw);
92
+ font-weight: 600; line-height: 0.85; letter-spacing: -1.5px;
93
+ margin-top: auto; margin-bottom: 2px;
94
+ }
95
+
96
+ /* Protezione iPhone Landscape: Schermi molto bassi */
97
+ @media screen and (max-height: 450px) {
98
+ .value { font-size: clamp(1rem, 18cqh, 25cqw) !important; }
99
+ }
100
+
101
+ /* --- VALORI MEDIATI (HEADING, COG, TWA, AWA) --- */
89
102
  .value-large {
103
+ font-weight: 600; line-height: 1; margin: auto 0;
104
+ /* 55cqh riempie il box verticalmente, 22cqw protegge la larghezza */
90
105
  font-size: clamp(1.5rem, 55cqh, 22cqw) !important;
91
- font-weight: 600; line-height: 0.8; margin: 0 !important;
92
106
  }
93
107
 
94
- /* BOX TWD: Bussola a SX, Valore a DX, centrati verticalmente */
95
- .value-with-compass { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 85%; }
96
- .box-twd .mini-compass { height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0; }
97
- .box-twd #twd-avg { font-size: clamp(1.5rem, 55cqh, 20cqw) !important; text-align: right; line-height: 1; }
108
+ @media screen and (max-height: 450px) {
109
+ .value-large { font-size: clamp(1.4rem, 40cqh, 20cqw) !important; }
110
+ }
111
+
112
+ /* --- BOX TWD (Bussola Meteo) --- */
113
+ .value-with-compass {
114
+ display: flex; flex-direction: row; justify-content: space-between;
115
+ align-items: center; width: 100%; height: 85%;
116
+ }
117
+ .box-twd .mini-compass {
118
+ height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0;
119
+ }
120
+ @media screen and (max-height: 450px) {
121
+ .box-twd .mini-compass { height: 65cqh !important; }
122
+ .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 20cqw) !important; }
123
+ }
98
124
 
99
- /* BOX TACK: HDG a SX, COG a DX, Titoli sopra (Default Landscape/Portrait) */
125
+ /* --- BOX TACK (Mure Opposte) --- */
100
126
  .box-tack .dual-value-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
101
127
  .box-tack .dual-value-col { display: flex; flex-direction: column; justify-content: center; }
102
128
  .box-tack .dual-value-col:first-child { align-items: flex-start; }
103
129
  .box-tack .dual-value-col:last-child { align-items: flex-end; }
104
130
  .box-tack .dual-label { color: #888; font-size: 0.5rem; font-weight: 800; margin-bottom: -2px; }
105
- .box-tack .value.dual-val { font-size: clamp(1rem, 35cqh, 12cqw) !important; line-height: 0.9; }
131
+ .box-tack .value.dual-val { font-size: clamp(1rem, 32cqh, 10cqw) !important; line-height: 0.9; }
106
132
 
107
- /* Tag HERCULES: Allineato all'unità (lato interno schermo) */
108
- .box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
109
- .box-hercules .unit::before { font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; content: "HERCULES "; }
133
+ @media screen and (max-height: 450px) {
134
+ .box-tack .value.dual-val { font-size: clamp(0.9rem, 28cqh, 10cqw) !important; }
135
+ }
110
136
 
111
137
  /* ==========================================================================
112
138
  5. TACTICAL FOCUS MODE
@@ -133,14 +159,27 @@ body {
133
159
  justify-content: center !important;
134
160
  }
135
161
 
136
- /* PRIORITÀ COLORE HERCULES IN FOCUS:
137
- Forza lo sfondo rosso anche quando il box è ingrandito */
162
+ /* Ingrandimento scale nel Focus Mode */
163
+ .focus-active .is-focused .scale-labels {
164
+ font-size: clamp(14px, 2vw, 24px) !important;
165
+ min-width: 60px !important;
166
+ color: #444 !important;
167
+ }
168
+
169
+ /* Margine extra per le scale nel Focus */
170
+ .focus-active .is-focused .graph-wrapper { margin-top: 25px !important; }
171
+
172
+ /* PRIORITÀ COLORE HERCULES IN FOCUS */
138
173
  .focus-active .is-focused.box-hercules {
139
174
  background: rgba(255, 0, 0, 0.12) !important;
140
175
  box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.1);
141
176
  }
142
177
 
143
- .focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 15rem) !important; margin-top: 20px; }
178
+ .focus-active .is-focused .value {
179
+ font-size: clamp(4rem, 25cqh, 15rem) !important;
180
+ margin-top: 20px !important;
181
+ }
182
+
144
183
  .focus-active .box-gauge { display: flex !important; grid-area: gauge !important; }
145
184
 
146
185
  /* ==========================================================================
@@ -278,61 +317,70 @@ body {
278
317
  }
279
318
 
280
319
  /* ==========================================================================
281
- 8. RESPONSIVE (PORTRAIT MODE)
320
+ 8. RESPONSIVE (PORTRAIT MODE - Rapporto < 0.85)
282
321
  ========================================================================== */
283
322
  @media screen and (max-aspect-ratio: 0.85/1) {
284
323
  .main-container {
285
- grid-template-areas:
286
- "gauge gauge"
287
- "stw depth"
288
- "sog tws"
289
- "hdg twa"
290
- "cog awa"
291
- "tack twd" !important;
324
+ grid-template-areas: "gauge gauge" "stw depth" "sog tws" "hdg twa" "cog awa" "tack twd" !important;
292
325
  grid-template-columns: 1fr 1fr !important;
293
326
  grid-template-rows: 40vh 1.75fr 1.75fr 0.75fr 0.75fr 1.25fr !important;
294
327
  }
295
328
 
296
- /* Impedisce ai box di collassare in altezza in verticale */
297
329
  .data-box { height: auto !important; }
298
330
 
299
- /* --- FOCUS MODE IN VERTICALE (STACKED) --- */
300
- /* Quando siamo in verticale e attiviamo il focus, impiliamo Sopra/Sotto */
301
- .main-container.focus-active {
302
- grid-template-columns: 1fr !important; /* Colonna singola */
303
- grid-template-rows: 65vh 35vh !important; /* 65% Altezza al dato, 35% alla bussola */
304
- grid-template-areas:
305
- "focused"
306
- "gauge" !important;
331
+ /* --- OTTIMIZZAZIONE COMPATTA PER I BOX CON GRAFICO --- */
332
+ .box-stw, .box-sog, .box-depth, .box-tws {
333
+ justify-content: flex-start !important;
334
+ /* Ridotto lo spazio superiore per avvicinare il valore al titolo */
335
+ padding-top: 1.2rem !important;
307
336
  }
308
337
 
309
- /* Correzione dimensioni box in Focus Verticale */
310
- .focus-active .is-focused {
311
- height: 65vh !important;
312
- width: 100vw !important;
313
- padding: 5vh 5vw !important; /* Più respiro per display curvi */
338
+ /* --- OTTIMIZZAZIONE FONT VALORI CON GRAFICO IN VERTICALE --- */
339
+ .box-stw .value,
340
+ .box-sog .value,
341
+ .box-depth .value,
342
+ .box-tws .value {
343
+ /* Aumentato a 30cqh per pareggiare il peso visivo di HEADING */
344
+ /* Alzato anche il limite cqw a 35 per permettere al numero di allargarsi */
345
+ font-size: clamp(1.2rem, 30cqh, 35cqw) !important;
346
+ line-height: 0.8 !important;
347
+ margin-top: -4px !important; /* Saliamo ancora un briciolo verso il titolo */
348
+ margin-bottom: 4px !important;
349
+ padding-bottom: 0 !important;
350
+ font-weight: 700; /* Leggermente più marcato */
314
351
  }
315
352
 
316
- /* Correzione Bussola in Focus Verticale */
317
- .focus-active .box-gauge {
318
- height: 35vh !important;
319
- width: 100vw !important;
320
- display: flex !important;
321
- align-items: center;
322
- justify-content: center;
353
+ /* Espansione del grafico per occupare tutto il resto del box */
354
+ .box-stw .graph-wrapper,
355
+ .box-sog .graph-wrapper,
356
+ .box-depth .graph-wrapper,
357
+ .box-tws .graph-wrapper {
358
+ margin-top: 0 !important;
359
+ flex-grow: 1 !important;
323
360
  }
324
361
 
325
- /* Ridimensionamento font per Focus Verticale (per non sbordare) */
326
- .focus-active .is-focused .value {
327
- font-size: clamp(4rem, 20cqh, 12rem) !important;
362
+ /* --- ALTRI BOX (HEADING, COG, ecc.) RESTANO CENTRATI --- */
363
+ .box-hdg, .box-cog, .box-twa, .box-awa, .box-twd, .box-tack {
364
+ justify-content: center !important;
365
+ padding-top: 1.2rem !important;
328
366
  }
329
367
 
330
- /* In verticale il box TACK è largo: forziamo i due valori ai bordi */
331
- .box-tack .dual-value-container {
332
- flex-direction: row !important;
333
- justify-content: space-between !important;
334
- align-items: center !important;
368
+ /* --- FOCUS MODE IN VERTICALE --- */
369
+ .main-container.focus-active {
370
+ grid-template-columns: 1fr !important;
371
+ grid-template-rows: 65vh 35vh !important;
372
+ grid-template-areas: "focused" "gauge" !important;
335
373
  }
374
+ .focus-active .is-focused { height: 65vh !important; width: 100vw !important; padding: 5vh 5vw !important; justify-content: center !important; }
375
+ .focus-active .is-focused .value { font-size: clamp(4rem, 20cqh, 15rem) !important; margin-top: 20px !important; }
376
+ .focus-active .box-gauge { height: 35vh !important; width: 100vw !important; display: flex !important; align-items: center; justify-content: center; }
377
+
378
+ /* --- TACK IN VERTICALE --- */
379
+ .box-tack .dual-value-container { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
380
+ .box-tack .dual-value-col { display: flex !important; flex-direction: column !important; justify-content: center; }
381
+ .box-tack .dual-value-col:first-child { align-items: flex-start !important; text-align: left !important; }
382
+ .box-tack .dual-value-col:last-child { align-items: flex-end !important; text-align: right !important; }
383
+ .box-tack .value.dual-val { font-size: clamp(1rem, 38cqh, 15cqw) !important; }
336
384
  }
337
385
 
338
386
  /* ==========================================================================
@@ -377,91 +425,135 @@ rect[fill="#222"] { fill: #eee !important; }
377
425
  #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
378
426
 
379
427
  /* ==========================================================================
380
- 10. NIGHT MODE (TACTICAL RED - INTEGRALE E RIFINITO)
428
+ 10. NIGHT MODE (TACTICAL RED - VERSIONE DEFINITIVA E REVISIONATA)
381
429
  ========================================================================== */
382
- body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
430
+ body.night-mode {
431
+ background-color: #000 !important;
432
+ color: #ff3333 !important;
433
+ }
434
+
435
+ /* --- STRUTTURA E GRIGLIA --- */
436
+ .night-mode .data-box {
437
+ background: rgba(15, 0, 0, 0.6) !important;
438
+ border-color: #440000 !important; /* Confini box visibili in rosso cupo */
439
+ }
383
440
 
384
- /* Pannelli e Box */
385
- .night-mode .data-box { background: rgba(20, 0, 0, 0.4) !important; border-color: #330000; }
441
+ /* Etichette e Testi secondari */
386
442
  .night-mode .label,
387
443
  .night-mode .unit,
388
- .night-mode .dual-label { color: #800000 !important; }
444
+ .night-mode .dual-label,
445
+ .night-mode .dual-label {
446
+ color: #800000 !important;
447
+ }
389
448
 
449
+ /* Valori Numerici */
390
450
  .night-mode .value,
391
451
  .night-mode .value-large {
392
452
  color: #ff3333 !important;
393
453
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
394
454
  }
395
455
 
456
+ /* Stato Online/Offline */
396
457
  .night-mode #status {
397
- background: rgba(255, 0, 0, 0.1);
398
- color: #ff0000;
458
+ background: rgba(255, 0, 0, 0.1) !important;
459
+ color: #ff3333 !important;
399
460
  }
400
461
 
401
- /* --- GRAFICI NIGHT MODE: Solo linee, zero abbagliamento --- */
402
- .night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; border: 1px solid #330000; }
403
- .night-mode .sparkline path:first-of-type { display: none !important; }
462
+ /* --- GRAFICI (RIGOROSAMENTE 1PX, SENZA RIEMPIMENTO) --- */
463
+ .night-mode .graph-wrapper { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid #330000; }
464
+ .night-mode .sparkline path:first-of-type { display: none !important; } /* Rimuove l'alone bianco/grigio */
404
465
  .night-mode .sparkline path {
405
466
  fill: none !important;
406
467
  stroke: #ff3333 !important;
407
468
  stroke-width: 1px !important;
408
469
  filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
409
470
  }
410
- .night-mode .sparkline line { stroke: rgba(150, 0, 0, 0.1) !important; }
471
+ .night-mode .sparkline line { stroke: rgba(150, 0, 0, 0.15) !important; } /* Griglia soffusa */
411
472
  .night-mode #tws-graph line:not([stroke*="rgba"]) {
412
473
  stroke: #ff3333 !important;
413
474
  stroke-width: 1px !important;
414
475
  }
415
- .night-mode .scale-labels { color: #660000 !important; }
416
476
 
417
- /* Hercules in Night Mode */
418
- .night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
419
- .night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
477
+ /* Scale graduate dei grafici */
478
+ .night-mode .scale-labels { color: #800000 !important; }
479
+ .night-mode .is-focused .scale-labels { color: #ff3333 !important; }
420
480
 
421
- /* --- WIND GAUGE NIGHT: Scurimento settori e icone --- */
422
- .night-mode #wind-gauge circle[fill="#050505"],
423
- .night-mode #wind-gauge circle[fill="#fcfcfc"] { fill: #050505 !important; }
481
+ /* --- WIND GAUGE NIGHT (OSCURAMENTO TOTALE E FIX BIANCO) --- */
482
+ /* Forza tutti i cerchi della bussola al nero per eliminare il disco bianco */
483
+ .night-mode #wind-gauge circle {
484
+ fill: #000 !important;
485
+ stroke: #220000 !important;
486
+ }
424
487
 
425
- .night-mode #wind-gauge circle[fill="#121212"],
426
- .night-mode #wind-gauge circle[fill="#f0f0f0"] { fill: #0a0000 !important; }
488
+ /* Cerchio intermedio e hotspot centrale */
489
+ .night-mode #wind-gauge circle:nth-of-type(2),
490
+ .night-mode #fullscreen-hotspot {
491
+ fill: #050000 !important;
492
+ stroke: #330000 !important;
493
+ }
427
494
 
428
- /* Glow e Hotspot centrale */
429
- .night-mode #fullscreen-hotspot { fill: #000 !important; stroke: #330000 !important; }
430
- .night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
495
+ /* Correzione Glow centrale (da bianco a rosso neon) */
496
+ .night-mode #center-glow feDropShadow {
497
+ flood-color: #ff0000 !important;
498
+ flood-opacity: 0.6 !important;
499
+ }
431
500
 
432
- .night-mode #boat-icon { fill: #330000 !important; opacity: 0.6 !important; }
501
+ /* AWS Interno: Etichetta e Valore */
502
+ .night-mode #aws-display-group text { fill: #800000 !important; }
433
503
  .night-mode #aws-val-svg { fill: #ff3333 !important; }
434
- .night-mode #aws-display-group text { fill: #660000 !important; }
435
504
 
436
- /* SCALA GRADUATA BUSSOLA: Tacche e numeri rosso cupo */
437
- .night-mode #ticks line { stroke: #4d0000 !important; }
505
+ /* FIX LOGO BARCA: Ombra scura e coerente */
506
+ .night-mode #boat-icon {
507
+ fill: #150000 !important;
508
+ opacity: 0.8 !important;
509
+ }
510
+
511
+ /* FIX COG/TRACK: Triangolo rosso senza bordo bianco */
512
+ .night-mode #track-pointer path {
513
+ fill: #ff3333 !important;
514
+ stroke: none !important;
515
+ }
516
+
517
+ /* Tacche e Numeri Gradi Bussola */
518
+ .night-mode #ticks line { stroke: #550000 !important; }
438
519
  .night-mode #tick-labels { fill: #800000 !important; }
439
520
 
440
- /* SETTORI VENTO: Il verde diventa un rosso scuro trattteggiato */
441
- .night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; }
442
- .night-mode #wind-gauge path[stroke="#00ff00"] { stroke: #440000 !important; stroke-dasharray: 4, 3; opacity: 0.6; }
443
- .night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; }
521
+ /* Settori Vento: Scuriti e differenziati per mure */
522
+ .night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #800000 !important; opacity: 0.8; }
523
+ .night-mode #wind-gauge path[stroke="#00ff00"] {
524
+ stroke: #440000 !important;
525
+ stroke-dasharray: 5, 4 !important;
526
+ opacity: 0.7;
527
+ }
528
+ .night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; opacity: 0.6; }
529
+
530
+ /* Lancette AWA/TWA */
531
+ .night-mode #awa-pointer path { fill: #ff0000 !important; stroke: #000 !important; }
532
+ .night-mode #twa-pointer path { fill: #800000 !important; stroke: #000 !important; }
444
533
 
445
- /* --- LEEWAY & POINTERS NIGHT --- */
534
+ /* --- LEEWAY NIGHT (FIX SCRITTA E GRADIENTE) --- */
535
+ .night-mode #leeway-val {
536
+ fill: #ff3333 !important;
537
+ color: #ff3333 !important;
538
+ }
446
539
  .night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
447
- .night-mode #leeway-val { fill: #ff3333 !important; }
448
- .night-mode rect[fill="#222"], .night-mode rect[fill="#eee"] { fill: #0a0000 !important; stroke: #200000; }
449
-
450
- /* Scala graduata Leeway: tacche e numeri */
451
- .night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
452
- .night-mode g[fill="#555"] text { fill: #660000 !important; }
540
+ .night-mode rect[fill="#eee"],
541
+ .night-mode rect[fill="#222"] {
542
+ fill: #0a0000 !important;
543
+ stroke: #330000 !important;
544
+ }
453
545
 
454
- /* Lancette */
455
- .night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
456
- .night-mode #twa-pointer path { fill: #800000; stroke: #000; }
457
- .night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
546
+ /* Scala graduata Leeway (tacche e numeri) */
547
+ .night-mode g[stroke="#555"] line { stroke: #440000 !important; }
548
+ .night-mode g[fill="#555"] text { fill: #800000 !important; }
458
549
 
459
550
  /* --- MINI BUSSOLA TWD NIGHT --- */
460
- .night-mode .mini-compass { border-color: #330000; background: #000; }
551
+ .night-mode .mini-compass { border-color: #330000 !important; background: #000 !important; }
552
+ .night-mode .mini-compass circle { stroke: #330000 !important; }
461
553
  .night-mode .mini-compass text { fill: #800000 !important; }
462
- .night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; }
554
+ .night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; } /* La "S" */
463
555
  .night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
464
- .night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; filter: drop-shadow(0 0 4px #ff0000); }
556
+ .night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; }
465
557
 
466
558
  /* ==========================================================================
467
559
  11. TREND E ANIMAZIONI