让你的OpenList一秒拥有毛玻璃效果
|
282
|
0
|
原创

226 字
|
8 分钟

通过注入css及js来美化OpenList

前言

复制粘贴就搞定！

代码

mini版
<style>body{margin:0;padding:0;min-height:100vh;overflow-x:hidden;color:#f0f8ff;background-color:#333333;background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url("https://api.rls.ovh/adaptive");background-repeat:no-repeat;background-size:cover;background-position:center center;background-attachment:fixed}.hope-c-PJLV.hope-c-PJLV-ihWgyFw-css{display:none}.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ifjOQLV-css,.hope-c-PJLV-igScBhH-css,.hope-c-PJLV-ijgzmFG-css,.hope-c-mHASU-byiOue-variant-filled,.hope-c-PJLV-idaeksS-css,section#hope-modal-cl-49{background-color:rgba(255,255,255,0.1);backdrop-filter:blur(6px);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2)}.hope-c-PJLV-ihYBJPK-css{display:none}.hope-text{color:white}.hope-c-mHASU-byiOue-variant-filled{border-radius:50%}div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iekLzst-css>a:first-child,div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iekLzst-css>span{display:none}a.hope-anchor.hope-c-iHuheP.hope-c-PJLV.hope-c-PJLV-idrWMwW-css.inactive{color:white}.hope-c-ivMHWx-EevEv-cv,.hope-c-ivMHWx-dvmlqS-cv{background-color:transparent;color:white}.hope-c-ivMHWx-EevEv-cv:hover,.hope-c-ivMHWx-dvmlqS-cv:hover{background-color:rgba(255,255,255,0.2)}.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-idWqagS-css{background-color:transparent}input#search-input,button#hope-select-cl-81-trigger,button.hope-icon-button.hope-button.hope-c-ivMHWx.hope-c-ivMHWx-kcPQpq-variant-subtle.hope-c-ivMHWx-kWSPeQ-size-md.hope-c-ivMHWx-dvmlqS-cv.hope-c-PJLV.hope-c-PJLV-ifnAIcD-css,.hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css,.header-right.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihVlqVC-css{background-color:rgba(255,255,255,0.1);backdrop-filter:blur(2px);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);outline:none;box-shadow:none;color:white}.hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css span,.hope-select__value.hope-c-gYjErV.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css{color:white}.hope-select__trigger,.hope-c-kvTTWD,.hope-c-huZphZ,.hope-c-kvTTWD-hYRNAb-variant-filled,.hope-c-kvTTWD-gfwxhr-size-md,.hope-c-huZphZ-cIGthf-cv,.hope-c-PJLV,.hope-c-PJLV-ijSQbqe-css{background-color:transparent;border:none}.aplayer-title{color:white}.aplayer-author{color:rgba(255,255,255,0.904)}.hope-c-kvTTWD-hYRNAb-variant-filled:hover,.hope-c-kvTTWD-gfwxhr-size-md:hover,.hope-c-huZphZ-cIGthf-cv:hover,.hope-c-PJLV-ijSQbqe-css:hover{background-color:rgba(255,255,255,0.1);backdrop-filter:blur(6px);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);border:none}.aplayer .aplayer-list ol li:hover,.aplayer .aplayer-list ol li.aplayer-list-light{background-color:rgba(255,255,255,0.1);backdrop-filter:blur(6px);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);border:none;color:white}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:transparent}</style><script>document.addEventListener('click',function(event){const targetAnchor=event.target.closest('a');if(targetAnchor&&targetAnchor.href){if(targetAnchor.href.includes('/@manage')){event.preventDefault();window.location.href=targetAnchor.href}}})</script>
完整版
<style>
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: #f0f8ff;
    /* 当图片未加载时显示此颜色 */
    background-color: #333333;
    /* 调用api加载背景图，此背景图会自适应pc端和pe端 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://api.rls.ovh/adaptive");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.hope-c-PJLV.hope-c-PJLV-ihWgyFw-css {
    display: none;
}
/* 顶部栏目，内容区域，右边栏，复选框，路径栏目 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ifjOQLV-css,
.hope-c-PJLV-igScBhH-css,
.hope-c-PJLV-ijgzmFG-css,
.hope-c-mHASU-byiOue-variant-filled,
.hope-c-PJLV-idaeksS-css,
section#hope-modal-cl-49 {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 搜索框文字 */
.hope-c-PJLV-ihYBJPK-css {
    display: none;
}
/* 文件抬头信息 */
.hope-text {
    color: white;
}
/* 复选框 */
.hope-c-mHASU-byiOue-variant-filled {
    border-radius: 50%;
}
/* 页脚隐藏openlist */
div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iekLzst-css > a:first-child,
div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iekLzst-css > span {
    display: none;
}
a.hope-anchor.hope-c-iHuheP.hope-c-PJLV.hope-c-PJLV-idrWMwW-css.inactive {
    color: white;
}
/* 分页栏 */
.hope-c-ivMHWx-EevEv-cv,
.hope-c-ivMHWx-dvmlqS-cv {
    background-color: transparent;
    color: white;
}
/* 分页栏触碰效果 */
.hope-c-ivMHWx-EevEv-cv:hover,
.hope-c-ivMHWx-dvmlqS-cv:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/* 搜索栏 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-idWqagS-css {
    background-color: transparent;
}
/* 搜索栏面板 */
input#search-input,
button#hope-select-cl-81-trigger,
button.hope-icon-button.hope-button.hope-c-ivMHWx.hope-c-ivMHWx-kcPQpq-variant-subtle.hope-c-ivMHWx-kWSPeQ-size-md.hope-c-ivMHWx-dvmlqS-cv.hope-c-PJLV.hope-c-PJLV-ifnAIcD-css,
.hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css,
.header-right.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihVlqVC-css {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    outline: none;
    box-shadow: none;
    color: white;
}
.hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css span,
.hope-select__value.hope-c-gYjErV.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
    color: white;
}
/* 媒体选项卡 */
.hope-select__trigger,
.hope-c-kvTTWD,
.hope-c-huZphZ,
.hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-c-kvTTWD-gfwxhr-size-md,
.hope-c-huZphZ-cIGthf-cv,
.hope-c-PJLV,
.hope-c-PJLV-ijSQbqe-css {
    background-color: transparent;
    border: none;
}
.hope-c-kvTTWD-hYRNAb-variant-filled:hover,
.hope-c-kvTTWD-gfwxhr-size-md:hover,
.hope-c-huZphZ-cIGthf-cv:hover,
.hope-c-PJLV-ijSQbqe-css:hover {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: none;
}
.aplayer .aplayer-list ol li:hover,
.aplayer .aplayer-list ol li.aplayer-list-light {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: none;
    color: white;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: transparent;
}
/* 歌名 */
.aplayer-title {
    color: white;
}
/* 歌手 */
.aplayer-author {
    color: rgba(255, 255, 255, 0.904);
}
</style>

<script>
// 捕获动态加载的a标签
document.addEventListener('click', function(event) {
    const targetAnchor = event.target.closest('a');
    if (targetAnchor && targetAnchor.href) {
        if (targetAnchor.href.includes('/@manage')) {
            event.preventDefault();
            window.location.href = targetAnchor.href;
        }
    }
});
</script>

开始

选择上面任意版本复制，打开OpenList后台在设置->全局->自定义内容中粘贴代码，之后保存即可生效。

linux
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