☰

luogu_beautification

美化洛谷，本人不过一个算法渣渣，但是鉴于洛谷在部分UI方面不够细致（本人认为），基于我喜欢的方法对洛谷进行一个美化

当前为 2024-08-28 提交的版本，查看 最新版本。

// ==UserScript==
// @name         luogu_beautification
// @namespace    https://www.luogu.com.cn
// @version      0.0.2
// @license      MIT
// @description	 美化洛谷，本人不过一个算法渣渣，但是鉴于洛谷在部分UI方面不够细致（本人认为），基于我喜欢的方法对洛谷进行一个美化
// @author       rabbit
// @match        https://www.luogu.com.cn/*
// @icon         https://www.luogu.com.cn/favicon.ico
// ==/UserScript==

window.addEventListener('load', function() {
    console.log("luogu_beautification loaded | Made by Rabbit");

    // 函数：应用样式
    function applyStyles() {
        const style = document.createElement("style");
        style.innerHTML = `
        body {
            background: url('https://bing.img.run/uhd.php');
            background-size: cover;
        }
        .lg-article {
            border-radius: 9px !important;
        }
        .lg-article .lg-index-stat {
            border-radius: 9px !important;
        }
        .card.padding-default {
            border-radius: 9px !important;
        }
        .card.wrapper.padding-none {
            border-radius: 9px !important;
        }
        .lfe-form-sz-middle {
            border-radius: 9px !important;
        }
        .refined-input.input-wrap.frame {
            border-radius: 18px !important;
            padding: 5px; /* 测试内边距 */
        }
        .center {
            border-radius: 9px !important;
        }
        .card.user-header-container.padding-0 {
            border-radius: 9px !important;
        }
        .card {
            border-radius: 9px !important;
        }
        `;

        document.head.appendChild(style);
    }

    // 首次加载时应用样式
    applyStyles();

    // 创建 MutationObserver 以监控 DOM 变化
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length > 0) {
                applyStyles(); // 当有新元素被添加时重新应用样式
            }
        });
    });

    // 开始监听 document.body 的子元素变化（包括整个 DOM 树的变化）
    observer.observe(document.body, { childList: true, subtree: true });
});