From 0d7a686c654db680d026dbc79362224a8cbf8492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=A1=E5=8F=A3=E6=B5=AA=E4=BA=BA?= <way61@qq.com>
Date: Sun, 27 Sep 2026 21:22:16 +0800
Subject: [PATCH] style: increase save status spacing

---
 SHA256SUMS     | 2 +-
 web/index.html | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/SHA256SUMS b/SHA256SUMS
index 758ca4d..94a93b7 100644
--- a/SHA256SUMS
+++ b/SHA256SUMS
@@ -7,5 +7,5 @@ e83c52906953a723fc79208aecf08372a875e0bc2f74b4283329a475744f8984  README.md
 3da8b5d94e2206bffc19e1c4fa493b31880c9a90fd6a02546461fe54a7255dbd  config/pigway-pi-control.conf
 20c584762cae3a50a498df25e11272c3c191a62c9ce823e63f8224d14637b1d4  systemd/pigway-pi-control-api.service
 35ec68e1c3040e7affad43961fbb77e9e29f3474b92aed1005502629f9acb549  systemd/pigway-pi-control.service
-cf3e2b813732b231651be3482327a4928d925846116a86b159cbf081c4c405e0  web/index.html
+6b6e22d8b24e706a3802872856c5c32c07b3bb740f831ec66da313b4b2b1eb68  web/index.html
 73b7922be93bf57169589755137dc5ec7ec7c8059c85c2bf2ee53a344e534d7e  docs/HARDWARE_PLUGIN_API.md
