/* 樱花(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: #fceef3; --tb-border: #f2dde4; --tb-text: #3a2b30; --tb-text-secondary: #6b545c; /* 弱化文字:旧值 #a08c94 只有 2.8:1(看不清),#78696e 是 4.6:1,踩住 AA 下限 */ --tb-text-muted: #78696e; --tb-primary: #e5678f; --tb-primary-weak: rgba(229, 103, 143, 0.12); --tb-shadow: 0 1px 2px rgba(120, 60, 80, 0.05), 0 12px 28px -18px rgba(120, 60, 80, 0.22); --tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30); --tb-page-image: none; --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.05) 1px, transparent 1.4px); --tb-page-pattern-size: 24px 24px; } html[data-theme="dark"][data-theme-style="sakura"] { --tb-bg: #241a1f; --tb-surface: #2f2228; --tb-surface-2: #3a2a33; --tb-surface-hover: rgba(255, 138, 176, 0.10); --tb-navbar: #241a1f; --tb-border: #4a333e; --tb-text: #f2e4e9; --tb-text-secondary: #c6aab4; --tb-text-muted: #9d818b; --tb-primary: #ff8ab0; --tb-primary-weak: rgba(255, 138, 176, 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: none; --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; }