@sailingrotevista/rotevista-dash 2.0.16 → 2.0.17
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.
- package/app.js +260 -131
- package/index.html +35 -81
- package/package.json +1 -1
- package/style.css +76 -249
package/style.css
CHANGED
|
@@ -25,27 +25,17 @@ body {
|
|
|
25
25
|
box-sizing: border-box;
|
|
26
26
|
gap: 8px; /* Spazio costante tra tutti i blocchi della dashboard */
|
|
27
27
|
|
|
28
|
-
/*
|
|
29
|
-
LAYOUT LIQUIDO:
|
|
28
|
+
/* LAYOUT LIQUIDO:
|
|
30
29
|
I lati hanno un minimo vitale (180px) per proteggere i testi.
|
|
31
|
-
Il centro (auto) si adatta millimetricamente al diametro dell'SVG.
|
|
32
|
-
*/
|
|
30
|
+
Il centro (auto) si adatta millimetricamente al diametro dell'SVG. */
|
|
33
31
|
grid-template-columns: minmax(180px, 1fr) minmax(auto, 1.5fr) minmax(180px, 1fr);
|
|
34
32
|
grid-template-rows: 100%;
|
|
35
33
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
36
34
|
justify-content: stretch;
|
|
37
35
|
}
|
|
38
36
|
|
|
39
|
-
/* Espansione colonne per schermi molto larghi (es. 16:10 / 16:9)
|
|
40
|
-
@media (min-aspect-ratio: 1.5) {
|
|
41
|
-
.main-container {
|
|
42
|
-
grid-template-columns: minmax(200px, 1fr) minmax(auto, 3fr) minmax(200px, 1fr);
|
|
43
|
-
gap: 15px;
|
|
44
|
-
}
|
|
45
|
-
}*/
|
|
46
|
-
|
|
47
37
|
/* ==========================================================================
|
|
48
|
-
2. PANNELLI E DATA-BOX
|
|
38
|
+
2. PANNELLI E DATA-BOX (DISTRIBUZIONE FR)
|
|
49
39
|
========================================================================== */
|
|
50
40
|
.side-panel {
|
|
51
41
|
display: flex;
|
|
@@ -54,12 +44,14 @@ body {
|
|
|
54
44
|
border-radius: 12px;
|
|
55
45
|
height: 100%;
|
|
56
46
|
overflow: hidden;
|
|
47
|
+
gap: 2px;
|
|
57
48
|
}
|
|
58
49
|
|
|
59
50
|
.left-panel { grid-column: 1; }
|
|
60
51
|
|
|
61
52
|
.center-panel {
|
|
62
53
|
grid-column: 2;
|
|
54
|
+
position: relative; /* Indispensabile per posizionare #status al suo interno */
|
|
63
55
|
display: flex;
|
|
64
56
|
flex-direction: column;
|
|
65
57
|
align-items: center;
|
|
@@ -77,13 +69,14 @@ body {
|
|
|
77
69
|
.data-box {
|
|
78
70
|
position: relative;
|
|
79
71
|
border-bottom: 1px solid #222;
|
|
80
|
-
padding: 4px
|
|
72
|
+
padding: 2px 4px; /* Padding ottimizzato per il recupero spazio verticale */
|
|
81
73
|
display: flex;
|
|
82
74
|
flex-direction: column;
|
|
83
75
|
width: 100%;
|
|
84
76
|
box-sizing: border-box;
|
|
85
|
-
container-type: size; /*
|
|
86
|
-
flex: 1;
|
|
77
|
+
container-type: size; /* Per unità cqh */
|
|
78
|
+
flex: 1 1 0px; /* Divide lo spazio equamente in 5 parti */
|
|
79
|
+
min-height: 0;
|
|
87
80
|
overflow: hidden;
|
|
88
81
|
}
|
|
89
82
|
|
|
@@ -91,35 +84,24 @@ body {
|
|
|
91
84
|
.left-panel .data-box { align-items: flex-start; text-align: left; }
|
|
92
85
|
.right-panel .data-box { align-items: flex-end; text-align: right; }
|
|
93
86
|
|
|
94
|
-
.side-panel {
|
|
95
|
-
display: flex;
|
|
96
|
-
flex-direction: column;
|
|
97
|
-
height: 100%;
|
|
98
|
-
gap: 2px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.data-box {
|
|
102
|
-
flex: 1 1 0px; /* Ogni box si divide lo spazio equamente, ma può ridursi se serve */
|
|
103
|
-
min-height: 0; /* Fondamentale per permettere al grafico di non eccedere */
|
|
104
|
-
padding: 2px 4px; /* Ancora più compatto */
|
|
105
|
-
}
|
|
106
|
-
|
|
107
87
|
/* ==========================================================================
|
|
108
|
-
3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT)
|
|
88
|
+
3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT / DUAL SCREEN)
|
|
109
89
|
========================================================================== */
|
|
110
90
|
|
|
111
91
|
/* Nasconde le colonne non focalizzate */
|
|
112
92
|
.focus-active .side-panel:not(.has-focus) { display: none !important; }
|
|
113
93
|
|
|
114
|
-
/*
|
|
115
|
-
.focus-active
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
.focus-active.focus-side-left { grid-template-columns: 1fr auto !important; }
|
|
94
|
+
/* In Focus Mode Left: [Pannello Sinistro Largo | Centro Stretto] */
|
|
95
|
+
.focus-active.focus-side-left {
|
|
96
|
+
grid-template-columns: 2fr auto !important;
|
|
97
|
+
}
|
|
119
98
|
.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
|
|
120
99
|
.focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: flex-start; }
|
|
121
100
|
|
|
122
|
-
|
|
101
|
+
/* In Focus Mode Right: [Centro Stretto | Pannello Destro Largo] */
|
|
102
|
+
.focus-active.focus-side-right {
|
|
103
|
+
grid-template-columns: auto 2fr !important;
|
|
104
|
+
}
|
|
123
105
|
.focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: flex-start; }
|
|
124
106
|
.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
|
|
125
107
|
|
|
@@ -138,15 +120,6 @@ body {
|
|
|
138
120
|
.focus-active .is-focused .label-row .label { font-size: 2rem !important; }
|
|
139
121
|
.focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
|
|
140
122
|
|
|
141
|
-
/* Ingrandimento etichette Hercules in Focus */
|
|
142
|
-
.focus-active .is-focused.box-hercules .unit::before,
|
|
143
|
-
.focus-active .is-focused.box-hercules .unit::after,
|
|
144
|
-
.focus-active .is-focused.box-hercules .label::before,
|
|
145
|
-
.focus-active .is-focused.box-hercules .label::after {
|
|
146
|
-
font-size: 1.5rem !important;
|
|
147
|
-
letter-spacing: 2px !important;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
123
|
.focus-active .is-focused .sparkline path { stroke-width: 1px !important; }
|
|
151
124
|
|
|
152
125
|
/* ==========================================================================
|
|
@@ -154,17 +127,10 @@ body {
|
|
|
154
127
|
========================================================================== */
|
|
155
128
|
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
|
|
156
129
|
|
|
157
|
-
/* Simmetria Titoli/Unità: SX [Label...Unit], DX [Unit...Label] */
|
|
158
|
-
.left-panel .label-row { justify-content: space-between; flex-direction: row; }
|
|
159
|
-
.right-panel .label-row { justify-content: space-between; flex-direction: row; }
|
|
160
|
-
|
|
161
|
-
/* Forza i titoli MEAN (senza unità) a destra nella colonna DX */
|
|
162
|
-
.right-panel .label-row .label:only-child { margin-left: auto; }
|
|
163
|
-
|
|
164
130
|
.label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
|
|
165
131
|
.unit { color: #888; font-size: 0.6rem; font-weight: bold; }
|
|
166
132
|
|
|
167
|
-
/* Numero standard (22% altezza box
|
|
133
|
+
/* Numero standard (22% altezza box) */
|
|
168
134
|
.value {
|
|
169
135
|
color: #fff;
|
|
170
136
|
font-size: clamp(1.2rem, 22cqh, 3rem);
|
|
@@ -174,12 +140,7 @@ body {
|
|
|
174
140
|
padding-bottom: 5px;
|
|
175
141
|
}
|
|
176
142
|
|
|
177
|
-
|
|
178
|
-
.value-large, .dual-value-container, .value-with-compass {
|
|
179
|
-
margin-top: auto;
|
|
180
|
-
margin-bottom: auto;
|
|
181
|
-
}
|
|
182
|
-
|
|
143
|
+
.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
|
|
183
144
|
.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
|
|
184
145
|
|
|
185
146
|
/* TACK Layout (Mure opposte) */
|
|
@@ -189,12 +150,11 @@ body {
|
|
|
189
150
|
.value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
|
|
190
151
|
|
|
191
152
|
/* ==========================================================================
|
|
192
|
-
5. BUSSOLA TWD DINAMICA
|
|
153
|
+
5. BUSSOLA TWD DINAMICA (WIDGET)
|
|
193
154
|
========================================================================== */
|
|
194
155
|
.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
|
|
195
156
|
|
|
196
157
|
.mini-compass {
|
|
197
|
-
/* Forma circolare protetta: 80% dell'altezza o 42% della larghezza */
|
|
198
158
|
width: min(80cqh, 42cqw);
|
|
199
159
|
height: min(80cqh, 42cqw);
|
|
200
160
|
aspect-ratio: 1 / 1;
|
|
@@ -206,13 +166,8 @@ body {
|
|
|
206
166
|
transition: all 0.4s ease;
|
|
207
167
|
}
|
|
208
168
|
|
|
209
|
-
.value-with-compass .value-large {
|
|
210
|
-
margin: 0; flex: 1; text-align: right;
|
|
211
|
-
font-size: clamp(1rem, 38cqh, 4rem); white-space: nowrap;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
169
|
/* ==========================================================================
|
|
215
|
-
6. GRAFICI E SCALE (
|
|
170
|
+
6. GRAFICI E SCALE (OTTIMIZZAZIONE ORIZZONTALE)
|
|
216
171
|
========================================================================== */
|
|
217
172
|
.graph-wrapper {
|
|
218
173
|
position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
|
|
@@ -220,7 +175,7 @@ body {
|
|
|
220
175
|
border-radius: 4px; gap: 0px !important;
|
|
221
176
|
}
|
|
222
177
|
|
|
223
|
-
/*
|
|
178
|
+
/* Allargamento verso il centro */
|
|
224
179
|
.left-panel .graph-wrapper { margin-right: -6px; }
|
|
225
180
|
.right-panel .graph-wrapper { margin-left: -6px; }
|
|
226
181
|
|
|
@@ -229,17 +184,17 @@ body {
|
|
|
229
184
|
|
|
230
185
|
.scale-labels {
|
|
231
186
|
display: flex; flex-direction: column; justify-content: space-between;
|
|
232
|
-
font-size:
|
|
233
|
-
height: 100%; line-height: 1; padding: 0
|
|
187
|
+
font-size: 8px; color: #777; font-weight: bold; min-width: 12px;
|
|
188
|
+
height: 100%; line-height: 1; padding: 0; border: none !important;
|
|
234
189
|
}
|
|
235
190
|
|
|
236
|
-
/* Simmetria
|
|
237
|
-
.left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px;
|
|
191
|
+
/* Simmetria scale */
|
|
192
|
+
.left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px; }
|
|
238
193
|
.left-panel .sparkline { order: 1; }
|
|
239
|
-
.right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px;
|
|
194
|
+
.right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; }
|
|
240
195
|
.right-panel .sparkline { order: 2; }
|
|
241
196
|
|
|
242
|
-
/* Colori
|
|
197
|
+
/* Colori grafici */
|
|
243
198
|
#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
|
|
244
199
|
#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
|
|
245
200
|
#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
|
|
@@ -252,9 +207,7 @@ body {
|
|
|
252
207
|
.box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
|
|
253
208
|
.box-hercules .scale-labels { color: #ff8888; }
|
|
254
209
|
|
|
255
|
-
|
|
256
|
-
.box-hercules .unit::before, .box-hercules .unit::after,
|
|
257
|
-
.box-hercules .label::before {
|
|
210
|
+
.box-hercules .unit::before, .box-hercules .unit::after, .box-hercules .label::before {
|
|
258
211
|
font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
|
|
259
212
|
}
|
|
260
213
|
.left-panel .box-hercules .unit::before { content: "HERCULES "; }
|
|
@@ -262,226 +215,100 @@ body {
|
|
|
262
215
|
.right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
|
|
263
216
|
|
|
264
217
|
/* ==========================================================================
|
|
265
|
-
8. STATI E ANIMAZIONI
|
|
218
|
+
8. STATI, STATUS E ANIMAZIONI
|
|
266
219
|
========================================================================== */
|
|
267
|
-
#status {
|
|
220
|
+
#status {
|
|
221
|
+
position: absolute;
|
|
222
|
+
top: 10px;
|
|
223
|
+
right: 10px;
|
|
224
|
+
font-size: 0.6rem;
|
|
225
|
+
font-weight: 900;
|
|
226
|
+
text-transform: uppercase;
|
|
227
|
+
z-index: 1000;
|
|
228
|
+
letter-spacing: 1px;
|
|
229
|
+
background: rgba(0,0,0,0.4);
|
|
230
|
+
padding: 2px 6px;
|
|
231
|
+
border-radius: 4px;
|
|
232
|
+
}
|
|
268
233
|
.online { color: #2ecc71; opacity: 0.5; }
|
|
269
234
|
.offline { color: #e74c3c; font-weight: bold; }
|
|
270
235
|
|
|
271
|
-
/* Animazioni fluide per gli elementi rotanti (0.8s) */
|
|
272
236
|
#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
|
|
273
237
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
274
238
|
}
|
|
275
239
|
|
|
276
|
-
|
|
240
|
+
.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
|
|
277
241
|
.alarm-warning { color: #f1c40f !important; }
|
|
278
242
|
.alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
|
|
279
|
-
|
|
280
|
-
@keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
|
|
281
|
-
.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
|
|
243
|
+
@keyframes blink-unstable { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
282
244
|
|
|
283
245
|
#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
|
|
284
246
|
|
|
285
247
|
/* ==========================================================================
|
|
286
|
-
9. RESPONSIVE (PORTRAIT MODE
|
|
248
|
+
9. RESPONSIVE (PORTRAIT MODE)
|
|
287
249
|
========================================================================== */
|
|
288
250
|
@media (max-aspect-ratio: 0.9 / 1) {
|
|
289
|
-
.main-container {
|
|
290
|
-
grid-template-columns: 1fr 1fr !important;
|
|
291
|
-
grid-template-rows: 45vh calc(55vh - 8px) !important;
|
|
292
|
-
}
|
|
293
|
-
|
|
251
|
+
.main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh calc(55vh - 8px) !important; }
|
|
294
252
|
.center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
|
|
295
253
|
.left-panel { grid-row: 2 !important; grid-column: 1 !important; }
|
|
296
254
|
.right-panel { grid-row: 2 !important; grid-column: 2 !important; }
|
|
297
|
-
|
|
298
|
-
/* Focus Mode Verticale: Impilamento Flex sopra/sotto */
|
|
299
255
|
.main-container.focus-active { display: flex !important; flex-direction: column !important; }
|
|
300
|
-
.focus-active .center-panel { flex: 0 0 45vh !important;
|
|
301
|
-
.focus-active .side-panel.has-focus { flex: 0 0 calc(55vh - 8px) !important;
|
|
302
|
-
|
|
303
|
-
/* Altezze box Portrait dinamiche (per evitare overflow) */
|
|
256
|
+
.focus-active .center-panel { flex: 0 0 45vh !important; }
|
|
257
|
+
.focus-active .side-panel.has-focus { flex: 0 0 calc(55vh - 8px) !important; display: flex !important; }
|
|
304
258
|
.data-box { height: auto !important; flex: 1 !important; }
|
|
305
|
-
.data-box:nth-child(1), .data-box:nth-child(2) { flex: 1.5 !important; }
|
|
306
|
-
|
|
307
|
-
.value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
|
|
308
|
-
.value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
|
|
309
|
-
|
|
310
|
-
/* Protezione bussola per box bassi (Portrait) */
|
|
311
|
-
.mini-compass {
|
|
312
|
-
width: min(70cqh, 40cqw) !important;
|
|
313
|
-
height: min(70cqh, 40cqw) !important;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.right-panel .label-row .label:only-child { margin-left: auto !important; }
|
|
317
|
-
.box-hercules .unit::before, .box-hercules .unit::after { font-size: 6px !important; }
|
|
318
259
|
}
|
|
319
260
|
|
|
320
261
|
/* ==========================================================================
|
|
321
262
|
10. NIGHT MODE (RED ON BLACK - TACTICAL)
|
|
322
263
|
========================================================================== */
|
|
323
|
-
body.night-mode {
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
.night-mode .
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
}
|
|
333
|
-
.night-mode
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
.night-mode .label,
|
|
339
|
-
.night-mode .unit,
|
|
340
|
-
.night-mode .dual-label {
|
|
341
|
-
color: #800000 !important; /* Rosso cupo per non affaticare la vista */
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
/* --- Valori Numerici --- */
|
|
345
|
-
.night-mode .value,
|
|
346
|
-
.night-mode .value-large {
|
|
347
|
-
color: #ff3333 !important;
|
|
348
|
-
text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Bagliore per profondità */
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
/* --- Grafici Sparkline (Solo Linea, No Riempimento) --- */
|
|
352
|
-
.night-mode .graph-wrapper {
|
|
353
|
-
background: rgba(30, 0, 0, 0.3) !important;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
/* Nasconde l'area di riempimento sotto la linea */
|
|
357
|
-
.night-mode .sparkline path:first-of-type {
|
|
358
|
-
display: none !important;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
/* Rende la linea del tracciato molto più visibile */
|
|
362
|
-
.night-mode .sparkline path {
|
|
363
|
-
fill: none !important;
|
|
364
|
-
stroke: #ff3333 !important;
|
|
365
|
-
stroke-width: 1.8px !important;
|
|
366
|
-
opacity: 1 !important;
|
|
367
|
-
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
/* Griglie interne (Orizzontali e Verticali) uniformi */
|
|
371
|
-
.night-mode .sparkline line {
|
|
372
|
-
stroke: #4d0000 !important;
|
|
373
|
-
stroke-width: 0.7px !important;
|
|
374
|
-
opacity: 1 !important;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
/* Forza i segmenti colorati del TWS alla stessa luminosità della linea */
|
|
378
|
-
.night-mode #tws-graph line:not([stroke*="rgba"]) {
|
|
379
|
-
stroke: #ff3333 !important;
|
|
380
|
-
stroke-width: 1.8px !important;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
/* Numeri delle scale a lato dei grafici */
|
|
384
|
-
.night-mode .scale-labels {
|
|
385
|
-
color: #660000 !important;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
/* --- Hercules Mode in Night Mode --- */
|
|
389
|
-
.night-mode .box-hercules {
|
|
390
|
-
background: rgba(60, 0, 0, 0.2) !important;
|
|
391
|
-
}
|
|
392
|
-
.night-mode .line-hercules {
|
|
393
|
-
filter: drop-shadow(0 0 6px #ff0000) !important;
|
|
394
|
-
}
|
|
264
|
+
body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
|
|
265
|
+
.night-mode .side-panel { background: rgba(20, 0, 0, 0.4); border: 1px solid #330000; }
|
|
266
|
+
.night-mode .data-box { border-bottom-color: #260000; }
|
|
267
|
+
.night-mode .label, .night-mode .unit, .night-mode .dual-label { color: #800000 !important; }
|
|
268
|
+
.night-mode .value, .night-mode .value-large { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); }
|
|
269
|
+
|
|
270
|
+
.night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; }
|
|
271
|
+
.night-mode .sparkline path:first-of-type { display: none !important; }
|
|
272
|
+
.night-mode .sparkline path { fill: none !important; stroke: #ff3333 !important; stroke-width: 1.8px !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4)); }
|
|
273
|
+
.night-mode .sparkline line { stroke: #4d0000 !important; stroke-width: 0.7px !important; }
|
|
274
|
+
.night-mode #tws-graph line:not([stroke*="rgba"]) { stroke: #ff3333 !important; stroke-width: 1.8px !important; }
|
|
275
|
+
.night-mode .scale-labels { color: #660000 !important; }
|
|
276
|
+
|
|
277
|
+
.night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
|
|
278
|
+
.night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
|
|
395
279
|
|
|
396
|
-
/* Scritta Hercules in alto (Colore personalizzato #f60000) */
|
|
397
|
-
.night-mode .box-hercules .unit::before,
|
|
398
|
-
.night-mode .box-hercules .unit::after,
|
|
399
|
-
.night-mode .box-hercules .label::before,
|
|
400
|
-
.night-mode .box-hercules .label::after {
|
|
401
|
-
color: #f60000 !important;
|
|
402
|
-
font-weight: 700;
|
|
403
|
-
opacity: 0.9;
|
|
404
|
-
letter-spacing: 1px;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
/* --- Strumento Centrale (Wind Gauge) --- */
|
|
408
280
|
.night-mode #wind-gauge circle { stroke: #330000; }
|
|
409
281
|
.night-mode #ticks line { stroke: #4d0000 !important; }
|
|
410
282
|
.night-mode #tick-labels { fill: #800000 !important; }
|
|
411
283
|
.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6; }
|
|
412
284
|
.night-mode #aws-val-svg { fill: #ff3333 !important; }
|
|
413
|
-
|
|
414
|
-
/* Settori Vento (Distinguibili per stile, non per colore) */
|
|
415
|
-
.night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; } /* Sx Solid */
|
|
416
|
-
.night-mode #wind-gauge path[stroke="#00ff00"] {
|
|
417
|
-
stroke: #660000 !important;
|
|
418
|
-
stroke-dasharray: 4, 3; /* Dx Dashed */
|
|
419
|
-
opacity: 0.8;
|
|
420
|
-
}
|
|
421
|
-
.night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; } /* Poppa Dark */
|
|
422
|
-
|
|
423
|
-
/* Lancette Wind Gauge */
|
|
424
285
|
.night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
|
|
425
286
|
.night-mode #twa-pointer path { fill: #800000; stroke: #000; }
|
|
426
287
|
.night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
|
|
288
|
+
.night-mode #aws-display-group text { fill: #ff3333 !important; }
|
|
289
|
+
.night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
|
|
427
290
|
|
|
428
|
-
/*
|
|
429
|
-
.night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
|
|
430
|
-
.night-mode #leeway-val { fill: #ff3333 !important; }
|
|
431
|
-
.night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
|
|
432
|
-
.night-mode g[fill="#555"] text { fill: #660000 !important; }
|
|
433
|
-
.night-mode rect[fill="#222"] { fill: #0a0000 !important; stroke: #200000; }
|
|
434
|
-
|
|
435
|
-
/* --- Bussola TWD --- */
|
|
291
|
+
/* Bussola TWD Night */
|
|
436
292
|
.night-mode .mini-compass { border-color: #330000; background: #000; }
|
|
437
293
|
.night-mode .mini-compass text { fill: #800000 !important; }
|
|
438
|
-
.night-mode #twd-arrow
|
|
439
|
-
.night-mode #twd-boat-wrap path { fill: #
|
|
294
|
+
.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
|
|
295
|
+
.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
|
|
440
296
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
.night-mode #aws-display-group text {
|
|
447
|
-
fill: #ff3333 !important;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
/* --- Modifica: Miglioramento visibilità TWD in Night Mode --- */
|
|
451
|
-
.night-mode #twd-arrow #twd-wind-chevron {
|
|
452
|
-
stroke: #ff3333 !important; /* Rosso più brillante */
|
|
453
|
-
stroke-width: 3px !important; /* Più spesso */
|
|
454
|
-
opacity: 1 !important; /* Piena opacità */
|
|
455
|
-
filter: drop-shadow(0 0 4px #ff0000); /* Effetto neon per staccarsi dallo sfondo */
|
|
456
|
-
transform-origin: center; /* Forza il centro corretto */
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
/* Assicuriamoci che anche la punta della barca sia visibile */
|
|
460
|
-
.night-mode #twd-boat-wrap path {
|
|
461
|
-
fill: #ff3333 !important;
|
|
462
|
-
opacity: 0.4 !important;
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
/* Definiamo il lampeggio */
|
|
466
|
-
@keyframes blink-trend {
|
|
467
|
-
0%, 100% { opacity: 1; }
|
|
468
|
-
50% { opacity: 0; }
|
|
469
|
-
}
|
|
297
|
+
/* ==========================================================================
|
|
298
|
+
11. TREND VENTO E ALLARME STRAMBATA (GYBE)
|
|
299
|
+
========================================================================== */
|
|
300
|
+
@keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
470
301
|
|
|
471
|
-
/* Stile base dei pallini */
|
|
472
302
|
#trend-dot-cw, #trend-dot-ccw, #trend-gauge-cw, #trend-gauge-ccw {
|
|
473
303
|
opacity: 0.3;
|
|
474
304
|
transition: opacity 0.3s ease;
|
|
475
305
|
}
|
|
476
306
|
|
|
477
|
-
|
|
478
|
-
.is-trending {
|
|
479
|
-
animation: blink-trend 1s infinite !important;
|
|
480
|
-
}
|
|
307
|
+
.is-trending { animation: blink-trend 1s infinite !important; }
|
|
481
308
|
|
|
482
309
|
/* Allarme Strambata: Rosso fisso con bagliore neon */
|
|
483
310
|
.is-gybing {
|
|
484
311
|
opacity: 1 !important;
|
|
485
|
-
animation: none !important;
|
|
312
|
+
animation: none !important;
|
|
486
313
|
filter: drop-shadow(0 0 8px #ff0000) !important;
|
|
487
314
|
}
|