# 烧饼论坛设计规范

这份文件说明论坛现在的设计：版面、配色、圆角、字体和主要部件，最后是写自定义 CSS 的注意事项。变量表按线上样式表实时生成。

## 整体风格

- 内容密集：列表一行一个主题，细线分隔，阴影很少，信息密度优先于留白。
- 三种角色的颜色严格分开：
  - **动作色**（`--action`，墨黑）：所有「点了会做一件事」的东西——按钮、当前标签、当前页码。
  - **链接**（`--link`）：正文颜色加一条 2px 的黄色下划线（`--link-line`），悬停时背后浮起黄色块（`--link-soft`）。
  - **品牌黄**（`--mark`，金丝雀黄）：logo、置顶标记、选中文字。它在白底上对比度只有 1.47:1，所以从不用来写字。
- 浅色和深色两套配色。深色不是简单反色：底色是带一点蓝紫的近黑色，文字不用纯白。默认跟随系统，也可以在顶部手动切换。
- **方角**：全站圆角都是「设计圆角 × `--r-scale`」，现在 `--r-scale` 是 0，所以按钮、卡片、输入框都是直角。

## 版面

### 宽屏（1600px）

- 内容区最大宽度 `--container`，1600px，居中。
- 主体两栏：左边内容（`.forum-main` / `.main-panel`），右边侧边栏（`.sidebar`，宽 260px，`--sidebar-w`），两栏间距 20px（`--gap`）。两栏由 `.forum-layout` 的网格排列。
- 顶部导航 `.top`：左边 logo 和版块链接，右边搜索、简繁切换、配色切换、头像，控件统一高 34px（`--nav-ctl`）。
- 帖子里的图片最多画 720px 宽（`--post-image-max`，和视频播放器一样宽），点开看原图。
- 说明类页面（规则、条款等，`.doc-panel`）正文另有 1080px 上限，便于阅读。

### 窄屏（1200px）

- 屏幕比 1600px 窄时，内容区跟着屏幕宽度走，不出现横向滚动。1200px 宽的屏幕上仍是两栏，侧边栏 260px，其余给内容。
- 更窄时依次变化：
  - 900px 以下：顶部的版块链接隐藏，侧边栏变窄到 220px，间距收到 16px。
  - 760px 以下：变成单栏，侧边栏排到内容下面（首页第一页只保留论坛统计那一张卡片）；左上角出现菜单按钮，版块和应用入口收进菜单；置顶主题只显示第一个；页面左右留白 12px。
  - 640px 以下：帖子里的表格改为横向滚动。
  - 560px 以下：分页的「上一页 / 下一页」变成箭头，只留当前页前后各一页，按钮间距收紧。

## 圆角

| 变量 | 设计圆角 | 用在哪里 |
|---|---|---|
| `--r-pill` | 9999px（胶囊） | 按钮、标签、页码 |
| `--r` | 12px | 卡片、面板（`.main-panel`、`.sidebar-card`） |
| `--r-input` | 8px | 输入框、下拉框、代码块、表格 |
| `--r-sm` | 6px | 小标记 |
| `--r-xs` | 4px | 行内代码 |

实际圆角 = 设计圆角 × `--r-scale`。现在 `--r-scale` 是 0，全部是直角；列表前的项目符号也是方块。

## 字体

- 正文：系统无衬线字体，中文依次用 PingFang SC、Hiragino Sans GB、Microsoft YaHei（`--font-sans`）。
- 数字和代码：Space Mono 等宽字体（`--font-mono`），UID、页码、余额、代码都用它。
- 页面正文 15px，行高 1.75；帖子正文 `.post-content` 15px，行高 1.8；列表标题 15px；元信息（作者、时间、版块）12.5px；表格 14px。

## 主要部件

