Civitai Model Versions Wraparound

Wraps CivitAI versions into multiple rows.

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

换行

// ==UserScript==
// @name         Civitai Model Versions Wraparound
// @version      0.1.0
// @description  Wraps CivitAI versions into multiple rows.
// @author       RedTvpe
// @match        https://civitai.com/models/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1418032
// ==/UserScript==

(function () {
    'use strict';

    function adjustLayout() {
        // Select the container that holds the model versions
        const scrollArea = document.querySelector('.mantine-ScrollArea-viewport .mantine-Group-root');

        if (scrollArea) {
            // Apply styles to make the versions wrap into rows
            scrollArea.style.display = 'flex';
            scrollArea.style.flexWrap = 'wrap';
            scrollArea.style.gap = '8px'; // Adds spacing between items
            scrollArea.style.overflowX = 'visible'; // Allow full visibility
        }
    }

    // Use MutationObserver to watch for dynamic content changes
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length > 0) {
                adjustLayout();
            }
        }
    });

    // Observe the main container for changes
    const targetNode = document.querySelector('body');
    const config = { childList: true, subtree: true };
    observer.observe(targetNode, config);

    // Apply the layout fix initially
    adjustLayout();
})();

欢迎访问Greasy Fork镜像