style(theme): 暗色使用 Alright 同款深色背景
- 新增 site-bg-dark.jpg(Alright 演示站深色背景) - 明暗背景拆成两层交叉淡入,切换时不再露出单层底色 - 保留 65vh 高度与底部渐隐
This commit is contained in:
+26
-10
@@ -14,15 +14,27 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部背景图:固定 65vh,底部渐隐到页面底色 */
|
/* 顶部背景:固定 65vh,底部渐隐到页面底色;明暗两层交叉淡入 */
|
||||||
.site-background {
|
.site-background {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0 0 auto;
|
inset: 0 0 auto;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
height: 65vh;
|
height: 65vh;
|
||||||
background: url('./assets/site-bg.jpg') center top / cover no-repeat;
|
background-position: center top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 160ms var(--su-ease-in-out) 160ms;
|
opacity: 1;
|
||||||
|
transition: opacity 160ms var(--su-ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-background-light {
|
||||||
|
background-image: url('./assets/site-bg.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-background-dark {
|
||||||
|
background-image: url('./assets/site-bg-dark.jpg');
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-background::after {
|
.site-background::after {
|
||||||
@@ -35,10 +47,12 @@
|
|||||||
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
|
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 这张背景图是浅色渐变图,深色下留着会糊成一层脏灰;切深色时立刻隐藏,避免半黑半白 */
|
[data-scheme='dark'] .site-background-light {
|
||||||
[data-scheme='dark'] .site-background {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0s;
|
}
|
||||||
|
|
||||||
|
[data-scheme='dark'] .site-background-dark {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 页头 ---------- */
|
/* ---------- 页头 ---------- */
|
||||||
@@ -1355,11 +1369,13 @@ html.theme-transition *::after {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 背景图不跟着全局过渡:切深色立即消失,切浅色等底色过渡完再淡入 */
|
/* 背景图不跟着全局颜色过渡,单独做明暗交叉淡入 */
|
||||||
html.theme-transition .site-background {
|
html.theme-transition .site-background {
|
||||||
transition: opacity 160ms var(--su-ease-in-out) 160ms !important;
|
transition: opacity 160ms var(--su-ease-in-out) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.theme-transition[data-scheme='dark'] .site-background {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
transition: opacity 0s !important;
|
html.theme-transition .site-background {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -644,7 +644,8 @@ export default function AppNext() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="site-background" aria-hidden="true" />
|
<div className="site-background site-background-light" aria-hidden="true" />
|
||||||
|
<div className="site-background site-background-dark" aria-hidden="true" />
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
contained
|
contained
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Reference in New Issue
Block a user