alist全局样式黑暗模式下文件列表模糊怎么办。顺便分享我的alist全局样式

https://www.yeahhe.online/OneDriveShare/小虎会享



自定义头部

<style>
    /* 定义仅用于 footer 的 CSS 变量 */
    .footer-container {
        /* 浅色主题变量 */
        --footer-custom-bg: #f0f0f0;
        --footer-custom-text: #000;
        --footer-custom-name-bg: #fff;
        --footer-custom-name-text: #000;
        --footer-custom-link-bg: #26517c;
        --footer-custom-link-text: #fff;
    }

    @media (prefers-color-scheme: dark) {
        .footer-container {
            /* 深色主题变量 */
            --footer-custom-bg: #2d3236;
            --footer-custom-text: #fff;
            --footer-custom-name-bg: #444;
            --footer-custom-name-text: #fff;
            --footer-custom-link-bg: #26517c;
            --footer-custom-link-text: #fff;
        }
    }

    /* 应用自定义变量的样式 */
    .footer-container {
        background-color: var(--footer-custom-bg);
        color: var(--footer-custom-text);
        padding: 10px;
        font-size: 14px;
    }

    .footer-container .copyright {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        overflow-x: auto;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .footer-container .copyright-item {
        display: flex;
        margin: 5px;
    }

    .footer-container .footer-name {
        padding: 4px 8px;
        background: var(--footer-custom-name-bg);
        color: var(--footer-custom-name-text);
        border-radius: 4px 0 0 4px;
    }

    .footer-container .footer-link {
        padding: 4px 8px;
        background: var(--footer-custom-link-bg);
        border-radius: 0 4px 4px 0;
    }

    .footer-container .footer-link a {
        color: var(--footer-custom-link-text);
        text-decoration: none;
    }

    .footer-container #runtime_span {
        display: flex;
    }

    .footer-container .disclaimer {
        text-align: center;
        font-size: 12px;
        padding-top: 10px;
    }

    @media (max-width: 768px) {
        .footer-container .copyright {
            justify-content: flex-start;
        }
    }
</style>

自定义内容

在此处键入或粘贴代码<div class="footer-container">
    <div class="copyright">
        <div class="copyright-item">
            <span class="footer-name">© 2024</span>
            <span class="footer-link"><a href="https://www.yeahhe.online">yeahhe个人网站</a></span>
        </div>
        <div class="copyright-item">
            <span class="footer-name">湘ICP备</span>
            <span class="footer-link"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener nofollow">2024060438号-1</a></span>
        </div>
        <div class="footer-item">
            <span class="footer-name">管理员</span>
            <span class="footer-link"><a href="https://www.yeahhe.online/admin" target="_blank" rel="noopener">yeahhe</a></span>
        </div>
        <div class="footer-item">
            <div id="runtime_span"></div>
        </div>
    </div>

    <div class="disclaimer">
        免责声明:本站为个人网盘,网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的
    </div>
</div>

<script>
    function show_runtime() {
        const runtimeSpan = document.getElementById("runtime_span");
        const startDate = new Date("2024-08-07T00:00:00"); // 修改为正确的启动日期
        const now = new Date();
        const diff = now - startDate;

        const days = Math.floor(diff / (24 * 60 * 60 * 1000));
        const hours = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
        const minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
        const seconds = Math.floor((diff % (60 * 1000)) / 1000);

        runtimeSpan.innerHTML = `
            <span class="footer-name">运行</span>
            <span class="footer-link">${days}天 ${hours}时 ${minutes}分 ${seconds}秒</span>
        `;
        
        setTimeout(show_runtime, 1000);
    }

    // 初始化运行时间显示
    show_runtime();
</script>
2 Likes

感谢你的样式

2 Likes

大佬厉害,,,

1 Like