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

feat: 卡片效果使用站长自定义设置，统一全局样式

Browse Source 
- 新增毛玻璃饱和度设置 (argon_card_saturate)，默认 180%
- 更新默认值为最优设置：
  - 卡片透明度: 0.7 (原 1)
  - 毛玻璃模糊: 20px (原 8px)
  - 毛玻璃饱和度: 180%
- CSS 使用变量 --card-opacity, --card-blur, --card-saturate
- 玻璃风格样式改用 CSS 变量，跟随站长设置
- 所有页面(首页/文章页/页面模板)统一应用相同设置
- 设置页预览支持饱和度实时预览
- 暗色模式卡片背景色统一为 rgba(66,66,66,opacity)
This commit is contained in:
nanhaoluo
2026-01-12 10:03:42 +08:00
parent 05820ba105
commit 21bf48d34e
3 changed files with 100 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
header.php
View File

@@ -614,6 +614,26 @@
</style> </style>
<?php
// 卡片毛玻璃效果设置
$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');
// 如果透明度为空或为1，使用推荐默认值
if ($card_opacity == '' || $card_opacity == '1') {
$card_opacity = '0.7';
}
?>
<style id="theme_card_effect_css">
:root {
--card-opacity: <?php echo $card_opacity; ?>;
--card-blur: <?php echo $card_blur; ?>px;
--card-saturate: <?php echo $card_saturate; ?>%;
}
</style>
<?php <?php
// 动画效果设置 // 动画效果设置
$animation_style = get_option('argon_animation_style', 'material3'); $animation_style = get_option('argon_animation_style', 'material3');
@@ -1165,17 +1185,16 @@ if ($animation_style == 'apple') {
<?php } ?> <?php } ?>
/* 文章背景透明度 - 包含文章和评论区 */ /* 卡片透明度和毛玻璃效果 - 使用 CSS 变量 */
<?php <?php
$post_bg_opacity = get_option('argon_post_background_opacity'); $post_bg_opacity_inline = get_option('argon_post_background_opacity', '0.7');
$card_blur = intval(get_option('argon_card_blur', '8')); $card_blur_inline = intval(get_option('argon_card_blur', '20'));
$card_saturate_inline = intval(get_option('argon_card_saturate', '180'));
// 如果开启了毛玻璃但没设置透明度，自动应用推荐透明度 // 如果透明度为空或为1，使用推荐默认值
if ($card_blur > 0 && ($post_bg_opacity == '' || $post_bg_opacity == '1')) { if ($post_bg_opacity_inline == '' || $post_bg_opacity_inline == '1') {
$post_bg_opacity = max(0.75, 0.92 - $card_blur * 0.008); $post_bg_opacity_inline = '0.7';
} }
if ($post_bg_opacity != '' && $post_bg_opacity != '1') {
?> ?>
article.post.card, article.post.card,
#comments.card, #comments.card,
@@ -1183,7 +1202,9 @@ if ($animation_style == 'apple') {
.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; ?>) !important; 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; ?>%);
} }
html.darkmode article.post.card, html.darkmode article.post.card,
html.darkmode #comments.card, html.darkmode #comments.card,
@@ -1191,49 +1212,34 @@ if ($animation_style == 'apple') {
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(23, 25, 35, <?php echo $post_bg_opacity; ?>) !important; background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_inline; ?>) !important;
} }
<?php } ?>
/* 卡片毛玻璃效果 */
<?php
if ($card_blur > 0) {
$blur_value = $card_blur . 'px';
?>
article.post.card,
#comments.card,
#post_comment.card,
.post-navigation.card,
.related-posts.card,
#leftbar .card, #leftbar .card,
#leftbar_part1, #leftbar_part1,
#leftbar_part2, #leftbar_part2 {
.card.bg-white { backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
backdrop-filter: blur(<?php echo $blur_value; ?>) saturate(120%); -webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
-webkit-backdrop-filter: blur(<?php echo $blur_value; ?>) saturate(120%);
} }
<?php } ?>
</style> </style>
<?php } ?> <?php } ?>
<!-- 毛玻璃效果 - 独立于背景图片设置 --> <!-- 毛玻璃效果 - 独立于背景图片设置（无背景图时也生效） -->
<?php <?php
$card_blur_standalone = intval(get_option('argon_card_blur', '8')); $card_blur_standalone = intval(get_option('argon_card_blur', '20'));
$post_bg_opacity_standalone = get_option('argon_post_background_opacity'); $card_saturate_standalone = intval(get_option('argon_card_saturate', '180'));
$post_bg_opacity_standalone = get_option('argon_post_background_opacity', '0.7');
// 只有在没有背景图片时才输出毛玻璃样式（有背景图片时上面已经输出了） // 只有在没有背景图片时才输出毛玻璃样式（有背景图片时上面已经输出了）
if (apply_filters('argon_page_background_url', get_option('argon_page_background_url')) == '' && $card_blur_standalone > 0): if (apply_filters('argon_page_background_url', get_option('argon_page_background_url')) == ''):
// 如果开启了毛玻璃但没设置透明度，自动应用推荐透明度 // 如果透明度为空或为1，使用推荐默认值
if ($post_bg_opacity_standalone == '' || $post_bg_opacity_standalone == '1') { if ($post_bg_opacity_standalone == '' || $post_bg_opacity_standalone == '1') {
$post_bg_opacity_standalone = max(0.75, 0.92 - $card_blur_standalone * 0.008); $post_bg_opacity_standalone = '0.7';
} }
$blur_value_standalone = $card_blur_standalone . 'px';
?> ?>
<style id="theme_blur_css"> <style id="theme_blur_css">
/* 文章背景透明度 */ /* 卡片透明度和毛玻璃效果 */
<?php if ($post_bg_opacity_standalone != '' && $post_bg_opacity_standalone != '1'): ?>
article.post.card, article.post.card,
#comments.card, #comments.card,
#post_comment.card, #post_comment.card,
@@ -1241,6 +1247,8 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
.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, <?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; ?>%);
} }
html.darkmode article.post.card, html.darkmode article.post.card,
html.darkmode #comments.card, html.darkmode #comments.card,
@@ -1248,28 +1256,18 @@ 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(23, 25, 35, <?php echo $post_bg_opacity_standalone; ?>) !important; background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_standalone; ?>) !important;
} }
<?php endif; ?>
/* 卡片毛玻璃效果 */
article.post.card,
#comments.card,
#post_comment.card,
.post-navigation.card,
.related-posts.card,
#leftbar .card, #leftbar .card,
#leftbar_part1, #leftbar_part1,
#leftbar_part2, #leftbar_part2 {
.card.bg-white { backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
backdrop-filter: blur(<?php echo $blur_value_standalone; ?>) saturate(120%); -webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
-webkit-backdrop-filter: blur(<?php echo $blur_value_standalone; ?>) saturate(120%);
} }
</style> </style>
<?php endif; ?> <?php endif; ?>
<?php if (get_option('argon_show_toolbar_mask') == 'true') { ?> <?php if (get_option('argon_show_toolbar_mask') == 'true') { ?>
<style> <style>

46
settings.php
View File

@@ -1226,20 +1226,30 @@ function themeoptions_page(){
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('卡片透明度', 'argon');?></label> <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('卡片透明度', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '1' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;"> <input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '0.7' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '1.00' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span> <span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '0.70' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span>
</div> </div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度', 'argon');?></p> <p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度，推荐 0.7', 'argon');?></p>
</div> </div>
<!-- 毛玻璃模糊 --> <!-- 毛玻璃模糊 -->
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 20px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃模糊', 'argon');?></label> <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃模糊', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_card_blur" min="0" max="20" step="1" value="<?php echo (get_option('argon_card_blur', '8')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;"> <input type="range" name="argon_card_blur" min="0" max="30" step="1" value="<?php echo (get_option('argon_card_blur', '20')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '8')); ?>px</span> <span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '20')); ?>px</span>
</div> </div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 8px', 'argon');?></p> <p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 20px', 'argon');?></p>
</div>
<!-- 毛玻璃饱和度 -->
<div style="margin-bottom: 10px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃饱和度', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_card_saturate" min="100" max="250" step="10" value="<?php echo (get_option('argon_card_saturate', '180')); ?>" id="argon_card_saturate_slider" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_card_saturate_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_saturate', '180')); ?>%</span>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('毛玻璃背景的色彩饱和度，推荐 180%', 'argon');?></p>
</div> </div>
</div> </div>
@@ -1252,7 +1262,7 @@ function themeoptions_page(){
<img id="effect_preview_bg" src="<?php echo esc_url($page_bg_url); ?>" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: <?php echo get_option('argon_page_background_opacity', '1'); ?>;"> <img id="effect_preview_bg" src="<?php echo esc_url($page_bg_url); ?>" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: <?php echo get_option('argon_page_background_opacity', '1'); ?>;">
<?php } ?> <?php } ?>
<div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;"> <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
<div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '1'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);"> <div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '0.7'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);">
<span style="font-size: 12px; font-weight: 500; color: #333;"><?php _e('卡片效果', 'argon'); ?></span> <span style="font-size: 12px; font-weight: 500; color: #333;"><?php _e('卡片效果', 'argon'); ?></span>
<span id="blur_preview_info" style="font-size: 10px; color: #666; margin-top: 4px;"></span> <span id="blur_preview_info" style="font-size: 10px; color: #666; margin-top: 4px;"></span>
</div> </div>
@@ -1272,6 +1282,8 @@ function themeoptions_page(){
var postBgValue = document.getElementById('argon_post_bg_opacity_value'); var postBgValue = document.getElementById('argon_post_bg_opacity_value');
var blurSlider = document.getElementById('argon_card_blur_slider'); var blurSlider = document.getElementById('argon_card_blur_slider');
var blurValue = document.getElementById('argon_card_blur_value'); var blurValue = document.getElementById('argon_card_blur_value');
var saturateSlider = document.getElementById('argon_card_saturate_slider');
var saturateValue = document.getElementById('argon_card_saturate_value');
var previewBg = document.getElementById('effect_preview_bg'); var previewBg = document.getElementById('effect_preview_bg');
var previewCard = document.getElementById('blur_preview_card'); var previewCard = document.getElementById('blur_preview_card');
@@ -1279,16 +1291,17 @@ function themeoptions_page(){
function updatePreview() { function updatePreview() {
var pageBgOpacity = pageBgSlider ? pageBgSlider.value : 1; var pageBgOpacity = pageBgSlider ? pageBgSlider.value : 1;
var postBgOpacity = postBgSlider ? postBgSlider.value : 1; var postBgOpacity = postBgSlider ? postBgSlider.value : 0.7;
var blur = blurSlider ? blurSlider.value : 8; var blur = blurSlider ? blurSlider.value : 20;
var saturate = saturateSlider ? saturateSlider.value : 180;
if (previewBg) { if (previewBg) {
previewBg.style.opacity = pageBgOpacity; previewBg.style.opacity = pageBgOpacity;
} }
if (previewCard) { if (previewCard) {
previewCard.style.background = 'rgba(255,255,255,' + postBgOpacity + ')'; previewCard.style.background = 'rgba(255,255,255,' + postBgOpacity + ')';
previewCard.style.backdropFilter = 'blur(' + blur + 'px)'; previewCard.style.backdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px)'; previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
} }
if (previewInfo) { if (previewInfo) {
previewInfo.textContent = '<?php _e("透明度", "argon"); ?> ' + parseFloat(postBgOpacity).toFixed(2) + ' / <?php _e("模糊", "argon"); ?> ' + blur + 'px'; previewInfo.textContent = '<?php _e("透明度", "argon"); ?> ' + parseFloat(postBgOpacity).toFixed(2) + ' / <?php _e("模糊", "argon"); ?> ' + blur + 'px';
@@ -1316,6 +1329,13 @@ function themeoptions_page(){
}); });
} }
if (saturateSlider) {
saturateSlider.addEventListener('input', function() {
saturateValue.textContent = this.value + '%';
updatePreview();
});
}
updatePreview(); updatePreview();
})(); })();
</script> </script>
@@ -5234,6 +5254,8 @@ function argon_update_themeoptions(){
argon_update_option('argon_card_blur'); argon_update_option('argon_card_blur');
argon_update_option('argon_card_saturate');
argon_update_option('argon_page_background_banner_style'); argon_update_option('argon_page_background_banner_style');
argon_update_option('argon_hide_name_email_site_input'); argon_update_option('argon_hide_name_email_site_input');

35
style.css
View File

@@ -15345,31 +15345,32 @@ html.darkmode .segmented-control-item:hover {
/* ======================================== /* ========================================
主题变体 - 玻璃拟态 (Glassmorphism) 主题变体 - 玻璃拟态 (Glassmorphism)
使用 CSS 变量，由站长设置控制
======================================== */ ======================================== */
html.style-glass .card, html.style-glass .card,
html.style-glass #fabtn_blog_settings_popup { html.style-glass #fabtn_blog_settings_popup {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, var(--card-opacity, 0.7));
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
} }
html.style-glass .card:hover { html.style-glass .card:hover {
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1));
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
} }
html.darkmode.style-glass .card, html.darkmode.style-glass .card,
html.darkmode.style-glass #fabtn_blog_settings_popup { html.darkmode.style-glass #fabtn_blog_settings_popup {
background: rgba(66, 66, 66, 0.7); background: rgba(66, 66, 66, var(--card-opacity, 0.7));
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
} }
html.darkmode.style-glass .card:hover { html.darkmode.style-glass .card:hover {
background: rgba(66, 66, 66, 0.8); background: rgba(66, 66, 66, calc(var(--card-opacity, 0.7) + 0.1));
} }
/* ======================================== /* ========================================
@@ -15441,17 +15442,17 @@ html.style-neumorphism #fabtn_blog_settings_popup {
/* ========== 玻璃风格下文章/页面卡片样式统一 ========== */ /* ========== 玻璃风格下文章/页面卡片样式统一 ========== */
/* 确保文章页卡片与首页卡片样式一致，继承全局 .card 样式 */ /* 使用 CSS 变量，确保与首页卡片一致 */
html.style-glass article.post.post-full.card { html.style-glass article.post.post-full.card {
background: rgba(255, 255, 255, 0.7) !important; background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
} }
html.darkmode.style-glass article.post.post-full.card { html.darkmode.style-glass article.post.post-full.card {
background: rgba(66, 66, 66, 0.7) !important; background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
} }
@@ -16130,15 +16131,15 @@ html.darkmode.style-glass article.post.post-full.card {
/* ========== 移动端玻璃风格文章卡片 ========== */ /* ========== 移动端玻璃风格文章卡片 ========== */
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
html.style-glass article.post.post-full.card { html.style-glass article.post.post-full.card {
background: rgba(255, 255, 255, 0.7) !important; background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
} }
html.darkmode.style-glass article.post.post-full.card { html.darkmode.style-glass article.post.post-full.card {
background: rgba(66, 66, 66, 0.7) !important; background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
} }
} }