| 部件 | 类名 | 说明 |
|---|---|---|
| 顶部导航 | `.top` | logo、版块、搜索、简繁、配色、头像 |
| 账号菜单 | `.nav-user-menu` / `.nav-user-item` | 右上角头像下拉，两列，每项前面一个 15px 的灰色图标（和侧边栏资料卡同一套图标）；手机左上角菜单里的「我的菜单」`.mobile-menu-mine` 也一样带图标 |
| 外层容器 | `.wrap` | 最大宽度 `--container` |
| 主体两栏 | `.forum-layout` | 网格：内容 + 侧边栏 |
| 内容面板 | `.main-panel` | 面板底色，细线边框 |
| 侧边栏卡片 | `.sidebar-card` | 和内容面板同样的卡片样式 |
| 列表表格 | `.list` | 带细边框和圆角的表格（积分明细、记录、赔率表这类）；两张紧挨着的表格之间自动隔开 16px，不会粘成一块 |
| 主题列表 | `.post-list` / `.post-item` | 一行一个主题：头像、标题 `.post-title`、元信息 `.post-meta` |
| 主题标签 | `.topic-badge` | 悬赏、投票、抽奖、红包、已结束等小标签 |
| 已降权标签 | `.sunk-mark` | 只有管理员、版主看得到：降权的主题在列表行（`.topic-badge.sunk-mark`）和帖子标题后面（`.topic-closed-badge.sunk-mark`）、降权的会员在「管理」菜单的名字后面和后台用户列表的状态里（`.user-state-tag.sunk-mark`），都是透明底、警告色虚线边框、警告色字的「已降权」，和实心的类型标签区分开；作者本人和其他会员的页面上没有这个标签 |
| 帖子和回帖 | `.post-entry` | 两栏网格：头像 + 内容（「恢复简洁版帖子风格」时的样子） |
| 帖子左右分栏 | `.post-entry.post-dz` | 默认的看帖样式：左边 180px 作者栏 `.post-author-col`（浅底，右边一条细线），右边 `.post-main`；手机（720px 以下）作者栏变成帖子上面的一条；删除的楼层 `.post-deleted` 缩成一条细的：40px 的淡头像、灰色「火星人」和一行灰字 |
| 作者栏 | `.post-author-avatar` / `.post-author-who` / `.post-author-stats` | 88px 头像（手机 40px），下面名字、UID 和等级居中换行排；用户组、楼主、认证这些标签不在这里，在右边那一行日期前面，再下面虚线隔开的帖子 / 财富 / 成长值三个数（手机上不显示；帖子点了去 TA 的主题列表，财富和成长值点了去 TA 的烧饼明细，移上去变链接色）；从楼主算起隔一层换底色（「这些回帖亮了」「楼主置顶」两块也一样，各自从第一条算起）：楼主原底色，1 楼作者栏淡黄底（品牌淡色和原底色各半）、右边帖子内容更浅一档的淡黄底（品牌淡色占 22%），2 楼原底色，依此交替，好分清哪层是哪层 |
| 红包的领取名单 | `.redpacket-claims` / `.redpacket-claims-fold` | 主帖上方的红包块里，直接列前 5 个领到的人；多于 5 人时下面一个小按钮「查看完整名单（共 N 人）」，点开其余的人接在按钮下面，按钮变成「收起名单」 |
| 谁亮了这条 | `.lit-by` / `.lit-by-label` / `.lit-by-names` / `.lit-by-note` | 只有管理员、版主在「这些回帖亮了」「楼主置顶」里看得到：帖子下面一条浅底虚线框，左边「亮了 N」「灭了 N」小胶囊，后面名字是一个个小白胶囊（普通字色，不带名字颜色和特效），最右「仅管理员可见」 |
| 手机上的帖子头 | `.post-head` / `.post-ops` | 720px 以下：回复区每一楼是一张单独的卡片（自己的边框，楼与楼之间空 10px 露出页面底色），「N 条回复」那一条也单独成条，电脑上仍是连成一块的列表；标签缩小到和日期一样小，七八个标签也只占一行；回复、举报这些按钮和日期放同一行靠右，按钮多（管理员）放不下才换到下一行，照样靠右；作者那一条头像、名字、宠物上下居中 |
| 作者栏的勋章 | `.post-author-medals` / `.post-medal` | 三个数下面，戴着的勋章（最多 4 枚）一排、每枚 32px，居中；鼠标移上去放大 2.2 倍看清图案，点了去主页的勋章栏；手机上 20px 一排跟在名字后面 |
| 勋章馆、背包和主页的勋章 | `.medal-grid` / `.medal-card` / `.medal-wall` / `.medal-wall-item` | 勋章馆一张卡一枚：左边 96px 大图（手机 72px），右边名字、怎么得、发放方式和人数，已获得的卡片描品牌色边，戴着的底色是淡黄；背包里同样的卡片小一号（72px），带「戴上 / ✓ 戴着」按钮；主页「我的勋章」是一面墙，每枚 64px 图下面名字和日期，本人看得到还没得到的、灰掉半透明，下面写进度 |
| 作者栏的宠物 | `.post-author-pet-wrap` / `.post-author-pet` | 主帖放主帖那只、回帖放回帖那只，88px 高，下面写名字；手机上 52px 站在那一条的右边，不写名字；点一下在右边冒气泡 |
| 发帖设备 | `.post-device` | 小尾巴：App 里发的帖子在日期（和「编辑于」）后面跟一句「来自 iPhone 17 Pro」，12px 灰字，不折行；楼中楼框里那一条跟在时间后面；作者在隐私设置里关了就没有 |
| 个性签名 | `.post-sig` / `.post-sig-rule` / `.post-sig-text` | 帖子最下面：「个性签名」四个小字后面一条虚线拉到头，下面一行灰字，里面的链接和正文里的一样，链接色加下划线、悬停变色；作者栏比帖子高时签名靠底；个人主页简介下面也有一份（`.profile-sig`），样式相同 |
| 楼中楼 | `.floor-box` / `.floor-box-item` / `.floor-box-foot` | 默认看帖样式里，每个一级楼层正文和签名下面一个浅底细框（圆角跟着全站的圆角系数，默认是方的，用了「恢复圆角」就是圆的；框里高亮的那一行也一样），回这一楼的回复（不管回到第几层）按楼层先后一条一行：28px 小头像、「名字：内容」或「名字 回复 名字：内容」（楼主自己的回复名字后面跟一个小号「楼主」标签，`.floor-box-op`），右边时间、楼层号和楼层上同一套按钮（回复 / 举报 / 点亮 / 收藏 / 编辑 / 删除 / 管理，管理员还有批量勾选框）；开头的「@名字 #楼层」显示时藏起来；图片、视频、YouTube、推文都显示成「[图片]」「[视频]」「[YouTube]」「[推文]」文字按钮（`.box-embed-open`），点了在这一行下面展开（图片最宽 320px，点它看大图；播放器原样），再点收起；代码块同样是「[代码]」，画出来的那几种是「[图表]」「[地图]」「[3D 模型]」，展开后是和正文一样的代码块（高亮、复制按钮）或画好的图，占满一行宽；「[图片]」鼠标移上去还会在旁边浮出图片（`.box-preview`）；表情和 emoji 保持行内大小，鼠标移上去和正文里一样放大；格式只留句子里的那些——加粗、斜体、删除线、链接（和正文一样的下划线）、@某人、行内代码（和正文一样的小底色框），引用、列表、标题、表格都当普通文字接在这一行里，分隔线不显示，换行变成空格，完整格式到楼层页面看。框底「共 N 条回复」、框自己的小号分页（每页条数是后台设置）和小号按钮「我也说一句」（`.floor-box-say`）；点楼层或框里的「回复」、「我也说一句」，页面底部的回复框整个挪到那一楼框的下面（`.reply-panel.is-inline`），多一个「取消回复」，发完或取消回到原处；帖子栏窄得正文放不下 260px 时（横屏手机、1200 布局的三栏）时间那些自己换到内容下面一行靠右，手机上一直在下面一行，分页单占一行 |
| 主帖的操作按钮 | `.post-dz-actions` | 收藏 / 支持 / 反对 / 打赏在主帖自己那一块的最下面、签名上面；作者栏比正文高时按钮和签名一起贴着楼层底部 |
| 帖子正文 | `.post-content` | Markdown 渲染出来的正文，含图片、表格、代码 |
| 链接卡片 | `.link-card` / `.link-card-user` / `.link-card-reply` | 正文里单独一行贴的本站主题、用户地址显示成一张小卡（最宽 520px，细线框）：36px 头像顶对齐（戴头像框的头像缩到 26px，连框一起正好 36px，不出卡片），右边三行——标题行（`.link-card-title`，标题文字在自己的 `.link-card-title-text` 里先被截成省略号，后面的类型标签、「已关闭」、「#N 楼」、用户组徽章不会被挤掉）、内容行（最多两行纯文字；帖子和回帖的原文是 `.link-card-quote`，不画竖线，用比标题浅一档的灰色、13.5px 字；签名是 `.link-card-sig`，正文色）、元信息行（`.link-card-meta`，放不下时换行，≤640px 隐藏「N 次阅读」`.link-card-views`）；没有内容时内容行不画。主题卡：标题加粗，后面带列表里同样的类型标签（悬赏、投票、抽奖、红包），内容行是主贴摘要（未登录看不到的帖子不给摘要，被禁言的作者显示禁言提示）；用户卡：头像圆形，内容行是个性签名（纯文字，签名关闭或被禁言时不画），元信息是等级、饼、帖数、精华数；卡片整体是一个链接，`title` 是完整标题（用户卡是用户名）。版块、会员名（`/user/名字/`，和 `/u/N/` 同一张用户卡）、预测题、股票、基金、排列五／排列三期号、游戏页（`/games/五子棋这类/`，记录页不出卡）的地址也出卡，用同一个外框和三段结构，但图标位（36px）放论坛的 SB 标志（`.link-card-mark`，就是顶栏 Logo 前面那块黄底标志，内联画出，不新增文件；股票有公司标志、游戏有大厅卡片上的图标时用 `.link-card-logo`），标题行最后是类型标签（版块／预测／股票／基金／排列五／排列三／游戏），前面可带状态标签（已截止、已裁定、熔断中、待开奖、已开奖……）；内容行是数字（`.link-card-facts`，不画引用线、数字之间留空、放不下就换行，标签用 `.link-card-fact-label`），数字用它所指页面自己的类画：开奖号码是彩票页的红球 `.lotto-balls` / `.lotto-ball`（卡内缩成 22px），预测题是「单 62%　双 38%」两段文字（开出的一边加粗 `.pred-result`，另有「开出「X」」）加题目页的份额条 `.pred-bar`（卡内 4px 细条，`role="img"`，`aria-label` 写两边的彩池），股票是 `.stk-price`、`.stk-unit`、`.stk-change`，基金是 `.stk-num`；只借数字本身，页面给它们加的边框盒、标签和徽章卡上不画，状态仍是卡自己的标签。这些类的规则放在 index.css（原来在 prediction.css、stock.css，两页自己的样式表仍在后面加载并按页放大缩小），卡内的尺寸写在 `.link-card-facts` 等卡内选择器下，不另做一份。版块没有页面自己的图标或颜色，简介仍是 `.link-card-sig`；游戏卡的内容行也是 `.link-card-sig`，写规则页上这款游戏的场次和入场费。涨跌按读者在股票页选的红涨绿跌 / 绿涨红跌上色（`.stk-up` / `.stk-down`，颜色变量和偏好都在 index.css 与页面 head 里，全站一致），正负号保留。卡片只给能打开那一页的人看，打不开就是普通链接。指向某一楼的地址（`?reply=`）是 `.link-card-reply`：外框和其他卡一样，头像换成这一楼的作者，标题缩成一行小灰字、后面一个淡黄底的「#N 楼」小标签（`.link-card-floor`），内容行是这一楼的摘要，再下面作者、版块和时间；这一楼看不到（删了、拉黑、未登录不可见）时仍是普通主题卡，标题后面带「#N 楼」 |
| 画出来的代码块 | `.rich-drawn` / `.mermaid-diagram` / `.geo-map` / `.stl-model` / `.stl-modes` / `.rich-error` | 正文里语言写 `mermaid`、`geojson` / `topojson`、`stl` 的代码块，画成图表、地图、3D 模型，站在原代码块的位置（原代码块藏在下面）。样式在单独的 `richblocks.css`，和 `richblocks.js` 一起只在有这种代码块的页面加载，不在 index.css 里。图表居中，最宽不超过正文，再宽左右滚动，颜色跟着浅色、深色主题，切主题会重画；地图和模型都是正文宽、360px 高的细边框盒子，地图是街道底图（深色主题下把底图反色），图形和模型用站点黄色；模型右上角一排小按钮「实体 / 线框 / 表面角度」（`.stl-modes`，按下的那个加粗）。整块 `contain: paint`，里面怎么定位都画不出盒子。画不出来时显示原代码块，下面一行小字 `.rich-error`「……有误，显示原文」 |
| 按钮 | `button`、`.btn` | 墨黑底白字；次要按钮 `.alt` |
| 首次发帖提示 | `.first-post-panel` / `.first-post-rules` / `.first-post-more` / `.first-post-go` / `.first-post-note` | 从没发过帖的会员打开发主题页时弹出；在帖子页先藏着（`hidden`），第一次点进回复框、点「回复」「我也说一句」「回帖」时才弹出，只看帖不挡；用的是全站弹窗 `.modal-backdrop` / `.modal-panel`，最宽 520px；标题栏没有关闭按钮，也没有取消，点背景、按 Esc 都关不掉。四条规则每条前面一个 22px 的方形数字块（`--panel-hover` 底，圆角跟 `--r-pill`，默认是方的），加粗的小标题单独一行，下面是正文；规则下面一行灰字链到论坛规则；底部居中一个普通主按钮 `.first-post-go`（最窄 13em，数字等宽），倒计时期间是灰的、写着「（N）」，再下面一行居中的小灰字 |
| 标签栏 | `.tab-bar` / `.tab` | 当前标签 `.tab.active`。主题列表顶上那一条（`.topic-toolbar`）放不下时，标签左右滑动、不显示滚动条，右边的「发帖」「隐藏」（`.topic-actions`）固定不动、排成一行；不分屏幕宽度，横过来的手机走两栏布局时也一样 |
| 分页 | `.pagination` | 当前页黑底 |
| 表情 | `img.smoji` | 论坛表情包图片，悬停放大 |
| 公司页的「怎么算的」 | 样式在 stock.css，只在烧饼证券的页面加载 | 公司页「财务」下折叠的说明：四个小标题（利润、分红、资产与每股、估值）分组，每一项一行，左边 8.5em 的加粗名词、右边说明，公式单独一行用等宽字、浅底色小块，补充说明再小一号浅灰；手机上名词在说明上面 |
| 表情选择器 | `.smoji-panel` / `.smoji-tabs` / `.smoji-tab` / `.smoji-grid` / `.smoji-item` / `.smoji-preview` | 点工具栏的「表情」从按钮下面弹出（下面放不下就开在上面），最宽 720px、最高 440px，两栏：左栏一列表情包，每个包的第一张做 28px 缩略图、后面是包名，当前的那个底色高亮、加粗；右边上面是按名字搜的搜索框，下面 42px 一格的表情网格自己滚。鼠标停在一张表情上旁边浮出大图和名字（只在有鼠标的设备上）。手机（720px 以下）是双栏之前的那块面板（`.is-compact`）：328px 宽、高度由内容定，第一行搜索框，第二行包名的胶囊横着滚（没有小图），下面 42px 一格的网格最高 264px，整块放得下就开在按钮上面、盖着帖子，上面放不下才开在下面，尽量不压回复框 |
| emoji | `img.emoji` | Twemoji 图片，大小 1.15em，悬停放大；在正文链接里时自己画一条和链接下划线同位置、同颜色的 2px 线（`--emoji-line`），悬停时和下划线一起消失 |
| 烧饼工具首页 | 样式在 tools-hub.css，只在这一页加载 | 标题说明和每一组工具各是一张白底卡片（圆角跟全站），组里的工具卡用浅一档的底色；卡片右上角星标收藏 |
| 预测市场 | 样式在 prediction.css，只在预测市场的几页和后台「运营 › 预测」加载 | 头部和标签栏是一个大卡片，每一天（今天、明天、会员题）各是一个大卡片，顶上大字写「今天」「明天」、后面是日期和题数，今天那块顶边加粗；没有文字落在灰底上。题目是方块网格（宽屏三列、窄一点两列、手机一列），按「今天、明天、会员题」分组；每块顶上写节目和状态胶囊，中间是问题，两方是并排的两个小方块（名字、毛豆、人数、赔率），下面一根细条按两方彩池的比例分开（没人押时是灰的），底部写截止时间和实时读数，按随机一分钟结算的题再加一行说明；能押的题在方块底部还有一排快速下注（金额框、「梭哈」、两方各一个黑白按钮）。头部下面是常驻的毛豆兑换，和烧饼彩票页是同一块（毛豆、钱包烧饼两个数字，烧饼换毛豆、毛豆换回烧饼两个框，各带「全部」），题目页的下注卡片底部也有同一块；标签栏右边是「提议一道题」。下注页先填金额，旁边是金额胶囊（最后一个「梭哈」是红边），再点两方的按钮（正方用论坛的普通按钮、反方用 .alt 按钮，和商城的「购买」「大米不足」同一对，一黑一白；押了一边以后另一边变灰），按钮上写按当前彩池估算的「猜中约拿回」。提议和后台审核是一列列字段，手机上并成一列。 |
| 宠物 | `.pet-sprite` | 一只宠物的精灵图，按格切帧；格子 96×104，按要显示的高度等比缩放 |
| 用户组标签 | `.post-user-group` | 会员所在用户组的小色块（管理员红底白字，后台可给用户组设颜色和「显示为」的简称，全名放在鼠标提示里）；署名、个人主页头部和侧边栏资料卡的等级后面都用这一个 |
| 右下角的宠物 | `.pet-float` | 固定在窗口右下角，在回到顶部按钮的左边，可以按住拖到窗口里任意位置（靠近上沿、左边时气泡和菜单改往下、往右弹，`.is-near-top` / `.is-near-left`）；手机上缩到 64px 高，不自己走动 |
| 宠物菜单 | `.pet-menu` | 右键点右下角的宠物弹出，在宠物上方；每项一行标题加一行灰色小字说明 |
| 宠物气泡 | `.pet-bubble` | 宠物头上的白底细线框小气泡，一句话加一个去处链接 `.pet-bubble-go` 和关闭按钮 `.pet-bubble-x` |
| 回复区的开关 | `.bot-toggle` | 回复标题右边的小圆角按钮（简洁版里和树形/平铺一排）：「隐藏 AI 回复（N）」只在这一页有 AI 回复时出现，「隐藏宠物」只在这一页的作者栏里有宠物时出现（简洁版帖子里不显示宠物，也就没有这个按钮）；「隐藏勋章」只在这一页有人戴勋章时出现，「隐藏头衔」藏掉用户组、楼主、认证这些标签（禁言、禁访不算头衔，照样显示）；按下后实心高亮，选择记在浏览器里，换个帖子照样生效；最后一个「简洁模式 / 退出简洁模式」是登录会员自己的设置（和个性设置里「恢复简洁版帖子风格」是同一个），点了保存并刷新这一页；放不下时换到下一行 |
| 楼层的操作按钮 | `.post-ops` / `.icon-action` | 默认的左右分栏里，回复、举报、亮了、点灭、编辑、删除、管理、置顶都是小号描边胶囊按钮，各自保留原来的字色（删除红、已点亮金色底）；楼层号还是文字；简洁版和楼中楼框里的那一行仍是文字链接 |
| 个人主页的宠物栏 | `.pet-yard-head` / `.pet-yard` / `.pet-yard-item` | 资料卡下面一栏，标题「我的宠物」/「TA 的宠物」，宠物 88px 高排成一排、下面写名字，放不下就换行；第一只的问候气泡在它右边 |
| 宠物货架 | `.pet-grid` / `.pet-card` | 商城宠物部门的卡片网格，卡片上方是轮流做动作的展台 `.pet-stage` |
| 宠物分类 | `.pet-cat-tabs` / `.pet-cat-block` / `.pet-cat-head` | 宠物部门顶上一排分类标签（全部、AI、网红……，各带只数，没有宠物的分类不出现），放不下就换行；「全部」下面按分类一块一块排，每块一个小标题写分类名和只数，未分类的排最后 |
| 宠物的四个位置 | `.pet-places` / `.pet-spots` | 背包宠物卡片上，一行灰色小字写这只放在哪里（改过称呼的接着写 TA 怎么称呼你），下面两列四个按钮：右下角、主帖、回帖、主页；放着的是实心按钮带 ✓，没放的是描边按钮 |
| 宠物改名 | `.pet-rename-btn` / `.pet-orig` / `.pet-rename-box` | 背包里永久宠物卡片最下面一个和上面一样宽的描边按钮「改名字和称呼」；还没用过改名卡的先弹确认框说会用掉一张、不能撤回，然后弹窗里填名字和称呼；没有改名卡又没用过时是去宠物店的链接按钮。改过名字的，卡片标题是新名字，下面一行灰色小字写原名 |
| 购买档位 | `.term-list` / `.term` | 同一件东西的几个档位（30 天、永久）合在一张卡片上，单选；选中的一档黄色描边，价格下面一行是约合多少烧饼；选中永久·限量的那一档时，档位上方出现一行 `.item-limit`「限量 N 个 · 还剩 M 个」，和宠物卡片同一个样式 |
| 商城部门 | `.shop-depts` / `.shop-dept` | 商城首页的部门卡片，只有文字：名字、介绍、在售数量；顺序是靓号、宠物、道具、域名 |

