Cherry Studio✨ TokyoNight × 奶油手账 杂志风格主题(0320更新)

2026-04-11 13:071阅读0评论SEO资讯
  • 内容介绍
  • 文章标签
  • 相关推荐
问题描述:

一个尝试打破常规 Cherry Studio 主题范式的 CSS 主题。

2026/3/20 优化

  • 引言符号遮挡
  • 暗色视觉小幅优化

2026/3/18 优化

  • 修复浅色输入框颜色断层
  • 对ELE框架流畅度略作调优

2026/3/17 优化

  • 浅色模式Tooltip颜色修复
  • 助手栏字重加粗

2026/3/16 优化

  • 优化两端对齐布局
  • 优化亮色模式下首字下沉效果
  • 优化引言的显示方式
  • 优化分割线样式
  • 弹窗输入框背景色优化

效果展示

暗色模式 — TokyoNight Storm

回复区域完全透明,左侧蓝紫渐变线替代传统气泡。学术排版优雅三线表。

20260316_191106_3671506×1582 291 KB
20260316_191055_7441506×1582 228 KB

亮色模式 — 奶油手账 Cream Journal

手帐风格胶带装饰,回复是纯文字流。整体奶油纸底色护眼优化。

20260316_191048_1021506×1582 218 KB
20260316_191025_8531506×1582 281 KB

更多细节,欢迎试吃

CSS

点击展开完整 CSS

