公开统计
1,753热度分
284消息量
140,910世界书字符
20,326固定设定字符
以下状态来自本地公开导出字段;样式与模板仅提供安全预览/下载,不在本站自动执行。
cover: wi8q6osoj9mj3o32cemzl1gc.webp导出中只有文件名引用,未包含实际图片二进制资源。
共 27,712 字符;仅作为文本显示,不会在本站执行。
/* =============================================
🎭 Galgame 对话框系统 —— 纯小白也能看懂的注释
所有样式都限定在 <game> 内部,绝不影响网站其他部分
支持:CG 默认显示 / 立绘互斥 / 多动画 / 纯CSS全局CG开关
============================================= */
/* ---------- 1. 游戏主容器 <game> ---------- */
game {
/* 定义可一键修改的 CSS 变量 */
--g-face: 100px; /* 头像宽高,改这里所有头像都会变 */
--g-bg: rgba(30, 28, 36, 0.92); /* 对话框背景色(半透明深灰) */
--g-border: rgba(255,255,255,0.12); /* 对话框边框色 */
--g-name: #f0c060; /* 角色名字颜色(金色) */
--g-text: #e8e0d8; /* 对话文字颜色(暖白) */
/* 让所有子元素垂直排列,间距 8px */
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
font-family: 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
color: #fff;
position: relative; /* 为内部固定定位按钮提供定位上下文(实际用 fixed) */
}
/*
重置盒子模型,防止外部样式污染。
选择器中的 * 表示所有元素,::before 和 ::after 是伪元素(自动插入的小盒子)
*/
game, game *, game *::before, game *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*
隐藏页面中所有的 radio(单选)和 checkbox(多选)。
我们只用它们的“选中”状态来驱动显示/隐藏,不需要让用户直接看到它们。
*/
input[type="radio"],
input[type="checkbox"] {
position: absolute; /* 脱离正常文档流 */
width: 0; /* 零尺寸 */
height: 0;
opacity: 0; /* 完全透明 */
pointer-events: none; /* 鼠标事件穿过,防止意外点击 */
margin: 0;
overflow: hidden;
}
/*
每个可交互的对话(例如含有立绘)都用 <label> 包裹。
点击 <label> 内的任何地方都等于点击它内部的 <input>,从而改变选中状态。
*/
label {
display: block;
cursor: pointer; /* 鼠标变成手型,提示可点击 */
position: relative;
}
/* ---------- 2. 对话框 <tb> ---------- */
tb {
display: grid;
grid-template-columns: var(--g-face) 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"face name"
"face text";
gap: 2px 14px;
align-items: start;
background: var(--g-bg);
border: 1px solid var(--g-border);
border-radius: 14px;
padding: 14px 18px 14px 14px;
box-shadow: 0 4px 24px rgba(0,0,0,0.45);
backdrop-filter: blur(6px);
transition: 0.25s;
cursor: pointer;
}
tb:hover {
background: rgba(38,35,45,0.94);
border-color: rgba(255,255,255,0.25);
}
input:checked ~ tb {
border-color: rgba(255,255,255,0.55) !important;
box-shadow: 0 0 14px rgba(240,192,96,0.35) !important;
background: rgba(45,42,55,0.96) !important;
}
/* ---------- 头像(tx 预设表情) ---------- */
tb[tx]::before {
content: "";
grid-area: face;
width: var(--g-face) !important;
height: var(--g-face) !important;
min-width: var(--g-face) !important;
max-width: var(--g-face) !important;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 2px solid rgba(255,255,255,0.35);
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
flex-shrink: 0;
align-self: center;
}
/* 🆕 tb 内的 img —— 外部图片头像,占据 grid-area: face */
tb img {
grid-area: face;
width: var(--g-face);
height: var(--g-face);
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.35);
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
display: block;
align-self: center;
}
/* 🆕 当 tb 里有 img 时,隐藏伪元素头像(tx) */
tb:has(img)[tx]::before {
display: none !important;
}
/* 没有头像(无 tx 也无 img)时,去掉头像列 */
tb:not([tx]):not(:has(img)) {
grid-template-columns: 1fr;
grid-template-areas: "name" "text";
}
tb:not([tx]):not(:has(img))::before { display: none; }
/* ---------- 名字 ---------- */
tb[name]::after {
content: attr(name);
grid-area: name;
font-size: 0.82em;
font-weight: 700;
color: var(--g-name);
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
tb:not([name]) {
grid-template-areas: "face text";
}
tb:not([name])::after { display: none; }
tb:not([name]):not([tx]):not([src]) {
grid-template-columns: 1fr;
grid-template-areas: "text";
}
tb:not([name]) t {
font-style: italic;
color: #d0c8bc;
opacity: 0.9;
}
/* ---------- 2.3 对话文本 <t> ---------- */
t {
grid-area: text; /* 放入 text 区域 */
font-size: 0.95em;
line-height: 1.6; /* 行高,内容多时高度自动增加 */
color: var(--g-text);
word-break: break-word; /* 长单词或链接自动换行,防止溢出 */
}
/* ---------- 3. 场景图 <sc> ---------- */
sc {
display: block; /* 默认直接显示,无需任何勾选 */
width: 100%;
height: 600px; /* 场景图高度,你可以改成自己喜欢的数值 */
border-radius: 12px;
background-size: cover; /* 图片覆盖整个区域,裁剪多余部分 */
background-position: center; /* 图片居中 */
margin-bottom: 10px; /* 与下方对话框保持 10px 间距 */
position: relative;
cursor: pointer; /* 鼠标变手型,提示可点击 */
}
/* ---------- 7. CG 全局控制按钮 <cg-ctrl> ---------- */
cg-ctrl {
position: fixed !important;
right: 120px !important; /* 与立绘水平对齐 */
top: 20px !important; /* 立绘上方 20px(140+300+10) */
z-index: 220; /* 比立绘还高,确保可点击 */
cursor: pointer;
font-size: 16px;
color: #8B5F6B !important; /* 玫瑰棕文字,柔和可读 */
background: rgba(255,192,203,0.15);
border: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px; /* 圆形按钮 */
transition: 0.25s;
}
cg-ctrl:hover {
color: white;
background: rgba(50,46,58,0.95);
border-color: rgba(255,255,255,0.35);
}
/*
CG 按钮内的 <label> 样式,保证其内部内容水平排列,手型光标。
这样 HTML 中就不需要任何 style 属性了。
*/
cg-ctrl label {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
/*
核心规则:当 CG 开关的 checkbox 被勾选时,整个 <game> 内的所有 <sc> 都被隐藏。
:has(.cg-toggle:checked) 表示“包含被选中 checkbox 的那个 game”。
注意:这个选择器需要较新的浏览器(Chrome 105+, Edge 105+, Safari 15.4+)。
风月AI 界面通常使用较新的浏览器内核,可以放心使用。
*/
game:has(input.cg-toggle:checked) sc {
display: none !important;
}
/* =============================================
9. 📌 图片资源映射区(占位色块,换成真实图片 URL 即可)
============================================= */
/* 场景图:根据 cg 属性显示不同的背景 */
/* 如果要添加新场景,复制上面一行,改 cg 值和背景图就好 */
/* 立绘:根据 lh 属性显示不同角色立绘 */
/* 头像:根据 tx 属性显示不同表情头像 */
/*
下面这些是给占位色块添加文字标识,方便开发时知道哪张图。
正式上线时请把下面这两个块的 CSS 全部删除!
*/
/*
sc[cg]::before {
content: attr(cg);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255,255,255,0.9);
font-size: 1.4em;
font-weight: bold;
pointer-events: none;
}
*/
/* ---------- 10. 手机端适配 ---------- */
@media (max-width: 640px) {
game {
--g-face: 80px; /* 小屏幕头像缩小 */
}
tb {
padding: 10px 12px 10px 10px;
gap: 1px 10px;
border-radius: 10px;
}
tb[name]::after { font-size: 0.75em; }
t { font-size: 0.85em; }
ill {
width: 130px;
height: 240px;
right: -10px !important;
bottom: 110px !important;
}
.ill-close {
font-size: 0.75em;
right: 0px !important; /* 与立绘水平对齐 */
top: 70px !important; /* 立绘上方 20px(140+300+10) */
width: 60px;
height: 20px;
}
cg-ctrl {
font-size: 0.75em;
right: 0px !important; /* 与立绘水平对齐 */
top: 50px !important; /* 立绘上方 20px(140+300+10) */
width: 60px;
height: 20px;
}
}
/* === 淡粉色主题 · 侧边栏折叠框美化 === */
/* --- 1. 基础定位与折叠状态 (Collapsed) --- */
#ai-chat-answer:last-of-type .relative details {
position: fixed !important;
right: 15px !important;
width: 45px !important;
height: auto !important;
min-height: 44px !important;
background: #FFF5F7 !important; /* 淡粉底色 */
border: 1px solid #F2D5D7 !important; /* 柔粉边框 */
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(220, 140, 150, 0.12) !important; /* 粉调阴影 */
z-index: 100 !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: hidden !important;
cursor: pointer !important;
top: 300px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
padding: 6px 4px !important;
}
/* 各折叠栏垂直定位 (保持不变) */
#ai-chat-answer:nth-last-child(1) details:nth-of-type(1) { top: 60px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(2) { top: 130px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(3) { top: 220px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(4) { top: 320px !important; }
/* --- 2. 折叠状态 · 竖排标题 --- */
#ai-chat-answer:last-of-type .relative details > summary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
writing-mode: vertical-rl !important;
text-orientation: upright !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #8B5F6B !important; /* 玫瑰棕文字,柔和可读 */
letter-spacing: 2px !important;
line-height: 1.6 !important;
list-style: none !important;
cursor: pointer !important;
user-select: none !important;
width: 100% !important;
min-height: 36px !important;
padding: 4px 2px !important;
box-sizing: border-box !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-radius: 6px !important;
background: transparent !important;
}
/* 隐藏默认箭头 */
#ai-chat-answer:last-of-type .relative details > summary::-webkit-details-marker { display: none !important; }
#ai-chat-answer:last-of-type .relative details > summary { list-style: none !important; }
/* 折叠 Hover */
#ai-chat-answer:last-of-type .relative details:not([open]):hover {
background: #FFEBEE !important; /* 更亮的粉 */
border-color: #F0C4CA !important;
box-shadow: 0 4px 14px rgba(215, 130, 140, 0.18) !important;
transform: translateX(-2px) !important;
}
#ai-chat-answer:last-of-type .relative details:not([open]):hover > summary {
color: #6B3D4A !important; /* 深粉色文字 */
}
/* ========================================
3. 展开状态 · 统一面板
======================================== */
/* 展开后移动到最高标签下方10px */
#ai-chat-answer:last-of-type .relative details[open] {
top: 60px !important;
width: 420px !important;
max-width: calc(100vw - 50px) !important;
height: auto !important;
max-height: calc(100vh - 90px) !important;
min-height: 120px !important;
background: #FFFFFF !important; /* 面板保持白色背景 */
border: 1px solid #F5D3D6 !important; /* 浅粉边框 */
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(210, 140, 150, 0.18), 0 2px 8px rgba(150, 80, 90, 0.08) !important;
z-index: 200 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
display: block !important;
flex-direction: unset !important;
align-items: unset !important;
justify-content: unset !important;
padding: 0 !important;
cursor: default !important;
scrollbar-width: thin !important;
scrollbar-color: #F2C7CD transparent !important; /* 粉色滚动条 */
}
/* WebKit 滚动条 */
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar { width: 6px !important; }
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar-track {
background: transparent !important;
margin: 8px 0 !important;
}
#ai-chat-answer:last-of-type .relative details[open]
/* 预览已截断;下载 CSS 可查看完整内容。 */{
"renderTemplate": null,
"assistantRegexReplace": null,
"enableMemorySchema": false,
"memorySchema": null,
"introPage": "ts8pqhggh5mcemnmd2fv30mt.html",
"options": {
"items": []
},
"defaultModelSettings": null,
"cover": "wi8q6osoj9mj3o32cemzl1gc.webp",
"background": null
}本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。