fix: restore service-grid auto-fill columns, station-b header backdrop
Both station.html and station-b.html: restore .service-grid to display:grid with repeat(auto-fill,minmax(168px,1fr)) — the multi-column layout that was incorrectly changed to flex-column in the previous fix. station-b.html: add dark backdrop-filter panel to #top so clock and hostname text are readable over the binary rain canvas background.
This commit is contained in:
parent
9a37540857
commit
c2c70b35e5
|
|
@ -58,7 +58,7 @@
|
||||||
|
|
||||||
#app { position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;padding:20px;gap:0; }
|
#app { position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;padding:20px;gap:0; }
|
||||||
|
|
||||||
#top { display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:14px;flex-shrink:0; }
|
#top { display:flex;align-items:flex-end;justify-content:space-between;padding:10px 16px 14px;flex-shrink:0;background:rgba(8,14,26,0.72);backdrop-filter:blur(16px);border-radius:14px;margin-bottom:4px; }
|
||||||
#hostname-area { display:flex;align-items:center;gap:8px; }
|
#hostname-area { display:flex;align-items:center;gap:8px; }
|
||||||
#status-dot { width:8px;height:8px;border-radius:50%;background:var(--text3); }
|
#status-dot { width:8px;height:8px;border-radius:50%;background:var(--text3); }
|
||||||
#status-dot.ok { background:var(--ok); box-shadow:0 0 8px var(--ok); }
|
#status-dot.ok { background:var(--ok); box-shadow:0 0 8px var(--ok); }
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:12px;font-weight:600; }
|
.service-name { font-size:12px;font-weight:600; }
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:13px;font-weight:500; }
|
.service-name { font-size:13px;font-weight:500; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue