diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index 8ca58a4..799390b 100644 --- a/docs/theme-shiroko.md +++ b/docs/theme-shiroko.md @@ -49,7 +49,7 @@ available = default,sakura,shiroko | `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB | | `chibi/think.webp` | 托腮 | 283×620 | 26KB | | `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB | -| `hero-fade.webp` | 用户立绘，预乘 16% 透明度 | 275×620 | 18KB | +| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB | | `pattern.svg` | 浅色平铺（几何纹样） | 240×240 | 0.9KB | | `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB | @@ -57,7 +57,7 @@ available = default,sakura,shiroko | 素材 | 来源 | | --- | --- | -| `static/images/shiroko-cutout.png` → `hero-fade.webp` | **用户自行用 AI 生成**的立绘，裁边后降透明度 | +| `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘，仅作生成参考图，不再上页面 | | `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**（image-to-image）生成，再抠白底 | | `pattern.svg` / `pattern-dark.svg` | 手写 SVG，纯几何，无外部素材 | @@ -89,7 +89,7 @@ available = default,sakura,shiroko 1. 加姿态：按上面的提示词骨架换动作句生成，白底 → 抠图 → 存 `chibi/.webp`（高 620）， 再塞进 `shiroko.css` 的 `--tb-deco`（记得保持 6 个值）。 -2. 换立绘：透明 PNG 覆盖 `static/images/shiroko-cutout.png`，按 620 高、alpha 16% 重新导出 `hero-fade.webp`。 +2. 换立绘：透明 PNG 覆盖 `static/images/shiroko-cutout.png`，再按同一提示词骨架重新生成姿态。 3. 换配色：改 `shiroko.css` 的令牌即可，插画是位图，换色需重新生成。 4. 新增素材不需要改 `static/fs.go`（已嵌整个 `images/themes` 目录）；但改了 CSS 必须把 `conf.StaticVersion` +1，否则老访客吃缓存看不到变化。 diff --git a/internal/conf/static.go b/internal/conf/static.go index 626cd34..70139a6 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。 - StaticVersion = "20261019m" + StaticVersion = "20261019n" ) // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧， diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index 45f1cdc..4c91a59 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -2,9 +2,8 @@ 只覆盖令牌与外观层面的组件微调，不改任何布局。 素材（static/images/themes/shiroko/）： - - chibi/*.webp Q 版人物（wave/cheer/think/doze），以用户立绘为参考图生成 + 抠白底 - - hero-fade.webp 用户提供的立绘（16% 透明，贴右下角当整页装饰） - - pattern.svg / pattern-dark.svg 雪花 + 光环 + 圆环点簇的平铺纹样 + - chibi/*.webp Q 版人物（wave/cheer/think/doze/sit），以用户立绘为参考图生成 + 抠白底 + - pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样 来源、提示词与抠图参数见 docs/theme-shiroko.md。 */ html[data-theme-style="shiroko"] { --tb-bg: #edf2f8; @@ -27,19 +26,19 @@ 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"); - --tb-page-pattern-size: 320px 320px; + --tb-page-pattern-size: 340px 340px; - /* 装饰层：左右各两个（上一下一），立绘在右下当背景水印。 - 顶部用固定 92px 而不是百分比：顶栏高 80px，百分比会随视口高度浮动、把头顶压进顶栏。 */ - --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"), - 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"), - url("/static/images/themes/shiroko/chibi/cheer.webp"), + none, + none, none, none; - --tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto, auto; - --tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px, - right 2% top 96px, left top, left top; + --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; } html[data-theme="dark"][data-theme-style="shiroko"] { @@ -62,44 +61,45 @@ html[data-theme="dark"][data-theme-style="shiroko"] { --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%); --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg"); - --tb-page-pattern-size: 320px 320px; + --tb-page-pattern-size: 340px 340px; - /* 深色下浅色线稿会糊成灰块，装饰层整体关掉，只留底色与浅色图案 */ + /* 深色下人物整体关掉：浅色立绘在深底上会变成一块块亮斑，抢正文 */ --tb-deco: none, none, none, none, none, none; --tb-deco-size: auto, auto, auto, auto, auto, auto; --tb-deco-position: left top, left top, left top, left top, left top, left top; } -/* 高屏才放中间两个：矮屏（1366×768 等）立绘从 348px 起，中间位会和它重叠。 - 门槛按「真实视口」定：1080p 全屏的 innerHeight 约 950-990，所以写 920 而不是 1050。 */ -@media (min-height: 920px) { +/* 卡片最宽 750px，两侧留白在 1000px 以下已经放不下整个人物， + 这时缩小并靠近边缘，让人物被卡片挡住一部分（读作「站在卡片后面」，比硬挤在留白里自然） */ +@media (max-width: 1179px) { html[data-theme-style="shiroko"] { - --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"), - url("/static/images/themes/shiroko/chibi/sit.webp"), - url("/static/images/themes/shiroko/chibi/wave.webp"), - url("/static/images/themes/shiroko/chibi/cheer.webp"), - url("/static/images/themes/shiroko/chibi/think.webp"), - url("/static/images/themes/shiroko/chibi/doze.webp"); - --tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto 126px, auto 126px; - --tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px, - right 2% top 96px, left 2.6% top 46%, right 2.6% top 46%; + --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; } } -/* 窄屏：只保留立绘和一个坐姿，尺寸同步收小 */ -@media (max-width: 640px) { +/* 窄屏卡片占满宽度，两侧没有视觉空间：人物退场，只留底色与纹样，顺带省掉 60KB 图片请求 */ +@media (max-width: 900px) { html[data-theme-style="shiroko"] { - --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"), - url("/static/images/themes/shiroko/chibi/sit.webp"), none, none, none, none; - --tb-deco-size: auto 300px, auto 130px, auto, auto, auto, auto; - --tb-deco-position: right 2% bottom 0, left 1% bottom 0, left top, left top, left top, - left top; - --tb-page-pattern-size: 240px 240px; + --tb-deco: none, none, none, none, none, none; + --tb-page-pattern-size: 260px 260px; } } /* 组件微调（仅外观） */ +/* 白卡片压在近白底色上几乎看不出边界，补一圈 1px 冷调描边把它托起来（box-shadow 不占布局） */ +html[data-theme-style="shiroko"] .uk-card-default { + box-shadow: 0 0 0 1px rgba(74, 127, 193, 0.12), var(--tb-shadow); +} +html[data-theme-style="shiroko"] .uk-card-default.uk-card-hover:hover { + box-shadow: 0 0 0 1px rgba(74, 127, 193, 0.18), var(--tb-shadow-hover); +} +html[data-theme="dark"][data-theme-style="shiroko"] .uk-card-default { + box-shadow: 0 0 0 1px rgba(111, 163, 224, 0.14), var(--tb-shadow); +} + /* 顶栏融进页面底色后，UIkit 默认的 #999 在灰蓝底上偏淡，提到次要文字色 */ html[data-theme-style="shiroko"] .uk-navbar-nav > li > a { color: var(--tb-text-secondary); diff --git a/static/images/themes/shiroko/hero-fade.webp b/static/images/themes/shiroko/hero-fade.webp deleted file mode 100644 index 48ab055..0000000 Binary files a/static/images/themes/shiroko/hero-fade.webp and /dev/null differ diff --git a/static/images/themes/shiroko/pattern-dark.svg b/static/images/themes/shiroko/pattern-dark.svg index d83fe41..5aec0aa 100644 --- a/static/images/themes/shiroko/pattern-dark.svg +++ b/static/images/themes/shiroko/pattern-dark.svg @@ -1,17 +1,11 @@ - - - - + + + + - - - - - - - - - + + + diff --git a/static/images/themes/shiroko/pattern.svg b/static/images/themes/shiroko/pattern.svg index 75a0004..4a3f412 100644 --- a/static/images/themes/shiroko/pattern.svg +++ b/static/images/themes/shiroko/pattern.svg @@ -1,21 +1,14 @@ - + - - - + + + - - - - - - - - - - - + + + +