/* ============================================================ * 笔记站头部毛玻璃改造 —— 与主站风格统一 * PaperMod 会自动加载 assets/css/extended/ 下的全部样式文件。 * 语义：半透明底色 + backdrop-filter；亮暗两套取色与主站一致； * 暗色选择器与主题一致（）； * 不支持 backdrop-filter 时用 @supports 回退到高不透明度纯色。 * ============================================================ */ /* 头部吸顶 + 毛玻璃 */ .header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); } /* 暗色（主题在 上设置 data-theme="dark"） */ [data-theme='dark'] .header { background: rgba(15, 27, 46, 0.55); border-bottom-color: rgba(146, 176, 214, 0.32); } /* 回退：浏览器不支持毛玻璃时用高不透明度纯色，保证可读 */ @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .header { background: rgba(255, 255, 255, 0.96); } [data-theme='dark'] .header { background: rgba(13, 23, 40, 0.97); } } /* 页脚同款处理，保持整体观感一致 */ .footer { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); } [data-theme='dark'] .footer { background: rgba(15, 27, 46, 0.55); } @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .footer { background: rgba(255, 255, 255, 0.96); } [data-theme='dark'] .footer { background: rgba(13, 23, 40, 0.97); } }