### 按钮

- 主按钮：`--action` 底、`--action-text` 字、`--r-pill` 圆角（现在是直角）、14px、字重 500，按下时下移 1px。
- 次要按钮 `.alt`：面板底色、细线边框。
- 危险操作：`--danger-fill` 底、白字。

### 动效

- 只有两条曲线：出现用 `--ease-out`，抽屉滑入用 `--ease-drawer`；颜色渐变用普通 `ease`。
- 系统设了「减少动态效果」时，动画关掉。

## 游戏页面

搏一搏下的各个游戏（大转盘、老虎机、斗地主、牛牛、麻将……）用自己的样式表 games.css，不走上面这套论坛部件：
墨绿桌布、金色描边、图片按钮，深浅配色都一样。麻将牌桌是正方形的牌桌加四家座位卡，舞台宽度在 760px 以下换成竖排
（三家座位一行在上、牌桌占满宽度、自家手牌和按钮在下）；牌桌外面的房间（对局和牌谱回放
共用一套）是深色木纹底、淡金回纹、桌子上方一圈暖光、四角压暗，好让绿色桌布从背景里跳出来。五子棋、象棋、围棋（两人对弈）的舞台也不定比例：大厅是麻将那种四扇门（`duel-tiers`），棋盘是画布画的木纹盘（`duel-board`；
象棋的棋子是图片，盘面 9:10），宽屏时双方的名牌在棋盘左边、按钮在右边，舞台 700px 以下换成一列。牌用 SVG 牌面图
叠在牌体图上，横牌靠旋转；结算面板和牌谱里的手牌也是同一套牌面图。雷霆战机 3D 的面板是一块
16:9 的深色画面（窄于 640px 的屏幕上是 2:3，好放下标题菜单），three.js 的画布、原作的 HUD、标题菜单（开始、练习）和触屏按键都由游戏自己建在里面，样式也是游戏
自己注入的；点开始以后整个面板进全屏，不留边框。奖励表里只给一次没坠毁通关的档标一个金色的「一命通关」小标签。消消乐和两个雷霆战机的奖励表（分数、返、净收益）三列等分、居中，
全宽的面板里不再把数字都挤到右边。个性设置里的自定义 CSS 也会作用到这些页面，
改桌面时小心别把牌的尺寸撑坏，也别给雷霆战机 3D 的面板加内边距——画布按面板的大小重设（它的部件都以 t3d- 开头）。在只有触摸屏、没有鼠标的设备上，
它的面板上先盖一张「请用电脑浏览器访问」的卡片（样子同「游戏币不足」），点「仍然试试」本次访问不再出现。
经典小游戏（超级冒险、植物大战僵尸 2、坦克大战、红警）的游戏都是同源 iframe `pvz-frame`，放在 1024 × 640 比例的黑底舞台
`pvz-stage` 里；画面怎么缩放、手机上的红白机手柄都在各自的框架页面里（经典小游戏镜像），不归论坛的样式表管。
祖玛的框架允许滚动，窗口太矮时放不下的部分在框架里上下滑。割绳子的框架里只有游戏那张卡片（工具栏、棋盘、底栏），
卡片铺满框架，棋盘占去剩下的高度，关卡按比例缩在里面，不滚动。魔塔的框架是 mota-js 自己排的：横屏左边状态栏、右边
13 × 13 的地图，竖屏状态栏在上、工具栏在下，按框架大小整体缩放、深焦糖色底，不滚动；对话框是游戏自己的木框。

