Storvia

全局 CSS 样式

了解如何使用全局 CSS 样式自定义游戏外观

全局 CSS 样式可以让你自定义游戏中消息的视觉效果——修改颜色、字体、背景、间距、圆角等等。在创作台的「全局 CSS 样式」编辑器中直接编写 CSS 即可。

直接写 CSS 规则就行，不需要添加 <style> 标签。样式作用于整个聊天区（包括消息列表和游戏状态面板），不会影响聊天页之外的部分。

不熟悉 CSS？可以让 AI 帮你写。把你想要的效果描述给它（比如「用户消息气泡改成渐变紫色背景」），它就能生成对应的 CSS 代码，复制粘贴即可。

写好的 CSS 还可以存进素材库，在别的作品里一键导入。

先了解：样式作用到哪里

这一节决定了你写的选择器能不能命中，建议先读。

平台把你的 CSS 分成两条路注入，中间隔着一道浏览器的样式隔离墙：

注入到哪覆盖的内容典型类名
每条消息内部消息正文渲染出来的一切.msg-narration、.msg-bubble、.msg-options…
聊天页整体消息的外壳、游戏面板、开幕小剧场容器.user-message、.gs-tab-btn、.lore-bubble…

由此带来三条必须知道的规则：

① 两层之间不能组合选择。 消息正文渲染在各自独立的隔离区里，外层选择器够不到它：

/* ❌ 永远不生效：.user-message 在外层，.msg-narration 在消息内部 */
.user-message .msg-narration { color: red; }

/* ✅ 直接写内部类名即可，它本来就只作用于消息正文 */
.msg-narration { color: red; }

这类写法不会报错，只是静默失效——发现某条规则怎么写都没反应，先检查是不是跨了这两层。

② body / html / :root 会被自动改写成聊天容器。 你想「改页面背景」时可以直接写 body { background: ... }，平台会把它转成只作用于聊天区，不会真的影响整站：

