AgentRun Codex
80 lines
6.9 KiB
CSS
80 lines
6.9 KiB
CSS
:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; --line:#ccd5d3; --bg:#eef2f1; --panel:#fff; --text:#17201f; --muted:#60706d; --accent:#176b5c; --danger:#a53d38; }
|
|
* { box-sizing:border-box; }
|
|
html, body, #monitor-workbench-root { width:100%; height:100%; margin:0; overflow:hidden; }
|
|
body { background:var(--bg); color:var(--text); }
|
|
button, input, select { font:inherit; }
|
|
button { color:inherit; }
|
|
.monitor-workbench { display:grid; grid-template-rows:44px 36px minmax(0,1fr) 24px; width:100%; height:100dvh; overflow:hidden; }
|
|
.app-bar, .context-bar, .status-bar { display:flex; align-items:center; min-width:0; border-bottom:1px solid var(--line); background:#f8faf9; }
|
|
.app-bar { gap:8px; padding:0 12px; font-size:13px; }
|
|
.app-bar strong { font-size:16px; }
|
|
.app-stat { color:var(--muted); }
|
|
.icon-button { margin-left:auto; }
|
|
.health-dot { width:8px; height:8px; border-radius:50%; background:#9aa6a3; }
|
|
.health-dot[data-state="healthy"] { background:#278260; }
|
|
.health-dot[data-state="degraded"] { background:#d18a24; }
|
|
.context-bar { position:relative; gap:8px; padding:3px 8px; overflow:hidden; }
|
|
.desktop-scope { display:flex; gap:8px; }
|
|
.desktop-time { display:flex; gap:8px; }
|
|
.compact-scope-button, .compact-scope-panel, .compact-time-button, .compact-time-panel { display:none; }
|
|
.context-bar label { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:11px; }
|
|
.context-bar input, .context-bar select { width:132px; height:28px; border:1px solid var(--line); background:#fff; padding:0 7px; }
|
|
.result-count { margin-left:auto; white-space:nowrap; color:var(--muted); font-size:12px; }
|
|
.workspace { display:grid; grid-template-columns:360px minmax(560px,1fr); min-width:0; min-height:0; overflow:hidden; }
|
|
.workspace.detail-open { grid-template-columns:360px minmax(560px,1fr) 440px; }
|
|
.workspace.left-collapsed { grid-template-columns:40px minmax(560px,1fr); }
|
|
.workspace.left-collapsed.detail-open { grid-template-columns:40px minmax(560px,1fr) 440px; }
|
|
.run-pane, .main-pane, .detail-pane { position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--panel); }
|
|
.run-pane { border-right:1px solid var(--line); }
|
|
.main-pane { display:flex; flex-direction:column; }
|
|
.detail-pane { border-left:1px solid var(--line); }
|
|
.pane-title, .detail-pane>header { display:flex; align-items:center; height:36px; padding:0 10px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; text-transform:uppercase; }
|
|
.pane-toggle { position:absolute; z-index:2; top:5px; right:5px; width:26px; height:26px; border:1px solid var(--line); background:#fff; }
|
|
.left-collapsed .pane-title, .left-collapsed .run-list { display:none; }
|
|
.run-list, .main-scroll, .detail-scroll { height:calc(100% - 36px); overflow:auto; overscroll-behavior:contain; }
|
|
.run-row { display:grid; grid-template-columns:110px minmax(0,1fr) auto; width:100%; min-height:52px; gap:2px 8px; border:0; border-bottom:1px solid #e5ebe9; background:#fff; padding:7px 10px; text-align:left; }
|
|
.run-row:hover, .run-row.active { background:#e8f2ef; }
|
|
.run-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.run-row small { grid-column:2/4; color:var(--muted); }
|
|
.run-header { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:10px 14px; border-bottom:1px solid var(--line); }
|
|
.run-header>div { display:grid; gap:5px; min-width:0; }
|
|
.run-header span { color:var(--muted); font-size:12px; }
|
|
.run-header nav { display:flex; gap:2px; }
|
|
.run-header button, .detail-pane button, .state-layer button, .icon-button { border:1px solid var(--line); background:#fff; min-height:28px; padding:0 10px; }
|
|
.run-header button.active { border-color:var(--accent); color:var(--accent); }
|
|
.main-scroll { height:calc(100% - 72px); padding:8px; }
|
|
.data-row { display:grid; grid-template-columns:minmax(120px,220px) minmax(0,1fr); width:100%; gap:12px; min-height:42px; align-items:center; border:0; border-bottom:1px solid #e5ebe9; background:#fff; padding:7px 9px; text-align:left; }
|
|
.data-row:hover { background:#f3f7f6; }
|
|
.data-row code { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
|
|
.semantic-row { display:grid; grid-template-columns:150px 130px 90px minmax(0,1fr); width:100%; min-height:42px; gap:10px; align-items:center; border:0; border-bottom:1px solid #e5ebe9; background:#fff; padding:7px 9px; text-align:left; }
|
|
.semantic-row:hover { background:#f3f7f6; }
|
|
.semantic-row time, .semantic-row .severity { color:var(--muted); font-size:12px; }
|
|
.semantic-row .summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.artifact-section h2 { margin:18px 9px 6px; font-size:13px; }
|
|
.detail-pane>header { justify-content:space-between; }
|
|
.detail-scroll { padding:12px; }
|
|
.detail-scroll dl { display:grid; grid-template-columns:92px minmax(0,1fr); gap:0; margin:0 0 16px; }
|
|
.detail-scroll dt, .detail-scroll dd { min-width:0; margin:0; border-bottom:1px solid #e5ebe9; padding:8px 4px; overflow-wrap:anywhere; }
|
|
.detail-scroll dt { color:var(--muted); }
|
|
.detail-scroll details summary { cursor:pointer; color:var(--muted); }
|
|
pre { max-width:100%; overflow:auto; border:1px solid var(--line); background:#f6f8f7; padding:10px; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
|
|
.state-layer { display:grid; place-content:center; min-height:100%; gap:10px; color:var(--muted); text-align:center; }
|
|
.state-layer.error { color:var(--danger); }
|
|
.status-bar { justify-content:space-between; padding:0 8px; border-top:1px solid var(--line); border-bottom:0; color:var(--muted); font-size:11px; }
|
|
@media (max-width:1120px) {
|
|
.monitor-workbench { grid-template-rows:40px 34px minmax(0,1fr) 20px; }
|
|
.workspace, .workspace.detail-open { grid-template-columns:280px minmax(0,1fr); }
|
|
.workspace.left-collapsed, .workspace.left-collapsed.detail-open { grid-template-columns:36px minmax(0,1fr); }
|
|
.detail-pane { position:absolute; z-index:5; top:0; right:0; bottom:0; width:min(420px, calc(100vw - 40px)); box-shadow:-10px 0 24px rgba(23,32,31,.14); }
|
|
.desktop-scope { display:none; }
|
|
.desktop-time { display:none; }
|
|
.compact-scope-button { display:block; height:28px; border:1px solid var(--line); background:#fff; white-space:nowrap; }
|
|
.compact-scope-panel { position:fixed; z-index:8; top:74px; left:145px; display:grid; width:260px; gap:8px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 22px rgba(23,32,31,.16); padding:10px; }
|
|
.compact-time-button { display:block; height:28px; border:1px solid var(--line); background:#fff; white-space:nowrap; }
|
|
.compact-time-panel { position:fixed; z-index:8; top:74px; left:300px; display:grid; width:300px; gap:8px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 22px rgba(23,32,31,.16); padding:10px; }
|
|
.context-bar input, .context-bar select { width:118px; }
|
|
.run-header { min-height:64px; padding:7px 10px; }
|
|
.main-scroll { height:calc(100% - 64px); }
|
|
.semantic-row { grid-template-columns:120px 100px 70px minmax(0,1fr); }
|
|
}
|