raain-ui 2.3.20 → 2.3.21
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/CHANGELOG.md +6 -0
- package/data/wind-markers.css +27 -10
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
9
9
|
|
|
10
10
|
### Changed
|
|
11
11
|
|
|
12
|
+
- wind-markers.css updated to show trustful indicator
|
|
13
|
+
|
|
14
|
+
## [2.3.20] - 2025-10-13
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
12
18
|
- Dependencies ^ => ~
|
|
13
19
|
|
|
14
20
|
## [2.3.19] - 2025-10-09
|
package/data/wind-markers.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
|
|
10
10
|
*
|
|
11
11
|
* Then apply classes to markers via MapElement.changeMarkerStyle():
|
|
12
|
-
* mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10});
|
|
12
|
+
* mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10, trustful: 0.5});
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
/* Base wind marker class */
|
|
@@ -20,14 +20,31 @@
|
|
|
20
20
|
/* Calculate displacement: subtle animation, reduced from original */
|
|
21
21
|
--displacement: calc(var(--strength, 5) * 2);
|
|
22
22
|
|
|
23
|
-
/*
|
|
24
|
-
|
|
23
|
+
/* Trustful parameter: 0 = red (untrusted), 1 = original (trusted) */
|
|
24
|
+
--trustful: 1;
|
|
25
|
+
|
|
26
|
+
/* Calculate red overlay intensity: (1 - trustful) gives us 0 at trustful=1, 1 at trustful=0 */
|
|
27
|
+
--red-intensity: calc(1 - var(--trustful, 1));
|
|
28
|
+
|
|
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
|
+
));
|
|
25
37
|
|
|
26
38
|
/* Rotation will be set by direction-specific classes */
|
|
27
39
|
--rotation: 0deg;
|
|
28
40
|
}
|
|
29
41
|
|
|
30
42
|
.marker-wind img {
|
|
43
|
+
/* Apply red colorization based on trustful value */
|
|
44
|
+
/* Strong red tint: grayscale removes color, then apply red via sepia+hue */
|
|
45
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
46
|
+
|
|
47
|
+
/* Rotation set by direction-specific classes */
|
|
31
48
|
transform: rotate(var(--rotation)) !important;
|
|
32
49
|
}
|
|
33
50
|
|
|
@@ -38,31 +55,31 @@
|
|
|
38
55
|
/* Override animation to use travel mode */
|
|
39
56
|
}
|
|
40
57
|
|
|
41
|
-
/* Pulse animation (
|
|
58
|
+
/* Pulse animation (opacity) */
|
|
42
59
|
@keyframes wind-pulse {
|
|
43
60
|
0%, 100% {
|
|
44
61
|
opacity: 1;
|
|
45
|
-
filter:
|
|
62
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
46
63
|
}
|
|
47
64
|
50% {
|
|
48
65
|
opacity: 0.85;
|
|
49
|
-
filter:
|
|
66
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
50
67
|
}
|
|
51
68
|
}
|
|
52
69
|
|
|
53
70
|
/* Travel mode pulse - fade out at destination */
|
|
54
71
|
@keyframes wind-pulse-travel {
|
|
55
72
|
0% {
|
|
56
|
-
filter:
|
|
73
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
57
74
|
}
|
|
58
75
|
70% {
|
|
59
|
-
filter:
|
|
76
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
60
77
|
}
|
|
61
78
|
71%, 99% {
|
|
62
|
-
filter:
|
|
79
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
63
80
|
}
|
|
64
81
|
100% {
|
|
65
|
-
filter:
|
|
82
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
66
83
|
}
|
|
67
84
|
}
|
|
68
85
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "raain-ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.21",
|
|
4
4
|
"author": "contact@raain.io",
|
|
5
5
|
"homepage": "https://github.com/raainio/raain-ui",
|
|
6
6
|
"description": "raain.io ui layers",
|
|
@@ -69,4 +69,4 @@
|
|
|
69
69
|
"ts-node": "~8.3.0",
|
|
70
70
|
"typescript": "~4.8.4"
|
|
71
71
|
}
|
|
72
|
-
}
|
|
72
|
+
}
|