body {
    background: linear-gradient(180deg, #1a1030, #0d0618);
}

③ 允许 @import，但禁止脚本类写法。 @import 会被保留（常用于引入字体）；expression() 和 javascript: URL 会被剔除；粘贴进 HTML 标签会在创作台直接报错。另外单条规则写错只会丢掉那一条，不影响其它规则。

用户消息气泡

通过 .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 类名：

消息外壳（控制宽度与间距）

这一组在消息的外层，管的是气泡摆在哪、多宽、隔多远。想让用户气泡更宽、想调消息之间的间距，改的是这里。

类名说明
.message-wrapper单条消息的最外层。margin-bottom 决定消息之间的间距
.user-message玩家消息外框：默认 max-width: 70% + 右对齐。改气泡宽度改这个
.ai-messageAI 消息外框：默认整宽、透明、无圆角
.message-timestamp消息下方的时间戳（字号 / 颜色；左右消息自动分别对齐）
.system-hint-bubble居中的系统提示条外壳
.system-hint-text系统提示条里的文字
/* 让用户气泡窄一点、消息之间松一点 */
.message-wrapper .user-message {
    max-width: 55%;
}
.message-wrapper {
    margin-bottom: 24px;
}

这一组请带上 .message-wrapper 前缀写（如 .message-wrapper .user-message）。系统默认样式也是这个写法，权重相同时才稳定盖得住；只写 .user-message 在个别情况下可能不生效。

消息容器（内容区）

这一组在消息内部，管的是正文的背景、圆角、内边距。

类名说明
.msg-message所有消息的内容容器，玩家和 AI 消息都包含此类
.msg-message-user玩家消息的内容区，与 .msg-message 同时存在（默认带背景 + 圆角 + 模糊）
.msg-message-assistantAI 回复的内容区，与 .msg-message 同时存在（默认透明无样式）
.msg-options-readonly只读场景（回忆页 / 创作台预览）追加在内容容器上，可据此关掉选项的点击态

三者的关系：.msg-message 是基础类，所有消息都有。在此基础上，玩家消息会追加 .msg-message-user，AI 消息会追加 .msg-message-assistant。所以用 .msg-message 设置通用样式（如字体、行高），用另外两个分别控制各自的外观。

外壳和内容区是两层，不能组合写。 .user-message .msg-narration { } 这种跨层选择器不生效（原因见上文「样式作用到哪里」）。要改正文里的东西，直接写 .msg-* 就行。

预设标签

类名对应标签说明
.msg-narration<narration>旁白文字
.msg-system<system>系统提示
.msg-bubble<bubble>角色对话气泡
.msg-bubble-wrap<bubble>带说话人头像/名称时的外层包装容器（VStack 布局：头部 + 气泡）
.msg-bubble-header<bubble>说话人头部区域（头像 + 名称的行容器）
.msg-bubble-header--no-avatar<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-options-hint<hint> 子标签渲染出的提示行（选项框内、选项列表上方、不可点击）
.msg-options-presets预设推进选项行的容器（选项框内、选项列表下方，横向滚动）
.msg-preset-pill单个预设推进选项（胶囊按钮，如「剧情加速」「制造暧昧」，点击把它填进输入框）

预设推进选项是平台在最新一条 AI 回复的选项框里自动加的一排胶囊按钮，不需要作者在正文里写任何标签；它只出现在最新一条 AI 回复上，历史消息和回忆页不显示。样式默认跟随 .msg-option-item 的主题色，改它用 .msg-preset-pill 就行，例如：

.msg-preset-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

开场白美化

类名说明
.msg-preset开场白美化容器
.msg-preset h1开场白标题
.msg-preset p开场白段落
.msg-preset .highlight开场白高亮文字

开幕小剧场的外层容器

开幕小剧场的内容是你自己写的 HTML，样式也写在它自己里面，正常不需要用到全局 CSS。

下面三个类是平台包在小剧场外面的容器。它们默认几乎没有样式（没有底色、没有边框、没有内边距），只做三件事：

类名默认做了什么什么时候需要改
.lore-wrapper下外边距（小剧场与下方第一条消息的距离）想让小剧场紧贴消息，或拉开更多距离
.lore-bubble圆角 + overflow: hidden想要方角，或你的内容有外投影 / 溢出元素被裁掉了
.lore-content宽度 100% + 基础字号想给内联渲染的小剧场换个基础字号

用 ``` 包裹时这几个类才真的重要。 那种情况下你的 HTML 跑在 iframe 里，而 iframe 是放在 .lore-bubble 内部的——overflow: hidden 会把你内容的四角和任何溢出部分裁掉，你从 iframe 里面改不了，只能在这里改：

.lore-bubble {
    border-radius: 0;
    overflow: visible;
}

不用 ``` 包裹（内联渲染）时，大部分效果直接写在你自己的 HTML 里就行，用不到这三个类。

游戏面板更新提示

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-inline-world内嵌模式顶部的世界状态条容器
.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-tab-badge-warn徽章的警示态（物品栏已满时）

「只看变化」开关

角色面板顶部的开关，打开后只显示本轮有变化的属性。

类名说明
.gs-only-changed-row开关整行（含 .gs-only-changed-row--on 开启态）
.gs-only-changed-row--inline窄屏内嵌模式下的排布变体
.gs-only-changed-label开关左侧文字
.gs-switch开关轨道
.gs-switch-knob开关滑块

摘要条

类名说明
.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编辑按钮图标
.ps-clickable玩家卡可点击时追加此类（可用来去掉 hover 效果）

角色列表

类名说明
.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-gender-icon性别标签里的图标
.cs-desc角色卡里的描述文字
.cs-edit-icon角色编辑按钮图标
.cs-clickable角色卡可点击时追加此类
.cs-empty-state还没有角色时的空状态容器
.cs-empty-icon空状态图标
.cs-empty-text空状态提示文字

角色区的空状态是 .cs-empty-*，关系面板的空状态是 .gs-empty-*，是两套不同的类名，别写混了。

角色属性卡片

类名说明
.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-row世界分区标题行（标题 + 编辑按钮）
.world-title世界分区标题
.world-edit-icon世界分区的编辑按钮图标
.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物品无描述时的占位
.inv-add-item-btn「添加物品」按钮（含 .inv-add-item-disabled 满仓禁用态）
.inv-full-hint物品栏满时的提示

批量清理

物品多的时候，玩家可以进入多选模式一次删除多个物品。

类名说明
.inv-batch-entry-btn「批量清理」入口按钮
.inv-select-bar多选模式下底部的操作条
.inv-select-bar-btn操作条里的按钮
.inv-select-bar-delete操作条里的删除按钮
.inv-select-count「已选 N 项」计数文字
.inv-checkbox物品格上的勾选框（含 .inv-checkbox-on 选中态）
.inv-cell-selected已勾选的物品格

关系面板

类名说明
.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-identity--dormant该侧角色处于休眠状态时追加此类
.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无属性时的占位

小组件标签页

游戏面板里的「小组件」标签页，内容是一个图标格栅：第一格固定是「组件盒」入口，后面是玩家已安装的小组件。

类名说明
.widget-desktop标签页根容器
.widget-grid图标格栅
.widget-icon单个图标按钮（含 .is-running 运行中状态）
.widget-icon-cover图标封面方块
.widget-icon-label图标下方的标题文字
.widget-cover-fallback小组件没有封面图时的文字占位
.widget-running-dot右上角「运行中」绿点
.widget-box-icon-btn第一格「组件盒」入口按钮
.widget-box-cover「组件盒」入口的封面（默认透明无阴影）

标签页里显示哪些小组件由玩家自己安装决定，作者只能改样式和标签名。点开组件盒后的弹层是平台界面，不受全局 CSS 影响。

注意事项

  • 可以和正则美化搭配使用：正则美化负责 HTML 结构，全局 CSS 负责视觉效果
  • 修改后可以在预览功能中实时查看效果
  • 写好的 CSS 可以存进素材库，在别的作品里一键导入（导入时可选追加或覆盖）
  • 开幕小剧场的内容不受全局 CSS 影响，样式写在它自己的 HTML 里；只有平台包在外面的容器（.lore-*）能用全局 CSS 调
  • 有些界面属于平台自身而非作品内容，全局 CSS 不作用于它们：关系图谱的全屏视图、组件盒弹层、各类设置弹窗

本页目录

先了解：样式作用到哪里用户消息气泡AI 消息气泡覆盖预设标签样式内置类名参考消息外壳（控制宽度与间距）消息容器（内容区）预设标签折叠面板选项开场白美化开幕小剧场的外层容器游戏面板更新提示游戏面板面板主容器标签栏「只看变化」开关摘要条快速访问按钮折叠分区玩家卡片角色列表角色属性卡片世界信息物品栏批量清理关系面板关系对卡片小组件标签页注意事项