Alist美化代码

自定义头部

<style>
    /*隐藏版权*/
    .footer span,
    .footer a:nth-of-type(1) {
        display: none;
    }
    /*隐藏管理字眼*/
    .footer span,
    .footer a:nth-of-type(2) {
        display: none;
    }
    /*禁止文字选择*/
    * {
        -webkit-user-drag: none; /* 对 Safari 和 Chrome 生效 */
        user-drag: none; /* 对其他浏览器生效 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /*底部CSS，.App .table这三个一起的*/
    .App {
        min-height: 85vh;
    }
    .table {
        margin: auto;
    }
    /*白天*/
    .hope-ui-light {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #a991ef, #dbc3fb, #a1c4fd, #a8edea, #d299c2) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
    /*黑夜*/
    .hope-ui-dark {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #0e102b, #0f0f24, #0e0e1d, #000000) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        border-top: #768ba2 !important;
    }
    /*顶部右上角切换按钮透明*/
    .hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
    .hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgb(0 0 0 / 50%) !important;
    }
    /*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
    .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
    .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }
    /*左侧侧边栏目录*/
    /*白天模式*/
    .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
        background: rgba(255, 255, 255, 0.5) !important;
    }
    /*夜间模式*/
    .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }
    /*白天模式代码块透明*/
    .hope-ui-light pre {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    /*夜间模式代码块透明*/
    .hope-ui-dark pre {
        background-color: rgba(255, 255, 255, 0) !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-idaeksS-css {
        background: none !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: #c9c9c9 !important; */
    }
    .aplayer-lrc {
        background-color: #ffffff70 !important;
    }
    .aplayer {
        background-color: #ffffff70 !important;
    }
    .frosted-glass,
    .hope-breadcrumb__list {
        background: rgba(255, 255, 255, 0.5);
        /* 调整 alpha 值以设置透明度 */
        padding: 10px;
        /* 添加内边距以提高可见性 */
        border-radius: 5px;
        /* 可选：添加圆角 */
        backdrop-filter: blur(5px);
        /* 使用所需的模糊半径添加磨砂效果 */
        border: 1px solid rgba(255, 255, 255, 0.2);
        /* 可选：添加边框以提高对比度 */
        text-decoration: none;
        /* 移除链接的下划线 */
        color: #000;
        /* 设置文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
        width: fit-content;
        margin: auto;
    }
    .frosted-glass>p>a:hover {
        border-radius: 5px;
        /* 可选：添加圆角 */
        background: rgba(255, 255, 255, 0.8);
        /* 调整 alpha 值以设置悬停时的透明度 */
        color: rgba(51, 51, 51, 0.84);
        /* 设置悬停时的文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
    }
    /* 加载动画样式 */
    #loading {
        /* 默认显示加载动画 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 9999;
        backdrop-filter: blur(15px);
    }
    .loader {
        width: 250px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: helvetica, arial, sans-serif;
        font-weight: 900;
        color: #82c749;
        letter-spacing: 0.2em;
    }
    .loader::before,
    .loader::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background: #82c749;
        position: absolute;
        animation: load .5s infinite alternate ease-in-out;
    }
    .loader::before {
        top: 0
    }
    .loader::after {
        bottom: 0
    }
    @keyframes load {
        0% {
            left: 0;
            height: 30px;
            width: 15px
        }
        50% {
            height: 8px;
            width: 40px
        }
        100% {
            left: 235px;
            height: 30px;
            width: 15px
        }
    }
</style>
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<script>
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    });
    //加载动画
    window.addEventListener("load", function() {
        // 当所有资源加载完成后隐藏加载动画
        document.getElementById("loading").style.display = "none";
    });
    // 链接会被禁止拖拽
    document.querySelectorAll('a').forEach(function(link) {
        link.addEventListener('dragstart', function(event) {
            event.preventDefault(); // 阻止拖拽事件的默认行为
        });
    });
</script>
<style>
    /*隐藏版权*/
    .footer span,
    .footer a:nth-of-type(1) {
        display: none;
    }

    /*隐藏管理字眼*/
    .footer span,
    .footer a:nth-of-type(2) {
        display: none;
    }
    /*禁止文字选择*/
    * {
        -webkit-user-drag: none; /* 对 Safari 和 Chrome 生效 */
        user-drag: none; /* 对其他浏览器生效 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /*底部CSS，.App .table这三个一起的*/
    .App {
        min-height: 85vh;
    }

    .table {
        margin: auto;
    }
    /*白天*/
    .hope-ui-light {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #a991ef, #dbc3fb, #a1c4fd, #a8edea, #d299c2) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }


    /*黑夜*/
    .hope-ui-dark {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #0e102b, #0f0f24, #0e0e1d, #000000) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        border-top: #768ba2 !important;
    }

    /*顶部右上角切换按钮透明*/
    .hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
    .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*左侧侧边栏目录*/
    /*白天模式*/
    .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
        background: rgba(255, 255, 255, 0.5) !important;
    }

    /*夜间模式*/
    .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*白天模式代码块透明*/
    .hope-ui-light pre {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /*夜间模式代码块透明*/
    .hope-ui-dark pre {
        background-color: rgba(255, 255, 255, 0) !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-idaeksS-css {
        background: none !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: #c9c9c9 !important; */
    }

    .aplayer-lrc {
        background-color: #ffffff70 !important;
    }

    .aplayer {
        background-color: #ffffff70 !important;
    }

    .frosted-glass,
    .hope-breadcrumb__list {
        background: rgba(255, 255, 255, 0.5);
        /* 调整 alpha 值以设置透明度 */
        padding: 10px;
        /* 添加内边距以提高可见性 */
        border-radius: 5px;
        /* 可选：添加圆角 */
        backdrop-filter: blur(5px);
        /* 使用所需的模糊半径添加磨砂效果 */
        border: 1px solid rgba(255, 255, 255, 0.2);
        /* 可选：添加边框以提高对比度 */
        text-decoration: none;
        /* 移除链接的下划线 */
        color: #000;
        /* 设置文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
        width: fit-content;
        margin: auto;
    }

    .frosted-glass>p>a:hover {
        border-radius: 5px;
        /* 可选：添加圆角 */
        background: rgba(255, 255, 255, 0.8);
        /* 调整 alpha 值以设置悬停时的透明度 */
        color: rgba(51, 51, 51, 0.84);
        /* 设置悬停时的文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
    }

    /* 加载动画样式 */
    #loading {
        /* 默认显示加载动画 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 9999;
        backdrop-filter: blur(15px);
    }

    .loader {
        width: 250px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: helvetica, arial, sans-serif;
        font-weight: 900;
        color: #82c749;
        letter-spacing: 0.2em;
    }

    .loader::before,
    .loader::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background: #82c749;
        position: absolute;
        animation: load .5s infinite alternate ease-in-out;
    }

    .loader::before {
        top: 0
    }

    .loader::after {
        bottom: 0
    }

    @keyframes load {
        0% {
            left: 0;
            height: 30px;
            width: 15px
        }

        50% {
            height: 8px;
            width: 40px
        }

        100% {
            left: 235px;
            height: 30px;
            width: 15px
        }
    }
</style>
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<script>
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    });

    //加载动画
    window.addEventListener("load", function() {
        // 当所有资源加载完成后隐藏加载动画
        document.getElementById("loading").style.display = "none";
    });
    // 链接会被禁止拖拽
    document.querySelectorAll('a').forEach(function(link) {
        link.addEventListener('dragstart', function(event) {
            event.preventDefault(); // 阻止拖拽事件的默认行为
        });
    });
</script>
<style>
    /*隐藏版权*/
    .footer span,
    .footer a:nth-of-type(1) {
        display: none;
    }

    /*隐藏管理字眼*/
    .footer span,
    .footer a:nth-of-type(2) {
        display: none;
    }
    /*禁止文字选择*/
    * {
        -webkit-user-drag: none; /* 对 Safari 和 Chrome 生效 */
        user-drag: none; /* 对其他浏览器生效 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /*底部CSS，.App .table这三个一起的*/
    .App {
        min-height: 85vh;
    }

    .table {
        margin: auto;
    }
    /*白天*/
    .hope-ui-light {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #a991ef, #dbc3fb, #a1c4fd, #a8edea, #d299c2) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }


    /*黑夜*/
    .hope-ui-dark {
        --hope-colors-background: rgba(0, 0, 0, 0) !important;
        background-image: linear-gradient(125deg, #0e102b, #0f0f24, #0e0e1d, #000000) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        border-top: #768ba2 !important;
    }

    /*顶部右上角切换按钮透明*/
    .hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
    .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*左侧侧边栏目录*/
    /*白天模式*/
    .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
        background: rgba(255, 255, 255, 0.5) !important;
    }

    /*夜间模式*/
    .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /*白天模式代码块透明*/
    .hope-ui-light pre {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /*夜间模式代码块透明*/
    .hope-ui-dark pre {
        background-color: rgba(255, 255, 255, 0) !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-idaeksS-css {
        background: none !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: #c9c9c9 !important; */
    }

    .aplayer-lrc {
        background-color: #ffffff70 !important;
    }

    .aplayer {
        background-color: #ffffff70 !important;
    }

    .frosted-glass,
    .hope-breadcrumb__list {
        background: rgba(255, 255, 255, 0.5);
        /* 调整 alpha 值以设置透明度 */
        padding: 10px;
        /* 添加内边距以提高可见性 */
        border-radius: 5px;
        /* 可选：添加圆角 */
        backdrop-filter: blur(5px);
        /* 使用所需的模糊半径添加磨砂效果 */
        border: 1px solid rgba(255, 255, 255, 0.2);
        /* 可选：添加边框以提高对比度 */
        text-decoration: none;
        /* 移除链接的下划线 */
        color: #000;
        /* 设置文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
        width: fit-content;
        margin: auto;
    }

    .frosted-glass>p>a:hover {
        border-radius: 5px;
        /* 可选：添加圆角 */
        background: rgba(255, 255, 255, 0.8);
        /* 调整 alpha 值以设置悬停时的透明度 */
        color: rgba(51, 51, 51, 0.84);
        /* 设置悬停时的文本颜色 */
        transition: background 0.3s, color 0.3s;
        /* 添加平滑的过渡效果 */
    }

    /* 加载动画样式 */
    #loading {
        /* 默认显示加载动画 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 9999;
        backdrop-filter: blur(15px);
    }

    .loader {
        width: 250px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: helvetica, arial, sans-serif;
        font-weight: 900;
        color: #82c749;
        letter-spacing: 0.2em;
    }

    .loader::before,
    .loader::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background: #82c749;
        position: absolute;
        animation: load .5s infinite alternate ease-in-out;
    }

    .loader::before {
        top: 0
    }

    .loader::after {
        bottom: 0
    }

    @keyframes load {
        0% {
            left: 0;
            height: 30px;
            width: 15px
        }

        50% {
            height: 8px;
            width: 40px
        }

        100% {
            left: 235px;
            height: 30px;
            width: 15px
        }
    }
</style>
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<script>
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    });

    //加载动画
    window.addEventListener("load", function() {
        // 当所有资源加载完成后隐藏加载动画
        document.getElementById("loading").style.display = "none";
    });
    // 链接会被禁止拖拽
    document.querySelectorAll('a').forEach(function(link) {
        link.addEventListener('dragstart', function(event) {
            event.preventDefault(); // 阻止拖拽事件的默认行为
        });
    });
</script>

自定义内容

<div id="loading">
    <div class="loader">正在努力加载...</div>
</div><div style="text-align: center;" class="frosted-glass">
    <p align="center">
        &copy; Powered by <a target="_blank" href="https://ksmlc.cn">KS-MLC</a>
        <span>|</span>
        <a target="_blank" href="/@manage">管理</a>
    </p>
</div>
<div id="loading">
    <div class="loader">正在努力加载...</div>
</div><div style="text-align: center;" class="frosted-glass">
    <p align="center">
        &copy; Powered by <a target="_blank" href="https://ksmlc.cn">KS-MLC</a>
        <span>|</span>
        <a target="_blank" href="/@manage">管理</a>
    </p>
</div>
<div id="loading">
    <div class="loader">正在努力加载...</div>
</div><div style="text-align: center;" class="frosted-glass">
    <p align="center">
        &copy; Powered by <a target="_blank" href="https://ksmlc.cn">KS-MLC</a>
        <span>|</span>
        <a target="_blank" href="/@manage">管理</a>
    </p>
</div>

演示：https://alist.ksmlc.cn/