diff --git a/posimai-dev/station-b.html b/posimai-dev/station-b.html index 3240f9dd..7c3fdf59 100644 --- a/posimai-dev/station-b.html +++ b/posimai-dev/station-b.html @@ -56,7 +56,7 @@ #alert-bar.crit { background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.3);color:var(--crit);animation:alert-pulse 2s ease-in-out infinite; } @keyframes alert-pulse { 0%,100%{border-color:rgba(248,113,113,0.3)} 50%{border-color:rgba(248,113,113,0.65)} } - #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:16px 20px 12px;gap: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; } @@ -115,7 +115,7 @@ .spark-svg { width:100%;height:100%;overflow:visible; } /* services */ - .service-grid { display:grid;grid-template-columns:repeat(3,1fr);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:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; } .service-card-top { display:flex;align-items:center;justify-content:space-between; } .service-name { font-size:12px;font-weight:600; } diff --git a/posimai-dev/station.html b/posimai-dev/station.html index 5ea090a9..5fc493f5 100644 --- a/posimai-dev/station.html +++ b/posimai-dev/station.html @@ -73,7 +73,7 @@ #status-dot.off { background:var(--text3);box-shadow:none; } @keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.35} } #clock-area { text-align:center; } - #clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--text); } + #clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:300;letter-spacing:-0.03em;line-height:1; } #date { font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.06em; } #last-checked { text-align:right;font-size:11px;color:var(--text3); } @@ -125,7 +125,7 @@ .spark-svg { width:100%;height:100%;overflow:visible; } /* services */ - .service-grid { display:grid;grid-template-columns:repeat(3,1fr);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-top { display:flex;align-items:center;justify-content:space-between; } .service-name { font-size:13px;font-weight:500; } @@ -165,8 +165,7 @@ #stream-ticker-inner { display:inline-block;animation:ticker 60s linear infinite; } @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} } - #bottom { display:flex;flex-direction:column;gap:8px;padding-top:10px; } - #bottom-bar { display:flex;align-items:center;justify-content:space-between; } + #bottom { display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border); } .bottom-brand { font-size:12px;color:var(--text3);font-weight:500;letter-spacing:0.04em; } .bottom-brand span { color:var(--accent); } .bottom-links { display:flex;gap:7px; } @@ -174,12 +173,6 @@ .bottom-link:hover { color:var(--accent);border-color:rgba(34,211,238,0.3); } .bottom-link svg { width:11px;height:11px; } #refresh-countdown { font-size:11px;color:var(--text3); } - /* full-width binary footer tape */ - #bin-footer { width:100%;overflow:hidden;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;line-height:1;border-top:1px solid var(--border2);padding-top:7px; } - #bin-footer-inner { display:inline-block;animation:bfticker 40s linear infinite; } - @keyframes bfticker { from{transform:translateX(0)} to{transform:translateX(-50%)} } - .bf1 { color:var(--accent);opacity:0.75; } - .bf0 { color:rgba(100,180,220,0.28); } @@ -308,17 +301,14 @@
- -
-
posimai-station
- -
次の更新まで 30s
+
posimai-station
+ +
次の更新まで 30s