@sailingrotevista/rotevista-dash 2.0.11 → 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.
Files changed (3) hide show
  1. package/index.html +1 -1
  2. package/package.json +1 -1
  3. package/style.css +177 -92
package/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <title>Sailing Dashboard Pro</title>
10
10
  <link rel="stylesheet" href="style.css">
11
11
  </head>
12
- <body>
12
+ <body >
13
13
 
14
14
  <!-- Etichetta stato connessione SignalK -->
15
15
  <div id="status" class="offline">OFFLINE</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sailingrotevista/rotevista-dash",
3
- "version": "2.0.11",
3
+ "version": "2.0.12",
4
4
  "description": "Public Wind Dashboard with navigation and course aids",
5
5
  "main": "index.js",
6
6
  "publishConfig": {
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; padding: 0;
9
- height: 100vh; width: 100vw;
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,30 +19,60 @@ body {
16
19
 
17
20
  .main-container {
18
21
  display: grid;
19
- width: 100%; height: 100%;
20
- padding: 5px; box-sizing: border-box;
21
- gap: 8px;
22
- grid-template-columns: minmax(200px, 1fr) minmax(auto, 3fr) minmax(230px, 1fr);
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 */
27
+
28
+ /*
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.
32
+ */
33
+ grid-template-columns: minmax(180px, 1fr) minmax(auto, 3fr) minmax(180px, 1fr);
23
34
  grid-template-rows: 100%;
24
35
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
25
36
  justify-content: stretch;
26
37
  }
27
38
 
28
- /* Espansione colonne per schermi larghi (16:10) */
39
+ /* Espansione colonne per schermi molto larghi (es. 16:10 / 16:9) */
29
40
  @media (min-aspect-ratio: 1.5) {
30
41
  .main-container {
31
- /* Aumentiamo il gap e il minimo vitale per schermi enormi */
32
42
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
33
43
  gap: 15px;
34
44
  }
35
45
  }
46
+
36
47
  /* ==========================================================================
37
48
  2. PANNELLI E DATA-BOX
38
49
  ========================================================================== */
39
- .side-panel { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border-radius: 12px; height: 100%; overflow: hidden; }
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
+
40
59
  .left-panel { grid-column: 1; }
41
- .center-panel { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
42
- .right-panel { grid-column: 3; align-items: flex-end; text-align: right; }
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
+ }
43
76
 
44
77
  .data-box {
45
78
  position: relative;
@@ -47,54 +80,41 @@ body {
47
80
  padding: 8px 12px;
48
81
  display: flex;
49
82
  flex-direction: column;
50
- width: 100%; box-sizing: border-box;
51
- container-type: size;
83
+ width: 100%;
84
+ box-sizing: border-box;
85
+ container-type: size; /* Rende il box misurabile per l'unità cqh */
52
86
  flex: 1;
53
87
  overflow: hidden;
54
- -webkit-touch-callout: none;
55
- -webkit-user-select: none;
56
- user-select: none;
57
- touch-action: none;
58
88
  }
59
89
 
60
- /* Altezze Desktop (Validate) */
61
- .data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
62
- .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
63
-
64
- /* Allineamento Speculare Box */
90
+ /* Allineamento Speculare: SX a sinistra, DX a destra del box */
65
91
  .left-panel .data-box { align-items: flex-start; text-align: left; }
66
92
  .right-panel .data-box { align-items: flex-end; text-align: right; }
67
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
+
68
98
  /* ==========================================================================
69
99
  3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT)
70
100
  ========================================================================== */
71
101
 
72
- /* Nascondi i pannelli laterali non interessati */
102
+ /* Nasconde le colonne non focalizzate */
73
103
  .focus-active .side-panel:not(.has-focus) { display: none !important; }
74
- .focus-active .side-panel.has-focus {
75
- min-width: 400px !important;
76
- }
77
-
78
104
 
105
+ /* Protezione larghezza minima per il grafico focalizzato */
106
+ .focus-active .side-panel.has-focus { min-width: 400px !important; }
79
107
 
80
- /*
81
- LOGICA POSIZIONE E LARGHEZZA:
82
- Il Vento prende solo la larghezza del suo cerchio (auto).
83
- Il Box focalizzato si prende TUTTO il resto dello schermo (1fr).
84
- */
85
- .focus-active.focus-side-left {
86
- grid-template-columns: 1fr auto !important; /* Dati SX giganti, Vento DX compatto */
87
- }
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; }
88
110
  .focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
89
111
  .focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: flex-start; }
90
112
 
91
- .focus-active.focus-side-right {
92
- grid-template-columns: auto 1fr !important; /* Vento SX compatto, Dati DX giganti */
93
- }
113
+ .focus-active.focus-side-right { grid-template-columns: auto 1fr !important; }
94
114
  .focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: flex-start; }
