Refine battery status pill

This commit is contained in:
2026-10-02 08:11:25 +02:00
parent 31f720a316
commit a4d8f1b7af
8 changed files with 42 additions and 18 deletions
+6 -5
View File
@@ -1417,17 +1417,18 @@ body #connect { height:var(--pill-lg); border-radius:var(--pill-radius); }
.battery-card {
position:relative; display:block; flex-shrink:0; width:100%; height:var(--pill-lg);
min-height:var(--pill-lg); margin:0; padding:0; overflow:hidden;
border:1px solid #565956; border-radius:var(--pill-radius); background:#383c39;
border:0; border-radius:var(--pill-radius); background:#314b3a;
color:#f2f5f2; isolation:isolate;
}
.battery-meter { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.25; transition:width .35s ease,background .2s ease; }
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.55; transition:width .35s ease,background .2s ease,opacity .18s ease-out; }
.battery-card .battery-copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:0 18px; pointer-events:none; }
.battery-summary { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.battery-card small { color:#c3cec5; font-size:11px; line-height:1; }
.battery-card strong { font-size:20px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
.battery-card small { color:#d7e8dc; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; }
.battery-card strong { font-size:26px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
.battery-card i { align-self:auto; color:#d9e0da; text-align:right; font-size:12px; line-height:1.35; font-style:normal; }
.battery-card[data-low="true"] { border-color:#a87468; }
.battery-card[data-low="true"] { background:#4a3734; }
.battery-card[data-stale="true"] #battery-fill { opacity:.25; }
.battery-card:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
/* The same slender, rounded scrollbar is used by every scrollable panel. */