diff --git a/static/hub.css b/static/hub.css index 989d100..d7b3a2f 100644 --- a/static/hub.css +++ b/static/hub.css @@ -48,42 +48,6 @@ body > * { position: relative; z-index: 1; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: #7dd3fc; } -.topbar { - position: relative; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; - gap: 0; - min-height: 0; - padding: 14px 0 12px; - border-bottom: 1px solid var(--line); - background: rgba(8, 14, 26, 0.75); - backdrop-filter: blur(12px); -} -.topbar-shell { - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 0 16px; -} -body.page-dashboard .topbar-shell { - max-width: 1800px; - padding: 0 clamp(16px, 3vw, 48px); -} -body.page-instances .topbar-shell { - max-width: none; - padding: 0 clamp(12px, 2vw, 28px); -} -@media (min-aspect-ratio: 21/9) { - body.page-instances .topbar-shell { - max-width: 1800px; - } -} -body.page-desk .topbar-shell { - max-width: none; - padding: 0 12px; -} .topbar-brand { display: block; margin: 0 auto 12px; @@ -104,7 +68,7 @@ body.page-desk .topbar-shell { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px 12px; - margin-bottom: 0; + margin: 0 0 12px; } .topbar-nav { grid-column: 2; @@ -199,9 +163,10 @@ body.page-desk .topbar-shell { .nav-spot--flat .nav-spot-chg, .nav-spot--flat .nav-spot-pct { color: #9aa3bf; } .topbar-logout { - position: absolute; + position: fixed; top: 16px; right: 22px; + z-index: 20; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; @@ -221,17 +186,10 @@ body.page-desk .topbar-shell { } } @media (max-width: 720px) { - .topbar { - min-height: 0; - padding: 8px 0 12px; - } .topbar-brand { margin-bottom: 12px; font-size: 1rem; } - .topbar-shell { - padding: 0 10px; - } .topbar-nav a { padding: 8px 12px; font-size: 0.78rem; @@ -242,13 +200,25 @@ body.page-desk .topbar-shell { } } -.main { padding: 16px; max-width: 1200px; margin: 0 auto; } -/* 总览保持 1800;工作台外壳全屏(内嵌客户端带鱼屏自锁 1800) */ -body.page-dashboard .main { - max-width: 1800px; +.main { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 14px clamp(6px, 1vw, 14px) 16px; +} +/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */ +body.page-dashboard .main, +body.page-instances .main { + max-width: none; width: 100%; margin: 0 auto; - padding: 12px clamp(16px, 3vw, 48px) 20px; + padding: 14px clamp(6px, 1vw, 14px) 16px; +} +@media (min-aspect-ratio: 21/9) { + body.page-dashboard .main, + body.page-instances .main { + max-width: min(1800px, calc(100vw - 24px)); + } } body.page-desk .main { max-width: none; @@ -256,18 +226,6 @@ body.page-desk .main { margin: 0; padding: 10px 12px 14px; } -/* 实例页主区:随屏宽;带鱼屏上限 1800 */ -body.page-instances .main { - max-width: none; - width: 100%; - margin: 0 auto; - padding: 12px clamp(12px, 2vw, 28px) 20px; -} -@media (min-aspect-ratio: 21/9) { - body.page-instances .main { - max-width: 1800px; - } -} body.page-login { min-height: 100vh; } @@ -1438,11 +1396,6 @@ input.readonly { .desk-side-toggle--bar { display: none !important; } } @media (min-width: 2000px) { - body.page-dashboard .main { - max-width: 1800px; - padding-left: clamp(32px, 6vw, 96px); - padding-right: clamp(32px, 6vw, 96px); - } body.page-desk .main { max-width: none; padding-left: 12px; diff --git a/templates/base.html b/templates/base.html index 895a85c..54818d4 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,46 +4,44 @@