theme(shiroko): 按二次元官网构图重做——整页场景 + 悬浮磨砂 UI
参考蔚蓝档案 JP 首页（bluearchive.jp）的做法：整个视口是一张场景插画，UI 浮在场景之上， 而不是"白底 + 留白里贴几个人物"。之前几版反复调摆位都显得怪，根源就是缺了这层场景—— 人物没有环境，怎么摆都是贴纸。 - 新增教室场景两张（1920×1080 / 720×1003，共 28KB）：生成后裁掉右下角水印、 混白 38%、模糊 1.4px，保证白卡片仍有对比度； - 卡片与顶栏改半透明白 + backdrop-filter 磨砂（深色关闭，背后没场景时半透明只会变浑）； - 人物站在场景左侧地面（340px，离底边 36px）+ 椭圆接触阴影； - 浅色不再叠平铺纹样（压在实景上会变噪点），pattern.svg 删除，深色保留 pattern-dark； - 顺带修 ruleBody 不剥 CSS 注释的缺陷：令牌前写注释会让 tokenValue 取到粘连键， 色块预览静默失效（新增 TestRuleBodyIgnoresComments 守住）； - StaticVersion → 20261019q
This commit is contained in:
tamakyi
@@ -1,16 +1,22 @@
|
||||
/* 砂狼白子（shiroko）：阿拜多斯学园的灰蓝／银白配色。
|
||||
只覆盖令牌与外观层面的组件微调，不改任何布局。
|
||||
|
||||
做法参考二次元官网（蔚蓝档案 JP 首页）的构图：**整个视口是一张场景插画，UI 浮在场景之上**，
|
||||
而不是"白底 + 留白里贴几个人"。这里用一张教室场景（压白 38%）当整页背景，
|
||||
卡片与顶栏改成磨砂半透明，人物站在场景左侧地面 —— 人物有环境，才不像贴纸。
|
||||
|
||||
素材（static/images/themes/shiroko/）：
|
||||
- scene-desktop.webp / scene-mobile.webp 教室场景（16:9 / 9:16，已压白与轻度虚化）
|
||||
- chibi/*.webp Q 版人物（wave/cheer/think/doze/sit），以用户立绘为参考图生成 + 抠白底
|
||||
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样
|
||||
来源、提示词与抠图参数见 docs/theme-shiroko.md。 */
|
||||
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样（深色模式用）
|
||||
来源、提示词与处理参数见 docs/theme-shiroko.md。 */
|
||||
html[data-theme-style="shiroko"] {
|
||||
--tb-bg: #edf2f8;
|
||||
--tb-surface: #ffffff;
|
||||
--tb-surface-2: #e5ecf5;
|
||||
--tb-surface-hover: #eaf1f9;
|
||||
--tb-navbar: #edf2f8;
|
||||
--tb-bg: #eef3f9;
|
||||
/* 磨砂卡片：半透明白 + backdrop-filter，让场景的颜色透上来一点点 */
|
||||
--tb-surface: rgba(255, 255, 255, 0.86);
|
||||
--tb-surface-2: rgba(229, 236, 245, 0.92);
|
||||
--tb-surface-hover: rgba(234, 241, 249, 0.92);
|
||||
--tb-navbar: rgba(255, 255, 255, 0.52);
|
||||
--tb-border: #d6e0ec;
|
||||
|
||||
--tb-text: #222d3b;
|
||||
@@ -20,28 +26,23 @@ html[data-theme-style="shiroko"] {
|
||||
--tb-primary: #4a7fc1;
|
||||
--tb-primary-weak: rgba(74, 127, 193, 0.11);
|
||||
|
||||
--tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 12px 28px -18px rgba(38, 56, 82, 0.24);
|
||||
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 18px 40px -20px rgba(38, 56, 82, 0.32);
|
||||
--tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 18px 44px -22px rgba(38, 56, 82, 0.30);
|
||||
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
|
||||
|
||||
/* 整页底色用极浅的竖向渐变（纯 CSS）：比图片稳，不会有 cover 缩放差异 */
|
||||
--tb-page-image: linear-gradient(180deg, #f8fbfe 0%, #edf3f9 58%, #e2ecf6 100%);
|
||||
--tb-page-pattern: url("/static/images/themes/shiroko/pattern.svg?v=20261019p");
|
||||
--tb-page-pattern-size: 340px 340px;
|
||||
/* 整页场景：一张教室插画，cover 铺满；不再叠纹样（纹样压在实景上会变成噪点） */
|
||||
--tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019q");
|
||||
--tb-page-pattern: none;
|
||||
|
||||
/* 装饰层：一个人半隐在卡片左侧后面。
|
||||
卡片是 750px 定宽居中，左沿 = 50% - 375px；人物宽约 177px，左移 515px 就有 40px
|
||||
钻进卡片底下 —— 被卡片挡住一部分，才有「站在内容后面」的空间关系，而不是浮在留白里。
|
||||
离底边 26px：踩在浏览器的最后一行像素上会像被裁掉。
|
||||
右下角不能放人 —— 页脚文案右对齐（社区规则 / 备案号），会和人物挤在一起。 */
|
||||
/* 人物站在场景左侧地面：离底边 36px，配一层椭圆接触阴影，避免悬空 */
|
||||
--tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"),
|
||||
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.22) 0%, rgba(63, 96, 138, 0) 72%),
|
||||
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.20) 0%, rgba(63, 96, 138, 0) 72%),
|
||||
none,
|
||||
none,
|
||||
none,
|
||||
none;
|
||||
--tb-deco-size: auto 340px, 128px 15px, auto, auto, auto, auto;
|
||||
--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;
|
||||
--tb-deco-size: auto 340px, 120px 14px, auto, auto, auto, auto;
|
||||
--tb-deco-position: left max(6px, calc(50% - 520px)) bottom 36px,
|
||||
left max(6px, calc(50% - 492px)) bottom 29px, left top, left top, left top, left top;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-theme-style="shiroko"] {
|
||||
@@ -62,48 +63,55 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
|
||||
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58);
|
||||
--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-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019p");
|
||||
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019q");
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 卡片最宽 750px，两侧留白在 1000px 以下已经放不下整个人物，
|
||||
这时缩小并靠近边缘，让人物被卡片挡住一部分（读作「站在卡片后面」，比硬挤在留白里自然） */
|
||||
@media (max-width: 1179px) {
|
||||
html[data-theme-style="shiroko"] {
|
||||
--tb-deco-size: auto 280px, 104px 12px, auto, auto, auto, auto;
|
||||
--tb-deco-position: left max(6px, calc(50% - 481px)) bottom 22px,
|
||||
left max(6px, calc(50% - 457px)) bottom 16px, left top, left top, left top, left top;
|
||||
}
|
||||
}
|
||||
|
||||
/* 窄屏卡片占满宽度，两侧没有视觉空间：人物退场，只留底色与纹样，顺带省掉 60KB 图片请求 */
|
||||
/* 窄屏：卡片占满宽度，两侧没有视觉空间 —— 换成竖版场景，人物退场 */
|
||||
@media (max-width: 900px) {
|
||||
html[data-theme-style="shiroko"] {
|
||||
--tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019q");
|
||||
--tb-surface: rgba(255, 255, 255, 0.92);
|
||||
--tb-deco: none, none, none, none, none, none;
|
||||
--tb-page-pattern-size: 260px 260px;
|
||||
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
||||
--tb-deco-position: left top, left top, left top, left top, left top, left top;
|
||||
}
|
||||
}
|
||||
|
||||
/* 组件微调（仅外观） */
|
||||
|
||||
/* 白卡片压在近白底色上几乎看不出边界，补一圈 1px 冷调描边把它托起来（box-shadow 不占布局） */
|
||||
/* 磨砂：卡片与顶栏让场景透上来，才像"UI 浮在画面上"而不是压在照片上 */
|
||||
html[data-theme-style="shiroko"] .uk-card-default {
|
||||
backdrop-filter: blur(16px) saturate(1.05);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.05);
|
||||
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);
|
||||
html[data-theme-style="shiroko"] .uk-navbar-container:not(.uk-navbar-transparent) {
|
||||
background-color: var(--tb-navbar);
|
||||
backdrop-filter: blur(14px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.1);
|
||||
}
|
||||
|
||||
/* 顶栏融进页面底色后，UIkit 默认的 #999 在灰蓝底上偏淡，提到次要文字色 */
|
||||
/* 深色不用半透明（背后没有场景，半透明只会让层次变浑），也不加模糊 */
|
||||
html[data-theme="dark"][data-theme-style="shiroko"] .uk-card-default {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: 0 0 0 1px rgba(111, 163, 224, 0.14), var(--tb-shadow);
|
||||
}
|
||||
html[data-theme="dark"][data-theme-style="shiroko"] .uk-navbar-container:not(.uk-navbar-transparent) {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* 顶栏融进场景后，UIkit 默认的 #999 偏淡，提到次要文字色 */
|
||||
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
|
||||
color: var(--tb-text-secondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user