373 lines
27 KiB
CSS
373 lines
27 KiB
CSS
/* ============ Agentic Coding Panel — dark, charcoal-neutral ============ */
|
|
:root {
|
|
--bg-0:#16171a; /* editor surface (deepest) */
|
|
--bg-1:#1a1c1f; /* terminals */
|
|
--bg-2:#1f2226; /* sidebars */
|
|
--bg-3:#23262b; /* headers / tabs strip */
|
|
--hover:#2a2e34;
|
|
--active:#313742;
|
|
--sel:#2b323d;
|
|
--border:#2a2d33;
|
|
--border-2:#34383f;
|
|
--fg-0:#e6e8ea;
|
|
--fg-1:#b4bac2;
|
|
--fg-2:#838a94;
|
|
--fg-3:#5d636c;
|
|
--accent:#4d8dff;
|
|
--accent-soft:rgba(77,141,255,0.16);
|
|
--accent-line:rgba(77,141,255,0.55);
|
|
--add:#5cbd6b;
|
|
--del:#e0696a;
|
|
--mod:#d8a85c;
|
|
--ren:#5aa6d6;
|
|
--add-bg:rgba(92,189,107,0.10);
|
|
--del-bg:rgba(224,105,106,0.10);
|
|
/* syntax */
|
|
--t-key:#c98bdb;
|
|
--t-str:#94c980;
|
|
--t-num:#e0a06a;
|
|
--t-fn:#6aa6f0;
|
|
--t-com:#5f656e;
|
|
--t-tag:#7fc6a0;
|
|
--t-attr:#d8b15c;
|
|
--t-punc:#9aa0a8;
|
|
--t-var:#e6e8ea;
|
|
--t-const:#e08b6a;
|
|
--t-prop:#6ec0c0;
|
|
--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
}
|
|
|
|
* { box-sizing:border-box; }
|
|
html,body { margin:0; height:100%; }
|
|
body {
|
|
background:var(--bg-0); color:var(--fg-0);
|
|
font-family:var(--ui); font-size:13px;
|
|
overflow:hidden; -webkit-font-smoothing:antialiased;
|
|
}
|
|
#root { height:100vh; }
|
|
::selection { background:rgba(77,141,255,0.32); }
|
|
|
|
/* scrollbars */
|
|
::-webkit-scrollbar { width:11px; height:11px; }
|
|
::-webkit-scrollbar-thumb { background:#393e46; border-radius:6px; border:3px solid transparent; background-clip:content-box; }
|
|
::-webkit-scrollbar-thumb:hover { background:#4a505a; background-clip:content-box; }
|
|
::-webkit-scrollbar-corner { background:transparent; }
|
|
|
|
/* ============ shell ============ */
|
|
.app { display:flex; flex-direction:column; height:100vh; }
|
|
|
|
.titlebar {
|
|
height:36px; flex:0 0 36px; display:flex; align-items:center;
|
|
background:var(--bg-3); border-bottom:1px solid var(--border);
|
|
padding:0 12px; gap:14px; user-select:none;
|
|
}
|
|
.traffic { display:flex; gap:8px; }
|
|
.traffic i { width:12px; height:12px; border-radius:50%; display:block; }
|
|
.traffic .r{background:#e0696a;} .traffic .y{background:#d8a85c;} .traffic .g{background:#5cbd6b;}
|
|
.tb-title { font-size:12px; color:var(--fg-1); display:flex; align-items:center; gap:7px; }
|
|
.tb-title b { color:var(--fg-0); font-weight:600; }
|
|
.tb-crumb { color:var(--fg-3); font-size:11.5px; font-family:var(--mono); }
|
|
.tb-crumb .seg{color:var(--fg-2);}
|
|
.tb-spacer { flex:1; }
|
|
.tb-actions { display:flex; gap:6px; align-items:center; }
|
|
.tb-btn {
|
|
font-size:11.5px; color:var(--fg-2); background:transparent; border:1px solid transparent;
|
|
border-radius:6px; padding:4px 9px; cursor:pointer; display:flex; align-items:center; gap:6px;
|
|
}
|
|
.tb-btn:hover { background:var(--hover); color:var(--fg-0); }
|
|
.tb-btn kbd { font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 5px; }
|
|
|
|
.workbench { flex:1; display:flex; min-height:0; }
|
|
|
|
.col { display:flex; flex-direction:column; height:100%; min-width:0; background:var(--bg-2); }
|
|
.col.editor-col { flex:1; background:var(--bg-0); min-width:240px; }
|
|
.col.right-col { background:var(--bg-1); }
|
|
|
|
.splitter { flex:0 0 5px; cursor:col-resize; background:transparent; position:relative; z-index:5; }
|
|
.splitter::after { content:""; position:absolute; inset:0 2px; background:var(--border); transition:background .12s; }
|
|
.splitter:hover::after, .splitter.drag::after { background:var(--accent-line); }
|
|
.splitter.h { cursor:row-resize; flex:0 0 5px; width:100%; }
|
|
|
|
/* panel header */
|
|
.phead {
|
|
height:30px; flex:0 0 30px; display:flex; align-items:center; gap:8px;
|
|
padding:0 10px 0 12px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
|
|
color:var(--fg-2); border-bottom:1px solid var(--border); user-select:none;
|
|
}
|
|
.phead .ct { margin-left:auto; font-size:10px; color:var(--fg-3); letter-spacing:.02em; text-transform:none;
|
|
background:var(--bg-3); border:1px solid var(--border); border-radius:9px; padding:0 7px; line-height:16px; }
|
|
.phead .ico-btn { color:var(--fg-3); cursor:pointer; padding:2px; border-radius:4px; display:flex; }
|
|
.phead .ico-btn:hover { background:var(--hover); color:var(--fg-1); }
|
|
|
|
/* ============ git panel ============ */
|
|
.commit-box { padding:9px 10px; border-bottom:1px solid var(--border); display:flex; gap:7px; align-items:flex-start; }
|
|
.commit-input { flex:1; min-width:0; resize:none; background:var(--bg-0); border:1px solid var(--border-2); border-radius:7px; color:var(--fg-0); font-family:var(--ui); font-size:12px; line-height:16px; padding:7px 9px; outline:none; min-height:32px; }
|
|
.commit-input:focus { border-color:var(--accent-line); }
|
|
.commit-input::placeholder { color:var(--fg-3); }
|
|
.commit-btn { flex:0 0 auto; display:flex; align-items:center; gap:6px; background:var(--accent); color:#0c1320; border:0; border-radius:7px; font:inherit; font-size:12px; font-weight:600; padding:0 11px; height:32px; cursor:pointer; }
|
|
.commit-btn:hover:not(:disabled) { background:#5d97ff; }
|
|
.commit-btn:disabled { background:var(--bg-3); color:var(--fg-3); cursor:not-allowed; }
|
|
.git-body { overflow:auto; flex:1; padding:4px 0 10px; }
|
|
.git-group { padding:8px 12px 3px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:6px; }
|
|
.git-group .gc { color:var(--fg-3); }
|
|
.git-group .grp-act { margin-left:auto; display:flex; opacity:0; background:transparent; border:0; color:var(--fg-2); padding:2px; border-radius:4px; cursor:pointer; }
|
|
.git-group:hover .grp-act { opacity:1; }
|
|
.git-group .grp-act:hover { background:var(--hover); color:var(--fg-0); }
|
|
.git-empty { display:flex; flex-direction:column; align-items:center; gap:9px; padding:30px 16px; color:var(--fg-3); font-size:12px; text-align:center; }
|
|
.git-empty svg { color:var(--add); opacity:.7; }
|
|
.git-none { padding:5px 14px 9px; font-size:11.5px; color:var(--fg-3); }
|
|
.git-none .key { font-family:var(--mono); font-size:11px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; }
|
|
.git-divider { height:1px; background:var(--border); margin:8px 12px 2px; }
|
|
.git-row {
|
|
display:flex; align-items:center; gap:8px; padding:3px 12px 3px 14px; cursor:pointer; position:relative;
|
|
}
|
|
.git-row:hover { background:var(--hover); }
|
|
.git-row.active { background:var(--sel); }
|
|
.git-row.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
|
|
.git-stat { width:13px; text-align:center; font-family:var(--mono); font-size:11px; font-weight:600; flex:0 0 13px; }
|
|
.git-stat.M{color:var(--mod);} .git-stat.A{color:var(--add);} .git-stat.D{color:var(--del);} .git-stat.R{color:var(--ren);} .git-stat.U{color:var(--add);}
|
|
.git-name { font-size:12.5px; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.git-row.active .git-name { color:var(--fg-0); }
|
|
.git-name.del { text-decoration:line-through; color:var(--fg-3); }
|
|
.git-dir { color:var(--fg-3); font-size:11px; margin-left:auto; padding-left:8px; white-space:nowrap; max-width:42%; overflow:hidden; text-overflow:ellipsis; direction:rtl; }
|
|
.git-act { flex:0 0 auto; display:none; align-items:center; justify-content:center; width:20px; height:20px; padding:0; background:transparent; border:0; border-radius:5px; color:var(--fg-2); cursor:pointer; margin-left:4px; }
|
|
.git-row:hover .git-act { display:flex; }
|
|
.git-act:hover { background:var(--active); color:var(--fg-0); }
|
|
.git-delta { font-family:var(--mono); font-size:10.5px; display:flex; gap:6px; flex:0 0 auto; }
|
|
.git-delta .a{color:var(--add);} .git-delta .d{color:var(--del);}
|
|
.git-foot { border-top:1px solid var(--border); padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--fg-2); }
|
|
.branch-chip { display:flex; align-items:center; gap:6px; color:var(--fg-1); }
|
|
.branch-chip b { font-weight:600; color:var(--fg-0); }
|
|
|
|
/* ============ file tree ============ */
|
|
.tree-body { overflow:auto; flex:1; padding:4px 0 14px; }
|
|
.tree-row { display:flex; align-items:center; gap:6px; padding:2px 10px 2px 0; cursor:pointer; white-space:nowrap; position:relative; height:23px; }
|
|
.tree-row:hover { background:var(--hover); }
|
|
.tree-row.active { background:var(--sel); }
|
|
.tree-row.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
|
|
.tw { display:inline-flex; align-items:center; justify-content:center; width:14px; flex:0 0 14px; color:var(--fg-3); font-size:10px; }
|
|
.tree-label { font-size:12.5px; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; }
|
|
.tree-row.active .tree-label { color:var(--fg-0); }
|
|
.tree-row.folder .tree-label { color:var(--fg-1); }
|
|
.tree-badge { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; padding-left:8px; }
|
|
.tree-badge.M{color:var(--mod);} .tree-badge.A{color:var(--add);} .tree-badge.D{color:var(--del);}
|
|
|
|
/* file type monogram icon */
|
|
.ficon { width:15px; height:15px; flex:0 0 15px; border-radius:3.5px; display:inline-flex; align-items:center; justify-content:center;
|
|
font-family:var(--mono); font-size:7.5px; font-weight:700; color:#11131600; position:relative; }
|
|
.ficon span { color:#0c0d0f; font-size:7.5px; line-height:1; letter-spacing:-.3px; }
|
|
.folder-ic { width:15px; height:15px; flex:0 0 15px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-2); }
|
|
|
|
/* ============ editor ============ */
|
|
.tabs { height:35px; flex:0 0 35px; display:flex; align-items:stretch; background:var(--bg-3); border-bottom:1px solid var(--border); overflow-x:auto; overflow-y:hidden; }
|
|
.tabs::-webkit-scrollbar { height:0; }
|
|
.tab {
|
|
display:flex; align-items:center; gap:7px; padding:0 9px 0 13px; cursor:pointer;
|
|
border-right:1px solid var(--border); color:var(--fg-2); font-size:12.5px; white-space:nowrap;
|
|
background:var(--bg-3); position:relative; max-width:230px;
|
|
}
|
|
.tab:hover { background:#272b31; }
|
|
.tab.active { background:var(--bg-0); color:var(--fg-0); }
|
|
.tab.active::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); }
|
|
.tab .tname { overflow:hidden; text-overflow:ellipsis; }
|
|
.tab.dirty .tname::after { content:" ●"; color:var(--mod); font-size:10px; }
|
|
.tab .tclose { width:17px; height:17px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--fg-3); flex:0 0 17px; }
|
|
.tab .tclose:hover { background:var(--active); color:var(--fg-0); }
|
|
.tab .tdot { display:none; width:7px; height:7px; border-radius:50%; background:var(--fg-2); }
|
|
.tab.dirtyclose .tclose { display:none; }
|
|
.tab.dirtyclose:hover .tclose { display:flex; }
|
|
.tab.dirtyclose:hover .tdot { display:none; }
|
|
.tab.dirtyclose .tdot { display:block; }
|
|
.tab-mode { margin-left:6px; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; line-height:14px; }
|
|
|
|
.editor-wrap { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
|
|
.editor { flex:1; overflow:auto; font-family:var(--mono); font-size:13px; line-height:20px; padding:6px 0 40px; }
|
|
.ln-row { display:flex; align-items:flex-start; min-height:20px; }
|
|
.ln-row.cursor { background:rgba(255,255,255,0.035); }
|
|
.ln-row.add { background:var(--add-bg); }
|
|
.ln-row.del { background:var(--del-bg); }
|
|
.ln-row.selrange { background:var(--accent-soft); }
|
|
.ln-gutter { flex:0 0 54px; width:54px; text-align:right; padding-right:14px; color:var(--fg-3); user-select:none; cursor:pointer; font-size:12px; }
|
|
.ln-row.cursor .ln-gutter { color:var(--fg-1); }
|
|
.ln-gutter:hover { color:var(--fg-1); }
|
|
.ln-sign { flex:0 0 14px; width:14px; text-align:center; user-select:none; color:var(--fg-3); }
|
|
.ln-row.add .ln-sign { color:var(--add); }
|
|
.ln-row.del .ln-sign { color:var(--del); }
|
|
.ln-code { flex:1; white-space:pre; padding:0 16px 0 6px; min-width:0; }
|
|
.editor.diff .ln-code { padding-left:6px; }
|
|
.empty-ed { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--fg-3); gap:14px; }
|
|
.empty-ed .big { font-size:13px; }
|
|
.empty-ed kbd { font-family:var(--mono); font-size:11px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:5px; padding:2px 7px; }
|
|
.empty-ed .klist { display:flex; flex-direction:column; gap:9px; font-size:12px; }
|
|
.empty-ed .klist div { display:flex; gap:10px; align-items:center; justify-content:space-between; min-width:230px; }
|
|
|
|
.diff-bar { height:26px; flex:0 0 26px; display:flex; align-items:center; gap:12px; padding:0 14px; background:var(--bg-3); border-bottom:1px solid var(--border); font-size:11px; color:var(--fg-2); }
|
|
.diff-bar .a{color:var(--add);font-family:var(--mono);} .diff-bar .d{color:var(--del);font-family:var(--mono);}
|
|
.diff-bar .toggle { margin-left:auto; display:flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden; }
|
|
.diff-bar .toggle button { background:transparent; border:0; color:var(--fg-2); font:inherit; font-size:11px; padding:2px 10px; cursor:pointer; }
|
|
.diff-bar .toggle button.on { background:var(--accent-soft); color:var(--fg-0); }
|
|
|
|
/* four-segment view control */
|
|
.diff-bar .seg { margin-left:auto; display:flex; border:1px solid var(--border-2); border-radius:7px; overflow:hidden; }
|
|
.diff-bar .seg button { background:transparent; border:0; border-right:1px solid var(--border-2); color:var(--fg-2); font:inherit; font-size:11px; padding:3px 12px; cursor:pointer; display:flex; align-items:center; gap:6px; }
|
|
.diff-bar .seg button:last-child { border-right:0; }
|
|
.diff-bar .seg button:hover { color:var(--fg-0); background:var(--hover); }
|
|
.diff-bar .seg button.on { background:var(--accent-soft); color:var(--fg-0); }
|
|
.diff-bar .seg .split-btn svg { opacity:.85; }
|
|
|
|
/* gutter change bars (Original / Updated / Split) */
|
|
.ln-row.bar-del { box-shadow:inset 2px 0 0 var(--del); }
|
|
.ln-row.bar-add { box-shadow:inset 2px 0 0 var(--add); }
|
|
.ln-row.empty { background:repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 7px, transparent 7px 14px); }
|
|
|
|
/* full-screen split */
|
|
.split-overlay { position:fixed; inset:0; z-index:60; background:var(--bg-0); display:flex; flex-direction:column; animation:tin .12s ease-out; }
|
|
.split-head { height:42px; flex:0 0 42px; display:flex; align-items:center; gap:11px; padding:0 16px; background:var(--bg-3); border-bottom:1px solid var(--border); }
|
|
.split-head .sh-name { font-family:var(--mono); font-size:13px; color:var(--fg-0); }
|
|
.split-head .git-stat { font-size:11px; }
|
|
.split-exit { margin-left:auto; display:flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--border-2); border-radius:7px; color:var(--fg-1); font:inherit; font-size:12px; padding:5px 11px; cursor:pointer; }
|
|
.split-exit:hover { background:var(--hover); color:var(--fg-0); }
|
|
.split-exit kbd { font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 5px; }
|
|
.split-body { flex:1; display:flex; min-height:0; }
|
|
.split-pane { flex:1; min-width:0; display:flex; flex-direction:column; }
|
|
.split-pane.left { border-right:1px solid var(--border-2); }
|
|
.split-label { height:27px; flex:0 0 27px; display:flex; align-items:center; gap:9px; padding:0 16px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-2); background:var(--bg-2); border-bottom:1px solid var(--border); }
|
|
.split-label span { text-transform:none; letter-spacing:0; color:var(--fg-3); font-family:var(--mono); font-size:10.5px; }
|
|
|
|
/* syntax token colors */
|
|
.ln-code .token.keyword,.ln-code .token.rule,.ln-code .token.atrule,.ln-code .token.important{color:var(--t-key);}
|
|
.ln-code .token.string,.ln-code .token.attr-value,.ln-code .token.char,.ln-code .token.regex{color:var(--t-str);}
|
|
.ln-code .token.number,.ln-code .token.unit{color:var(--t-num);}
|
|
.ln-code .token.function,.ln-code .token.method{color:var(--t-fn);}
|
|
.ln-code .token.comment,.ln-code .token.prolog,.ln-code .token.doctype,.ln-code .token.cdata{color:var(--t-com);font-style:italic;}
|
|
.ln-code .token.tag{color:var(--t-tag);}
|
|
.ln-code .token.attr-name{color:var(--t-attr);}
|
|
.ln-code .token.punctuation{color:var(--t-punc);}
|
|
.ln-code .token.operator{color:var(--t-punc);}
|
|
.ln-code .token.variable,.ln-code .token.symbol{color:var(--t-var);}
|
|
.ln-code .token.constant,.ln-code .token.boolean,.ln-code .token.builtin{color:var(--t-const);}
|
|
.ln-code .token.property,.ln-code .token.property-access{color:var(--t-prop);}
|
|
.ln-code .token.class-name,.ln-code .token.maybe-class-name{color:var(--t-attr);}
|
|
.ln-code .token.parameter{color:var(--fg-0);}
|
|
.ln-code .token.namespace{color:var(--fg-2);}
|
|
.ln-code .token.selector{color:var(--t-tag);}
|
|
.ln-code .token.entity,.ln-code .token.url{color:var(--t-prop);}
|
|
.ln-code .token.deleted{color:var(--del);} .ln-code .token.inserted{color:var(--add);}
|
|
|
|
/* ============ terminals (right column) ============ */
|
|
.term-pane { display:flex; flex-direction:column; min-height:0; background:var(--bg-1); }
|
|
.term-head { height:28px; flex:0 0 28px; display:flex; align-items:center; gap:8px; padding:0 10px; background:var(--bg-3); border-bottom:1px solid var(--border); font-size:11px; color:var(--fg-2); user-select:none; }
|
|
.term-head .dot { width:7px; height:7px; border-radius:50%; background:var(--fg-3); }
|
|
.term-head .dot.live { background:var(--add); box-shadow:0 0 0 0 rgba(92,189,107,.5); animation:pulse 2.2s infinite; }
|
|
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(92,189,107,.45);} 70%{box-shadow:0 0 0 5px rgba(92,189,107,0);} 100%{box-shadow:0 0 0 0 rgba(92,189,107,0);} }
|
|
.term-head .lbl { color:var(--fg-1); font-family:var(--mono); }
|
|
.term-head .tag { margin-left:auto; font-size:10px; color:var(--fg-3); font-family:var(--mono); }
|
|
.term-body { flex:1; overflow:auto; padding:8px 12px 12px; font-family:var(--mono); font-size:12.5px; line-height:18px; cursor:text; }
|
|
.tline { white-space:pre-wrap; word-break:break-word; }
|
|
.tline.dim{color:var(--fg-3);} .tline.acc{color:var(--accent);} .tline.ok{color:var(--add);} .tline.warn{color:var(--mod);} .tline.err{color:var(--del);}
|
|
.tline .pfx { color:var(--accent); }
|
|
.tline .ag { color:#c98bdb; }
|
|
.tline .tool { color:var(--mod); }
|
|
.tline .fp { color:var(--t-prop); }
|
|
.term-card { border:1px solid var(--border-2); border-radius:7px; padding:7px 10px; margin:5px 0; background:rgba(255,255,255,0.02); }
|
|
.term-card .ch { color:var(--fg-2); font-size:11px; margin-bottom:4px; display:flex; gap:7px; align-items:center; min-width:0; }
|
|
.term-card .ch span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.term-card .add,.term-card .del { white-space:pre-wrap; word-break:break-word; line-height:17px; }
|
|
.term-card .add{color:var(--add);} .term-card .del{color:var(--del);}
|
|
.term-input { display:flex; align-items:center; gap:8px; }
|
|
.term-input .ip { color:var(--accent); }
|
|
.term-input .ip.ag { color:#c98bdb; }
|
|
.term-input input { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-family:var(--mono); font-size:12.5px; caret-color:var(--accent); }
|
|
.cursor-blink { display:inline-block; width:7px; height:14px; background:var(--accent); margin-left:1px; animation:blink 1.1s step-end infinite; vertical-align:-2px; }
|
|
@keyframes blink { 50%{opacity:0;} }
|
|
|
|
/* ============ overlays ============ */
|
|
.scrim { position:fixed; inset:0; background:rgba(8,9,11,0.5); z-index:50; display:flex; justify-content:center; align-items:flex-start; padding-top:90px; backdrop-filter:blur(1.5px); }
|
|
.palette { width:620px; max-width:92vw; background:#212429; border:1px solid var(--border-2); border-radius:11px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden; }
|
|
.palette .pi { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--border); }
|
|
.palette .pi input { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-size:15px; font-family:var(--ui); }
|
|
.palette .pi .mode-chip { font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:5px; padding:2px 7px; font-family:var(--mono); }
|
|
.palette .results { max-height:380px; overflow:auto; padding:6px; }
|
|
.pres { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; cursor:pointer; }
|
|
.pres.sel { background:var(--accent-soft); }
|
|
.pres .pn { font-size:13px; color:var(--fg-0); }
|
|
.pres .pn b { color:var(--accent); font-weight:700; }
|
|
.pres .pp { font-size:11px; color:var(--fg-3); margin-left:auto; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; direction:rtl; }
|
|
.pempty { padding:26px; text-align:center; color:var(--fg-3); font-size:12.5px; }
|
|
|
|
/* combined search modal (content + files) */
|
|
.search-modal { width:940px; max-width:94vw; background:#212429; border:1px solid var(--border-2); border-radius:11px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden; display:flex; flex-direction:column; }
|
|
.search-cols { display:flex; min-height:0; }
|
|
.sc-left { flex:1 1 auto; min-width:0; max-height:460px; overflow:auto; border-right:1px solid var(--border); padding-bottom:8px; }
|
|
.sc-right { flex:0 0 256px; min-width:0; max-height:460px; overflow:auto; padding-bottom:8px; background:rgba(0,0,0,0.12); }
|
|
.sc-head { position:sticky; top:0; z-index:1; background:#212429; padding:9px 14px 6px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:7px; }
|
|
.sc-right .sc-head { background:#1e2024; }
|
|
.sc-head .sc-ct { color:var(--fg-2); background:var(--bg-3); border:1px solid var(--border); border-radius:9px; padding:0 7px; line-height:15px; font-size:10px; }
|
|
.srf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.pempty.sm { padding:18px 14px; text-align:left; font-size:11.5px; }
|
|
.fres { display:flex; align-items:center; gap:9px; padding:6px 12px; cursor:pointer; }
|
|
.fres:hover { background:var(--hover); }
|
|
.fres-txt { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
|
|
.fres-txt .fn { font-size:12.5px; color:var(--fg-0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.fres-txt .fn b { color:var(--accent); font-weight:700; }
|
|
.fres-txt .fd { font-size:10.5px; color:var(--fg-3); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
|
|
/* content search */
|
|
.search-results { max-height:420px; overflow:auto; padding:4px 0 8px; }
|
|
.sr-file { padding:7px 14px 3px; font-size:11.5px; color:var(--fg-2); display:flex; align-items:center; gap:8px; cursor:pointer; }
|
|
.sr-file:hover { color:var(--fg-0); }
|
|
.sr-file .cnt { margin-left:auto; color:var(--fg-3); font-family:var(--mono); font-size:10.5px; }
|
|
.sr-line { display:flex; gap:12px; padding:2px 14px 2px 38px; font-family:var(--mono); font-size:12px; cursor:pointer; color:var(--fg-1); }
|
|
.sr-line:hover { background:var(--hover); }
|
|
.sr-line .no { color:var(--fg-3); min-width:34px; text-align:right; }
|
|
.sr-line .tx { white-space:pre; overflow:hidden; text-overflow:ellipsis; }
|
|
.sr-line mark { background:rgba(216,168,92,.28); color:var(--fg-0); border-radius:2px; }
|
|
|
|
/* pass-on-to-agent inline popup */
|
|
.pass-pop { position:fixed; z-index:85; width:344px; max-width:92vw; background:#23272d; border:1px solid var(--border-2); border-radius:10px; box-shadow:0 18px 48px rgba(0,0,0,.55); padding:11px; animation:popin .12s ease-out; }
|
|
@keyframes popin { from { transform:translateY(6px); } }
|
|
.pass-head { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-1); margin-bottom:9px; }
|
|
.pass-head svg { color:#c98bdb; }
|
|
.pass-head .pass-esc { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 6px; }
|
|
.pass-input { width:100%; box-sizing:border-box; background:var(--bg-0); border:1px solid var(--border-2); border-radius:7px; color:var(--fg-0); font-family:var(--ui); font-size:13px; padding:8px 10px; outline:none; }
|
|
.pass-input:focus { border-color:var(--accent-line); }
|
|
.pass-input::placeholder { color:var(--fg-3); }
|
|
.pass-preview { margin-top:9px; display:flex; align-items:center; gap:8px; min-width:0; }
|
|
.pass-preview .pp-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); flex:0 0 auto; }
|
|
.pass-preview code { font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:3px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.pass-foot { margin-top:9px; font-size:10.5px; color:var(--fg-3); }
|
|
.pass-foot kbd { font-family:var(--mono); font-size:10px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; }
|
|
|
|
/* terminal multi-line input */
|
|
.term-input { align-items:flex-start; }
|
|
.term-ta { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-family:var(--mono); font-size:12.5px; line-height:18px; caret-color:var(--accent); resize:none; padding:0; margin:0; overflow:hidden; }
|
|
.term-ta::placeholder { color:var(--fg-3); }
|
|
|
|
/* context menu */.ctx { position:fixed; z-index:80; background:#23272d; border:1px solid var(--border-2); border-radius:9px; padding:5px; min-width:248px; box-shadow:0 16px 44px rgba(0,0,0,.5); }
|
|
.ctx-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--fg-1); }
|
|
.ctx-item:hover { background:var(--accent-soft); color:var(--fg-0); }
|
|
.ctx-item .kc { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--fg-3); }
|
|
.ctx-item.primary { color:var(--fg-0); }
|
|
.ctx-item.primary .ic { color:var(--accent); }
|
|
.ctx-item .ic { width:15px; display:flex; justify-content:center; color:var(--fg-3); }
|
|
.ctx-sep { height:1px; background:var(--border); margin:5px 6px; }
|
|
.ctx-note { padding:4px 11px 7px; font-size:10.5px; color:var(--fg-3); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
|
|
/* toast */
|
|
.toast-wrap { position:fixed; bottom:34px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; }
|
|
.toast { background:#23272d; border:1px solid var(--border-2); border-left:3px solid var(--accent); border-radius:9px; padding:9px 14px; box-shadow:0 12px 34px rgba(0,0,0,.45); display:flex; align-items:center; gap:11px; animation:tin .18s ease-out; }
|
|
@keyframes tin { from{opacity:0; transform:translateY(8px);} }
|
|
.toast .tt { font-size:12.5px; color:var(--fg-0); }
|
|
.toast .tref { font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:2px 8px; }
|
|
|
|
/* ============ status bar ============ */
|
|
.statusbar { height:23px; flex:0 0 23px; display:flex; align-items:center; gap:0; background:var(--bg-3); border-top:1px solid var(--border); font-size:11px; color:var(--fg-2); user-select:none; }
|
|
.sb { display:flex; align-items:center; gap:6px; padding:0 11px; height:100%; }
|
|
.sb:hover { background:var(--hover); }
|
|
.sb.accent { background:var(--accent); color:#0c1320; }
|
|
.sb.accent:hover { background:#5d97ff; }
|
|
.sb.spacer { flex:1; }
|
|
.sb .a{color:var(--add);} .sb .d{color:var(--del);}
|
|
.sb b { font-weight:600; color:var(--fg-1); }
|