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

35
style.css
View File

@@ -15345,31 +15345,32 @@ html.darkmode .segmented-control-item:hover {
/* ========================================
主题变体 - 玻璃拟态 (Glassmorphism)
使用 CSS 变量，由站长设置控制
======================================== */
html.style-glass .card,
html.style-glass #fabtn_blog_settings_popup {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(255, 255, 255, var(--card-opacity, 0.7));
backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
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);
}
html.darkmode.style-glass .card,
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);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
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 {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
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);
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) {
html.style-glass article.post.post-full.card {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
}
html.darkmode.style-glass article.post.post-full.card {
background: rgba(66, 66, 66, 0.7) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important;
backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
-webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
}
}