diff --git a/docker/cuprate-ui/index.html b/docker/cuprate-ui/index.html index 879fb8e1..c9f9f634 100644 --- a/docker/cuprate-ui/index.html +++ b/docker/cuprate-ui/index.html @@ -56,6 +56,15 @@ .wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; } + /* Match the Bitcoin dashboard's app-header rhythm: identity on the + left, compact live status cards on the right. */ + .app-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } + .app-header-id { display:flex; align-items:center; gap:1rem; min-width:0; } + .app-header-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } + .info-card { background:rgba(0,0,0,.6); backdrop-filter:blur(24px); border-radius:.75rem; padding:.65rem .85rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); } + .node-mark { width:3.25rem; height:3.25rem; border-radius:.85rem; display:grid; place-items:center; background:linear-gradient(135deg,rgba(247,147,26,.35),rgba(247,147,26,.08)); border:1px solid rgba(247,147,26,.45); color:#f7931a; font-size:1.45rem; font-weight:800; } + @media (max-width:700px) { .app-header, .app-header-id, .app-header-actions { justify-content:center; } .app-header-text { text-align:center; } .app-header-actions > .info-card { flex:1 1 8rem; } } + header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; } header h1 .accent { color: #f7931a; } @@ -122,19 +131,26 @@