@sailingrotevista/rotevista-dash 2.0.10 → 2.0.12
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/index.html +1 -1
- package/package.json +1 -1
- package/style.css +191 -87
package/index.html
CHANGED
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -5,9 +5,12 @@ body {
|
|
|
5
5
|
background-color: #000;
|
|
6
6
|
color: #fff;
|
|
7
7
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
8
|
-
margin: 0;
|
|
9
|
-
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
height: 100vh;
|
|
11
|
+
width: 100vw;
|
|
10
12
|
overflow: hidden;
|
|
13
|
+
/* BLOCCO TOTALE GESTI DI SISTEMA: Fondamentale per il Long Press su mobile */
|
|
11
14
|
-webkit-touch-callout: none;
|
|
12
15
|
-webkit-user-select: none;
|
|
13
16
|
user-select: none;
|
|
@@ -16,39 +19,60 @@ body {
|
|
|
16
19
|
|
|
17
20
|
.main-container {
|
|
18
21
|
display: grid;
|
|
19
|
-
width: 100%;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
padding: 5px;
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
gap: 8px; /* Spazio costante tra tutti i blocchi della dashboard */
|
|
22
27
|
|
|
23
28
|
/*
|
|
24
|
-
LAYOUT LIQUIDO
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
DX: Prende 1 frazione di tutto lo spazio libero, minimo 160px.
|
|
29
|
+
LAYOUT LIQUIDO:
|
|
30
|
+
I lati hanno un minimo vitale (180px) per proteggere i testi.
|
|
31
|
+
Il centro (auto) si adatta millimetricamente al diametro dell'SVG.
|
|
28
32
|
*/
|
|
29
33
|
grid-template-columns: minmax(180px, 1fr) minmax(auto, 3fr) minmax(180px, 1fr);
|
|
30
34
|
grid-template-rows: 100%;
|
|
31
35
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
32
|
-
|
|
33
|
-
/* Assicura che la griglia usi tutto lo spazio orizzontale */
|
|
34
36
|
justify-content: stretch;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
|
-
/* Espansione colonne per schermi larghi (16:10) */
|
|
39
|
+
/* Espansione colonne per schermi molto larghi (es. 16:10 / 16:9) */
|
|
38
40
|
@media (min-aspect-ratio: 1.5) {
|
|
39
41
|
.main-container {
|
|
40
|
-
/* Aumentiamo il gap e il minimo vitale per schermi enormi */
|
|
41
42
|
grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
|
|
42
43
|
gap: 15px;
|
|
43
44
|
}
|
|
44
45
|
}
|
|
46
|
+
|
|
45
47
|
/* ==========================================================================
|
|
46
48
|
2. PANNELLI E DATA-BOX
|
|
47
49
|
========================================================================== */
|
|
48
|
-
.side-panel {
|
|
50
|
+
.side-panel {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
background: rgba(255, 255, 255, 0.03);
|
|
54
|
+
border-radius: 12px;
|
|
55
|
+
height: 100%;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
}
|
|
58
|
+
|
|
49
59
|
.left-panel { grid-column: 1; }
|
|
50
|
-
|
|
51
|
-
.
|
|
60
|
+
|
|
61
|
+
.center-panel {
|
|
62
|
+
grid-column: 2;
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
height: 100%;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.right-panel {
|
|
72
|
+
grid-column: 3;
|
|
73
|
+
align-items: flex-end;
|
|
74
|
+
text-align: right;
|
|
75
|
+
}
|
|
52
76
|
|
|
53
77
|
.data-box {
|
|
54
78
|
position: relative;
|
|
@@ -56,54 +80,41 @@ body {
|
|
|
56
80
|
padding: 8px 12px;
|
|
57
81
|
display: flex;
|
|
58
82
|
flex-direction: column;
|
|
59
|
-
width: 100%;
|
|
60
|
-
|
|
83
|
+
width: 100%;
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
container-type: size; /* Rende il box misurabile per l'unità cqh */
|
|
61
86
|
flex: 1;
|
|
62
87
|
overflow: hidden;
|
|
63
|
-
-webkit-touch-callout: none;
|
|
64
|
-
-webkit-user-select: none;
|
|
65
|
-
user-select: none;
|
|
66
|
-
touch-action: none;
|
|
67
88
|
}
|
|
68
89
|
|
|
69
|
-
/*
|
|
70
|
-
.data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
|
|
71
|
-
.data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
|
|
72
|
-
|
|
73
|
-
/* Allineamento Speculare Box */
|
|
90
|
+
/* Allineamento Speculare: SX a sinistra, DX a destra del box */
|
|
74
91
|
.left-panel .data-box { align-items: flex-start; text-align: left; }
|
|
75
92
|
.right-panel .data-box { align-items: flex-end; text-align: right; }
|
|
76
93
|
|
|
94
|
+
/* Altezze Proporzionali: 25% dell'altezza per i grafici, 16.6% per i MEAN/TACK */
|
|
95
|
+
.data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
|
|
96
|
+
.data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
|
|
97
|
+
|
|
77
98
|
/* ==========================================================================
|
|
78
99
|
3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT)
|
|
79
100
|
========================================================================== */
|
|
80
101
|
|
|
81
|
-
/*
|
|
102
|
+
/* Nasconde le colonne non focalizzate */
|
|
82
103
|
.focus-active .side-panel:not(.has-focus) { display: none !important; }
|
|
83
|
-
.focus-active .side-panel.has-focus {
|
|
84
|
-
min-width: 400px !important;
|
|
85
|
-
}
|
|
86
104
|
|
|
105
|
+
/* Protezione larghezza minima per il grafico focalizzato */
|
|
106
|
+
.focus-active .side-panel.has-focus { min-width: 400px !important; }
|
|
87
107
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
LOGICA POSIZIONE E LARGHEZZA:
|
|
91
|
-
Il Vento prende solo la larghezza del suo cerchio (auto).
|
|
92
|
-
Il Box focalizzato si prende TUTTO il resto dello schermo (1fr).
|
|
93
|
-
*/
|
|
94
|
-
.focus-active.focus-side-left {
|
|
95
|
-
grid-template-columns: 1fr auto !important; /* Dati SX giganti, Vento DX compatto */
|
|
96
|
-
}
|
|
108
|
+
/* Logica di espansione: il box scelto prende tutto il resto dello spazio (1fr) */
|
|
109
|
+
.focus-active.focus-side-left { grid-template-columns: 1fr auto !important; }
|
|
97
110
|
.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
|
|
98
111
|
.focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: flex-start; }
|
|
99
112
|
|
|
100
|
-
.focus-active.focus-side-right {
|
|
101
|
-
grid-template-columns: auto 1fr !important; /* Vento SX compatto, Dati DX giganti */
|
|
102
|
-
}
|
|
113
|
+
.focus-active.focus-side-right { grid-template-columns: auto 1fr !important; }
|
|
103
114
|
.focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: flex-start; }
|
|
104
115
|
.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
|
|
105
116
|
|
|
106
|
-
/*
|
|
117
|
+
/* Styling del box in Focus Mode */
|
|
107
118
|
.focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
|
|
108
119
|
.focus-active .has-focus .data-box.is-focused {
|
|
109
120
|
height: 100vh !important;
|
|
@@ -112,13 +123,13 @@ body {
|
|
|
112
123
|
padding: 20px;
|
|
113
124
|
}
|
|
114
125
|
|
|
115
|
-
/* Tipografia
|
|
126
|
+
/* Tipografia massiccia in Focus Mode */
|
|
116
127
|
.focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 4rem) !important; margin-top: 15px; }
|
|
117
128
|
.focus-active .is-focused .scale-labels { font-size: 32px !important; min-width: 40px !important; line-height: 1.2; }
|
|
118
129
|
.focus-active .is-focused .label-row .label { font-size: 2rem !important; }
|
|
119
130
|
.focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
|
|
120
131
|
|
|
121
|
-
/* Ingrandimento
|
|
132
|
+
/* Ingrandimento etichette Hercules in Focus */
|
|
122
133
|
.focus-active .is-focused.box-hercules .unit::before,
|
|
123
134
|
.focus-active .is-focused.box-hercules .unit::after,
|
|
124
135
|
.focus-active .is-focused.box-hercules .label::before,
|
|
@@ -130,39 +141,69 @@ body {
|
|
|
130
141
|
.focus-active .is-focused .sparkline path { stroke-width: 1px !important; }
|
|
131
142
|
|
|
132
143
|
/* ==========================================================================
|
|
133
|
-
4. TIPOGRAFIA
|
|
144
|
+
4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
|
|
134
145
|
========================================================================== */
|
|
135
146
|
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
|
|
136
147
|
|
|
137
|
-
/* SX
|
|
148
|
+
/* Simmetria Titoli/Unità: SX [Label...Unit], DX [Unit...Label] */
|
|
138
149
|
.left-panel .label-row { justify-content: space-between; flex-direction: row; }
|
|
139
|
-
|
|
140
|
-
/* DX: [Unità] ... [Titolo] */
|
|
141
150
|
.right-panel .label-row { justify-content: space-between; flex-direction: row; }
|
|
142
151
|
|
|
143
|
-
/*
|
|
152
|
+
/* Forza i titoli MEAN (senza unità) a destra nella colonna DX */
|
|
144
153
|
.right-panel .label-row .label:only-child { margin-left: auto; }
|
|
145
154
|
|
|
146
155
|
.label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
|
|
147
156
|
.unit { color: #888; font-size: 0.6rem; font-weight: bold; }
|
|
148
|
-
.value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
|
|
149
157
|
|
|
150
|
-
|
|
158
|
+
/* Numero standard (22% altezza box per non coprire il grafico) */
|
|
159
|
+
.value {
|
|
160
|
+
color: #fff;
|
|
161
|
+
font-size: clamp(1.2rem, 22cqh, 3rem);
|
|
162
|
+
font-weight: 600;
|
|
163
|
+
line-height: 0.9;
|
|
164
|
+
letter-spacing: -1px;
|
|
165
|
+
padding-bottom: 5px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Centratura verticale automatica per i box senza grafico */
|
|
169
|
+
.value-large, .dual-value-container, .value-with-compass {
|
|
170
|
+
margin-top: auto;
|
|
171
|
+
margin-bottom: auto;
|
|
172
|
+
}
|
|
173
|
+
|
|
151
174
|
.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
|
|
152
175
|
|
|
153
|
-
/* TACK Layout */
|
|
176
|
+
/* TACK Layout (Mure opposte) */
|
|
154
177
|
.dual-value-container { display: flex; justify-content: space-between; width: 100%; }
|
|
155
178
|
.dual-value-col { display: flex; flex-direction: column; width: 48%; }
|
|
156
179
|
.dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
|
|
157
180
|
.value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
|
|
158
181
|
|
|
159
|
-
/*
|
|
160
|
-
.
|
|
161
|
-
|
|
162
|
-
.value-with-compass
|
|
182
|
+
/* ==========================================================================
|
|
183
|
+
5. BUSSOLA TWD DINAMICA
|
|
184
|
+
========================================================================== */
|
|
185
|
+
.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
|
|
186
|
+
|
|
187
|
+
.mini-compass {
|
|
188
|
+
/* Forma circolare protetta: 80% dell'altezza o 42% della larghezza */
|
|
189
|
+
width: min(80cqh, 42cqw);
|
|
190
|
+
height: min(80cqh, 42cqw);
|
|
191
|
+
aspect-ratio: 1 / 1;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
background: #000;
|
|
194
|
+
border-radius: 50%;
|
|
195
|
+
border: 1.5px solid #333;
|
|
196
|
+
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
|
|
197
|
+
transition: all 0.4s ease;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.value-with-compass .value-large {
|
|
201
|
+
margin: 0; flex: 1; text-align: right;
|
|
202
|
+
font-size: clamp(1rem, 38cqh, 4rem); white-space: nowrap;
|
|
203
|
+
}
|
|
163
204
|
|
|
164
205
|
/* ==========================================================================
|
|
165
|
-
|
|
206
|
+
6. GRAFICI E SCALE (SIMMETRIA INTERNA)
|
|
166
207
|
========================================================================== */
|
|
167
208
|
.graph-wrapper {
|
|
168
209
|
position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
|
|
@@ -170,84 +211,147 @@ body {
|
|
|
170
211
|
border-radius: 4px; gap: 2px;
|
|
171
212
|
}
|
|
172
213
|
|
|
173
|
-
/* Spostamento verso il centro */
|
|
214
|
+
/* Spostamento verso il centro per eliminare spazi neri morti */
|
|
174
215
|
.left-panel .graph-wrapper { margin-right: -6px; }
|
|
175
|
-
.right-panel .graph-wrapper { margin-left:
|
|
216
|
+
.right-panel .graph-wrapper { margin-left: -6px; }
|
|
176
217
|
|
|
177
218
|
.sparkline { flex-grow: 1; height: 100%; background: transparent !important; display: block; }
|
|
178
219
|
.sparkline path, .sparkline line { stroke-width: 1px !important; transition: all 0.3s ease; }
|
|
179
220
|
|
|
180
|
-
.scale-labels {
|
|
221
|
+
.scale-labels {
|
|
222
|
+
display: flex; flex-direction: column; justify-content: space-between;
|
|
223
|
+
font-size: 10px; color: #777; font-weight: bold; min-width: 18px;
|
|
224
|
+
height: 100%; line-height: 1; padding: 2px 0;
|
|
225
|
+
}
|
|
181
226
|
|
|
182
|
-
/* Simmetria
|
|
227
|
+
/* Simmetria: le scale numeriche "guardano" sempre il quadrante centrale */
|
|
183
228
|
.left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px; border-left: 1px solid rgba(255,255,255,0.08); }
|
|
184
229
|
.left-panel .sparkline { order: 1; }
|
|
185
230
|
.right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; border-right: 1px solid rgba(255,255,255,0.08); }
|
|
186
231
|
.right-panel .sparkline { order: 2; }
|
|
187
232
|
|
|
233
|
+
/* Colori semantici per i grafici */
|
|
188
234
|
#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
|
|
189
235
|
#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
|
|
190
236
|
#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
|
|
191
237
|
#tws-graph { stroke: #ffffff; fill: rgba(255, 255, 255, 0.08); }
|
|
192
238
|
|
|
193
239
|
/* ==========================================================================
|
|
194
|
-
|
|
240
|
+
7. HERCULES MODE (ZOOM E VISUALS)
|
|
195
241
|
========================================================================== */
|
|
196
242
|
.line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
|
|
197
243
|
.box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
|
|
244
|
+
.box-hercules .scale-labels { color: #ff8888; }
|
|
198
245
|
|
|
199
|
-
/*
|
|
200
|
-
.focus-active .is-focused.box-hercules .unit::before,
|
|
201
|
-
.focus-active .is-focused.box-hercules .unit::after,
|
|
202
|
-
.focus-active .is-focused.box-hercules .label::before {
|
|
203
|
-
font-size: 16px !important; /* Raddoppiato in Focus */
|
|
204
|
-
letter-spacing: 2px;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
/* Stile base Hercules */
|
|
246
|
+
/* Etichetta Hercules dinamica accanto alle unità */
|
|
208
247
|
.box-hercules .unit::before, .box-hercules .unit::after,
|
|
209
248
|
.box-hercules .label::before {
|
|
210
249
|
font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
|
|
211
250
|
}
|
|
212
|
-
|
|
213
|
-
/* Simmetria Hercules SX: "STW [HERCULES kts]" */
|
|
214
251
|
.left-panel .box-hercules .unit::before { content: "HERCULES "; }
|
|
215
|
-
|
|
216
|
-
/* Simmetria Hercules DX: "[m HERCULES] DEPTH" */
|
|
217
252
|
.right-panel .box-hercules .unit::after { content: " HERCULES"; }
|
|
218
|
-
|
|
219
|
-
/* Eccezione: Box MEAN colonna DX (Senza unità) -> "[HERCULES TWA]" */
|
|
220
|
-
.right-panel .box-hercules .label:only-child::before { content: "HERCULES "; }
|
|
253
|
+
.right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
|
|
221
254
|
|
|
222
255
|
/* ==========================================================================
|
|
223
|
-
|
|
256
|
+
8. STATI E ANIMAZIONI
|
|
224
257
|
========================================================================== */
|
|
225
258
|
#status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
|
|
226
259
|
.online { color: #2ecc71; opacity: 0.5; }
|
|
227
260
|
.offline { color: #e74c3c; font-weight: bold; }
|
|
228
|
-
|
|
261
|
+
|
|
262
|
+
/* Animazioni fluide per gli elementi rotanti (0.8s) */
|
|
263
|
+
#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
|
|
264
|
+
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
265
|
+
}
|
|
266
|
+
|
|
229
267
|
#leeway-mask-rect { transition: none; }
|
|
230
268
|
.alarm-warning { color: #f1c40f !important; }
|
|
231
269
|
.alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
|
|
270
|
+
|
|
232
271
|
@keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
|
|
233
272
|
.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
|
|
273
|
+
|
|
234
274
|
#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
|
|
235
275
|
|
|
236
276
|
/* ==========================================================================
|
|
237
|
-
|
|
277
|
+
9. RESPONSIVE (PORTRAIT MODE - IPHONE/TABLET)
|
|
238
278
|
========================================================================== */
|
|
239
279
|
@media (max-aspect-ratio: 0.9 / 1) {
|
|
240
|
-
.main-container {
|
|
280
|
+
.main-container {
|
|
281
|
+
grid-template-columns: 1fr 1fr !important;
|
|
282
|
+
grid-template-rows: 45vh calc(55vh - 8px) !important;
|
|
283
|
+
}
|
|
284
|
+
|
|
241
285
|
.center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
|
|
242
286
|
.left-panel { grid-row: 2 !important; grid-column: 1 !important; }
|
|
243
287
|
.right-panel { grid-row: 2 !important; grid-column: 2 !important; }
|
|
244
288
|
|
|
289
|
+
/* Focus Mode Verticale: Impilamento Flex sopra/sotto */
|
|
245
290
|
.main-container.focus-active { display: flex !important; flex-direction: column !important; }
|
|
246
291
|
.focus-active .center-panel { flex: 0 0 45vh !important; width: 100% !important; }
|
|
247
|
-
.focus-active .side-panel.has-focus { flex: 0 0 55vh !important; width: 100% !important; display: flex !important; }
|
|
292
|
+
.focus-active .side-panel.has-focus { flex: 0 0 calc(55vh - 8px) !important; width: 100% !important; display: flex !important; }
|
|
293
|
+
|
|
294
|
+
/* Altezze box Portrait dinamiche (per evitare overflow) */
|
|
295
|
+
.data-box { height: auto !important; flex: 1 !important; }
|
|
296
|
+
.data-box:nth-child(1), .data-box:nth-child(2) { flex: 1.5 !important; }
|
|
248
297
|
|
|
249
|
-
.data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
|
|
250
|
-
.data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
|
|
251
298
|
.value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
|
|
252
299
|
.value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
|
|
300
|
+
|
|
301
|
+
/* Protezione bussola per box bassi (Portrait) */
|
|
302
|
+
.mini-compass {
|
|
303
|
+
width: min(70cqh, 40cqw) !important;
|
|
304
|
+
height: min(70cqh, 40cqw) !important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.right-panel .label-row .label:only-child { margin-left: auto !important; }
|
|
308
|
+
.box-hercules .unit::before, .box-hercules .unit::after { font-size: 6px !important; }
|
|
253
309
|
}
|
|
310
|
+
|
|
311
|
+
/* ==========================================================================
|
|
312
|
+
10. NIGHT MODE (RED ON BLACK)
|
|
313
|
+
========================================================================== */
|
|
314
|
+
body.night-mode {
|
|
315
|
+
background-color: #000 !important;
|
|
316
|
+
color: #ff0000 !important; /* Rosso puro per tutto il testo */
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
/* Pannelli e Box */
|
|
320
|
+
.night-mode .side-panel { background: rgba(255, 0, 0, 0.02); border: 1px solid #200000; }
|
|
321
|
+
.night-mode .data-box { border-bottom-color: #330000; }
|
|
322
|
+
|
|
323
|
+
/* Etichette e Unità */
|
|
324
|
+
.night-mode .label, .night-mode .unit, .night-mode .dual-label {
|
|
325
|
+
color: #660000 !important; /* Rosso molto scuro per le scritte secondarie */
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Valori Numerici */
|
|
329
|
+
.night-mode .value, .night-mode .value-large {
|
|
330
|
+
color: #ff3333 !important;
|
|
331
|
+
text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); /* Leggero bagliore per la leggibilità */
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/* Grafici Sparkline */
|
|
335
|
+
.night-mode .sparkline { background: rgba(50, 0, 0, 0.2); }
|
|
336
|
+
.night-mode svg path { stroke: #aa0000 !important; fill: rgba(100, 0, 0, 0.1) !important; }
|
|
337
|
+
.night-mode .scale-labels { color: #440000 !important; }
|
|
338
|
+
|
|
339
|
+
/* Eccezione Grafico TWS (Mantiene i segmenti ma tutti su tonalità di rosso) */
|
|
340
|
+
.night-mode #tws-graph line { stroke: #ff0000 !important; }
|
|
341
|
+
|
|
342
|
+
/* Strumento Centrale (Vento) */
|
|
343
|
+
.night-mode #wind-gauge circle { stroke: #330000; }
|
|
344
|
+
.night-mode #ticks line { stroke: #440000 !important; }
|
|
345
|
+
.night-mode #tick-labels { fill: #660000 !important; }
|
|
346
|
+
.night-mode #boat-icon { fill: #220000 !important; opacity: 0.8; }
|
|
347
|
+
.night-mode #aws-val-svg { fill: #ff3333 !important; }
|
|
348
|
+
|
|
349
|
+
/* Lancette: Tutte rosse con diverse intensità */
|
|
350
|
+
.night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
|
|
351
|
+
.night-mode #twa-pointer path { fill: #aa0000; stroke: #000; }
|
|
352
|
+
.night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
|
|
353
|
+
|
|
354
|
+
/* Bussola TWD */
|
|
355
|
+
.night-mode .mini-compass { border-color: #330000; }
|
|
356
|
+
.night-mode .mini-compass text { fill: #660000 !important; }
|
|
357
|
+
.night-mode #twd-arrow path { fill: #ff0000 !important; stroke: #000 !important; }
|