95 lines
3.1 KiB
CSS
95 lines
3.1 KiB
CSS
/* ==========================================================
|
||
自定义博客的美化样式 (Custom Style for Butterfly)
|
||
主要用于配合背景图片，实现内容容器的半透明毛玻璃效果
|
||
========================================================== */
|
||
|
||
/* 1. 整体布局页面背景透明，让 body 背景图透射出来 */
|
||
#body-wrap {
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* 2. 主卡片容器（文章列表、内容页）的半透明毛玻璃效果 */
|
||
.layout > div:first-child:not(.recent-posts) {
|
||
background: rgba(255, 255, 255, 0.85) !important;
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
|
||
}
|
||
|
||
/* 首页文章卡片 */
|
||
.recent-posts > .recent-post-item {
|
||
background: rgba(255, 255, 255, 0.85) !important;
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
|
||
}
|
||
|
||
/* 3. 侧边栏所有块状元素（名片、公告、分类等）透明毛玻璃效果 */
|
||
#aside-content .card-widget {
|
||
background: rgba(255, 255, 255, 0.85) !important;
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
|
||
}
|
||
|
||
/* 4. 分页栏容器透明处理 */
|
||
#pagination {
|
||
background: transparent !important;
|
||
}
|
||
|
||
#pagination .page-number.current {
|
||
background: var(--btn-bg) !important;
|
||
}
|
||
|
||
/* 5. 顶层导航栏（随屏幕滚动效果调整） */
|
||
#page-header.nav-fixed #nav {
|
||
background: rgba(255, 255, 255, 0.8) !important;
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0.6);
|
||
}
|
||
|
||
/* 6. 深色模式下的适配 (Dark mode compatibility) */
|
||
[data-theme="dark"] .layout > div:first-child:not(.recent-posts),
|
||
[data-theme="dark"] .recent-posts > .recent-post-item,
|
||
[data-theme="dark"] #aside-content .card-widget {
|
||
background: rgba(30, 30, 30, 0.8) !important; /* 深灰色半透明 */
|
||
box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
[data-theme="dark"] #page-header.nav-fixed #nav {
|
||
background: rgba(18, 18, 18, 0.8) !important;
|
||
box-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* 隐藏不需要的线条组件 (如果配置中开启了 canvas_nest 觉得乱可以强行在此隐藏) */
|
||
/* canvas {
|
||
opacity: 0.3 !important;
|
||
} */
|
||
|
||
/* ==========================================================
|
||
LQIP 图片懒加载渐入动效
|
||
使用 lazysizes 的 class 状态控制，确保加载后图片清晰还原
|
||
========================================================== */
|
||
|
||
/* 加载中：模糊 + 半透明（lazysizes 会自动添加这些 class）*/
|
||
img.lazyload,
|
||
img.lazyloading {
|
||
filter: blur(10px);
|
||
opacity: 0.6;
|
||
transition: filter 0.45s ease, opacity 0.45s ease;
|
||
will-change: filter, opacity;
|
||
}
|
||
|
||
/* 加载完成：完全清晰（lazysizes 添加 lazyloaded class 后生效）*/
|
||
img.lazyloaded {
|
||
filter: blur(0) !important;
|
||
opacity: 1 !important;
|
||
transition: filter 0.45s ease, opacity 0.45s ease;
|
||
}
|
||
|
||
|