diff --git a/web/static/app.css b/web/static/app.css index c81ea7f..9a5da8d 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -152,9 +152,74 @@ pre { overflow: auto; margin: 14px 0 0; padding: 14px; border-radius: 14px; back .op-log { min-height: 420px; max-height: 620px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; } .live-dot::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(61,255,157,.8); } +.console-body { + height: 100vh; + min-height: 100vh; + overflow: hidden; + background: #03060b; +} + +.console-window { + display: grid; + grid-template-rows: 46px 1fr; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.console-topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 7px 10px; + background: rgba(7, 11, 18, .96); + border-bottom: 1px solid var(--line); + box-shadow: 0 10px 28px rgba(0,0,0,.28); + z-index: 2; +} + +.console-title { + display: flex; + align-items: baseline; + gap: 10px; + min-width: 0; +} +.console-title strong { font-size: 15px; white-space: nowrap; } +.console-title span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.console-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } + +.console-main { + width: 100%; + height: calc(100vh - 46px); + min-height: 0; + overflow: hidden; + background: #000; +} + +.console-frame-full { + display: block; + width: 100%; + height: 100%; + border: 0; + background: #000; +} + +.console-error-wrap { + display: grid; + place-items: center; + padding: 18px; + background: radial-gradient(circle at center, rgba(55,214,255,.08), transparent 46%), #03060b; +} +.console-error-card { width: min(760px, calc(100vw - 32px)); } + @media (max-width: 900px) { .topbar { align-items: flex-start; flex-direction: column; } .stats, .two, .form-row, .operation-summary, .meta-grid { grid-template-columns: 1fr; } .shell { width: min(100% - 20px, 1440px); padding-top: 10px; } table { display: block; overflow-x: auto; } + .console-window { grid-template-rows: 54px 1fr; } + .console-main { height: calc(100vh - 54px); } + .console-title { flex-direction: column; align-items: flex-start; gap: 1px; } + .console-actions .status { display: none; } }