mc百科页面焕新

Display each mod in a card layout with miniature covers in the top right corner
目前为 2024-04-23 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         mc百科页面焕新
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Display each mod in a card layout with miniature covers in the top right corner
// @author       klnon
// @match        https://www.mcmod.cn/modlist.html*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';


    // Ensure script only runs on the specific page
    if (window.location.search === '?mcver=1.20.1&api=2&sort=lastedittime&page=47') {
        window.addEventListener('load', function() {
            const blocks = document.querySelectorAll('.modlist-block');
            const listContainer = document.createElement('div');
            listContainer.style.margin = '20px auto'; // Center the container
            listContainer.style.display = 'flex';
            listContainer.style.flexWrap = 'wrap';
            listContainer.style.justifyContent = 'center'; // Ensure cards are centered

            blocks.forEach(block => {
                const modCard = document.createElement('div');
                modCard.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
                modCard.style.border = '1px solid #ccc'; // Add border
                modCard.style.borderRadius = '10px'; // Rounded corners
                modCard.style.transition = '0.3s';
                modCard.style.width = '300px'; // Set a fixed width for each card
                modCard.style.margin = '10px';
                modCard.style.padding = '10px'; // Padding inside the card
                modCard.style.backgroundColor = '#fff'; // Card background color
                modCard.style.textAlign = 'left'; // Text align left
                modCard.style.position = 'relative'; // Required for absolute positioning of the cover

                modCard.onmouseover = function() {
                    this.style.boxShadow = '0 8px 16px rgba(0,0,0,0.6)';
                };
                modCard.onmouseout = function() {
                    this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
                };

                const title = block.querySelector('.title').innerHTML;
                const description = block.querySelector('.intro-content span') ? block.querySelector('.intro-content span').textContent.trim() : '无描述';
                const coverImage = block.querySelector('.cover img');
                coverImage.style.width = '100%'; // Set image width to 100% of its container
                coverImage.style.height = 'auto'; // Auto-adjust the height to maintain aspect ratio

                const coverDiv = document.createElement('div');
                coverDiv.style.position = 'absolute';
                coverDiv.style.top = '10px';
                coverDiv.style.right = '10px';
                coverDiv.style.width = '60px'; // Reduced size of the cover container
                coverDiv.style.height = '40px'; // Setting a fixed height for cover container
                coverDiv.style.overflow = 'hidden'; // Prevents content from spilling out
                coverDiv.appendChild(coverImage);

                modCard.innerHTML = `<div class="title"><strong>${title}</strong></div><hr style="margin: 10px 0;"><p>${description}</p>`;
                modCard.appendChild(coverDiv);

                listContainer.appendChild(modCard);
            });

            const contentArea = document.querySelector('.modlist-list-frame');
            contentArea.innerHTML = '';
            contentArea.appendChild(listContainer);

            // Make the body visible again after content replacement
            document.body.style.visibility = 'visible';
        });
    }
})();
欢迎访问Greasy Fork镜像
