Files
wordpress-theme-aksrt/assets/css/frontend/theme-background.css
T

73 lines
2.1 KiB
CSS

/**
* AKSRT Theme Background System
*
* 全局背景图、夜间背景图、页面背景色/背景图。
* 所有选择器均带 aksrt- 命名空间。
*/
/* ========== 全局背景 ========== */
.aksrt-bg-body {
background-color: var(--aksrt-bg-color, transparent);
background-image: var(--aksrt-bg-image, none);
background-size: var(--aksrt-bg-size, cover);
background-position: var(--aksrt-bg-position, center center);
background-repeat: var(--aksrt-bg-repeat, no-repeat);
background-attachment: var(--aksrt-bg-attachment, fixed);
}
/* ========== 夜间模式背景 ========== */
.aksrt-bg-dark {
background-color: var(--aksrt-bg-dark-color, transparent);
background-image: var(--aksrt-bg-dark-image, none);
}
/* ========== 页面级背景 ========== */
.aksrt-bg-page {
background-color: var(--aksrt-page-bg-color, transparent);
background-image: var(--aksrt-page-bg-image, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* ========== 模块级背景 ========== */
.aksrt-bg-module {
background-color: var(--aksrt-module-bg-color, transparent);
background-image: var(--aksrt-module-bg-image, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* ========== 背景遮罩层(提升文字可读性)========== */
.aksrt-bg-overlay {
position: relative;
}
.aksrt-bg-overlay::before {
content: '';
position: absolute;
inset: 0;
background: var(--aksrt-bg-overlay-color, rgba(0, 0, 0, 0.3));
pointer-events: none;
z-index: 0;
}
.aksrt-bg-overlay > * {
position: relative;
z-index: 1;
}
/* ========== 暗色模式自动切换 ========== */
@media (prefers-color-scheme: dark) {
:root:not(.aksrt-light-mode) .aksrt-bg-body {
background-color: var(--aksrt-bg-dark-color, var(--aksrt-bg-color, transparent));
background-image: var(--aksrt-bg-dark-image, var(--aksrt-bg-image, none));
}
}
html.aksrt-dark-mode .aksrt-bg-body {
background-color: var(--aksrt-bg-dark-color, var(--aksrt-bg-color, transparent));
background-image: var(--aksrt-bg-dark-image, var(--aksrt-bg-image, none));
}