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