raain-ui 2.3.21 → 2.3.22

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 (7) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/data/wind-markers-static.css +168 -0
  3. package/data/wind-markers.css +70 -536
  4. package/data/wind-markers.v3.css +634 -0
  5. package/factories/MapElement.d.ts +7 -1
  6. package/factories/MapElement.js +114 -14
  7. package/package.json +3 -3
package/data/wind-markers.css CHANGED
@@ -1,93 +1,59 @@
1
1
  /* ============================================================================
2
- * Wind Speed/Direction Animation for Leaflet Markers
2
+ * Wind Speed/Direction Static Display for Leaflet Markers
3
3
  * ============================================================================
4
4
  * Usage: Import this CSS file in your app's global styles or index.html
5
5
  *
6
- * @import "~raain-ui/data/wind-markers.css";
6
+ * @import "~raain-ui/data/wind-markers-static.css";
7
7
  *
8
8
  * Or in HTML:
9
- * <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
9
+ * <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers-static.css">
10
10
  *
11
11
  * Then apply classes to markers via MapElement.changeMarkerStyle():
12
- * mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10, trustful: 0.5});
12
+ * mapElement.changeMarkerStyle(marker, 'marker-wind-static marker-wind-static-200', {strength: 10, trustful: 0.5});
13
13
  */
14
14
 
