fix: replace 30+ hardcoded dark-navy colors with theme CSS variables
Root cause: topbar, dropdowns, toast, approval card, tooltips, main area, inputs, and hover states all used hardcoded rgba(22,33,62), #1a2535, etc. These only looked correct on the Dark theme — all other themes showed jarring dark-navy elements on non-navy backgrounds. New CSS variables added to every theme block: - --surface: dropdowns, popups, toast, approval card - --topbar-bg: topbar background - --main-bg: main chat area background - --input-bg: subtle input/button backgrounds - --hover-bg: hover state backgrounds - --focus-ring / --focus-glow: focus border and box-shadow Light theme now has proper light-colored surfaces, inputs, and hover states instead of invisible white-on-white. THEMES.md updated with all new variables documented. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nathan Esquenazi
GitHub
15
THEMES.md
15
THEMES.md
@@ -41,6 +41,7 @@ Every color in the UI comes from these CSS variables:
|
|||||||
|
|
||||||
```css
|
```css
|
||||||
:root[data-theme="your-theme-name"] {
|
:root[data-theme="your-theme-name"] {
|
||||||
|
/* Core palette */
|
||||||
--bg: #1a1a2e; /* Main background */
|
--bg: #1a1a2e; /* Main background */
|
||||||
--sidebar: #16213e; /* Sidebar background */
|
--sidebar: #16213e; /* Sidebar background */
|
||||||
--border: rgba(255,255,255,0.08); /* Subtle borders */
|
--border: rgba(255,255,255,0.08); /* Subtle borders */
|
||||||
@@ -51,11 +52,21 @@ Every color in the UI comes from these CSS variables:
|
|||||||
--blue: #7cb9ff; /* Primary action color (links, active states) */
|
--blue: #7cb9ff; /* Primary action color (links, active states) */
|
||||||
--gold: #c9a84c; /* Secondary accent (pinned items, gold highlights) */
|
--gold: #c9a84c; /* Secondary accent (pinned items, gold highlights) */
|
||||||
--code-bg: #0d1117; /* Code block background */
|
--code-bg: #0d1117; /* Code block background */
|
||||||
|
|
||||||
|
/* Surface and chrome (optional — inherit from core palette if omitted) */
|
||||||
|
--surface: #1a2535; /* Dropdowns, popups, toast, approval card */
|
||||||
|
--topbar-bg: rgba(22,33,62,.98); /* Topbar background */
|
||||||
|
--main-bg: rgba(26,26,46,0.5); /* Main chat area background */
|
||||||
|
--input-bg: rgba(255,255,255,.04); /* Input/button subtle backgrounds */
|
||||||
|
--hover-bg: rgba(255,255,255,.06); /* Hover state backgrounds */
|
||||||
|
--focus-ring: rgba(124,185,255,.35); /* Focus border color */
|
||||||
|
--focus-glow: rgba(124,185,255,.08); /* Focus box-shadow glow */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
That's it. Override any or all of these variables. The entire UI adapts
|
The **core palette** (first 10 variables) controls 90% of the UI. The
|
||||||
automatically because every color reference uses `var(--name)`.
|
**surface/chrome** variables are optional — if omitted, they fall back to
|
||||||
|
defaults that work for dark themes. Light themes should override all of them.
|
||||||
|
|
||||||
### Step 2: Add it to the theme picker (optional)
|
### Step 2: Add it to the theme picker (optional)
|
||||||
|
|
||||||
|
|||||||
@@ -2,17 +2,25 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg:#1a1a2e;--sidebar:#16213e;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
|
--bg:#1a1a2e;--sidebar:#16213e;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
|
||||||
--text:#e8e8f0;--muted:#8888aa;--accent:#e94560;--blue:#7cb9ff;--gold:#c9a84c;--code-bg:#0d1117;
|
--text:#e8e8f0;--muted:#8888aa;--accent:#e94560;--blue:#7cb9ff;--gold:#c9a84c;--code-bg:#0d1117;
|
||||||
|
--surface:#1a2535;--topbar-bg:rgba(22,33,62,.98);--main-bg:rgba(26,26,46,0.5);
|
||||||
|
--focus-ring:rgba(124,185,255,.35);--focus-glow:rgba(124,185,255,.08);
|
||||||
|
--input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
|
||||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
||||||
}
|
}
|
||||||
/* ── Slate theme (warm charcoal, lighter than dark, easier on the eyes) ── */
|
/* ── Slate theme (warm charcoal, lighter than dark, easier on the eyes) ── */
|
||||||
:root[data-theme="slate"]{
|
:root[data-theme="slate"]{
|
||||||
--bg:#2b2d30;--sidebar:#25272b;--border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.16);
|
--bg:#2b2d30;--sidebar:#25272b;--border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.16);
|
||||||
--text:#d4d4d8;--muted:#8a8a9a;--accent:#e06c75;--blue:#82aaff;--gold:#d4a85a;--code-bg:#1e2023;
|
--text:#d4d4d8;--muted:#8a8a9a;--accent:#e06c75;--blue:#82aaff;--gold:#d4a85a;--code-bg:#1e2023;
|
||||||
|
--surface:#2f3134;--topbar-bg:rgba(37,39,43,.98);--main-bg:rgba(43,45,48,0.5);
|
||||||
|
--focus-ring:rgba(130,170,255,.35);--focus-glow:rgba(130,170,255,.08);
|
||||||
}
|
}
|
||||||
/* ── Light theme (warm off-white, softer than pure white) ── */
|
/* ── Light theme (warm off-white, softer than pure white) ── */
|
||||||
:root[data-theme="light"]{
|
:root[data-theme="light"]{
|
||||||
--bg:#f0ede8;--sidebar:#e4e0d8;--border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.15);
|
--bg:#f0ede8;--sidebar:#e4e0d8;--border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.15);
|
||||||
--text:#2c2825;--muted:#7a746a;--accent:#b5451b;--blue:#2d6fa3;--gold:#8a6520;--code-bg:#e8e4de;
|
--text:#2c2825;--muted:#7a746a;--accent:#b5451b;--blue:#2d6fa3;--gold:#8a6520;--code-bg:#e8e4de;
|
||||||
|
--surface:#e8e4dc;--topbar-bg:rgba(228,224,216,.98);--main-bg:rgba(240,237,232,0.5);
|
||||||
|
--focus-ring:rgba(45,111,163,.35);--focus-glow:rgba(45,111,163,.1);
|
||||||
|
--input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.04);
|
||||||
}
|
}
|
||||||
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
|
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
|
||||||
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
|
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
|
||||||
@@ -21,16 +29,22 @@
|
|||||||
:root[data-theme="solarized"]{
|
:root[data-theme="solarized"]{
|
||||||
--bg:#002b36;--sidebar:#073642;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.13);
|
--bg:#002b36;--sidebar:#073642;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.13);
|
||||||
--text:#839496;--muted:#657b83;--accent:#dc322f;--blue:#268bd2;--gold:#b58900;--code-bg:#073642;
|
--text:#839496;--muted:#657b83;--accent:#dc322f;--blue:#268bd2;--gold:#b58900;--code-bg:#073642;
|
||||||
|
--surface:#0a3c48;--topbar-bg:rgba(7,54,66,.98);--main-bg:rgba(0,43,54,0.5);
|
||||||
|
--focus-ring:rgba(38,139,210,.35);--focus-glow:rgba(38,139,210,.08);
|
||||||
}
|
}
|
||||||
/* ── Monokai theme ── */
|
/* ── Monokai theme ── */
|
||||||
:root[data-theme="monokai"]{
|
:root[data-theme="monokai"]{
|
||||||
--bg:#272822;--sidebar:#1e1f1c;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
--bg:#272822;--sidebar:#1e1f1c;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
||||||
--text:#f8f8f2;--muted:#75715e;--accent:#f92672;--blue:#66d9e8;--gold:#e6db74;--code-bg:#1e1f1c;
|
--text:#f8f8f2;--muted:#75715e;--accent:#f92672;--blue:#66d9e8;--gold:#e6db74;--code-bg:#1e1f1c;
|
||||||
|
--surface:#2d2e28;--topbar-bg:rgba(30,31,28,.98);--main-bg:rgba(39,40,34,0.5);
|
||||||
|
--focus-ring:rgba(102,217,232,.35);--focus-glow:rgba(102,217,232,.08);
|
||||||
}
|
}
|
||||||
/* ── Nord theme ── */
|
/* ── Nord theme ── */
|
||||||
:root[data-theme="nord"]{
|
:root[data-theme="nord"]{
|
||||||
--bg:#2e3440;--sidebar:#272c36;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
--bg:#2e3440;--sidebar:#272c36;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
||||||
--text:#eceff4;--muted:#9099aa;--accent:#bf616a;--blue:#81a1c1;--gold:#ebcb8b;--code-bg:#272c36;
|
--text:#eceff4;--muted:#9099aa;--accent:#bf616a;--blue:#81a1c1;--gold:#ebcb8b;--code-bg:#272c36;
|
||||||
|
--surface:#333a47;--topbar-bg:rgba(39,44,54,.98);--main-bg:rgba(46,52,64,0.5);
|
||||||
|
--focus-ring:rgba(129,161,193,.35);--focus-glow:rgba(129,161,193,.08);
|
||||||
}
|
}
|
||||||
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;}
|
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;}
|
||||||
.layout{display:flex;width:100%;height:100vh;height:100dvh;}
|
.layout{display:flex;width:100%;height:100vh;height:100dvh;}
|
||||||
@@ -43,13 +57,13 @@
|
|||||||
.new-chat-btn:hover{background:rgba(124,185,255,0.13);border-color:rgba(124,185,255,.3);}
|
.new-chat-btn:hover{background:rgba(124,185,255,0.13);border-color:rgba(124,185,255,.3);}
|
||||||
.session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;}
|
.session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;}
|
||||||
.session-search{padding:4px 10px 8px;flex-shrink:0;}
|
.session-search{padding:4px 10px 8px;flex-shrink:0;}
|
||||||
.session-search input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text);padding:7px 12px;font-size:12px;outline:none;transition:all .15s;}
|
.session-search input{width:100%;background:var(--input-bg);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text);padding:7px 12px;font-size:12px;outline:none;transition:all .15s;}
|
||||||
.session-search input:focus{border-color:rgba(124,185,255,.35);background:rgba(255,255,255,.06);box-shadow:0 0 0 2px rgba(124,185,255,.07);}
|
.session-search input:focus{border-color:rgba(124,185,255,.35);background:var(--hover-bg);box-shadow:0 0 0 2px rgba(124,185,255,.07);}
|
||||||
.session-search input::placeholder{color:var(--muted);opacity:.7;}
|
.session-search input::placeholder{color:var(--muted);opacity:.7;}
|
||||||
/* Inline session title edit */
|
/* Inline session title edit */
|
||||||
.session-title-input{flex:1;background:rgba(20,32,60,.9);border:1px solid rgba(124,185,255,.6);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px rgba(124,185,255,.15);font-family:inherit;}
|
.session-title-input{flex:1;background:var(--surface);border:1px solid rgba(124,185,255,.6);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px rgba(124,185,255,.15);font-family:inherit;}
|
||||||
.session-item{padding:8px 10px 8px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:6px;min-width:0;border-left:2px solid transparent;position:relative;}
|
.session-item{padding:8px 10px 8px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:6px;min-width:0;border-left:2px solid transparent;position:relative;}
|
||||||
.session-item:hover{background:rgba(255,255,255,0.06);color:var(--text);}
|
.session-item:hover{background:var(--hover-bg);color:var(--text);}
|
||||||
.session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;border-left:2px solid #e8a030;padding-left:8px;}
|
.session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;border-left:2px solid #e8a030;padding-left:8px;}
|
||||||
.session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
.session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||||
/* ── Session action button overlay ── */
|
/* ── Session action button overlay ── */
|
||||||
@@ -71,21 +85,21 @@
|
|||||||
.session-date-header.pinned{color:#f5c542;}
|
.session-date-header.pinned{color:#f5c542;}
|
||||||
.session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;}
|
.session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;}
|
||||||
.session-date-caret.collapsed{transform:rotate(-90deg);}
|
.session-date-caret.collapsed{transform:rotate(-90deg);}
|
||||||
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(20,30,50,.95);backdrop-filter:blur(12px);border:1px solid rgba(124,185,255,0.25);color:var(--text);font-size:13px;padding:10px 20px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:.01em;}
|
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);backdrop-filter:blur(12px);border:1px solid rgba(124,185,255,0.25);color:var(--text);font-size:13px;padding:10px 20px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:.01em;}
|
||||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px);}
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px);}
|
||||||
.reconnect-banner{display:none;background:#1a2535;border:1px solid rgba(201,168,76,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--gold);display:none;align-items:center;justify-content:space-between;gap:12px;}
|
.reconnect-banner{display:none;background:var(--surface);border:1px solid rgba(201,168,76,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--gold);display:none;align-items:center;justify-content:space-between;gap:12px;}
|
||||||
.reconnect-banner.visible{display:flex;}
|
.reconnect-banner.visible{display:flex;}
|
||||||
.reconnect-btn{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);color:var(--gold);cursor:pointer;}
|
.reconnect-btn{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);color:var(--gold);cursor:pointer;}
|
||||||
.reconnect-btn:hover{background:rgba(201,168,76,0.25);}
|
.reconnect-btn:hover{background:rgba(201,168,76,0.25);}
|
||||||
/* ── Approval card ── */
|
/* ── Approval card ── */
|
||||||
.approval-card{display:none;max-width:780px;margin:0 auto 0;padding:0 20px 12px;}
|
.approval-card{display:none;max-width:780px;margin:0 auto 0;padding:0 20px 12px;}
|
||||||
.approval-card.visible{display:block;}
|
.approval-card.visible{display:block;}
|
||||||
.approval-inner{background:rgba(20,30,50,.95);backdrop-filter:blur(8px);border:1px solid rgba(233,69,96,0.35);border-radius:14px;padding:14px 16px;}
|
.approval-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid rgba(233,69,96,0.35);border-radius:14px;padding:14px 16px;}
|
||||||
.approval-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:#e94560;}
|
.approval-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:#e94560;}
|
||||||
.approval-desc{font-size:12px;color:var(--muted);margin-bottom:8px;}
|
.approval-desc{font-size:12px;color:var(--muted);margin-bottom:8px;}
|
||||||
.approval-cmd{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:#e2e8f0;white-space:pre-wrap;word-break:break-all;margin-bottom:12px;max-height:120px;overflow-y:auto;}
|
.approval-cmd{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:#e2e8f0;white-space:pre-wrap;word-break:break-all;margin-bottom:12px;max-height:120px;overflow-y:auto;}
|
||||||
.approval-btns{display:flex;gap:8px;flex-wrap:wrap;}
|
.approval-btns{display:flex;gap:8px;flex-wrap:wrap;}
|
||||||
.approval-btn{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,0.06);color:var(--text);cursor:pointer;transition:all .15s;}
|
.approval-btn{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);cursor:pointer;transition:all .15s;}
|
||||||
.approval-btn:hover{background:rgba(255,255,255,0.12);}
|
.approval-btn:hover{background:rgba(255,255,255,0.12);}
|
||||||
.approval-btn.once{border-color:rgba(124,185,255,0.5);color:var(--blue);}
|
.approval-btn.once{border-color:rgba(124,185,255,0.5);color:var(--blue);}
|
||||||
.approval-btn.once:hover{background:rgba(124,185,255,0.15);}
|
.approval-btn.once:hover{background:rgba(124,185,255,0.15);}
|
||||||
@@ -97,7 +111,7 @@
|
|||||||
.sidebar-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:6px 8px 0;gap:2px;}
|
.sidebar-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:6px 8px 0;gap:2px;}
|
||||||
.nav-tab{flex:1;padding:10px 4px 8px;font-size:20px;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:color .15s;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;position:relative;}
|
.nav-tab{flex:1;padding:10px 4px 8px;font-size:20px;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:color .15s;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;position:relative;}
|
||||||
.nav-tab:hover{color:var(--text);}
|
.nav-tab:hover{color:var(--text);}
|
||||||
.nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(15,22,40,.98);border:1px solid rgba(124,185,255,0.3);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
|
.nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid rgba(124,185,255,0.3);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
|
||||||
.nav-tab.active{color:var(--blue);}
|
.nav-tab.active{color:var(--blue);}
|
||||||
.nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--blue);border-radius:2px 2px 0 0;}
|
.nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--blue);border-radius:2px 2px 0 0;}
|
||||||
/* Panel content areas (swapped by tab) */
|
/* Panel content areas (swapped by tab) */
|
||||||
@@ -128,14 +142,14 @@
|
|||||||
.cron-last-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
|
.cron-last-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
|
||||||
/* Skills panel */
|
/* Skills panel */
|
||||||
.skills-search{padding:8px;flex-shrink:0;}
|
.skills-search{padding:8px;flex-shrink:0;}
|
||||||
.skills-search input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:6px 10px;font-size:12px;outline:none;}
|
.skills-search input{width:100%;background:var(--hover-bg);border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:6px 10px;font-size:12px;outline:none;}
|
||||||
.skills-search input::placeholder{color:var(--muted);}
|
.skills-search input::placeholder{color:var(--muted);}
|
||||||
.skills-list{flex:1;overflow-y:auto;padding:0 8px 8px;}
|
.skills-list{flex:1;overflow-y:auto;padding:0 8px 8px;}
|
||||||
.skills-category{margin-bottom:4px;}
|
.skills-category{margin-bottom:4px;}
|
||||||
.skills-cat-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 6px 4px;cursor:pointer;display:flex;align-items:center;gap:4px;}
|
.skills-cat-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 6px 4px;cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||||
.skills-cat-header:hover{color:var(--text);}
|
.skills-cat-header:hover{color:var(--text);}
|
||||||
.skill-item{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;}
|
.skill-item{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;}
|
||||||
.skill-item:hover{background:rgba(255,255,255,.06);color:var(--text);}
|
.skill-item:hover{background:var(--hover-bg);color:var(--text);}
|
||||||
.skill-item.active{background:rgba(124,185,255,.1);color:var(--blue);}
|
.skill-item.active{background:rgba(124,185,255,.1);color:var(--blue);}
|
||||||
.skill-name{font-weight:500;flex-shrink:0;}
|
.skill-name{font-weight:500;flex-shrink:0;}
|
||||||
.skill-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;opacity:.7;}
|
.skill-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;opacity:.7;}
|
||||||
@@ -149,15 +163,15 @@
|
|||||||
.memory-empty{color:var(--muted);font-size:12px;font-style:italic;}
|
.memory-empty{color:var(--muted);font-size:12px;font-style:italic;}
|
||||||
.sidebar-bottom{border-top:1px solid var(--border);padding:12px 14px;flex-shrink:0;position:relative;z-index:10;overflow:visible;}
|
.sidebar-bottom{border-top:1px solid var(--border);padding:12px 14px;flex-shrink:0;position:relative;z-index:10;overflow:visible;}
|
||||||
.field-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;opacity:.8;}
|
.field-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;opacity:.8;}
|
||||||
select{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);padding:7px 28px 7px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
|
select{width:100%;background:var(--input-bg);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);padding:7px 28px 7px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
|
||||||
select:focus{border-color:rgba(124,185,255,.4);box-shadow:0 0 0 2px rgba(124,185,255,.08);}
|
select:focus{border-color:rgba(124,185,255,.4);box-shadow:0 0 0 2px rgba(124,185,255,.08);}
|
||||||
optgroup{color:var(--muted);font-size:11px;font-weight:700;}
|
optgroup{color:var(--muted);font-size:11px;font-weight:700;}
|
||||||
option{background:#1a1a2e;color:var(--text);padding:6px;}
|
option{background:var(--bg);color:var(--text);padding:6px;}
|
||||||
.sidebar-actions{display:flex;gap:6px;}
|
.sidebar-actions{display:flex;gap:6px;}
|
||||||
.sm-btn{flex:1;padding:7px 0;border-radius:8px;font-size:11px;font-weight:500;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.08);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
|
.sm-btn{flex:1;padding:7px 0;border-radius:8px;font-size:11px;font-weight:500;background:var(--input-bg);border:1px solid rgba(255,255,255,.08);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
|
||||||
.sm-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);border-color:rgba(255,255,255,.15);}
|
.sm-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);border-color:rgba(255,255,255,.15);}
|
||||||
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:rgba(26,26,46,0.5);}
|
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--main-bg);}
|
||||||
.topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(22,33,62,.98);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:10;}
|
.topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--topbar-bg);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:10;}
|
||||||
.topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
.topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||||
.topbar-meta{font-size:11px;color:var(--muted);margin-top:3px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
.topbar-meta{font-size:11px;color:var(--muted);margin-top:3px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||||
.topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
|
.topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
|
||||||
@@ -182,7 +196,7 @@
|
|||||||
.msg-body code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12.5px;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px;color:#f0c27f;}
|
.msg-body code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12.5px;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px;color:#f0c27f;}
|
||||||
.msg-body pre{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:10px 0;}
|
.msg-body pre{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:10px 0;}
|
||||||
.msg-body pre code{background:none;padding:0;border-radius:0;color:#e2e8f0;font-size:13px;line-height:1.6;}
|
.msg-body pre code{background:none;padding:0;border-radius:0;color:#e2e8f0;font-size:13px;line-height:1.6;}
|
||||||
.pre-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px 8px;background:rgba(255,255,255,.04);border-radius:10px 10px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:6px;}
|
.pre-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px 8px;background:var(--input-bg);border-radius:10px 10px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:6px;}
|
||||||
.pre-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.4;}
|
.pre-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.4;}
|
||||||
.pre-header+pre{border-radius:0 0 10px 10px;border-top:none;margin-top:0;}
|
.pre-header+pre{border-radius:0 0 10px 10px;border-top:none;margin-top:0;}
|
||||||
.msg-body blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--muted);font-style:italic;margin:10px 0;}
|
.msg-body blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--muted);font-style:italic;margin:10px 0;}
|
||||||
@@ -199,11 +213,11 @@
|
|||||||
.empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;}
|
.empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;}
|
||||||
.empty-state p{font-size:14px;text-align:center;max-width:320px;}
|
.empty-state p{font-size:14px;text-align:center;max-width:320px;}
|
||||||
.suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}
|
.suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}
|
||||||
.suggestion{padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
|
.suggestion{padding:11px 14px;background:var(--input-bg);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
|
||||||
.suggestion:hover{background:rgba(124,185,255,0.07);color:var(--text);border-color:rgba(124,185,255,.3);transform:translateX(2px);}
|
.suggestion:hover{background:rgba(124,185,255,0.07);color:var(--text);border-color:rgba(124,185,255,.3);transform:translateX(2px);}
|
||||||
/* ── Composer ── */
|
/* ── Composer ── */
|
||||||
.composer-wrap{border-top:1px solid var(--border);padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
|
.composer-wrap{border-top:1px solid var(--border);padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
|
||||||
.composer-box{max-width:780px;margin:0 auto;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;position:relative;}
|
.composer-box{max-width:780px;margin:0 auto;background:var(--input-bg);border:1px solid rgba(255,255,255,.12);border-radius:16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;position:relative;}
|
||||||
.composer-box:focus-within{border-color:rgba(124,185,255,0.5);box-shadow:0 0 0 3px rgba(124,185,255,0.08);}
|
.composer-box:focus-within{border-color:rgba(124,185,255,0.5);box-shadow:0 0 0 3px rgba(124,185,255,0.08);}
|
||||||
.composer-wrap.drag-over .composer-box{border-color:var(--blue);background:rgba(124,185,255,0.06);}
|
.composer-wrap.drag-over .composer-box{border-color:var(--blue);background:rgba(124,185,255,0.06);}
|
||||||
.drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(124,185,255,0.08);border:2px dashed var(--blue);border-radius:14px;font-size:14px;color:var(--blue);pointer-events:none;z-index:10;flex-direction:column;gap:8px;}
|
.drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(124,185,255,0.08);border:2px dashed var(--blue);border-radius:14px;font-size:14px;color:var(--blue);pointer-events:none;z-index:10;flex-direction:column;gap:8px;}
|
||||||
@@ -240,12 +254,12 @@
|
|||||||
.send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
|
.send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
|
||||||
.send-btn.visible{animation:send-pop-in .18s cubic-bezier(.34,1.56,.64,1) forwards;}
|
.send-btn.visible{animation:send-pop-in .18s cubic-bezier(.34,1.56,.64,1) forwards;}
|
||||||
@keyframes send-pop-in{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
|
@keyframes send-pop-in{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
|
||||||
.upload-bar-wrap{display:none;height:3px;background:rgba(255,255,255,.06);border-radius:0 0 16px 16px;overflow:hidden;}
|
.upload-bar-wrap{display:none;height:3px;background:var(--hover-bg);border-radius:0 0 16px 16px;overflow:hidden;}
|
||||||
.upload-bar-wrap.active{display:block;}
|
.upload-bar-wrap.active{display:block;}
|
||||||
.upload-bar{height:100%;background:linear-gradient(90deg,var(--blue),#a0d0ff);width:0%;transition:width .3s ease;}
|
.upload-bar{height:100%;background:linear-gradient(90deg,var(--blue),#a0d0ff);width:0%;transition:width .3s ease;}
|
||||||
.rightpanel{width:300px;background:var(--sidebar);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
|
.rightpanel{width:300px;background:var(--sidebar);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
|
||||||
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:space-between;}
|
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:space-between;}
|
||||||
.git-badge{font-size:9px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:4px;letter-spacing:.02em;margin-left:auto;margin-right:4px;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;}
|
.git-badge{font-size:9px;font-weight:600;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;letter-spacing:.02em;margin-left:auto;margin-right:4px;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;}
|
||||||
.git-badge.dirty{color:var(--gold);background:rgba(201,168,76,.1);}
|
.git-badge.dirty{color:var(--gold);background:rgba(201,168,76,.1);}
|
||||||
.panel-actions{display:flex;gap:4px;}
|
.panel-actions{display:flex;gap:4px;}
|
||||||
.panel-icon-btn{width:24px;height:24px;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
.panel-icon-btn{width:24px;height:24px;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
||||||
@@ -259,7 +273,7 @@
|
|||||||
.breadcrumb-bar{display:flex;align-items:center;gap:2px;padding:6px 12px;font-size:12px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;white-space:nowrap;}
|
.breadcrumb-bar{display:flex;align-items:center;gap:2px;padding:6px 12px;font-size:12px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;white-space:nowrap;}
|
||||||
.breadcrumb-seg{padding:1px 3px;border-radius:3px;}
|
.breadcrumb-seg{padding:1px 3px;border-radius:3px;}
|
||||||
.breadcrumb-link{color:var(--muted);cursor:pointer;transition:color .12s;}
|
.breadcrumb-link{color:var(--muted);cursor:pointer;transition:color .12s;}
|
||||||
.breadcrumb-link:hover{color:var(--text);background:rgba(255,255,255,.06);}
|
.breadcrumb-link:hover{color:var(--text);background:var(--hover-bg);}
|
||||||
.breadcrumb-current{color:var(--text);font-weight:500;}
|
.breadcrumb-current{color:var(--text);font-weight:500;}
|
||||||
.breadcrumb-sep{color:var(--border);margin:0 1px;font-size:11px;}
|
.breadcrumb-sep{color:var(--border);margin:0 1px;font-size:11px;}
|
||||||
.file-tree{flex:1;overflow-y:auto;padding:8px;}
|
.file-tree{flex:1;overflow-y:auto;padding:8px;}
|
||||||
@@ -388,7 +402,7 @@
|
|||||||
|
|
||||||
/* ── Workspace dropdown (topbar) ── */
|
/* ── Workspace dropdown (topbar) ── */
|
||||||
.ws-chip{user-select:none;}
|
.ws-chip{user-select:none;}
|
||||||
.ws-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;right:0;min-width:200px;background:#1a2535;border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
|
.ws-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;right:0;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
|
||||||
.ws-dropdown.open{display:block;}
|
.ws-dropdown.open{display:block;}
|
||||||
.ws-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
|
.ws-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
|
||||||
.ws-opt:hover{background:rgba(255,255,255,.07);}
|
.ws-opt:hover{background:rgba(255,255,255,.07);}
|
||||||
@@ -408,7 +422,7 @@
|
|||||||
.ws-action-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
|
.ws-action-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
|
||||||
/* ── Profile dropdown + management panel ── */
|
/* ── Profile dropdown + management panel ── */
|
||||||
.profile-chip{user-select:none;color:rgba(168,139,250,.9)!important;}
|
.profile-chip{user-select:none;color:rgba(168,139,250,.9)!important;}
|
||||||
.profile-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:#1a2535;border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
|
.profile-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
|
||||||
.profile-dropdown.open{display:block;}
|
.profile-dropdown.open{display:block;}
|
||||||
.profile-opt{padding:9px 14px;cursor:pointer;transition:background .12s;}
|
.profile-opt{padding:9px 14px;cursor:pointer;transition:background .12s;}
|
||||||
.profile-opt:hover{background:rgba(255,255,255,.07);}
|
.profile-opt:hover{background:rgba(255,255,255,.07);}
|
||||||
@@ -426,7 +440,7 @@
|
|||||||
.profile-card-meta{font-size:11px;color:var(--muted);margin-top:3px;padding-left:12px;}
|
.profile-card-meta{font-size:11px;color:var(--muted);margin-top:3px;padding-left:12px;}
|
||||||
.profile-card-actions{display:flex;gap:4px;flex-shrink:0;}
|
.profile-card-actions{display:flex;gap:4px;flex-shrink:0;}
|
||||||
/* ── Slash command autocomplete dropdown ── */
|
/* ── Slash command autocomplete dropdown ── */
|
||||||
.cmd-dropdown{display:none;position:absolute;bottom:100%;left:0;right:0;background:#1a2535;border:1px solid var(--border2);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.4);z-index:200;max-height:240px;overflow-y:auto;margin-bottom:4px;}
|
.cmd-dropdown{display:none;position:absolute;bottom:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.4);z-index:200;max-height:240px;overflow-y:auto;margin-bottom:4px;}
|
||||||
.cmd-dropdown.open{display:block;}
|
.cmd-dropdown.open{display:block;}
|
||||||
.cmd-item{padding:8px 14px;cursor:pointer;transition:background .12s;}
|
.cmd-item{padding:8px 14px;cursor:pointer;transition:background .12s;}
|
||||||
.cmd-item:hover,.cmd-item.selected{background:rgba(255,255,255,.07);}
|
.cmd-item:hover,.cmd-item.selected{background:rgba(255,255,255,.07);}
|
||||||
@@ -446,7 +460,7 @@
|
|||||||
.msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
|
.msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
|
||||||
.msg-edit-send{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
|
.msg-edit-send{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
|
||||||
.msg-edit-send:hover{opacity:.85;}
|
.msg-edit-send:hover{opacity:.85;}
|
||||||
.msg-edit-cancel{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border2);border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
|
.msg-edit-cancel{background:var(--hover-bg);color:var(--muted);border:1px solid var(--border2);border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
|
||||||
.msg-edit-cancel:hover{background:rgba(255,255,255,.1);}
|
.msg-edit-cancel:hover{background:rgba(255,255,255,.1);}
|
||||||
|
|
||||||
/* ── Clear conversation chip ── */
|
/* ── Clear conversation chip ── */
|
||||||
@@ -624,7 +638,7 @@ body.resizing{user-select:none;cursor:col-resize;}
|
|||||||
.skill-linked-section{margin-bottom:8px;}
|
.skill-linked-section{margin-bottom:8px;}
|
||||||
.skill-linked-section h4{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
|
.skill-linked-section h4{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
|
||||||
.skill-linked-file{display:block;font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--blue);text-decoration:none;}
|
.skill-linked-file{display:block;font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--blue);text-decoration:none;}
|
||||||
.skill-linked-file:hover{background:rgba(255,255,255,.06);}
|
.skill-linked-file:hover{background:var(--hover-bg);}
|
||||||
.tool-card-row{margin:0;padding:1px 0;}
|
.tool-card-row{margin:0;padding:1px 0;}
|
||||||
.tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:2px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
|
.tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:2px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
|
||||||
.tool-card:hover{border-color:rgba(255,255,255,.12);}
|
.tool-card:hover{border-color:rgba(255,255,255,.12);}
|
||||||
@@ -694,13 +708,13 @@ body.resizing{user-select:none;cursor:col-resize;}
|
|||||||
|
|
||||||
/* ── Session projects ── */
|
/* ── Session projects ── */
|
||||||
.project-bar{display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:wrap;align-items:center;flex-shrink:0;}
|
.project-bar{display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:wrap;align-items:center;flex-shrink:0;}
|
||||||
.project-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;cursor:pointer;border:1px solid var(--border2);background:rgba(255,255,255,.04);color:var(--muted);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
|
.project-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;cursor:pointer;border:1px solid var(--border2);background:var(--input-bg);color:var(--muted);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
|
||||||
.project-chip:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
.project-chip:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
||||||
.project-chip.active{background:rgba(124,185,255,.12);color:var(--blue);border-color:rgba(124,185,255,.4);}
|
.project-chip.active{background:rgba(124,185,255,.12);color:var(--blue);border-color:rgba(124,185,255,.4);}
|
||||||
.project-chip .color-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
|
.project-chip .color-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
|
||||||
.project-create-btn{font-size:10px;padding:3px 6px;border-radius:12px;cursor:pointer;border:1px dashed var(--border2);background:none;color:var(--muted);opacity:.6;transition:all .15s;}
|
.project-create-btn{font-size:10px;padding:3px 6px;border-radius:12px;cursor:pointer;border:1px dashed var(--border2);background:none;color:var(--muted);opacity:.6;transition:all .15s;}
|
||||||
.project-create-btn:hover{opacity:1;border-color:var(--blue);color:var(--blue);}
|
.project-create-btn:hover{opacity:1;border-color:var(--blue);color:var(--blue);}
|
||||||
.project-create-input{font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid rgba(124,185,255,.6);background:rgba(20,32,60,.9);color:var(--text);outline:none;width:100px;font-family:inherit;box-shadow:0 0 0 2px rgba(124,185,255,.15);}
|
.project-create-input{font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid rgba(124,185,255,.6);background:var(--surface);color:var(--text);outline:none;width:100px;font-family:inherit;box-shadow:0 0 0 2px rgba(124,185,255,.15);}
|
||||||
.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:160px;max-width:220px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,.3);}
|
.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:160px;max-width:220px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,.3);}
|
||||||
.project-picker-item{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .1s;display:flex;align-items:center;gap:6px;}
|
.project-picker-item{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .1s;display:flex;align-items:center;gap:6px;}
|
||||||
.project-picker-item:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
.project-picker-item:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
||||||
@@ -710,7 +724,7 @@ body.resizing{user-select:none;cursor:col-resize;}
|
|||||||
.session-project-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;margin-left:4px;vertical-align:middle;}
|
.session-project-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;margin-left:4px;vertical-align:middle;}
|
||||||
|
|
||||||
/* ── Code copy button ── */
|
/* ── Code copy button ── */
|
||||||
.code-copy-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;transition:all .15s;line-height:1.3;}
|
.code-copy-btn{background:var(--hover-bg);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;transition:all .15s;line-height:1.3;}
|
||||||
.code-copy-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}
|
.code-copy-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}
|
||||||
|
|
||||||
/* ── Tool card expand/collapse toggle ── */
|
/* ── Tool card expand/collapse toggle ── */
|
||||||
|
|||||||
Reference in New Issue
Block a user