为openlist配置液态玻璃效果

# 废话不多说，直接先上效果

# 主要说明

包含了视频背景与图片背景
含有一些交互效果

使用该样式会隐藏页脚内容，这是不被openlist所推荐的，请自选选择是否删除对应片段，另外由于页脚被隐藏，所以可通过双击logo去启动管理页面

# 相关代码

# 自定头部内容

可将下方代码直接放入自定义头部中
也可以通过以下链接快速引入 https://res.yaojiu.org/common/openlist-header.css

<style type="text/css">
body {
  /* 手机端背景图 默认为bing每日图*/
  --mobile-background-image: url(https://angustar.com/api/bing);
  /* 电脑端背景图 默认为bing每日图*/
  --desktop-background-image: url(https://angustar.com/api/bing);
}

/* 链接与选中优化 */
.hope-ui-dark .markdown-body a {
  color: var(--hope-colors-loContrast) !important;
  transition: color 0.3s ease-in-out;
}
.hope-ui-dark .markdown-body a:hover {
  color: var(--hope-colors-accent8) !important;
}
html ::selection {
  background-color: var(--hope-colors-accent8);
  color: var(--hope-colors-loContrast);
}

/* 背景设置 */
body {
  background-image: var(--desktop-background-image) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
 transition: background-image 0.6s ease-in-out;
}
@media screen and (max-width: 960px) {
 body {
    background-image: var(--mobile-background-image) !important;
  }
}
/* 视频背景 */
.video-background {
   position: fixed;
   top: 0px;
   z-index:-1;
   width: 100%;
   height: 100%;
   object-fit: cover;
   min-height: 100vh;
   display: block;
}

/* 视频容器液态玻璃背景支持 */
.video-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  overflow: hidden;
}
.video-container video {
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: brightness(0.9) contrast(1.1);
}

/* 液态玻璃主体层优化 */
.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-ikaMhsQ-css,
.hope-c-PJLV-iiuDLME-css,
.hope-c-PJLV-ikSuVsl-css {
  background: none !important;
}

/* 卡片容器更柔和边缘与微光 */
.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-iiuDLME-css,
.hope-c-PJLV-ikSuVsl-css {
  border-radius: var(--hope-radii-full);
  overflow: hidden;
  padding: var(--hope-space-1) var(--hope-space-2);
  backdrop-filter: blur(25px) saturate(1.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.3),
    inset -1px -1px 2px rgba(255,255,255,0.3),
    0 8px 24px rgba(0,0,0,0.25);
  transition: all 0.3s ease-in-out;
}
.hope-c-PJLV-idaeksS-css:hover ,
.hope-c-PJLV-iiuDLME-css:hover,
.hope-c-PJLV-ikSuVsl-css:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.4),
    0 10px 28px rgba(0,0,0,0.3);
}

.hope-c-khZXrc {
  display: inline-block !important;
}
.hope-c-cPYwgm {
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}
.hope-c-iIOWzi {
  padding: 0 var(--hope-space-1) !important;
}

/* 全局液态玻璃层 */
.hope-c-PJLV-igScBhH-css,
.hope-c-hOYTCS,
.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-ieTGfmR-css,
.header-right.hope-stack>div,
.hope-c-PJLV-ijgzmFG-css,
.hope-c-PJLV-ikJQsXT-css,
.hope-c-zbPwS,
.hope-c-XJURY,
.hope-c-ivMHWx-fbcPgu-cv,
.hope-c-ivMHWx-dvmlqS-cv,
.hope-c-ivMHWx-dMllzy-cv,
.hope-c-cFbQhW,
.hope-c-ivMHWx-knrFJ-cv,
.hope-c-ivMHWx-gHYUvy-cv,
.hope-c-PJLV-iigjoxS-css,
.solid-contextmenu,
.hope-c-PJLV-idusLCn-css,
.hope-c-ivMHWx-eHkSxq-cv,
.hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-c-ivMHWx:disabled,
.hope-c-mHASU-byiOue-variant-filled,
.hope-c-mHASU-kukbfD-variant-outline,
.hope-c-PJLV-ihVEsOa-css,
.hope-c-gIqhpo,
.hope-c-PJLV-idMNcPR-css,
.hope-c-PJLV-ieGWMbI-css,
.hope-c-PJLV-iZZmce-css,
.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-iubUra-css,
.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css,
.hope-c-cIFneQ,
.hope-c-PJLV-iiuDLME-css,
.hope-c-PJLV-ikSuVsl-css {
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset -1px -1px 1px rgba(255,255,255,0.2),
    0 4px 20px rgba(0,0,0,0.25) !important;
  cursor: grab;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  pointer-events: auto;
  border: none !important;
  transition: all 0.3s ease-in-out;
}
.hope-c-PJLV-iiuDLME-css {
 cursor: auto;
}

/* 顶栏按钮统一柔光 */
.header-right.hope-stack>div {
  height: var(--hope-sizes-8);
  border: none !important;
  padding: var(--hope-space-1) var(--hope-space-2) !important;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.3);
  border-radius: var(--hope-radii-full);
  transition: background 0.3s ease-in-out;
}
.header-right.hope-stack>div:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 输入框与代码块液态优化 */
.hope-c-PJLV-ijSQbqe-css {
  background-color: rgba(0,0,0,0.3) !important;
  border-color: rgba(234,234,234,0.3) !important;
}
.hope-c-PJLV-iciJSBF-css {
  opacity: 0.6;
}
.markdown-body .highlight pre,
.markdown-body pre {
  background-color: rgba(0,0,0,0.35) !important; 
  backdrop-filter: blur(10px);
  border-radius: var(--hope-radii-lg);
}

/* 活动按钮反馈 */
.hope-c-gUeVCo[data-active],
.hope-c-kRwRnM-gSazcJ-colorScheme-neutral[data-active] {
  background-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* 模态与滚动容器 */
.hope-c-ctSAUo,
.hope-c-bICGYT-dWksIc-scrollBehavior-outside {
  background-color: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px);
}

/* 隐藏页脚内容 */
 .footer {
 display: none !important;
 }

.hope-c-PJLV-ihWgyFw-css,
.hope-c-PJLV-ibiABng-css {
  display: none !important;
}
/* 如果不隐藏页脚请删除此部分内容 */
</style>

# 自定义内容

可将下方代码直接放入自定义内容中

<!-- 视频背景 -->
<video class="video-background" preload="auto" loop playsinline autoplay muted>
<source src="https://t.alcy.cc/acg" type="video/mp4"/>
</video>
<!-- 点击烟花特效 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>
<!-- 樱花飘落特效，采用cnblogs方案 -->
<script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>
//双击logo进入管理页面事件绑定
<script>
// 自动等待 .header-left 出现后再执行绑定
(function waitForHeader() {
  const bind = () => {
    const header = document.querySelector(".header-left");
    if (header) {
      header.addEventListener("dblclick", () => {
        window.location.href = "/@manage";
      });
      return true;
    }
    return false;
  };
  if (bind()) return;
  const observer = new MutationObserver(() => {
    if (bind()) observer.disconnect(); 
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

})();
</script>

# 相关参考

本文参考了以下内容

OpenList/AList样式美化：玻璃拟态主题

交互特效

交互特效特效

可根据上述链接中的内容定义更多选项

OpenList 前端 css 主题美化 style theme glass