v0.33.2

src/admin/web/style.css

@@ -69,6 +69,9 @@
     --chart-grid-opacity: .28;
     --chart-grid-dash: none;
     --chart-svg-filter: none;
+    --rp-progress-fill: var(--chart-accent);
+    --rp-progress-track: var(--line);
+    --rp-progress-radius: 3px;
     --traffic-h1: var(--chart-accent);
     --traffic-h2: var(--chart-secondary);
     --traffic-h3: var(--chart-tertiary);
@@ -132,9 +135,6 @@ html[data-theme=light] {
     --scrollbar-thumb-hover: #879684
 }
 
-
-/* Optional AMOLED palette: near-black surfaces, readable borders and restrained
-   mint/coral emphasis. Does not change the established dark appearance. */
 html[data-theme=ultra_dark] {
     color-scheme: dark;
     --bg: #030404;
@@ -194,8 +194,6 @@ html[data-theme=ultra_dark] {
     --scrollbar-thumb-hover: #617373;
 }
 
-/* Warm, muted ivory. No pure-white canvas; numeric values and charts retain
-   clear contrast against their slightly lighter, neutral card surfaces. */
 html[data-theme=cream] {
     color-scheme: light;
     --bg: #f2ede3;
@@ -1686,21 +1684,25 @@ progress {
     border: 0;
     appearance: none;
     -webkit-appearance: none;
-    background: var(--line);
-    accent-color: var(--green);
+    background: var(--rp-progress-track);
+    accent-color: var(--rp-progress-fill);
+    border-radius: var(--rp-progress-radius);
     overflow: hidden
 }
 
 progress::-webkit-progress-bar {
-    background: var(--line)
+    background: var(--rp-progress-track);
+    border-radius: var(--rp-progress-radius)
 }
 
 progress::-webkit-progress-value {
-    background: var(--green)
+    background: var(--rp-progress-fill);
+    border-radius: var(--rp-progress-radius)
 }
 
 progress::-moz-progress-bar {
-    background: var(--green)
+    background: var(--rp-progress-fill);
+    border-radius: var(--rp-progress-radius)
 }
 
 .diagnostics-grid {
@@ -4465,7 +4467,7 @@ dialog .window-heading {
 
 .traffic-bar-track {
     height: 10px;
-    border-radius: 999px;
+    border-radius: var(--rp-progress-radius);
     background: var(--chart-surface);
     box-shadow: inset 0 0 0 1px var(--line);
     overflow: hidden
@@ -4476,7 +4478,7 @@ dialog .window-heading {
     height: 100%;
     min-width: 2px;
     border-radius: inherit;
-    background: var(--chart-accent)
+    background: var(--rp-progress-fill)
 }
 
 .traffic-bar-value {
@@ -11174,21 +11176,25 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
 html[data-corner-style=square] {
     --rp-radius-surface: 0px;
     --rp-radius-control: 0px;
+    --rp-progress-radius: 0px;
 }
 
 html[data-corner-style=subtle] {
     --rp-radius-surface: 5px;
     --rp-radius-control: 4px;
+    --rp-progress-radius: 2px;
 }
 
 html[data-corner-style=rounded] {
     --rp-radius-surface: 12px;
     --rp-radius-control: 8px;
+    --rp-progress-radius: 4px;
 }
 
 html[data-corner-style=extra] {
     --rp-radius-surface: 18px;
     --rp-radius-control: 12px;
+    --rp-progress-radius: 999px;
 }
 
 html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-style=rounded], [data-corner-style=extra]) :is(.card, .stat, dialog, .login-card, .appearance-section, .settings-tabs, .dashboard-widget-setting, .overview-layout-tile, .overview-layout-hidden-item, .overview-inline-hidden-item, .overview-inline-hidden, .notice, .toast, .chart-style-choice, .stream-dashboard-card, .pool-card, .vhost-card, .vh-backend-card, .entity, .settings-filter-row, .stream-backend-row, .file-log-advanced-parser, .table-container, .metric-info-popover) {
@@ -11244,8 +11250,8 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
     height: 10px;
     margin: 9px 0 8px;
     overflow: hidden;
-    border-radius: var(--rp-radius-control, 5px);
-    background: var(--line);
+    border-radius: var(--rp-progress-radius);
+    background: var(--rp-progress-track);
 }
 
 #panel-overview .overview-meter-fill {
@@ -11253,10 +11259,22 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
     width: 0;
     height: 100%;
     border-radius: inherit;
-    background: var(--chart-accent);
+    background: var(--rp-progress-fill);
     transition: width 180ms ease;
 }
 
+/* System Load uses the same track/fill component as other Overview meters,
+   while retaining its compact 5px height and existing vertical spacing. */
+#panel-overview .system-card .system-memory-meter {
+    display: block;
+    width: 100%;
+    height: 5px;
+    margin: 6px 0 9px;
+    overflow: hidden;
+    background: var(--rp-progress-track);
+    border-radius: var(--rp-progress-radius);
+}
+
 #panel-overview .stat-meter>small {
     display: block;
     overflow-wrap: anywhere;
@@ -11488,8 +11506,8 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
     width: 100%;
     height: 10px;
     margin: 9px 0 8px;
-    background: var(--line);
-    border-radius: var(--rp-radius-control, 5px);
+    background: var(--rp-progress-track);
+    border-radius: var(--rp-progress-radius);
     overflow: hidden;
 }
 
@@ -11546,14 +11564,15 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
 
 #panel-overview .www-top-meter {
     height: 7px;
-    background: var(--line);
-    border-radius: 4px;
+    background: var(--rp-progress-track);
+    border-radius: var(--rp-progress-radius);
     overflow: hidden;
 }
 
 #panel-overview .www-top-meter span {
     display: block;
-    background: var(--chart-accent);
+    background: var(--rp-progress-fill);
+    border-radius: inherit;
     height: 100%;
 }