diff --git a/glance-system/glance-kisfenyo.yaml b/glance-system/glance-kisfenyo.yaml
index 516fd1a..95d4c25 100644
--- a/glance-system/glance-kisfenyo.yaml
+++ b/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 }}
+
{{ range $daily }}
{{ $tmin := .Float "tmin_c" }}
@@ -766,9 +776,13 @@ data:
{{ if $dicon }}

{{ end }}
{{ printf "%.0f" $tmin }}°
+
-
+ {{/* Pass calculated offset and gradient to CSS variables */}}
+
{{ printf "%.0f" $tmax }}°
@@ -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-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.10); }
+ .idokep-bar {
+ position: relative;
+ height: 10px;
+ container-type: inline-size; /* Allows children to know the full track width */
+ }
+ .idokep-bar-track {
+ position: absolute;
+ inset: 0;
+ border-radius: 999px;
+ background: rgba(255,255,255,0.10);
+ }
.idokep-bar-fill {
- position: absolute; top: 0; bottom: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
border-radius: 999px;
- background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #fb7185 100%);
+ 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