15
- /* Base wind marker class */
16
- .marker-wind {
17
- /* Calculate animation speed: stronger wind = faster animation */
18
- --duration: calc(5s - (min(var(--strength, 5), 25) * 0.08s));
19
-
20
- /* Calculate displacement: subtle animation, reduced from original */
21
- --displacement: calc(var(--strength, 5) * 2);
22
-
15
+ /* Base wind marker class - static rotation only */
16
+ .marker-wind-static {
23
17
  /* Trustful parameter: 0 = red (untrusted), 1 = original (trusted) */
24
18
  --trustful: 1;
25
19
 
26
20
  /* Calculate red overlay intensity: (1 - trustful) gives us 0 at trustful=1, 1 at trustful=0 */
27
21
  --red-intensity: calc(1 - var(--trustful, 1));
28
22
 
29
- /* Visual glow intensity based on strength and trustfulness */
30
- /* When trustful is low, glow becomes red; when high, glow is blue */
31
- filter: drop-shadow(0 0 calc(var(--strength, 5) * 0.5px) rgba(
32
- calc(100 + 155 * var(--red-intensity)),
33
- calc(150 * var(--trustful, 1)),
34
- calc(255 * var(--trustful, 1)),
35
- 0.8
36
- ));
37
-
38
23
  /* Rotation will be set by direction-specific classes */
39
24
  --rotation: 0deg;
40
- }
41
25
 
42
- .marker-wind img {
43
26
  /* Apply red colorization based on trustful value */
44
27
  /* Strong red tint: grayscale removes color, then apply red via sepia+hue */
45
28
  filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
46
29
 
47
- /* Rotation set by direction-specific classes */
48
- transform: rotate(var(--rotation)) !important;
30
+ /* Smooth rotation transition when angle changes */
31
+ /* Rotation is applied via JavaScript by modifying the transform property */
32
+ transition: transform 0.3s ease-out;
49
33
  }
50
34
 
51
- /* Variant: Travel animation (move from src to target, disappear, reappear at src)
52
- Usage: Add 'marker-wind-travel' class in addition to marker-wind and direction class
53
- Example: 'marker-wind marker-wind-travel marker-wind-200' */
54
- .marker-wind-travel {
55
- /* Override animation to use travel mode */
56
- }
57
-
58
- /* Pulse animation (opacity) */
59
- @keyframes wind-pulse {
60
- 0%, 100% {
61
- opacity: 1;
62
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
63
- }
64
- 50% {
65
- opacity: 0.85;
66
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
67
- }
68
- }
69
-
70
- /* Travel mode pulse - fade out at destination */
71
- @keyframes wind-pulse-travel {
72
- 0% {
73
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
74
- }
75
- 70% {
76
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
77
- }
78
- 71%, 99% {
79
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
80
- }
81
- 100% {
82
- filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
83
- }
35
+ /* Speed text label - as a real DOM element (not pseudo-element) */
36
+ .wind-speed-label {
37
+ position: absolute;
38
+ top: -25px;
39
+ left: 50%;
40
+ transform: translateX(-50%);
41
+ font-size: 11px;
42
+ font-weight: bold;
43
+ color: rgba(255, 255, 255, 0.95);
44
+ background: rgba(0, 0, 0, 0.6);
45
+ padding: 2px 5px;
46
+ border-radius: 3px;
47
+ text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
48
+ pointer-events: none;
49
+ white-space: nowrap;
50
+ z-index: 1000;
84
51
  }
85
52
 
86
- /* Direction arrow indicator */
87
- .marker-wind::after {
88
- content: '→';
53
+ /* Direction arrow indicator - as a real DOM element (not pseudo-element) */
54
+ .wind-arrow-indicator {
89
55
  position: absolute;
90
- top: -20px;
56
+ top: -45px;
91
57
  left: 50%;
92
58
  font-size: 18px;
93
59
  font-weight: bold;
@@ -95,540 +61,108 @@
95
61
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
96
62
  pointer-events: none;
97
63
  transform-origin: center;
64
+ z-index: 1000;
98
65
  }
99
66
 
100
- /* Wind direction classes for every available degree */
101
- /* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left) */
102
- /* SVG arrow points right (East), so 90° = 0° rotation, others adjust from there */
103
-
104
- .marker-wind-0::after, .marker-wind-360::after {
67
+ /* Rotate arrow based on parent's rotation variable
68
+ .marker-wind-static-0 ~ .wind-arrow-indicator,
69
+ .marker-wind-static-360 ~ .wind-arrow-indicator {
105
70
  transform: translateX(-50%) rotate(180deg);
106
71
  }
107
72
 
108
- .marker-wind-0, .marker-wind-360 {
109
- --rotation: -90deg;
110
- animation: wind-0 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
111
- }
112
-
113
- @keyframes wind-0 {
114
- 0%, 100% {
115
- translate: 0 0;
116
- }
117
- 50% {
118
- translate: 0 calc(var(--displacement) * -1px);
119
- }
120
- }
121
-
122
- .marker-wind-travel.marker-wind-0, .marker-wind-travel.marker-wind-360 {
123
- animation: wind-0-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
124
- }
125
-
126
- @keyframes wind-0-travel {
127
- 0% {
128
- translate: 0 0;
129
- opacity: 1;
130
- }
131
- 70% {
132
- translate: 0 calc(var(--displacement) * -1px);
133
- opacity: 1;
134
- }
135
- 71% {
136
- opacity: 0;
137
- }
138
- 99% {
139
- translate: 0 0;
140
- opacity: 0;
141
- }
142
- 100% {
143
- translate: 0 0;
144
- opacity: 1;
145
- }
146
- }
147
-
148
- .marker-wind-10::after {
73
+ .marker-wind-static-10 ~ .wind-arrow-indicator {
149
74
  transform: translateX(-50%) rotate(190deg);
150
75
  }
151
76
 
152
- .marker-wind-10 {
153
- --rotation: -80deg;
154
- animation: wind-10 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
155
- }
156
-
157
- @keyframes wind-10 {
158
- 0%, 100% {
159
- translate: 0 0;
160
- }
161
- 50% {
162
- translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
163
- }
164
- }
165
-
166
- .marker-wind-20::after {
77
+ .marker-wind-static-20 ~ .wind-arrow-indicator {
167
78
  transform: translateX(-50%) rotate(200deg);
168
79
  }
169
80
 
170
- .marker-wind-20 {
171
- --rotation: -70deg;
172
- animation: wind-20 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
173
- }
174
-
175
- @keyframes wind-20 {
176
- 0%, 100% {
177
- translate: 0 0;
178
- }
179
- 50% {
180
- translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
181
- }
182
- }
183
-
184
- .marker-wind-30::after {
81
+ .marker-wind-static-30 ~ .wind-arrow-indicator {
185
82
  transform: translateX(-50%) rotate(210deg);
186
83
  }
187
84
 
188
- .marker-wind-30 {
189
- --rotation: -60deg;
190
- animation: wind-30 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
191
- }
192
-
193
- @keyframes wind-30 {
194
- 0%, 100% {
195
- translate: 0 0;
196
- }
197
- 50% {
198
- translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
199
- }
200
- }
201
-
202
- .marker-wind-45::after {
85
+ .marker-wind-static-45 ~ .wind-arrow-indicator {
203
86
  transform: translateX(-50%) rotate(225deg);
204
87
  }
205
88
 
206
- .marker-wind-45 {
207
- --rotation: -45deg;
208
- animation: wind-45 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
209
- }
210
-
211
- @keyframes wind-45 {
212
- 0%, 100% {
213
- translate: 0 0;
214
- }
215
- 50% {
216
- translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
217
- }
218
- }
219
-
220
- .marker-wind-90::after {
89
+ .marker-wind-static-90 ~ .wind-arrow-indicator {
221
90
  transform: translateX(-50%) rotate(270deg);
222
91
  }
223
92
 
224
- .marker-wind-90 {
225
- --rotation: 0deg;
226
- animation: wind-90 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
227
- }
228
-
229
- @keyframes wind-90 {
230
- 0%, 100% {
231
- translate: 0 0;
232
- }
233
- 50% {
234
- translate: calc(var(--displacement) * 1px) 0;
235
- }
236
- }
237
-
238
- .marker-wind-135::after {
93
+ .marker-wind-static-135 ~ .wind-arrow-indicator {
239
94
  transform: translateX(-50%) rotate(315deg);
240
95
  }
241
96
 
242
- .marker-wind-135 {
243
- --rotation: 45deg;
244
- animation: wind-135 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
245
- }
246
-
247
- @keyframes wind-135 {
248
- 0%, 100% {
249
- translate: 0 0;
250
- }
251
- 50% {
252
- translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
253
- }
254
- }
255
-
256
- .marker-wind-180::after {
97
+ .marker-wind-static-180 ~ .wind-arrow-indicator {
257
98
  transform: translateX(-50%) rotate(0deg);
258
99
  }
259
100
 
260
- .marker-wind-180 {
261
- --rotation: 90deg;
262
- animation: wind-180 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
263
- }
264
-
265
- @keyframes wind-180 {
266
- 0%, 100% {
267
- translate: 0 0;
268
- }
269
- 50% {
270
- translate: 0 calc(var(--displacement) * 1px);
271
- }
272
- }
273
-
274
- .marker-wind-200::after {
101
+ .marker-wind-static-200 ~ .wind-arrow-indicator {
275
102
  transform: translateX(-50%) rotate(20deg);
276
103
  }
277
104
 
278
- .marker-wind-200 {
279
- --rotation: 110deg;
280
- animation: wind-200 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
281
- }
282
-
283
- @keyframes wind-200 {
284
- 0%, 100% {
285
- translate: 0 0;
286
- }
287
- 50% {
288
- translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
289
- }
290
- }
291
-
292
- .marker-wind-225::after {
105
+ .marker-wind-static-225 ~ .wind-arrow-indicator {
293
106
  transform: translateX(-50%) rotate(45deg);
294
107
  }
295
108
 
296
- .marker-wind-225 {
297
- --rotation: 135deg;
298
- animation: wind-225 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
299
- }
300
-
301
- @keyframes wind-225 {
302
- 0%, 100% {
303
- translate: 0 0;
304
- }
305
- 50% {
306
- translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
307
- }
308
- }
309
-
310
- .marker-wind-270::after {
109
+ .marker-wind-static-270 ~ .wind-arrow-indicator {
311
110
  transform: translateX(-50%) rotate(90deg);
312
111
  }
313
112
 
314
- .marker-wind-270 {
315
- --rotation: 180deg;
316
- animation: wind-270 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
317
- }
318
-
319
- @keyframes wind-270 {
320
- 0%, 100% {
321
- translate: 0 0;
322
- }
323
- 50% {
324
- translate: calc(var(--displacement) * -1px) 0;
325
- }
326
- }
327
-
328
- .marker-wind-315::after {
113
+ .marker-wind-static-315 ~ .wind-arrow-indicator {
329
114
  transform: translateX(-50%) rotate(135deg);
330
115
  }
331
116
 
332
- .marker-wind-315 {
333
- --rotation: -135deg;
334
- animation: wind-315 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
335
- }
336
-
337
- @keyframes wind-315 {
338
- 0%, 100% {
339
- translate: 0 0;
340
- }
341
- 50% {
342
- translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
343
- }
344
- }
345
-
346
- /* ============================================================================
347
- * Travel Mode Animations - Move from source to target, disappear, reappear
348
- * ============================================================================ */
349
-
350
- .marker-wind-travel.marker-wind-10 {
351
- animation: wind-10-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
352
- }
353
-
354
- @keyframes wind-10-travel {
355
- 0% {
356
- translate: 0 0;
357
- opacity: 1;
358
- }
359
- 70% {
360
- translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
361
- opacity: 1;
362
- }
363
- 71% {
364
- opacity: 0;
365
- }
366
- 99% {
367
- translate: 0 0;
368
- opacity: 0;
369
- }
370
- 100% {
371
- translate: 0 0;
372
- opacity: 1;
373
- }
374
- }
375
-
376
- .marker-wind-travel.marker-wind-20 {
377
- animation: wind-20-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
378
- }
379
-
380
- @keyframes wind-20-travel {
381
- 0% {
382
- translate: 0 0;
383
- opacity: 1;
384
- }
385
- 70% {
386
- translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
387
- opacity: 1;
388
- }
389
- 71% {
390
- opacity: 0;
391
- }
392
- 99% {
393
- translate: 0 0;
394
- opacity: 0;
395
- }
396
- 100% {
397
- translate: 0 0;
398
- opacity: 1;
399
- }
400
- }
401
-
402
- .marker-wind-travel.marker-wind-30 {
403
- animation: wind-30-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
404
- }
405
-
406
- @keyframes wind-30-travel {
407
- 0% {
408
- translate: 0 0;
409
- opacity: 1;
410
- }
411
- 70% {
412
- translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
413
- opacity: 1;
414
- }
415
- 71% {
416
- opacity: 0;
417
- }
418
- 99% {
419
- translate: 0 0;
420
- opacity: 0;
421
- }
422
- 100% {
423
- translate: 0 0;
424
- opacity: 1;
425
- }
426
- }
427
-
428
- .marker-wind-travel.marker-wind-45 {
429
- animation: wind-45-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
430
- }
431
-
432
- @keyframes wind-45-travel {
433
- 0% {
434
- translate: 0 0;
435
- opacity: 1;
436
- }
437
- 70% {
438
- translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
439
- opacity: 1;
440
- }
441
- 71% {
442
- opacity: 0;
443
- }
444
- 99% {
445
- translate: 0 0;
446
- opacity: 0;
447
- }
448
- 100% {
449
- translate: 0 0;
450
- opacity: 1;
451
- }
452
- }
453
-
454
- .marker-wind-travel.marker-wind-90 {
455
- animation: wind-90-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
456
- }
117
+ */
457
118
 
458
- @keyframes wind-90-travel {
459
- 0% {
460
- translate: 0 0;
461
- opacity: 1;
462
- }
463
- 70% {
464
- translate: calc(var(--displacement) * 1px) 0;
465
- opacity: 1;
466
- }
467
- 71% {
468
- opacity: 0;
469
- }
470
- 99% {
471
- translate: 0 0;
472
- opacity: 0;
473
- }
474
- 100% {
475
- translate: 0 0;
476
- opacity: 1;
477
- }
478
- }
119
+ /* Wind direction classes for every available degree */
120
+ /* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left)*/
479
121
 
480
- .marker-wind-travel.marker-wind-135 {
481
- animation: wind-135-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
122
+ .marker-wind-static-0 .marker-wind-static-360 {
123
+ --rotation: 0deg;
482
124
  }
483
125
 
484
- @keyframes wind-135-travel {
485
- 0% {
486
- translate: 0 0;
487
- opacity: 1;
488
- }
489
- 70% {
490
- translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
491
- opacity: 1;
492
- }
493
- 71% {
494
- opacity: 0;
495
- }
496
- 99% {
497
- translate: 0 0;
498
- opacity: 0;
499
- }
500
- 100% {
501
- translate: 0 0;
502
- opacity: 1;
503
- }
126
+ .marker-wind-static-10 {
127
+ --rotation: 10deg;
504
128
  }
505
129
 
506
- .marker-wind-travel.marker-wind-180 {
507
- animation: wind-180-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
130
+ .marker-wind-static-20 {
131
+ --rotation: 20deg;
508
132
  }
509
133
 
510
- @keyframes wind-180-travel {
511
- 0% {
512
- translate: 0 0;
513
- opacity: 1;
514
- }
515
- 70% {
516
- translate: 0 calc(var(--displacement) * 1px);
517
- opacity: 1;
518
- }
519
- 71% {
520
- opacity: 0;
521
- }
522
- 99% {
523
- translate: 0 0;
524
- opacity: 0;
525
- }
526
- 100% {
527
- translate: 0 0;
528
- opacity: 1;
529
- }
134
+ .marker-wind-static-30 {
135
+ --rotation: 30deg;
530
136
  }
531
137
 
532
- .marker-wind-travel.marker-wind-200 {
533
- animation: wind-200-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
138
+ .marker-wind-static-45 {
139
+ --rotation: 45deg;
534
140
  }
535
141
 
536
- @keyframes wind-200-travel {
537
- 0% {
538
- translate: 0 0;
539
- opacity: 1;
540
- }
541
- 70% {
542
- translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
543
- opacity: 1;
544
- }
545
- 71% {
546
- opacity: 0;
547
- }
548
- 99% {
549
- translate: 0 0;
550
- opacity: 0;
551
- }
552
- 100% {
553
- translate: 0 0;
554
- opacity: 1;
555
- }
142
+ .marker-wind-static-90 {
143
+ --rotation: 90deg;
556
144
  }
557
145
 
558
- .marker-wind-travel.marker-wind-225 {
559
- animation: wind-225-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
146
+ .marker-wind-static-135 {
147
+ --rotation: 135deg;
560
148
  }
561
149
 
562
- @keyframes wind-225-travel {
563
- 0% {
564
- translate: 0 0;
565
- opacity: 1;
566
- }
567
- 70% {
568
- translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
569
- opacity: 1;
570
- }
571
- 71% {
572
- opacity: 0;
573
- }
574
- 99% {
575
- translate: 0 0;
576
- opacity: 0;
577
- }
578
- 100% {
579
- translate: 0 0;
580
- opacity: 1;
581
- }
150
+ .marker-wind-static-180 {
151
+ --rotation: 180deg;
582
152
  }
583
153
 
584
- .marker-wind-travel.marker-wind-270 {
585
- animation: wind-270-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
154
+ .marker-wind-static-200 {
155
+ --rotation: 200deg;
586
156
  }
587
157
 
588
- @keyframes wind-270-travel {
589
- 0% {
590
- translate: 0 0;
591
- opacity: 1;
592
- }
593
- 70% {
594
- translate: calc(var(--displacement) * -1px) 0;
595
- opacity: 1;
596
- }
597
- 71% {
598
- opacity: 0;
599
- }
600
- 99% {
601
- translate: 0 0;
602
- opacity: 0;
603
- }
604
- 100% {
605
- translate: 0 0;
606
- opacity: 1;
607
- }
158
+ .marker-wind-static-225 {
159
+ --rotation: 225deg;
608
160
  }
609
161
 
610
- .marker-wind-travel.marker-wind-315 {
611
- animation: wind-315-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
162
+ .marker-wind-static-270 {
163
+ --rotation: 270deg;
612
164
  }
613
165
 
614
- @keyframes wind-315-travel {
615
- 0% {
616
- translate: 0 0;
617
- opacity: 1;
618
- }
619
- 70% {
620
- translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
621
- opacity: 1;
622
- }
623
- 71% {
624
- opacity: 0;
625
- }
626
- 99% {
627
- translate: 0 0;
628
- opacity: 0;
629
- }
630
- 100% {
631
- translate: 0 0;
632
- opacity: 1;
633
- }
166
+ .marker-wind-static-315 {
167
+ --rotation: 315deg;
634
168
  }