/* 文件位置: source/css/custom.css */

/* BackGround URL */
[data-theme="dark"] #web_bg {

    background-image: url(https://r2.supshifu.cn/imgbackground_dark.jpg.jpg) !important; 
}
/* (可选) 修正夜间模式图片过暗的问题 */
[data-theme="dark"] #web_bg::before {
    background-color: transparent !important;
}

/* TopImage URL */
[data-theme="dark"] #page-header {
    
    background-image: url(https://r2.supshifu.cn/top_moon.jpg) !important;
}


/* =================================================================
   核心卡片样式调整：毛玻璃效果 + 柔和背景色
   ================================================================= */

/* 定义我们要操作的所有容器：
  1. #aside-content .card-widget : 侧边栏的卡片
  2. .layout > .recent-posts > .recent-post-item : 首页的文章卡片
  3. #post, #page, #archive, #tag, #category : 文章详情页、归档、标签等独立页面
*/

/* --- 日间模式 (Day Mode) --- */
#aside-content .card-widget,
#recent-posts > .recent-post-item,
.recent-post-item,
#post,
#page,
#archive,
#tag,
#category
    {
    /* rgba(255, 255, 255, 0.9) 
       前三个 255 代表纯白。
       0.9 代表不透明度 (0.0 完全透明 - 1.0 完全不透明)。
       调成 0.9 既能透出一点背景，又不会影响文字阅读。
    */
    background-color: rgba(202, 231, 242, 0.5) !important;
    
    /* 添加“毛玻璃”模糊效果，让透出来的背景不干扰文字 */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* 兼容 Safari */
    
    /* 可选：加一点圆角让卡片更柔和 */
    border-radius: 12px !important; 
}


/* --- 夜间模式 (Dark Mode) --- */
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] #post,
[data-theme="dark"] #page,
[data-theme="dark"] #archive,
[data-theme="dark"] #tag,
[data-theme="dark"] #category{
    /* rgba(35, 35, 35, 0.9)
       这里不再使用纯黑 (0,0,0)，而是使用了 (35,35,35) 这种深灰色。
       这样看起来不会死黑，视觉上更舒服（中和效果）。
       0.9 依然是透明度，你可以尝试改成 0.85 看看效果。
    */
    background-color: rgba(35, 35, 35, 0.7) !important;
    
    /* 同样的毛玻璃模糊 */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 补充：去掉卡片自带的深色字体/边框颜色干扰 (可选) */
#aside-content .card-widget, .recent-post-item {
    transition: all 0.3s ease-in-out; /* 让变化更丝滑 */
}