fix(theme): 深色不再抹掉壁纸,改为深色遮罩压暗
用户反馈深色下背景图片消失。原因:我在深色里用了 background 简写并带 !important(特异性 0,2,1 > 壁纸规则的 0,1,1),把壁纸的 background-image 清成了 none。 改为:只覆盖 background-color,另加 body::before 深色遮罩(与亮色模式 白色遮罩同思路,z-index:-1 是本站既有做法),壁纸依旧可见、只是变暗。 同时修正上一轮验证方法的缺陷:那几次"看到旧样式"是浏览器缓存造成的假象。
This commit is contained in:
28
web/navi.css
28
web/navi.css
@ -1363,11 +1363,11 @@ html[data-theme] .navi-footer a {
|
||||
因此与注入顺序无关,稳定生效。 */
|
||||
html.navi-dark {
|
||||
color-scheme: dark !important;
|
||||
--background: #0b1120;
|
||||
--background-color: #0b1120;
|
||||
--background-darker: #070d18;
|
||||
--code-editor-background: #0f172a;
|
||||
--code-editor-background-color: #0f172a;
|
||||
--code-editor-color: #e2e8f0;
|
||||
--config-code-background: #0f172a;
|
||||
--config-code-background-color: #0f172a;
|
||||
--config-code-color: #e2e8f0;
|
||||
--config-settings-background: rgba(15, 23, 42, 0.92);
|
||||
--config-settings-color: #cbd5e1;
|
||||
@ -1377,7 +1377,7 @@ html.navi-dark {
|
||||
--footer-text-color: #94a3b8;
|
||||
--footer-text-color-link: #38bdf8;
|
||||
--heading-text-color: #f1f5f9;
|
||||
--highlight-background: #1e40af;
|
||||
--highlight-background-color: #1e40af;
|
||||
--highlight-color: #e2e8f0;
|
||||
--info: #38bdf8;
|
||||
--item-group-background: rgba(17, 25, 40, 0.62);
|
||||
@ -1394,7 +1394,7 @@ html.navi-dark {
|
||||
--neutral: #94a3b8;
|
||||
--primary: #38bdf8;
|
||||
--primary-alt: #0ea5e9;
|
||||
--scroll-bar-background: #0f172a;
|
||||
--scroll-bar-background-color: #0f172a;
|
||||
--scroll-bar-color: #334155;
|
||||
--search-container-background: rgba(15, 23, 42, 0.6);
|
||||
--search-field-background: rgba(15, 23, 42, 0.8);
|
||||
@ -1413,9 +1413,12 @@ html.navi-dark {
|
||||
}
|
||||
/* 页面底色与文字:特异度 (0,2,1) > customCss 的 html[data-theme] body (0,1,1),
|
||||
因此不再依赖注入顺序(之前正是这里被打平局,导致"主页大面积没变深")。 */
|
||||
/* 只改 background-color,绝不使用 background 简写:
|
||||
用户可能配了壁纸,而壁纸是通过 background-image 设在 body 上的
|
||||
(见 conf.yml 的 NAVI-WALLPAPER 块)。用简写会把 background-image 清成 none,
|
||||
壁纸就消失了 —— 这正是上一版的问题。 */
|
||||
html.navi-dark body.navi-dark,
|
||||
html.navi-dark body {
|
||||
background: #0b1120 !important;
|
||||
background-color: #0b1120 !important;
|
||||
color: #e8eefc !important;
|
||||
}
|
||||
@ -1497,9 +1500,20 @@ html.navi-dark body .navi-dock a {
|
||||
主题变量不足以覆盖前文带 !important 的亮色规则,因此按真实 Dashy DOM
|
||||
补齐标题、分组、卡片和浮动控件。布局容器必须透明,只有圆形按钮本身着色。 */
|
||||
html.navi-dark body.navi-dark {
|
||||
background: #080f1e !important;
|
||||
background-color: #080f1e !important;
|
||||
color: #e8eefc !important;
|
||||
}
|
||||
/* 壁纸压暗:在 body 背景之上、内容之下铺一层深色遮罩(与亮色模式的白色
|
||||
遮罩同一思路),这样深色下壁纸仍然可见、只是变暗,而不是被抹掉。
|
||||
z-index:-1 + position:fixed 是本站既有的做法(门户页 .bg-decor 同款)。 */
|
||||
html.navi-dark body::before {
|
||||
content: '' !important;
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
z-index: -1 !important;
|
||||
pointer-events: none !important;
|
||||
background: rgba(6, 12, 24, .70) !important;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
html.navi-dark body #dashy > header {
|
||||
|
||||
Reference in New Issue
Block a user