54 lines
12 KiB
CSS
54 lines
12 KiB
CSS
/* hal/ui/public/ops.css — 운영자 콘솔 스타일. 상태는 글자+기호로 구분(색은 보조). 760px 이하에서 메뉴가 접히고 표가 카드로 바뀐다(360px 조회·승인·중지·재시도 가능). */
|
|
:root{--bg:#f3f5f8;--fg:#1b2430;--mut:#5b6672;--line:#d9dee6;--pri:#1f4fb0;--ok:#1a7f4b;--warn:#b26a00;--bad:#b3261e;--card:#fff;--rad:10px;font-family:-apple-system,"Segoe UI","Noto Sans KR",sans-serif}
|
|
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5}a{color:var(--pri)}
|
|
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:99}
|
|
.top{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#101826;color:#fff;position:sticky;top:0;z-index:20}.top a{color:#fff}.brand{font-weight:700;text-decoration:none}.ver{font-size:12px;opacity:.9}.menu-btn{display:none;font-size:20px;background:none;border:0;color:#fff}
|
|
.top-right{margin-left:auto;display:flex;gap:12px;align-items:center}.top-right .muted{color:#c7d0dc}
|
|
.shell{display:flex;min-height:calc(100vh - 48px)}.side{width:210px;background:#fff;border-right:1px solid var(--line);padding:10px 8px}.side .nav{display:block;padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none}.side .nav.on{background:#e6edfb;color:var(--pri);font-weight:600}
|
|
.main{flex:1;padding:14px 18px;max-width:1400px;min-width:0}h1{font-size:20px;margin:4px 0 10px}h2{font-size:16px;margin:18px 0 8px}h3{font-size:15px;margin:14px 0 6px}
|
|
.alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.alert{display:block;padding:9px 12px;border-radius:8px;border:1px solid;text-decoration:none;color:var(--fg)}.alert.warning{background:#fff7e6;border-color:#f0c36d}.alert.critical{background:#fdecea;border-color:#f3a09a}.alert.info{background:#e8effc;border-color:#b9cdf2}
|
|
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:14px;margin-bottom:12px;min-width:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.card h2{margin-top:0}.comp{display:flex;flex-direction:column;gap:4px}
|
|
.kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;margin:8px 0}.kv dt{color:var(--mut)}.kv dd{margin:0;word-break:break-word}
|
|
.btn{display:inline-block;padding:7px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:13px;color:var(--fg);text-decoration:none}.btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}.btn.danger{color:var(--bad);border-color:var(--bad)}.btn.small{padding:4px 8px;font-size:12px}.btn.on{background:#e6edfb;border-color:var(--pri)}.btn:disabled{opacity:.5;cursor:not-allowed}.actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
|
|
.badge{display:inline-block;padding:1px 8px;border-radius:12px;font-size:12px;border:1px solid var(--line);background:#fff;white-space:nowrap}.badge.ok,.badge.done{border-color:var(--ok);color:var(--ok)}.badge.failed{border-color:var(--bad);color:var(--bad)}.badge.warn,.badge.stale{border-color:var(--warn);color:var(--warn)}.badge.running,.badge.waiting,.badge.info{border-color:var(--pri);color:var(--pri)}
|
|
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:10px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}th{background:#f7f9fc;font-weight:600}tr:last-child td{border-bottom:0}
|
|
.aw-state{padding:20px;text-align:center;color:var(--mut);background:#fff;border:1px dashed var(--line);border-radius:var(--rad);margin:8px 0}.aw-state.failed,.aw-state.forbidden{border-color:var(--bad);color:var(--bad)}.aw-state.stale,.aw-state.partial{border-color:var(--warn);color:var(--warn)}
|
|
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;width:100%;max-width:420px}label{display:block;font-weight:600;margin:8px 0 2px}.row label{margin:0;font-weight:400}
|
|
.steps{list-style:none;padding:0;margin:6px 0}.steps li{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}.steps .s{width:20px;text-align:center}.steps .done .s{color:var(--ok)}.steps .running .s{color:var(--pri)}.steps .failed .s{color:var(--bad)}.steps .waiting .s,.steps .needs_user .s{color:var(--warn)}
|
|
.flow{display:flex;flex-wrap:wrap;gap:4px;padding:0;list-style:none;counter-reset:f}.flow li{padding:3px 8px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--mut)}.flow li.done{border-color:var(--ok);color:var(--ok)}.flow li.now{border-color:var(--pri);color:var(--pri);font-weight:600}
|
|
.pre{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:8px;white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:320px;overflow:auto}.muted{color:var(--mut)}.err{color:var(--bad)}.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}.small{font-size:12px}
|
|
.chart{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}.chart .line{stroke:var(--pri);stroke-width:1.5}.chart .axis{stroke:var(--line)}.chart .lbl{font-size:11px;fill:var(--mut)}
|
|
.toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:#101826;color:#fff;padding:10px 16px;border-radius:8px;display:none;z-index:50;max-width:92vw}.toast.show{display:block}
|
|
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:40;padding:14px}.modal[hidden]{display:none}.modal .box{background:#fff;border-radius:12px;padding:18px;max-width:600px;width:100%;max-height:92vh;overflow:auto}.modal .box h2{margin-top:0}.once{background:#fff7e6;border:1px dashed var(--warn);padding:10px;border-radius:8px;word-break:break-all}
|
|
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px}.tabs a{padding:8px 12px;text-decoration:none;color:var(--fg);border-bottom:2px solid transparent}.tabs a.on{border-bottom-color:var(--pri);color:var(--pri);font-weight:600}
|
|
.pending{list-style:none;padding:0;display:flex;gap:14px;flex-wrap:wrap}.pending li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
|
|
body.login{display:grid;place-items:center;min-height:100vh}.login-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;width:min(420px,94vw)}
|
|
@media (max-width:760px){.menu-btn{display:block}.side{position:fixed;left:-230px;top:48px;bottom:0;transition:left .2s;z-index:30;overflow:auto}.side.open{left:0}.main{padding:10px 12px}.top-right .muted{display:none}
|
|
table.r{display:block;border:0;background:none}table.r thead{display:none}table.r tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--rad);margin-bottom:8px;padding:6px 10px}table.r td{display:flex;justify-content:space-between;gap:8px;border:0;padding:5px 0;flex-wrap:wrap}table.r td::before{content:attr(data-l);color:var(--mut);font-size:12px;min-width:70px}.kv{grid-template-columns:1fr}}
|
|
|
|
/* 0.3.0 AI 채팅룸 패널: 본문 오른쪽 고정, 너비 조절, 접기. 1100px 이하에서는 본문 아래 전체 너비. 상태는 글자+배지로 구분 */
|
|
.ai-panel{width:var(--ai-w,400px);min-width:280px;max-width:60vw;flex:0 0 auto;border-left:1px solid var(--line);background:#fff;display:flex;flex-direction:column;position:sticky;top:48px;height:calc(100vh - 48px);min-height:0}
|
|
.ai-panel.closed{display:none}.ai-resize{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2}.ai-panel{position:sticky}.ai-panel>.ai-resize{position:absolute}.ai-panel{isolation:isolate}
|
|
.ai-head{border-bottom:1px solid var(--line);padding:6px 6px 0 10px}.ai-tabs{display:flex;flex-wrap:wrap;gap:2px}
|
|
.ai-tab{border:1px solid transparent;border-bottom:0;background:none;padding:6px 10px;border-radius:8px 8px 0 0;cursor:pointer;font-size:13px;color:var(--fg);text-decoration:none}.ai-tab.on{background:#e6edfb;color:var(--pri);font-weight:600;border-color:var(--line)}.ai-tab.fixed{font-weight:600}.ai-tab.off{color:var(--mut)}.ai-tab.add{color:var(--mut)}.ai-dot{color:var(--warn)}
|
|
.ai-status{padding:4px 10px;border-bottom:1px solid var(--line);font-size:12px;min-height:22px}
|
|
.ai-log{flex:1;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:8px;min-height:0}
|
|
.ai-msg{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-size:13px}.ai-msg header{margin-bottom:4px}.ai-msg.user{background:#e8effc;border-color:#b9cdf2}.ai-msg.assistant{background:#fff}.ai-msg.tool{background:#f7f9fc}.ai-msg.system{background:#fff7e6;border-color:#f0c36d}.ai-msg.failed{border-color:var(--bad)}.ai-msg.relay{border-style:dashed}
|
|
.ai-text{white-space:pre-wrap;word-break:break-word}.ai-tool{margin:4px 0;font-size:12px}.ai-result summary{cursor:pointer;font-size:12px}.ai-result .pre{max-height:200px}
|
|
.ai-proposal{border:1px solid var(--warn);background:#fff7e6;border-radius:8px;padding:8px;margin-top:6px}.ai-proposal.executed{border-color:var(--ok);background:#eef8f1}.ai-proposal.rejected,.ai-proposal.cancelled{border-color:var(--line);background:#f7f9fc}.ai-proposal.failed{border-color:var(--bad);background:#fdecea}
|
|
.ai-compose{border-top:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:6px}.ai-compose textarea{max-width:none;resize:vertical}.ai-compose-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.ai-compose-row label{margin-right:auto;font-weight:400}
|
|
.badge.neutral{border-color:var(--line);color:var(--mut)}
|
|
@media (max-width:1100px){.shell{flex-wrap:wrap}.ai-panel{position:static;width:100%!important;max-width:none;height:60vh;border-left:0;border-top:1px solid var(--line)}.ai-resize{display:none}}
|
|
/* 0.3.2 텍스트 셸·도구 정책 */
|
|
.ai-shell-out{background:#101826;color:#e6edf3;font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:10px;border-radius:8px;min-height:220px;max-height:50vh;overflow:auto;white-space:pre-wrap;word-break:break-all}.ai-shell-head{margin:6px 0}
|
|
.ai-tool-group{margin:6px 0}.ai-tool-list{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0}.ai-tool-list label{font-weight:400;margin:0}
|
|
/* 0.3.9 단말 */
|
|
.ai-term{background:#101826;color:#e6edf3;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.25;padding:8px;border-radius:8px;min-height:240px;max-height:55vh;overflow:auto;white-space:pre;outline:none;margin:0}.ai-term:focus{box-shadow:0 0 0 2px var(--pri)}.term-cur{background:#e6edf3;color:#101826}.ai-keys{gap:4px}.ai-model-pick{width:auto;max-width:220px;padding:3px 6px;font-size:12px}
|
|
/* 0.3.10 셸 복사·주소 */
|
|
.ai-term{user-select:text;cursor:text}.ai-urls{list-style:none;padding:0;margin:4px 0}.ai-urls li{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:3px 0}.ai-url{word-break:break-all;background:#f7f9fc;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12px}.ai-shell-tools{margin:6px 0}.ai-shell-textview{width:100%;max-width:none;font-family:ui-monospace,Menlo,monospace;font-size:12px;margin-top:6px}
|
|
/* 0.3.17 작업 진행 창(dock)·서버 선택 목록·릴리스 카드 */
|
|
.ops-dock{margin-top:18px;border:1px solid var(--line);border-radius:var(--rad);background:#fff}.ops-dock-head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.ops-dock-head .muted{margin-left:auto}.ops-dock-body{padding:8px 10px;max-height:260px;overflow:auto}.ops-dock.closed .ops-dock-body{display:none}
|
|
.dock-job{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:5px 0;border-bottom:1px solid var(--line)}.dock-job:last-child{border-bottom:0}.dock-bar{display:inline-block;width:120px;height:8px;background:#eef1f5;border-radius:4px;overflow:hidden;vertical-align:middle}.dock-bar-in{display:block;height:100%;background:var(--pri)}
|
|
.choice-list{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px}.choice{display:flex;gap:8px;align-items:center;font-weight:400;margin:0;padding:4px 6px;border-radius:6px}.choice:hover{background:#f7f9fc}.choice.off{opacity:.55}
|
|
.rel-cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.rel-card h3{margin-top:0}.rel-history{margin:12px 0}
|