diff --git a/glance-system/glance-kisfenyo.yaml b/glance-system/glance-kisfenyo.yaml index 7f0d172..c226975 100644 --- a/glance-system/glance-kisfenyo.yaml +++ b/glance-system/glance-kisfenyo.yaml @@ -474,21 +474,41 @@ data: .disk-row { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .disk-row:last-child { border-bottom: none; } .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-fill { - height: 100%; - width: 100%; /* important */ - transform-origin: left center; /* important */ - border-radius: 4px; + /* Set the track as a reference container */ + .disk-bar { + flex: 1; + height: 8px; + background: rgba(255,255,255,0.1); + border-radius: 4px; + margin: 0 10px; + overflow: hidden; + min-width: 0; + container-type: inline-size; /* <--- KEY CHANGE: Enables width measurement */ + } + /* The fill acts as a "mask" or window */ + .disk-fill { + height: 100%; + border-radius: 4px; + /* background: ... <--- REMOVED from here */ + position: relative; /* Required for the pseudo-element positioning */ + overflow: hidden; /* Clips the gradient to the current progress percentage */ + box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset; + } + /* The gradient is applied here, locked to the full track width */ + .disk-fill::before { + content: ""; + position: absolute; + top: 0; left: 0; bottom: 0; + width: 100cqw; /* <--- KEY CHANGE: 100% of the parent .disk-bar width */ background: linear-gradient( 90deg, - #60a5fa 0%, - #60a5fa 70%, - #a78bfa 88%, - #fb7185 95%, - #ef4444 100% + #60a5fa 0%, /* blue */ + #60a5fa 70%, /* keep blue until 70% of the full scale */ + #a78bfa 88%, /* purple transition */ + #fb7185 95%, /* pink transition */ + #ef4444 100% /* red at 100% */ ); - box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset; + z-index: -1; } .disk-info { font-size: 0.9em; opacity: 0.85; text-align: right; width: 125px; flex-shrink: 0; } @@ -537,7 +557,7 @@ data: