fix: 从后台设置读取透明度和毛玻璃效果参数

- 在 header.php 中读取后台设置的透明度和毛玻璃参数
- 输出 CSS 变量:--bg-opacity、--card-opacity、--card-blur、--card-saturate、--toolbar-blur
- 顶栏模糊度自动计算为卡片模糊度的 60%
- 移除 style.css 中的硬编码默认值,完全由后台设置控制
- 确保毛玻璃效果(backdrop-filter)正常工作
This commit is contained in:
2026-01-27 23:43:55 +08:00
parent 731f573b2c
commit a12af3c4df
2 changed files with 32 additions and 28 deletions

View File

@@ -726,18 +726,33 @@
$card_opacity = get_option('argon_post_background_opacity', '0.7');
$card_blur = get_option('argon_card_blur', '20');
$card_saturate = get_option('argon_card_saturate', '180');
$bg_opacity = get_option('argon_page_background_opacity', '1');
// 顶栏模糊度为卡片模糊度的 60%12px / 20px = 0.6
$toolbar_blur = round($card_blur * 0.6);
// 如果透明度为空或为1使用推荐默认值
if ($card_opacity == '' || $card_opacity == '1') {
$card_opacity = '0.7';
}
if ($bg_opacity == '') {
$bg_opacity = '1';
}
?>
<style id="theme_card_effect_css">
:root {
--bg-opacity: <?php echo $bg_opacity; ?>;
--card-opacity: <?php echo $card_opacity; ?>;
--card-blur: <?php echo $card_blur; ?>px;
--card-saturate: <?php echo $card_saturate; ?>%;
--toolbar-blur: <?php echo $toolbar_blur; ?>px;
--page-background-opacity: <?php echo $bg_opacity; ?>;
--banner-mask-height: 120px;
--banner-mask-opacity-top: 0.25;
--banner-mask-opacity-mid: 0.15;
--banner-mask-stop-mid: 35%;
--banner-title-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}
</style>
@@ -1168,11 +1183,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
background-size: cover;
background-repeat: no-repeat;
opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
transition: opacity .5s ease;
opacity: var(--page-background-opacity);
}
html.darkmode #content:before{
@@ -1217,7 +1228,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
html.darkmode #content:after {
opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
opacity: var(--page-background-opacity);
}
@@ -1246,9 +1257,9 @@ if ($card_opacity == '' || $card_opacity == '1') {
.post-navigation.card,
.related-posts.card,
.card.bg-white {
background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_inline; ?>) !important;
backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
background-clip: padding-box;
-webkit-transform: translateZ(0);
transform: translateZ(0);
@@ -1264,13 +1275,13 @@ if ($card_opacity == '' || $card_opacity == '1') {
html.darkmode .post-navigation.card,
html.darkmode .related-posts.card,
html.darkmode .card.bg-white {
background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_inline; ?>) !important;
background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
}
#leftbar .card,
#leftbar_part1,
#leftbar_part2 {
backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
}
</style>
@@ -1298,9 +1309,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
.post-navigation.card,
.related-posts.card,
.card.bg-white {
background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_standalone; ?>) !important;
backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
background-clip: padding-box;
-webkit-transform: translateZ(0);
transform: translateZ(0);
@@ -1316,13 +1327,13 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
html.darkmode .post-navigation.card,
html.darkmode .related-posts.card,
html.darkmode .card.bg-white {
background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_standalone; ?>) !important;
background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
}
#leftbar .card,
#leftbar_part1,
#leftbar_part2 {
backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
}
</style>
<?php endif; ?>
@@ -1344,9 +1355,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
top: 0;
height: 120px;
height: var(--banner-mask-height);
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 100%);
background: linear-gradient(180deg, rgba(0,0,0,var(--banner-mask-opacity-top)) 0%, rgba(0,0,0,var(--banner-mask-opacity-mid)) var(--banner-mask-stop-mid), rgba(0,0,0,0) 100%);
display: block;
@@ -1356,7 +1367,7 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
.banner-title {
text-shadow: 0 5px 15px rgba(0, 0, 0, .2);
text-shadow: var(--banner-title-shadow);
}

View File

@@ -227,13 +227,6 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html
--state-focus-opacity: 0.12;
--state-pressed-opacity: 0.12;
--state-dragged-opacity: 0.16;
/* 透明度与毛玻璃效果控<E69E9C>?*/
--bg-opacity: 0.90;
--card-opacity: 0.60;
--card-blur: 20px;
--card-saturate: 180%;
--toolbar-blur: 12px;
}
html.darkmode body {