所有游戏页（站长 2026-10-23）：面板左上角两个红色圆按钮，`game-fs`「全屏」和 `game-webfs`「网页全屏」（左边 58px），
桌面、手机都显示（以前「全屏」只在窄屏和触屏上有）；网页全屏时 `game-webfs` 变深红。会员开始玩的那一刻（经典小游戏点
「开始游戏」，消消乐、雷霆战机点「进入游戏」，搏一搏各桌第一次下注或转动，斗地主、牛牛、麻将开始匹配）面板自动铺满窗口，
每次打开页面只自动一次；Esc 或按钮退出。消消乐、雷霆战机、雷霆战机 3D 的面板上先盖一层和经典小游戏一样的黑底封面
（`classic-cover`，按钮「进入游戏」和「清除缓存重新下载」），压在角上开关和游戏自己的卡片之上（z-index 50）。
雷霆战机 3D 和黄金神殿用各自的全屏按钮（3D 点「开始」进真正的全屏，神殿第一次转动进它自己的网页全屏）。

烧饼刮刮乐（`sc-panel`）：面板里是一整块烘焙房背景 `sc-stage`（宽屏三栏：左边奖池牌 `sc-pool` 和陶罐 `sc-jar`，中间刮刮卡
`sc-ticket`，右边先是柜台 `sc-counter`、再是图例 `sc-legend`，两块同样的深木底金边；面板窄于 860px 时一栏，刮刮卡在最上面、左栏不显示）。
柜台从上到下：面额筹码、数量 `sc-count`（1 / 2 / 3 / 5 / 10，每个是一叠刮刮卡的图，张数在右上角的角标 `b` 里；选中的那叠抬起、
发光、角标变金，五个一排只缩不换行）、一个大按钮、按钮下一行合计 `sc-total`（「共 3 张 · 30 游戏币」，张数和钱数只写在这里，
一批进行中是「第 2 / 5 张 · 还有 3 张没刮」），一次买几张时再有一排小圆点 `sc-pips`（每张一个按钮，中了的金色，点了翻到那张）。
一批两张以上时票左右各一枚箭头 `sc-flip`（`sc-flip-prev` / `sc-flip-next`，到头的一边 `is-end` 变暗）。
奖池牌 `sc-pool` 的字在 `sc-pool-face` 里，按牌匾图上木板面的位置摆：小字 `sc-pool-label`，数字和单位 `sc-pool-sum`。刮刮卡是一张
没有字的图，标题条 `sc-banner`、九格 `sc-grid`（每格 `sc-cell`，中奖的三格 `is-won` 发光跳动）和底条 `sc-foot` 按图上的空白处
用百分比叠上去；九格上盖一块画着金箔的 canvas `sc-foil`，刮开的部分是透明的。面额是图片筹码 `sc-chip`，按钮是图片按钮
`sc-btn`（`sc-buy` 红：「买票」「刮开这张」「刮开」「下一张」「再来一批」；`sc-all` 绿、小一号：「全部刮开」，只在它能多亮出
不止眼前这一张时出现），按钮上的字画在图里（一个字样一张图），不带数字；改按钮的样式别给 `sc-btn` 加文字颜色或内边距，它没有 HTML 字。中奖时票上弹出一块绿色牌匾 `sc-win`（两个大奖时连同金光盖住整张票）；一次买的几张刮完时，票上盖一张合计卡 `sc-sum`
（「5 张中了 2 张」、赢了多少，下面每张一个小方格，点开是那张票的记录）。
颜色都写死在这些部件里，深浅色模式一样；自定义 CSS 别改 `sc-board`、`sc-grid` 的位置和大小，刮层是按它们画的。

