theme(shiroko): 装饰改为「半隐在卡片后」的单人 + 接触阴影

按选定方向收敛:

- 只留 sit 一个角色,左移 515px 让右侧约 40px 钻进卡片底下(卡片定宽 750 居中,
  左沿 = 50% - 375px),被卡片挡掉一部分才有空间关系,不再浮在留白中间;
- 离底边 26px(脚踩最后一像素像被裁掉),配一层椭圆径向渐变当接触阴影,避免悬空;
- 纹样透明度 0.13 → 0.085(深色 0.09 → 0.055),图案 url 补 ?v=;
- 收掉另外三个人物与第一层半透明立绘;
- StaticVersion → 20261019p
This commit is contained in:
tamakyi
2026-10-19 21:43:44 +08:00
parent 96e26cf0fa
commit 2f2e00ad65
5 changed files with 34 additions and 22 deletions
+17 -8
View File
@@ -24,13 +24,20 @@ available = default,sakura,shiroko
| 位置 | 内容 | 尺寸 | | 位置 | 内容 | 尺寸 |
| --- | --- | --- | | --- | --- | --- |
| 右下角 | 用户提供的立绘(16% 透明,作背景水印) | `auto 520px` | | 卡片左下外侧 | `sit`(盘腿坐),右侧约 40px 钻进卡片底下 | `auto 340px`,≤1179px 时 `280px` |
| 左下角 | `doze`(站着打瞌睡) | `auto 240px` | | 人物脚下 | 椭圆接触阴影(CSS `radial-gradient`,不是图片) | `128px 15px` |
| 左上角 | `wave`(挥手) | `auto 172px` | | 整页平铺 | 雪花 ×2 + 光环 + 两点(340px 一铺,opacity 0.085) | `pattern.svg` |
| 右上角 | `cheer`(双手欢呼) | `auto 160px` | | ≤900px | 不出人物 —— 卡片占满宽度,两侧没有视觉空间 | `@media` |
| 右中 | `think`(托腮) | `auto 126px` |
| 整页平铺 | 雪花 + 光环 + 圆环 + 点簇(320px 一铺) | `pattern.svg` | 摆位为什么是这个人样:
| ≤640px | 只保留立绘 + `doze`,尺寸减半 | `@media` |
- **不要四角各摆一个**。人物之间、人物与内容之间都没有关系,读起来就是贴纸墙纸;
- **右下角不能放人**。页脚文案右对齐(社区规则 / 备案号 / 存活时长),人物会和它挤在一起;
- **要半隐在卡片后面**。被卡片挡掉一部分才有空间关系,否则就是浮在留白中间;
卡片定宽 750px 居中,左沿 = `50% - 375px`,人物宽约 177px,左移 515px 即遮住 40px;
- **离底边留 26px**。脚踩在窗口最后一行像素上会被读成"被裁掉",抬高之后必须配接触阴影,
否则变成悬空。
- **纹样元素要均布**。全挤在 tile 上半部时,铺开后在整页形成明显的横向条纹带。
插画走 **装饰层**(`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`),不是整页背景图: 插画走 **装饰层**(`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`),不是整页背景图:
@@ -38,6 +45,8 @@ available = default,sakura,shiroko
- 固定 6 个槽位,必须写满 6 个值,缺的填 `none` —— 多背景各列表的层数必须恒定 - 固定 6 个槽位,必须写满 6 个值,缺的填 `none` —— 多背景各列表的层数必须恒定
(1 图案 + 6 装饰 + 1 背景 = 8),值一多一少,分层就整体错位(会出现整页重复小人); (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/<name>.webp`(高 620), 1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值)。 再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值,并按上面的摆位原则定位)。
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。 2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。 3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把 4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把
+1 -1
View File
@@ -10,7 +10,7 @@ var (
BuildCommit = "dev" BuildCommit = "dev"
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。 // StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
StaticVersion = "20261019o" StaticVersion = "20261019p"
) )
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧, // 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
+14 -11
View File
@@ -25,20 +25,23 @@ html[data-theme-style="shiroko"] {
/* 整页底色用极浅的竖向渐变(纯 CSS):比图片稳,不会有 cover 缩放差异 */ /* 整页底色用极浅的竖向渐变(纯 CSS):比图片稳,不会有 cover 缩放差异 */
--tb-page-image: linear-gradient(180deg, #f8fbfe 0%, #edf3f9 58%, #e2ecf6 100%); --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; --tb-page-pattern-size: 340px 340px;
/* 装饰层:左下角一组两人(盘腿坐 + 挥手),都贴住左边缘与页面下沿。 /* 装饰层:一个人半隐在卡片左侧后面。
四角各摆一个人会读成贴纸墙纸;半透明立绘叠在实心人物后面则是虚实混搭,像重影; 卡片是 750px 定宽居中,左沿 = 50% - 375px;人物宽约 177px,左移 515px 就有 40px
右下角不能放人 —— 页脚文案是右对齐的(社区规则 / 备案号),会和人物挤在一起。 */ 钻进卡片底下 —— 被卡片挡住一部分,才有「站在内容后面」的空间关系,而不是浮在留白里。
离底边 26px:踩在浏览器的最后一行像素上会像被裁掉。
右下角不能放人 —— 页脚文案右对齐(社区规则 / 备案号),会和人物挤在一起。 */
--tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"), --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,
none, none,
none; none;
--tb-deco-size: auto 330px, auto 190px, auto, auto, auto, auto; --tb-deco-size: auto 340px, 128px 15px, 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-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"] { 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-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-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; --tb-page-pattern-size: 340px 340px;
/* 深色下人物整体关掉:浅色立绘在深底上会变成一块块亮斑,抢正文 */ /* 深色下人物整体关掉:浅色立绘在深底上会变成一块块亮斑,抢正文 */
@@ -73,9 +76,9 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
这时缩小并靠近边缘,让人物被卡片挡住一部分(读作「站在卡片后面」,比硬挤在留白里自然) */ 这时缩小并靠近边缘,让人物被卡片挡住一部分(读作「站在卡片后面」,比硬挤在留白里自然) */
@media (max-width: 1179px) { @media (max-width: 1179px) {
html[data-theme-style="shiroko"] { html[data-theme-style="shiroko"] {
--tb-deco-size: auto 260px, auto 150px, auto, auto, auto, auto; --tb-deco-size: auto 280px, 104px 12px, auto, auto, auto, auto;
--tb-deco-position: left 0 bottom 0, left 118px bottom 0, left top, left top, left top, --tb-deco-position: left max(6px, calc(50% - 481px)) bottom 22px,
left top; left max(6px, calc(50% - 457px)) bottom 16px, left top, left top, left top, left top;
} }
} }
@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"> <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g fill="none" stroke="#8FB4DE" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.09"> <g fill="none" stroke="#8FB4DE" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.055">
<g transform="translate(48 52)"> <g transform="translate(48 52)">
<path d="M0 -18V18M-15.6 -9L15.6 9M-15.6 9L15.6 -9"/> <path d="M0 -18V18M-15.6 -9L15.6 9M-15.6 9L15.6 -9"/>
<path d="M0 -18l-4 4M0 -18l4 4M0 18l-4-4M0 18l4-4"/> <path d="M0 -18l-4 4M0 -18l4 4M0 18l-4-4M0 18l4-4"/>

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 671 B

+1 -1
View File
@@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"> <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<!-- 元素按 3 行均布:集中在某一侧时,铺开后会出现横向条纹带 --> <!-- 元素按 3 行均布:集中在某一侧时,铺开后会出现横向条纹带 -->
<g fill="none" stroke="#6F90BC" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.13"> <g fill="none" stroke="#6F90BC" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.085">
<g transform="translate(48 52)"> <g transform="translate(48 52)">
<path d="M0 -18V18M-15.6 -9L15.6 9M-15.6 9L15.6 -9"/> <path d="M0 -18V18M-15.6 -9L15.6 9M-15.6 9L15.6 -9"/>
<path d="M0 -18l-4 4M0 -18l4 4M0 18l-4-4M0 18l4-4"/> <path d="M0 -18l-4 4M0 -18l4 4M0 18l-4-4M0 18l4-4"/>

Before

Width:  |  Height:  |  Size: 763 B

After

Width:  |  Height:  |  Size: 764 B