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:
tamakyi
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user