From 2f2e00ad655f51c3f25636f061846b45ed4d52d6 Mon Sep 17 00:00:00 2001 From: tamakyi Date: Mon, 19 Oct 2026 21:43:44 +0800 Subject: [PATCH] =?UTF-8?q?theme(shiroko):=20=E8=A3=85=E9=A5=B0=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E3=80=8C=E5=8D=8A=E9=9A=90=E5=9C=A8=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E5=90=8E=E3=80=8D=E7=9A=84=E5=8D=95=E4=BA=BA=20+=20=E6=8E=A5?= =?UTF-8?q?=E8=A7=A6=E9=98=B4=E5=BD=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按选定方向收敛： - 只留 sit 一个角色，左移 515px 让右侧约 40px 钻进卡片底下（卡片定宽 750 居中， 左沿 = 50% - 375px），被卡片挡掉一部分才有空间关系，不再浮在留白中间； - 离底边 26px（脚踩最后一像素像被裁掉），配一层椭圆径向渐变当接触阴影，避免悬空； - 纹样透明度 0.13 → 0.085（深色 0.09 → 0.055），图案 url 补 ?v=； - 收掉另外三个人物与第一层半透明立绘； - StaticVersion → 20261019p --- docs/theme-shiroko.md | 25 +++++++++++++------ internal/conf/static.go | 2 +- static/css/themes/shiroko.css | 25 +++++++++++-------- static/images/themes/shiroko/pattern-dark.svg | 2 +- static/images/themes/shiroko/pattern.svg | 2 +- 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index 799390b..6b32803 100644 --- a/docs/theme-shiroko.md +++ b/docs/theme-shiroko.md @@ -24,13 +24,20 @@ available = default,sakura,shiroko | 位置 | 内容 | 尺寸 | | --- | --- | --- | -| 右下角 | 用户提供的立绘（16% 透明，作背景水印） | `auto 520px` | -| 左下角 | `doze`（站着打瞌睡） | `auto 240px` | -| 左上角 | `wave`（挥手） | `auto 172px` | -| 右上角 | `cheer`（双手欢呼） | `auto 160px` | -| 右中 | `think`（托腮） | `auto 126px` | -| 整页平铺 | 雪花 + 光环 + 圆环 + 点簇（320px 一铺） | `pattern.svg` | -| ≤640px | 只保留立绘 + `doze`，尺寸减半 | `@media` | +| 卡片左下外侧 | `sit`（盘腿坐），右侧约 40px 钻进卡片底下 | `auto 340px`，≤1179px 时 `280px` | +| 人物脚下 | 椭圆接触阴影（CSS `radial-gradient`，不是图片） | `128px 15px` | +| 整页平铺 | 雪花 ×2 + 光环 + 两点（340px 一铺，opacity 0.085） | `pattern.svg` | +| ≤900px | 不出人物 —— 卡片占满宽度，两侧没有视觉空间 | `@media` | + +摆位为什么是这个人样： + +- **不要四角各摆一个**。人物之间、人物与内容之间都没有关系，读起来就是贴纸墙纸； +- **右下角不能放人**。页脚文案右对齐（社区规则 / 备案号 / 存活时长），人物会和它挤在一起； +- **要半隐在卡片后面**。被卡片挡掉一部分才有空间关系，否则就是浮在留白中间； + 卡片定宽 750px 居中，左沿 = `50% - 375px`，人物宽约 177px，左移 515px 即遮住 40px； +- **离底边留 26px**。脚踩在窗口最后一行像素上会被读成"被裁掉"，抬高之后必须配接触阴影， + 否则变成悬空。 +- **纹样元素要均布**。全挤在 tile 上半部时，铺开后在整页形成明显的横向条纹带。 插画走 **装饰层**（`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`），不是整页背景图： @@ -38,6 +45,8 @@ available = default,sakura,shiroko - 固定 6 个槽位，必须写满 6 个值，缺的填 `none` —— 多背景各列表的层数必须恒定 （1 图案 + 6 装饰 + 1 背景 = 8），值一多一少，分层就整体错位（会出现整页重复小人）； - 深色模式关掉装饰层，只留底色与浅色图案。人物是银白／浅灰为主，压到深色底上会发灰发脏。 +- 图案是图片，不走 `StaticVersion` 缓存键（`Cache-Control: max-age=86400`）： + 换 `pattern*.svg` 时要自己给 css 里的 url 补一个 `?v=`，否则老访客最多 24 小时看到旧纹样。 ## 素材清单 @@ -88,7 +97,7 @@ available = default,sakura,shiroko ## 替换 / 扩素材 1. 加姿态：按上面的提示词骨架换动作句生成，白底 → 抠图 → 存 `chibi/.webp`（高 620）， - 再塞进 `shiroko.css` 的 `--tb-deco`（记得保持 6 个值）。 + 再塞进 `shiroko.css` 的 `--tb-deco`（记得保持 6 个值，并按上面的摆位原则定位）。 2. 换立绘：透明 PNG 覆盖 `static/images/shiroko-cutout.png`，再按同一提示词骨架重新生成姿态。 3. 换配色：改 `shiroko.css` 的令牌即可，插画是位图，换色需重新生成。 4. 新增素材不需要改 `static/fs.go`（已嵌整个 `images/themes` 目录）；但改了 CSS 必须把 diff --git a/internal/conf/static.go b/internal/conf/static.go index c8d0b18..4327ad6 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。 - StaticVersion = "20261019o" + StaticVersion = "20261019p" ) // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧， diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index 118421f..25153fb 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -25,20 +25,23 @@ html[data-theme-style="shiroko"] { /* 整页底色用极浅的竖向渐变（纯 CSS）：比图片稳，不会有 cover 缩放差异 */ --tb-page-image: linear-gradient(180deg, #f8fbfe 0%, #edf3f9 58%, #e2ecf6 100%); - --tb-page-pattern: url("/static/images/themes/shiroko/pattern.svg?v=20261019o"); + --tb-page-pattern: url("/static/images/themes/shiroko/pattern.svg?v=20261019p"); --tb-page-pattern-size: 340px 340px; - /* 装饰层：左下角一组两人（盘腿坐 + 挥手），都贴住左边缘与页面下沿。 - 四角各摆一个人会读成贴纸墙纸；半透明立绘叠在实心人物后面则是虚实混搭，像重影； - 右下角不能放人 —— 页脚文案是右对齐的（社区规则 / 备案号），会和人物挤在一起。 */ + /* 装饰层：一个人半隐在卡片左侧后面。 + 卡片是 750px 定宽居中，左沿 = 50% - 375px；人物宽约 177px，左移 515px 就有 40px + 钻进卡片底下 —— 被卡片挡住一部分，才有「站在内容后面」的空间关系，而不是浮在留白里。 + 离底边 26px：踩在浏览器的最后一行像素上会像被裁掉。 + 右下角不能放人 —— 页脚文案右对齐（社区规则 / 备案号），会和人物挤在一起。 */ --tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"), - url("/static/images/themes/shiroko/chibi/wave.webp"), + radial-gradient(ellipse at center, rgba(63, 96, 138, 0.22) 0%, rgba(63, 96, 138, 0) 72%), none, none, none, none; - --tb-deco-size: auto 330px, auto 190px, auto, auto, auto, auto; - --tb-deco-position: left 0 bottom 0, left 150px bottom 0, left top, left top, left top, left top; + --tb-deco-size: auto 340px, 128px 15px, auto, auto, auto, auto; + --tb-deco-position: left max(6px, calc(50% - 515px)) bottom 26px, + left max(6px, calc(50% - 487px)) bottom 19px, left top, left top, left top, left top; } html[data-theme="dark"][data-theme-style="shiroko"] { @@ -60,7 +63,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] { --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68); --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%); - --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019o"); + --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019p"); --tb-page-pattern-size: 340px 340px; /* 深色下人物整体关掉：浅色立绘在深底上会变成一块块亮斑，抢正文 */ @@ -73,9 +76,9 @@ html[data-theme="dark"][data-theme-style="shiroko"] { 这时缩小并靠近边缘，让人物被卡片挡住一部分（读作「站在卡片后面」，比硬挤在留白里自然） */ @media (max-width: 1179px) { html[data-theme-style="shiroko"] { - --tb-deco-size: auto 260px, auto 150px, auto, auto, auto, auto; - --tb-deco-position: left 0 bottom 0, left 118px bottom 0, left top, left top, left top, - left top; + --tb-deco-size: auto 280px, 104px 12px, auto, auto, auto, auto; + --tb-deco-position: left max(6px, calc(50% - 481px)) bottom 22px, + left max(6px, calc(50% - 457px)) bottom 16px, left top, left top, left top, left top; } } diff --git a/static/images/themes/shiroko/pattern-dark.svg b/static/images/themes/shiroko/pattern-dark.svg index 031cc47..240b924 100644 --- a/static/images/themes/shiroko/pattern-dark.svg +++ b/static/images/themes/shiroko/pattern-dark.svg @@ -1,5 +1,5 @@ - + diff --git a/static/images/themes/shiroko/pattern.svg b/static/images/themes/shiroko/pattern.svg index dea4fec..8c51904 100644 --- a/static/images/themes/shiroko/pattern.svg +++ b/static/images/themes/shiroko/pattern.svg @@ -1,6 +1,6 @@ - +