modifying idokep bars

glance-system/glance-kisfenyo.yaml

@@ -738,7 +738,7 @@ data:
                         {{ end }}
 
                         {{ if gt (len $daily) 0 }}
-                          {{/* compute global min/max across shown days for bar scaling */}}
+                          {{/* compute global min/max */}}
                           {{ $gmin := 9999.0 }}
                           {{ $gmax := -9999.0 }}
                           {{ range $daily }}
@@ -750,6 +750,16 @@ data:
                           {{ $span := sub $gmax $gmin }}
                           {{ if eq $span 0.0 }}{{ $span = 1.0 }}{{ end }}
 
+                          {{/* CALCULATE GRADIENT POSITIONS RELATIVE TO CURRENT RANGE */}}
+                          {{ $p_wht := printf "%.1f" (mul (div (sub -10.0 $gmin) $span) 100.0) }}
+                          {{ $p_blu := printf "%.1f" (mul (div (sub 0.0 $gmin) $span) 100.0) }}
+                          {{ $p_pur := printf "%.1f" (mul (div (sub 15.0 $gmin) $span) 100.0) }}
+                          {{ $p_pnk := printf "%.1f" (mul (div (sub 25.0 $gmin) $span) 100.0) }}
+                          {{ $p_red := printf "%.1f" (mul (div (sub 35.0 $gmin) $span) 100.0) }}
+                          
+                          {{/* Generate the dynamic CSS gradient string */}}
+                          {{ $grad := printf "linear-gradient(90deg, #ffffff %s%%, #60a5fa %s%%, #a78bfa %s%%, #fb7185 %s%%, #ef4444 %s%%)" $p_wht $p_blu $p_pur $p_pnk $p_red }}
+
                           <div class="idokep-daily">
                             {{ range $daily }}
                               {{ $tmin := .Float "tmin_c" }}
@@ -766,9 +776,13 @@ data:
                                   {{ if $dicon }}<img src="{{ $dicon }}" alt="" />{{ end }}
                                 </div>
                                 <div class="idokep-min">{{ printf "%.0f" $tmin }}°</div>
+                                
                                 <div class="idokep-bar">
                                   <div class="idokep-bar-track"></div>
-                                  <div class="idokep-bar-fill" style="left: {{ printf "%.1f" $left }}%; width: {{ printf "%.1f" $wid }}%;"></div>
+                                  {{/* Pass calculated offset and gradient to CSS variables */}}
+                                  <div class="idokep-bar-fill" style="left: {{ printf "%.1f" $left }}%; width: {{ printf "%.1f" $wid }}%;">
+                                     <div class="idokep-bar-gradient" style="--off: {{ printf "%.1f" $left }}; --grad: {{ $grad }};"></div>
+                                  </div>
                                 </div>
                                 <div class="idokep-max">{{ printf "%.0f" $tmax }}°</div>
                               </div>
@@ -2041,15 +2055,25 @@ data:
     .idokep-dow { opacity: 0.7; font-weight: 700; }
     .idokep-dayicon img { width: 22px; height: 22px; opacity: 0.95; }
 
-    .idokep-bar { position: relative; height: 10px; }
+    .idokep-bar { 
-    .idokep-bar-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.10); }
+      position: relative; 
-    .idokep-bar-fill {
+      height: 10px; 
-      position: absolute; top: 0; bottom: 0;
+      container-type: inline-size; /* Allows children to know the full track width */
+    }
+    .idokep-bar-track { 
+      position: absolute; 
+      inset: 0; 
       border-radius: 999px; 
-      background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #fb7185 100%);
+      background: rgba(255,255,255,0.10); 
+    }
+    .idokep-bar-fill {
+      position: absolute; 
+      top: 0; 
+      bottom: 0;
+      border-radius: 999px;
+      overflow: hidden; /* Clips the inner gradient to this bar's size */
       box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
     }
-
     .idokep-min, .idokep-max { text-align: right; font-weight: 700; opacity: 0.8; }
     .idokep-dow {
       display: grid;
@@ -2064,6 +2088,19 @@ data:
       opacity: 0.75;
       font-variant-numeric: tabular-nums;
     }
+    /* This element holds the gradient */
+    .idokep-bar-gradient {
+      position: absolute;
+      top: 0; bottom: 0;
+      width: 100cqw;  /* Forces width to match the PARENT TRACK, not the fill */
+      
+      /* Shift left by the percentage the fill was pushed right.
+         1cqw equals 1% of the track width. 
+         So we multiple the offset variable by -1cqw to realign perfectly. */
+      left: calc(var(--off) * -1cqw); 
+      
+      background: var(--grad);
+    }
 ---
 apiVersion: apps/v1
 kind: Deployment