关于Alist的美化记录●其一

发布时间 2023-09-21 19:10:51作者: 宅着做贡献

前言:近期心血来潮想搭建个个人的媒体服务器,在处理好域名及内网后看着Alist网盘总感觉少了点什么,故尝试对其进行简单美化。

本次美化纯取悦自己,该随笔不一定有下文。

 

目前仅做了背景的相关改动,其余的慢慢摸索,其他终端的背景设置以右端显示,实际效果一般,播放器的引用还在摸索中,有机会再完善。

由于本人比较懒,代码全塞前端了,具体如下:

<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/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>