全局 CSS 样式
了解如何使用全局 CSS 样式自定义游戏外观
全局 CSS 样式可以让你自定义游戏中消息的视觉效果——修改颜色、字体、背景、间距、圆角等等。在创作台的「全局 CSS 样式」编辑器中直接编写 CSS 即可。
直接写 CSS 规则就行，不需要添加 <style> 标签。样式仅在消息区域内生效，不会影响页面其他部分。
不熟悉 CSS？可以让 AI 帮你写。把你想要的效果描述给它（比如「用户消息气泡改成渐变紫色背景」），它就能生成对应的 CSS 代码，复制粘贴即可。
用户消息气泡
通过 .msg-message-user 类自定义用户发送的消息样式。
渐变背景：
.msg-message-user {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 18px 18px 4px 18px;
color: #fff;
}边框描边风格：
.msg-message-user {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
}磨砂玻璃风格：
.msg-message-user {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
}AI 消息气泡
通过 .msg-message-assistant 类自定义 AI 回复的消息样式。
用户消息气泡有系统默认样式（背景 + 圆角 + 模糊），AI 消息气泡默认是透明的。两者都可以通过全局 CSS 自由覆盖。
半透明背景：
.msg-message-assistant {
background: rgba(255, 255, 255, 0.05);
border-radius: 18px 18px 18px 4px;
padding: 12px 16px;
}左边框装饰：
.msg-message-assistant {
border-left: 3px solid #667eea;
padding-left: 12px;
}暗色卡片风格：
.msg-message-assistant {
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px 16px;
}覆盖预设标签样式
如果你使用了预设标签但不喜欢默认样式，可以直接用全局 CSS 覆盖，不需要修改正则规则。
/* 旁白改为金色边框风格 */
.msg-narration {
color: #c9a96e;
font-style: normal;
border-left: 2px solid #c9a96e;
padding-left: 12px;
background: none;
-webkit-text-fill-color: initial;
}
/* 场景描述改小字号 */
.msg-scenario {
color: #888;
font-size: 0.9em;
}内置类名参考
以下是所有可覆盖的 CSS 类名：
消息容器
| 类名 | 说明 |
|---|---|
.msg-message | 所有消息的基础容器，玩家和 AI 消息都包含此类 |
.msg-message-user | 玩家发送的消息气泡，与 .msg-message 同时存在 |
.msg-message-assistant | AI 回复的消息气泡，与 .msg-message 同时存在（默认透明无样式） |
三者的关系：.msg-message 是基础类，所有消息都有。在此基础上，玩家消息会追加 .msg-message-user，AI 消息会追加 .msg-message-assistant。所以用 .msg-message 设置通用样式（如字体、行高），用另外两个分别控制各自的外观。
预设标签
| 类名 | 对应标签 | 说明 |
|---|---|---|
.msg-narration | <narration> | 旁白文字 |
.msg-system | <system> | 系统提示 |
.msg-bubble | <bubble> | 角色对话气泡 |
.msg-bubble-wrap | <bubble> | 带说话人头像/名称时的外层包装容器（VStack 布局：头部 + 气泡） |
.msg-bubble-header | <bubble> | 说话人头部区域（头像 + 名称的行容器） |
.msg-bubble-avatar | <bubble> | 说话人头像图片 |
.msg-bubble-name | <bubble> | 说话人名称文字 |
.msg-scenario | <scenario> | 场景描述 |
.msg-quoted | "中文引号" | 引号包裹的对话文字 |
折叠面板
| 类名 | 说明 |
|---|---|
.msg-details | 折叠面板容器 |
.msg-summary | 折叠面板标题 |
.msg-details-body | 折叠面板展开后的内容 |
选项
| 类名 | 说明 |
|---|---|
.msg-options | 选项容器 |
.msg-question | 选项的问题文字 |
.msg-option-item | 可点击的单个选项 |
开场白美化
| 类名 | 说明 |
|---|---|
.msg-preset | 开场白美化容器 |
.msg-preset h1 | 开场白标题 |
.msg-preset p | 开场白段落 |
.msg-preset .highlight | 开场白高亮文字 |
游戏面板更新提示
AI 回复后游戏面板刷新期间，会在消息下方显示一张「正在更新游戏面板」的胶囊提示。
| 类名 | 说明 |
|---|---|
.state-updating-hint | 提示卡片外壳（背景、边框、圆角、内边距、高斯模糊） |
.state-updating-text | 「正在更新游戏面板」文字 |
.state-updating-dots | 文字后方三个动画点的容器 |
.state-updating-dots .dot | 单个动画点（继承动画，可调字号/颜色） |
.state-updating-dots .dot-1 | 第 1 个点（动画延迟 0s） |
.state-updating-dots .dot-2 | 第 2 个点（动画延迟 0.2s） |
.state-updating-dots .dot-3 | 第 3 个点（动画延迟 0.4s） |
游戏面板
如果你的角色启用了游戏面板（World Mode），也可以用全局 CSS 定制面板的视觉效果。
面板主容器
| 类名 | 说明 |
|---|---|
.gs-game-state-panel | 游戏面板最外层根容器 |
.gs-layout-inline | 移动端 / 窄屏的内嵌模式 |
.gs-layout-side | 桌面端侧栏模式 |
.gs-side-left | 侧栏模式中的左侧面板 |
.gs-side-right | 侧栏模式中的右侧面板 |
.gs-inline-wrapper | 内嵌模式包装器（含 .gs-expanded 展开状态） |
.gs-inline-panel | 内嵌模式展开后的面板容器 |
.gs-panel-header | 标签栏区域 |
.gs-panel-content | 内容滚动区域 |
.gs-side-left-top | 侧栏左列顶部世界状态区 |
.gs-side-header | 侧栏头部区域 |
.gs-side-title | 侧栏标题文字 |
.gs-side-content | 侧栏内容区域 |
.gs-resize-handle | 面板宽度拖拽手柄容器 |
.gs-resize-pill | 拖拽手柄胶囊形指示器 |
标签栏
| 类名 | 说明 |
|---|---|
.gs-game-state-tabs | 标签栏根容器 |
.gs-tabs-scroll | 标签横向滚动容器 |
.gs-tab-btn | 单个标签按钮 |
.gs-tab-btn.gs-active | 当前激活的标签 |
.gs-tab-icon | 标签内的图标 |
.gs-tab-label | 标签文字 |
.gs-tab-badge | 标签右上角更新数量徽章 |
摘要条
| 类名 | 说明 |
|---|---|
.gs-summary-bar | 摘要条容器（可点击展开） |
.gs-summary-bar.gs-summary-expanded | 展开状态的摘要条 |
.gs-summary-content | 摘要内容滚动容器 |
.gs-summary-list | 摘要项目列表 |
.gs-summary-value | 单个摘要值文字 |
.gs-summary-sep | 摘要项之间的分隔符（竖线） |
.gs-summary-empty | 无数据时的占位符 |
.gs-expand-icon | 展开/收起箭头图标 |
快速访问按钮
| 类名 | 说明 |
|---|---|
.gs-quick-access-buttons | 快速按钮组容器 |
.gs-quick-btn | 单个快速访问按钮 |
.gs-btn-icon | 按钮内图标 |
.gs-btn-label | 按钮文字标签 |
折叠分区
| 类名 | 说明 |
|---|---|
.cs-root | 折叠分区根容器 |
.cs-root.cs-open | 已展开状态的分区 |
.cs-header | 分区标题行（可点击折叠/展开） |
.cs-icon | 分区标题前的图标 |
.cs-title-group | 标题和副标题的包装容器 |
.cs-title | 分区主标题 |
.cs-subtitle | 分区副标题 |
.cs-count | 标题行末尾的计数徽章 |
.cs-chevron | 折叠箭头图标 |
.cs-body | 分区展开后的内容容器 |
玩家卡片
| 类名 | 说明 |
|---|---|
.ps-wrap | 玩家卡片外层包装 |
.ps-card | 玩家卡片主体 |
.ps-avatar | 玩家头像容器 |
.ps-avatar-img | 玩家头像图片 |
.ps-avatar-char | 无头像时的首字母占位符 |
.ps-info | 玩家信息区域 |
.ps-name | 玩家名称 |
.ps-desc | 玩家描述文字 |
.ps-edit-icon | 编辑按钮图标 |
角色列表
| 类名 | 说明 |
|---|---|
.cs-wrap | 角色列表外层包装 |
.cs-list | 角色卡片列表 |
.cs-card | 单个角色卡片 |
.cs-card-head | 角色卡片头部（头像 + 名称） |
.cs-card-body | 角色卡片展开后的内容 |
.cs-avatar | 角色头像容器 |
.cs-avatar.cs-avatar--pulse | 有更新时的脉冲动画头像 |
.cs-avatar-img | 角色头像图片 |
.cs-avatar-char | 无头像时的首字母占位符 |
.cs-head-info | 角色名称信息区域 |
.cs-head-row | 名称和性别的行容器 |
.cs-name | 角色名称文字 |
.cs-gender | 角色性别标签 |
.cs-gender-male | 男性标签（默认蓝色） |
.cs-gender-female | 女性标签（默认粉色） |
.cs-edit-icon | 角色编辑按钮图标 |
角色属性卡片
| 类名 | 说明 |
|---|---|
.gs-character-card | 属性卡片根容器 |
.gs-character-card.gs-character-card-clickable | 可点击的属性卡片 |
.gs-card-header | 卡片头部（头像 + 名称） |
.gs-avatar | 头像容器 |
.gs-avatar-img | 头像图片 |
.gs-avatar-char | 无头像时的首字母占位符 |
.gs-header-info | 头部信息区域 |
.gs-char-name | 角色名称 |
.gs-char-gender | 角色性别标签 |
.gs-attr-group | 属性分组容器 |
.gs-group-header | 属性分组标题行 |
.gs-group-name | 分组名称文字 |
.gs-group-attrs | 分组内属性列表 |
.gs-attr-row | 单行属性（键值对） |
.gs-attr-key | 属性键名 |
.gs-attr-value | 属性值（文字类型） |
.gs-attr-bar-wrapper | 进度条包装容器 |
.gs-attr-bar-track | 进度条背景轨道 |
.gs-attr-bar-fill | 进度条填充部分 |
.gs-attr-bar-label | 进度条旁边的数值标签 |
世界信息
| 类名 | 说明 |
|---|---|
.gs-world-info-line | 世界信息行容器 |
.gs-world-item | 单个世界信息项 |
.gs-world-value | 世界信息值文字 |
.gs-world-sep | 项目之间的分隔符 |
.world-section | 世界分区容器 |
.world-title | 世界分区标题 |
.world-list | 世界信息列表 |
.world-item | 列表中的单个项目 |
.world-value | 项目值文字 |
.world-sep | 列表项分隔符 |
物品栏
| 类名 | 说明 |
|---|---|
.inv-wrap | 物品栏外层容器 |
.inv-tabs | 物品栏分类标签栏 |
.inv-tab | 单个分类标签 |
.inv-tab.inv-tab-active | 当前激活的分类 |
.inv-tab-label | 分类标签文字 |
.inv-tab-count | 分类物品数量 |
.inv-tab-add | 添加新分类按钮 |
.inv-tab-add-input | 添加分类时的输入框 |
.inv-empty | 物品栏为空时的占位提示 |
.inv-items | 物品网格容器 |
.inv-cell | 单个物品格子 |
.inv-cell.inv-cell-open | 已展开详情的物品格子 |
.inv-row | 物品行（列表模式） |
.inv-row-actions | 物品行操作按钮区域 |
.inv-item | 物品主体（图标 + 名称） |
.inv-icon | 物品图标 |
.inv-icon-placeholder | 无图标时的表情占位 |
.inv-item-name | 物品名称 |
.inv-item-count | 物品数量标签 |
.inv-icon-btn | 物品操作图标按钮 |
.inv-icon-btn.inv-icon-btn-danger | 危险操作按钮（删除等） |
.inv-icon-btn-img | 操作按钮内的图标 |
.inv-detail-wrapper | 物品详情展开容器 |
.inv-detail-inner | 物品详情内层 |
.inv-detail | 物品详情卡片 |
.inv-detail-icon-img | 详情中的物品图标图片 |
.inv-detail-icon-emoji | 详情中的物品图标表情 |
.inv-detail-count | 详情中的物品数量 |
.inv-detail-desc | 物品详情描述文字 |
.inv-detail-empty | 物品无描述时的占位 |
关系面板
| 类名 | 说明 |
|---|---|
.gs-relationship-tab | 关系面板根容器 |
.gs-pair-list | 关系对列表 |
.gs-empty-state | 无关系数据时的空状态容器 |
.gs-empty-icon | 空状态图标 |
.gs-empty-text | 空状态提示文字 |
关系对卡片
| 类名 | 说明 |
|---|---|
.rel-pair-card | 关系对卡片容器 |
.rel-pair-card.rel-pair-card--clickable | 可编辑的关系对卡片 |
.rel-pair-head | 卡片头部（两个角色的头像/名称） |
.rel-pair-identity | 单侧角色身份区域 |
.rel-pair-identity--left | 左侧角色 |
.rel-pair-identity--right | 右侧角色 |
.rel-pair-avatar | 角色头像 |
.rel-pair-avatar.rel-pair-avatar--player | 玩家头像（特殊标记） |
.rel-pair-initial | 无头像时的首字母占位 |
.rel-pair-name | 角色名称 |
.rel-pair-attrs | 关系属性列表 |
.rel-pair-row | 单行属性 |
.rel-pair-row.rel-pair-row--number | 数值型属性行 |
.rel-pair-row.rel-pair-row--string | 文字型属性行 |
.rel-pair-row.rel-pair-row--changed | 本轮有变化的属性行 |
.rel-pair-label | 属性名称 |
.rel-pair-col | 属性值列（左/右各一列） |
.rel-pair-col--left | 左侧属性列 |
.rel-pair-col--right | 右侧属性列 |
.rel-pair-col--text | 文字型属性列 |
.rel-pair-num | 数值文字 |
.rel-pair-delta | 数值变化量（如 +3） |
.rel-pair-bar | 属性进度条 |
.rel-pair-bar--left | 左侧进度条（从右往左填充） |
.rel-pair-bar--right | 右侧进度条（从左往右填充） |
.rel-pair-bar-fill | 进度条填充部分 |
.rel-pair-text | 文字型属性值 |
.rel-pair-dash | 无值时的破折号占位 |
.rel-pair-empty | 无属性时的占位 |