theme(shiroko): 装饰改为一组两人,去掉散射与半透明立绘
四角各摆一个人读起来像贴纸墙纸:人物之间没有位置关系,也没有和内容的关系, 右下角还会和右对齐的页脚文案(社区规则 / 备案号)挤在一起。 - 只留左下角一组:盘腿坐(330)+ 挥手(190),贴住左边缘和下沿; 990px 以下缩小并整体左移,900px 以下(卡片占满宽度)不出人物,顺带省掉图片请求。 - 删掉 16% 透明度的 hero-fade 叠层:虚实两套人物叠在一起像重影。 - 纹样减到雪花 + 光环 + 两点,透明度 0.2 → 0.16,tile 320 → 340。 - 卡片压在近白底色上分不清边界,补一圈 1px 冷调描边(box-shadow,不占布局)。 - StaticVersion → 20261019n
This commit is contained in:
@@ -49,7 +49,7 @@ available = default,sakura,shiroko
|
|||||||
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
|
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
|
||||||
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
||||||
| `chibi/doze.webp` | 打瞌睡 | 274×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.svg` | 浅色平铺(几何纹样) | 240×240 | 0.9KB |
|
||||||
| `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB |
|
| `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)生成,再抠白底 |
|
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 |
|
||||||
| `pattern.svg` / `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
|
| `pattern.svg` / `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
|
||||||
|
|
||||||
@@ -89,7 +89,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`,按 620 高、alpha 16% 重新导出 `hero-fade.webp`。
|
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 必须把
|
||||||
`conf.StaticVersion` +1,否则老访客吃缓存看不到变化。
|
`conf.StaticVersion` +1,否则老访客吃缓存看不到变化。
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ var (
|
|||||||
BuildCommit = "dev"
|
BuildCommit = "dev"
|
||||||
|
|
||||||
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
||||||
StaticVersion = "20261019m"
|
StaticVersion = "20261019n"
|
||||||
)
|
)
|
||||||
|
|
||||||
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
||||||
|
|||||||
@@ -2,9 +2,8 @@
|
|||||||
只覆盖令牌与外观层面的组件微调,不改任何布局。
|
只覆盖令牌与外观层面的组件微调,不改任何布局。
|
||||||
|
|
||||||
素材(static/images/themes/shiroko/):
|
素材(static/images/themes/shiroko/):
|
||||||
- chibi/*.webp Q 版人物(wave/cheer/think/doze),以用户立绘为参考图生成 + 抠白底
|
- chibi/*.webp Q 版人物(wave/cheer/think/doze/sit),以用户立绘为参考图生成 + 抠白底
|
||||||
- hero-fade.webp 用户提供的立绘(16% 透明,贴右下角当整页装饰)
|
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样
|
||||||
- pattern.svg / pattern-dark.svg 雪花 + 光环 + 圆环点簇的平铺纹样
|
|
||||||
来源、提示词与抠图参数见 docs/theme-shiroko.md。 */
|
来源、提示词与抠图参数见 docs/theme-shiroko.md。 */
|
||||||
html[data-theme-style="shiroko"] {
|
html[data-theme-style="shiroko"] {
|
||||||
--tb-bg: #edf2f8;
|
--tb-bg: #edf2f8;
|
||||||
@@ -27,19 +26,19 @@ 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");
|
--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/wave.webp"),
|
||||||
url("/static/images/themes/shiroko/chibi/cheer.webp"),
|
none,
|
||||||
|
none,
|
||||||
none,
|
none,
|
||||||
none;
|
none;
|
||||||
--tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto, auto;
|
--tb-deco-size: auto 330px, auto 190px, auto, auto, auto, auto;
|
||||||
--tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px,
|
--tb-deco-position: left 0 bottom 0, left 150px bottom 0, left top, left top, left top, left top;
|
||||||
right 2% top 96px, left top, left top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"][data-theme-style="shiroko"] {
|
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-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
|
||||||
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg");
|
--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: none, none, none, none, none, none;
|
||||||
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
||||||
--tb-deco-position: left top, left top, left top, left top, left top, left top;
|
--tb-deco-position: left top, left top, left top, left top, left top, left top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 高屏才放中间两个:矮屏(1366×768 等)立绘从 348px 起,中间位会和它重叠。
|
/* 卡片最宽 750px,两侧留白在 1000px 以下已经放不下整个人物,
|
||||||
门槛按「真实视口」定:1080p 全屏的 innerHeight 约 950-990,所以写 920 而不是 1050。 */
|
这时缩小并靠近边缘,让人物被卡片挡住一部分(读作「站在卡片后面」,比硬挤在留白里自然) */
|
||||||
@media (min-height: 920px) {
|
@media (max-width: 1179px) {
|
||||||
html[data-theme-style="shiroko"] {
|
html[data-theme-style="shiroko"] {
|
||||||
--tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
|
--tb-deco-size: auto 260px, auto 150px, auto, auto, auto, auto;
|
||||||
url("/static/images/themes/shiroko/chibi/sit.webp"),
|
--tb-deco-position: left 0 bottom 0, left 118px bottom 0, left top, left top, left top,
|
||||||
url("/static/images/themes/shiroko/chibi/wave.webp"),
|
left top;
|
||||||
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%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 窄屏:只保留立绘和一个坐姿,尺寸同步收小 */
|
/* 窄屏卡片占满宽度,两侧没有视觉空间:人物退场,只留底色与纹样,顺带省掉 60KB 图片请求 */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 900px) {
|
||||||
html[data-theme-style="shiroko"] {
|
html[data-theme-style="shiroko"] {
|
||||||
--tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
|
--tb-deco: none, none, none, none, none, none;
|
||||||
url("/static/images/themes/shiroko/chibi/sit.webp"), none, none, none, none;
|
--tb-page-pattern-size: 260px 260px;
|
||||||
--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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 组件微调(仅外观) */
|
/* 组件微调(仅外观) */
|
||||||
|
|
||||||
|
/* 白卡片压在近白底色上几乎看不出边界,补一圈 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 在灰蓝底上偏淡,提到次要文字色 */
|
/* 顶栏融进页面底色后,UIkit 默认的 #999 在灰蓝底上偏淡,提到次要文字色 */
|
||||||
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
|
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
|
||||||
color: var(--tb-text-secondary);
|
color: var(--tb-text-secondary);
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,17 +1,11 @@
|
|||||||
<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="#A8C6EC" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.14">
|
<g fill="none" stroke="#8FB4DE" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.11">
|
||||||
<g transform="translate(50 54)">
|
<g transform="translate(52 56)">
|
||||||
<path d="M0 -20V20M-17.3 -10L17.3 10M-17.3 10L17.3 -10"/>
|
<path d="M0 -19V19M-16.5 -9.5L16.5 9.5M-16.5 9.5L16.5 -9.5"/>
|
||||||
<path d="M0 -20l-4.5 4.5M0 -20l4.5 4.5M0 20l-4.5-4.5M0 20l4.5-4.5"/>
|
<path d="M0 -19l-4.2 4.2M0 -19l4.2 4.2M0 19l-4.2-4.2M0 19l4.2-4.2"/>
|
||||||
</g>
|
</g>
|
||||||
<ellipse cx="178" cy="60" rx="21" ry="7.5"/>
|
<ellipse cx="178" cy="62" rx="19" ry="6.8"/>
|
||||||
<circle cx="104" cy="144" r="9"/>
|
<circle cx="124" cy="150" r="1.6"/>
|
||||||
<circle cx="104" cy="144" r="3.2"/>
|
<circle cx="196" cy="176" r="1.3"/>
|
||||||
<circle cx="152" cy="198" r="1.8"/>
|
|
||||||
<circle cx="166" cy="186" r="1.4"/>
|
|
||||||
<circle cx="72" cy="120" r="1.4"/>
|
|
||||||
<path d="M206 194v10M201 199h10"/>
|
|
||||||
<circle cx="32" cy="196" r="1.6"/>
|
|
||||||
<circle cx="210" cy="138" r="1.3"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 767 B After Width: | Height: | Size: 536 B |
@@ -1,21 +1,14 @@
|
|||||||
<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="#6F90BC" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.2">
|
<g fill="none" stroke="#6F90BC" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.16">
|
||||||
<!-- 雪花 -->
|
<!-- 雪花 -->
|
||||||
<g transform="translate(50 54)">
|
<g transform="translate(52 56)">
|
||||||
<path d="M0 -20V20M-17.3 -10L17.3 10M-17.3 10L17.3 -10"/>
|
<path d="M0 -19V19M-16.5 -9.5L16.5 9.5M-16.5 9.5L16.5 -9.5"/>
|
||||||
<path d="M0 -20l-4.5 4.5M0 -20l4.5 4.5M0 20l-4.5-4.5M0 20l4.5-4.5"/>
|
<path d="M0 -19l-4.2 4.2M0 -19l4.2 4.2M0 19l-4.2-4.2M0 19l4.2-4.2"/>
|
||||||
</g>
|
</g>
|
||||||
<!-- 光环 -->
|
<!-- 光环 -->
|
||||||
<ellipse cx="178" cy="60" rx="21" ry="7.5"/>
|
<ellipse cx="178" cy="62" rx="19" ry="6.8"/>
|
||||||
<!-- 小圆环 + 点簇(保持密度,不再放人形,避免和正文插画抢戏) -->
|
<!-- 两点碎屑:只保留极少元素,避免整页像涂鸦 -->
|
||||||
<circle cx="104" cy="144" r="9"/>
|
<circle cx="124" cy="150" r="1.6"/>
|
||||||
<circle cx="104" cy="144" r="3.2"/>
|
<circle cx="196" cy="176" r="1.3"/>
|
||||||
<circle cx="152" cy="198" r="1.8"/>
|
|
||||||
<circle cx="166" cy="186" r="1.4"/>
|
|
||||||
<circle cx="72" cy="120" r="1.4"/>
|
|
||||||
<!-- 碎星 -->
|
|
||||||
<path d="M206 194v10M201 199h10"/>
|
|
||||||
<circle cx="32" cy="196" r="1.6"/>
|
|
||||||
<circle cx="210" cy="138" r="1.3"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 924 B After Width: | Height: | Size: 650 B |
Reference in New Issue
Block a user