[Cherry Studio 主题] Claude配色
代码
:root {
/* -- Claude字体变量 -- */
--font-main: "Styrene B", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: "Test Tiempos Fine", Georgia, serif;
--font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
--font-icon: "iconfont";
/* -- 动画与新样式变量 -- */
--animation-curve: cubic-bezier(0.56, -0.37, 0.46, 1.58);
--short-timer: 0.2s;
--long-timer: 0.5s;
--button-border-radius: 12px;
--button-border-radius-hover: 8px;
--button-border-radius-active: 12px;
/* -- Claude配色与背景变量 -- */
--background-light-aero: rgba(250, 249, 245, 0.15);
--background-dark-aero: rgba(26, 25, 21, 0.1);
--input-bg-light: #EDE9DE;
--input-bg-dark: #2E2A20;
--background-light-new: #FAF9F5;
--background-dark-new: #1A1915;
--claude-primary: 218, 119, 86;
}
/* ==================== Claude字体设置 ==================== */
/* 用户消息字体 - SF Pro (sans-serif) */
.message-user, .message-user * {
font-family: "SF Pro", sans-serif !important;
}
/* 助手消息字体 - Tiempos (serif) */
.message-assistant, .message-assistant * {
font-family: "tiempos", "tiempos Fallback", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
font-size:14px;
}
/* 代码块保持等宽字体 */
code, pre, kbd, samp, tt, pre *, code *, kbd *, samp *, tt * {
font-family: var(--font-mono) !important;
}
/* 其他界面元素使用默认字体 */
*, *::before, *::after {
font-family: var(--font-main) !important;
}
input, button, textarea, select {
font-family: inherit !important;
}
.iconfont, .iconfont::before, .iconfont::after {
font-family: var(--font-icon) !important;
}
/* ==================== Claude浅色模式 ==================== */
body[theme-mode="light"] {
--color-background: rgba(250, 249, 245, 0.9);
--color-background-soft: rgba(240, 237, 227, 0.85);
--color-background-mute: rgba(237, 233, 222, 0.8);
--navbar-background: rgba(245, 244, 238, 0.6);
--chat-background: rgba(254, 254, 254, 0.7);
--chat-background-user: rgba(250, 249, 245, 0.8);
--chat-background-assistant: rgba(240, 237, 227, 0.8);
--color-white: rgba(254, 254, 254, 0.8);
--color-black-soft: #3D3929;
color: var(--color-black-soft);
background-color: var(--background-light-new);
--color-list-item: var(--color-background-soft) !important;
--color-list-item-hover: var(--color-background-soft) !important;
}
/* ==================== Claude深色模式 ==================== */
body[theme-mode="dark"] {
--color-background: rgba(26, 25, 21, 0.85);
--color-background-soft: rgba(46, 42, 32, 0.8);
--color-background-mute: rgba(36, 32, 24, 0.75);
--navbar-background: rgba(22, 21, 18, 0.6);
--chat-background: rgba(31, 28, 23, 0.7);
--chat-background-user: rgba(37, 33, 23, 0.8);
--chat-background-assistant: rgba(33, 32, 24, 0.8);
--color-black-soft: #E8E6E0;
color: var(--color-black-soft);
background-color: var(--background-dark-new) !important;
--color-list-item: var(--color-background-soft) !important;
--color-list-item-hover: var(--color-background-soft) !important;
}
/* ==================== 核心布局与基础样式 (优雅降级) ==================== */
#content-container {
background-color: var(--color-background) !important;
}
[class^="PageContainer"], [class^="MainMenu"], [class^="UserMenu"],
[class^="NavbarContainer"], [class^="MainMenusContainer"], [class^="ContentContainer"],
.home-tabs, .bubble, #chat, #messages, [class^="SettingContainer"],
[class~="ant-dropdown-trigger"], [class^="IconItem"], [class^="TopicListItem"],
[class^="ProviderListItem"] {
background-color: transparent !important;
}
body[theme-mode="light"] [class^="PageContainer"], body[theme-mode="light"] [class^="MainMenu"] /* etc. */ {
background-color: var(--background-light-aero) !important;
}
body[theme-mode="dark"] [class^="PageContainer"], body[theme-mode="dark"] [class^="MainMenu"] /* etc. */ {
background-color: var(--background-dark-aero) !important;
}
.message-user, .message-assistant {
border-radius: 18px; width: 99%; margin-left: 0.5%; margin-bottom: 22px;
box-sizing: border-box; position: relative; word-wrap: break-word;
border: 1px solid rgba(var(--claude-primary), 0.1);
box-shadow: 0 2px 8px rgba(var(--claude-primary), 0.05);
}
/* ==================== Modal Content 主色调样式 ==================== */
/* Modal 整体容器 */
.ant-modal-content {
background: linear-gradient(135deg,
rgba(var(--claude-primary), 0.03) 0%,
rgba(var(--claude-primary), 0.06) 100%) !important;
border: 1px solid rgba(var(--claude-primary), 0.12) !important;
border-radius: 20px !important;
box-shadow: 0 12px 40px rgba(var(--claude-primary), 0.15),
0 4px 16px rgba(var(--claude-primary), 0.08) !important;
overflow: hidden !important;
position: relative !important;
}
/* Modal Content 背景装饰 */
.ant-modal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
rgba(var(--claude-primary), 0.8) 0%,
rgba(var(--claude-primary), 0.6) 50%,
rgba(var(--claude-primary), 0.8) 100%);
z-index: 1;
}
/* Modal Header (如果存在) */
.ant-modal-content .ant-modal-header {
background: rgba(var(--claude-primary), 0.04) !important;
border-bottom: 1px solid rgba(var(--claude-primary), 0.08) !important;
padding: 16px 20px !important;
}
.ant-modal-content .ant-modal-title {
color: rgba(var(--claude-primary), 0.9) !important;
font-weight: 600 !important;
font-size: 16px !important;
}
/* Modal Body 基础背景 */
.ant-modal-content .ant-modal-body {
background: rgba(var(--claude-primary), 0.02) !important;
position: relative !important;
}
/* ==================== 浅色模式 Modal Content ==================== */
body[theme-mode="light"] .ant-modal-content {
background: linear-gradient(135deg,
rgba(var(--claude-primary), 0.02) 0%,
rgba(var(--claude-primary), 0.05) 100%) !important;
border-color: rgba(var(--claude-primary), 0.1) !important;
box-shadow: 0 12px 40px rgba(var(--claude-primary), 0.12),
0 4px 16px rgba(var(--claude-primary), 0.06) !important;
}
body[theme-mode="light"] .ant-modal-content .ant-modal-body {
background: rgba(var(--claude-primary), 0.01) !important;
}
body[theme-mode="light"] .ant-modal-content .ant-modal-header {
background: rgba(var(--claude-primary), 0.03) !important;
border-bottom-color: rgba(var(--claude-primary), 0.06) !important;
}
body[theme-mode="light"] .ant-modal-content .ant-modal-title {
color: rgba(var(--claude-primary), 0.85) !important;
}
/* ==================== 深色模式 Modal Content ==================== */
body[theme-mode="dark"] .ant-modal-content {
background: linear-gradient(135deg,
rgba(var(--claude-primary), 0.04) 0%,
rgba(var(--claude-primary), 0.08) 100%) !important;
border-color: rgba(var(--claude-primary), 0.15) !important;
box-shadow: 0 12px 40px rgba(var(--claude-primary), 0.18),
0 4px 16px rgba(var(--claude-primary), 0.1) !important;
}
body[theme-mode="dark"] .ant-modal-content .ant-modal-body {
background: rgba(var(--claude-primary), 0.03) !important;
}
body[theme-mode="dark"] .ant-modal-content .ant-modal-header {
background: rgba(var(--claude-primary), 0.06) !important;
border-bottom-color: rgba(var(--claude-primary), 0.1) !important;
}
body[theme-mode="dark"] .ant-modal-content .ant-modal-title {
color: rgba(var(--claude-primary), 0.95) !important;
}
/* ==================== 视觉效果增强 (渐进增强) ==================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
body[theme-mode="light"] {
--color-background: rgba(250, 249, 245, 0.7);
}
body[theme-mode="dark"] {
--color-background: rgba(26, 25, 21, 0.7);
}
#content-container {
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
[class^="PageContainer"], [class^="MainMenu"], [class^="UserMenu"],
[class^="NavbarContainer"], [class^="MainMenusContainer"], [class^="ContentContainer"],
.home-tabs, .bubble, #chat, #messages, [class^="SettingContainer"],
[class~="ant-dropdown-trigger"], [class^="IconItem"], [class^="TopicListItem"],
[class^="ProviderListItem"] {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}
.message-user, .message-assistant {
border: 1px solid rgba(var(--claude-primary), 0.2);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* Modal Content 模糊效果 */
.ant-modal-content {
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
}
/* ==================== 聊天与消息样式 ==================== */
body[theme-mode="light"] .message-user { background-color: var(--chat-background-user); color: var(--color-black-soft); }
body[theme-mode="dark"] .message-user { background-color: var(--chat-background-user); color: var(--color-black-soft); }
body[theme-mode="light"] .message-assistant { background-color: var(--chat-background-assistant); color: var(--color-black-soft); }
body[theme-mode="dark"] .message-assistant { background-color: var(--chat-background-assistant); color: var(--color-black-soft); }
/* ==================== 输入框样式 ==================== */
[theme-mode="light"] #inputbar, [theme-mode="light"] [class^="InputContainer"],
[theme-mode="light"] .ant-input, [theme-mode="light"] button.ant-btn-variant-outlined {
background-color: var(--input-bg-light) !important;
}
[theme-mode="dark"] #inputbar, [theme-mode="dark"] [class^="InputContainer"],
[theme-mode="dark"] .ant-input, [theme-mode="dark"] button.ant-btn-variant-outlined {
background-color: var(--input-bg-dark) !important;
}
[theme-mode] [class^="ToolsContainer"] {
backdrop-filter: none !important;
}
[theme-mode] [class^="ContentContainer"] {
backdrop-filter: none !important;
}
/* ==================== 圆角样式 ==================== */
[class^="Icon"], .ant-btn, [class^="ActionButton"], [class^="TopicListItem"], [class^="ProviderListItem"],
[class^="Main"], [class^="MenuItem"], [class^="MenuButton"], [class^="EmojiBackground"],
[class^="MainMenusContainer"], [class^="ContentContainer"], [class^="SettingContainer"],
[class^="ProviderListContainer"], #chat, .home-tabs {
border-radius: var(--button-border-radius) !important;
}
[class^="ant-switch"] { border-radius: 100px !important; }
/* ==================== 修复ant-modal-body内ScrollBarContainer及其子元素的布局问题 ==================== */
/* Modal内的搜索框容器 */
.ant-modal-body .Box-hYgUQy.Stack-cgmguR.HStack-dsNZQB {
display: flex;
align-items: center;
padding: 8px 16px !important;
margin: 0 !important;
background-color: transparent;
}
/* Modal内的搜索输入框 */
.ant-modal-body .ant-input-affix-wrapper {
width: 100%;
border-radius: 8px;
border: 1px solid rgba(var(--claude-primary), 0.15);
background-color: rgba(var(--claude-primary), 0.03);
transition: all 0.2s ease;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.ant-modal-body .ant-input-affix-wrapper:hover {
border-color: rgba(var(--claude-primary), 0.25);
box-shadow: 0 0 0 2px rgba(var(--claude-primary), 0.08);
background-color: rgba(var(--claude-primary), 0.05);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.ant-modal-body .ant-input-affix-wrapper:focus-within {
border-color: rgba(var(--claude-primary), 0.5);
box-shadow: 0 0 0 3px rgba(var(--claude-primary), 0.15);
background-color: rgba(var(--claude-primary), 0.04);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Modal内搜索输入框的输入文字 */
.ant-modal-body .ant-input {
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Modal内的搜索框容器 */
.ant-modal-body .Box-hYgUQy.Stack-cgmguR.HStack-dsNZQB {
display: flex;
align-items: center;
padding: 8px 16px !important;
margin: 0 !important;
background-color: transparent;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ==================== 恢复搜索图标为主色调色彩 ==================== */
/* Modal内搜索图标 - 使用主色调 */
.ant-modal-body .ant-input-prefix,
.ant-modal-body .ant-input-prefix *,
.ant-modal-body span.ant-input-prefix,
.ant-modal-body span.ant-input-prefix * {
color: rgba(var(--claude-primary), 0.6) !important;
fill: rgba(var(--claude-primary), 0.6) !important;
stroke: rgba(var(--claude-primary), 0.6) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.ant-modal-body .SearchIcon-fTHNIA,
.ant-modal-body div.SearchIcon-fTHNIA,
.ant-modal-body .SearchIcon-fTHNIA.jbkjpq,
.ant-modal-body div.SearchIcon-fTHNIA.jbkjpq {
color: rgba(var(--claude-primary), 0.6) !important;
fill: rgba(var(--claude-primary), 0.6) !important;
stroke: rgba(var(--claude-primary), 0.6) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
.ant-modal-body svg.lucide-search,
.ant-modal-body .lucide-search,
.ant-modal-body .SearchIcon-fTHNIA svg,
.ant-modal-body .SearchIcon-fTHNIA.jbkjpq svg {
color: rgba(var(--claude-primary), 0.6) !important;
fill: rgba(var(--claude-primary), 0.6) !important;
stroke: rgba(var(--claude-primary), 0.6) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
box-shadow: none !important;
}
.ant-modal-body svg.lucide-search path,
.ant-modal-body svg.lucide-search circle,
.ant-modal-body .SearchIcon-fTHNIA svg path,
.ant-modal-body .SearchIcon-fTHNIA svg circle {
stroke: rgba(var(--claude-primary), 0.6) !important;
fill: none !important;
}
/* Modal内的分割线 */
.ant-modal-body .ant-divider {
margin: 8px 0 !important;
border-color: rgba(var(--claude-primary), 0.12);
}
/* Modal内的滚动容器 - 修复滚动条交互问题 */
.ant-modal-body .ScrollBarContainer-eQVpyE {
width: 100%;
height: auto;
max-height: 420px;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
margin: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
/* 确保滚动条可见和可交互 */
scrollbar-width: thin;
scrollbar-gutter: stable;
/* 修复滚动条在某些浏览器中不可见的问题 */
-webkit-overflow-scrolling: touch;
}
/* 自定义滚动条样式 - 修复拖拽问题 */
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN {
scrollbar-width: thin;
scrollbar-color: rgba(var(--claude-primary), 0.5) rgba(var(--claude-primary), 0.1);
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar {
width: 8px;
background: rgba(var(--claude-primary), 0.05);
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-track {
background: rgba(var(--claude-primary), 0.08);
border-radius: 4px;
margin: 2px;
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb {
background-color: rgba(var(--claude-primary), 0.5);
border-radius: 4px;
border: 1px solid rgba(var(--claude-primary), 0.3);
min-height: 20px;
cursor: pointer;
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--claude-primary), 0.7);
border-color: rgba(var(--claude-primary), 0.5);
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:active {
background-color: rgba(var(--claude-primary), 0.8);
border-color: rgba(var(--claude-primary), 0.6);
}
.ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-corner {
background: transparent;
}
/* Modal内的Agent项目容器 - 关键修复 */
.ant-modal-body .ScrollBarContainer-eQVpyE.Container-gOOWxz {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 12px;
gap: 2px;
box-sizing: border-box;
}
/* Modal内的单个Agent项目 */
.ant-modal-body .AgentItem-jKtkyA {
width: 100%;
min-height: 40px;
padding: 8px 12px;
margin: 0;
border-radius: 8px;
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
/* Agent项目内部布局容器 */
.ant-modal-body .AgentItem-jKtkyA .Box-hYgUQy {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
}
/* 表情符号外层容器 */
.ant-modal-body .AgentItem-jKtkyA .Container-kAEhIS {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
border: none;
transition: all 0.2s ease;
}
/* 表情符号背景 */
.ant-modal-body .AgentItem-jKtkyA .EmojiBackground-fPdsEN {
width: 22px;
height: 22px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(var(--claude-primary), 0.08);
font-size: 14px;
line-height: 1;
transition: all 0.2s ease;
border: 1px solid rgba(var(--claude-primary), 0.12);
}
/* 助手名称文本 */
.ant-modal-body .AgentItem-jKtkyA .text-nowrap {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--color-black-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease;
}
/* 系统标签 */
.ant-modal-body .AgentItem-jKtkyA .ant-tag {
flex-shrink: 0;
margin-left: auto;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
border: 1px solid;
font-weight: 500;
line-height: 1.2;
transition: all 0.2s ease;
height: 18px;
display: inline-flex;
align-items: center;
}
.ant-modal-body .AgentItem-jKtkyA .ant-tag-green {
background-color: rgba(82, 196, 26, 0.08);
border-color: rgba(82, 196, 26, 0.2);
color: rgba(82, 196, 26, 0.85);
}
/* Modal内Agent项目的悬停状态 */
.ant-modal-body .AgentItem-jKtkyA:hover {
background-color: rgba(var(--claude-primary), 0.06);
border-color: rgba(var(--claude-primary), 0.15);
transform: translateX(2px);
box-shadow: 0 1px 4px rgba(var(--claude-primary), 0.08);
}
.ant-modal-body .AgentItem-jKtkyA:hover .Container-kAEhIS {
background-color: rgba(var(--claude-primary), 0.12);
}
.ant-modal-body .AgentItem-jKtkyA:hover .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.15);
border-color: rgba(var(--claude-primary), 0.25);
transform: scale(1.05);
}
.ant-modal-body .AgentItem-jKtkyA:hover .text-nowrap {
color: rgba(var(--claude-primary), 0.9);
font-weight: 450;
}
.ant-modal-body .AgentItem-jKtkyA:hover .ant-tag-green {
background-color: rgba(82, 196, 26, 0.12);
border-color: rgba(82, 196, 26, 0.3);
transform: scale(1.02);
}
/* Modal内Agent项目的选中状态 */
.ant-modal-body .AgentItem-jKtkyA.keyboard-selected,
.ant-modal-body .AgentItem-jKtkyA.default.keyboard-selected {
background-color: rgba(var(--claude-primary), 0.1);
border-color: rgba(var(--claude-primary), 0.25);
box-shadow: 0 2px 6px rgba(var(--claude-primary), 0.12);
transform: translateX(1px);
}
.ant-modal-body .AgentItem-jKtkyA.keyboard-selected .Container-kAEhIS {
background-color: rgba(var(--claude-primary), 0.18);
}
.ant-modal-body .AgentItem-jKtkyA.keyboard-selected .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.22);
border-color: rgba(var(--claude-primary), 0.35);
}
.ant-modal-body .AgentItem-jKtkyA.keyboard-selected .text-nowrap {
color: rgba(var(--claude-primary), 0.95);
font-weight: 500;
}
.ant-modal-body .AgentItem-jKtkyA.keyboard-selected .ant-tag-green {
background-color: rgba(82, 196, 26, 0.15);
border-color: rgba(82, 196, 26, 0.4);
color: rgba(82, 196, 26, 1);
font-weight: 600;
}
/* Modal内Agent项目的活动状态 */
.ant-modal-body .AgentItem-jKtkyA:active {
transform: translateX(1px) scale(0.98);
transition: all 0.1s ease;
}
/* ==================== Modal内元素的主题模式适配 ==================== */
/* 深色模式 */
body[theme-mode="dark"] .ant-modal-body .ant-input-affix-wrapper {
background-color: rgba(var(--claude-primary), 0.06);
border-color: rgba(var(--claude-primary), 0.2);
color: #e8e6e0;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="dark"] .ant-modal-body .ant-input-affix-wrapper:hover {
border-color: rgba(var(--claude-primary), 0.3);
box-shadow: 0 0 0 2px rgba(var(--claude-primary), 0.1);
background-color: rgba(var(--claude-primary), 0.08);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="dark"] .ant-modal-body .ant-input-affix-wrapper:focus-within {
border-color: rgba(var(--claude-primary), 0.6);
box-shadow: 0 0 0 3px rgba(var(--claude-primary), 0.18);
background-color: rgba(var(--claude-primary), 0.07);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="dark"] .ant-modal-body .ant-input {
color: #e8e6e0 !important;
}
body[theme-mode="dark"] .ant-modal-body .ant-input::placeholder {
color: rgba(232, 230, 224, 0.5) !important;
}
body[theme-mode="dark"] .ant-modal-body .ant-input-prefix,
body[theme-mode="dark"] .ant-modal-body .ant-input-prefix *,
body[theme-mode="dark"] .ant-modal-body span.ant-input-prefix,
body[theme-mode="dark"] .ant-modal-body span.ant-input-prefix * {
color: rgba(var(--claude-primary), 0.7) !important;
fill: rgba(var(--claude-primary), 0.7) !important;
stroke: rgba(var(--claude-primary), 0.7) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA,
body[theme-mode="dark"] .ant-modal-body div.SearchIcon-fTHNIA,
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA.jbkjpq,
body[theme-mode="dark"] .ant-modal-body div.SearchIcon-fTHNIA.jbkjpq {
color: rgba(var(--claude-primary), 0.7) !important;
fill: rgba(var(--claude-primary), 0.7) !important;
stroke: rgba(var(--claude-primary), 0.7) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body[theme-mode="dark"] .ant-modal-body svg.lucide-search,
body[theme-mode="dark"] .ant-modal-body .lucide-search,
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA svg,
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA.jbkjpq svg {
color: rgba(var(--claude-primary), 0.7) !important;
fill: rgba(var(--claude-primary), 0.7) !important;
stroke: rgba(var(--claude-primary), 0.7) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
box-shadow: none !important;
}
body[theme-mode="dark"] .ant-modal-body svg.lucide-search path,
body[theme-mode="dark"] .ant-modal-body svg.lucide-search circle,
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA svg path,
body[theme-mode="dark"] .ant-modal-body .SearchIcon-fTHNIA svg circle {
stroke: rgba(var(--claude-primary), 0.7) !important;
fill: none !important;
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA .Container-kAEhIS {
background: transparent;
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.12);
border-color: rgba(var(--claude-primary), 0.18);
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA:hover {
background-color: rgba(var(--claude-primary), 0.08);
border-color: rgba(var(--claude-primary), 0.18);
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA:hover .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.18);
border-color: rgba(var(--claude-primary), 0.28);
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA.keyboard-selected {
background-color: rgba(var(--claude-primary), 0.12);
border-color: rgba(var(--claude-primary), 0.28);
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA.keyboard-selected .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.25);
border-color: rgba(var(--claude-primary), 0.4);
}
body[theme-mode="dark"] .ant-modal-body .AgentItem-jKtkyA .ant-tag-green {
background-color: rgba(82, 196, 26, 0.12);
border-color: rgba(82, 196, 26, 0.25);
color: rgba(82, 196, 26, 1);
}
/* 浅色模式 */
body[theme-mode="light"] .ant-modal-body .ant-input-affix-wrapper {
background-color: rgba(var(--claude-primary), 0.02);
border-color: rgba(var(--claude-primary), 0.12);
color: #3d3929;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="light"] .ant-modal-body .ant-input-affix-wrapper:hover {
border-color: rgba(var(--claude-primary), 0.2);
box-shadow: 0 0 0 2px rgba(var(--claude-primary), 0.06);
background-color: rgba(var(--claude-primary), 0.04);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="light"] .ant-modal-body .ant-input-affix-wrapper:focus-within {
border-color: rgba(var(--claude-primary), 0.5);
box-shadow: 0 0 0 3px rgba(var(--claude-primary), 0.12);
background-color: rgba(var(--claude-primary), 0.03);
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="light"] .ant-modal-body .ant-input {
color: #3d3929 !important;
}
body[theme-mode="light"] .ant-modal-body .ant-input::placeholder {
color: rgba(61, 57, 41, 0.5) !important;
}
body[theme-mode="light"] .ant-modal-body .ant-input-prefix,
body[theme-mode="light"] .ant-modal-body .ant-input-prefix *,
body[theme-mode="light"] .ant-modal-body span.ant-input-prefix,
body[theme-mode="light"] .ant-modal-body span.ant-input-prefix * {
color: rgba(var(--claude-primary), 0.55) !important;
fill: rgba(var(--claude-primary), 0.55) !important;
stroke: rgba(var(--claude-primary), 0.55) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA,
body[theme-mode="light"] .ant-modal-body div.SearchIcon-fTHNIA,
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA.jbkjpq,
body[theme-mode="light"] .ant-modal-body div.SearchIcon-fTHNIA.jbkjpq {
color: rgba(var(--claude-primary), 0.55) !important;
fill: rgba(var(--claude-primary), 0.55) !important;
stroke: rgba(var(--claude-primary), 0.55) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body[theme-mode="light"] .ant-modal-body svg.lucide-search,
body[theme-mode="light"] .ant-modal-body .lucide-search,
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA svg,
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA.jbkjpq svg {
color: rgba(var(--claude-primary), 0.55) !important;
fill: rgba(var(--claude-primary), 0.55) !important;
stroke: rgba(var(--claude-primary), 0.55) !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
box-shadow: none !important;
}
body[theme-mode="light"] .ant-modal-body svg.lucide-search path,
body[theme-mode="light"] .ant-modal-body svg.lucide-search circle,
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA svg path,
body[theme-mode="light"] .ant-modal-body .SearchIcon-fTHNIA svg circle {
stroke: rgba(var(--claude-primary), 0.55) !important;
fill: none !important;
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA .Container-kAEhIS {
background: transparent;
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.06);
border-color: rgba(var(--claude-primary), 0.1);
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA:hover {
background-color: rgba(var(--claude-primary), 0.04);
border-color: rgba(var(--claude-primary), 0.12);
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA:hover .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.12);
border-color: rgba(var(--claude-primary), 0.18);
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA.keyboard-selected {
background-color: rgba(var(--claude-primary), 0.08);
border-color: rgba(var(--claude-primary), 0.22);
}
body[theme-mode="light"] .ant-modal-body .AgentItem-jKtkyA.keyboard-selected .EmojiBackground-fPdsEN {
background-color: rgba(var(--claude-primary), 0.18);
border-color: rgba(var(--claude-primary), 0.3);
}
/* ==================== 动画定义与应用 ==================== */
@media (prefers-reduced-motion: no-preference) {
@keyframes clickAnimation {
0% { transform: scale(1); }
30% { transform: scale(0.9); }
60% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes page-popup-right {
from { transform: translateX(-2em); opacity: 0%; }
to { transform: translateX(0); opacity: 100%; }
}
@keyframes page-popup-left {
from { transform: translateX(2em); opacity: 0%; }
to { transform: translateX(0); opacity: 100%; }
}
/* Modal 弹出动画 */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.ant-modal-content {
animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[class^="ant"]:hover, [class^="ActionButton"]:hover, [class^="TopicListItem"]:hover,
[class^="IconItem"]:hover, [class^="ProviderListItem"]:hover, [class^="MenuItem"]:hover,
[class^="MenuButton"]:hover, [class^="EmojiBackground"]:hover {
border-radius: var(--button-border-radius-hover) !important;
transition: border-radius var(--short-timer) var(--animation-curve);
}
[class$="-tabs-content"], [class$="-tab"], [id^="content-container"], [class^="MessageContainer"],
[class^="SettingContent"], [class^="SettingContainer"], [class^="SettingGroup"],
[class^="MenuList"], [class^="ProviderList"], [class^="AgentsListContainer"],
[class^="ProviderListContainer"], [class^="SideNav"], [class^="MainContainer-"],
[class^="Main"], [class~="message-assistant"] {
animation: page-popup-right var(--short-timer) var(--animation-curve);
}
[class~="message-user"] {
animation: page-popup-left var(--short-timer) var(--animation-curve);
}
[class^="Menus"] [class^="Icon"]:active, [class^="MainMenuItem"]:active,
.rc-virtual-list-holder-inner .ant-dropdown-trigger:active,
[class^="ListItemContainer"]:active, [class^="AgentCardContainer"]:active,
[class^="MessageLineContainer"] [class^="MessageItem"]:active,
[class^="ant-avatar"]:active, .ant-btn:active, [class^="ant-segmented-item"]:active,
[class^="anticon"]:active, [class^="ant-upload"]:active, [class^="ant-divider"]:active,
[class^="ant-tooltip"]:active, [class^="ant-message"]:active,
[class^="ActionButton"]:active, [class^="MenuButton"]:active, [class^="EmojiBackground"]:active,
[class~="ant-dropdown-menu-item"]:active, [class~="ant-dropdown-menu-submenu-title"]:active,
[class~="ant-select-selector"]:active, [class~="ant-select-item"]:active {
border-radius: var(--button-border-radius-active) !important;
transition: border-radius var(--short-timer) var(--animation-curve);
animation: clickAnimation var(--long-timer) var(--animation-curve);
}
}
/* ==================== 剩余样式与Bug修复 ==================== */
pre [class^="CodeHeader-"] {
border-radius: 12px 12px 0 0 !important;
background: linear-gradient(135deg, rgba(var(--claude-primary), 1), rgba(var(--claude-primary), 0.8)) !important;
border-bottom: none !important; margin-bottom: 0 !important;
justify-content: center;
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
}
pre [class^="CodeHeader-"]::before {
content: ' '; position: absolute; top: 10px; left: 10px;
width: 12px; height: 12px; border-radius: 50%;
background: #fc625d;
box-shadow: 20px 0 #fdbc40, 40px 0 #b983fc;
z-index: 1;
}
.bubble .message-user .message-action-button:hover {
background-color: var(--color-background-mute);
}
/* ================================================================== */
/* ============= Claude助手分组列表样式 (已整合入主题切换逻辑) ============== */
/* ================================================================== */
/* -- Claude配色方案变量 -- */
.TagsContainer-erHQJu:nth-child(1) { --group-color: 218, 119, 86; } /* Claude Primary */
.TagsContainer-erHQJu:nth-child(2) { --group-color: 180, 85, 45; } /* Claude Chart 5 */
.TagsContainer-erHQJu:nth-child(3) { --group-color: 176, 87, 48; } /* Claude Chart 1 */
.TagsContainer-erHQJu:nth-child(4) { --group-color: 156, 135, 245; } /* Claude Chart 2 */
.TagsContainer-erHQJu:nth-child(5) { --group-color: 222, 216, 196; } /* Claude Chart 3 */
.TagsContainer-erHQJu:nth-child(6) { --group-color: 219, 211, 240; } /* Claude Chart 4 */
.TagsContainer-erHQJu:nth-child(7) { --group-color: 233, 230, 220; } /* Claude Secondary */
.TagsContainer-erHQJu:nth-child(8) { --group-color: 131, 130, 125; } /* Claude Muted */
.TagsContainer-erHQJu:nth-child(9) { --group-color: 83, 81, 70; } /* Claude Input */
.TagsContainer-erHQJu:nth-child(10) { --group-color: 218, 217, 212; } /* Claude Border */
/* -- 分组容器基础样式 -- */
.TagsContainer-erHQJu {
margin: 12px 8px;
padding: 12px 8px;
border-radius: 12px;
background: rgba(var(--group-color, 201, 100, 66), 0.06);
border: 1px solid rgba(var(--group-color, 201, 100, 66), 0.12);
overflow: hidden;
}
.TagsContainer-erHQJu:has(.GroupTitle-bZsCjw) { padding: 0; }
.TagsContainer-erHQJu:has(.GroupTitle-bZsCjw) > div:not(.GroupTitle-bZsCjw) { padding: 0 12px; }
.TagsContainer-erHQJu:has(.GroupTitle-bZsCjw) .Container-lnWGMS:last-of-type,
.TagsContainer-erHQJu:has(.GroupTitle-bZsCjw) .AssistantAddItem-cnwcTr { margin-bottom: 12px; }
/* -- 分组标题 -- */
.GroupTitle-bZsCjw {
margin: 0; padding: 14px 16px;
background: rgba(var(--group-color, 201, 100, 66), 0.12);
border: none; border-radius: 12px 12px 0 0;
border-bottom: 1px solid rgba(var(--group-color, 201, 100, 66), 0.08);
cursor: pointer; transition: all 0.2s ease;
}
.GroupTitle-bZsCjw:hover { background: rgba(var(--group-color, 201, 100, 66), 0.16); }
.GroupTitleName-ifOZPj {
font-family: var(--font-display) !important;
font-weight: 600; font-size: 14px;
color: rgba(var(--group-color, 201, 100, 66), 0.9);
display: flex; align-items: center;
margin: 0; letter-spacing: 0.025em;
}
.GroupTitleName-ifOZPj .anticon {
margin-right: 8px; color: rgba(var(--group-color, 201, 100, 66), 0.7);
font-size: 12px; transition: all 0.2s ease;
}
.GroupTitleDivider-hDobAZ { display: none; }
/* -- 助手容器与项目-- */
.Container-cFFyqi {
display: flex; align-items: center; width: 100%;
border-radius: 8px; transition: all 0.25s ease;
margin: 2px 0; background: transparent;
}
.AssistantNameRow-eRVxCS {
padding: 10px 12px; background: transparent !important; border: none;
display: flex; align-items: center;
flex: 1; min-width: 0; border-radius: inherit;
transition: all 0.25s ease;
}
.Container-gOOWxz { display: flex; align-items: center; flex-shrink: 0; }
.AssistantName-cHMAyM {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--color-black-soft); font-size: 13px; font-weight: 400;
transition: all 0.25s ease; flex: 1; min-width: 0; margin-left: 8px;
}
.MenuButton-kywHgl {
display: flex; align-items: center; flex-shrink: 0;
margin-left: 8px; background: none !important; border: none !important;
box-shadow: none !important; padding: 0 !important;
}
.TopicCount-IXqyx {
background: rgba(var(--claude-primary), 0.08); color: rgba(61, 57, 41, 0.7);
border: 1px solid rgba(var(--claude-primary), 0.06);
border-radius: 10px; padding: 2px 6px; font-size: 11px;
font-weight: 500; min-width: 16px; text-align: center;
line-height: 1.2; display: inline-flex; align-items: center;
justify-content: center; transition: all 0.25s ease; box-shadow: none;
}
.EmojiBackground-fPdsEN {
border-radius: 6px; margin-right: 8px; flex-shrink: 0;
width: 20px; height: 20px; display: flex;
align-items: center; justify-content: center;
transition: all 0.25s ease;
}
/* -- 交互状态: Hover -- */
.Container-cFFyqi:hover { background: rgba(var(--group-color, 201, 100, 66), 0.08) !important; }
.Container-cFFyqi:hover .TopicCount-IXqyx {
background: rgba(var(--group-color, 201, 100, 66), 0.12);
border-color: rgba(var(--group-color, 201, 100, 66), 0.2);
color: rgba(var(--group-color, 201, 100, 66), 0.85);
transform: scale(1.02);
}
/* -- 交互状态: Active -- */
.Container-cFFyqi.active {
background: rgba(var(--group-color, 201, 100, 66), 0.1) !important;
border: 1px solid rgba(var(--group-color, 201, 100, 66), 0.2);
box-shadow: 0 1px 2px rgba(var(--group-color, 201, 100, 66), 0.08);
}
.Container-cFFyqi.active .AssistantNameRow-eRVxCS { font-weight: 500; }
.Container-cFFyqi.active .AssistantName-cHMAyM {
color: rgba(var(--group-color, 201, 100, 66), 0.95) !important;
font-weight: 500;
}
.Container-cFFyqi.active .TopicCount-IXqyx {
background: rgba(var(--group-color, 201, 100, 66), 0.9);
color: #ffffff !important;
border-color: rgba(var(--group-color, 201, 100, 66), 0.9);
font-weight: 600; transform: scale(1.02);
}
.Container-cFFyqi.active:hover {
background: rgba(var(--group-color, 201, 100, 66), 0.14) !important;
box-shadow: 0 2px 3px rgba(var(--group-color, 201, 100, 66), 0.12);
transform: translateX(1px);
}
.Container-cFFyqi.active:hover .TopicCount-IXqyx {
background: rgba(var(--group-color, 201, 100, 66), 1);
color: #ffffff !important;
border-color: rgba(var(--group-color, 201, 100, 66), 1);
transform: scale(1.05);
}
/* -- 添加助手按钮 -- */
.AssistantAddItem-cnwcTr {
margin: 8px 0 0 0; padding: 12px;
border: 2px dashed rgba(var(--group-color, 201, 100, 66), 0.3);
border-radius: 8px;
background: rgba(var(--group-color, 201, 100, 66), 0.02);
transition: all 0.25s ease; cursor: pointer; width: 100%;
}
.AssistantAddItem-cnwcTr:hover {
border-color: rgba(var(--group-color, 201, 100, 66), 0.5);
background: rgba(var(--group-color, 201, 100, 66), 0.08);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(var(--group-color, 201, 100, 66), 0.15);
}
.AssistantAddItem-cnwcTr .AssistantName-hllWJP {
color: rgba(var(--group-color, 201, 100, 66), 0.8);
font-size: 13px; display: flex; align-items: center;
font-weight: 500;
}
.AssistantAddItem-cnwcTr .anticon-plus {
margin-right: 8px; font-size: 12px;
color: rgba(var(--group-color, 201, 100, 66), 0.9);
}
/* ==================== 浅色模式 (Light Mode) 特定样式 ==================== */
body[theme-mode="light"] .AssistantName-cHMAyM { color: #3D3929; }
body[theme-mode="light"] .GroupTitleName-ifOZPj { color: rgba(var(--group-color, 201, 100, 66), 0.85); }
body[theme-mode="light"] .GroupTitleName-ifOZPj .anticon { color: rgba(var(--group-color, 201, 100, 66), 0.65); }
body[theme-mode="light"] .Container-cFFyqi.active .AssistantName-cHMAyM { color: rgba(var(--group-color, 201, 100, 66), 0.9) !important; }
body[theme-mode="light"] .Container-cFFyqi:hover { background: rgba(var(--group-color, 201, 100, 66), 0.06) !important; }
body[theme-mode="light"] .Container-cFFyqi.active {
background: rgba(var(--group-color, 201, 100, 66), 0.08) !important;
border-color: rgba(var(--group-color, 201, 100, 66), 0.25);
box-shadow: 0 1px 2px rgba(var(--group-color, 201, 100, 66), 0.06);
}
body[theme-mode="light"] .Container-cFFyqi.active:hover {
background: rgba(var(--group-color, 201, 100, 66), 0.12) !important;
box-shadow: 0 2px 3px rgba(var(--group-color, 201, 100, 66), 0.1);
}
body[theme-mode="light"] .TopicCount-IXqyx {
background: rgba(61, 57, 41, 0.05);
color: rgba(61, 57, 41, 0.7);
border-color: rgba(61, 57, 41, 0.08);
}
body[theme-mode="light"] .Container-cFFyqi:hover .TopicCount-IXqyx {
background: rgba(var(--group-color, 201, 100, 66), 0.1);
color: rgba(var(--group-color, 201, 100, 66), 0.8);
border-color: rgba(var(--group-color, 201, 100, 66), 0.15);
}
/* ==================== 深色模式 (Dark Mode) 特定样式 ==================== */
body[theme-mode="dark"] .TagsContainer-erHQJu {
background: rgba(var(--group-color, 201, 100, 66), 0.08);
border-color: rgba(var(--group-color, 201, 100, 66), 0.15);
}
body[theme-mode="dark"] .GroupTitle-bZsCjw {
background: rgba(var(--group-color, 201, 100, 66), 0.15);
border-bottom-color: rgba(var(--group-color, 201, 100, 66), 0.1);
}
body[theme-mode="dark"] .GroupTitle-bZsCjw:hover { background: rgba(var(--group-color, 201, 100, 66), 0.2); }
body[theme-mode="dark"] .GroupTitleName-ifOZPj { color: rgba(var(--group-color, 201, 100, 66), 0.95); }
body[theme-mode="dark"] .GroupTitleName-ifOZPj .anticon { color: rgba(var(--group-color, 201, 100, 66), 0.8); }
body[theme-mode="dark"] .Container-cFFyqi:hover { background: rgba(var(--group-color, 201, 100, 66), 0.1) !important; }
body[theme-mode="dark"] .Container-cFFyqi.active {
background: rgba(var(--group-color, 201, 100, 66), 0.12) !important;
border-color: rgba(var(--group-color, 201, 100, 66), 0.3);
box-shadow: 0 1px 2px rgba(var(--group-color, 201, 100, 66), 0.1);
}
body[theme-mode="dark"] .Container-cFFyqi.active:hover {
background: rgba(var(--group-color, 201, 100, 66), 0.16) !important;
box-shadow: 0 2px 3px rgba(var(--group-color, 201, 100, 66), 0.15);
}
body[theme-mode="dark"] .AssistantAddItem-cnwcTr {
border-color: rgba(var(--group-color, 201, 100, 66), 0.25);
background: rgba(var(--group-color, 201, 100, 66), 0.03);
}
body[theme-mode="dark"] .AssistantAddItem-cnwcTr:hover {
border-color: rgba(var(--group-color, 201, 100, 66), 0.4);
background: rgba(var(--group-color, 201, 100, 66), 0.1);
}
body[theme-mode="dark"] .AssistantAddItem-cnwcTr .AssistantName-hllWJP { color: rgba(var(--group-color, 201, 100, 66), 0.9); }
body[theme-mode="dark"] .AssistantAddItem-cnwcTr .anticon-plus { color: rgba(var(--group-color, 201, 100, 66), 0.95); }
/* 深色模式滚动条样式 */
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN {
scrollbar-color: rgba(var(--claude-primary), 0.6) rgba(var(--claude-primary), 0.15);
}
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar {
background: rgba(var(--claude-primary), 0.1);
}
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-track {
background: rgba(var(--claude-primary), 0.12);
}
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb {
background-color: rgba(var(--claude-primary), 0.6);
border-color: rgba(var(--claude-primary), 0.4);
}
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--claude-primary), 0.8);
border-color: rgba(var(--claude-primary), 0.6);
}
body[theme-mode="dark"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:active {
background-color: rgba(var(--claude-primary), 0.9);
border-color: rgba(var(--claude-primary), 0.7);
}
/* 浅色模式滚动条样式 */
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN {
scrollbar-color: rgba(var(--claude-primary), 0.4) rgba(var(--claude-primary), 0.08);
}
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar {
background: rgba(var(--claude-primary), 0.03);
}
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-track {
background: rgba(var(--claude-primary), 0.06);
}
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb {
background-color: rgba(var(--claude-primary), 0.4);
border-color: rgba(var(--claude-primary), 0.25);
}
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--claude-primary), 0.6);
border-color: rgba(var(--claude-primary), 0.4);
}
body[theme-mode="light"] .ant-modal-body .ScrollBarContainer-eQVpyE.hxOKnN::-webkit-scrollbar-thumb:active {
background-color: rgba(var(--claude-primary), 0.7);
border-color: rgba(var(--claude-primary), 0.5);
}
/* 确保滚动条在所有情况下都可交互 */
.ant-modal-body .ScrollBarContainer-eQVpyE::-webkit-scrollbar-thumb {
/* 确保滚动条thumb可见且可点击 */
visibility: visible !important;
pointer-events: auto !important;
}
.ant-modal-body .ScrollBarContainer-eQVpyE::-webkit-scrollbar {
/* 确保滚动条轨道可交互 */
pointer-events: auto !important;
}
/* 修复可能的z-index问题 */
.ant-modal-body .ScrollBarContainer-eQVpyE {
position: relative;
z-index: 1;
}
body[theme-mode="dark"] .TopicCount-IXqyx {
background: rgba(232, 230, 224, 0.08);
color: rgba(232, 230, 224, 0.7);
border-color: rgba(232, 230, 224, 0.06);
}- 感谢你赐予我前进的力量
-
微信 
支付宝
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 Dzx
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
