公开统计
2,834热度分
458消息量
58,881世界书字符
12,153固定设定字符
以下状态来自本地公开导出字段;样式与模板仅提供安全预览/下载,不在本站自动执行。
cover: vmo9iihxx8fvwrcwavxwynq1.webpbackground: msiezpxyivg0kjv38q1gsmpe.webp导出中只有文件名引用,未包含实际图片二进制资源。
共 50,015 字符;仅作为文本显示,不会在本站执行。
/* ============================================
聊天界面纯CSS美化 - 历史/古典主题
全面版本 - 完整无截断
============================================ */
/* === 全局CSS变量 === */
:root {
--history-gold: #c5a55a;
--history-gold-light: #e8d5a3;
--history-gold-dark: #8b7332;
--history-parchment: #f5f0e8;
--history-parchment-dark: #e8dcc8;
--history-ink: #2c1810;
--history-ink-light: #4a3728;
--history-red: #8b2500;
--history-red-light: #c44536;
--history-blue: #1a3a5c;
--history-blue-light: #2d5a87;
--history-green: #2d4a2d;
--history-seal: #c41e3a;
--history-bronze: #8b6914;
--history-shadow: rgba(44, 24, 16, 0.15);
--history-shadow-deep: rgba(44, 24, 16, 0.3);
--history-border: #c5a55a;
--history-border-light: rgba(197, 165, 90, 0.4);
}
/* ============================================
第一部分:顶部导航栏
============================================ */
.sticky.w-full.top-0.flex.items-center {
background: linear-gradient(180deg, #2c1810 0%, #3d2317 50%, #4a2c1c 100%) !important;
border-bottom: 2px solid var(--history-gold) !important;
box-shadow: 0 2px 12px var(--history-shadow-deep), inset 0 -1px 0 rgba(197, 165, 90, 0.3) !important;
position: relative !important;
}
.sticky.w-full.top-0.flex.items-center::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 20px,
rgba(197, 165, 90, 0.03) 20px,
rgba(197, 165, 90, 0.03) 21px
) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.sticky.w-full.top-0.flex.items-center::after {
content: "◆" !important;
position: absolute !important;
bottom: -8px !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: var(--history-gold) !important;
font-size: 10px !important;
line-height: 1 !important;
background: var(--history-parchment) !important;
padding: 0 6px !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* 状态标签 */
.px-2\.5.py-px.text-xs.rounded-md.text-green-800.bg-green-100 {
background: linear-gradient(135deg, rgba(197, 165, 90, 0.2), rgba(197, 165, 90, 0.1)) !important;
color: var(--history-gold-light) !important;
border: 1px solid var(--history-border-light) !important;
border-radius: 2px !important;
font-family: "KaiTi", "STKaiti", serif !important;
}
/* 模型选择器 */
#ai-model-selector .group.flex.items-center.px-2.h-8.rounded-md {
background: rgba(197, 165, 90, 0.1) !important;
border: 1px solid var(--history-border-light) !important;
border-radius: 3px !important;
transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center.px-2.h-8.rounded-md:hover {
background: rgba(197, 165, 90, 0.2) !important;
border-color: var(--history-gold) !important;
box-shadow: 0 0 8px rgba(197, 165, 90, 0.3) !important;
}
#ai-model-selector .truncate.text-\[13px\].font-medium {
color: var(--history-gold-light) !important;
font-family: "KaiTi", "STKaiti", serif !important;
letter-spacing: 0.5px !important;
}
#ai-model-selector svg[data-icon="ChevronDown"] {
color: var(--history-gold) !important;
}
/* 设置按钮 */
#header-setting-button {
color: var(--history-gold-light) !important;
transition: all 0.3s ease !important;
position: relative !important;
}
#header-setting-button:hover {
color: var(--history-gold) !important;
transform: rotate(30deg) !important;
filter: drop-shadow(0 0 4px rgba(197, 165, 90, 0.5)) !important;
}
/* 音乐按钮 */
.lucide-music-2 {
color: var(--history-gold-light) !important;
}
.lucide-music-2:hover {
color: var(--history-gold) !important;
filter: drop-shadow(0 0 3px rgba(197, 165, 90, 0.4)) !important;
}
/* ============================================
第二部分:聊天容器与背景
============================================ */
.chat-container.overflow-y-auto.w-full.h-full {
background: linear-gradient(180deg, var(--history-parchment) 0%, #f0e8d8 50%, var(--history-parchment-dark) 100%) !important;
max-height: 100vh !important;
overflow-y: auto !important;
position: relative !important;
}
.chat-container.overflow-y-auto.w-full.h-full::before {
content: "" !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background:
radial-gradient(ellipse at 20% 50%, rgba(197, 165, 90, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(139, 37, 0, 0.03) 0%, transparent 50%),
repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(44, 24, 16, 0.02) 28px,
rgba(44, 24, 16, 0.02) 29px
) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.chat-container.overflow-y-auto.w-full.h-full::after {
content: "" !important;
position: fixed !important;
top: 60px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80% !important;
max-width: 700px !important;
height: calc(100% - 120px) !important;
border: 1px solid rgba(197, 165, 90, 0.15) !important;
border-radius: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
background: transparent !important;
}
/* 自定义滚动条 */
.chat-container::-webkit-scrollbar {
width: 8px !important;
}
.chat-container::-webkit-scrollbar-track {
background: var(--history-parchment-dark) !important;
border-left: 1px solid var(--history-border-light) !important;
}
.chat-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--history-gold-dark), var(--history-gold), var(--history-gold-dark)) !important;
border-radius: 0 !important;
border: 1px solid rgba(197, 165, 90, 0.5) !important;
}
.chat-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--history-gold), var(--history-gold-light), var(--history-gold)) !important;
}
/* 消息列表包装器 */
.mx-auto.pt-24.w-full.max-w-\[720px\].px-1.md\:px-4 {
position: relative !important;
z-index: 1 !important;
}
/* ============================================
第三部分:用户消息卡片
============================================ */
.group.flex.mb-2:not(#ai-chat-answer) {
margin-bottom: 16px !important;
transition: all 0.3s ease !important;
}
/* 用户头像 */
#customized-question-avatar img {
border-radius: 4px !important;
border: 2px solid var(--history-gold) !important;
box-shadow: 0 2px 8px var(--history-shadow) !important;
transition: all 0.3s ease !important;
}
#customized-question-avatar img:hover {
box-shadow: 0 4px 12px var(--history-shadow-deep), 0 0 0 2px rgba(197, 165, 90, 0.3) !important;
transform: scale(1.05) !important;
}
/* 用户消息气泡 */
#customized-question-content {
background: linear-gradient(135deg, #faf6ee 0%, #f5efe3 100%) !important;
border: 1px solid var(--history-border-light) !important;
border-radius: 4px !important;
box-shadow: 2px 2px 8px var(--history-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
position: relative !important;
transition: all 0.3s ease !important;
}
#customized-question-content:hover {
box-shadow: 3px 3px 12px var(--history-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
border-color: var(--history-gold) !important;
}
/* 用户消息顶部蓝色装饰条 */
#customized-question-content .bg-\[\#c9e1e9\].rounded-xl {
background: linear-gradient(90deg,
transparent 0%,
var(--history-blue-light) 10%,
var(--history-blue) 50%,
var(--history-blue-light) 90%,
transparent 100%
) !important;
border-radius: 0 !important;
height: 2px !important;
opacity: 0.7 !important;
position: relative !important;
}
#customized-question-content .bg-\[\#c9e1e9\].rounded-xl::before {
content: "━━━" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
color: var(--history-blue-light) !important;
font-size: 6px !important;
letter-spacing: -1px !important;
pointer-events: none !important;
}
/* 用户消息内容 */
#customized-question-content .markdown-body {
color: var(--history-ink) !important;
font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
line-height: 1.8 !important;
letter-spacing: 0.3px !important;
}
/* ============================================
第四部分:AI消息卡片
============================================ */
#ai-chat-answer {
margin-bottom: 16px !important;
transition: all 0.3s ease !important;
}
/* AI头像 */
#customized-answer-avatar img {
border-radius: 4px !important;
border: 2px solid var(--history-seal) !important;
box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2) !important;
transition: all 0.3s ease !important;
}
#customized-answer-avatar img:hover {
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3), 0 0 0 2px rgba(196, 30, 58, 0.2) !important;
transform: scale(1.05) !important;
}
/* AI消息气泡 */
#customized-answer-content {
background: linear-gradient(135deg, #fff9f5 0%, #faf3ec 100%) !important;
border: 1px solid rgba(139, 37, 0, 0.2) !important;
border-radius: 4px !important;
box-shadow: 2px 2px 8px rgba(139, 37, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
position: relative !important;
transition: all 0.3s ease !important;
}
#customized-answer-content:hover {
box-shadow: 3px 3px 12px rgba(139, 37, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
border-color: rgba(139, 37, 0, 0.35) !important;
}
/* AI消息顶部红色装饰条 */
#customized-answer-content .bg-\[\#F1CBCB\].rounded-xl {
background: linear-gradient(90deg,
transparent 0%,
var(--history-red-light) 10%,
var(--history-red) 50%,
var(--history-red-light) 90%,
transparent 100%
) !important;
border-radius: 0 !important;
height: 2px !important;
opacity: 0.7 !important;
position: relative !important;
}
#customized-answer-content .bg-\[\#F1CBCB\].rounded-xl::before {
content: "━━━" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
color: var(--history-red-light) !important;
font-size: 6px !important;
letter-spacing: -1px !important;
pointer-events: none !important;
}
/* AI消息内容 */
#customized-answer-content .markdown-body {
color: var(--history-ink) !important;
font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
line-height: 1.8 !important;
letter-spacing: 0.3px !important;
}
/* AI消耗信息 */
#customized-answer-content .MuiStack-root.text-purple-500.mt-1 {
color: var(--history-gold-dark) !important;
font-family: "KaiTi", "STKaiti", serif !important;
font-size: 11px !important;
opacity: 0.7 !important;
border-top: 1px dashed var(--history-border-light) !important;
padding-top: 4px !important;
margin-top: 8px !important;
}
#customized-answer-content .MuiStack-root.text-purple-500.mt-1 .MuiTypography-body2 {
color: var(--history-gold-dark) !important;
}
#customized-answer-content .MuiStack-root.text-purple-500.mt-1 .text-orange-500 {
color: var(--history-red) !important;
}
/* ============================================
第五部分:消息操作按钮
============================================ */
/* 用户消息操作按钮 */
#customized-question-content .MuiStack-root.css-1dzoql9 .MuiButton-root {
color: var(--history-ink-light) !important;
opacity: 0.5 !important;
border-radius: 2px !important;
transition: all 0.3s ease !important;
font-family: "KaiTi",
/* 预览已截断;下载 CSS 可查看完整内容。 */{
"renderTemplate": null,
"assistantRegexReplace": null,
"enableMemorySchema": false,
"memorySchema": null,
"introPage": "m684ekpynr3u93in9w20qnxp.html",
"options": {
"items": []
},
"defaultModelSettings": {
"model": "pear/gemini-3-flash-preview"
},
"cover": "vmo9iihxx8fvwrcwavxwynq1.webp",
"background": "msiezpxyivg0kjv38q1gsmpe.webp"
}本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。