css /* 1. 移除顶部颜色装饰条 */ [class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; } /* 2. 统一聊天框基础样式 - 石墙与羊皮纸质感 */ .bg-gray-100\/90.relative.inline-block { background: #1a1a2e !important; /* 深邃的岩洞黑 */ border: 2px solid #4a3b32 !important; /* 生锈的铁色边框 */ border-radius: 8px 8px 4px 4px !important; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), /* 内部阴影加深洞穴感 */ 0 4px 8px rgba(0, 0, 0, 0.6) !important; /* 外部投影 */ position: relative !important; isolation: isolate !important; /* 建立层叠上下文 */ } /* 3. 为统一聊天框添加伪元素 - 打造粗糙石墙纹理背景 */ .bg-gray-100\/90.relative.inline-block::before { content: ''; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px ), repeating-linear-gradient( 90deg, transparent, transparent 3px, rgba(255, 255, 255, 0.01) 3px, rgba(255, 255, 255, 0.01) 6px ) !important; /* 模拟石砖缝隙 */ z-index: 0 !important; pointer-events: none !important; border-radius: inherit !important; } /* 4. 为统一聊天框添加伪元素 - 燃烧的符文边框装饰 */ .bg-gray-100\/90.relative.inline-block::after { content: ''; position: absolute !important; top: -4px !important; left: -4px !important; right: -4px !important; bottom: -4px !important; border: 2px solid transparent !important; border-radius: 10px !important; background: linear-gradient(45deg, #ffd700, #ff6b35, #8b0000, #ffd700) border-box !important; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; z-index: -1 !important; pointer-events: none !important; opacity: 0.6 !important; } /* 5. 输入框特定样式 - 更深的祭坛质感 */ .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) { background: #0f0f1a !important; /* 更深的黑色 */ border-color: #5c3a1e !important; /* 古铜色边框 */ box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 215, 0, 0.2) !important; /* 金色微光 */ } /* 6. 主要文本内容 - 古老书卷上的文字 */ .markdown-body { color: #e0c9a5 !important; /* 羊皮纸色 */ font-family: 'Georgia', 'Times New Roman', serif !important; font-size: 15px !important; line-height: 1.6 !important; text-shadow: 0 1px 2px #000000 !important; /* 轻微浮雕感 */ z-index: 1 !important; background: transparent !important; position: relative !important; } /* 7. 文本内容强调样式 */ .markdown-body strong { color: #ffd700 !important; /* 金色强调 */ font-weight: bold !important; text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important; } .markdown-body em { color: #ff6b35 !important; /* 火焰色斜体 */ font-style: italic !important; } /* 8. 底部附加元素 - 状态栏与信息栏 (地牢风格) */ /* 底部操作按钮 (状态栏) */ .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary { color: #b8860b !important; /* 暗金色 */ font-family: 'Courier New', monospace !important; font-size: 12px !important; letter-spacing: 1px !important; text-transform: uppercase !important; border: 1px solid #4a3b32 !important; border-radius: 3px !important; padding: 4px 8px !important; background: rgba(0, 0, 0, 0.3) !important; transition: all 0.2s ease !important; } .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover { color: #ffd700 !important; background: rgba(255, 215, 0, 0.1) !important; border-color: #ffd700 !important; box-shadow: 0 0 5px rgba(255, 215, 0, 0.3) !important; } /* 模型名称文本 (信息栏) */ .MuiTypography-root.MuiTypography-body2.css-6c0gf2 { color: #a0a0b0 !important; /* 银色 */ font-family: 'Courier New', monospace !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; opacity: 0.8 !important; } /* Token消耗文本 */ .text-orange-500 { color: #ff6347 !important; /* 番茄红，代表生命值消耗 */ font-family: 'Courier New', monospace !important; font-weight: bold !important; font-size: 12px !important; text-shadow: 0 0 3px rgba(255, 0, 0, 0.3) !important; } /* 9. 自定义加载动画 - 旋转的魔法符文 */ /* 先隐藏默认加载元素 */ .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: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 使用SVG SMIL动画创建旋转符文 */ .flex.items-center.justify-center.w-6.h-5::before { content: ''; display: block !important; width: 30px !important; height: 30px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='none' stroke='%23ffd700' stroke-width='2' stroke-dasharray='8 4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 15 15' to='360 15 15' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M15 3 L15 8 M15 22 L15 27 M3 15 L8 15 M22 15 L27 15' stroke='%23ff6b35' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 15 15' to='360 15 15' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain !important; /* 兼容占位：如果SMIL不支持，则使用纯CSS作为后备 */ } /* 10. 移动端适配 */ @media (max-width: 480px) { .bg-gray-100\/90.relative.inline-block { border-radius: 6px 6px 3px 3px !important; border-width: 1px !important; } .markdown-body { font-size: 14px !important; } .flex.items-center.justify-center.w-6.h-5 { width: 30px !important; height: 30px !important; } .flex.items-center.justify-center.w-6.h-5::before { width: 24px !important; height: 24px !important; } } /* 11. 低动效模式适配 */ @media (prefers-reduced-motion: reduce) { .flex.items-center.justify-center.w-6.h-5::before { animation-duration: 4s !important; /* 降低速度 */ } .bg-gray-100\/90.relative.inline-block::after { animation: none !important; /* 关闭边框流光 */ } }