fix: 从后台设置读取透明度和毛玻璃效果参数
- 在 header.php 中读取后台设置的透明度和毛玻璃参数 - 输出 CSS 变量:--bg-opacity、--card-opacity、--card-blur、--card-saturate、--toolbar-blur - 顶栏模糊度自动计算为卡片模糊度的 60% - 移除 style.css 中的硬编码默认值,完全由后台设置控制 - 确保毛玻璃效果(backdrop-filter)正常工作
This commit is contained in:
53
header.php
53
header.php
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user