/* --- 羊皮卷古朴风格 - 核心美化方案 --- */ /* --- 1. 整体基调：背景、字体与核心颜色 --- */ /* 为顶部栏、评论区、底部输入区设置统一的羊皮卷背景纹理 */ .sticky.w-full.top-0.flex.items-center, div[class*="w-full"][class*="bg-white"][class*="bottom-0"], .bg-gradient-to-t { background-color: #F5EAD9 !important; /* 羊皮卷基础底色 */ background-image: radial-gradient(circle at top left, rgba(199, 178, 153, 0.2) 0%, transparent 40%), radial-gradient(circle at bottom right, rgba(165, 133, 102, 0.25) 0%, transparent 50%), linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03)); /* 细微的脏污和颗粒感 */ border-color: rgba(92, 64, 51, 0.3) !important; /* 统一边框色 */ } /* --- 2. 顶部栏 (Top Bar) --- */ /* 顶部栏容器 */ .sticky.w-full.top-0.flex.items-center { box-shadow: 0 2px 8px rgba(92, 64, 51, 0.3); /* 古旧的阴影 */ border-bottom: 1px solid rgba(92, 64, 51, 0.4) !important; } /* 模型选择器、设置按钮等文字 */ #ai-model-selector .truncate.text-\[13px\], #header-setting-button { font-family: Georgia, "Times New Roman", serif !important; color: #4A3024 !important; /* 深墨棕色 */ font-weight: bold; transition: color 0.3s ease; } /* 顶部所有图标 */ .sticky.w-full.top-0.flex.items-center svg { color: #6D4C41 !important; /* 稍浅的棕色 */ transition: color 0.3s ease, transform 0.3s ease; } /* 交互效果：图标和按钮悬停 */ #ai-model-selector:hover .truncate.text-\[13px\], #header-setting-button:hover { color: #2d1d16 !important; } .sticky.w-full.top-0.flex.items-center svg:hover, #header-setting-button:hover svg { color: #2d1d16 !important; transform: scale(1.1); } /* 移动端历史记录未读角标 */ .sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden { background-color: #8B4513 !important; /* 适配主题的棕色 */ } /* --- 3. 底部输入栏 (Bottom Bar) --- */ /* 输入框容器 */ #ai-chat-bottom-input { background: #EFE4CF !important; /* 比主背景稍深的输入区域 */ border-top: 1px solid rgba(92, 64, 51, 0.4) !important; box-shadow: 0 -2px 8px rgba(92, 64, 51, 0.2); } /* 主输入框 */ #ai-chat-input { background-color: #F8F0E3 !important; /* 最亮的区域，如同新纸 */ color: #3E2723 !important; /* 主要输入文字颜色 */ font-family: Georgia, serif !important; border: 1px solid #D7C7B2 !important; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(92, 64, 51, 0.2); transition: all 0.3s ease; } #ai-chat-input:focus { border-color: #8B4513 !important; /* 聚焦时边框颜色加深 */ box-shadow: inset 0 1px 3px rgba(92, 64, 51, 0.3), 0 0 5px rgba(139, 69, 19, 0.4); } /* 占位符样式 */ #ai-chat-input::placeholder { color: #A98F7A !important; font-style: italic; font-family: Georgia, serif !important; } /* 文字选中效果 */ #ai-chat-input::selection { background: #8B4513 !important; color: #F5EAD9 !important; } /* --- 4. 评论区 (Comment Section) --- */ /* 评论区主背景 */ div[class*="w-full"][class*="bg-white"][class*="bottom-0"] { color: #5C4033 !important; /* 评论区默认文字颜色 */ } /* 评论区标题 */ div.text-lg.font-bold { font-family: Georgia, "Times New Roman", serif !important; color: #4A3024 !important; border-bottom: 1px solid rgba(92, 64, 51, 0.2); padding-bottom: 8px; } /* “个人评分”文字 */ p.MuiTypography-body1.text-grey-600 { font-family: Georgia, "Times New Roman", serif !important; color: #6D4C41 !important; } /* 评分星星 */ span.MuiRating-iconEmpty svg { color: #BCAAA4 !important; /* 未选中的星星，浅灰褐色 */ } span.MuiRating-iconFilled svg { color: #D5A100 !important; /* 选中的星星，仿K金/黄铜色 */ filter: drop-shadow(0 0 2px #FFD700); } span.text-orange-500 { color: #A97100 !important; font-weight: bold; } /* 评论输入框 */ textarea.rc-textarea { background-color: #F8F0E3 !important; color: #3E2723 !important; font-family: Georgia, serif !important; border: 1px solid #D7C7B2 !important; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(92, 64, 51, 0.2); } textarea.rc-textarea::placeholder { color: #A98F7A !important; font-style: italic; } /* 字数统计 */ div.bg-gray-100.text-gray-500 { background-color: transparent !important; color: #6D4C41 !important; font-size: 11px; } /* 发送评论按钮 */ div.cursor-pointer.group.flex.items-center.justify-center { background-color: #8B4513 !important; /* 鞍棕色 */ border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } div.cursor-pointer.group.flex.items-center.justify-center:hover { background-color: #A0522D !important; /* 悬停时变亮 */ transform: scale(1.05); } div[data-state="closed"] svg[data-icon="Send03"] { color: #F5EAD9 !important; /* 按钮图标颜色 */ } /* 分割线 */ div.style_divider__mW0YX { border-color: rgba(92, 64, 51, 0.2) !important; } /* 排序按钮 */ button.MuiButton-outlinedPrimary { border-color: #BCAAA4 !important; color: #6D4C41 !important; font-family: Georgia, serif !important; transition: all 0.3s ease; } button.MuiButton-outlinedPrimary:hover { background-color: rgba(139, 69, 19, 0.1) !important; border-color: #8B4513 !important; } button.MuiButton-containedPrimary { background-color: #6D4C41 !important; color: #F5EAD9 !important; font-family: Georgia, serif !important; box-shadow: none; } button.MuiButton-containedPrimary:hover { background-color: #5C4033 !important; } /* 评论项 */ div.group.ml-0 { border-bottom: 1px dashed rgba(92, 64, 51, 0.15) !important; padding: 12px 0; } /* 评论项内文字 */ div.text-sm.text-grey-600 span.font-bold, /* 用户名 */ div.break-all, /* 评论内容 */ div.text-xs.text-grey-600 /* 时间戳 */ { font-family: Georgia, "Times New Roman", serif !important; color: #5C4033 !important; } div.text-xs.text-grey-600 { color: #795548 !important; } /* “你”标签 */ span.text-\[10px\] { background-color: #BCAAA4 !important; color: #F5EAD9 !important; border-radius: 3px; padding: 1px 4px; } /* 点赞与回复 */ button.text-gray-400, span.cursor-pointer { color: #A1887F !important; transition: color 0.3s ease; } button.text-gray-400:hover, span.cursor-pointer:hover { color: #6D4C41 !important; text-decoration: underline; } /* 回复区域边框 */ div.ml-8.border-l { border-left-color: rgba(92, 64, 51, 0.2) !important; } /* 隐藏可能存在的按钮栏背景 */ #ai-mod-button2 { background: none !important; } /* --- 古朴羊皮卷轴RPG主题 --- */ /* 1. 移除顶部的默认颜色装饰条 */ [class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; } /* 2. 统一聊天框主体样式：模拟羊皮卷质感 */ .bg-gray-100\/90.relative.inline-block { /* 使用多层渐变模拟不均匀的羊皮纸颜色和纹理 */ background-color: #fdf6e3 !important; background-image: linear-gradient(rgba(224, 202, 169, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 202, 169, 0.1) 1px, transparent 1px), radial-gradient(circle at top left, rgba(200,180,150,0.2), transparent 40%), radial-gradient(circle at bottom right, rgba(200,180,150,0.3), transparent 50%) !important; background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100% !important; border: 1px solid #7a5c43 !important; border-radius: 6px !important; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(122, 92, 67, 0.2) !important; } /* 3. 主要文本内容样式：深棕色墨迹效果 */ .markdown-body { color: #4a2c2a !important; font-family: Georgia, 'Times New Roman', serif !important; line-height: 1.75 !important; z-index: 1 !important; background: transparent !important; } /* 4. 优化您模板中的元素 */ /* 标题 (###)：手写标题风格 */ .markdown-body h3 { color: #6b4f4b !important; font-weight: bold !important; border-bottom: 2px solid rgba(107, 79, 75, 0.3) !important; padding-bottom: 6px !important; margin-top: 20px !important; letter-spacing: 1px !important; } /* 分隔线 (---)：装饰性分隔符 */ .markdown-body hr { border: 0 !important; height: 10px !important; background: url('data:image/svg+xml,') center repeat-x !important; background-size: 50px 10px !important; margin: 24px 0 !important; } /* 可折叠区域 details：密信样式 */ .markdown-body details { background: rgba(243, 233, 218, 0.5) !important; /* 略深的羊皮纸色 */ border: 1px dashed rgba(122, 92, 67, 0.4) !important; border-radius: 4px !important; padding: 12px 16px !important; margin-bottom: 12px !important; } /* 可折叠区域的标题 summary：火漆蜡封标记 */ .markdown-body summary { color: #4a2c2a !important; font-weight: bold !important; cursor: pointer !important; display: flex !important; align-items: center !important; } /* 用伪元素模拟蜡封图标 */ .markdown-body summary::before { content: '✉️'; color: #8B0000; font-size: 1.2em; margin-right: 8px; transition: transform 0.2s ease; } .markdown-body details[open] > summary::before { transform: rotate(10deg); } /* 标记 ()：加重墨迹 */ .markdown-body strong { color: #8B0000 !important; /* 暗红色，突出显示 */ font-weight: bold !important; } /* 5. 底部附加元素样式，确保与主题协调 */ .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary, .MuiTypography-root.MuiTypography-body2.css-6c0gf2, .text-orange-500 { color: #6b4f4b !important; opacity: 0.8 !important; transition: opacity 0.3s ease !important; } .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover { opacity: 1 !important; background: rgba(122, 92, 67, 0.1) !important; } /* 6. 自定义加载动画：魔法符文脉冲 */ /* 隐藏默认加载点 */ .style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text { display: none !important; } /* 加载动画容器 */ .flex.items-center.justify-center.w-6.h-5 { position: relative !important; width: 28px !important; height: 28px !important; } /* 使用伪元素创建SVG动画 */ .flex.items-center.justify-center.w-6.h-5::before { content: url('data:image/svg+xml,'); position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* 7. 减弱动态效果，尊重用户系统偏好 */ @media (prefers-reduced-motion: reduce) { .flex.items-center.justify-center.w-6.h-5::before { /* 在减弱模式下，显示一个静态的、不旋转的符文 */ content: url('data:image/svg+xml,'); animation: none !important; } }