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:
@@ -1,14 +1,15 @@
|
||||
/* 樱花(sakura):粉调 + 极淡网点,纯 CSS 实现,不依赖图片素材。
|
||||
只覆盖令牌,不改动任何布局。要点:
|
||||
- 页面底色用纯色(不用渐变),保证整页色感一致;
|
||||
- 顶栏与卡片都是「带粉调的暖白」而不是纯白,和粉底之间是过渡不是硬切;
|
||||
- 顶栏直接取页面底色(--tb-navbar 与 --tb-bg 同值),否则一条近白/灰的横带压在粉底上很突兀;
|
||||
- 卡片用暖白(--tb-surface)而不是纯白,和粉底之间是过渡不是硬切;
|
||||
- 网点放大到 24px、透明度降到 0.05,只作纸纹,不在留白处抢注意力。 */
|
||||
html[data-theme-style="sakura"] {
|
||||
--tb-bg: #fceef3;
|
||||
--tb-surface: #fffafc;
|
||||
--tb-surface-2: #fbe8ee;
|
||||
--tb-surface-hover: #fdf1f5;
|
||||
--tb-navbar: #fff6f9;
|
||||
--tb-navbar: #fceef3;
|
||||
--tb-border: #f2dde4;
|
||||
|
||||
--tb-text: #3a2b30;
|
||||
@@ -31,7 +32,7 @@ html[data-theme="dark"][data-theme-style="sakura"] {
|
||||
--tb-surface: #2f2228;
|
||||
--tb-surface-2: #3a2a33;
|
||||
--tb-surface-hover: rgba(255, 138, 176, 0.10);
|
||||
--tb-navbar: #2a1e24;
|
||||
--tb-navbar: #241a1f;
|
||||
--tb-border: #4a333e;
|
||||
|
||||
--tb-text: #f2e4e9;
|
||||
@@ -48,3 +49,18 @@ html[data-theme="dark"][data-theme-style="sakura"] {
|
||||
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.05) 1px, transparent 1.4px);
|
||||
--tb-page-pattern-size: 24px 24px;
|
||||
}
|
||||
|
||||
/* 组件微调(仅外观):顶栏融进粉底后,UIkit 默认的 #999 链接色在粉上偏淡,
|
||||
提到次要文字色;hover 用主色保留反馈。深色由 base.css 的 !important 规则接管。 */
|
||||
html[data-theme-style="sakura"] .uk-navbar-nav > li > a {
|
||||
color: var(--tb-text-secondary);
|
||||
}
|
||||
html[data-theme-style="sakura"] .uk-navbar-nav > li > a:hover {
|
||||
color: var(--tb-primary);
|
||||
}
|
||||
/* 信息提示条(匿名参与提示 / 空列表 / 未开始):UIkit 的浅蓝在粉底上是唯一的冷色块,
|
||||
换成浅粉底 + 深玫瑰文字(约 5.3:1)。深色由 base.css 的 !important 规则接管。 */
|
||||
html[data-theme-style="sakura"] .uk-alert-primary {
|
||||
background-color: var(--tb-primary-weak);
|
||||
color: #a63a5e;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user