nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

53
header.php
View File

@@ -726,18 +726,33 @@
$card_opacity = get_option('argon_post_background_opacity', '0.7'); $card_opacity = get_option('argon_post_background_opacity', '0.7');
$card_blur = get_option('argon_card_blur', '20'); $card_blur = get_option('argon_card_blur', '20');
$card_saturate = get_option('argon_card_saturate', '180'); $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，使用推荐默认值 // 如果透明度为空或为1，使用推荐默认值
if ($card_opacity == '' || $card_opacity == '1') { if ($card_opacity == '' || $card_opacity == '1') {
$card_opacity = '0.7'; $card_opacity = '0.7';
} }
if ($bg_opacity == '') {
$bg_opacity = '1';
}
?> ?>
<style id="theme_card_effect_css"> <style id="theme_card_effect_css">
:root { :root {
--bg-opacity: <?php echo $bg_opacity; ?>;
--card-opacity: <?php echo $card_opacity; ?>; --card-opacity: <?php echo $card_opacity; ?>;
--card-blur: <?php echo $card_blur; ?>px; --card-blur: <?php echo $card_blur; ?>px;
--card-saturate: <?php echo $card_saturate; ?>%; --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> </style>
@@ -1168,11 +1183,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: var(--page-background-opacity);
opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
transition: opacity .5s ease;
} }
html.darkmode #content:before{ html.darkmode #content:before{
@@ -1217,7 +1228,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
html.darkmode #content:after { 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, .post-navigation.card,
.related-posts.card, .related-posts.card,
.card.bg-white { .card.bg-white {
background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_inline; ?>) !important; background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
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(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
background-clip: padding-box; background-clip: padding-box;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
@@ -1264,13 +1275,13 @@ if ($card_opacity == '' || $card_opacity == '1') {
html.darkmode .post-navigation.card, html.darkmode .post-navigation.card,
html.darkmode .related-posts.card, html.darkmode .related-posts.card,
html.darkmode .card.bg-white { 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 .card,
#leftbar_part1, #leftbar_part1,
#leftbar_part2 { #leftbar_part2 {
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(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
} }
</style> </style>
@@ -1298,9 +1309,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
.post-navigation.card, .post-navigation.card,
.related-posts.card, .related-posts.card,
.card.bg-white { .card.bg-white {
background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_standalone; ?>) !important; background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
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(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
background-clip: padding-box; background-clip: padding-box;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
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 .post-navigation.card,
html.darkmode .related-posts.card, html.darkmode .related-posts.card,
html.darkmode .card.bg-white { 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 .card,
#leftbar_part1, #leftbar_part1,
#leftbar_part2 { #leftbar_part2 {
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(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
} }
</style> </style>
<?php endif; ?> <?php endif; ?>
@@ -1344,9 +1355,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
top: 0; 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; display: block;
@@ -1356,7 +1367,7 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
.banner-title { .banner-title {
text-shadow: 0 5px 15px rgba(0, 0, 0, .2); text-shadow: var(--banner-title-shadow);
} }

7
style.css
View File

@@ -227,13 +227,6 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html
--state-focus-opacity: 0.12; --state-focus-opacity: 0.12;
--state-pressed-opacity: 0.12; --state-pressed-opacity: 0.12;
--state-dragged-opacity: 0.16; --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 { html.darkmode body {