公开统计
346热度分
22消息量
2,853世界书字符
6,520固定设定字符
以下状态来自本地公开导出字段;样式与模板仅提供安全预览/下载,不在本站自动执行。
cover: gw0hxz9a1gx1zkwhlykqc2db.webpbackground: m824lp74k2g6mewws1utu4mi.webp导出中只有文件名引用,未包含实际图片二进制资源。
共 21,604 字符;仅作为文本显示,不会在本站执行。
/* ============================================================
浴室错位门 · 内置CSS (builtInCss) v4.5-mist-lite
设计概念《雾中的门》:深夜浴室 / 湿瓷砖 / 磨砂玻璃 / 门缝漏光
主色 玫瑰雾粉(情欲) + 水雾青(浴室) · 纯CSS无JS
只含用到的组件:状态栏 / 人物状态 / 行动推荐 / 小结+大总结 / 思维链
零onclick零a零input · 全部 details/summary
============================================================ */
/* ══════════════════════════════════════════════
0. 设计令牌(浴室雾系)
══════════════════════════════════════════════ */
.status-bar,
.dl-self,
.dl-actions,
.dl-summary,
.dl-chain{
--dl-bg:#0e141c; /* 深夜浴室·冷瓷砖墙 */
--dl-card:#16202b; /* 湿瓷砖卡面 */
--dl-card-hover:#1e2a38;
--dl-elevated:#273648;
--dl-frost:rgba(255,255,255,.055); /* 磨砂玻璃白 */
--dl-frost-soft:rgba(255,255,255,.028);
--dl-separator:rgba(255,255,255,.11); /* 水珠白边 */
--dl-separator-soft:rgba(255,255,255,.06);
--dl-label:#f4f6fa;
--dl-label-2:#b8c2cf;
--dl-label-3:#7d8896;
--dl-label-4:#5a6472;
--dl-accent:#FF7A9E; /* 玫瑰雾粉 */
--dl-accent-2:#86E0D8; /* 水雾青 */
--dl-green:#3DDC97;
--dl-red:#FF6B6B;
--dl-orange:#FFB26B;
--dl-yellow:#FFD97A;
--dl-purple:#C58FFF;
--dl-pink:#FF7A9E;
--dl-cyan:#86E0D8;
--dl-radius-sm:10px;
--dl-radius-md:16px;
--dl-radius-lg:22px;
--dl-font:-apple-system,'SF Pro Display','SF Pro Text','PingFang SC','Microsoft YaHei',sans-serif;
--dl-shadow-card:0 8px 28px rgba(0,0,0,.32);
--dl-shadow-raised:0 14px 44px rgba(0,0,0,.45),0 0 0 1px rgba(255,122,158,.10);
}
/* ── 通用雾面玻璃卡质感 ── */
.status-bar,
.dl-self,
.dl-actions,
.dl-summary,
.dl-chain{
position:relative;
background:
linear-gradient(180deg,var(--dl-frost) 0%,var(--dl-frost-soft) 100%),
var(--dl-card);
border:1px solid var(--dl-separator);
box-shadow:var(--dl-shadow-card);
}
/* 顶部水汽高光线 */
.status-bar::before,
.dl-self::before,
.dl-actions::before,
.dl-summary::before,
.dl-chain::before{
content:'';position:absolute;top:0;left:8%;right:8%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
pointer-events:none;
}
/* ══════════════════════════════════════════════
1. 状态栏 — 浴室四格湿瓷砖面板
══════════════════════════════════════════════ */
.status-bar{
--c-day:#FFD97A;
--c-night:#86E0D8;
--c-late:#FF7A9E;
--c-hp:#FF6B6B;
--c-warn:#FF6B6B;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
width:100%;max-width:none;margin:10px auto 0;box-sizing:border-box;
padding:10px;
border-radius:var(--dl-radius-lg);
font-family:var(--dl-font);
font-size:13px;line-height:1.4;color:var(--dl-label);
transition:border-color .25s,box-shadow .25s;
}
.status-bar:hover{
border-color:rgba(255,122,158,.35);
box-shadow:var(--dl-shadow-raised);
}
/* 每格 = 一块湿瓷砖 */
.st-item{
display:flex;align-items:center;gap:11px;
padding:14px 15px;
background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
border:1px solid var(--dl-separator-soft);
border-radius:var(--dl-radius-md);
white-space:nowrap;overflow:hidden;
transition:background .2s,transform .2s;
}
.st-item:hover{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));}
/* 图标 = 水滴圆点 */
.st-ico{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:17px;
background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),rgba(255,255,255,.02));
border:1px solid var(--dl-separator-soft);
}
.st-value{color:var(--dl-label);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;}
.st-tag{
display:inline-flex;align-items:center;gap:5px;
padding:3px 10px;font-size:10px;font-weight:700;
border-radius:20px;flex-shrink:0;letter-spacing:.5px;
}
.st-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}
.st-bar{
display:inline-block;width:38px;height:5px;
background:rgba(255,255,255,.10);border-radius:3px;
overflow:hidden;flex-shrink:0;
}
.st-bar > i{display:block;height:100%;border-radius:3px;transition:width .3s;}
/* 时间格 — 浴室顶灯:日暖白 / 夜冷青 / 深暧昧粉 */
.st-time .st-ico{background:radial-gradient(circle at 30% 25%,rgba(255,217,122,.30),rgba(255,217,122,.06));color:var(--c-day);}
.st-time.is-day .st-tag{color:var(--c-day);background:rgba(255,217,122,.12);}
.st-time.is-night .st-ico{background:radial-gradient(circle at 30% 25%,rgba(134,224,216,.30),rgba(134,224,216,.06));color:var(--c-night);}
.st-time.is-night .st-tag{color:var(--c-night);background:rgba(134,224,216,.12);}
.st-time.is-late .st-ico{background:radial-gradient(circle at 30% 25%,rgba(255,122,158,.34),rgba(255,122,158,.07));color:var(--c-late);}
.st-time.is-late .st-tag{color:var(--c-late);background:rgba(255,122,158,.14);box-shadow:0 0 12px rgba(255,122,158,.25);}
/* 位置格 — 门那头的浴室(水雾青) */
.st-loc .st-ico{background:radial-gradient(circle at 30% 25%,rgba(134,224,216,.30),rgba(134,224,216,.06));color:var(--c-night);}
.st-loc .st-value{color:var(--dl-accent-2);}
/* 见过格 — 玫瑰粉 */
.st-fig .st-ico{background:radial-gradient(circle at 30% 25%,rgba(255,122,158,.34),rgba(255,122,158,.07));color:var(--c-late);}
.st-fig .st-value{color:var(--dl-accent);font-variant-numeric:tabular-nums;}
/* 体力格 */
.st-hp .st-ico{background:radial-gradient(circle at 30% 25%,rgba(255,107,107,.28),rgba(255,107,107,.05));color:var(--c-hp);}
.st-hp .st-value{color:var(--c-hp);}
.st-hp .st-bar > i{background:linear-gradient(90deg,var(--c-hp),#FFB26B);}
.st-hp.is-low .st-value{color:var(--c-warn);animation:hp-pulse 1.2s ease-in-out infinite;}
.st-hp.is-low .st-bar > i{background:var(--c-warn);}
/* 警告态 + 涨跌 */
.st-warn .st-value{color:var(--c-warn);font-weight:700;}
.st-warn .st-ico{animation:warn-blink 1s ease-in-out infinite;}
.st-up .st-value{animation:flash-up 1.2s ease;}
.st-down .st-value{animation:flash-down 1.2s ease;}
@keyframes hp-pulse{0%,100%{opacity:1;text-shadow:none}50%{opacity:.6;text-shadow:0 0 8px rgba(255,107,107,.6)}}
@keyframes warn-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes flash-up{0%{text-shadow:0 0 10px rgba(61,220,151,.8);transform:scale(1.06)}100%{text-shadow:none;transform:scale(1)}}
@keyframes flash-down{0%{text-shadow:0 0 10px rgba(255,107,107,.8);transform:scale(1.06)}100%{text-shadow:none;transform:scale(1)}}
@media (max-width:480px){
.status-bar{gap:8px;padding:8px;border-radius:var(--dl-radius-md);}
.st-item{padding:12px 12px;gap:9px;border-radius:14px;}
.st-ico{width:32px;height:32px;font-size:15px;}
.st-value{font-size:13px;}
.st-bar{width:30px;}
}
/* ══════════════════════════════════════════════
2. 人物状态 .dl-self — 雾面档案卡
══════════════════════════════════════════════ */
.dl-self{
width:100%;max-width:none;margin:8px auto 0;box-sizing:border-box;
border-radius:var(--dl-radius-lg);
font-family:var(--dl-font);
color:var(--dl-label);
overflow:hidden;
transition:border-color .25s,box-shadow .25s;
}
.dl-self:hover{
border-color:rgba(255,122,158,.35);
box-shadow:var(--dl-shadow-raised);
}
/* 顶部三色灯带:粉→青→暖黄(浴室灯光) */
.dl-self::after{
content:'';display:block;height:3px;width:100%;
background:linear-gradient(90deg,#FF7A9E 0%,#86E0D8 50%,#FFD97A 100%);
opacity:.8;
}
.dl-self>summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;
padding:13px 16px;
font-size:14px;font-weight:600;color:var(--dl-label);letter-spacing:-.2px;
background:linear-gradient(180deg,var(--dl-frost),transparent);
border-bottom:1px solid var(--dl-separator-soft);
user-select:none;
}
.dl-self>summary::-webkit-details-marker{display:none;}
.dl-self>summary::-moz-list-marker{display:none;}
.dl-self>summary .dl-self-ic{
width:30px;height:30px;border-radius:50%;margin-right:8px;
display:inline-flex;align-items:center;justify-content:center;font-size:15px;
background:radial-gradient(circle at 30% 25%,rgba(255,122,158,.30),rgba(255,122,158,.05));
}
.dl-self>summary .dl-self-arrow{font-size:11px;color:var(--dl-label-3);transition:transform .2s;}
.dl-self[open]>summary .dl-self-arrow{transform:rotate(180deg);}
.dl-self:not([open])>summary{border-bottom:none;}
.dl-self-row{
display:flex;align-items:center;gap:10px;
padding:8px 14px 8px 13px;
border-bottom:1px solid rgba(255,255,255,.045);
font-size:12.5px;line-height:1.45;
position:relative;
}
.dl-self-row:last-child{border-bottom:none;}
/* 左缘色条 — 八行分色 */
.dl-self-row::before{
content:'';position:absolute;left:0;top:7px;bottom:7px;
width:3px;border-radius:0 2px 2px 0;
}
.dl-self-row:nth-child(1)::before{background:#86E0D8;}
.dl-self-row:nth-child(2)::before{background:#FF6B6B;}
.dl-self-row:nth-child(3)::before{background:#FFB26B;}
.dl-self-row:nth-child(4)::before{background:#FF7A9E;}
.dl-self-row:nth-child(5)::before{background:#C58FFF;}
.dl-self-row:nth-child(6)::before{background:#FFD97A;}
.dl-self-row:nth-child(7)::before{background:#3DDC97;}
.dl-self-row:nth-child(8)::before{background:#7d8896;}
.dl-self-row .dl-s-ic{
width:24px;height:24px;flex-shrink:0;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:13px;
background:rgba(255,255,255,.06);
}
.dl-self-row .dl-s-l{
color:var(--dl-label-3);flex-shrink:0;font-weight:700;font-size:10px;
min-width:30px;letter-spacing:.5px;
}
.dl-self-row .dl-s-v{
color:var(--dl-label);flex:1;word-break:break-word;font-size:12.5px;line-height:1.45;
}
.dl-self-row .dl-s-v em{font-style:normal;color:var(--dl-accent);font-weight:600;}
/* 绯闻标签 */
.rep-tag{
display:inline-block;padding:2px 10px;border-radius:12px;
font-size:11px;font-weight:600;letter-spacing:.3px;
background:rgba(255,255,255,.05);
}
.rep-tag.rp-new{color:var(--dl-cyan);background:rgba(134,224,216,.12);border:1px solid rgba(134,224,216,.25);}
.rep-tag.rp-known{color:var(--dl-green);background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.25);}
.rep-tag.rp-suspect{color:var(--dl-orange);background:rgba(255,178,107,.12);border:1px solid rgba(255,178,107,.25);}
.rep-tag.rp-banned{color:var(--dl-red);background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.25);}
/* 能力评级徽章 — 水滴徽章 */
.dl-self-rank{
display:inline-flex;align-items:center;justify-content:center;
width:23px;height:23px;border-radius:50%;
font-size:11px;font-weight:800;border:1px solid;
vertical-align:middle;margin-right:6px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.dl-self-rank.rk-s{color:#fff;background:linear-gradient(135deg,#C58FFF,#FF7A9E);border-color:rgba(255,255,255,.35);box-shadow:0 0 10px rgba(197,143,255,.4);}
.dl-self-rank.rk-a{color:#062b30;background:linear-gradient(135deg,#86E0D8,#BFF2ED);border-color:rgba(134,224,216,.5);}
.dl-self-rank.rk-b{color:#03331e;background:linear-gradient(135deg,#3DDC97,#8AF5C6);border-color:rgba(61,220,151,.5);}
.dl-self-rank.rk-c{color:#3a2102;background:linear-gradient(135deg,#FFB26B,#FFD5A8);border-color:rgba(255,178,107,.5);}
.dl-self-rank.rk-d{color:#3d0606;background:linear-gradient(135deg,#FF6B6B,#FFB0B0);border-color:rgba(255,107,107,.5);}
/* 变动高亮 */
.dl-self-row.changed{
animation:flash-up 1.2s ease;
background:rgba(255,122,158,.05);
}
/* ══════════════════════════════════════════════
3. 行动推荐 .dl-actions — 水滴序号 + 瓷砖按钮
══════════════════════════════════════════════ */
.dl-actions{
width:100%;max-width:none;margin:10px auto 0;box-sizing:border-box;
font-family:var(--dl-font);
border-radius:var(--dl-radius-lg);
overflow:hidden;
transition:border-color .25s,box-shadow .25s;
}
.dl-actions:hover{
border-color:rgba(255,122,158,.35);
box-shadow:var(--dl-shadow-raised);
}
.dl-actions>summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:s
/* 预览已截断;下载 CSS 可查看完整内容。 */{
"renderTemplate": null,
"assistantRegexReplace": null,
"enableMemorySchema": false,
"memorySchema": null,
"introPage": "rjbjs1iemtg6ojjoq3adh7dw.html",
"options": null,
"defaultModelSettings": null,
"cover": "gw0hxz9a1gx1zkwhlykqc2db.webp",
"background": "m824lp74k2g6mewws1utu4mi.webp"
}本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。