nageyqma·git

note

HTTPS https://git.nageyqma.icu/nageyqma/note.git SSH git@git.nageyqma.icu:nageyqma/note.git

HTTPS 链接可直接 git clone；推送代码请使用 SSH。

1.7 KB · 45 行raw
123456789101112131415161718192021222324252627282930313233343536373839404142434445
/* ============================================================
 * 笔记站头部毛玻璃改造 —— 与主站风格统一
 * PaperMod 会自动加载 assets/css/extended/ 下的全部样式文件。
 * 语义：半透明底色 + backdrop-filter；亮暗两套取色与主站一致；
 *      暗色选择器与主题一致（<html data-theme="dark">）；
 *      不支持 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);
}

/* 暗色（主题在 <html> 上设置 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); }
}