admin343/browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve resource usage meter states and accessibility

Browse Source
This commit is contained in:
npc0-hue
2026-08-21 16:53:46 +08:00
parent 8aeb488179
commit 2381b69d24
6 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform_web/theme/base.css
+2 -5
View File
@@ -461,11 +461,8 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))}
.server-card-stat span{color:color-mix(in srgb,var(--ink) 78%,var(--accent-deep));font-size:11px;font-weight:800;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.48)}
.server-card-stat strong{color:color-mix(in srgb,var(--ink) 94%,#fff);font-size:15px;font-weight:850;line-height:1.16;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.56)}
.server-card-meters{display:grid;gap:6px}
.usage-meter{display:grid;grid-template-columns:52px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12px;color:var(--ink-soft)}
.usage-meter-track{height:8px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.usage-meter-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--pink));box-shadow:0 0 10px var(--candy-glow)}
.usage-meter-fill.usage-high{background:linear-gradient(90deg,var(--gold),var(--danger))}
.usage-meter-value{text-align:right;font-weight:700;color:var(--ink)}
.usage-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "track track";gap:6px 10px;align-items:center;min-width:0;padding:9px 10px;border:1px solid color-mix(in srgb,var(--line-strong) 58%,rgba(255,255,255,.14));border-radius:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-solid) 84%,rgba(255,255,255,.06)),color-mix(in srgb,var(--surface-solid) 62%,var(--accent-soft))),var(--glass-wash);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--crystal-rim) 70%,transparent);font-size:12px;color:var(--ink-soft)}
.usage-meter-label{grid-area:label;display:flex;align-items:center;gap:7px;min-width:0;color:color-mix(in srgb,var(--ink) 82%,var(--accent-deep));font-weight:850}.usage-meter-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usage-meter-label small{font-size:10px;font-weight:800;color:var(--ink-faint);white-space:nowrap}.usage-meter-value{grid-area:value;justify-self:end;min-width:50px;text-align:right;color:var(--ink);font-family:var(--font-mono);font-size:14px;font-weight:850;line-height:1}.usage-meter-track{grid-area:track;position:relative;display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--surface-solid) 72%,transparent),color-mix(in srgb,var(--accent-soft) 72%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line-strong) 74%,transparent);overflow:hidden}.usage-meter-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--pink));box-shadow:0 0 12px var(--candy-glow)}.usage-meter-watch .usage-meter-fill{background:linear-gradient(90deg,var(--teal),var(--gold))}.usage-meter-critical .usage-meter-fill{background:linear-gradient(90deg,var(--gold),var(--danger))}.usage-meter-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--ink-faint) 84%,transparent);font-size:9px;font-weight:850;letter-spacing:.02em;text-transform:uppercase}.usage-meter-pending .usage-meter-track,.usage-meter-missing .usage-meter-track{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 70%,transparent) 0 8px,color-mix(in srgb,var(--accent-soft) 62%,transparent) 8px 16px)}.usage-meter-pending .usage-meter-value,.usage-meter-missing .usage-meter-value{font-size:11px;color:var(--ink-soft)}.usage-meter-watch{border-color:color-mix(in srgb,var(--gold) 42%,var(--line-strong))}.usage-meter-critical{border-color:color-mix(in srgb,var(--danger) 48%,var(--line-strong))}
.server-detail-header{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--glass-wash),var(--glass-tint),var(--surface);backdrop-filter:blur(22px) saturate(1.28);box-shadow:inset 0 1px 0 var(--crystal-rim),inset 0 0 0 1px var(--diamond-line),0 18px 42px var(--glass-shadow),0 0 24px rgba(255,255,255,.18);position:relative;overflow:hidden}
.server-detail-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.server-detail-title-row>div:first-child{min-width:0}