95
115
  .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
96
116
 
97
- /* Gestione Box Focalizzato a tutto schermo */
117
+ /* Styling del box in Focus Mode */
98
118
  .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
99
119
  .focus-active .has-focus .data-box.is-focused {
100
120
  height: 100vh !important;
@@ -103,13 +123,13 @@ body {
103
123
  padding: 20px;
104
124
  }
105
125
 
106
- /* Tipografia Extreme per Focus Mode */
126
+ /* Tipografia massiccia in Focus Mode */
107
127
  .focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 4rem) !important; margin-top: 15px; }
108
128
  .focus-active .is-focused .scale-labels { font-size: 32px !important; min-width: 40px !important; line-height: 1.2; }
109
129
  .focus-active .is-focused .label-row .label { font-size: 2rem !important; }
110
130
  .focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
111
131
 
112
- /* Ingrandimento scritta Hercules in Focus */
132
+ /* Ingrandimento etichette Hercules in Focus */
113
133
  .focus-active .is-focused.box-hercules .unit::before,
114
134
  .focus-active .is-focused.box-hercules .unit::after,
115
135
  .focus-active .is-focused.box-hercules .label::before,
@@ -121,46 +141,51 @@ body {
121
141
  .focus-active .is-focused .sparkline path { stroke-width: 1px !important; }
122
142
 
123
143
  /* ==========================================================================
124
- 4. TIPOGRAFIA E LABEL-ROW (SIMMETRIA)
144
+ 4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
125
145
  ========================================================================== */
126
146
  .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
127
147
 
128
- /* SX: [Titolo] ... [Unità] */
148
+ /* Simmetria Titoli/Unità: SX [Label...Unit], DX [Unit...Label] */
129
149
  .left-panel .label-row { justify-content: space-between; flex-direction: row; }
130
-
131
- /* DX: [Unità] ... [Titolo] */
132
150
  .right-panel .label-row { justify-content: space-between; flex-direction: row; }
133
151
 
134
- /* FIX: Spinge i titoli MEAN a destra nella colonna DX */
152
+ /* Forza i titoli MEAN (senza unità) a destra nella colonna DX */
135
153
  .right-panel .label-row .label:only-child { margin-left: auto; }
136
154
 
137
155
  .label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
138
156
  .unit { color: #888; font-size: 0.6rem; font-weight: bold; }
139
- .value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
140
157
 
141
- .value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
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
+
142
174
  .value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
143
175
 
144
- /* TACK Layout */
176
+ /* TACK Layout (Mure opposte) */
145
177
  .dual-value-container { display: flex; justify-content: space-between; width: 100%; }
146
178
  .dual-value-col { display: flex; flex-direction: column; width: 48%; }
147
179
  .dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
148
180
  .value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
149
181
 
150
182
  /* ==========================================================================
151
- BUSSOLA TWD (CALIBRATA: Forma e Spazio)
183
+ 5. BUSSOLA TWD DINAMICA
152
184
  ========================================================================== */
153
- .value-with-compass {
154
- display: flex;
155
- flex: 1;
156
- justify-content: space-between;
157
- align-items: center;
158
- width: 100%;
159
- gap: 5px;
160
- }
185
+ .value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
161
186
 
162
187
  .mini-compass {
163
- /* Bilanciamento: Grande ma con protezione larghezza per il testo */
188
+ /* Forma circolare protetta: 80% dell'altezza o 42% della larghezza */
164
189
  width: min(80cqh, 42cqw);
165
190
  height: min(80cqh, 42cqw);
166
191
  aspect-ratio: 1 / 1;
@@ -173,15 +198,12 @@ body {
173
198
  }
174
199
 
175
200
  .value-with-compass .value-large {
176
- margin: 0;
177
- flex: 1;
178
- text-align: right;
179
- font-size: clamp(1rem, 38cqh, 4rem);
180
- white-space: nowrap;
201
+ margin: 0; flex: 1; text-align: right;
202
+ font-size: clamp(1rem, 38cqh, 4rem); white-space: nowrap;
181
203
  }
182
204
 
183
205
  /* ==========================================================================
184
- 5. GRAFICI E SCALE
206
+ 6. GRAFICI E SCALE (SIMMETRIA INTERNA)
185
207
  ========================================================================== */
186
208
  .graph-wrapper {
187
209
  position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
@@ -189,84 +211,147 @@ body {
189
211
  border-radius: 4px; gap: 2px;
190
212
  }
191
213
 
192
- /* Spostamento verso il centro */
214
+ /* Spostamento verso il centro per eliminare spazi neri morti */
193
215
  .left-panel .graph-wrapper { margin-right: -6px; }
194
216
  .right-panel .graph-wrapper { margin-left: -6px; }
195
217
 
196
218
  .sparkline { flex-grow: 1; height: 100%; background: transparent !important; display: block; }
197
219
  .sparkline path, .sparkline line { stroke-width: 1px !important; transition: all 0.3s ease; }
198
220
 
199
- .scale-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #777; font-weight: bold; min-width: 10px; height: 100%; line-height: 1; padding: 2px 0; }
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
+ }
200
226
 
201
- /* Simmetria Scale */
227
+ /* Simmetria: le scale numeriche "guardano" sempre il quadrante centrale */
202
228
  .left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px; border-left: 1px solid rgba(255,255,255,0.08); }
203
229
  .left-panel .sparkline { order: 1; }
204
230
  .right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; border-right: 1px solid rgba(255,255,255,0.08); }
205
231
  .right-panel .sparkline { order: 2; }
206
232
 
233
+ /* Colori semantici per i grafici */
207
234
  #stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
208
235
  #sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
209
236
  #depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
210
237
  #tws-graph { stroke: #ffffff; fill: rgba(255, 255, 255, 0.08); }
211
238
 
212
239
  /* ==========================================================================
213
- 6. HERCULES MODE (LABEL TOP E SIMMETRIA)
240
+ 7. HERCULES MODE (ZOOM E VISUALS)
214
241
  ========================================================================== */
215
242
  .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
216
243
  .box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
244
+ .box-hercules .scale-labels { color: #ff8888; }
217
245
 
218
- /* Ingrandimento Hercules in Focus Mode */
219
- .focus-active .is-focused.box-hercules .unit::before,
220
- .focus-active .is-focused.box-hercules .unit::after,
221
- .focus-active .is-focused.box-hercules .label::before {
222
- font-size: 16px !important; /* Raddoppiato in Focus */
223
- letter-spacing: 2px;
224
- }
225
-
226
- /* Stile base Hercules */
246
+ /* Etichetta Hercules dinamica accanto alle unità */
227
247
  .box-hercules .unit::before, .box-hercules .unit::after,
228
248
  .box-hercules .label::before {
229
249
  font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
230
250
  }
231
-
232
- /* Simmetria Hercules SX: "STW [HERCULES kts]" */
233
251
  .left-panel .box-hercules .unit::before { content: "HERCULES "; }
234
-
235
- /* Simmetria Hercules DX: "[m HERCULES] DEPTH" */
236
252
  .right-panel .box-hercules .unit::after { content: " HERCULES"; }
237
-
238
- /* Eccezione: Box MEAN colonna DX (Senza unità) -> "[HERCULES TWA]" */
239
- .right-panel .box-hercules .label:only-child::before { content: "HERCULES "; }
253
+ .right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
240
254
 
241
255
  /* ==========================================================================
242
- 7. STATI E ANIMAZIONI
256
+ 8. STATI E ANIMAZIONI
243
257
  ========================================================================== */
244
258
  #status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
245
259
  .online { color: #2ecc71; opacity: 0.5; }
246
260
  .offline { color: #e74c3c; font-weight: bold; }
247
- #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
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
+
248
267
  #leeway-mask-rect { transition: none; }
249
268
  .alarm-warning { color: #f1c40f !important; }
250
269
  .alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
270
+
251
271
  @keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
252
272
  .unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
273
+
253
274
  #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
254
275
 
255
276
  /* ==========================================================================
256
- 8. RESPONSIVE (PORTRAIT)
277
+ 9. RESPONSIVE (PORTRAIT MODE - IPHONE/TABLET)
257
278
  ========================================================================== */
258
279
  @media (max-aspect-ratio: 0.9 / 1) {
259
- .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh 55vh !important; }
280
+ .main-container {
281
+ grid-template-columns: 1fr 1fr !important;
282
+ grid-template-rows: 45vh calc(55vh - 8px) !important;
283
+ }
284
+
260
285
  .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
261
286
  .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
262
287
  .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
263
288
 
289
+ /* Focus Mode Verticale: Impilamento Flex sopra/sotto */
264
290
  .main-container.focus-active { display: flex !important; flex-direction: column !important; }
265
291
  .focus-active .center-panel { flex: 0 0 45vh !important; width: 100% !important; }
266
- .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; }
267
297
 
268
- .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
269
- .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
270
298
  .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
271
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; }
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 */
272
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; }