/* wall.css · 壁纸统一层(2026-09-03;09-04 三改:配色跟着壁纸走) 只在 存在时生效:那一档没选 = 各页原样,一个像素都不变。 变量由 wall-boot.js 打在 上: --wall-img(url) / --wall-veil(0–1.5,面纱浓淡) / --wall-hue + data-wall-hue(壁纸主色相,OKLCH 角度;灰图不打)。 面纱 = 一层均匀色纱(昼:纸白,夜:墨黑),alpha = .6 × 面纱值:0 裸图,1.0 六成,1.5 九成。 09-04 起三件事: ① 纱带一点壁纸的色相(chroma 只有 .01 上下:肉眼是「同一家的灰」,不是染色) ② 点缀色只换色相不换明度饱和:--gold(家/灯塔是 --amber)= oklch(from 各页原色 l c 壁纸色相) ③ 护栏:壁纸明暗和主题拧着(暗图配白天 / 亮图配夜里)时面纱至少 .75,字永远站得住 rgba 写在前、oklch 写在后:老引擎不认 oklch 就落回上一行。各页原有的渐变纱(chat2 那套她 08-30 调过三次的)不动。 每条规则都带 data-wall-host,只认自己那一页;选择器比各页原规则多一个 html[data-wall],靠特异度压过去。 */ /* ── 护栏:明暗拧着时的面纱下限 ── */ html[data-wall] { --wall-veil-eff: var(--wall-veil, 1); } html[data-wall][data-wall-tone="dark"][data-theme="day"], html[data-wall][data-wall-tone="dark"][data-wall-host="home"]:not([data-theme="dark"]), html[data-wall][data-wall-tone="dark"][data-wall-host="hub"]:not([data-theme="dark"]), html[data-wall][data-wall-tone="dark"][data-wall-host="reskin"]:not([data-theme="dark"]), html[data-wall][data-wall-tone="light"][data-theme="night"], html[data-wall][data-wall-tone="light"][data-theme="dark"] { --wall-veil-eff: max(var(--wall-veil, 1), .75); } /* ── 聊天(chat2):.bg 是壁纸层;.bg::before 空着,拿来铺色纱(在她那层渐变 ::after 之下) ── */ html[data-wall][data-wall-host="chat"] .bg, html[data-wall][data-wall-host="chat"][data-theme="day"] .bg, html[data-wall][data-wall-host="chat"][data-theme="day"][data-hue] .bg { background: var(--wall-img) center center / cover no-repeat #cfd6dd; background-size: cover; transition: none; } html[data-wall][data-wall-host="chat"] .bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(8, 8, 10, calc(.6 * var(--wall-veil-eff, 1))); background: oklch(.14 .012 var(--wall-hue, 60) / calc(.6 * var(--wall-veil-eff, 1))); } html[data-wall][data-wall-host="chat"][data-theme="day"] .bg::before { background: rgba(236, 236, 232, calc(.6 * var(--wall-veil-eff, 1))); background: oklch(.94 .01 var(--wall-hue, 80) / calc(.6 * var(--wall-veil-eff, 1))); } /* ── 家(home2):.app::after 铺图 + 色纱(顶稍浓底稍淡,保留一点纵深) ── */ html[data-wall][data-wall-host="home"] .app::after { background-image: linear-gradient(180deg, rgba(250, 252, 255, calc(.62 * var(--wall-veil-eff, 1))), rgba(236, 240, 246, calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); background-image: linear-gradient(180deg, oklch(.985 .008 var(--wall-hue, 250) / calc(.62 * var(--wall-veil-eff, 1))), oklch(.95 .01 var(--wall-hue, 250) / calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); } html[data-wall][data-wall-host="home"][data-theme="dark"] .app::after { background-image: linear-gradient(180deg, rgba(10, 14, 24, calc(.62 * var(--wall-veil-eff, 1))), rgba(12, 16, 26, calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); background-image: linear-gradient(180deg, oklch(.17 .02 var(--wall-hue, 260) / calc(.62 * var(--wall-veil-eff, 1))), oklch(.18 .02 var(--wall-hue, 260) / calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); } /* ── 灯塔(misty-dashboard):.hub-app::before ── */ html[data-wall][data-wall-host="hub"] .hub-app::before { background-image: linear-gradient(180deg, rgba(247, 242, 236, calc(.62 * var(--wall-veil-eff, 1))), rgba(232, 228, 224, calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); background-image: linear-gradient(180deg, oklch(.96 .01 var(--wall-hue, 70) / calc(.62 * var(--wall-veil-eff, 1))), oklch(.92 .008 var(--wall-hue, 70) / calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); } html[data-wall][data-wall-host="hub"][data-theme="dark"] .hub-app::before { background-image: linear-gradient(180deg, rgba(14, 14, 20, calc(.62 * var(--wall-veil-eff, 1))), rgba(18, 16, 20, calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); background-image: linear-gradient(180deg, oklch(.16 .012 var(--wall-hue, 280) / calc(.62 * var(--wall-veil-eff, 1))), oklch(.17 .01 var(--wall-hue, 320) / calc(.5 * var(--wall-veil-eff, 1)))), var(--wall-img); } /* ── reskin 旧页(礼物/大富翁/阅读/屏幕时间):body::before 铺图;body::after 是它自己那层纱,浓淡跟着走 ── */ html[data-wall][data-wall-host="reskin"] body::before { background-image: var(--wall-img); } html[data-wall][data-wall-host="reskin"] body::after { opacity: min(1, calc(.9 * var(--wall-veil-eff, 1))); } /* ── 点缀色跟壁纸换色相(只换 h,l/c 是各页自己那支原色的) ── 基色各抄一份在这儿:chat2 夜 #df8492 / 昼 #c96f7d;家与灯塔 aion-ui 的 --amber 昼 #d8a75e / 夜 #e4b873;reskin 昼 #96762f / 夜 #d4b98c。 页面那边的原色若改了,这里要跟着改(oklch(from var(--gold) …) 会自引用,写不了)。 */ @supports (color: oklch(from red l c h)) { html[data-wall][data-wall-hue][data-wall-host="chat"] { --gold: oklch(from #df8492 l c var(--wall-hue)); } html[data-wall][data-wall-hue][data-wall-host="chat"][data-theme="day"] { --gold: oklch(from #c96f7d l c var(--wall-hue)); } html[data-wall][data-wall-hue][data-wall-host="home"], html[data-wall][data-wall-hue][data-wall-host="hub"] { --amber: oklch(from #d8a75e l c var(--wall-hue)); } html[data-wall][data-wall-hue][data-wall-host="home"][data-theme="dark"], html[data-wall][data-wall-hue][data-wall-host="hub"][data-theme="dark"] { --amber: oklch(from #e4b873 l c var(--wall-hue)); } html[data-wall][data-wall-hue][data-wall-host="reskin"] { --gold: oklch(from #96762f l c var(--wall-hue)); --accent: var(--gold); } html[data-wall][data-wall-hue][data-wall-host="reskin"][data-theme="dark"] { --gold: oklch(from #d4b98c l c var(--wall-hue)); --accent: var(--gold); } }