raain-ui 2.3.21 → 2.3.23

package/data/wind-markers.css

@@ -1,93 +1,60 @@
 /* ============================================================================
- * Wind Speed/Direction Animation for Leaflet Markers
+ * Wind Speed/Direction Static Display for Leaflet Markers
  * ============================================================================
  * Usage: Import this CSS file in your app's global styles or index.html
  *
- * @import "~raain-ui/data/wind-markers.css";
+ * @import "~raain-ui/data/wind-markers-static.css";
  *
  * Or in HTML:
- * <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
+ * <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers-static.css">
  *
  * Then apply classes to markers via MapElement.changeMarkerStyle():
- * mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10, trustful: 0.5});
+ * mapElement.changeMarkerStyle(marker, 'marker-wind-static marker-wind-static-200', {strength: 10, trustful: 0.5});
  */
 
-/* Base wind marker class */
-.marker-wind {
-    /* Calculate animation speed: stronger wind = faster animation */
-    --duration: calc(5s - (min(var(--strength, 5), 25) * 0.08s));
-
-    /* Calculate displacement: subtle animation, reduced from original */
-    --displacement: calc(var(--strength, 5) * 2);
-
+/* Base wind marker class - static rotation only */
+.marker-wind-static {
     /* Trustful parameter: 0 = red (untrusted), 1 = original (trusted) */
     --trustful: 1;
 
     /* Calculate red overlay intensity: (1 - trustful) gives us 0 at trustful=1, 1 at trustful=0 */
     --red-intensity: calc(1 - var(--trustful, 1));
 
-    /* Visual glow intensity based on strength and trustfulness */
-    /* When trustful is low, glow becomes red; when high, glow is blue */
-    filter: drop-shadow(0 0 calc(var(--strength, 5) * 0.5px) rgba(
-            calc(100 + 155 * var(--red-intensity)),
-            calc(150 * var(--trustful, 1)),
-            calc(255 * var(--trustful, 1)),
-            0.8
-    ));
-
     /* Rotation will be set by direction-specific classes */
     --rotation: 0deg;
-}
 
-.marker-wind img {
     /* Apply red colorization based on trustful value */
     /* Strong red tint: grayscale removes color, then apply red via sepia+hue */
     filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
 
-    /* Rotation set by direction-specific classes */
-    transform: rotate(var(--rotation)) !important;
+    /* Smooth rotation transition when angle changes */
+    /* Rotation is applied via JavaScript by modifying the transform property
+    transition: transform 0.3s ease-out;
+    */
 }
 
-/* Variant: Travel animation (move from src to target, disappear, reappear at src)
-   Usage: Add 'marker-wind-travel' class in addition to marker-wind and direction class
-   Example: 'marker-wind marker-wind-travel marker-wind-200' */
-.marker-wind-travel {
-    /* Override animation to use travel mode */
-}
-
-/* Pulse animation (opacity) */
-@keyframes wind-pulse {
-    0%, 100% {
-        opacity: 1;
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
-    50% {
-        opacity: 0.85;
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
-}
-
-/* Travel mode pulse - fade out at destination */
-@keyframes wind-pulse-travel {
-    0% {
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
-    70% {
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
-    71%, 99% {
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
-    100% {
-        filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
-    }
+/* Speed text label - as a real DOM element (not pseudo-element) */
+.wind-speed-label {
+    position: absolute;
+    top: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(0, 0, 0, 0.6);
+    padding: 2px 5px;
+    border-radius: 3px;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 1000;
 }
 
-/* Direction arrow indicator */
-.marker-wind::after {
-    content: '→';
+/* Direction arrow indicator - as a real DOM element (not pseudo-element) */
+.wind-arrow-indicator {
     position: absolute;
-    top: -20px;
+    top: -45px;
     left: 50%;
     font-size: 18px;
     font-weight: bold;
@@ -95,540 +62,108 @@
     text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
     pointer-events: none;
     transform-origin: center;
+    z-index: 1000;
 }
 
-/* Wind direction classes for every available degree */
-/* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left) */
-/* SVG arrow points right (East), so 90° = 0° rotation, others adjust from there */
-
-.marker-wind-0::after, .marker-wind-360::after {
+/* Rotate arrow based on parent's rotation variable
+.marker-wind-static-0 ~ .wind-arrow-indicator,
+.marker-wind-static-360 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(180deg);
 }
 
-.marker-wind-0, .marker-wind-360 {
-    --rotation: -90deg;
-    animation: wind-0 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-0 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: 0 calc(var(--displacement) * -1px);
-    }
-}
-
-.marker-wind-travel.marker-wind-0, .marker-wind-travel.marker-wind-360 {
-    animation: wind-0-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
-
-@keyframes wind-0-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: 0 calc(var(--displacement) * -1px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
-
-.marker-wind-10::after {
+.marker-wind-static-10 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(190deg);
 }
 
-.marker-wind-10 {
-    --rotation: -80deg;
-    animation: wind-10 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-10 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
-    }
-}
-
-.marker-wind-20::after {
+.marker-wind-static-20 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(200deg);
 }
 
-.marker-wind-20 {
-    --rotation: -70deg;
-    animation: wind-20 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-20 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
-    }
-}
-
-.marker-wind-30::after {
+.marker-wind-static-30 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(210deg);
 }
 
-.marker-wind-30 {
-    --rotation: -60deg;
-    animation: wind-30 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-30 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
-    }
-}
-
-.marker-wind-45::after {
+.marker-wind-static-45 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(225deg);
 }
 
-.marker-wind-45 {
-    --rotation: -45deg;
-    animation: wind-45 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-45 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
-    }
-}
-
-.marker-wind-90::after {
+.marker-wind-static-90 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(270deg);
 }
 
-.marker-wind-90 {
-    --rotation: 0deg;
-    animation: wind-90 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-90 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 1px) 0;
-    }
-}
-
-.marker-wind-135::after {
+.marker-wind-static-135 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(315deg);
 }
 
-.marker-wind-135 {
-    --rotation: 45deg;
-    animation: wind-135 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-135 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
-    }
-}
-
-.marker-wind-180::after {
+.marker-wind-static-180 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(0deg);
 }
 
-.marker-wind-180 {
-    --rotation: 90deg;
-    animation: wind-180 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-180 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: 0 calc(var(--displacement) * 1px);
-    }
-}
-
-.marker-wind-200::after {
+.marker-wind-static-200 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(20deg);
 }
 
-.marker-wind-200 {
-    --rotation: 110deg;
-    animation: wind-200 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-200 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
-    }
-}
-
-.marker-wind-225::after {
+.marker-wind-static-225 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(45deg);
 }
 
-.marker-wind-225 {
-    --rotation: 135deg;
-    animation: wind-225 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-225 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
-    }
-}
-
-.marker-wind-270::after {
+.marker-wind-static-270 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(90deg);
 }
 
-.marker-wind-270 {
-    --rotation: 180deg;
-    animation: wind-270 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-270 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * -1px) 0;
-    }
-}
-
-.marker-wind-315::after {
+.marker-wind-static-315 ~ .wind-arrow-indicator {
     transform: translateX(-50%) rotate(135deg);
 }
 
-.marker-wind-315 {
-    --rotation: -135deg;
-    animation: wind-315 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
-}
-
-@keyframes wind-315 {
-    0%, 100% {
-        translate: 0 0;
-    }
-    50% {
-        translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
-    }
-}
-
-/* ============================================================================
- * Travel Mode Animations - Move from source to target, disappear, reappear
- * ============================================================================ */
-
-.marker-wind-travel.marker-wind-10 {
-    animation: wind-10-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
-
-@keyframes wind-10-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
-
-.marker-wind-travel.marker-wind-20 {
-    animation: wind-20-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
-
-@keyframes wind-20-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
-
-.marker-wind-travel.marker-wind-30 {
-    animation: wind-30-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
-
-@keyframes wind-30-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
-
-.marker-wind-travel.marker-wind-45 {
-    animation: wind-45-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
-
-@keyframes wind-45-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
-
-.marker-wind-travel.marker-wind-90 {
-    animation: wind-90-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
-}
+ */
 
-@keyframes wind-90-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 1px) 0;
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
-}
+/* Wind direction classes for every available degree */
+/* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left)*/
 
-.marker-wind-travel.marker-wind-135 {
-    animation: wind-135-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-0 .marker-wind-static-360 {
+    --rotation: 0deg;
 }
 
-@keyframes wind-135-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-10 {
+    --rotation: 10deg;
 }
 
-.marker-wind-travel.marker-wind-180 {
-    animation: wind-180-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-20 {
+    --rotation: 20deg;
 }
 
-@keyframes wind-180-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: 0 calc(var(--displacement) * 1px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-30 {
+    --rotation: 30deg;
 }
 
-.marker-wind-travel.marker-wind-200 {
-    animation: wind-200-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-45 {
+    --rotation: 45deg;
 }
 
-@keyframes wind-200-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-90 {
+    --rotation: 90deg;
 }
 
-.marker-wind-travel.marker-wind-225 {
-    animation: wind-225-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-135 {
+    --rotation: 135deg;
 }
 
-@keyframes wind-225-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-180 {
+    --rotation: 180deg;
 }
 
-.marker-wind-travel.marker-wind-270 {
-    animation: wind-270-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-200 {
+    --rotation: 200deg;
 }
 
-@keyframes wind-270-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * -1px) 0;
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-225 {
+    --rotation: 225deg;
 }
 
-.marker-wind-travel.marker-wind-315 {
-    animation: wind-315-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
+.marker-wind-static-270 {
+    --rotation: 270deg;
 }
 
-@keyframes wind-315-travel {
-    0% {
-        translate: 0 0;
-        opacity: 1;
-    }
-    70% {
-        translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
-        opacity: 1;
-    }
-    71% {
-        opacity: 0;
-    }
-    99% {
-        translate: 0 0;
-        opacity: 0;
-    }
-    100% {
-        translate: 0 0;
-        opacity: 1;
-    }
+.marker-wind-static-315 {
+    --rotation: 315deg;
 }