tamakyi
0c39afff3a
- 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
110 lines
4.9 KiB
CSS
110 lines
4.9 KiB
CSS
/* 砂狼白子（shiroko）：阿拜多斯学园的灰蓝／银白配色。
|
|
只覆盖令牌与外观层面的组件微调，不改任何布局。
|
|
|
|
素材（static/images/themes/shiroko/）：
|
|
- chibi/*.webp Q 版人物（wave/cheer/think/doze），以用户立绘为参考图生成 + 抠白底
|
|
- hero-fade.webp 用户提供的立绘（16% 透明，贴右下角当整页装饰）
|
|
- 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-border: #d6e0ec;
|
|
|
|
--tb-text: #222d3b;
|
|
--tb-text-secondary: #51607a;
|
|
--tb-text-muted: #8794a7;
|
|
|
|
--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);
|
|
|
|
/* 整页底色用极浅的竖向渐变（纯 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;
|
|
|
|
/* 装饰层：左右各两个（上一下一），立绘在右下当背景水印。
|
|
顶部用固定 92px 而不是百分比：顶栏高 80px，百分比会随视口高度浮动、把头顶压进顶栏。 */
|
|
--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"),
|
|
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;
|
|
}
|
|
|
|
html[data-theme="dark"][data-theme-style="shiroko"] {
|
|
--tb-bg: #141a22;
|
|
--tb-surface: #1d2530;
|
|
--tb-surface-2: #273140;
|
|
--tb-surface-hover: rgba(111, 163, 224, 0.12);
|
|
--tb-navbar: #141a22;
|
|
--tb-border: #334052;
|
|
|
|
--tb-text: #e3eaf4;
|
|
--tb-text-secondary: #a6b4c8;
|
|
--tb-text-muted: #77869b;
|
|
|
|
--tb-primary: #6fa3e0;
|
|
--tb-primary-weak: rgba(111, 163, 224, 0.16);
|
|
|
|
--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");
|
|
--tb-page-pattern-size: 320px 320px;
|
|
|
|
/* 深色下浅色线稿会糊成灰块，装饰层整体关掉，只留底色与浅色图案 */
|
|
--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) {
|
|
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%;
|
|
}
|
|
}
|
|
|
|
/* 窄屏：只保留立绘和一个坐姿，尺寸同步收小 */
|
|
@media (max-width: 640px) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* 组件微调（仅外观） */
|
|
|
|
/* 顶栏融进页面底色后，UIkit 默认的 #999 在灰蓝底上偏淡，提到次要文字色 */
|
|
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
|
|
color: var(--tb-text-secondary);
|
|
}
|
|
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a:hover {
|
|
color: var(--tb-primary);
|
|
}
|