经典小游戏的舞台上先盖一层黑底入场封面 `classic-cover`：游戏 logo、红色胶囊按钮（`m3-go classic-go`，和消消乐的开始按钮同一个样子）——没入场时写「付 100 游戏币进入」、24 小时内入场过就是「开始游戏」，游戏币不够时按钮变淡、不能点，下面一行红字 `classic-cover-short`「游戏币不足」带去兑换的链接；再下面两行灰色小字 `classic-cover-note`，说第一次要下载多少和入场的规矩。点了按钮封面才去掉、游戏才开始加载。按钮下面一直有一个同样的红色按钮 `classic-reload`「清除缓存重新下载」；手机上 logo 缩小，好放下两个按钮和两行字。手机上（竖着窄于 760px，或横着矮于 500px 的触屏）这些游戏页（`classic-page`）把游戏块排在最前，紧挨着导航栏，标题和余额那块压成一条跟在后面（logo 36px、右边的大胶囊不显示），然后才是兑换、怎么玩、版权。

烧饼银行页的「年利率」一栏：今天的活期年利率是一个 `points-counter`，下面一行 `bank-rate-move` 写「比昨天涨／降 x.xx 个百分点」（涨红 `is-up`、跌绿 `is-down`，配色同证券页，深色模式另配一组）；最近 7 天是一张小表 `bank-rate-recent`。「年底清退」一栏先是本人的两个 `points-counter`（计入清退的定期笔数、预计清退利息，悬停看精确值），再是按日期排的三步有序列表 `bank-sunset-steps`，计息细则收在可展开的 `bank-sunset-rules`（`<details>`）里；同一栏底部用一条细线隔开 `bank-after`「年底以后：烧饼银行照常营业，换成新银行」，免得会员读成银行关门。

