BetterTriangulet with Global Quick CSS

Adds BetterTriangulet panel, plugin modal, and global custom CSS injection via Quick CSS plugin

当前为 2025-07-06 提交的版本,查看 最新版本

// ==UserScript==
// @name         BetterTriangulet with Global Quick CSS
// @version      1.17
// @description  Adds BetterTriangulet panel, plugin modal, and global custom CSS injection via Quick CSS plugin
// @match        https://tri.pengpowers.xyz/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1479014
// ==/UserScript==

(function () {
    'use strict';

    // Inject stored Quick CSS globally (on all pages)
    const storedCSS = localStorage.getItem("betterTriangulet_quickCSS");
    if (localStorage.getItem("quickCSS_enabled") === "true" && storedCSS) {
        const styleTag = document.createElement("style");
        styleTag.id = "betterTrianguletQuickCSS";
        styleTag.textContent = storedCSS;
        document.head.appendChild(styleTag);
    }

    // Load Titan One font
    const titanFont = document.createElement("link");
    titanFont.href = "https://fonts.googleapis.com/css2?family=Titan+One&display=swap";
    titanFont.rel = "stylesheet";
    document.head.appendChild(titanFont);

    function applyQuickCSS(css) {
        let styleTag = document.getElementById("betterTrianguletQuickCSS");
        if (!styleTag) {
            styleTag = document.createElement("style");
            styleTag.id = "betterTrianguletQuickCSS";
            document.head.appendChild(styleTag);
        }
        styleTag.textContent = css || "";
    }

    function injectQuickCSSPanel() {
        if (document.getElementById("betterTrianguletQuickCSSPanel")) return;
        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer) return;

        const panel = document.createElement("div");
        panel.id = "betterTrianguletQuickCSSPanel";
        panel.className = "styles__infoContainer___2uI-S-camelCase";

        const theme = localStorage.getItem("theme");
        const themeColors = {
            Purple: '#4d136b',
            Green: '#265b09',
            Blue: '#132a6b',
            Red: '#6b1313',
            Orange: '#6b3b13',
            Yellow: '#6b6a13',
            Pink: '#6b134a',
            White: '#e6e6e6',
            Black: '#000000'
        };
        panel.style.backgroundColor = themeColors[theme] || "var(--container)";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "Quick CSS";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const textarea = document.createElement("textarea");
        textarea.id = "betterTrianguletQuickCSSTextarea";
        textarea.placeholder = "Enter your custom CSS here...";
        Object.assign(textarea.style, {
            width: "100%",
            minHeight: "120px",
            marginTop: "1vw",
            backgroundColor: "rgba(255, 255, 255, 0.05)",
            color: "inherit",
            border: "1px solid var(--accent)",
            borderRadius: "0.3vw",
            padding: "0.5vw",
            fontFamily: "monospace",
            fontSize: "1vw",
            resize: "vertical"
        });

        textarea.value = localStorage.getItem("betterTriangulet_quickCSS") || "";
        textarea.addEventListener("input", () => {
            const css = textarea.value;
            applyQuickCSS(css);
            localStorage.setItem("betterTriangulet_quickCSS", css);
        });

        panel.appendChild(headerRow);
        panel.appendChild(textarea);
        mainContainer.appendChild(panel);
        applyQuickCSS(textarea.value);
    }

    function removeQuickCSSPanel() {
        const panel = document.getElementById("betterTrianguletQuickCSSPanel");
        if (panel) panel.remove();

        const styleTag = document.getElementById("betterTrianguletQuickCSS");
        if (styleTag) styleTag.remove();
    }

    function createModal() {
        const profileBody = document.querySelector(".arts__profileBody___eNPbH-camelCase");
        if (!profileBody) return;

        const existingModal = document.getElementById("betterTrianguletModalOverlay");
        if (existingModal) existingModal.remove();

        const modal = document.createElement("div");
        modal.id = "betterTrianguletModalOverlay";
        Object.assign(modal.style, {
            position: "absolute",
            top: profileBody.offsetTop + "px",
            left: profileBody.offsetLeft + "px",
            width: profileBody.offsetWidth + "px",
            height: profileBody.offsetHeight + "px",
            zIndex: "9999",
            backgroundColor: "var(--container)",
            color: "inherit",
            borderRadius: "0.5vw",
            overflowY: "auto",
            padding: "2vw",
            fontFamily: "Nunito, sans-serif",
            display: "flex",
            flexDirection: "column",
            boxSizing: "border-box",
        });

        const closeBtn = document.createElement("div");
        closeBtn.textContent = "X";
        Object.assign(closeBtn.style, {
            position: "absolute",
            top: "1vw",
            right: "1.2vw",
            fontFamily: "'Titan One', sans-serif",
            fontSize: "2.5vw",
            color: "#ff4d4d",
            cursor: "pointer",
            userSelect: "none",
            zIndex: "10000",
            transition: "transform 0.15s ease-in-out"
        });
        closeBtn.onmouseenter = () => closeBtn.style.transform = "scale(1.2)";
        closeBtn.onmouseleave = () => closeBtn.style.transform = "scale(1)";
        closeBtn.onclick = () => modal.remove();

        const title = document.createElement("div");
        title.textContent = "Plugin Manager";
        Object.assign(title.style, {
            fontSize: "2vw",
            fontWeight: "800",
            marginBottom: "1vw",
            color: "var(--accent)",
            userSelect: "none",
        });

        const content = document.createElement("div");
        Object.assign(content.style, {
            fontSize: "1.2vw",
            flexGrow: "1",
            marginBottom: "2vw",
            whiteSpace: "pre-wrap",
        });

        // === Quick CSS Plugin Toggle ===
        const quickCSSToggle = document.createElement("label");
        quickCSSToggle.textContent = "Quick CSS";
        Object.assign(quickCSSToggle.style, {
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginTop: "1vw",
            marginBottom: "1vw",
            fontWeight: "bold",
            fontSize: "1.2vw",
            cursor: "default",
            userSelect: "none"
        });

        const quickCSSCheckbox = document.createElement("input");
        quickCSSCheckbox.type = "checkbox";
        quickCSSCheckbox.checked = localStorage.getItem("quickCSS_enabled") === "true";

        quickCSSCheckbox.onchange = () => {
            const enabled = quickCSSCheckbox.checked;
            localStorage.setItem("quickCSS_enabled", enabled);
            if (enabled) {
                injectQuickCSSPanel();
            } else {
                removeQuickCSSPanel();
            }
        };

        quickCSSToggle.appendChild(quickCSSCheckbox);
        content.appendChild(quickCSSToggle);

        // Reset Data link
        const resetText = document.createElement("text");
        resetText.className = "styles__link___5UR6_-camelCase";
        resetText.textContent = "Reset Data";
        resetText.style.cursor = "pointer";
        resetText.style.textDecoration = "underline";
        resetText.style.display = "block";
        resetText.onclick = () => {
            if (confirm("Clear all localStorage data?")) {
                localStorage.clear();
                location.reload();
            }
        };
        content.appendChild(resetText);

        modal.appendChild(closeBtn);
        modal.appendChild(title);
        modal.appendChild(content);
        profileBody.parentElement.appendChild(modal);
    }

    function injectPanel() {
        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer || document.getElementById("betterTrianguletBox")) return;

        const container = document.createElement("div");
        container.className = "styles__infoContainer___2uI-S-camelCase";
        container.id = "betterTrianguletBox";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "BetterTriangulet";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const pluginDiv = document.createElement("div");

        const pluginText = document.createElement("text");
        pluginText.className = "styles__link___5UR6_-camelCase";
        pluginText.id = "managePlugins";
        pluginText.textContent = "Manage Plugins";
        pluginText.style.cursor = "pointer";
        pluginText.style.textDecoration = "underline";
        pluginText.style.display = "block";

        pluginText.onclick = () => {
            if (!document.getElementById("betterTrianguletModalOverlay")) {
                createModal();
            }
        };

        pluginDiv.appendChild(pluginText);

        const resetText = document.createElement("text");
        resetText.className = "styles__link___5UR6_-camelCase";
        resetText.textContent = "Reset Data";
        resetText.style.cursor = "pointer";
        resetText.style.textDecoration = "underline";
        resetText.style.display = "block";
        resetText.style.marginTop = "0.5vw";
        resetText.onclick = () => {
            if (confirm("Clear all localStorage data?")) {
                localStorage.clear();
                location.reload();
            }
        };
        pluginDiv.appendChild(resetText);

        container.appendChild(headerRow);
        container.appendChild(pluginDiv);
        mainContainer.appendChild(container);

        if (localStorage.getItem("quickCSS_enabled") === "true") {
            injectQuickCSSPanel();
        }
    }

    function waitForSettings() {
        const settingsHeader = [...document.querySelectorAll("div")].find(el =>
            el.textContent.trim() === "Settings" && el.className.includes("styles__header___")
        );
        if (settingsHeader) injectPanel();
        else setTimeout(waitForSettings, 250);
    }

    waitForSettings();

})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址