/* =========================================================== Cherry Studio Theme: TokyoNight × 奶油手账 v3 Dark: TokyoNight Storm — 禅意文字流 + 终端扫描线 Light: Cream Journal — 粗野主义硬阴影 + 学术排版 =========================================================== */ /* ===== Font Imports ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap'); @import url('https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===== Private Theme Variables ===== */ :root { /* --- TokyoNight Storm --- */ --tn-bg-storm: #1a1b2e; --tn-bg-deep: #16172b; --tn-bg-surface: #1e1f3b; --tn-bg-elevated: #252748; --tn-bg-float: #2a2c54; --tn-blue: #7aa2f7; --tn-blue-dim: #5d7ec7; --tn-cyan: #7dcfff; --tn-magenta: #bb9af7; --tn-magenta-dim: #9d7cd8; --tn-green: #9ece6a; --tn-orange: #ff9e64; --tn-red: #f7768e; --tn-yellow: #e0af68; --tn-text-bright: #c0caf5; --tn-text-normal: #a9b1d6; --tn-text-dim: #565f89; --tn-text-faint: #414868; --tn-border: rgba(122,162,247,0.12); --tn-border-subtle: rgba(122,162,247,0.06); --tn-blue-rgb: 122,162,247; --tn-cyan-rgb: 125,207,255; --tn-magenta-rgb: 187,154,247; --tn-storm-rgb: 26,27,46; --tn-surface-rgb: 30,31,59; --tn-text-rgb: 192,202,245; /* --- Cream Journal 奶油手账 --- */ --cj-bg-paper: #f2ebe0; --cj-bg-warm: #ebe3d5; --cj-bg-card: #f7f0e6; --cj-bg-soft: #e4dace; --cj-bg-kraft: #d8cfc2; --cj-rose: #c96b73; --cj-rose-soft: #dda0a6; --cj-sage: #7d9e72; --cj-lavender: #8e82b5; --cj-caramel: #b8906a; --cj-cocoa: #6b5b4e; --cj-text-ink: #3a3025; --cj-text-pencil: #665a4e; --cj-text-faint: #9e9286; --cj-border: rgba(107,91,78,0.14); --cj-border-subtle: rgba(107,91,78,0.07); --cj-rose-rgb: 201,107,115; --cj-sage-rgb: 125,158,114; --cj-lavender-rgb: 142,130,181; --cj-caramel-rgb: 184,144,106; --cj-paper-rgb: 242,235,224; --cj-card-rgb: 247,240,230; --cj-ink-rgb: 58,48,37; --cj-kraft-rgb: 216,207,194; /* --- Brutalist tokens (亮色用) --- */ --brutal-shadow: 3px 3px 0px rgba(var(--cj-ink-rgb),0.15); --brutal-shadow-sm: 2px 2px 0px rgba(var(--cj-ink-rgb),0.1); --brutal-pressed: 1px 1px 0px rgba(var(--cj-ink-rgb),0.1); --brutal-border: 1.5px solid rgba(var(--cj-ink-rgb),0.12); /* --- Layout --- */ --cherry-line-width: 0.5px; --cherry-radius-container: 14px; --cherry-radius-item: 8px; --cherry-radius-brutal: 10px; } /* ==================================================== DARK MODE — TokyoNight Storm ==================================================== */ body[theme-mode='dark'] { --color-background: var(--tn-bg-storm); --color-background-soft: var(--tn-bg-surface); --color-background-mute: var(--tn-bg-elevated); --color-text-1: var(--tn-text-bright); --color-text-2: var(--tn-text-normal); --color-text-3: var(--tn-text-dim); --color-border: var(--tn-border); --color-primary: var(--tn-blue); --color-primary-soft: rgba(var(--tn-blue-rgb),0.45); --color-primary-mute: rgba(var(--tn-blue-rgb),0.15); --color-text: var(--color-text-1); --color-text-secondary: var(--tn-text-normal); --color-code-background: #1a1b2e; --color-inline-code-background: rgba(var(--tn-magenta-rgb),0.1); --color-inline-code-text: var(--tn-magenta); --color-link: var(--tn-cyan); --color-reference: var(--tn-bg-float); --color-reference-text: var(--tn-text-bright); --color-reference-background: var(--tn-bg-deep); --color-hover: rgba(var(--tn-blue-rgb),0.06); --color-active: rgba(var(--tn-blue-rgb),0.1); --color-list-item: rgba(var(--tn-blue-rgb),0.06); --color-list-item-hover: rgba(var(--tn-blue-rgb),0.1); --chat-background: transparent; --chat-background-user: rgba(var(--tn-surface-rgb),0.7); --chat-background-assistant: transparent; --chat-text-user: var(--tn-text-bright); --modal-background: var(--tn-bg-deep); --color-background-opacity: rgba(var(--tn-storm-rgb),0.85); --navbar-background: var(--tn-bg-deep); --navbar-background-mac: rgba(var(--tn-storm-rgb),0.65); --color-icon: rgba(var(--tn-text-rgb),0.55); --color-icon-white: var(--tn-text-bright); --color-border-soft: var(--tn-border-subtle); --color-border-mute: rgba(var(--tn-blue-rgb),0.03); --color-frame-border: var(--tn-bg-elevated); --color-error: var(--tn-red); --color-status-success: var(--tn-green); --color-status-warning: var(--tn-yellow); --color-white: #c0caf5; --color-white-soft: rgba(192,202,245,0.08); --color-white-mute: rgba(192,202,245,0.04); --color-black: #1a1b2e; --color-black-soft: #1e1f3b; --color-black-mute: #252748; --color-black-rgb: 26,27,46; --color-white-rgb: 192,202,245; --color-gray-1: #565f89; --color-gray-2: #414868; --color-gray-3: #3b3d57; --color-group-background: var(--tn-bg-surface); --antd-arrow-background-color: var(--tn-bg-float); --color-scrollbar-thumb: rgba(var(--tn-blue-rgb),0.15); --color-scrollbar-thumb-hover: rgba(var(--tn-blue-rgb),0.25); --color-highlight: rgba(0,0,0,1); --color-background-highlight: rgba(224,175,104,0.7); --color-background-highlight-accent: rgba(255,158,100,0.8); --selection-toolbar-background: rgba(var(--tn-surface-rgb),0.92); --selection-toolbar-border: 1px solid var(--tn-border); --selection-toolbar-box-shadow: 0 4px 16px rgba(0,0,0,0.3); --selection-toolbar-button-text-color: var(--tn-text-normal); --selection-toolbar-button-icon-color: var(--tn-text-dim); --selection-toolbar-button-bgcolor-hover: rgba(var(--tn-blue-rgb),0.12); --selection-toolbar-buttons-border-color: var(--tn-border); --font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --font-family-serif: 'Noto Serif SC', 'LXGW WenKai Screen', serif; --code-font-family: 'JetBrains Mono', 'Fira Code', monospace; --material-line-width: var(--cherry-line-width); --container-border-radius: var(--cherry-radius-container); --list-item-border-radius: var(--cherry-radius-item); /* 🔭 暗色微网格背景 */ background-color: var(--tn-bg-storm); background-image: linear-gradient(rgba(var(--tn-blue-rgb),0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tn-blue-rgb),0.02) 1px, transparent 1px); background-size: 32px 32px; } /* ==================================================== LIGHT MODE — Cream Journal (奶油手账) ==================================================== */ body[theme-mode='light'] { --color-background: var(--cj-bg-paper); --color-background-soft: var(--cj-bg-warm); --color-background-mute: var(--cj-bg-soft); --color-text-1: var(--cj-text-ink); --color-text-2: var(--cj-text-pencil); --color-text-3: var(--cj-text-faint); --color-border: var(--cj-border); --color-primary: var(--cj-rose); --color-primary-soft: rgba(var(--cj-rose-rgb),0.35); --color-primary-mute: rgba(var(--cj-rose-rgb),0.1); --color-text: var(--color-text-1); --color-text-secondary: var(--cj-text-pencil); --color-code-background: var(--cj-bg-soft); --color-inline-code-background: rgba(var(--cj-rose-rgb),0.08); --color-inline-code-text: #a34e58; --color-link: var(--cj-sage); --color-reference: var(--cj-bg-warm); --color-reference-text: var(--cj-text-ink); --color-reference-background: var(--cj-bg-card); --color-hover: rgba(var(--cj-rose-rgb),0.05); --color-active: rgba(var(--cj-rose-rgb),0.1); --color-list-item: rgba(var(--cj-ink-rgb),0.03); --color-list-item-hover: rgba(var(--cj-rose-rgb),0.06); --chat-background: transparent; --chat-background-user: var(--cj-bg-card); --chat-background-assistant: transparent; --chat-text-user: var(--cj-text-ink); --modal-background: var(--cj-bg-card); --color-background-opacity: rgba(var(--cj-paper-rgb),0.9); --navbar-background: var(--cj-bg-warm); --navbar-background-mac: rgba(var(--cj-paper-rgb),0.7); --color-icon: rgba(var(--cj-ink-rgb),0.5); --color-icon-white: var(--cj-text-ink); --color-border-soft: var(--cj-border-subtle); --color-border-mute: rgba(var(--cj-ink-rgb),0.03); --color-frame-border: var(--cj-bg-kraft); --color-error: #c4545e; --color-status-success: var(--cj-sage); --color-status-warning: var(--cj-caramel); --color-white: var(--cj-bg-card); --color-white-soft: rgba(var(--cj-card-rgb),0.5); --color-white-mute: var(--cj-bg-warm); --color-black: #3a3025; --color-black-soft: #4a3f34; --color-black-mute: #5a4e42; --color-black-rgb: 58,48,37; --color-white-rgb: 247,240,230; --color-gray-1: #9e9286; --color-gray-2: #b8ad9f; --color-gray-3: #cec3b5; --color-group-background: var(--cj-bg-card); --antd-arrow-background-color: var(--cj-bg-warm); --color-scrollbar-thumb: rgba(var(--cj-ink-rgb),0.1); --color-scrollbar-thumb-hover: rgba(var(--cj-ink-rgb),0.18); --color-highlight: initial; --color-background-highlight: rgba(201,107,115,0.25); --color-background-highlight-accent: rgba(184,144,106,0.4); --selection-toolbar-background: rgba(var(--cj-card-rgb),0.95); --selection-toolbar-border: 1px solid var(--cj-border); --selection-toolbar-box-shadow: var(--brutal-shadow); --selection-toolbar-button-text-color: var(--cj-text-pencil); --selection-toolbar-button-icon-color: var(--cj-text-faint); --selection-toolbar-button-bgcolor-hover: rgba(var(--cj-rose-rgb),0.08); --selection-toolbar-buttons-border-color: var(--cj-border); --font-family: 'Zen Maru Gothic', 'LXGW WenKai Screen', 'Noto Sans SC', system-ui, sans-serif; --font-family-serif: 'Noto Serif SC', 'LXGW WenKai Screen', serif; --code-font-family: 'JetBrains Mono', monospace; --material-line-width: var(--cherry-line-width); --container-border-radius: var(--cherry-radius-brutal); --list-item-border-radius: var(--cherry-radius-item); } /* ===== Left Navigation ===== */ body[navbar-position='left'][theme-mode='dark'] { --color-list-item: rgba(var(--tn-blue-rgb),0.05); --color-list-item-hover: rgba(var(--tn-blue-rgb),0.09); } body[navbar-position='left'][theme-mode='light'] { --color-list-item: rgba(var(--cj-ink-rgb),0.02); --color-list-item-hover: rgba(var(--cj-rose-rgb),0.05); } /* ==================================================== CHAT BUBBLES 暗色: 禅意 — assistant 透明文字流,user 微弱拟态 亮色: 粗野 — user 硬阴影卡片,assistant 纯文字 + 左条 ==================================================== */ /* --- 通用基础 (Electron 性能优化版) --- */ .bubble .message-content-container { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 强制开启独立 GPU 合成层,防掉帧 */ transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform, box-shadow; /* 加快动画响应速度,减少切换页面时的计算时间 */ transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease-out; } /* ====== DARK: Zen 禅意流 ====== */ /* 暗色 user: 微弱拟态浮层,星屑纹理 */ body[theme-mode='dark'] .bubble .message-content-container { /* 调低了径向渐变圆点的透明度 (0.18 -> 0.08) */ background: radial-gradient(1px 1px at 15% 25%, rgba(var(--tn-blue-rgb),0.08) 1px, transparent 0), radial-gradient(1px 1px at 75% 15%, rgba(var(--tn-cyan-rgb),0.06) 1px, transparent 0), radial-gradient(0.5px 0.5px at 50% 65%, rgba(var(--tn-magenta-rgb),0.05) 1px, transparent 0), rgba(var(--tn-surface-rgb), 0.65) !important; } body[theme-mode='dark'] .markdown { /* 给暗色文字加上极其微弱的阴影,从嘈杂的背景中“拔”出来 */ text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* 暗色 assistant: 禅意透明 — 只有左侧渐变细线 */ body[theme-mode='dark'] [data-role="assistant"] .message-content-container, body[theme-mode='dark'] .message-assistant .message-content-container { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-left: 1.5px solid transparent !important; border-image: linear-gradient(180deg, var(--tn-blue), var(--tn-magenta-dim), transparent) 1 !important; padding-left: 16px !important; border-radius: 0 !important; } /* 暗色 user 左侧竖光 */ body[theme-mode='dark'] .bubble .message-content-container::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(var(--tn-blue-rgb),0.2), rgba(var(--tn-magenta-rgb),0.15), transparent); border-radius: 1px; pointer-events: none; z-index: 1; } /* assistant 禅意模式不需要额外伪元素 */ body[theme-mode='dark'] [data-role="assistant"] .message-content-container::before, body[theme-mode='dark'] .message-assistant .message-content-container::before { display: none !important; } body[theme-mode='dark'] .bubble .message-content-container:hover { box-shadow: 4px 4px 14px rgba(0,0,0,0.22), -2px -2px 8px rgba(var(--tn-blue-rgb),0.04); } body[theme-mode='dark'] [data-role="assistant"] .message-content-container:hover, body[theme-mode='dark'] .message-assistant .message-content-container:hover { box-shadow: none !important; background: rgba(var(--tn-surface-rgb),0.15) !important; } /* ====== LIGHT: Brutalist 粗野手账 ====== */ /* 亮色 user: 硬阴影卡片 */ body[theme-mode='light'] .bubble .message-content-container { background: var(--cj-bg-card) !important; border: var(--brutal-border) !important; box-shadow: var(--brutal-shadow) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--cherry-radius-brutal) !important; } /* 亮色 assistant: 纯文字 + 左侧渐变色条 */ body[theme-mode='light'] [data-role="assistant"] .message-content-container, body[theme-mode='light'] .message-assistant .message-content-container { background: transparent !important; border: none !important; box-shadow: none !important; border-left: 2.5px solid transparent !important; border-image: linear-gradient(180deg, var(--cj-rose), var(--cj-sage), var(--cj-lavender)) 1 !important; padding-left: 16px !important; border-radius: 0 !important; } /* 亮色 user: 按压反馈 */ body[theme-mode='light'] .bubble .message-content-container:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0px rgba(var(--cj-ink-rgb),0.18) !important; } body[theme-mode='light'] .bubble .message-content-container:active { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; } body[theme-mode='light'] [data-role="assistant"] .message-content-container:hover, body[theme-mode='light'] .message-assistant .message-content-container:hover { transform: none; box-shadow: none !important; background: rgba(var(--cj-card-rgb),0.3) !important; } /* 亮色 user 气泡: 左上角胶带 */ body[theme-mode='light'] .bubble .message-content-container::before { content: ''; position: absolute; top: -3px; left: 14px; width: 28px; height: 12px; background: rgba(var(--cj-rose-rgb),0.2); border-radius: 0 0 4px 4px; pointer-events: none; z-index: 2; transform: rotate(-1.5deg); } body[theme-mode='light'] [data-role="assistant"] .message-content-container::before, body[theme-mode='light'] .message-assistant .message-content-container::before { display: none !important; } .bubble .message-content-container::after { display: none; } /* Spacing */ .bubble .message-content-container .block-wrapper { padding: 10px 16px !important; margin: 0 !important; } .bubble .message-content-container .markdown { padding: 0 !important; margin: 0 !important; } .bubble .message-content-container .markdown p, .bubble .message-content-container .markdown ul, .bubble .message-content-container .markdown ol, .bubble .message-content-container .markdown h1, .bubble .message-content-container .markdown h2, .bubble .message-content-container .markdown h3, .bubble .message-content-container .markdown h4, .bubble .message-content-container .markdown h5, .bubble .message-content-container .markdown h6, .bubble .message-content-container .markdown pre, .bubble .message-content-container .markdown blockquote, .bubble .message-content-container .ant-collapse, .bubble .message-content-container .message-thought-container, .bubble .message-content-container [class*="CollapseContainer-"] { margin: 0.8em 0 !important; } .bubble .message-content-container .markdown p { line-height: 1.7 !important; } /* 亮色:杂志两端对齐 + 连字符断行 */ body[theme-mode='light'] .bubble .message-content-container .markdown p { line-height: 1.75 !important; letter-spacing: 0.01em; text-wrap: pretty !important; text-align: left !important; } .bubble .message-content-container .markdown ul, .bubble .message-content-container .markdown ol { padding-left: 1.5em !important; } /* ==================================================== INPUT BAR 暗色: 拟态浮层 亮色: 粗野硬阴影 + 按压反馈 ==================================================== */ .inputbar-container { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 提升输入框所在层的渲染优先级 */ transform: translate3d(0, 0, 0); will-change: transform, box-shadow; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease-out; } /* 暗色模式的毛玻璃增加硬件加速提示 */ body[theme-mode='dark'] .inputbar-container { background: rgba(var(--tn-surface-rgb), 0.65) !important; border: none !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.18), -2px -2px 8px rgba(var(--tn-blue-rgb),0.03), inset 0 1px 0 rgba(var(--tn-text-rgb),0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); will-change: backdrop-filter; /* 性能关键 */ } body[theme-mode='dark'] .inputbar-container { background: rgba(var(--tn-surface-rgb), 0.65) !important; border: none !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.18), -2px -2px 8px rgba(var(--tn-blue-rgb),0.03), inset 0 1px 0 rgba(var(--tn-text-rgb),0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body[theme-mode='light'] .inputbar-container { background: var(--cj-bg-card) !important; border: var(--brutal-border) !important; box-shadow: var(--brutal-shadow) !important; /* border-bottom dashed removed — 不和谐 */ } body[theme-mode='dark'] .inputbar-container:focus-within { box-shadow: 5px 5px 14px rgba(0,0,0,0.22), -2px -2px 10px rgba(var(--tn-blue-rgb),0.04), inset 0 0 0 1px rgba(var(--tn-blue-rgb),0.1); } body[theme-mode='light'] .inputbar-container:focus-within { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; border-color: var(--cj-rose) !important; } .inputbar-container textarea, .inputbar-container input { transition: all 0.2s ease; } .inputbar-container textarea:focus, .inputbar-container input:focus { outline: none; } /* Buttons */ .inputbar-container .ant-btn { color: var(--color-text-2) !important; border-radius: var(--cherry-radius-item) !important; transition: all 0.15s ease; } body[theme-mode='dark'] .inputbar-container .ant-btn { background-color: rgba(var(--color-black-rgb),0.06) !important; border: none !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1), -1px -1px 3px rgba(var(--tn-blue-rgb),0.02) !important; } body[theme-mode='light'] .inputbar-container .ant-btn { background-color: var(--cj-bg-warm) !important; border: 1px solid rgba(var(--cj-ink-rgb),0.08) !important; box-shadow: var(--brutal-shadow-sm) !important; } .inputbar-container .ant-btn:hover { color: var(--color-primary) !important; background-color: var(--color-primary-mute) !important; } body[theme-mode='light'] .inputbar-container .ant-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0px rgba(var(--cj-ink-rgb),0.12) !important; } body[theme-mode='light'] .inputbar-container .ant-btn:active { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; } /* ==================================================== NAVIGATION & SEGMENTED ==================================================== */ li[class^="MenuItem-"], #content-container [class^="ListItemContainer-"] { border: 0 !important; border-radius: var(--cherry-radius-item) !important; color: var(--color-text-2); background-color: transparent !important; transition: all 0.2s ease; } li[class^="MenuItem-"].active, #content-container [class^="ListItemContainer-"].active { background: var(--color-list-item) !important; color: var(--color-text-1); border-left: 2px solid var(--color-primary) !important; } li[class^="MenuItem-"]:hover, #content-container [class^="ListItemContainer-"]:hover { background-color: var(--color-list-item-hover) !important; color: var(--color-text-1); } .ant-segmented { border: none !important; border-radius: calc(var(--cherry-radius-item) + 2px) !important; padding: 2px !important; } body[theme-mode='dark'] .ant-segmented { background: rgba(var(--color-black-rgb),0.04) !important; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.12), inset -1px -1px 3px rgba(var(--tn-blue-rgb),0.02) !important; } body[theme-mode='light'] .ant-segmented { background: var(--cj-bg-soft) !important; box-shadow: inset 2px 2px 4px rgba(var(--cj-ink-rgb),0.05), inset -1px -1px 3px rgba(var(--cj-card-rgb),0.3) !important; } .ant-segmented-item-label { padding: 8px 16px !important; border-radius: var(--cherry-radius-item) !important; color: var(--color-text-2) !important; font-weight: 500 !important; transition: all 0.2s ease; } .ant-segmented-item-label:hover:not([aria-selected="true"]) { color: var(--color-text-1) !important; } body[theme-mode='dark'] .ant-segmented-item-label[aria-selected="true"] { color: var(--color-text-1) !important; font-weight: 600 !important; background: var(--color-primary-mute) !important; box-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 4px rgba(var(--tn-blue-rgb),0.03) !important; } body[theme-mode='light'] .ant-segmented-item-label[aria-selected="true"] { color: var(--color-text-1) !important; font-weight: 600 !important; background: var(--cj-bg-card) !important; box-shadow: var(--brutal-shadow-sm) !important; border: 1px solid rgba(var(--cj-ink-rgb),0.06) !important; } /* ==================================================== CODE BLOCKS 暗色: CRT 扫描线终端感 亮色: 牛皮纸 + 装订 ==================================================== */ code, pre, .markdown pre [class^="CodeContent-"] * { font-family: var(--code-font-family) !important; font-weight: 500 !important; letter-spacing: normal !important; line-height: 1.5 !important; } .markdown pre { padding: 0 !important; border-radius: var(--container-border-radius) !important; background: none !important; box-shadow: none !important; margin: 1.2rem 0; position: relative; } .markdown pre [class^="CodeBlockWrapper-"] { border-radius: var(--container-border-radius) !important; position: relative; overflow: hidden; transition: all 0.3s ease; } /* Dark: CRT 扫描线 + 左侧霓虹 */ body[theme-mode='dark'] .markdown pre [class^="CodeBlockWrapper-"] { background-color: rgba(var(--tn-storm-rgb),0.95) !important; background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(var(--tn-blue-rgb),0.015) 2px, rgba(var(--tn-blue-rgb),0.015) 4px ); border: none; border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--tn-blue), var(--tn-magenta), var(--tn-cyan)) 1; box-shadow: 4px 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(var(--tn-text-rgb),0.02); } /* Light: 粗野牛皮纸卡片 + 装订线 */ body[theme-mode='light'] .markdown pre [class^="CodeBlockWrapper-"] { background-color: var(--cj-bg-warm) !important; border: var(--brutal-border); border-left: 2.5px solid rgba(var(--cj-rose-rgb),0.3) !important; box-shadow: var(--brutal-shadow) !important; border-radius: var(--cherry-radius-brutal) !important; } /* 亮色装订孔 */ body[theme-mode='light'] .markdown pre [class^="CodeBlockWrapper-"]::after { content: ''; position: absolute; top: 14px; left: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--cj-bg-paper); border: 1px solid rgba(var(--cj-ink-rgb),0.1); box-shadow: 0 18px 0 0 var(--cj-bg-paper), 0 36px 0 0 var(--cj-bg-paper); pointer-events: none; z-index: 2; } .markdown pre [class^="CodeBlockWrapper-"] { overflow-x: auto; overflow-y: hidden; } /* Code header */ .markdown pre [class^="CodeHeader-"] { border-radius: 0 !important; border-bottom: none; margin-bottom: 0 !important; display: flex; align-items: center; justify-content: center; color: var(--color-text-2); padding: 8px 16px 8px 60px; position: relative; overflow: hidden; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"] { background-color: rgba(var(--tn-storm-rgb),0.98) !important; } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"] { background-color: var(--cj-bg-soft) !important; } /* macOS dots */ .markdown pre [class^="CodeHeader-"]::before { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 11px; height: 11px; border-radius: 50%; z-index: 1; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"]::before { background: var(--tn-red); box-shadow: 18px 0 var(--tn-yellow), 36px 0 var(--tn-green); } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"]::before { background: var(--cj-rose); box-shadow: 18px 0 var(--cj-caramel), 36px 0 var(--cj-sage); } /* Header accent line */ .markdown pre [class^="CodeHeader-"]::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; opacity: 0.4; z-index: 1; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"]::after { background: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta), transparent); } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"]::after { background: linear-gradient(90deg, rgba(var(--cj-rose-rgb),0.25), transparent); } .markdown pre [class^="CodeHeader-"] .iconfont.icon-copy.copy { display: none !important; } .markdown pre [class^="CodeContent-"] { background-color: transparent !important; border-radius: 0 !important; border-top: none !important; margin-top: 0 !important; padding: 16px; } .markdown pre .shiki { border: none !important; background-color: transparent !important; padding: 0 !important; margin: 0 !important; } /* ==================================================== MARKDOWN TYPOGRAPHY 暗色: TN渐变标题 亮色: 学术排版 + 手账装饰 ==================================================== */ .markdown { color: var(--color-text-1); } /* --- H1 --- */ .markdown h1 { font-size: 1.85em; margin: 1em 0 0.6em; position: relative; font-weight: 700 !important; letter-spacing: 0.02em; } /* 暗色: 双色渐变底线 */ body[theme-mode='dark'] .markdown h1 { color: var(--tn-blue) !important; padding-bottom: 0.3em; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta-dim), transparent) 1; } /* 亮色: 荧光笔标记 */ body[theme-mode='light'] .markdown h1 { color: var(--cj-text-ink) !important; display: inline; background: linear-gradient(180deg, transparent 55%, rgba(var(--cj-rose-rgb),0.15) 55%, rgba(var(--cj-rose-rgb),0.15) 88%, transparent 88%); padding-bottom: 0; border-bottom: none; } /* --- H2 --- */ .markdown h2 { font-size: 1.45em; margin: 1em 0 0.5em; font-weight: 600 !important; position: relative; } body[theme-mode='dark'] .markdown h2 { color: var(--tn-cyan) !important; padding-left: 1rem; border-left: 3px solid transparent; border-image: linear-gradient(180deg, var(--tn-cyan), var(--tn-blue-dim)) 1; } body[theme-mode='light'] .markdown h2 { color: var(--cj-text-ink) !important; padding-left: 0.8em; } body[theme-mode='light'] .markdown h2::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; background: linear-gradient(180deg, var(--cj-sage), var(--cj-lavender)); border-radius: 2px; } /* --- H3 --- */ .markdown h3 { font-size: 1.2em; margin: 0.8em 0 0.4em; display: inline-block; font-weight: 600 !important; } body[theme-mode='dark'] .markdown h3 { color: var(--tn-magenta) !important; background-color: rgba(var(--tn-magenta-rgb),0.08); padding: 0.1em 0.5em; border-radius: 6px; } body[theme-mode='light'] .markdown h3 { color: var(--cj-lavender) !important; border: 1.5px dashed rgba(var(--cj-lavender-rgb),0.35); border-radius: 12px; padding: 0.05em 0.6em; } /* --- Blockquote --- */ /* 暗色: 拟态 + 左紫条 */ /* 亮色: 学术引用 — serif体 + 大引号装饰 */ .markdown blockquote { padding: 1rem 1.5rem; margin: 1.2rem 0; color: var(--color-text-2); position: relative; border-radius: var(--container-border-radius) !important; overflow: visible; } /* --- 暗色: 杂志居中引言 --- */ body[theme-mode='dark'] .markdown blockquote { background: transparent !important; border: none !important; /* 使用线性渐变绘制中间断开的上边框 */ background-image: linear-gradient( 90deg, var(--tn-magenta-dim) 0%, var(--tn-magenta-dim) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--tn-magenta-dim) calc(50% + 26px), var(--tn-magenta-dim) 100% ) !important; background-size: 100% 2px !important; background-position: top center !important; background-repeat: no-repeat !important; border-bottom: 2px solid var(--tn-magenta-dim) !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-style: italic; font-size: 1.1em; padding: 1.5rem 2rem; margin: 2rem 1rem; } /* 暗色: 大引号装饰 */ body[theme-mode='dark'] .markdown blockquote::before { content: '\201C'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 3.2em; font-family: 'Georgia', serif; color: rgba(var(--tn-magenta-rgb), 0.4); /* 适当提亮提升质感 */ line-height: 1; pointer-events: none; background: transparent; padding: 0; } /* 亮色: 大引号装饰(学术DNA) */ body[theme-mode='light'] .markdown blockquote::before { content: '\201C'; position: absolute; top: -8px; left: 12px; font-size: 3em; font-family: 'Georgia', serif; color: rgba(var(--cj-caramel-rgb),0.25); line-height: 1; pointer-events: none; } /* --- 首字下沉 Drop Cap(亮色 AI 回复专属彩蛋) --- */ body[theme-mode='light'] [data-role="assistant"] .markdown > p:first-of-type::first-letter, body[theme-mode='light'] .message-assistant .markdown > p:first-of-type::first-letter { font-family: var(--font-family-serif) !important; font-size: 3.2em; font-weight: 700; color: var(--cj-rose); float: left; line-height: 0.85; margin-right: 0.08em; margin-top: 0.05em; margin-bottom: -0.1em; } /* --- 学术三线表(亮色专属) --- */ .markdown table { border-radius: var(--container-border-radius) !important; overflow: hidden; } body[theme-mode='dark'] .markdown table { border: none; box-shadow: 3px 3px 8px rgba(0,0,0,0.15); } body[theme-mode='light'] .markdown table { border-top: 2px solid var(--cj-text-ink) !important; border-bottom: 2px solid var(--cj-text-ink) !important; border-left: none !important; border-right: none !important; box-shadow: none !important; border-radius: 0 !important; } .markdown th, .ant-table-thead > tr > th { border-radius: 0 !important; } body[theme-mode='light'] .markdown th { border-bottom: 1px solid var(--cj-text-pencil) !important; border-left: none !important; border-right: none !important; font-family: var(--font-family-serif) !important; font-weight: 600 !important; } body[theme-mode='light'] .markdown td { border: none !important; border-bottom: 0.5px solid rgba(var(--cj-ink-rgb),0.06) !important; } /* Text selection */ ::selection { text-shadow: none; } body[theme-mode='dark'] ::selection { background-color: var(--tn-magenta); color: #000 !important; text-shadow: none; } body[theme-mode='light'] ::selection { background-color: rgba(var(--cj-rose-rgb),0.18); color: var(--cj-text-ink); } /* ==================================================== MODALS, COLLAPSE, SEARCH ==================================================== */ .ant-modal .ant-modal-content { border-radius: var(--container-border-radius) !important; color: var(--color-text-1); overflow: hidden; } body[theme-mode='dark'] .ant-modal .ant-modal-content { background: rgba(var(--tn-surface-rgb),0.92) !important; border: none; box-shadow: 6px 6px 20px rgba(0,0,0,0.3), -3px -3px 12px rgba(var(--tn-blue-rgb),0.03); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } body[theme-mode='light'] .ant-modal .ant-modal-content { background: var(--cj-bg-card) !important; border: var(--brutal-border); box-shadow: 5px 5px 0px rgba(var(--cj-ink-rgb),0.12); } .ant-modal .ant-modal-content::before, .ant-modal .ant-modal-content::after { display: none; } .ant-modal-header { background-color: transparent !important; border-radius: var(--container-border-radius) var(--container-border-radius) 0 0 !important; padding: 16px 24px; position: relative; } body[theme-mode='dark'] .ant-modal-header { border-bottom: none; box-shadow: inset 0 -1px 0 var(--tn-border); } body[theme-mode='light'] .ant-modal-header { border-bottom: 1.5px dashed rgba(var(--cj-ink-rgb),0.1) !important; } .ant-modal-title { color: var(--color-text-1) !important; } body[theme-mode='dark'] .ant-modal-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta), transparent); opacity: 0.25; } /* Collapse */ .ant-collapse-item, .ant-collapse-header, .ant-collapse-content, .ant-collapse-content-box { margin: 0 !important; line-height: 1.6 !important; box-shadow: none !important; background: transparent !important; border: none !important; } .ant-collapse-header, .ant-collapse-content-box { padding: 4px 8px !important; } .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small, .ant-collapse.message-thought-container { box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container::before, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small::before, .ant-collapse.message-thought-container::before, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container::after, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small::after, .ant-collapse.message-thought-container::after { display: none !important; } /* Search */ div[class*="SearchBarContainer-"] { color: var(--color-text-1) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } body[theme-mode='dark'] div[class*="SearchBarContainer-"] { background-color: rgba(var(--tn-storm-rgb),0.9) !important; } body[theme-mode='light'] div[class*="SearchBarContainer-"] { background-color: rgba(var(--cj-paper-rgb),0.92) !important; } div[class*="SearchBarContainer-"] input { background-color: transparent !important; color: var(--color-text-1) !important; } div[class*="SearchBarContainer-"] input::placeholder { color: var(--color-text-3) !important; } /* ==================================================== SHARED CONTAINERS + AGENT LIST + SCROLLBAR ==================================================== */ .inputbar-container, .ant-popover-inner, div[class^="InputContainer-"], div[class^="OutputContainer-"], div[class^="HistoryContainner-"], .ant-notification-notice, .ant-message-notice-content, .ant-drawer-content, .ant-modal .ant-modal-content, div[class^="AgentCardContainer-"], .ant-table-wrapper, .ant-collapse-item, #content-container [class^="ListItemContainer-"], div[class^="SettingGroup-"] label { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 缩短全局基础元素的过渡时间,减少切换路由时的帧堆积 */ transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; /* 屏蔽背面绘制,降低 GPU 负担 */ backface-visibility: hidden; } div[class*="AgentsGroupList-"] { min-width: 160px !important; height: calc(100vh - var(--navbar-height)) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 8px 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; background-image: none !important; border-image: none !important; } div[class*="AgentsGroupList-"]::-webkit-scrollbar { display: none !important; } div[class*="ListItemContainer-"] { margin: 0 8px !important; opacity: 1 !important; min-width: 40px !important; max-width: 120px !important; flex-shrink: 0 !important; overflow: hidden !important; background-image: none !important; border-image: none !important; } div[class*="ListItemContainer-"] div { min-width: 30px !important; max-width: 140px !important; flex-shrink: 0 !important; display: block !important; overflow: hidden !important; } div[class*="ListItemContainer-"] svg { color: var(--color-text-2) !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; } div[class*="AgentsGroupList-"]::before, div[class*="AgentsGroupList-"]::after, div[class*="ListItemContent-"]::before, div[class*="ListItemContent-"]::after, div[class*="TextContainer-"]::before, div[class*="TextContainer-"]::after, div[class*="TitleText-"]::before, div[class*="TitleText-"]::after, div[class*="Tag-"]::before, div[class*="Tag-"]::after { display: none !important; } div[class*="ListItemContent-"], div[class*="TextContainer-"], div[class*="TitleText-"], div[class*="Tag-"] { background-image: none !important; border-image: none !important; } body[theme-mode='light'] div[class*="AgentsGroupList-"] { border-right: 0.5px solid var(--color-border) !important; } ::-webkit-scrollbar { width: 6px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } /* 滚动条默认全透明,hover 容器时显现 */ ::-webkit-scrollbar-thumb { background: transparent; } *:hover > ::-webkit-scrollbar-thumb, *:hover::-webkit-scrollbar-thumb { transition: background 0.3s ease; } /* Firefox: thin + 默认透明色 */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover { scrollbar-color: var(--color-scrollbar-thumb) transparent; } /* 暗色:终端光块滚动条 */ body[theme-mode='dark'] ::-webkit-scrollbar-thumb { border-radius: 0; background: rgba(var(--tn-cyan-rgb), 0.3); } body[theme-mode='dark'] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--tn-cyan-rgb), 0.6); } /* 亮色:粗野方块 + 描边滚动条 */ body[theme-mode='light'] ::-webkit-scrollbar-thumb { border-radius: 0; background: var(--cj-bg-card); border: 1px solid rgba(var(--cj-ink-rgb), 0.5); } body[theme-mode='light'] ::-webkit-scrollbar-thumb:hover { background: var(--cj-bg-warm); } /* ==================================================== BRUTALIST SNAP — 亮色按压提速,机械手感 ==================================================== */ body[theme-mode='light'] .bubble .message-content-container, body[theme-mode='light'] .inputbar-container, body[theme-mode='light'] .inputbar-container .ant-btn { transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background-color 0.2s ease; } body[theme-mode='light'] .inputbar-container:focus-within { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; border-color: rgba(var(--cj-rose-rgb),0.35) !important; } /* ==================================================== PROGRESSIVE ENHANCEMENT ==================================================== */ @supports (color: color-mix(in srgb, red, blue)) { body[theme-mode='dark'] li[class^="MenuItem-"].active, body[theme-mode='dark'] #content-container [class^="ListItemContainer-"].active { background: color-mix(in srgb, var(--tn-blue) 10%, var(--tn-bg-surface)) !important; } body[theme-mode='light'] li[class^="MenuItem-"].active, body[theme-mode='light'] #content-container [class^="ListItemContainer-"].active { background: color-mix(in srgb, var(--cj-rose) 8%, var(--cj-bg-warm)) !important; } } @supports (container-type: inline-size) { @container (min-width: 400px) { .bubble .message-content-container { padding: 16px 20px; } } @container (min-width: 600px) { .bubble .message-content-container { padding: 20px 24px; } } } /* ==================================================== MAGAZINE PATCH 2: 印刷级两端对齐 ==================================================== */ .markdown p { text-align: justify !important; text-justify: inter-ideograph !important; /* 专门针对中日韩文字优化间距 */ hyphens: auto; /* 允许英文单词基于音节断行,避免大缝隙 */ } /* 杂志喜欢给加粗的文字赋予不同的色彩层级 */ body[theme-mode='light'] .markdown strong, body[theme-mode='light'] .markdown b { font-family: var(--font-family-serif) !important; color: var(--cj-text-ink); background: linear-gradient(180deg, transparent 70%, rgba(var(--cj-caramel-rgb),0.2) 70%); } /* ==================================================== MAGAZINE PATCH 3: 标题衬线化与排版重构 ==================================================== */ body[theme-mode='light'] .markdown h1, body[theme-mode='light'] .markdown h2, body[theme-mode='light'] .markdown h3, body[theme-mode='light'] .markdown h4 { font-family: var(--font-family-serif) !important; letter-spacing: 0.05em; /* 拉开字距,增加呼吸感 */ } /* 杂志专栏风格的 H2 (带上下双粗线) */ body[theme-mode='light'] .markdown h2 { padding-left: 0 !important; text-align: center; border-top: 1.5px solid var(--cj-text-ink); border-bottom: 1.5px solid var(--cj-text-ink); padding: 0.6em 0; margin: 1.2em 0 0.8em; } body[theme-mode='light'] .markdown h2::before { display: none; } /* 移除之前的左侧小彩条 */ /* ==================================================== MAGAZINE PATCH 4: 杂志引文提花 (Pull Quote) 修复版 ==================================================== */ body[theme-mode='light'] .markdown blockquote { border: none !important; /* 同样的断开渐变技巧,避免实色遮盖 */ background-image: linear-gradient( 90deg, var(--cj-rose) 0%, var(--cj-rose) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--cj-rose) calc(50% + 26px), var(--cj-rose) 100% ) !important; background-size: 100% 2px !important; background-position: top center !important; background-repeat: no-repeat !important; border-bottom: 2px solid var(--cj-rose) !important; border-radius: 0 !important; background-color: transparent !important; text-align: center; font-size: 1.15em; padding: 1.5rem 2rem; margin: 2.5rem 1rem; color: var(--cj-text-ink); box-shadow: none !important; } body[theme-mode='light'] .markdown blockquote::before { top: -16px; left: 50%; transform: translateX(-50%); background: transparent; /* 🗑️ 移除白色方块补丁 */ padding: 0; } /* ==================================================== MAGAZINE PATCH 5: 报纸排版分割线 ==================================================== */ .markdown hr { border: none !important; background: transparent !important; height: auto !important; text-align: center; margin: 2.5rem 0; } /* 亮色:经典排版菱形符号 */ body[theme-mode='light'] .markdown hr::after { content: '✦ ✦ ✦'; font-size: 1.2em; color: rgba(var(--cj-ink-rgb), 0.3); letter-spacing: 1em; padding-left: 1em; /* 修正居中视觉偏移 */ } /* 暗色:终端星屑分隔符 */ body[theme-mode='dark'] .markdown hr::after { content: '✦ ✦ ✦'; font-size: 1em; color: var(--tn-cyan); opacity: 0.45; letter-spacing: 0.8em; padding-left: 0.8em; } /* ==================================================== LIGHT MODE: Antd 弹窗/输入框 奶油色修正 ==================================================== */ /* Modal 整体背景 */ body[theme-mode='light'] .ant-modal .ant-modal-content { background: var(--cj-bg-card) !important; } body[theme-mode='light'] .ant-modal .ant-modal-body { background: transparent !important; } /* Modal 遮罩层 — 奶油色半透明 */ body[theme-mode='light'] .ant-modal-mask, body[theme-mode='light'] .ant-modal-wrap { background: rgba(var(--cj-ink-rgb), 0.15) !important; } body[theme-mode='dark'] .ant-modal-mask, body[theme-mode='dark'] .ant-modal-wrap { background: rgba(0, 0, 0, 0.45) !important; } /* 设置页面右侧内容区 */ body[theme-mode='light'] div[class*="SettingContainer-"], body[theme-mode='light'] div[class*="SettingsContent-"], body[theme-mode='light'] div[class*="ContentContainer-"], body[theme-mode='light'] div[class*="RightPanel-"], body[theme-mode='light'] div[class*="MainContent-"] { background-color: var(--cj-bg-paper) !important; } /* 所有 input / search 输入框 */ body[theme-mode='light'] .ant-input, body[theme-mode='light'] .ant-input-affix-wrapper, body[theme-mode='light'] .ant-select-selector, body[theme-mode='light'] .ant-input-search .ant-input, body[theme-mode='light'] .ant-input-group-addon, body[theme-mode='light'] input[type="text"], body[theme-mode='light'] input[type="search"], body[theme-mode='light'] textarea { background-color: var(--cj-bg-warm) !important; border-color: var(--cj-border) !important; color: var(--cj-text-ink) !important; } body[theme-mode='light'] .ant-input::placeholder, body[theme-mode='light'] .ant-input-affix-wrapper input::placeholder, body[theme-mode='light'] textarea::placeholder { color: var(--cj-text-faint) !important; } /* 弹窗内列表项/卡片 */ body[theme-mode='light'] .ant-modal .ant-list-item, body[theme-mode='light'] .ant-modal .ant-card, body[theme-mode='light'] .ant-modal .ant-collapse, body[theme-mode='light'] .ant-modal .ant-collapse-item, body[theme-mode='light'] .ant-modal .ant-collapse-content { background: transparent !important; } /* Drawer / Popover / Dropdown */ body[theme-mode='light'] .ant-drawer-content, body[theme-mode='light'] .ant-popover-inner, body[theme-mode='light'] .ant-dropdown-menu, body[theme-mode='light'] .ant-select-dropdown, body[theme-mode='light'] .ant-tooltip-inner { background-color: var(--cj-bg-card) !important; color: var(--cj-text-ink) !important; } body[theme-mode='light'] .ant-tooltip-arrow::before, body[theme-mode='light'] .ant-tooltip-arrow::after, body[theme-mode='light'] .ant-tooltip .ant-tooltip-arrow-content, body[theme-mode='light'] .ant-tooltip .ant-tooltip-arrow-content::before { background-color: var(--cj-bg-card) !important; --antd-arrow-background-color: var(--cj-bg-card) !important; } body[theme-mode='light'] .ant-tooltip { --antd-arrow-background-color: var(--cj-bg-card); } /* 通知/消息条 */ body[theme-mode='light'] .ant-notification-notice, body[theme-mode='light'] .ant-message-notice-content { background-color: var(--cj-bg-card) !important; } /* 按钮默认态 */ body[theme-mode='light'] .ant-btn-default, body[theme-mode='light'] .ant-btn-dashed { background-color: var(--cj-bg-warm) !important; border-color: var(--cj-border) !important; color: var(--cj-text-pencil) !important; } body[theme-mode='light'] .ant-btn-default:hover, body[theme-mode='light'] .ant-btn-dashed:hover { background-color: var(--cj-bg-card) !important; border-color: rgba(var(--cj-rose-rgb), 0.3) !important; color: var(--cj-rose) !important; } /* 表格/Table 背景 */ body[theme-mode='light'] .ant-table, body[theme-mode='light'] .ant-table-thead > tr > th, body[theme-mode='light'] .ant-table-tbody > tr > td, body[theme-mode='light'] .ant-table-tbody > tr:hover > td { background-color: transparent !important; } /* 分割线 */ body[theme-mode='light'] .ant-divider { border-color: var(--cj-border) !important; } /* Switch / Checkbox 等 */ body[theme-mode='light'] .ant-switch { background-color: var(--cj-bg-kraft) !important; } body[theme-mode='light'] .ant-switch-checked { background-color: var(--cj-rose) !important; } /* ==================================================== 侧边栏助手列表字重加粗 ==================================================== */ /* 助手面板(assistants-tab)专属加粗 */ .assistants-tab, .assistants-tab *, .assistants-tab span, .assistants-tab div, .assistants-tab p { font-weight: 600 !important; -webkit-font-smoothing: antialiased !important; } div[class*="AgentsGroupList-"], div[class*="ListItemContainer-"], div[class*="ListItemContainer-"] *, div[class*="ListItemContent-"], div[class*="ListItemContent-"] *, div[class*="TitleText-"], div[class*="AssistantItem-"], div[class*="AssistantItem-"] *, div[class*="TopicItem-"], div[class*="TopicItem-"] *, div[class*="Sidebar-"] span, div[class*="Sidebar-"] div, li[class^="MenuItem-"], li[class^="MenuItem-"] *, #content-container [class^="ListItemContainer-"], #content-container [class^="ListItemContainer-"] * { font-weight: 600 !important; -webkit-font-smoothing: antialiased !important; } li[class^="MenuItem-"].active, li[class^="MenuItem-"].active *, #content-container [class^="ListItemContainer-"].active, #content-container [class^="ListItemContainer-"].active *, div[class*="ListItemContainer-"].active *, div[class*="AssistantItem-"].active * { font-weight: 700 !important; } /* ==================================================== FIX: 修复亮色输入框底色 ==================================================== */ body[theme-mode='light'] .inputbar-container textarea, body[theme-mode='light'] .inputbar-container .ant-input, body[theme-mode='light'] .inputbar-container .ant-input-affix-wrapper { background-color: transparent !important; border: none !important; box-shadow: none !important; } body[theme-mode='light'] .inputbar-container .inputbar-tools { background-color: transparent !important; } /* ==================================================== END — TokyoNight × 奶油手账 v3 ==================================================== */

网友解答:
--【壹】--:

支持一下,佬做的很好看


--【贰】--:

还是你这emoji比较萌


--【叁】--:

前排支持!


--【肆】--:

不错呀!


--【伍】--:

太厉害了佬


--【陆】--:

欧我的老天爷 什么见鬼的手速


--【柒】--:

好看的。


--【捌】--:

好用就好捏~


--【玖】--:

XDX无处不在 这么墙


--【拾】--:

支持,已经用上了


--【拾壹】--:

不错 暗色模式很好看


--【拾贰】--:

已经用上了,佬做的好好看!


--【拾叁】--:

支持支持,已经用上了


--【拾肆】--:

我也换上了~


--【拾伍】--:

image1007×706 94 KB
这字体也是挺萌的


--【拾陆】--:

支持一下


--【拾柒】--:

BingChat这么墙


--【拾捌】--:

嘿嘿,独爱tokyonight


--【拾玖】--:

好看立刻使用

问题描述:

一个尝试打破常规 Cherry Studio 主题范式的 CSS 主题。

2026/3/20 优化

  • 引言符号遮挡
  • 暗色视觉小幅优化

2026/3/18 优化

  • 修复浅色输入框颜色断层
  • 对ELE框架流畅度略作调优

2026/3/17 优化

  • 浅色模式Tooltip颜色修复
  • 助手栏字重加粗

2026/3/16 优化

  • 优化两端对齐布局
  • 优化亮色模式下首字下沉效果
  • 优化引言的显示方式
  • 优化分割线样式
  • 弹窗输入框背景色优化

效果展示

暗色模式 — TokyoNight Storm

回复区域完全透明,左侧蓝紫渐变线替代传统气泡。学术排版优雅三线表。

20260316_191106_3671506×1582 291 KB
20260316_191055_7441506×1582 228 KB

亮色模式 — 奶油手账 Cream Journal

手帐风格胶带装饰,回复是纯文字流。整体奶油纸底色护眼优化。

20260316_191048_1021506×1582 218 KB
20260316_191025_8531506×1582 281 KB

更多细节,欢迎试吃

CSS

点击展开完整 CSS

/* =========================================================== Cherry Studio Theme: TokyoNight × 奶油手账 v3 Dark: TokyoNight Storm — 禅意文字流 + 终端扫描线 Light: Cream Journal — 粗野主义硬阴影 + 学术排版 =========================================================== */ /* ===== Font Imports ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap'); @import url('https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===== Private Theme Variables ===== */ :root { /* --- TokyoNight Storm --- */ --tn-bg-storm: #1a1b2e; --tn-bg-deep: #16172b; --tn-bg-surface: #1e1f3b; --tn-bg-elevated: #252748; --tn-bg-float: #2a2c54; --tn-blue: #7aa2f7; --tn-blue-dim: #5d7ec7; --tn-cyan: #7dcfff; --tn-magenta: #bb9af7; --tn-magenta-dim: #9d7cd8; --tn-green: #9ece6a; --tn-orange: #ff9e64; --tn-red: #f7768e; --tn-yellow: #e0af68; --tn-text-bright: #c0caf5; --tn-text-normal: #a9b1d6; --tn-text-dim: #565f89; --tn-text-faint: #414868; --tn-border: rgba(122,162,247,0.12); --tn-border-subtle: rgba(122,162,247,0.06); --tn-blue-rgb: 122,162,247; --tn-cyan-rgb: 125,207,255; --tn-magenta-rgb: 187,154,247; --tn-storm-rgb: 26,27,46; --tn-surface-rgb: 30,31,59; --tn-text-rgb: 192,202,245; /* --- Cream Journal 奶油手账 --- */ --cj-bg-paper: #f2ebe0; --cj-bg-warm: #ebe3d5; --cj-bg-card: #f7f0e6; --cj-bg-soft: #e4dace; --cj-bg-kraft: #d8cfc2; --cj-rose: #c96b73; --cj-rose-soft: #dda0a6; --cj-sage: #7d9e72; --cj-lavender: #8e82b5; --cj-caramel: #b8906a; --cj-cocoa: #6b5b4e; --cj-text-ink: #3a3025; --cj-text-pencil: #665a4e; --cj-text-faint: #9e9286; --cj-border: rgba(107,91,78,0.14); --cj-border-subtle: rgba(107,91,78,0.07); --cj-rose-rgb: 201,107,115; --cj-sage-rgb: 125,158,114; --cj-lavender-rgb: 142,130,181; --cj-caramel-rgb: 184,144,106; --cj-paper-rgb: 242,235,224; --cj-card-rgb: 247,240,230; --cj-ink-rgb: 58,48,37; --cj-kraft-rgb: 216,207,194; /* --- Brutalist tokens (亮色用) --- */ --brutal-shadow: 3px 3px 0px rgba(var(--cj-ink-rgb),0.15); --brutal-shadow-sm: 2px 2px 0px rgba(var(--cj-ink-rgb),0.1); --brutal-pressed: 1px 1px 0px rgba(var(--cj-ink-rgb),0.1); --brutal-border: 1.5px solid rgba(var(--cj-ink-rgb),0.12); /* --- Layout --- */ --cherry-line-width: 0.5px; --cherry-radius-container: 14px; --cherry-radius-item: 8px; --cherry-radius-brutal: 10px; } /* ==================================================== DARK MODE — TokyoNight Storm ==================================================== */ body[theme-mode='dark'] { --color-background: var(--tn-bg-storm); --color-background-soft: var(--tn-bg-surface); --color-background-mute: var(--tn-bg-elevated); --color-text-1: var(--tn-text-bright); --color-text-2: var(--tn-text-normal); --color-text-3: var(--tn-text-dim); --color-border: var(--tn-border); --color-primary: var(--tn-blue); --color-primary-soft: rgba(var(--tn-blue-rgb),0.45); --color-primary-mute: rgba(var(--tn-blue-rgb),0.15); --color-text: var(--color-text-1); --color-text-secondary: var(--tn-text-normal); --color-code-background: #1a1b2e; --color-inline-code-background: rgba(var(--tn-magenta-rgb),0.1); --color-inline-code-text: var(--tn-magenta); --color-link: var(--tn-cyan); --color-reference: var(--tn-bg-float); --color-reference-text: var(--tn-text-bright); --color-reference-background: var(--tn-bg-deep); --color-hover: rgba(var(--tn-blue-rgb),0.06); --color-active: rgba(var(--tn-blue-rgb),0.1); --color-list-item: rgba(var(--tn-blue-rgb),0.06); --color-list-item-hover: rgba(var(--tn-blue-rgb),0.1); --chat-background: transparent; --chat-background-user: rgba(var(--tn-surface-rgb),0.7); --chat-background-assistant: transparent; --chat-text-user: var(--tn-text-bright); --modal-background: var(--tn-bg-deep); --color-background-opacity: rgba(var(--tn-storm-rgb),0.85); --navbar-background: var(--tn-bg-deep); --navbar-background-mac: rgba(var(--tn-storm-rgb),0.65); --color-icon: rgba(var(--tn-text-rgb),0.55); --color-icon-white: var(--tn-text-bright); --color-border-soft: var(--tn-border-subtle); --color-border-mute: rgba(var(--tn-blue-rgb),0.03); --color-frame-border: var(--tn-bg-elevated); --color-error: var(--tn-red); --color-status-success: var(--tn-green); --color-status-warning: var(--tn-yellow); --color-white: #c0caf5; --color-white-soft: rgba(192,202,245,0.08); --color-white-mute: rgba(192,202,245,0.04); --color-black: #1a1b2e; --color-black-soft: #1e1f3b; --color-black-mute: #252748; --color-black-rgb: 26,27,46; --color-white-rgb: 192,202,245; --color-gray-1: #565f89; --color-gray-2: #414868; --color-gray-3: #3b3d57; --color-group-background: var(--tn-bg-surface); --antd-arrow-background-color: var(--tn-bg-float); --color-scrollbar-thumb: rgba(var(--tn-blue-rgb),0.15); --color-scrollbar-thumb-hover: rgba(var(--tn-blue-rgb),0.25); --color-highlight: rgba(0,0,0,1); --color-background-highlight: rgba(224,175,104,0.7); --color-background-highlight-accent: rgba(255,158,100,0.8); --selection-toolbar-background: rgba(var(--tn-surface-rgb),0.92); --selection-toolbar-border: 1px solid var(--tn-border); --selection-toolbar-box-shadow: 0 4px 16px rgba(0,0,0,0.3); --selection-toolbar-button-text-color: var(--tn-text-normal); --selection-toolbar-button-icon-color: var(--tn-text-dim); --selection-toolbar-button-bgcolor-hover: rgba(var(--tn-blue-rgb),0.12); --selection-toolbar-buttons-border-color: var(--tn-border); --font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --font-family-serif: 'Noto Serif SC', 'LXGW WenKai Screen', serif; --code-font-family: 'JetBrains Mono', 'Fira Code', monospace; --material-line-width: var(--cherry-line-width); --container-border-radius: var(--cherry-radius-container); --list-item-border-radius: var(--cherry-radius-item); /* 🔭 暗色微网格背景 */ background-color: var(--tn-bg-storm); background-image: linear-gradient(rgba(var(--tn-blue-rgb),0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tn-blue-rgb),0.02) 1px, transparent 1px); background-size: 32px 32px; } /* ==================================================== LIGHT MODE — Cream Journal (奶油手账) ==================================================== */ body[theme-mode='light'] { --color-background: var(--cj-bg-paper); --color-background-soft: var(--cj-bg-warm); --color-background-mute: var(--cj-bg-soft); --color-text-1: var(--cj-text-ink); --color-text-2: var(--cj-text-pencil); --color-text-3: var(--cj-text-faint); --color-border: var(--cj-border); --color-primary: var(--cj-rose); --color-primary-soft: rgba(var(--cj-rose-rgb),0.35); --color-primary-mute: rgba(var(--cj-rose-rgb),0.1); --color-text: var(--color-text-1); --color-text-secondary: var(--cj-text-pencil); --color-code-background: var(--cj-bg-soft); --color-inline-code-background: rgba(var(--cj-rose-rgb),0.08); --color-inline-code-text: #a34e58; --color-link: var(--cj-sage); --color-reference: var(--cj-bg-warm); --color-reference-text: var(--cj-text-ink); --color-reference-background: var(--cj-bg-card); --color-hover: rgba(var(--cj-rose-rgb),0.05); --color-active: rgba(var(--cj-rose-rgb),0.1); --color-list-item: rgba(var(--cj-ink-rgb),0.03); --color-list-item-hover: rgba(var(--cj-rose-rgb),0.06); --chat-background: transparent; --chat-background-user: var(--cj-bg-card); --chat-background-assistant: transparent; --chat-text-user: var(--cj-text-ink); --modal-background: var(--cj-bg-card); --color-background-opacity: rgba(var(--cj-paper-rgb),0.9); --navbar-background: var(--cj-bg-warm); --navbar-background-mac: rgba(var(--cj-paper-rgb),0.7); --color-icon: rgba(var(--cj-ink-rgb),0.5); --color-icon-white: var(--cj-text-ink); --color-border-soft: var(--cj-border-subtle); --color-border-mute: rgba(var(--cj-ink-rgb),0.03); --color-frame-border: var(--cj-bg-kraft); --color-error: #c4545e; --color-status-success: var(--cj-sage); --color-status-warning: var(--cj-caramel); --color-white: var(--cj-bg-card); --color-white-soft: rgba(var(--cj-card-rgb),0.5); --color-white-mute: var(--cj-bg-warm); --color-black: #3a3025; --color-black-soft: #4a3f34; --color-black-mute: #5a4e42; --color-black-rgb: 58,48,37; --color-white-rgb: 247,240,230; --color-gray-1: #9e9286; --color-gray-2: #b8ad9f; --color-gray-3: #cec3b5; --color-group-background: var(--cj-bg-card); --antd-arrow-background-color: var(--cj-bg-warm); --color-scrollbar-thumb: rgba(var(--cj-ink-rgb),0.1); --color-scrollbar-thumb-hover: rgba(var(--cj-ink-rgb),0.18); --color-highlight: initial; --color-background-highlight: rgba(201,107,115,0.25); --color-background-highlight-accent: rgba(184,144,106,0.4); --selection-toolbar-background: rgba(var(--cj-card-rgb),0.95); --selection-toolbar-border: 1px solid var(--cj-border); --selection-toolbar-box-shadow: var(--brutal-shadow); --selection-toolbar-button-text-color: var(--cj-text-pencil); --selection-toolbar-button-icon-color: var(--cj-text-faint); --selection-toolbar-button-bgcolor-hover: rgba(var(--cj-rose-rgb),0.08); --selection-toolbar-buttons-border-color: var(--cj-border); --font-family: 'Zen Maru Gothic', 'LXGW WenKai Screen', 'Noto Sans SC', system-ui, sans-serif; --font-family-serif: 'Noto Serif SC', 'LXGW WenKai Screen', serif; --code-font-family: 'JetBrains Mono', monospace; --material-line-width: var(--cherry-line-width); --container-border-radius: var(--cherry-radius-brutal); --list-item-border-radius: var(--cherry-radius-item); } /* ===== Left Navigation ===== */ body[navbar-position='left'][theme-mode='dark'] { --color-list-item: rgba(var(--tn-blue-rgb),0.05); --color-list-item-hover: rgba(var(--tn-blue-rgb),0.09); } body[navbar-position='left'][theme-mode='light'] { --color-list-item: rgba(var(--cj-ink-rgb),0.02); --color-list-item-hover: rgba(var(--cj-rose-rgb),0.05); } /* ==================================================== CHAT BUBBLES 暗色: 禅意 — assistant 透明文字流,user 微弱拟态 亮色: 粗野 — user 硬阴影卡片,assistant 纯文字 + 左条 ==================================================== */ /* --- 通用基础 (Electron 性能优化版) --- */ .bubble .message-content-container { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 强制开启独立 GPU 合成层,防掉帧 */ transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform, box-shadow; /* 加快动画响应速度,减少切换页面时的计算时间 */ transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease-out; } /* ====== DARK: Zen 禅意流 ====== */ /* 暗色 user: 微弱拟态浮层,星屑纹理 */ body[theme-mode='dark'] .bubble .message-content-container { /* 调低了径向渐变圆点的透明度 (0.18 -> 0.08) */ background: radial-gradient(1px 1px at 15% 25%, rgba(var(--tn-blue-rgb),0.08) 1px, transparent 0), radial-gradient(1px 1px at 75% 15%, rgba(var(--tn-cyan-rgb),0.06) 1px, transparent 0), radial-gradient(0.5px 0.5px at 50% 65%, rgba(var(--tn-magenta-rgb),0.05) 1px, transparent 0), rgba(var(--tn-surface-rgb), 0.65) !important; } body[theme-mode='dark'] .markdown { /* 给暗色文字加上极其微弱的阴影,从嘈杂的背景中“拔”出来 */ text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* 暗色 assistant: 禅意透明 — 只有左侧渐变细线 */ body[theme-mode='dark'] [data-role="assistant"] .message-content-container, body[theme-mode='dark'] .message-assistant .message-content-container { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-left: 1.5px solid transparent !important; border-image: linear-gradient(180deg, var(--tn-blue), var(--tn-magenta-dim), transparent) 1 !important; padding-left: 16px !important; border-radius: 0 !important; } /* 暗色 user 左侧竖光 */ body[theme-mode='dark'] .bubble .message-content-container::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(var(--tn-blue-rgb),0.2), rgba(var(--tn-magenta-rgb),0.15), transparent); border-radius: 1px; pointer-events: none; z-index: 1; } /* assistant 禅意模式不需要额外伪元素 */ body[theme-mode='dark'] [data-role="assistant"] .message-content-container::before, body[theme-mode='dark'] .message-assistant .message-content-container::before { display: none !important; } body[theme-mode='dark'] .bubble .message-content-container:hover { box-shadow: 4px 4px 14px rgba(0,0,0,0.22), -2px -2px 8px rgba(var(--tn-blue-rgb),0.04); } body[theme-mode='dark'] [data-role="assistant"] .message-content-container:hover, body[theme-mode='dark'] .message-assistant .message-content-container:hover { box-shadow: none !important; background: rgba(var(--tn-surface-rgb),0.15) !important; } /* ====== LIGHT: Brutalist 粗野手账 ====== */ /* 亮色 user: 硬阴影卡片 */ body[theme-mode='light'] .bubble .message-content-container { background: var(--cj-bg-card) !important; border: var(--brutal-border) !important; box-shadow: var(--brutal-shadow) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--cherry-radius-brutal) !important; } /* 亮色 assistant: 纯文字 + 左侧渐变色条 */ body[theme-mode='light'] [data-role="assistant"] .message-content-container, body[theme-mode='light'] .message-assistant .message-content-container { background: transparent !important; border: none !important; box-shadow: none !important; border-left: 2.5px solid transparent !important; border-image: linear-gradient(180deg, var(--cj-rose), var(--cj-sage), var(--cj-lavender)) 1 !important; padding-left: 16px !important; border-radius: 0 !important; } /* 亮色 user: 按压反馈 */ body[theme-mode='light'] .bubble .message-content-container:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0px rgba(var(--cj-ink-rgb),0.18) !important; } body[theme-mode='light'] .bubble .message-content-container:active { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; } body[theme-mode='light'] [data-role="assistant"] .message-content-container:hover, body[theme-mode='light'] .message-assistant .message-content-container:hover { transform: none; box-shadow: none !important; background: rgba(var(--cj-card-rgb),0.3) !important; } /* 亮色 user 气泡: 左上角胶带 */ body[theme-mode='light'] .bubble .message-content-container::before { content: ''; position: absolute; top: -3px; left: 14px; width: 28px; height: 12px; background: rgba(var(--cj-rose-rgb),0.2); border-radius: 0 0 4px 4px; pointer-events: none; z-index: 2; transform: rotate(-1.5deg); } body[theme-mode='light'] [data-role="assistant"] .message-content-container::before, body[theme-mode='light'] .message-assistant .message-content-container::before { display: none !important; } .bubble .message-content-container::after { display: none; } /* Spacing */ .bubble .message-content-container .block-wrapper { padding: 10px 16px !important; margin: 0 !important; } .bubble .message-content-container .markdown { padding: 0 !important; margin: 0 !important; } .bubble .message-content-container .markdown p, .bubble .message-content-container .markdown ul, .bubble .message-content-container .markdown ol, .bubble .message-content-container .markdown h1, .bubble .message-content-container .markdown h2, .bubble .message-content-container .markdown h3, .bubble .message-content-container .markdown h4, .bubble .message-content-container .markdown h5, .bubble .message-content-container .markdown h6, .bubble .message-content-container .markdown pre, .bubble .message-content-container .markdown blockquote, .bubble .message-content-container .ant-collapse, .bubble .message-content-container .message-thought-container, .bubble .message-content-container [class*="CollapseContainer-"] { margin: 0.8em 0 !important; } .bubble .message-content-container .markdown p { line-height: 1.7 !important; } /* 亮色:杂志两端对齐 + 连字符断行 */ body[theme-mode='light'] .bubble .message-content-container .markdown p { line-height: 1.75 !important; letter-spacing: 0.01em; text-wrap: pretty !important; text-align: left !important; } .bubble .message-content-container .markdown ul, .bubble .message-content-container .markdown ol { padding-left: 1.5em !important; } /* ==================================================== INPUT BAR 暗色: 拟态浮层 亮色: 粗野硬阴影 + 按压反馈 ==================================================== */ .inputbar-container { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 提升输入框所在层的渲染优先级 */ transform: translate3d(0, 0, 0); will-change: transform, box-shadow; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease-out; } /* 暗色模式的毛玻璃增加硬件加速提示 */ body[theme-mode='dark'] .inputbar-container { background: rgba(var(--tn-surface-rgb), 0.65) !important; border: none !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.18), -2px -2px 8px rgba(var(--tn-blue-rgb),0.03), inset 0 1px 0 rgba(var(--tn-text-rgb),0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); will-change: backdrop-filter; /* 性能关键 */ } body[theme-mode='dark'] .inputbar-container { background: rgba(var(--tn-surface-rgb), 0.65) !important; border: none !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.18), -2px -2px 8px rgba(var(--tn-blue-rgb),0.03), inset 0 1px 0 rgba(var(--tn-text-rgb),0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body[theme-mode='light'] .inputbar-container { background: var(--cj-bg-card) !important; border: var(--brutal-border) !important; box-shadow: var(--brutal-shadow) !important; /* border-bottom dashed removed — 不和谐 */ } body[theme-mode='dark'] .inputbar-container:focus-within { box-shadow: 5px 5px 14px rgba(0,0,0,0.22), -2px -2px 10px rgba(var(--tn-blue-rgb),0.04), inset 0 0 0 1px rgba(var(--tn-blue-rgb),0.1); } body[theme-mode='light'] .inputbar-container:focus-within { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; border-color: var(--cj-rose) !important; } .inputbar-container textarea, .inputbar-container input { transition: all 0.2s ease; } .inputbar-container textarea:focus, .inputbar-container input:focus { outline: none; } /* Buttons */ .inputbar-container .ant-btn { color: var(--color-text-2) !important; border-radius: var(--cherry-radius-item) !important; transition: all 0.15s ease; } body[theme-mode='dark'] .inputbar-container .ant-btn { background-color: rgba(var(--color-black-rgb),0.06) !important; border: none !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1), -1px -1px 3px rgba(var(--tn-blue-rgb),0.02) !important; } body[theme-mode='light'] .inputbar-container .ant-btn { background-color: var(--cj-bg-warm) !important; border: 1px solid rgba(var(--cj-ink-rgb),0.08) !important; box-shadow: var(--brutal-shadow-sm) !important; } .inputbar-container .ant-btn:hover { color: var(--color-primary) !important; background-color: var(--color-primary-mute) !important; } body[theme-mode='light'] .inputbar-container .ant-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0px rgba(var(--cj-ink-rgb),0.12) !important; } body[theme-mode='light'] .inputbar-container .ant-btn:active { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; } /* ==================================================== NAVIGATION & SEGMENTED ==================================================== */ li[class^="MenuItem-"], #content-container [class^="ListItemContainer-"] { border: 0 !important; border-radius: var(--cherry-radius-item) !important; color: var(--color-text-2); background-color: transparent !important; transition: all 0.2s ease; } li[class^="MenuItem-"].active, #content-container [class^="ListItemContainer-"].active { background: var(--color-list-item) !important; color: var(--color-text-1); border-left: 2px solid var(--color-primary) !important; } li[class^="MenuItem-"]:hover, #content-container [class^="ListItemContainer-"]:hover { background-color: var(--color-list-item-hover) !important; color: var(--color-text-1); } .ant-segmented { border: none !important; border-radius: calc(var(--cherry-radius-item) + 2px) !important; padding: 2px !important; } body[theme-mode='dark'] .ant-segmented { background: rgba(var(--color-black-rgb),0.04) !important; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.12), inset -1px -1px 3px rgba(var(--tn-blue-rgb),0.02) !important; } body[theme-mode='light'] .ant-segmented { background: var(--cj-bg-soft) !important; box-shadow: inset 2px 2px 4px rgba(var(--cj-ink-rgb),0.05), inset -1px -1px 3px rgba(var(--cj-card-rgb),0.3) !important; } .ant-segmented-item-label { padding: 8px 16px !important; border-radius: var(--cherry-radius-item) !important; color: var(--color-text-2) !important; font-weight: 500 !important; transition: all 0.2s ease; } .ant-segmented-item-label:hover:not([aria-selected="true"]) { color: var(--color-text-1) !important; } body[theme-mode='dark'] .ant-segmented-item-label[aria-selected="true"] { color: var(--color-text-1) !important; font-weight: 600 !important; background: var(--color-primary-mute) !important; box-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 4px rgba(var(--tn-blue-rgb),0.03) !important; } body[theme-mode='light'] .ant-segmented-item-label[aria-selected="true"] { color: var(--color-text-1) !important; font-weight: 600 !important; background: var(--cj-bg-card) !important; box-shadow: var(--brutal-shadow-sm) !important; border: 1px solid rgba(var(--cj-ink-rgb),0.06) !important; } /* ==================================================== CODE BLOCKS 暗色: CRT 扫描线终端感 亮色: 牛皮纸 + 装订 ==================================================== */ code, pre, .markdown pre [class^="CodeContent-"] * { font-family: var(--code-font-family) !important; font-weight: 500 !important; letter-spacing: normal !important; line-height: 1.5 !important; } .markdown pre { padding: 0 !important; border-radius: var(--container-border-radius) !important; background: none !important; box-shadow: none !important; margin: 1.2rem 0; position: relative; } .markdown pre [class^="CodeBlockWrapper-"] { border-radius: var(--container-border-radius) !important; position: relative; overflow: hidden; transition: all 0.3s ease; } /* Dark: CRT 扫描线 + 左侧霓虹 */ body[theme-mode='dark'] .markdown pre [class^="CodeBlockWrapper-"] { background-color: rgba(var(--tn-storm-rgb),0.95) !important; background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(var(--tn-blue-rgb),0.015) 2px, rgba(var(--tn-blue-rgb),0.015) 4px ); border: none; border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--tn-blue), var(--tn-magenta), var(--tn-cyan)) 1; box-shadow: 4px 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(var(--tn-text-rgb),0.02); } /* Light: 粗野牛皮纸卡片 + 装订线 */ body[theme-mode='light'] .markdown pre [class^="CodeBlockWrapper-"] { background-color: var(--cj-bg-warm) !important; border: var(--brutal-border); border-left: 2.5px solid rgba(var(--cj-rose-rgb),0.3) !important; box-shadow: var(--brutal-shadow) !important; border-radius: var(--cherry-radius-brutal) !important; } /* 亮色装订孔 */ body[theme-mode='light'] .markdown pre [class^="CodeBlockWrapper-"]::after { content: ''; position: absolute; top: 14px; left: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--cj-bg-paper); border: 1px solid rgba(var(--cj-ink-rgb),0.1); box-shadow: 0 18px 0 0 var(--cj-bg-paper), 0 36px 0 0 var(--cj-bg-paper); pointer-events: none; z-index: 2; } .markdown pre [class^="CodeBlockWrapper-"] { overflow-x: auto; overflow-y: hidden; } /* Code header */ .markdown pre [class^="CodeHeader-"] { border-radius: 0 !important; border-bottom: none; margin-bottom: 0 !important; display: flex; align-items: center; justify-content: center; color: var(--color-text-2); padding: 8px 16px 8px 60px; position: relative; overflow: hidden; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"] { background-color: rgba(var(--tn-storm-rgb),0.98) !important; } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"] { background-color: var(--cj-bg-soft) !important; } /* macOS dots */ .markdown pre [class^="CodeHeader-"]::before { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 11px; height: 11px; border-radius: 50%; z-index: 1; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"]::before { background: var(--tn-red); box-shadow: 18px 0 var(--tn-yellow), 36px 0 var(--tn-green); } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"]::before { background: var(--cj-rose); box-shadow: 18px 0 var(--cj-caramel), 36px 0 var(--cj-sage); } /* Header accent line */ .markdown pre [class^="CodeHeader-"]::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; opacity: 0.4; z-index: 1; } body[theme-mode='dark'] .markdown pre [class^="CodeHeader-"]::after { background: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta), transparent); } body[theme-mode='light'] .markdown pre [class^="CodeHeader-"]::after { background: linear-gradient(90deg, rgba(var(--cj-rose-rgb),0.25), transparent); } .markdown pre [class^="CodeHeader-"] .iconfont.icon-copy.copy { display: none !important; } .markdown pre [class^="CodeContent-"] { background-color: transparent !important; border-radius: 0 !important; border-top: none !important; margin-top: 0 !important; padding: 16px; } .markdown pre .shiki { border: none !important; background-color: transparent !important; padding: 0 !important; margin: 0 !important; } /* ==================================================== MARKDOWN TYPOGRAPHY 暗色: TN渐变标题 亮色: 学术排版 + 手账装饰 ==================================================== */ .markdown { color: var(--color-text-1); } /* --- H1 --- */ .markdown h1 { font-size: 1.85em; margin: 1em 0 0.6em; position: relative; font-weight: 700 !important; letter-spacing: 0.02em; } /* 暗色: 双色渐变底线 */ body[theme-mode='dark'] .markdown h1 { color: var(--tn-blue) !important; padding-bottom: 0.3em; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta-dim), transparent) 1; } /* 亮色: 荧光笔标记 */ body[theme-mode='light'] .markdown h1 { color: var(--cj-text-ink) !important; display: inline; background: linear-gradient(180deg, transparent 55%, rgba(var(--cj-rose-rgb),0.15) 55%, rgba(var(--cj-rose-rgb),0.15) 88%, transparent 88%); padding-bottom: 0; border-bottom: none; } /* --- H2 --- */ .markdown h2 { font-size: 1.45em; margin: 1em 0 0.5em; font-weight: 600 !important; position: relative; } body[theme-mode='dark'] .markdown h2 { color: var(--tn-cyan) !important; padding-left: 1rem; border-left: 3px solid transparent; border-image: linear-gradient(180deg, var(--tn-cyan), var(--tn-blue-dim)) 1; } body[theme-mode='light'] .markdown h2 { color: var(--cj-text-ink) !important; padding-left: 0.8em; } body[theme-mode='light'] .markdown h2::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; background: linear-gradient(180deg, var(--cj-sage), var(--cj-lavender)); border-radius: 2px; } /* --- H3 --- */ .markdown h3 { font-size: 1.2em; margin: 0.8em 0 0.4em; display: inline-block; font-weight: 600 !important; } body[theme-mode='dark'] .markdown h3 { color: var(--tn-magenta) !important; background-color: rgba(var(--tn-magenta-rgb),0.08); padding: 0.1em 0.5em; border-radius: 6px; } body[theme-mode='light'] .markdown h3 { color: var(--cj-lavender) !important; border: 1.5px dashed rgba(var(--cj-lavender-rgb),0.35); border-radius: 12px; padding: 0.05em 0.6em; } /* --- Blockquote --- */ /* 暗色: 拟态 + 左紫条 */ /* 亮色: 学术引用 — serif体 + 大引号装饰 */ .markdown blockquote { padding: 1rem 1.5rem; margin: 1.2rem 0; color: var(--color-text-2); position: relative; border-radius: var(--container-border-radius) !important; overflow: visible; } /* --- 暗色: 杂志居中引言 --- */ body[theme-mode='dark'] .markdown blockquote { background: transparent !important; border: none !important; /* 使用线性渐变绘制中间断开的上边框 */ background-image: linear-gradient( 90deg, var(--tn-magenta-dim) 0%, var(--tn-magenta-dim) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--tn-magenta-dim) calc(50% + 26px), var(--tn-magenta-dim) 100% ) !important; background-size: 100% 2px !important; background-position: top center !important; background-repeat: no-repeat !important; border-bottom: 2px solid var(--tn-magenta-dim) !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-style: italic; font-size: 1.1em; padding: 1.5rem 2rem; margin: 2rem 1rem; } /* 暗色: 大引号装饰 */ body[theme-mode='dark'] .markdown blockquote::before { content: '\201C'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 3.2em; font-family: 'Georgia', serif; color: rgba(var(--tn-magenta-rgb), 0.4); /* 适当提亮提升质感 */ line-height: 1; pointer-events: none; background: transparent; padding: 0; } /* 亮色: 大引号装饰(学术DNA) */ body[theme-mode='light'] .markdown blockquote::before { content: '\201C'; position: absolute; top: -8px; left: 12px; font-size: 3em; font-family: 'Georgia', serif; color: rgba(var(--cj-caramel-rgb),0.25); line-height: 1; pointer-events: none; } /* --- 首字下沉 Drop Cap(亮色 AI 回复专属彩蛋) --- */ body[theme-mode='light'] [data-role="assistant"] .markdown > p:first-of-type::first-letter, body[theme-mode='light'] .message-assistant .markdown > p:first-of-type::first-letter { font-family: var(--font-family-serif) !important; font-size: 3.2em; font-weight: 700; color: var(--cj-rose); float: left; line-height: 0.85; margin-right: 0.08em; margin-top: 0.05em; margin-bottom: -0.1em; } /* --- 学术三线表(亮色专属) --- */ .markdown table { border-radius: var(--container-border-radius) !important; overflow: hidden; } body[theme-mode='dark'] .markdown table { border: none; box-shadow: 3px 3px 8px rgba(0,0,0,0.15); } body[theme-mode='light'] .markdown table { border-top: 2px solid var(--cj-text-ink) !important; border-bottom: 2px solid var(--cj-text-ink) !important; border-left: none !important; border-right: none !important; box-shadow: none !important; border-radius: 0 !important; } .markdown th, .ant-table-thead > tr > th { border-radius: 0 !important; } body[theme-mode='light'] .markdown th { border-bottom: 1px solid var(--cj-text-pencil) !important; border-left: none !important; border-right: none !important; font-family: var(--font-family-serif) !important; font-weight: 600 !important; } body[theme-mode='light'] .markdown td { border: none !important; border-bottom: 0.5px solid rgba(var(--cj-ink-rgb),0.06) !important; } /* Text selection */ ::selection { text-shadow: none; } body[theme-mode='dark'] ::selection { background-color: var(--tn-magenta); color: #000 !important; text-shadow: none; } body[theme-mode='light'] ::selection { background-color: rgba(var(--cj-rose-rgb),0.18); color: var(--cj-text-ink); } /* ==================================================== MODALS, COLLAPSE, SEARCH ==================================================== */ .ant-modal .ant-modal-content { border-radius: var(--container-border-radius) !important; color: var(--color-text-1); overflow: hidden; } body[theme-mode='dark'] .ant-modal .ant-modal-content { background: rgba(var(--tn-surface-rgb),0.92) !important; border: none; box-shadow: 6px 6px 20px rgba(0,0,0,0.3), -3px -3px 12px rgba(var(--tn-blue-rgb),0.03); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } body[theme-mode='light'] .ant-modal .ant-modal-content { background: var(--cj-bg-card) !important; border: var(--brutal-border); box-shadow: 5px 5px 0px rgba(var(--cj-ink-rgb),0.12); } .ant-modal .ant-modal-content::before, .ant-modal .ant-modal-content::after { display: none; } .ant-modal-header { background-color: transparent !important; border-radius: var(--container-border-radius) var(--container-border-radius) 0 0 !important; padding: 16px 24px; position: relative; } body[theme-mode='dark'] .ant-modal-header { border-bottom: none; box-shadow: inset 0 -1px 0 var(--tn-border); } body[theme-mode='light'] .ant-modal-header { border-bottom: 1.5px dashed rgba(var(--cj-ink-rgb),0.1) !important; } .ant-modal-title { color: var(--color-text-1) !important; } body[theme-mode='dark'] .ant-modal-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--tn-blue), var(--tn-magenta), transparent); opacity: 0.25; } /* Collapse */ .ant-collapse-item, .ant-collapse-header, .ant-collapse-content, .ant-collapse-content-box { margin: 0 !important; line-height: 1.6 !important; box-shadow: none !important; background: transparent !important; border: none !important; } .ant-collapse-header, .ant-collapse-content-box { padding: 4px 8px !important; } .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small, .ant-collapse.message-thought-container { box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container::before, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small::before, .ant-collapse.message-thought-container::before, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small[class*="CollapseContainer-"].message-thought-container::after, .ant-collapse.ant-collapse-icon-position-end.ant-collapse-small::after, .ant-collapse.message-thought-container::after { display: none !important; } /* Search */ div[class*="SearchBarContainer-"] { color: var(--color-text-1) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } body[theme-mode='dark'] div[class*="SearchBarContainer-"] { background-color: rgba(var(--tn-storm-rgb),0.9) !important; } body[theme-mode='light'] div[class*="SearchBarContainer-"] { background-color: rgba(var(--cj-paper-rgb),0.92) !important; } div[class*="SearchBarContainer-"] input { background-color: transparent !important; color: var(--color-text-1) !important; } div[class*="SearchBarContainer-"] input::placeholder { color: var(--color-text-3) !important; } /* ==================================================== SHARED CONTAINERS + AGENT LIST + SCROLLBAR ==================================================== */ .inputbar-container, .ant-popover-inner, div[class^="InputContainer-"], div[class^="OutputContainer-"], div[class^="HistoryContainner-"], .ant-notification-notice, .ant-message-notice-content, .ant-drawer-content, .ant-modal .ant-modal-content, div[class^="AgentCardContainer-"], .ant-table-wrapper, .ant-collapse-item, #content-container [class^="ListItemContainer-"], div[class^="SettingGroup-"] label { border-radius: var(--container-border-radius) !important; overflow: hidden; position: relative; /* 缩短全局基础元素的过渡时间,减少切换路由时的帧堆积 */ transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; /* 屏蔽背面绘制,降低 GPU 负担 */ backface-visibility: hidden; } div[class*="AgentsGroupList-"] { min-width: 160px !important; height: calc(100vh - var(--navbar-height)) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 8px 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; background-image: none !important; border-image: none !important; } div[class*="AgentsGroupList-"]::-webkit-scrollbar { display: none !important; } div[class*="ListItemContainer-"] { margin: 0 8px !important; opacity: 1 !important; min-width: 40px !important; max-width: 120px !important; flex-shrink: 0 !important; overflow: hidden !important; background-image: none !important; border-image: none !important; } div[class*="ListItemContainer-"] div { min-width: 30px !important; max-width: 140px !important; flex-shrink: 0 !important; display: block !important; overflow: hidden !important; } div[class*="ListItemContainer-"] svg { color: var(--color-text-2) !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; } div[class*="AgentsGroupList-"]::before, div[class*="AgentsGroupList-"]::after, div[class*="ListItemContent-"]::before, div[class*="ListItemContent-"]::after, div[class*="TextContainer-"]::before, div[class*="TextContainer-"]::after, div[class*="TitleText-"]::before, div[class*="TitleText-"]::after, div[class*="Tag-"]::before, div[class*="Tag-"]::after { display: none !important; } div[class*="ListItemContent-"], div[class*="TextContainer-"], div[class*="TitleText-"], div[class*="Tag-"] { background-image: none !important; border-image: none !important; } body[theme-mode='light'] div[class*="AgentsGroupList-"] { border-right: 0.5px solid var(--color-border) !important; } ::-webkit-scrollbar { width: 6px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } /* 滚动条默认全透明,hover 容器时显现 */ ::-webkit-scrollbar-thumb { background: transparent; } *:hover > ::-webkit-scrollbar-thumb, *:hover::-webkit-scrollbar-thumb { transition: background 0.3s ease; } /* Firefox: thin + 默认透明色 */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover { scrollbar-color: var(--color-scrollbar-thumb) transparent; } /* 暗色:终端光块滚动条 */ body[theme-mode='dark'] ::-webkit-scrollbar-thumb { border-radius: 0; background: rgba(var(--tn-cyan-rgb), 0.3); } body[theme-mode='dark'] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--tn-cyan-rgb), 0.6); } /* 亮色:粗野方块 + 描边滚动条 */ body[theme-mode='light'] ::-webkit-scrollbar-thumb { border-radius: 0; background: var(--cj-bg-card); border: 1px solid rgba(var(--cj-ink-rgb), 0.5); } body[theme-mode='light'] ::-webkit-scrollbar-thumb:hover { background: var(--cj-bg-warm); } /* ==================================================== BRUTALIST SNAP — 亮色按压提速,机械手感 ==================================================== */ body[theme-mode='light'] .bubble .message-content-container, body[theme-mode='light'] .inputbar-container, body[theme-mode='light'] .inputbar-container .ant-btn { transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background-color 0.2s ease; } body[theme-mode='light'] .inputbar-container:focus-within { transform: translate(1px, 1px); box-shadow: var(--brutal-pressed) !important; border-color: rgba(var(--cj-rose-rgb),0.35) !important; } /* ==================================================== PROGRESSIVE ENHANCEMENT ==================================================== */ @supports (color: color-mix(in srgb, red, blue)) { body[theme-mode='dark'] li[class^="MenuItem-"].active, body[theme-mode='dark'] #content-container [class^="ListItemContainer-"].active { background: color-mix(in srgb, var(--tn-blue) 10%, var(--tn-bg-surface)) !important; } body[theme-mode='light'] li[class^="MenuItem-"].active, body[theme-mode='light'] #content-container [class^="ListItemContainer-"].active { background: color-mix(in srgb, var(--cj-rose) 8%, var(--cj-bg-warm)) !important; } } @supports (container-type: inline-size) { @container (min-width: 400px) { .bubble .message-content-container { padding: 16px 20px; } } @container (min-width: 600px) { .bubble .message-content-container { padding: 20px 24px; } } } /* ==================================================== MAGAZINE PATCH 2: 印刷级两端对齐 ==================================================== */ .markdown p { text-align: justify !important; text-justify: inter-ideograph !important; /* 专门针对中日韩文字优化间距 */ hyphens: auto; /* 允许英文单词基于音节断行,避免大缝隙 */ } /* 杂志喜欢给加粗的文字赋予不同的色彩层级 */ body[theme-mode='light'] .markdown strong, body[theme-mode='light'] .markdown b { font-family: var(--font-family-serif) !important; color: var(--cj-text-ink); background: linear-gradient(180deg, transparent 70%, rgba(var(--cj-caramel-rgb),0.2) 70%); } /* ==================================================== MAGAZINE PATCH 3: 标题衬线化与排版重构 ==================================================== */ body[theme-mode='light'] .markdown h1, body[theme-mode='light'] .markdown h2, body[theme-mode='light'] .markdown h3, body[theme-mode='light'] .markdown h4 { font-family: var(--font-family-serif) !important; letter-spacing: 0.05em; /* 拉开字距,增加呼吸感 */ } /* 杂志专栏风格的 H2 (带上下双粗线) */ body[theme-mode='light'] .markdown h2 { padding-left: 0 !important; text-align: center; border-top: 1.5px solid var(--cj-text-ink); border-bottom: 1.5px solid var(--cj-text-ink); padding: 0.6em 0; margin: 1.2em 0 0.8em; } body[theme-mode='light'] .markdown h2::before { display: none; } /* 移除之前的左侧小彩条 */ /* ==================================================== MAGAZINE PATCH 4: 杂志引文提花 (Pull Quote) 修复版 ==================================================== */ body[theme-mode='light'] .markdown blockquote { border: none !important; /* 同样的断开渐变技巧,避免实色遮盖 */ background-image: linear-gradient( 90deg, var(--cj-rose) 0%, var(--cj-rose) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--cj-rose) calc(50% + 26px), var(--cj-rose) 100% ) !important; background-size: 100% 2px !important; background-position: top center !important; background-repeat: no-repeat !important; border-bottom: 2px solid var(--cj-rose) !important; border-radius: 0 !important; background-color: transparent !important; text-align: center; font-size: 1.15em; padding: 1.5rem 2rem; margin: 2.5rem 1rem; color: var(--cj-text-ink); box-shadow: none !important; } body[theme-mode='light'] .markdown blockquote::before { top: -16px; left: 50%; transform: translateX(-50%); background: transparent; /* 🗑️ 移除白色方块补丁 */ padding: 0; } /* ==================================================== MAGAZINE PATCH 5: 报纸排版分割线 ==================================================== */ .markdown hr { border: none !important; background: transparent !important; height: auto !important; text-align: center; margin: 2.5rem 0; } /* 亮色:经典排版菱形符号 */ body[theme-mode='light'] .markdown hr::after { content: '✦ ✦ ✦'; font-size: 1.2em; color: rgba(var(--cj-ink-rgb), 0.3); letter-spacing: 1em; padding-left: 1em; /* 修正居中视觉偏移 */ } /* 暗色:终端星屑分隔符 */ body[theme-mode='dark'] .markdown hr::after { content: '✦ ✦ ✦'; font-size: 1em; color: var(--tn-cyan); opacity: 0.45; letter-spacing: 0.8em; padding-left: 0.8em; } /* ==================================================== LIGHT MODE: Antd 弹窗/输入框 奶油色修正 ==================================================== */ /* Modal 整体背景 */ body[theme-mode='light'] .ant-modal .ant-modal-content { background: var(--cj-bg-card) !important; } body[theme-mode='light'] .ant-modal .ant-modal-body { background: transparent !important; } /* Modal 遮罩层 — 奶油色半透明 */ body[theme-mode='light'] .ant-modal-mask, body[theme-mode='light'] .ant-modal-wrap { background: rgba(var(--cj-ink-rgb), 0.15) !important; } body[theme-mode='dark'] .ant-modal-mask, body[theme-mode='dark'] .ant-modal-wrap { background: rgba(0, 0, 0, 0.45) !important; } /* 设置页面右侧内容区 */ body[theme-mode='light'] div[class*="SettingContainer-"], body[theme-mode='light'] div[class*="SettingsContent-"], body[theme-mode='light'] div[class*="ContentContainer-"], body[theme-mode='light'] div[class*="RightPanel-"], body[theme-mode='light'] div[class*="MainContent-"] { background-color: var(--cj-bg-paper) !important; } /* 所有 input / search 输入框 */ body[theme-mode='light'] .ant-input, body[theme-mode='light'] .ant-input-affix-wrapper, body[theme-mode='light'] .ant-select-selector, body[theme-mode='light'] .ant-input-search .ant-input, body[theme-mode='light'] .ant-input-group-addon, body[theme-mode='light'] input[type="text"], body[theme-mode='light'] input[type="search"], body[theme-mode='light'] textarea { background-color: var(--cj-bg-warm) !important; border-color: var(--cj-border) !important; color: var(--cj-text-ink) !important; } body[theme-mode='light'] .ant-input::placeholder, body[theme-mode='light'] .ant-input-affix-wrapper input::placeholder, body[theme-mode='light'] textarea::placeholder { color: var(--cj-text-faint) !important; } /* 弹窗内列表项/卡片 */ body[theme-mode='light'] .ant-modal .ant-list-item, body[theme-mode='light'] .ant-modal .ant-card, body[theme-mode='light'] .ant-modal .ant-collapse, body[theme-mode='light'] .ant-modal .ant-collapse-item, body[theme-mode='light'] .ant-modal .ant-collapse-content { background: transparent !important; } /* Drawer / Popover / Dropdown */ body[theme-mode='light'] .ant-drawer-content, body[theme-mode='light'] .ant-popover-inner, body[theme-mode='light'] .ant-dropdown-menu, body[theme-mode='light'] .ant-select-dropdown, body[theme-mode='light'] .ant-tooltip-inner { background-color: var(--cj-bg-card) !important; color: var(--cj-text-ink) !important; } body[theme-mode='light'] .ant-tooltip-arrow::before, body[theme-mode='light'] .ant-tooltip-arrow::after, body[theme-mode='light'] .ant-tooltip .ant-tooltip-arrow-content, body[theme-mode='light'] .ant-tooltip .ant-tooltip-arrow-content::before { background-color: var(--cj-bg-card) !important; --antd-arrow-background-color: var(--cj-bg-card) !important; } body[theme-mode='light'] .ant-tooltip { --antd-arrow-background-color: var(--cj-bg-card); } /* 通知/消息条 */ body[theme-mode='light'] .ant-notification-notice, body[theme-mode='light'] .ant-message-notice-content { background-color: var(--cj-bg-card) !important; } /* 按钮默认态 */ body[theme-mode='light'] .ant-btn-default, body[theme-mode='light'] .ant-btn-dashed { background-color: var(--cj-bg-warm) !important; border-color: var(--cj-border) !important; color: var(--cj-text-pencil) !important; } body[theme-mode='light'] .ant-btn-default:hover, body[theme-mode='light'] .ant-btn-dashed:hover { background-color: var(--cj-bg-card) !important; border-color: rgba(var(--cj-rose-rgb), 0.3) !important; color: var(--cj-rose) !important; } /* 表格/Table 背景 */ body[theme-mode='light'] .ant-table, body[theme-mode='light'] .ant-table-thead > tr > th, body[theme-mode='light'] .ant-table-tbody > tr > td, body[theme-mode='light'] .ant-table-tbody > tr:hover > td { background-color: transparent !important; } /* 分割线 */ body[theme-mode='light'] .ant-divider { border-color: var(--cj-border) !important; } /* Switch / Checkbox 等 */ body[theme-mode='light'] .ant-switch { background-color: var(--cj-bg-kraft) !important; } body[theme-mode='light'] .ant-switch-checked { background-color: var(--cj-rose) !important; } /* ==================================================== 侧边栏助手列表字重加粗 ==================================================== */ /* 助手面板(assistants-tab)专属加粗 */ .assistants-tab, .assistants-tab *, .assistants-tab span, .assistants-tab div, .assistants-tab p { font-weight: 600 !important; -webkit-font-smoothing: antialiased !important; } div[class*="AgentsGroupList-"], div[class*="ListItemContainer-"], div[class*="ListItemContainer-"] *, div[class*="ListItemContent-"], div[class*="ListItemContent-"] *, div[class*="TitleText-"], div[class*="AssistantItem-"], div[class*="AssistantItem-"] *, div[class*="TopicItem-"], div[class*="TopicItem-"] *, div[class*="Sidebar-"] span, div[class*="Sidebar-"] div, li[class^="MenuItem-"], li[class^="MenuItem-"] *, #content-container [class^="ListItemContainer-"], #content-container [class^="ListItemContainer-"] * { font-weight: 600 !important; -webkit-font-smoothing: antialiased !important; } li[class^="MenuItem-"].active, li[class^="MenuItem-"].active *, #content-container [class^="ListItemContainer-"].active, #content-container [class^="ListItemContainer-"].active *, div[class*="ListItemContainer-"].active *, div[class*="AssistantItem-"].active * { font-weight: 700 !important; } /* ==================================================== FIX: 修复亮色输入框底色 ==================================================== */ body[theme-mode='light'] .inputbar-container textarea, body[theme-mode='light'] .inputbar-container .ant-input, body[theme-mode='light'] .inputbar-container .ant-input-affix-wrapper { background-color: transparent !important; border: none !important; box-shadow: none !important; } body[theme-mode='light'] .inputbar-container .inputbar-tools { background-color: transparent !important; } /* ==================================================== END — TokyoNight × 奶油手账 v3 ==================================================== */

网友解答:
--【壹】--:

支持一下,佬做的很好看


--【贰】--:

还是你这emoji比较萌


--【叁】--:

前排支持!


--【肆】--:

不错呀!


--【伍】--:

太厉害了佬


--【陆】--:

欧我的老天爷 什么见鬼的手速


--【柒】--:

好看的。


--【捌】--:

好用就好捏~


--【玖】--:

XDX无处不在 这么墙


--【拾】--:

支持,已经用上了


--【拾壹】--:

不错 暗色模式很好看


--【拾贰】--:

已经用上了,佬做的好好看!


--【拾叁】--:

支持支持,已经用上了


--【拾肆】--:

我也换上了~


--【拾伍】--:

image1007×706 94 KB
这字体也是挺萌的


--【拾陆】--:

支持一下


--【拾柒】--:

BingChat这么墙


--【拾捌】--:

嘿嘿,独爱tokyonight


--【拾玖】--:

好看立刻使用