diff --git a/web/index.html b/web/index.html
index 1d20c66..b9c8d05 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,11 +6,13 @@
 <style>
 :root{color-scheme:dark;--bg:#0b1118;--panel:#121b25;--panel2:#0f1822;--line:#263546;--text:#e7edf5;--muted:#91a4b8;--good:#50d890;--bad:#ff6b6b;--blue:#58a6ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#14263b 0,#0b1118 42%);color:var(--text);font:14px/1.45 system-ui,-apple-system,sans-serif}main{max-width:1180px;margin:auto;padding:28px 20px 70px}header{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:22px}h1{font-size:27px;margin:0}h2{font-size:18px;margin:0 0 8px}h3{font-size:15px;margin:0}.sub,.muted,.hint{color:var(--muted)}.hint{font-size:12px;margin-top:4px}.live{display:flex;align-items:center;gap:8px}.dot{width:9px;height:9px;border-radius:50%;background:var(--bad)}.dot.ok{background:var(--good);box-shadow:0 0 12px var(--good)}nav{display:flex;gap:8px;margin:18px 0;position:sticky;top:0;z-index:5;padding:8px 0;background:#0b1118e8;backdrop-filter:blur(8px)}button{border:1px solid var(--line);background:#162230;color:var(--text);border-radius:8px;padding:9px 13px;cursor:pointer}button:hover,button.active{border-color:var(--blue);background:#1b3047}button:disabled{opacity:.45;cursor:not-allowed}.danger{color:#ff8e8e}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card,.panel,.group{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:none}.group{background:var(--panel2);margin-top:12px}.group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.value{font-size:23px;font-weight:700;margin-top:4px}.wide{grid-column:span 2}.panel{margin-top:12px}.rows{display:grid;gap:8px}.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid #203040}.row:last-child{border:0}.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.badge{border-radius:999px;padding:3px 8px;background:#243447;white-space:nowrap}.badge.good{color:var(--good)}.badge.bad{color:var(--bad)}.hidden{display:none!important}.log{font:12px/1.5 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;padding:8px 0;border-bottom:1px solid #203040}.log-label{font:12px system-ui;color:var(--blue);margin-right:8px}.config-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;margin-top:14px}.config-menu{display:flex;flex-direction:column;gap:7px;align-self:start;position:sticky;top:66px}.config-menu button{text-align:left}.config-page{display:none}.config-page.active{display:block}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field label{display:block;color:var(--muted);font-size:12px}.field input,.field select,.service-form input,.service-search{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:9px}.field input:focus,.field select:focus,.service-form input:focus,.service-search:focus{outline:1px solid var(--blue);border-color:var(--blue)}.input-unit{position:relative}.input-unit input{padding-right:62px}.unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}.span2{grid-column:span 2}.rgb-row{display:grid;grid-template-columns:78px repeat(3,minmax(0,1fr));gap:9px;align-items:start}.color-field{display:flex;flex-direction:column;align-items:center}.color-field label{display:block;width:100%;color:var(--muted);font-size:12px;text-align:center}.swatch-wrap{position:relative;width:42px;height:42px;margin:5px auto 0}.swatch{display:block;width:42px;height:42px;border-radius:50%;border:2px solid #fff5;box-shadow:0 0 12px #0008;cursor:pointer}.color-picker{position:absolute;inset:0;width:42px!important;height:42px!important;padding:0!important;margin:0!important;opacity:0;cursor:pointer}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.toolbar input{min-width:280px;flex:1;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:9px}.savebar{position:sticky;bottom:10px;z-index:4;background:#101b27ef;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:18px;box-shadow:0 8px 30px #0008}.service-list{max-height:390px;overflow:auto;border-top:1px solid var(--line);margin-top:10px}.service-form{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.service-form .full{grid-column:span 2}.service-form label{color:var(--muted);font-size:12px}.error{color:var(--bad)}.success{color:var(--good)}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.fields,.service-form{grid-template-columns:1fr}.span2,.service-form .full{grid-column:span 1}.wide{grid-column:span 2}.config-shell{grid-template-columns:1fr}.config-menu{position:static;display:grid;grid-template-columns:repeat(2,1fr)}.rgb-row{grid-template-columns:68px 1fr}.rgb-row .field{grid-column:2}.color-field{grid-row:1/span 3}}@media(max-width:470px){.grid{grid-template-columns:1fr}.wide{grid-column:span 1}header{align-items:start;flex-direction:column}.config-menu{grid-template-columns:1fr}.row{align-items:flex-start;flex-direction:column}.row-actions{justify-content:flex-start}}
 .plugin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
+#mainSavebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
 </style>
 <style>
 .log-filter-top{display:grid;grid-template-columns:180px 180px auto minmax(190px,1fr);gap:10px;align-items:end;margin:12px 0 10px}.log-filter-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-bottom:12px}.log-filter-top label,.log-filter-bottom label{color:var(--muted);font-size:12px}.log-filter-top input,.log-filter-bottom select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:9px}.quick-range{display:flex;gap:7px;flex-wrap:nowrap;align-items:center}.log-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;white-space:nowrap}.log-actions #logSummary{margin-right:4px}.log-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}.log-table{width:100%;border-collapse:collapse;min-width:760px}.log-table th,.log-table td{text-align:left;padding:10px;border-bottom:1px solid #203040;vertical-align:top}.log-table th{position:sticky;top:0;background:#152130;z-index:1}.sort-button{border:0;background:transparent;padding:0;font-weight:700}.sort-button:hover{background:transparent}.log-message{font:12px/1.5 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;word-break:break-word}.log-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}@media(max-width:980px){.log-filter-top{grid-template-columns:1fr 1fr}.quick-range{grid-column:1/span 2;grid-row:2}.log-filter-top>label:last-child{grid-column:1/span 2}.log-filter-bottom{grid-template-columns:repeat(3,1fr)}.log-actions{grid-column:1/span 3}}@media(max-width:600px){.log-filter-top,.log-filter-bottom{grid-template-columns:1fr}.quick-range,.log-filter-top>label:last-child,.log-actions{grid-column:1}.quick-range{overflow-x:auto;justify-content:flex-start}.log-actions{flex-wrap:wrap}.log-actions #logSummary{width:100%;margin:0}}
 .header-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.preference{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.preference select{height:35px;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:7px 30px 7px 10px}.theme-preference select{min-width:138px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-actions .live{height:35px}.service-list{scrollbar-width:none}.service-list:hover{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.service-list::-webkit-scrollbar{width:0}.service-list:hover::-webkit-scrollbar{width:7px}.service-list::-webkit-scrollbar-track{background:transparent}.service-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}[data-theme="light"]{color-scheme:light;--bg:#eef3f8;--panel:#fff;--panel2:#f6f9fc;--line:#c8d4e0;--text:#172333;--muted:#5d7085;--good:#168653;--bad:#c93d3d;--blue:#176fc1}[data-theme="light"] body{background:radial-gradient(circle at top right,#d9e9f8 0,#eef3f8 45%)}[data-theme="light"] nav{background:#eef3f8e8}[data-theme="light"] button{background:#e7eef6}[data-theme="light"] button:hover,[data-theme="light"] button.active{background:#d9e9f8}[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .service-form input,[data-theme="light"] .service-search,[data-theme="light"] .toolbar input,[data-theme="light"] .log-filter-top input,[data-theme="light"] .log-filter-bottom select,[data-theme="light"] .preference select{background:#fff}[data-theme="light"] .badge{background:#e5edf5;color:#31465c}[data-theme="light"] .badge.good{background:#d9f3e5;color:#087444}[data-theme="light"] .badge.bad{background:#fde5e5;color:#b72f2f}[data-theme="light"] .savebar{background:#f7fafcef;box-shadow:0 8px 25px #3453}[data-theme="light"] .log-table th{background:#e7eef6}[data-theme="light"] .row,[data-theme="light"] .log-table th,[data-theme="light"] .log-table td,[data-theme="light"] .log,[data-theme="light"] .service-list{border-color:#d6e0ea}@media(max-width:470px){.header-actions{justify-content:flex-start}}.host-panel{margin-top:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.host-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:12px}.device-details{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:5px}.host-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px}.metric .value{font-size:20px}.progress{height:7px;background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;overflow:hidden;margin:8px 0}.progress span{display:block;height:100%;background:var(--blue);border-radius:inherit}.host-select{display:grid;gap:4px;color:var(--muted);font-size:12px}.host-select select{min-width:210px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);padding:9px}.config-target-toolbar{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);align-items:end}.token-control{display:flex;gap:8px;align-items:center}.token-control input{min-width:0;margin:0}.token-control button{white-space:nowrap}.bulk-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.bulk-section{padding:12px}.bulk-section-title{display:flex;align-items:center;gap:8px;font-weight:700}.bulk-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:10px 0 0 24px}.bulk-item{display:flex;align-items:flex-start;gap:7px}.bulk-item span{min-width:0}.bulk-value{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bulk-target{display:grid;grid-template-columns:auto minmax(120px,.5fr) minmax(220px,1fr);gap:10px;align-items:center}.bulk-target input[type="password"],.bulk-target input[type="text"]{width:100%;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:8px}.host-checks{display:flex;gap:12px;flex-wrap:wrap}.host-checks label{display:flex;gap:6px;align-items:center}.offline-card{border-color:var(--bad)}@media(hover:hover) and (pointer:fine){.host-panel:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 16px 34px #0006}[data-theme="light"] .host-panel:hover{box-shadow:0 14px 30px #3454}}@media(max-width:900px){.host-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.config-target-toolbar{grid-template-columns:1fr}.bulk-items{grid-template-columns:1fr}.bulk-target{grid-template-columns:auto 1fr}.bulk-target input{grid-column:1/span 2}}@media(max-width:550px){.host-grid{grid-template-columns:1fr}.host-head{flex-direction:column}}
 .plugin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
+#mainSavebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
 </style>
 </head>
 <body><main>