公开统计
471热度分
26消息量
51,790世界书字符
6,131固定设定字符
以下状态来自本地公开导出字段;样式与模板仅提供安全预览/下载,不在本站自动执行。
cover: z9nogtxwrw2dp2ulzke2rwab.webp导出中只有文件名引用,未包含实际图片二进制资源。
共 41,558 字符;仅作为文本显示,不会在本站执行。
/* ========================================
翡翠湾·暖沙纪·主题CSS
风格:度假·海洋·慵懒·高级
配色:海碧、沙金、日落绯、浪花白
适配:手机端 + 电脑端
故事背景:龙国最南部岛屿,叶卡捷琳娜的临海别墅
======================================== */
/* 导入休闲风格字体 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
/* 翡翠湾主题色 */
--emerald-sea: #2E8B7A;
--shallow-reef: #5DBFB0;
--sand-gold: #E5C594;
--sunset-coral: #F4A58A;
--sunset-pink: #E8816E;
--driftwood: #D4B896;
--seafoam: #A8D8C9;
--deep-water: #1A5F6E;
--whitecap: #F5F0E8;
--shell-white: #FDF8F3;
--coconut-shell: #8B6F5E;
--palm-shadow: #2D4A3E;
--beach-glass: rgba(245, 240, 232, 0.7);
/* 边框渐变 */
--border-tide: linear-gradient(135deg,
var(--seafoam) 0%,
var(--emerald-sea) 25%,
var(--sand-gold) 50%,
var(--sunset-coral) 75%,
var(--seafoam) 100%);
--border-sunset: linear-gradient(145deg,
var(--sand-gold) 0%,
var(--sunset-pink) 30%,
var(--driftwood) 50%,
var(--sunset-coral) 70%,
var(--sand-gold) 100%);
}
/* 全局字体与基础 */
body,
.chat-container,
.status-content,
.message-bubble {
font-family: 'Quicksand', 'Noto Sans SC', 'Helvetica Neue', sans-serif !important;
}
body {
position: relative;
min-height: 100vh;
}
/* ========================================
背景装饰 - 翡翠湾度假元素
======================================== */
/* 左上角 - 椰影与阳光光晕 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 220px;
background:
radial-gradient(circle at 20% 20%, rgba(245, 240, 232, 0.25) 0%, transparent 60%),
radial-gradient(circle at 30% 25%, rgba(244, 165, 138, 0.12) 0%, transparent 50%),
repeating-linear-gradient(135deg, transparent 0px, transparent 15px, rgba(46, 139, 122, 0.04) 15px, rgba(46, 139, 122, 0.04) 17px);
border-radius: 0 0 60% 0;
pointer-events: none;
z-index: 0;
}
/* 右下角 - 浪花与贝壳 */
body::after {
content: "🐚";
position: fixed;
bottom: 15px;
right: 15px;
font-size: 45px;
opacity: 0.15;
transform: rotate(5deg);
filter: drop-shadow(0 0 8px #E5C594);
pointer-events: none;
z-index: 0;
}
/* 右上角 - 海鸟剪影 */
.chat-container {
position: relative;
}
.chat-container::before {
content: "~~ ~~ ~~";
position: absolute;
top: -5px;
right: 25px;
font-size: 24px;
opacity: 0.1;
letter-spacing: 15px;
color: var(--deep-water);
pointer-events: none;
z-index: 1;
}
/* 左下角沙滩纹理 */
#chat-content {
position: relative;
}
#chat-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background:
radial-gradient(circle at 15% 85%, var(--sand-gold) 2px, transparent 3px),
radial-gradient(circle at 35% 75%, var(--driftwood) 3px, transparent 4px),
radial-gradient(circle at 55% 90%, var(--sand-gold) 2px, transparent 3px),
radial-gradient(circle at 75% 65%, var(--coconut-shell) 1px, transparent 2px),
radial-gradient(circle at 85% 80%, var(--sand-gold) 2px, transparent 3px);
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
.chat-main-container {
position: relative !important;
}
.chat-main-container::after {
content: "";
position: fixed;
bottom: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle at 80% 80%, rgba(93, 191, 176, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ========================================
主容器 - 临海别墅玻璃风格
======================================== */
.status-content {
position: relative !important;
background: linear-gradient(165deg,
rgba(245, 240, 232, 0.92) 0%,
rgba(253, 248, 243, 0.95) 50%,
rgba(245, 240, 232, 0.92) 100%) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 3px solid transparent !important;
border-image: var(--border-tide) !important;
border-image-slice: 1 !important;
border-radius: 30px 12px 30px 12px !important;
box-shadow:
0 0 0 1px var(--sand-gold),
0 0 0 4px rgba(46, 139, 122, 0.15),
0 10px 30px rgba(0, 0, 0, 0.15),
inset 0 0 50px rgba(168, 216, 201, 0.15) !important;
padding: 22px 26px !important;
margin: 18px 10px !important;
color: var(--palm-shadow) !important;
}
.status-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(45deg, rgba(229, 197, 148, 0.04) 0px, rgba(229, 197, 148, 0.04) 2px, transparent 2px, transparent 10px),
radial-gradient(circle at 15% 25%, rgba(244, 165, 138, 0.1) 0%, transparent 40%),
radial-gradient(circle at 85% 75%, rgba(93, 191, 176, 0.08) 0%, transparent 50%);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.status-content::after {
content: "🌊";
position: absolute;
top: -10px;
right: -10px;
font-size: 45px;
opacity: 0.1;
transform: rotate(15deg);
filter: drop-shadow(0 0 6px var(--emerald-sea));
pointer-events: none;
z-index: 1;
}
.status-content > * {
position: relative;
z-index: 2;
}
.status-content .status-header,
.status-content > :first-child {
position: relative;
}
.status-content-wrapper {
position: relative;
}
.status-content p:not([class="text-"]),
.status-content li:not([class="text-"]),
.status-content span:not([class*="text-"]) {
color: var(--palm-shadow) !important;
}
/* ========================================
对话气泡 - AI侧(海玻璃风格)
======================================== */
.group .bg-gray-100\/90 {
background: linear-gradient(145deg, #E8F3EE 0%, #DCF0E8 50%, #E5F2EB 100%) !important;
border: 2px solid transparent !important;
border-image: var(--border-sunset) !important;
border-image-slice: 1 !important;
border-radius: 24px 8px 24px 8px !important;
box-shadow: 0 4px 0 0 rgba(45, 74, 62, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(168, 216, 201, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
color: var(--palm-shadow) !important;
padding: 16px 18px !important;
margin: 8px 4px !important;
font-size: 15px !important;
line-height: 1.6 !important;
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
transition: all 0.25s ease !important;
}
/* 左上角 - 椰树叶影 */
.group .bg-gray-100\/90::before {
content: "🌴" !important;
position: absolute !important;
left: -20px !important;
top: -20px !important;
font-size: 90px !important;
line-height: 1 !important;
opacity: 0.1 !important;
transform: rotate(-15deg) !important;
pointer-events: none !important;
z-index: 0 !important;
filter: drop-shadow(0 0 10px rgba(46, 139, 122, 0.3)) !important;
}
/* 右上角 - 海星 */
.group .bg-gray-100\/90::after {
content: "⭐" !important;
position: absolute !important;
right: -25px !important;
top: -25px !important;
font-size: 100px !important;
line-height: 1 !important;
opacity: 0.08 !important;
transform: rotate(20deg) !important;
pointer-events: none !important;
z-index: 0 !important;
filter: drop-shadow(0 0 8px rgba(244, 165, 138, 0.4)) !important;
color: var(--sunset-coral) !important;
}
.group .bg-gray-100\/90 > * {
position: relative !important;
z-index: 2 !important;
}
.group .bg-gray-100\/90:hover {
box-shadow: 0 4px 0 0 rgba(45, 74, 62, 0.2), 0 12px 25px rgba(0, 0, 0, 0.12), inset 0 0 40px rgba(93, 191, 176, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 0 20px rgba(46, 139, 122, 0.2) !important;
transform: translateY(-2px);
}
.group .bg-gray-100\/90:hover::before {
opacity: 0.15 !important;
transform: rotate(-10deg) scale(1.05) !important;
transition: all 0.3s ease !important;
}
.group .bg-gray-100\/90:hover::after {
opacity: 0.12 !important;
transform: rotate(25deg) scale(1.05) !important;
transition: all 0.3s ease !important;
}
.group .bg-gray-100\/90 p,
.group .bg-gray-100\/90 span,
.group .bg-gray-100\/90 div {
position: relative !important;
z-index: 2 !important;
}
/* 用户侧气泡 - 落日暖色调 */
.group .bg-blue-500 {
background: linear-gradient(145deg, #FDE8E0 0%, #FAD4C4 100%) !important;
border: 1.5px solid var(--sunset-coral) !important;
border-radius: 8px 24px 8px 24px !important;
box-shadow: 0 3px 0 0 rgba(232, 129, 110, 0.2), 0 6px 15px rgba(0, 0, 0, 0.08) !important;
color: var(--coconut-shell) !important;
}
/* ========================================
按钮美化 - 漂流瓶与贝壳
======================================== */
.flex.items-center.gap-2.pb-2 > button {
background: linear-gradient(165deg, #DCF0E8 0%, #C5E6D8 50%, #DCF0E8 100%) !important;
color: var(--deep-water) !important;
border: 2px solid transparent !important;
border-image: linear-gradient(135deg, var(--seafoam) 0%, var(--sunset-coral) 50%, var(--seafoam) 100%) !important;
border-image-slice: 1 !important;
border-radius: 20px 6px 20px 6px !important;
box-shadow: 0 3px 0 0 rgba(45, 74, 62, 0.2), 0 5px 12px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
padding: 8px 18px !important;
margin: 0 3px !important;
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1) !important;
position: relative !important;
font-size: 13px !important;
}
.flex.items-center.gap-2.pb-2 > button::before {
content: "🐚";
position: absolute;
left: 6px;
top: 4px;
font-size: 10px;
opacity: 0.4;
}
.flex.items-center.gap-2.pb-2 > button::after {
content: "🐚";
position: absolute;
right: 6px;
bottom: 4px;
font-size: 10px;
opacity: 0.4;
transform: scaleX(-1);
}
.flex.items-center.gap-2.pb-2 > button:hover {
background: linear-gradient(165deg, #E8F3EE 0%, #DCF0E8 50%, #E8F3EE 100%) !important;
color: var(--emerald-sea) !important;
transform: translate(1px, 2px) !important;
box-shadow: 0 1px 0 0 rgba(45, 74, 62, 0.15), 0 6px 15px rgba(46, 139, 122, 0.2), inset 0 1px 4px rgba(255, 255, 255, 0.7), 0 0 15px rgba(93, 191, 176, 0.25) !important;
border-image: linear-gradient(135deg, var(--emerald-sea) 0%, var(--sunset-pink) 50%, var(--emerald-sea) 100%) !important;
border-image-slice: 1 !important;
}
.flex.items-center.gap-2.pb-2 > button:active {
transform: translate(3px, 3px) !important;
box-shadow: 0 0 0 0 rgba(45, 74, 62, 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 20px rgba(244, 165, 138, 0.3) !important;
}
button[type="submit"]::before,
.send-button::before {
content: "🌊" !important;
}
button[type="submit"]::after,
.send-button::after {
content: "🌊" !important;
transform: scaleX(-1) !important;
}
/* ========================================
MUI按钮美化 - 珊瑚骨
======================================== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text {
background: linear-gradient(165deg, #DCF0E8 0%, #C5E6D8 40%, #D0EADF 100%) !important;
color: var(--deep-water) !important;
border: 2px solid transparent !important;
border-image: linear-gradient(135deg, var(--emerald-sea) 0%, var(--sunset-coral) 50%, var(--emerald-sea) 100%) !important;
border-image-slice: 1 !important;
border-radius: 18px 6px 18px 6px !important;
box-shadow: 0 3px 0 0 rgba(45, 74, 62, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.5) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
padding: 8px 18px !important;
margin: 0 3px !important;
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1) !important;
position: relative !important;
font-size: 14px !important;
font-family: 'Quicksand', 'Noto Sans SC', sans-serif !important;
line-height: 1.4 !important;
min-width: 64px !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text::before {
content: "🐚";
position: absolute;
left: 6px;
top: 3px;
font-size: 10px;
opacity: 0.4;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text::after {
content: "";
position: absolute;
right: 6px;
bottom: 6px;
width:
/* 预览已截断;下载 CSS 可查看完整内容。 */{
"renderTemplate": null,
"assistantRegexReplace": null,
"enableMemorySchema": false,
"memorySchema": null,
"introPage": "a6tgthx1i53y2t7apmgszkvg.html",
"options": {
"items": []
},
"defaultModelSettings": null,
"cover": "z9nogtxwrw2dp2ulzke2rwab.webp",
"background": null
}本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。