前言:近期心血来潮想搭建个个人的媒体服务器,在处理好域名及内网后看着Alist网盘总感觉少了点什么,故尝试对其进行简单美化。
本次美化纯取悦自己,该随笔不一定有下文。
目前仅做了背景的相关改动,其余的慢慢摸索,其他终端的背景设置以右端显示,实际效果一般,播放器的引用还在摸索中,有机会再完善。
由于本人比较懒,代码全塞前端了,具体如下:
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
<style>
/*白天*/
.hope-ui-light{
background-image:url(https://images6.alphacoders.com/132/1327487.png) !important;
background-attachment: fixed;
background-position: 100%;
background-size: cover;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/*黑夜*/
.hope-ui-dark{
background-image:url(https://images2.alphacoders.com/743/743487.jpg) !important;
background-attachment: fixed;
background-position: 100%;
background-size: cover;
background-color: rgba(255, 255, 255, 0) !important;
border-top: #768ba2 !important;
}
/*列表*/
.hope-c-PJLV-igScBhH-css {
background-color:#ffffff70 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.09) !important;
border-radius: 0.5rem !important;
padding: 0.75rem !important;
backdrop-filter: blur(8px)!important;
}
.hope-c-PJLV-iigjoxS-css {
background-color:#ffffff33 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.09) !important;
border-radius: 0.5rem !important;
padding: 0.75rem !important;
backdrop-filter: blur(8px)!important;
}
.hope-c-kvTTWD-hYRNAb-variant-filled {
background-color:#ffffff00 !important;
}
.hope-c-PJLV-ijgzmFG-css {
background-color:#ffffff70 !important;
}
.hope-c-hOYTCS {
background-color:#66ccff88 !important;
}
.aplayer-lrc {
background-color:#ffffff70 !important;
}
.aplayer {
background-color:#ffffff70 !important;
}
</style>