diff --git a/api/config.py b/api/config.py index 5f85c595..19721d49 100644 --- a/api/config.py +++ b/api/config.py @@ -7890,6 +7890,8 @@ _SETTINGS_SKIN_VALUES = { "geist-contrast", "zeus", "verdigris", + "neon-soft", + "neon-paint", } _SETTINGS_LEGACY_THEME_MAP = { # Legacy full themes now map onto the closest supported theme + accent skin pair. diff --git a/static/boot.js b/static/boot.js index 79695372..1e5820d3 100644 --- a/static/boot.js +++ b/static/boot.js @@ -2022,6 +2022,8 @@ const _SKINS=[ {name:'Hepburn', colors:['#c6246a','#ec5597','#f2abca']}, {name:'Nous', colors:['#4682B4','#3A6E9A','#2C5F88']}, {name:'Neon', colors:['#B347FF','#C76BFF','#00DDFF']}, + {name:'Neon Soft', value:'neon-soft', colors:['#B347FF','#C76BFF','#00DDFF']}, + {name:'Neon Paint', value:'neon-paint', colors:['#FF2D95','#00E5FF','#FFB800']}, {name:'Geist Contrast', value:'geist-contrast', colors:['#000000','#ffffff','#FFF175']}, {name:'Zeus', colors:['#FFD700','#FFBF00','#1A1A00']}, {name:'Verdigris', value:'verdigris', colors:['#C89A5A','#0F1714','#22342C']}, diff --git a/static/index.html b/static/index.html index 0057db11..fab84cd3 100644 --- a/static/index.html +++ b/static/index.html @@ -17,7 +17,7 @@ - + diff --git a/static/style.css b/static/style.css index 42aec92f..0c36f861 100644 --- a/static/style.css +++ b/static/style.css @@ -1134,6 +1134,138 @@ :root.dark[data-skin="neon"] a{color:var(--info);transition:text-shadow 0.2s;} :root.dark[data-skin="neon"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);} + /* ═══ NEON SOFT — lighter dark-mode surfaces with the same neon purple/cyan palette ═══ */ + :root[data-skin="neon-soft"]{ + --bg:#F8F7FC;--sidebar:#F0EEF8;--border:#D8D4EC;--border2:rgba(0,0,0,0.12); + --text:#1E1B2E;--muted:#6E6888;--accent:#9333EA;--blue:#7C3AED;--gold:#A855F7;--code-bg:#F0EDF8; + --surface:#FFFFFF;--topbar-bg:rgba(248,247,252,.98);--main-bg:rgba(248,247,252,0.5); + --focus-ring:rgba(147,51,234,.3);--focus-glow:rgba(147,51,234,.08); + --input-bg:rgba(147,51,234,.03);--hover-bg:rgba(147,51,234,.05); + --strong:#0D0B14;--em:#7C3AED;--code-text:#6D28D9;--code-inline-bg:rgba(147,51,234,.08);--pre-text:#1E1B2E; + --accent-hover:#7E22CE;--accent-bg:rgba(147,51,234,0.06);--accent-bg-strong:rgba(147,51,234,0.12);--accent-text:#6D28D9; + --error:#DC2626;--success:#059669;--warning:#D97706;--info:#7C3AED; + --radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px; + --font-ui:system-ui,-apple-system,sans-serif; + --surface-subtle:rgba(147,51,234,.025);--surface-subtle-hover:rgba(147,51,234,.05); + --border-subtle:rgba(147,51,234,.08);--border-muted:rgba(147,51,234,.12); + --purple:#9333EA; + } + :root.dark[data-skin="neon-soft"]{ + --bg:#181428;--sidebar:#141024;--border:#2a2448;--border2:rgba(179,71,255,0.15); + --text:#e8e6f8;--muted:#8a85aa;--accent:#b347ff;--blue:#a78bfa;--gold:#c084fc;--code-bg:#121020; + --surface:#1c1732;--topbar-bg:rgba(24,20,40,.98);--main-bg:rgba(24,20,40,0.5); + --focus-ring:rgba(179,71,255,.35);--focus-glow:rgba(179,71,255,.10); + --input-bg:rgba(179,71,255,.04);--hover-bg:rgba(179,71,255,.06); + --strong:#f8f6ff;--em:#00ddff;--code-text:#c8c0f0;--code-inline-bg:rgba(179,71,255,.10);--pre-text:#e8e6f8; + --accent-hover:#c76bff;--accent-bg:rgba(179,71,255,0.10);--accent-bg-strong:rgba(179,71,255,0.20);--accent-text:#c8a0ff; + --error:#ff4466;--success:#00dd88;--warning:#ffaa33;--info:#00ddff; + --surface-subtle:rgba(179,71,255,.03);--surface-subtle-hover:rgba(179,71,255,.06); + --border-subtle:rgba(179,71,255,.08);--border-muted:rgba(179,71,255,.12); + --purple:#b347ff; + } + /* Neon Soft: component-level overrides (same as Neon, targeting neon-soft) */ + :root.dark[data-skin="neon-soft"] ::selection{background:rgba(179,71,255,0.35);color:#fff;} + :root.dark[data-skin="neon-soft"] .app-titlebar{border-bottom-color:rgba(179,71,255,0.2);} + :root.dark[data-skin="neon-soft"] .sidebar{box-shadow:inset -1px 0 30px rgba(179,71,255,0.03);} + :root.dark[data-skin="neon-soft"] textarea:focus, + :root.dark[data-skin="neon-soft"] input[type="text"]:focus, + :root.dark[data-skin="neon-soft"] input[type="password"]:focus, + :root.dark[data-skin="neon-soft"] select:focus{box-shadow:0 0 16px rgba(179,71,255,0.2);} + :root.dark[data-skin="neon-soft"] button.send-btn{box-shadow:0 0 14px rgba(179,71,255,0.25);} + :root.dark[data-skin="neon-soft"] button.send-btn:hover{box-shadow:0 0 24px rgba(179,71,255,0.45);} + :root.dark[data-skin="neon-soft"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 12px rgba(179,71,255,0.2);} + :root.dark[data-skin="neon-soft"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 20px rgba(179,71,255,0.35);} + :root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb{background:rgba(179,71,255,.18);border-radius:3px;} + :root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb:hover{background:rgba(179,71,255,.30);} + :root.dark[data-skin="neon-soft"]{scrollbar-width:thin;scrollbar-color:rgba(179,71,255,.18) transparent;} + :root.dark[data-skin="neon-soft"] .tool-card{background:rgba(179,71,255,0.03);border-color:rgba(179,71,255,0.08);} + :root.dark[data-skin="neon-soft"] .tool-card:hover{border-color:rgba(179,71,255,0.2);} + :root.dark[data-skin="neon-soft"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);} + :root.dark[data-skin="neon-soft"] .tool-card-name{color:var(--muted);font-weight:500;} + :root.dark[data-skin="neon-soft"] .tool-arg-key, + :root.dark[data-skin="neon-soft"] .tool-card-more{color:var(--accent-text);} + :root.dark[data-skin="neon-soft"] .tool-card-running-dot{background:var(--accent);} + :root.dark[data-skin="neon-soft"] .tree-key{color:#b347ff;} + :root.dark[data-skin="neon-soft"] .tree-str{color:#c8a0ff;} + :root.dark[data-skin="neon-soft"] .tree-num{color:#00ddff;} + :root.dark[data-skin="neon-soft"] .tree-bool{color:#b347ff;} + :root.dark[data-skin="neon-soft"] .session-child-count{background:rgba(179,71,255,.16);color:#c8a0ff;} + :root.dark[data-skin="neon-soft"] .session-child-count:hover{background:rgba(179,71,255,.26);color:#d8c0ff;} + :root.dark[data-skin="neon-soft"] .session-tree-badge{background:rgba(179,71,255,.2);color:#c8a0ff;} + :root.dark[data-skin="neon-soft"] .session-tag{background:rgba(179,71,255,.2);color:#c8a0ff;} + :root.dark[data-skin="neon-soft"] .diff-block .diff-plus{color:#b347ff;} + :root.dark[data-skin="neon-soft"] .mcp-http{color:#c8a0ff;} + :root.dark[data-skin="neon-soft"] .mcp-status-active{color:#00dd88;} + :root.dark[data-skin="neon-soft"] .img-lightbox-close:hover{background:rgba(179,71,255,.35);} + :root.dark[data-skin="neon-soft"] a{color:var(--info);transition:text-shadow 0.2s;} + :root.dark[data-skin="neon-soft"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);} + + /* ═══ NEON PAINT — cyberpunk noodle bar: hot pink + electric cyan + warm amber on deep purple-gray ═══ */ + :root[data-skin="neon-paint"]{ + --bg:#F5F0FF;--sidebar:#EDE6F8;--border:#D4C8EE;--border2:rgba(0,0,0,0.12); + --text:#1A1028;--muted:#6E5A88;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#EDE6F8; + --surface:#FFFFFF;--topbar-bg:rgba(245,240,255,.98);--main-bg:rgba(245,240,255,0.5); + --focus-ring:rgba(255,45,149,.3);--focus-glow:rgba(255,45,149,.08); + --input-bg:rgba(255,45,149,.03);--hover-bg:rgba(255,45,149,.05); + --strong:#0D0518;--em:#00E5FF;--code-text:#D81B60;--code-inline-bg:rgba(255,45,149,.08);--pre-text:#1A1028; + --accent-hover:#E91E80;--accent-bg:rgba(255,45,149,0.06);--accent-bg-strong:rgba(255,45,149,0.12);--accent-text:#C2185B; + --error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF; + --radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px; + --font-ui:system-ui,-apple-system,sans-serif; + --surface-subtle:rgba(255,45,149,.025);--surface-subtle-hover:rgba(255,45,149,.05); + --border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12); + --purple:#FF2D95; + } + :root.dark[data-skin="neon-paint"]{ + --bg:#0D0A16;--sidebar:#0A0712;--border:#2a1f40;--border2:rgba(255,45,149,0.15); + --text:#f0e8ff;--muted:#9a8ab8;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#080510; + --surface:#12101e;--topbar-bg:rgba(13,10,22,.98);--main-bg:rgba(13,10,22,0.5); + --focus-ring:rgba(255,45,149,.4);--focus-glow:rgba(255,45,149,.12); + --input-bg:rgba(255,45,149,.04);--hover-bg:rgba(255,45,149,.06); + --strong:#fff5ff;--em:#00E5FF;--code-text:#f0c0e8;--code-inline-bg:rgba(255,45,149,.12);--pre-text:#f0e8ff; + --accent-hover:#FF59A8;--accent-bg:rgba(255,45,149,0.10);--accent-bg-strong:rgba(255,45,149,0.20);--accent-text:#FF80BF; + --error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF; + --surface-subtle:rgba(255,45,149,.03);--surface-subtle-hover:rgba(255,45,149,.06); + --border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12); + --purple:#FF2D95; + } + /* Neon Paint: component-level overrides */ + :root.dark[data-skin="neon-paint"] ::selection{background:rgba(255,45,149,0.4);color:#fff;} + :root.dark[data-skin="neon-paint"] .app-titlebar{border-bottom-color:rgba(255,45,149,0.25);} + :root.dark[data-skin="neon-paint"] .sidebar{box-shadow:inset -1px 0 30px rgba(255,45,149,0.04);} + :root.dark[data-skin="neon-paint"] textarea:focus, + :root.dark[data-skin="neon-paint"] input[type="text"]:focus, + :root.dark[data-skin="neon-paint"] input[type="password"]:focus, + :root.dark[data-skin="neon-paint"] select:focus{box-shadow:0 0 18px rgba(255,45,149,0.25);} + :root.dark[data-skin="neon-paint"] button.send-btn{box-shadow:0 0 16px rgba(255,45,149,0.3);} + :root.dark[data-skin="neon-paint"] button.send-btn:hover{box-shadow:0 0 28px rgba(255,45,149,0.5);} + :root.dark[data-skin="neon-paint"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 14px rgba(255,45,149,0.25);} + :root.dark[data-skin="neon-paint"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 24px rgba(255,45,149,0.4);} + :root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb{background:rgba(255,45,149,.20);border-radius:3px;} + :root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb:hover{background:rgba(255,45,149,.35);} + :root.dark[data-skin="neon-paint"]{scrollbar-width:thin;scrollbar-color:rgba(255,45,149,.20) transparent;} + :root.dark[data-skin="neon-paint"] .tool-card{background:rgba(255,45,149,0.03);border-color:rgba(255,45,149,0.08);} + :root.dark[data-skin="neon-paint"] .tool-card:hover{border-color:rgba(255,45,149,0.25);} + :root.dark[data-skin="neon-paint"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);} + :root.dark[data-skin="neon-paint"] .tool-card-name{color:var(--muted);font-weight:500;} + :root.dark[data-skin="neon-paint"] .tool-arg-key, + :root.dark[data-skin="neon-paint"] .tool-card-more{color:var(--accent-text);} + :root.dark[data-skin="neon-paint"] .tool-card-running-dot{background:var(--accent);} + :root.dark[data-skin="neon-paint"] .tree-key{color:#FF2D95;} + :root.dark[data-skin="neon-paint"] .tree-str{color:#FF80BF;} + :root.dark[data-skin="neon-paint"] .tree-num{color:#00E5FF;} + :root.dark[data-skin="neon-paint"] .tree-bool{color:#FF2D95;} + :root.dark[data-skin="neon-paint"] .session-child-count{background:rgba(255,45,149,.16);color:#FF80BF;} + :root.dark[data-skin="neon-paint"] .session-child-count:hover{background:rgba(255,45,149,.28);color:#FFA0D0;} + :root.dark[data-skin="neon-paint"] .session-tree-badge{background:rgba(255,45,149,.2);color:#FF80BF;} + :root.dark[data-skin="neon-paint"] .session-tag{background:rgba(255,45,149,.2);color:#FF80BF;} + :root.dark[data-skin="neon-paint"] .diff-block .diff-plus{color:#FF2D95;} + :root.dark[data-skin="neon-paint"] .mcp-http{color:#FF80BF;} + :root.dark[data-skin="neon-paint"] .mcp-status-active{color:#00E676;} + :root.dark[data-skin="neon-paint"] .img-lightbox-close:hover{background:rgba(255,45,149,.35);} + :root.dark[data-skin="neon-paint"] a{color:var(--info);transition:text-shadow 0.2s;} + :root.dark[data-skin="neon-paint"] a:hover{text-shadow:0 0 10px rgba(0,229,255,0.5);} + /* ═══ VERDIGRIS — emerald/bronze dashboard palette (dark-only) ═══ */ :root.dark[data-skin="verdigris"]{ --bg:#0F1714;--sidebar:#121D18;--border:#22342C;--border2:rgba(200,154,90,0.10);