## 变量一览

以下按当前样式表实时生成。「深色」一栏为空的，表示深色模式沿用浅色的值。

### 颜色

| 变量 | 浅色 | 深色 |
|---|---|---|
| `--bg` | `#f7f8fa` | `#0d0e14` |
| `--panel` | `#ffffff` | `#14151c` |
| `--panel-alt` | `#fafbfc` | `#1a1b24` |
| `--panel-hover` | `#f2f4f7` | `#20222c` |
| `--line` | `#e0e2e8` | `#2a2c38` |
| `--line-soft` | `#eef0f3` | `#20222c` |
| `--line-strong` | `#c7cad5` | `#3a3d4c` |
| `--text-strong` | `#1c1c1e` | `#f2f3f8` |
| `--text` | `#1c1c1e` | `#e7e8ef` |
| `--text-muted` | `#555a6a` | `#a8abbb` |
| `--text-subtle` | `#6b6f7e` | `#8b8fa1` |
| `--text-disabled` | `#8e91a0` | `#6e7284` |
| `--brand` | `#1c1c1e` | `#ffd02f` |
| `--brand-hover` | `#000000` | `#ffd977` |
| `--brand-soft` | `#fff4c4` | `#2e2717` |
| `--brand-border` | `#e8c547` | `#5c4b1a` |
| `--focus-ring` | `#1c1c1e` | `#ffd02f` |
| `--field-focus` | `#e0a800` | `#ffd02f` |
| `--field-ring` | `rgb(255 208 47 / 0.18)` | `rgb(255 208 47 / 0.10)` |
| `--link` | `#1c1c1e` | `#ffd02f` |
| `--link-hover` | `#1c1c1e` | `#ffd977` |
| `--link-line` | `#fcb900` | `#d9ae1c` |
| `--link-soft` | `#ffd02f` | `#2e2717` |
| `--action` | `#1c1c1e` | `#eef0f6` |
| `--action-hover` | `#2c2c34` | `#ffffff` |
| `--action-text` | `#ffffff` | `#14151c` |
| `--action-border` | `#1c1c1e` | `#eef0f6` |
| `--mark` | `#ffd02f` |  |
| `--mark-deep` | `#fcb900` |  |
| `--mark-text` | `#1c1c1e` |  |
| `--mark-soft` | `#fff4c4` | `#2e2717` |
| `--mark-soft-text` | `#746019` | `#ffd977` |
| `--success` | `#007a4e` | `#2fce93` |
| `--success-soft` | `#e4f6ee` | `#10291f` |
| `--success-soft-text` | `#007a4e` | `#4fdca7` |
| `--danger` | `#cf2b2b` | `#ff9999` |
| `--on-danger` | `#ffffff` | `#14151c` |
| `--danger-fill` | `#cf2b2b` | `#d13b3b` |
| `--on-danger-fill` | `#ffffff` |  |
| `--danger-soft` | `#fbd4d4` | `#341a1a` |
| `--danger-soft-text` | `#600000` | `#ffb3b3` |
| `--danger-border` | `#e3c5c5` | `#5a2b2b` |
| `--warning` | `#8a6500` | `#ffc94d` |
| `--warning-border` | `#f0d98a` | `#4a3f1e` |
| `--warning-soft` | `#fff4c4` | `#2e2717` |
| `--warning-soft-text` | `#746019` | `#ffd977` |
| `--info` | `#33408f` | `#9aa6e8` |
| `--info-soft` | `#eef0f8` | `#20233a` |
| `--info-soft-text` | `#33408f` | `#b0b9ea` |
| `--accent-teal-soft` | `#c3faf5` | `#10302e` |
| `--accent-teal-text` | `#187574` | `#4fd4c8` |
| `--inverse` | `#1c1c1e` | `#e7e8ef` |
| `--inverse-text` | `#ffffff` | `#0d0e14` |
| `--inverse-border` | `#2c2c34` | `#3a3d4c` |
| `--backdrop` | `rgb(5 0 56 / 0.42)` | `rgb(3 2 12 / 0.66)` |
| `--selection` | `#ffd02f` |  |
| `--selection-editor` | `#ffd02f` | `#5c4b1a` |
| `--shadow-base` | `0 1px 2px rgb(5 0 56 / 0.04)` | `0 1px 2px rgb(0 0 0 / 0.34)` |
| `--shadow-medium` | `0 16px 48px -8px rgb(5 0 56 / 0.12)` | `0 16px 48px -8px rgb(0 0 0 / 0.62)` |
| `--code-inline-bg` | `#fff4c4` | `#2a2416` |
| `--code-inline-text` | `#6b5414` | `#ffd977` |
| `--code-inline-border` | `#f0dc8c` | `#4a3d18` |
| `--code-keyword` | `#a626a4` | `#c678dd` |
| `--code-string` | `#50a14f` | `#98c379` |
| `--code-number` | `#986801` | `#d19a66` |
| `--code-title` | `#4078f2` | `#61afef` |
| `--code-name` | `#e45649` | `#e06c75` |

