Merge pull request #5074 from nesquena/stage/skins-batch
Release: 3 new opt-in skins (GitHub, Codex, Terracotta)
This commit is contained in:
4 files changed
+398
-1
No files matched your search
@@ -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)
|
||||
|
||||
@@ -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']},
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Hermes">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="static/apple-touch-icon.png">
|
||||
<script>(function(){try{var themes={light:1,dark:1,system:1},skins={default:1,ares:1,mono:1,graphite:1,slate:1,poseidon:1,sisyphus:1,charizard:1,sienna:1,catppuccin:1,hepburn:1,nous:1,'geist-contrast':1,neon:1,zeus:1,'verdigris':1},legacy={slate:['dark','slate'],solarized:['dark','poseidon'],monokai:['dark','sisyphus'],nord:['dark','slate'],oled:['dark','default']},t=(localStorage.getItem('hermes-theme')||'dark').toLowerCase(),s=(localStorage.getItem('hermes-skin')||'').toLowerCase(),m=legacy[t],theme=m?m[0]:(themes[t]?t:'dark'),skin=skins[s]?s:(m?m[1]:'default');localStorage.setItem('hermes-theme',theme);localStorage.setItem('hermes-skin',skin);if(theme==='system')theme=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';if(theme==='dark')document.documentElement.classList.add('dark');if(skin!=='default')document.documentElement.dataset.skin=skin;}catch(e){document.documentElement.classList.add('dark');}})()</script>
|
||||
<script>(function(){try{var themes={light:1,dark:1,system:1},skins={codex:1,terracotta:1,default:1,ares:1,mono:1,graphite:1,github:1,slate:1,poseidon:1,sisyphus:1,charizard:1,sienna:1,catppuccin:1,hepburn:1,nous:1,'geist-contrast':1,neon:1,zeus:1,'verdigris':1},legacy={slate:['dark','slate'],solarized:['dark','poseidon'],monokai:['dark','sisyphus'],nord:['dark','slate'],oled:['dark','default']},t=(localStorage.getItem('hermes-theme')||'dark').toLowerCase(),s=(localStorage.getItem('hermes-skin')||'').toLowerCase(),m=legacy[t],theme=m?m[0]:(themes[t]?t:'dark'),skin=skins[s]?s:(m?m[1]:'default');localStorage.setItem('hermes-theme',theme);localStorage.setItem('hermes-skin',skin);if(theme==='system')theme=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';if(theme==='dark')document.documentElement.classList.add('dark');if(skin!=='default')document.documentElement.dataset.skin=skin;}catch(e){document.documentElement.classList.add('dark');}})()</script>
|
||||
<script>(function(){try{var fs=localStorage.getItem('hermes-font-size');if(fs&&fs!=='default')document.documentElement.dataset.fontSize=fs;}catch(e){}})()</script>
|
||||
<!-- theme-color: surfaces the active app chrome color to native status bars (Safari status bar, PWA, native WKWebView wrappers). Updated dynamically by boot.js when theme/skin changes. The light/dark default values match style.css :root --sidebar / :root.dark --sidebar. -->
|
||||
<meta name="theme-color" content="#FAF7F0" media="(prefers-color-scheme: light)">
|
||||
|
||||
@@ -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;}
|
||||
|
||||
Reference in new issue
Block a user