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

<style type="text/css">
body {
  /* 手机端背景图 */
  --mobile-background-image: url(https://pan.wiiuii.cn/p/DATA/BLOG/images/%E5%93%88%E5%A6%AE%E5%85%8B%E5%AD%9C05.jpg);
  /* 电脑端背景图 */
  --desktop-background-image: url(https://pan.wiiuii.cn/p/DATA/BLOG/images/%E5%93%88%E5%A6%AE%E5%85%8B%E5%AD%9C10.jpg);
}
.hope-ui-dark .markdown-body a{color:var(--hope-colors-loContrast) !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-x:center !important}@media screen and (max-width: 960px){body{background-image:var(--mobile-background-image) !important}}.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}.hope-c-PJLV-idaeksS-css,.hope-c-PJLV-ikaMhsQ-css{background:none !important}.hope-c-PJLV-idaeksS-css{border-radius:var(--hope-radii-full);overflow:hidden;padding:var(--hope-space-1) var(--hope-space-2)}.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-ibcBsNO-css .hope-c-PJLV-iubUra-css,.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css{background-color:transparent !important;box-shadow:inset 1px 1px 0px 0px rgba(255,255,255,0.5),inset -1px -1px 0px 0px rgba(255,255,255,0.6) !important;cursor:grab;backdrop-filter:url(#liquid-glass-filter) blur(20px) saturate(1.4) !important;pointer-events:auto;border:none !important}.header-right.hope-stack>div{height:var(--hope-sizes-8);border:none !important;padding:var(--hope-space-1) var(--hope-space-2) !important}.hope-c-PJLV-ijSQbqe-css{background-color:var(--hope-colors-blackAlpha3) !important;border-color:rgba(234,234,234,0.5) !important}.hope-c-PJLV-iciJSBF-css{opacity:0.5}.markdown-body .highlight pre,.markdown-body pre{background-color:var(--hope-colors-blackAlpha3) !important;backdrop-filter:blur(var(--hope-space-3))}.hope-c-gUeVCo[data-active],.hope-c-kRwRnM-gSazcJ-colorScheme-neutral[data-active]{background-color:var(--hope-colors-blackAlpha3) !important}.hope-c-ctSAUo,.hope-c-bICGYT-dWksIc-scrollBehavior-outside{background-color:var(--hope-colors-blackAlpha6) !important;backdrop-filter:blur(8px)}.footer{opacity:0;transition:opacity .3s ease-in-out}.copyright{font-size:14px;text-align:center}.copyright .copyright-links{display:flex;align-items:center;justify-content:center;gap:var(--hope-space-2)}.copyright .copyright-desc{line-height:2}.copyright a{transition:color .3s ease-in-out}.copyright a:hover{color:var(--hope-colors-accent8)}.hope-c-PJLV-ihWgyFw-css,.hope-c-PJLV-ibiABng-css{display:none !important}
</style>

<!-- 视频背景 -->
<div class="video-container"><video id="bg-video" autoplay muted loop playsinline><source type="video/mp4"></video></div>
<!-- SVG -->
<svg style="display:none"><filter id="liquid-glass-filter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox"><feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence"></feTurbulence><feComponentTransfer in="turbulence" result="mapped"><feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5"></feFuncR><feFuncG type="gamma" amplitude="0" exponent="1" offset="0"></feFuncG><feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5"></feFuncB></feComponentTransfer><feGaussianBlur in="turbulence" stdDeviation="3" result="softMap"></feGaussianBlur><feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight"><fePointLight x="-200" y="-200" z="300"></fePointLight></feSpecularLighting><feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage"></feComposite><feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter></svg>
<!-- JS -->
<script type="text/javascript">
// 配置项
const config = Object.freeze({
  video: Object.freeze({
    mobileSource: 'https://pan.wiiuii.cn/d/DATA/BLOG/video/small.mp4', // 手机视频配置
    desktopSource: 'https://pan.wiiuii.cn/d/DATA/BLOG/video/large.mp4', // PC视频配置
    elementId: 'bg-video', // 提取视频元素ID
    breakpoint: 768 // 添加断点配置
  }),
  footer: Object.freeze({
    selector: '.footer',
    maxAttempts: 10,
    retryInterval: 300,
    blog: 'https://www.biiibii.cn/', // 博客地址
    loginUrl: '/@login', // 登录地址
    manageUrl: '/@manage'  // 管理地址
  })
});
const DeviceType=Object.freeze({MOBILE:'mobile',DESKTOP:'desktop'});const FILE_EXTENSION_REGEX=/\/[^/]+\.[a-zA-Z0-9]{1,10}(?:$|\/)/;function hasFileExtension(url){try{return FILE_EXTENSION_REGEX.test(new URL(url).pathname)}catch(error){console.error('URL解析错误:',error);return false}}const debounce=(func,wait=250)=>{let timeout;return(...args)=>{clearTimeout(timeout);timeout=setTimeout(()=>func.apply(this,args),wait)}};class BackgroundVideoManager{constructor(){this.videoElement=document.getElementById(config.video.elementId);this.sourceElement=this.videoElement?.querySelector('source');this.lastSource='';this.lastDeviceType=null;if(!this.videoElement||!this.sourceElement){console.warn('视频元素未找到，视频功能将禁用');return}this.videoElement.addEventListener('loadeddata',this.handleVideoLoad.bind(this))}init(){if(!this.videoElement)return;this.switchVideoSource();const resizeHandler=debounce(()=>this.switchVideoSource());window.addEventListener('resize',resizeHandler);document.addEventListener('visibilitychange',this.handleVisibilityChange.bind(this))}handleVideoLoad(){if(!hasFileExtension(window.location.href)){this.playVideo().catch(e=>console.debug('视频自动播放失败:',e))}}handleVisibilityChange(){if(document.visibilityState==='visible'&&!hasFileExtension(window.location.href)){this.playVideo().catch(e=>console.debug('可见性恢复播放失败:',e))}}getDeviceType(){return window.innerWidth<config.video.breakpoint||window.matchMedia('(pointer: coarse)').matches?DeviceType.MOBILE:DeviceType.DESKTOP}switchVideoSource(){const deviceType=this.getDeviceType();if(deviceType===this.lastDeviceType)return;this.lastDeviceType=deviceType;const newSource=deviceType===DeviceType.MOBILE?config.video.mobileSource:config.video.desktopSource;if(newSource!==this.lastSource){this.sourceElement.src=newSource;this.lastSource=newSource;this.videoElement.load()}}playVideo(){return this.videoElement.play().catch(e=>{console.warn('视频播放被阻止:',e)})}pauseVideo(){this.videoElement.pause()}}class FooterManager{constructor(){this.currentYear=new Date().getFullYear();this.attemptCount=0;this.intervalId=null}init(){if(this.tryRenderFooter())return;this.intervalId=setInterval(()=>{if(this.attemptCount++>=config.footer.maxAttempts){this.cleanup();console.warn("页脚元素未找到，停止尝试");return}if(this.tryRenderFooter())this.cleanup()},config.footer.retryInterval)}tryRenderFooter(){const footerElement=document.querySelector(config.footer.selector);if(!footerElement)return false;footerElement.innerHTML=this.getFooterHtml();footerElement.style.opacity="1";return true}cleanup(){if(this.intervalId){clearInterval(this.intervalId);this.intervalId=null}}getFooterHtml(){return`<div class="copyright"><div class="copyright-links"><a href="${config.footer.blog}"target="_blank">博客</a>|<a href="${config.footer.loginUrl}">登录</a>|<a href="${config.footer.manageUrl}">管理</a></div><div class="copyright-desc"><p>免责声明：本站为个人网盘，网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p><p>Copyright©2024-${this.currentYear}All rights Reserved.|由OpenList驱动</p></div></div>`}}function createUrlChangeHandler(videoManager){const handler=()=>{const hasExtension=hasFileExtension(window.location.href);document.body.classList.toggle('has-file-extension',hasExtension);if(!videoManager||!videoManager.videoElement)return;hasExtension?videoManager.pauseVideo():videoManager.playVideo()};return debounce(handler,100)}const init=()=>{const videoManager=new BackgroundVideoManager();videoManager.init();const footerManager=new FooterManager();footerManager.init();const urlChangeHandler=createUrlChangeHandler(videoManager);urlChangeHandler();const urlEvents=['hashchange','popstate','pushState','replaceState'];urlEvents.forEach(event=>{if(event==='pushState'||event==='replaceState'){const original=history[event];history[event]=function(){const result=original.apply(this,arguments);urlChangeHandler();return result}}else{window.addEventListener(event,urlChangeHandler)}})};if(document.readyState!=='loading'){init()}else{document.addEventListener('DOMContentLoaded',init)}
</script>