### 尺寸、圆角、字体、动效

| 变量 | 浅色 | 深色 |
|---|---|---|
| `--r-scale` | `0` |  |
| `--nav-ctl` | `34px` |  |
| `--r-xs` | `calc(4px * var(--r-scale))` |  |
| `--r-sm` | `calc(6px * var(--r-scale))` |  |
| `--r-input` | `calc(8px * var(--r-scale))` |  |
| `--r` | `calc(12px * var(--r-scale))` |  |
| `--r-pill` | `calc(9999px * var(--r-scale))` |  |
| `--ease-out` | `cubic-bezier(0.23, 1, 0.32, 1)` |  |
| `--ease-drawer` | `cubic-bezier(0.32, 0.72, 0, 1)` |  |
| `--container` | `1600px` |  |
| `--sidebar-w` | `260px` |  |
| `--gap` | `20px` |  |
| `--post-image-max` | `720px` |  |
| `--font-sans` | `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif` |  |
| `--font-mono` | `"Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace` |  |

## 写自定义 CSS 的注意事项

- 自定义 CSS 写在「个人设置 → 个性设置 → 自定义 CSS」，只对自己生效。最大 64 KiB；不能用 `@import`；不能引用外部网址，图片、字体请用 base64（`data:`）。
- 优先改变量（`:root { --变量名: 值; }`），全站用到这个变量的地方会一起变；针对单个元素的规则在论坛改版时容易失效。
- 只在 `:root` 改颜色，深色模式下会被深色那一套覆盖。要深色模式也生效，同时写进 `:root[data-theme="dark"]` 和 `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }`。
- 站内字号都写成 px，想整体放大用 `html { zoom: 1.15; }`，改根字号没有效果。
- 想要窄屏版面，写 `:root { --container: 1200px; }`；说明类页面的标题区 `.doc-head` 同时设 `max-width: 76ch`，标题下的分隔线才对得齐。
- 想要圆角，写 `:root { --r-scale: 1; }`。
- 隐藏侧边栏时，要同时把 `.forum-layout` 改成单栏（`grid-template-columns: minmax(0, 1fr)`），否则右边留一条空白。
- 全站的 `button:hover` 会把文字颜色改成 `--action-text`（白），给按钮写悬停样式时要连 `color` 一起写，否则浅色背景上文字会看不见。
- 不要隐藏 `.avatar-img`：右上角自己的头像（账号菜单）和头像选择器也用它，藏了就点不到菜单。要隐藏别人的头像，隐藏外面那层，比如 `.post-avatar`。
- 系统设了「减少动态效果」时，自己加的动画也请关掉（`@media (prefers-reduced-motion: reduce)`）。
- 个性设置页本身不套用自定义 CSS，写坏了也能回来改，或者点「重置自定义 CSS」。