OpenList玻璃拟态样式美化Alist美化代码分享

OpenList 是什么？

OpenList 属于多网盘存储挂载类的文件目录程序，作为从 AList 衍生而来的开源分支项目，项目由社区主导运维、长期持续迭代开发，项目设计初衷就是规避开源领域里依托开发者信任发起的恶意篡改类风险。项目后端依托 Gin 框架搭建，前端采用 SolidJS 技术栈进行开发。

美化代码

通过自定义代码为 OpenList,Alist 添加玻璃拟态样式美化效果，提升界面美观度与用户体验。

打开后台，在设置->全局->自定义头部粘贴以下代码

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans" />
<style type="text/css">
:root {
  --bg-image: url(https://bing.img.run/rand_uhd.php);
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: inset 1px 1px 0 rgba(255,255,255,0.4),
                  inset -1px -1px 0 rgba(0,0,0,0.2),
                  0 2px 10px rgba(0,0,0,0.1);
  --glass-hover-shadow: inset 1px 1px 0 rgba(255,255,255,0.6),
                        inset -1px -1px 0 rgba(0,0,0,0.1),
                        0 8px 25px rgba(0,0,0,0.15);
  --liquid-glass-filter: url(#liquid-glass);
}
body {
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
  color: black !important;
  font-weight: bold !important;
}
@media (max-width: 960px) {
  body {
    background-attachment: scroll;
    color: black !important;
    font-weight: bold !important;
  }
}
.hope-ui-dark .markdown-body a {
  color: black !important;
  font-weight: bold !important;
}
::selection {
  background: var(--hope-colors-accent8);
  color: black !important;
  font-weight: bold !important;
  transition: all 0.2s ease;
}
.glass-component,
.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-ikaMhsQ-css,
.hope-c-PJLV-igScBhH-css,
.hope-c-hOYTCS,
.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 {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border-radius: var(--hope-radii-xl) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: pointer;
  color: black !important;
  font-weight: bold !important;
}
.glass-component:hover,
.hope-c-PJLV-idaeksS-css:hover,
.hope-c-PJLV-ikaMhsQ-css:hover,
.hope-c-PJLV-ieTGfmR-css:hover,
.hope-c-gIqhpo:hover,
.hope-c-PJLV-idMNcPR-css:hover {
  background: rgba(255,255,255,0.2) !important;
  box-shadow: var(--glass-hover-shadow);
  transform: translateY(-1px);
  color: black !important;
  font-weight: bold !important;
}
.hope-c-PJLV-idaeksS-css {
  border-radius: var(--hope-radii-full) !important;
  padding: var(--hope-space-1) var(--hope-space-3) !important;
  color: black !important;
  font-weight: bold !important;
}
.hope-c-gUeVCo[data-active],
.hope-c-kRwRnM-gSazcJ-colorScheme-neutral[data-active] {
  background: rgba(255,255,255,0.25) !important;
  border-color: var(--hope-colors-accent7) !important;
  color: black !important;
  font-weight: bold !important;
}
.hope-c-ctSAUo,
.hope-c-bICGYT-dWksIc-scrollBehavior-outside {
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(12px) !important;
  color: black !important;
  font-weight: bold !important;
}
.markdown-body .highlight pre,
.markdown-body pre {
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: var(--hope-radii-md) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: black !important;
  font-weight: bold !important;
}
.hope-c-cPYwgm {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  color: black !important;
  font-weight: bold !important;
}
.footer,
.copyright {
  color: black !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.2);
  border-radius: var(--hope-radii-lg);
  padding: var(--hope-space-4);
  margin-top: var(--hope-space-6);
  transition: all 0.3s ease;
}
.footer.hope-c-PJLV-ihQbspH-css { opacity: 0; }
.footer.hope-c-PJLV-ihQbspH-css.visible { opacity: 1; }
.copyright {
  font-size: 14px;
  text-align: center;
  max-width: 800px;
  margin: var(--hope-space-6) auto;
  background: rgba(0,0,0,0.1);
}
.copyright-links {
  display: flex;
  justify-content: center;
  gap: var(--hope-space-3);
  flex-wrap: wrap;
  color: black !important;
  font-weight: bold !important;
}
.copyright-desc {
  line-height: 2;
  color: black !important;
  font-weight: bold !important;
}
.copyright a {
  color: black !important;
  font-weight: bold !important;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--hope-radii-sm);
  transition: all 0.3s ease;
}
.copyright a:hover {
  color: black !important;
  font-weight: bold !important;
  background: rgba(255,255,255,0.1);
  transform: scale(1.05);
}
</style>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="liquid-glass" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="enhanced"/>
      <feBlend in="SourceGraphic" in2="enhanced" mode="overlay" result="blend"/>
      <feComponentTransfer result="glow">
        <feFuncA type="linear" slope="0.8"/>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>