changed disk bars

This commit is contained in:
2026-01-15 13:51:20 +01:00
parent d35b176a76
commit 0ca955f284
+20 -11
View File
@@ -475,10 +475,19 @@ data:
.disk-row:last-child { border-bottom: none; } .disk-row:last-child { border-bottom: none; }
.disk-name { font-weight: 500; width: 42px; font-size: 0.95em; flex-shrink: 0; } .disk-name { font-weight: 500; width: 42px; font-size: 0.95em; flex-shrink: 0; }
.disk-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin: 0 10px; overflow: hidden; min-width: 0; } .disk-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin: 0 10px; overflow: hidden; min-width: 0; }
.disk-fill { height: 100%; border-radius: 4px; } .disk-fill {
.fill-ok { background: linear-gradient(90deg, #4ade80, #22c55e); } height: 100%;
.fill-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); } border-radius: 4px;
.fill-crit { background: linear-gradient(90deg, #f87171, #ef4444); } background: linear-gradient(
90deg,
#60a5fa 0%, /* blue */
#60a5fa 70%, /* keep blue until ~70% */
#a78bfa 88%, /* purple region ~70-90 */
#fb7185 95%, /* pink/red ramp ~90-95 */
#ef4444 100% /* red for 95-100 */
);
box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset;
}
.disk-info { font-size: 0.9em; opacity: 0.85; text-align: right; width: 125px; flex-shrink: 0; } .disk-info { font-size: 0.9em; opacity: 0.85; text-align: right; width: 125px; flex-shrink: 0; }
</style> </style>
@@ -526,7 +535,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">Root</span> <span class="disk-name">Root</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $rootPct 70.0 }}fill-ok{{ else if lt $rootPct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $rootPct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $rootPct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.0f" $rootUsed }} / {{ printf "%.0f" $rootTotal }} GB ({{ printf "%.0f" $rootPct }}%)</span> <span class="disk-info">{{ printf "%.0f" $rootUsed }} / {{ printf "%.0f" $rootTotal }} GB ({{ printf "%.0f" $rootPct }}%)</span>
</div> </div>
@@ -537,7 +546,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">SSD2</span> <span class="disk-name">SSD2</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $ssd2Pct 70.0 }}fill-ok{{ else if lt $ssd2Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $ssd2Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $ssd2Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.0f" $ssd2Used }} / {{ printf "%.0f" $ssd2Total }} GB ({{ printf "%.0f" $ssd2Pct }}%)</span> <span class="disk-info">{{ printf "%.0f" $ssd2Used }} / {{ printf "%.0f" $ssd2Total }} GB ({{ printf "%.0f" $ssd2Pct }}%)</span>
</div> </div>
@@ -548,7 +557,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">HDD1</span> <span class="disk-name">HDD1</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $hdd1Pct 70.0 }}fill-ok{{ else if lt $hdd1Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $hdd1Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $hdd1Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.1f" $hdd1Used }} / {{ printf "%.1f" $hdd1Total }} TB ({{ printf "%.0f" $hdd1Pct }}%)</span> <span class="disk-info">{{ printf "%.1f" $hdd1Used }} / {{ printf "%.1f" $hdd1Total }} TB ({{ printf "%.0f" $hdd1Pct }}%)</span>
</div> </div>
@@ -559,7 +568,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">HDD2</span> <span class="disk-name">HDD2</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $hdd2Pct 70.0 }}fill-ok{{ else if lt $hdd2Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $hdd2Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $hdd2Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.1f" $hdd2Used }} / {{ printf "%.1f" $hdd2Total }} TB ({{ printf "%.0f" $hdd2Pct }}%)</span> <span class="disk-info">{{ printf "%.1f" $hdd2Used }} / {{ printf "%.1f" $hdd2Total }} TB ({{ printf "%.0f" $hdd2Pct }}%)</span>
</div> </div>
@@ -570,7 +579,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">HDD3</span> <span class="disk-name">HDD3</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $hdd3Pct 70.0 }}fill-ok{{ else if lt $hdd3Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $hdd3Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $hdd3Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.1f" $hdd3Used }} / {{ printf "%.1f" $hdd3Total }} TB ({{ printf "%.0f" $hdd3Pct }}%)</span> <span class="disk-info">{{ printf "%.1f" $hdd3Used }} / {{ printf "%.1f" $hdd3Total }} TB ({{ printf "%.0f" $hdd3Pct }}%)</span>
</div> </div>
@@ -581,7 +590,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">HDD4</span> <span class="disk-name">HDD4</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $hdd4Pct 70.0 }}fill-ok{{ else if lt $hdd4Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $hdd4Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $hdd4Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.1f" $hdd4Used }} / {{ printf "%.1f" $hdd4Total }} TB ({{ printf "%.0f" $hdd4Pct }}%)</span> <span class="disk-info">{{ printf "%.1f" $hdd4Used }} / {{ printf "%.1f" $hdd4Total }} TB ({{ printf "%.0f" $hdd4Pct }}%)</span>
</div> </div>
@@ -592,7 +601,7 @@ data:
<div class="disk-row"> <div class="disk-row">
<span class="disk-name">HDD5</span> <span class="disk-name">HDD5</span>
<div class="disk-bar"> <div class="disk-bar">
<div class="disk-fill {{ if lt $hdd5Pct 70.0 }}fill-ok{{ else if lt $hdd5Pct 85.0 }}fill-warn{{ else }}fill-crit{{ end }}" style="width: {{ printf "%.0f" $hdd5Pct }}%"></div> <div class="disk-fill" style="width: {{ printf "%.0f" $hdd5Pct }}%"></div>
</div> </div>
<span class="disk-info">{{ printf "%.1f" $hdd5Used }} / {{ printf "%.1f" $hdd5Total }} TB ({{ printf "%.0f" $hdd5Pct }}%)</span> <span class="disk-info">{{ printf "%.1f" $hdd5Used }} / {{ printf "%.1f" $hdd5Total }} TB ({{ printf "%.0f" $hdd5Pct }}%)</span>
</div> </div>