From 3c3c9047bba1608960d5fbb61fb397e5d7583158 Mon Sep 17 00:00:00 2001 From: nesquena-hermes Date: Sat, 27 Jun 2026 23:57:37 +0000 Subject: [PATCH] skins: add GitHub, Codex, and Terracotta opt-in appearance skins (#4634, #4636, #4635) GitHub (#4634): graphite + Primer-blue. Codex (#4636): minimal editor, sage accent. Terracotta (#4635): warm clay accent, renamed from the originally-proposed name to a descriptive material name. All CSS-only, namespaced under [data-skin], opt-in via Settings > Appearance. Gate: Codex SAFE + full suite 10778 pass + 3 accents verified live. Co-authored-by: gottipx --- CHANGELOG.md | 4 + static/boot.js | 3 + static/index.html | 2 +- static/style.css | 390 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 398 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cb7ea87..6999ca97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ ## [Unreleased] +### Added + +- **Three new opt-in appearance skins: GitHub, Codex, and Terracotta.** All are CSS-only, namespaced under `[data-skin]`, and selectable from Settings → Appearance — they change nothing unless you pick them. GitHub uses a restrained graphite + Primer-blue palette; Codex a minimal editor look with a muted sage accent; Terracotta a warm clay accent on a soft neutral background. Thanks @gottipx (GitHub #4634, Codex #4636, Terracotta #4635 — renamed from the originally-proposed name to a descriptive material name). + ### Fixed - **Settled assistant turns with interleaved text and tool calls now keep their original order, and no post-tool text is dropped.** When an assistant turn mixed prose with tool calls (text → tool → more text), the settled/reloaded transcript could lose the chronological ordering or silently drop post-tool text/thinking from a non-final assistant message. The Stable Assistant Turn Anchor now promotes a settled turn's mixed `content[]` into ordered scene rows (prose, tool, and thinking rows in sequence) instead of only recovering the raw fallback, and the backend hydration path mirrors the same scene model so a cold reload reconstructs an identical transcript. Only the turn-final assistant message's post-last-tool text is treated as the final answer; earlier assistant messages keep their post-tool content as activity rows. Tool-row de-duplication is conservative (it only merges rows it can positively confirm are the same call), biasing toward an extra visible card over ever silently losing one. Thanks @franksong2702. (#4958) diff --git a/static/boot.js b/static/boot.js index f19e638e..4e518def 100644 --- a/static/boot.js +++ b/static/boot.js @@ -1802,6 +1802,9 @@ const _SKINS=[ {name:'Ares', colors:['#FF4444','#CC3333','#992222']}, {name:'Mono', colors:['#CCCCCC','#999999','#666666']}, {name:'Graphite', colors:['#FFFFFF','#D6D6D6','#242424']}, + {name:'GitHub', colors:['#0969DA','#1F883D','#242424']}, + {name:'Codex', colors:['#72B39A','#242624','#ECEBE4']}, + {name:'Terracotta', colors:['#D97757','#F0EEE6','#141413']}, {name:'Slate', colors:['#334155','#475569','#64748b']}, {name:'Poseidon', colors:['#0EA5E9','#0284C7','#0369A1']}, {name:'Sisyphus', colors:['#A78BFA','#8B5CF6','#7C3AED']}, diff --git a/static/index.html b/static/index.html index 8202d842..e63669b5 100644 --- a/static/index.html +++ b/static/index.html @@ -17,7 +17,7 @@ - + diff --git a/static/style.css b/static/style.css index d645ccd4..dfd2bd0e 100644 --- a/static/style.css +++ b/static/style.css @@ -237,6 +237,396 @@ :root[data-skin="graphite"] .btn.primary:hover, :root[data-skin="graphite"] .update-primary:hover, :root[data-skin="graphite"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} + /* ── Skin: Codex (OpenAI terminal IDE) ── + Full palette rewrite with minimal editor surfaces, crisp contrast, + and restrained OpenAI green action chrome. Uses native system fonts so it stays local, + fast, and license-safe while feeling closer to modern code workbenches. */ + :root[data-skin="codex"]{ + color-scheme:light; + --bg:#FFFFFF;--sidebar:#F3F3F3;--surface:#FFFFFF;--surface-subtle:#F1F1F1;--surface-subtle-hover:#E9E9E9; + --border:#E0E0E0;--border2:#C8C8C8;--border-subtle:#E8E8E8;--border-muted:#DADADA; + --text:#252523;--strong:#111110;--muted:#6A6A68;--em:#3A3A38; + --accent:#2E7A60;--accent-hover:#1D6850;--accent-bg:rgba(46,122,96,0.08);--accent-bg-strong:rgba(46,122,96,0.16);--accent-text:#1D6850; + --blue:#4D8DFF;--gold:#2E7A60;--focus-ring:rgba(46,122,96,0.25);--focus-glow:rgba(46,122,96,0.10); + --input-bg:#FFFFFF;--hover-bg:rgba(0,0,0,0.04);--code-bg:#F3F3F3;--code-inline-bg:rgba(0,0,0,0.06);--code-text:#252523;--pre-text:#252523; + --topbar-bg:rgba(255,255,255,0.96);--main-bg:#FFFFFF; + --error:#D92D20;--success:#2E7A60;--warning:#B87916;--info:#4D8DFF; + --user-bubble-bg:#EBEBEB;--user-bubble-border:#D9D9D9;--user-bubble-text:#252523;--user-bubble-placeholder:#6A6A68; + --user-selection-bg:rgba(46,122,96,0.20);--user-selection-text:#0D0D0D; + --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; + --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; + font-family:var(--font-ui); + } + :root.dark[data-skin="codex"]{ + color-scheme:dark; + --bg:#151614;--sidebar:#242624;--surface:#1B1C1A;--surface-subtle:#20211F;--surface-subtle-hover:#292B28; + --border:#343631;--border2:#4B4D47;--border-subtle:#2A2C28;--border-muted:#3D3F3A; + --text:#ECEBE4;--strong:#FAF9F3;--muted:#A7A79D;--em:#D7D6CE; + --accent:#72B39A;--accent-hover:#84BEA8;--accent-bg:rgba(114,179,154,0.10);--accent-bg-strong:rgba(114,179,154,0.18);--accent-text:#84BEA8; + --blue:#C9C8C0;--gold:#72B39A;--focus-ring:rgba(114,179,154,0.30);--focus-glow:rgba(114,179,154,0.12); + --input-bg:#1E1F1D;--hover-bg:rgba(255,255,255,0.06);--code-bg:#111210;--code-inline-bg:rgba(255,255,255,0.08);--code-text:#F1F0EA;--pre-text:#ECEBE4; + --topbar-bg:rgba(21,22,20,0.92);--main-bg:#151614; + --error:#FF6B6B;--success:#72B39A;--warning:#E6B15C;--info:#C9C8C0; + --user-bubble-bg:#2E302D;--user-bubble-border:#454741;--user-bubble-text:#F4F3EC;--user-bubble-placeholder:#A7A79D; + --user-selection-bg:rgba(114,179,154,0.22);--user-selection-text:#FAF9F3; + } + :root[data-skin="codex"], + :root[data-skin="codex"] body{font-family:var(--font-ui)!important;font-weight:430;letter-spacing:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;} + :root[data-skin="codex"] .app-titlebar, + :root[data-skin="codex"] .rail, + :root[data-skin="codex"] .sidebar, + :root[data-skin="codex"] .rightpanel, + :root[data-skin="codex"] .topbar, + :root[data-skin="codex"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} + :root[data-skin="codex"] .main, + :root[data-skin="codex"] .chat, + :root[data-skin="codex"] .panel-view{background:var(--bg)!important;} + :root[data-skin="codex"] .app-titlebar-title, + :root[data-skin="codex"] .topbar-title, + :root[data-skin="codex"] .settings-section-title{letter-spacing:0!important;font-weight:600;} + :root[data-skin="codex"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} + :root[data-skin="codex"] .session-meta{font-size:10.5px;} + :root[data-skin="codex"][data-font-size="small"] .session-item{font-size:12px;} + :root[data-skin="codex"][data-font-size="small"] .session-meta{font-size:10px;} + :root[data-skin="codex"][data-font-size="large"] .session-item{font-size:13.5px;} + :root[data-skin="codex"][data-font-size="large"] .session-meta{font-size:12px;} + :root[data-skin="codex"][data-font-size="xlarge"] .session-item{font-size:14.5px;} + :root[data-skin="codex"][data-font-size="xlarge"] .session-meta{font-size:13px;} + :root[data-skin="codex"] .session-item.active{position:relative;padding:10px 12px 10px 18px;background:var(--surface-subtle-hover)!important;border:1px solid var(--border)!important;color:var(--text)!important;gap:8px;} + :root[data-skin="codex"] .session-item.active.streaming, + :root[data-skin="codex"] .session-item.active.unread, + :root[data-skin="codex"] .session-item.active.needs-attention, + :root[data-skin="codex"] .session-item.active:focus-within, + :root[data-skin="codex"] .session-item.active.menu-open{padding-right:40px;} + @media (hover:hover){:root[data-skin="codex"] .session-item.active:hover{padding-right:40px;}} + :root[data-skin="codex"] .session-item.active::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;border-radius:999px;background:color-mix(in srgb,var(--accent) 70%,var(--border2));opacity:.55;} + :root[data-skin="codex"] .session-item.active .session-title-row{gap:6px;} + :root[data-skin="codex"] .session-item.active .session-text{min-width:0;width:100%;} + :root[data-skin="codex"] .session-item.active .session-meta{margin-top:2px;} + :root[data-skin="codex"] .session-item.active .session-time{padding-left:4px;} + :root[data-skin="codex"] .session-item.active:hover .session-time:not(.is-hidden), + :root[data-skin="codex"] .session-item.active:focus-within .session-time:not(.is-hidden), + :root[data-skin="codex"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} + :root[data-skin="codex"] .session-item.active .session-lineage-count{height:17px;padding:0 6px;margin-left:0;background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--border);} + :root[data-skin="codex"] .session-item.active .session-title, + :root[data-skin="codex"] .session-item.active .session-meta, + :root[data-skin="codex"] .session-item.active .session-preview, + :root[data-skin="codex"] .session-item.active *{color:inherit!important;} + :root[data-skin="codex"] .composer-box{background:var(--surface)!important;border-color:var(--border2)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,0.07);} + :root.dark[data-skin="codex"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} + :root[data-skin="codex"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} + :root[data-skin="codex"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} + :root[data-skin="codex"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} + :root[data-skin="codex"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} + :root[data-skin="codex"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} + :root[data-skin="codex"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} + :root[data-skin="codex"] .msg-body code{font-size:.92em;} + :root[data-skin="codex"] .msg-body code, + :root[data-skin="codex"] .msg-body pre, + :root[data-skin="codex"] .msg-body table, + :root[data-skin="codex"] .preview-code, + :root[data-skin="codex"] .preview-md code, + :root[data-skin="codex"] .tool-card-name, + :root[data-skin="codex"] .tool-arg-key, + :root[data-skin="codex"] .tool-arg-val, + :root[data-skin="codex"] .tool-card-result pre, + :root[data-skin="codex"] .app-titlebar-sub{font-family:var(--font-mono)!important;} + :root[data-skin="codex"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} + :root[data-skin="codex"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} + :root[data-skin="codex"] .msg-row[data-role="user"] .msg-body{background:var(--user-bubble-bg)!important;border-color:var(--user-bubble-border)!important;border-radius:12px!important;color:var(--user-bubble-text)!important;} + :root[data-skin="codex"] .tool-card{background:var(--surface-subtle)!important;border-color:var(--border-muted)!important;border-left-color:var(--border2)!important;border-radius:8px!important;} + :root[data-skin="codex"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} + :root[data-skin="codex"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} + :root[data-skin="codex"] .tool-arg-key, + :root[data-skin="codex"] .tool-card-more, + :root[data-skin="codex"] .msg-body a{color:var(--accent-text)!important;} + :root[data-skin="codex"] .app-titlebar-icon rect, + :root[data-skin="codex"] .app-titlebar-icon path, + :root[data-skin="codex"] .app-titlebar-icon circle{color:var(--accent-text)!important;fill:var(--accent-text)!important;} + :root[data-skin="codex"] .workspace-panel-edge-toggle, + :root[data-skin="codex"] .scroll-to-bottom-btn, + :root[data-skin="codex"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} + :root.dark[data-skin="codex"] .workspace-panel-edge-toggle, + :root.dark[data-skin="codex"] .scroll-to-bottom-btn, + :root.dark[data-skin="codex"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} + :root[data-skin="codex"] #mainSettings .theme-pick-btn.active, + :root[data-skin="codex"] #mainSettings .skin-pick-btn.active, + :root[data-skin="codex"] #mainSettings .font-size-pick-btn.active{border-color:var(--border2)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;background:var(--surface)!important;} + :root[data-skin="codex"] .new-chat-btn, + :root[data-skin="codex"] button.send-btn:not(:disabled), + :root[data-skin="codex"] .btn.primary, + :root[data-skin="codex"] .update-primary, + :root[data-skin="codex"] .clarify-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:600!important;box-shadow:none!important;} + :root.dark[data-skin="codex"] .new-chat-btn, + :root.dark[data-skin="codex"] button.send-btn:not(:disabled), + :root.dark[data-skin="codex"] .btn.primary, + :root.dark[data-skin="codex"] .update-primary, + :root.dark[data-skin="codex"] .clarify-submit{color:#0D0D0D!important;} + :root[data-skin="codex"] .new-chat-btn:hover, + :root[data-skin="codex"] button.send-btn:not(:disabled):hover, + :root[data-skin="codex"] .btn.primary:hover, + :root[data-skin="codex"] .update-primary:hover, + :root[data-skin="codex"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} + /* ── Skin: Terracotta (warm IDE) ── + Full palette rewrite with Anthropic-inspired warm neutrals, soft contrast, + and muted Claude orange action chrome. Uses native system fonts so it stays local, + fast, and license-safe while feeling closer to modern code workbenches. */ + :root[data-skin="terracotta"]{ + color-scheme:light; + --bg:#FAF9F5;--sidebar:#F0EEE6;--surface:#FFFEFA;--surface-subtle:#F7F4EC;--surface-subtle-hover:#EEE9DE; + --border:#E8E6DC;--border2:#D7D2C4;--border-subtle:#F0EDE4;--border-muted:#DDD8CA; + --text:#30302E;--strong:#141413;--muted:#87867F;--em:#3D3D3A; + --accent:#D97757;--accent-hover:#C76345;--accent-bg:rgba(217,119,87,0.10);--accent-bg-strong:rgba(217,119,87,0.18);--accent-text:#A94F35; + --blue:#6396D6;--gold:#D97757;--focus-ring:rgba(217,119,87,0.28);--focus-glow:rgba(217,119,87,0.10); + --input-bg:#FFFEFA;--hover-bg:rgba(48,48,46,0.05);--code-bg:#F0EEE6;--code-inline-bg:rgba(48,48,46,0.065);--code-text:#30302E;--pre-text:#30302E; + --topbar-bg:rgba(250,249,245,0.96);--main-bg:#FAF9F5; + --error:#C15F3C;--success:#6EA100;--warning:#B87916;--info:#6396D6; + --user-bubble-bg:#F0EEE6;--user-bubble-border:#E2DED2;--user-bubble-text:#30302E;--user-bubble-placeholder:#87867F; + --user-selection-bg:rgba(217,119,87,0.24);--user-selection-text:#141413; + --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; + --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; + font-family:var(--font-ui); + } + :root.dark[data-skin="terracotta"]{ + color-scheme:dark; + --bg:#141413;--sidebar:#1E1D1A;--surface:#191917;--surface-subtle:#20201D;--surface-subtle-hover:#2A2925; + --border:#34332E;--border2:#4A473F;--border-subtle:#292824;--border-muted:#3D3A34; + --text:#EDEAE0;--strong:#FAF9F5;--muted:#B0AEA5;--em:#D8D4C8; + --accent:#D97757;--accent-hover:#E69072;--accent-bg:rgba(217,119,87,0.11);--accent-bg-strong:rgba(217,119,87,0.20);--accent-text:#E69072; + --blue:#7BA7DE;--gold:#D97757;--focus-ring:rgba(217,119,87,0.30);--focus-glow:rgba(217,119,87,0.12); + --input-bg:#191917;--hover-bg:rgba(237,234,224,0.055);--code-bg:#10100F;--code-inline-bg:rgba(237,234,224,0.08);--code-text:#F0EEE6;--pre-text:#EDEAE0; + --topbar-bg:rgba(20,20,19,0.94);--main-bg:#141413; + --error:#F08A6F;--success:#9BCB5A;--warning:#E6B15C;--info:#7BA7DE; + --user-bubble-bg:#282620;--user-bubble-border:#464238;--user-bubble-text:#FAF9F5;--user-bubble-placeholder:#B0AEA5; + --user-selection-bg:rgba(217,119,87,0.24);--user-selection-text:#FAF9F5; + } + :root[data-skin="terracotta"], + :root[data-skin="terracotta"] body{font-family:var(--font-ui)!important;font-weight:430;letter-spacing:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;} + :root[data-skin="terracotta"] .app-titlebar, + :root[data-skin="terracotta"] .rail, + :root[data-skin="terracotta"] .sidebar, + :root[data-skin="terracotta"] .rightpanel, + :root[data-skin="terracotta"] .topbar, + :root[data-skin="terracotta"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} + :root[data-skin="terracotta"] .main, + :root[data-skin="terracotta"] .chat, + :root[data-skin="terracotta"] .panel-view{background:var(--bg)!important;} + :root[data-skin="terracotta"] .app-titlebar-title, + :root[data-skin="terracotta"] .topbar-title, + :root[data-skin="terracotta"] .settings-section-title{letter-spacing:0!important;font-weight:600;} + :root[data-skin="terracotta"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} + :root[data-skin="terracotta"] .session-meta{font-size:10.5px;} + :root[data-skin="terracotta"][data-font-size="small"] .session-item{font-size:12px;} + :root[data-skin="terracotta"][data-font-size="small"] .session-meta{font-size:10px;} + :root[data-skin="terracotta"][data-font-size="large"] .session-item{font-size:13.5px;} + :root[data-skin="terracotta"][data-font-size="large"] .session-meta{font-size:12px;} + :root[data-skin="terracotta"][data-font-size="xlarge"] .session-item{font-size:14.5px;} + :root[data-skin="terracotta"][data-font-size="xlarge"] .session-meta{font-size:13px;} + :root[data-skin="terracotta"] .session-item.active{position:relative;padding:10px 12px 10px 18px;background:var(--surface-subtle-hover)!important;border:1px solid var(--border)!important;color:var(--text)!important;gap:8px;} + :root[data-skin="terracotta"] .session-item.active.streaming, + :root[data-skin="terracotta"] .session-item.active.unread, + :root[data-skin="terracotta"] .session-item.active.needs-attention, + :root[data-skin="terracotta"] .session-item.active:focus-within, + :root[data-skin="terracotta"] .session-item.active.menu-open{padding-right:40px;} + @media (hover:hover){:root[data-skin="terracotta"] .session-item.active:hover{padding-right:40px;}} + :root[data-skin="terracotta"] .session-item.active::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;border-radius:999px;background:color-mix(in srgb,var(--accent) 70%,var(--border2));opacity:.55;} + :root[data-skin="terracotta"] .session-item.active .session-title-row{gap:6px;} + :root[data-skin="terracotta"] .session-item.active .session-text{min-width:0;width:100%;} + :root[data-skin="terracotta"] .session-item.active .session-meta{margin-top:2px;} + :root[data-skin="terracotta"] .session-item.active .session-time{padding-left:4px;} + :root[data-skin="terracotta"] .session-item.active:hover .session-time:not(.is-hidden), + :root[data-skin="terracotta"] .session-item.active:focus-within .session-time:not(.is-hidden), + :root[data-skin="terracotta"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} + :root[data-skin="terracotta"] .session-item.active .session-lineage-count{height:17px;padding:0 6px;margin-left:0;background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--border);} + :root[data-skin="terracotta"] .session-item.active .session-title, + :root[data-skin="terracotta"] .session-item.active .session-meta, + :root[data-skin="terracotta"] .session-item.active .session-preview, + :root[data-skin="terracotta"] .session-item.active *{color:inherit!important;} + :root[data-skin="terracotta"] .composer-box{background:var(--surface)!important;border-color:var(--border2)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,0.07);} + :root.dark[data-skin="terracotta"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} + :root[data-skin="terracotta"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} + :root[data-skin="terracotta"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} + :root[data-skin="terracotta"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} + :root[data-skin="terracotta"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} + :root[data-skin="terracotta"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} + :root[data-skin="terracotta"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} + :root[data-skin="terracotta"] .msg-body code{font-size:.92em;} + :root[data-skin="terracotta"] .msg-body code, + :root[data-skin="terracotta"] .msg-body pre, + :root[data-skin="terracotta"] .msg-body table, + :root[data-skin="terracotta"] .preview-code, + :root[data-skin="terracotta"] .preview-md code, + :root[data-skin="terracotta"] .tool-card-name, + :root[data-skin="terracotta"] .tool-arg-key, + :root[data-skin="terracotta"] .tool-arg-val, + :root[data-skin="terracotta"] .tool-card-result pre, + :root[data-skin="terracotta"] .app-titlebar-sub{font-family:var(--font-mono)!important;} + :root[data-skin="terracotta"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} + :root[data-skin="terracotta"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} + :root[data-skin="terracotta"] .msg-row[data-role="user"] .msg-body{background:var(--user-bubble-bg)!important;border-color:var(--user-bubble-border)!important;border-radius:12px!important;color:var(--user-bubble-text)!important;} + :root[data-skin="terracotta"] .tool-card{background:var(--surface-subtle)!important;border-color:var(--border-muted)!important;border-left-color:var(--border2)!important;border-radius:8px!important;} + :root[data-skin="terracotta"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} + :root[data-skin="terracotta"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} + :root[data-skin="terracotta"] .tool-arg-key, + :root[data-skin="terracotta"] .tool-card-more, + :root[data-skin="terracotta"] .msg-body a{color:var(--accent-text)!important;} + :root[data-skin="terracotta"] .app-titlebar-icon rect, + :root[data-skin="terracotta"] .app-titlebar-icon path, + :root[data-skin="terracotta"] .app-titlebar-icon circle{color:var(--accent-text)!important;fill:var(--accent-text)!important;} + :root[data-skin="terracotta"] .workspace-panel-edge-toggle, + :root[data-skin="terracotta"] .scroll-to-bottom-btn, + :root[data-skin="terracotta"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} + :root.dark[data-skin="terracotta"] .workspace-panel-edge-toggle, + :root.dark[data-skin="terracotta"] .scroll-to-bottom-btn, + :root.dark[data-skin="terracotta"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} + :root[data-skin="terracotta"] #mainSettings .theme-pick-btn.active, + :root[data-skin="terracotta"] #mainSettings .skin-pick-btn.active, + :root[data-skin="terracotta"] #mainSettings .font-size-pick-btn.active{border-color:var(--border2)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;background:var(--surface)!important;} + :root[data-skin="terracotta"] .new-chat-btn, + :root[data-skin="terracotta"] button.send-btn:not(:disabled), + :root[data-skin="terracotta"] .btn.primary, + :root[data-skin="terracotta"] .update-primary, + :root[data-skin="terracotta"] .clarify-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:600!important;box-shadow:none!important;} + :root.dark[data-skin="terracotta"] .new-chat-btn, + :root.dark[data-skin="terracotta"] button.send-btn:not(:disabled), + :root.dark[data-skin="terracotta"] .btn.primary, + :root.dark[data-skin="terracotta"] .update-primary, + :root.dark[data-skin="terracotta"] .clarify-submit{color:#141413!important;} + :root[data-skin="terracotta"] .new-chat-btn:hover, + :root[data-skin="terracotta"] button.send-btn:not(:disabled):hover, + :root[data-skin="terracotta"] .btn.primary:hover, + :root[data-skin="terracotta"] .update-primary:hover, + :root[data-skin="terracotta"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} +/* ── Skin: GitHub (Graphite with GitHub accents) ── + Full palette rewrite with restrained graphite surfaces, soft contrast, + and GitHub Primer-inspired action chrome. Uses native system fonts so it stays local, + fast, and license-safe while feeling closer to modern code workbenches. */ + :root[data-skin="github"]{ + color-scheme:light; + --bg:#FFFFFF;--sidebar:#F3F3F3;--surface:#FFFFFF;--surface-subtle:#F7F7F7;--surface-subtle-hover:#EFEFEF; + --border:#E2E2E2;--border2:#CFCFCF;--border-subtle:#E8E8E8;--border-muted:#D6D6D6; + --text:#242424;--strong:#111111;--muted:#707070;--em:#4F4F4F; + --accent:#0969DA;--accent-hover:#0550AE;--accent-bg:#DDF4FF;--accent-bg-strong:rgba(9,105,218,0.18);--accent-text:#0969DA; + --blue:#0969DA;--gold:#0969DA;--focus-ring:rgba(9,105,218,0.30);--focus-glow:rgba(9,105,218,0.10); + --input-bg:#FFFFFF;--hover-bg:rgba(0,0,0,0.05);--code-bg:#F1F1F1;--code-inline-bg:rgba(0,0,0,0.06);--code-text:#242424;--pre-text:#242424; + --topbar-bg:rgba(255,255,255,0.94);--main-bg:#FFFFFF; + --error:#D1242F;--success:#1A7F37;--warning:#9A6700;--info:#0969DA; + --user-bubble-bg:#EFEFEF;--user-bubble-border:#DEDEDE;--user-bubble-text:#242424;--user-bubble-placeholder:#707070; + --user-selection-bg:rgba(0,0,0,0.16);--user-selection-text:#111111; + --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; + --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; + font-family:var(--font-ui); + } + :root.dark[data-skin="github"]{ + color-scheme:dark; + --bg:#151614;--sidebar:#242624;--surface:#1B1C1A;--surface-subtle:#20211F;--surface-subtle-hover:#292B28; + --border:#343631;--border2:#4B4D47;--border-subtle:#2A2C28;--border-muted:#3D3F3A; + --text:#ECEBE4;--strong:#FAF9F3;--muted:#A7A79D;--em:#D7D6CE; + --accent:#4493F8;--accent-hover:#58A6FF;--accent-bg:rgba(56,139,253,0.10);--accent-bg-strong:rgba(31,111,235,0.24);--accent-text:#58A6FF; + --blue:#58A6FF;--gold:#4493F8;--focus-ring:rgba(31,111,235,0.34);--focus-glow:rgba(31,111,235,0.12); + --input-bg:#1E1F1D;--hover-bg:rgba(255,255,255,0.06);--code-bg:#111210;--code-inline-bg:rgba(255,255,255,0.08);--code-text:#F1F0EA;--pre-text:#ECEBE4; + --topbar-bg:rgba(21,22,20,0.92);--main-bg:#151614; + --error:#FF7B72;--success:#3FB950;--warning:#D29922;--info:#58A6FF; + --user-bubble-bg:#2E302D;--user-bubble-border:#454741;--user-bubble-text:#F4F3EC;--user-bubble-placeholder:#A7A79D; + --user-selection-bg:rgba(255,255,255,0.18);--user-selection-text:#FAF9F3; + } + :root[data-skin="github"], + :root[data-skin="github"] body{font-family:var(--font-ui)!important;font-weight:430;letter-spacing:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;} + :root[data-skin="github"] .app-titlebar, + :root[data-skin="github"] .rail, + :root[data-skin="github"] .sidebar, + :root[data-skin="github"] .rightpanel, + :root[data-skin="github"] .topbar, + :root[data-skin="github"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} + :root[data-skin="github"] .main, + :root[data-skin="github"] .chat, + :root[data-skin="github"] .panel-view{background:var(--bg)!important;} + :root[data-skin="github"] .app-titlebar-title, + :root[data-skin="github"] .topbar-title, + :root[data-skin="github"] .settings-section-title{letter-spacing:0!important;font-weight:600;} + :root[data-skin="github"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} + :root[data-skin="github"] .session-meta{font-size:10.5px;} + :root[data-skin="github"][data-font-size="small"] .session-item{font-size:12px;} + :root[data-skin="github"][data-font-size="small"] .session-meta{font-size:10px;} + :root[data-skin="github"][data-font-size="large"] .session-item{font-size:13.5px;} + :root[data-skin="github"][data-font-size="large"] .session-meta{font-size:12px;} + :root[data-skin="github"][data-font-size="xlarge"] .session-item{font-size:14.5px;} + :root[data-skin="github"][data-font-size="xlarge"] .session-meta{font-size:13px;} + :root[data-skin="github"] .session-item.active{position:relative;padding:10px 12px 10px 18px;background:var(--surface-subtle-hover)!important;border:1px solid var(--border)!important;color:var(--text)!important;gap:8px;} + :root[data-skin="github"] .session-item.active.streaming, + :root[data-skin="github"] .session-item.active.unread, + :root[data-skin="github"] .session-item.active.needs-attention, + :root[data-skin="github"] .session-item.active:focus-within, + :root[data-skin="github"] .session-item.active.menu-open{padding-right:40px;} + @media (hover:hover){:root[data-skin="github"] .session-item.active:hover{padding-right:40px;}} + :root[data-skin="github"] .session-item.active::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;border-radius:999px;background:color-mix(in srgb,var(--accent) 70%,var(--border2));opacity:.55;} + :root[data-skin="github"] .session-item.active .session-title-row{gap:6px;} + :root[data-skin="github"] .session-item.active .session-text{min-width:0;width:100%;} + :root[data-skin="github"] .session-item.active .session-meta{margin-top:2px;} + :root[data-skin="github"] .session-item.active .session-time{padding-left:4px;} + :root[data-skin="github"] .session-item.active:hover .session-time:not(.is-hidden), + :root[data-skin="github"] .session-item.active:focus-within .session-time:not(.is-hidden), + :root[data-skin="github"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} + :root[data-skin="github"] .session-item.active .session-lineage-count{height:17px;padding:0 6px;margin-left:0;background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--border);} + :root[data-skin="github"] .session-item.active .session-title, + :root[data-skin="github"] .session-item.active .session-meta, + :root[data-skin="github"] .session-item.active .session-preview, + :root[data-skin="github"] .session-item.active *{color:inherit!important;} + :root[data-skin="github"] .composer-box{background:var(--surface)!important;border-color:var(--border2)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,0.07);} + :root.dark[data-skin="github"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} + :root[data-skin="github"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} + :root[data-skin="github"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} + :root[data-skin="github"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} + :root[data-skin="github"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} + :root[data-skin="github"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} + :root[data-skin="github"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} + :root[data-skin="github"] .msg-body code{font-size:.92em;} + :root[data-skin="github"] .msg-body code, + :root[data-skin="github"] .msg-body pre, + :root[data-skin="github"] .msg-body table, + :root[data-skin="github"] .preview-code, + :root[data-skin="github"] .preview-md code, + :root[data-skin="github"] .tool-card-name, + :root[data-skin="github"] .tool-arg-key, + :root[data-skin="github"] .tool-arg-val, + :root[data-skin="github"] .tool-card-result pre, + :root[data-skin="github"] .app-titlebar-sub{font-family:var(--font-mono)!important;} + :root[data-skin="github"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} + :root[data-skin="github"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} + :root[data-skin="github"] .msg-row[data-role="user"] .msg-body{background:var(--user-bubble-bg)!important;border-color:var(--user-bubble-border)!important;border-radius:12px!important;color:var(--user-bubble-text)!important;} + :root[data-skin="github"] .tool-card{background:var(--surface-subtle)!important;border-color:var(--border-muted)!important;border-left-color:var(--border2)!important;border-radius:8px!important;} + :root[data-skin="github"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} + :root[data-skin="github"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} + :root[data-skin="github"] .tool-arg-key, + :root[data-skin="github"] .tool-card-more, + :root[data-skin="github"] .msg-body a{color:var(--accent-text)!important;} + :root[data-skin="github"] .app-titlebar-icon rect, + :root[data-skin="github"] .app-titlebar-icon path, + :root[data-skin="github"] .app-titlebar-icon circle{color:var(--accent-text)!important;fill:var(--accent-text)!important;} + :root[data-skin="github"] .workspace-panel-edge-toggle, + :root[data-skin="github"] .scroll-to-bottom-btn, + :root[data-skin="github"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} + :root.dark[data-skin="github"] .workspace-panel-edge-toggle, + :root.dark[data-skin="github"] .scroll-to-bottom-btn, + :root.dark[data-skin="github"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} + :root[data-skin="github"] #mainSettings .theme-pick-btn.active, + :root[data-skin="github"] #mainSettings .skin-pick-btn.active, + :root[data-skin="github"] #mainSettings .font-size-pick-btn.active{border-color:var(--border2)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;background:var(--surface)!important;} + :root[data-skin="github"] .new-chat-btn, + :root[data-skin="github"] button.send-btn:not(:disabled), + :root[data-skin="github"] .btn.primary, + :root[data-skin="github"] .update-primary, + :root[data-skin="github"] .clarify-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:600!important;box-shadow:none!important;} + :root.dark[data-skin="github"] .new-chat-btn, + :root.dark[data-skin="github"] button.send-btn:not(:disabled), + :root.dark[data-skin="github"] .btn.primary, + :root.dark[data-skin="github"] .update-primary, + :root.dark[data-skin="github"] .clarify-submit{color:#151614!important;} + :root[data-skin="github"] .new-chat-btn:hover, + :root[data-skin="github"] button.send-btn:not(:disabled):hover, + :root[data-skin="github"] .btn.primary:hover, + :root[data-skin="github"] .update-primary:hover, + :root[data-skin="github"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} /* ── Skin: Slate (blue-gray) ── */ :root[data-skin="slate"]{--accent:#475569;--accent-hover:#334155;--accent-bg:rgba(71,85,105,0.08);--accent-bg-strong:rgba(71,85,105,0.15);--accent-text:#334155;} :root.dark[data-skin="slate"]{--accent:#94A3B8;--accent-hover:#64748B;--accent-bg:rgba(148,163,184,0.08);--accent-bg-strong:rgba(148,163,184,0.15);--accent-text:#94A3B8;}