theme v4: 装饰层 + 砂狼白子 Q 版插画
- base.css 新增装饰层令牌 --tb-deco / -size / -position:固定 6 个槽位、固定像素四角定位, 不受 cover 裁切影响(竖屏桌面会把贴边的插画切掉)。多层背景的列表长度必须恒定, 值一多一少会整层错位(表现为整页重复同一张图)。 - shiroko:4 个 Q 版人物(wave/cheer/think/sit/doze),以用户立绘为参考图 image-to-image 生成后抠白底;左右各两个、立绘在右下当水印。顶部用固定 96px 避开顶栏, 真实视口 ≥920px 才补中间两个,矮屏不放(否则与立绘重叠)。 深色关掉装饰层,图案改为几何纹样。 - sakura:顶栏取页面底色、顶栏链接提到次要文字色、uk-alert-primary 改粉底。 - 主题注入补上 /user 后台与 /vote 投票页(跟随箱主/发布者的语言与配色)。 - StaticVersion → 20261019m
This commit is contained in:
@@ -0,0 +1,95 @@
|
||||
# 主题「砂狼白子」(shiroko)
|
||||
|
||||
阿拜多斯学园风格的灰蓝/银白配色,附带 Q 版人物插画。启用方式:
|
||||
|
||||
```ini
|
||||
[theme]
|
||||
available = default,sakura,shiroko
|
||||
```
|
||||
|
||||
箱主在「账号设置 → 主题外观」里选择即可。作用范围与其他主题一致:提问箱页面、本人投票页、`/user` 后台。
|
||||
|
||||
## 配色
|
||||
|
||||
| 令牌 | 浅色 | 深色 |
|
||||
| --- | --- | --- |
|
||||
| `--tb-bg` / `--tb-navbar` | `#edf2f8` | `#141a22` |
|
||||
| `--tb-surface` | `#ffffff` | `#1d2530` |
|
||||
| `--tb-surface-2` | `#e5ecf5` | `#273140` |
|
||||
| `--tb-border` | `#d6e0ec` | `#334052` |
|
||||
| `--tb-text` | `#222d3b` | `#e3eaf4` |
|
||||
| `--tb-primary` | `#4a7fc1` | `#6fa3e0` |
|
||||
|
||||
## 插画布置
|
||||
|
||||
| 位置 | 内容 | 尺寸 |
|
||||
| --- | --- | --- |
|
||||
| 右下角 | 用户提供的立绘(16% 透明,作背景水印) | `auto 520px` |
|
||||
| 左下角 | `doze`(站着打瞌睡) | `auto 240px` |
|
||||
| 左上角 | `wave`(挥手) | `auto 172px` |
|
||||
| 右上角 | `cheer`(双手欢呼) | `auto 160px` |
|
||||
| 右中 | `think`(托腮) | `auto 126px` |
|
||||
| 整页平铺 | 雪花 + 光环 + 圆环 + 点簇(320px 一铺) | `pattern.svg` |
|
||||
| ≤640px | 只保留立绘 + `doze`,尺寸减半 | `@media` |
|
||||
|
||||
插画走 **装饰层**(`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`),不是整页背景图:
|
||||
|
||||
- 固定像素尺寸 + 四角定位,**任何视口比例都不会被裁切**(`cover` 做不到,竖屏桌面会把贴边的插画切掉);
|
||||
- 固定 6 个槽位,必须写满 6 个值,缺的填 `none` —— 多背景各列表的层数必须恒定
|
||||
(1 图案 + 6 装饰 + 1 背景 = 8),值一多一少,分层就整体错位(会出现整页重复小人);
|
||||
- 深色模式关掉装饰层,只留底色与浅色图案。人物是银白/浅灰为主,压到深色底上会发灰发脏。
|
||||
|
||||
## 素材清单
|
||||
|
||||
位于 `static/images/themes/shiroko/`,已随二进制嵌入(`static/fs.go` 的 `images/themes`)。
|
||||
|
||||
| 文件 | 用途 | 尺寸 | 体积 |
|
||||
| --- | --- | --- | --- |
|
||||
| `chibi/wave.webp` | 挥手 | 324×620 | 27KB |
|
||||
| `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 |
|
||||
| `pattern.svg` | 浅色平铺(几何纹样) | 240×240 | 0.9KB |
|
||||
| `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB |
|
||||
|
||||
## 来源与授权
|
||||
|
||||
| 素材 | 来源 |
|
||||
| --- | --- |
|
||||
| `static/images/shiroko-cutout.png` → `hero-fade.webp` | **用户自行用 AI 生成**的立绘,裁边后降透明度 |
|
||||
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 |
|
||||
| `pattern.svg` / `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
|
||||
|
||||
### 生成与抠图参数
|
||||
|
||||
- 参考图:`static/images/shiroko-cutout.png`,`input_fidelity: high`,保证角色造型与平涂风格一致;
|
||||
- 提示词骨架(四个姿态共用,只改动作句):
|
||||
|
||||
> Same character, same art style as the reference image: flat vector illustration, no outlines,
|
||||
> simple shapes, soft pastel colors, minimal detail. A chibi anime girl with short fluffy
|
||||
> silver-grey bob hair, pointed grey wolf ears, a small tilted cyan halo ring above her head,
|
||||
> pale blue dot eyes, cyan scarf, dark navy blazer, light grey pleated skirt, cyan and black
|
||||
> sneakers. { 动作 } Plain pure white background (#FFFFFF), no shadow, no ground, no text, no watermark.
|
||||
|
||||
- 动作句:`Standing full body, front view, one arm raised waving hello with a small smile` /
|
||||
`both arms raised up cheering happily, big smile` /
|
||||
`one hand resting on her cheek thinking, head slightly tilted` /
|
||||
`eyes closed sleeping peacefully, head drooping slightly to one side`;
|
||||
- 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边,
|
||||
裁 bbox 后统一缩放到高 620、WebP q90。
|
||||
|
||||
关键经验:**必须是"平涂无描边"**。先试过用手写 SVG 线稿,风格和用户那张立绘(色块、无描边)冲突,
|
||||
而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。
|
||||
|
||||
**版权说明**:砂狼白子(砂狼シロコ)是《蔚蓝档案》的角色,版权归 NEXON Games / Yostar。
|
||||
本主题为**非商用同人装饰**,仅作个人站点外观使用;若站点转为商业用途,请自行取得授权或换成原创素材。
|
||||
|
||||
## 替换 / 扩素材
|
||||
|
||||
1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
|
||||
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值)。
|
||||
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,按 620 高、alpha 16% 重新导出 `hero-fade.webp`。
|
||||
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
|
||||
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把
|
||||
`conf.StaticVersion` +1,否则老访客吃缓存看不到变化。
|
||||
Reference in New Issue
Block a user