☰

Miconisomi.com Styling

Apply custom styles to miconisomi.com

// ==UserScript==
// @name         Miconisomi.com Styling
// @namespace    https://miconisomi.com
// @version      0.1
// @license      GPL-3.0-only
// @description  Apply custom styles to miconisomi.com
// @author       Nicoeevee
// @match        *://*.miconisomi.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==
(function() {
    'use strict';

    function rearrangeLayout(boxBase) { // Pass boxBase as an argument
        if (!boxBase) {
            console.warn("BoxBase element not found.");
            return;
        }

        const customImg = boxBase.querySelector('#CustomImg'); // Use querySelector within boxBase
        const versionData = boxBase.querySelector('#VersionData');
        const postData = boxBase.querySelector('#PostData');
        const downloadBt = boxBase.querySelector('#DownloadBt');
        const tweetBt = boxBase.querySelector('#TweetBt');
        const deleteForm = boxBase.querySelector('form');

        if (!customImg || !versionData || !postData || !downloadBt || !tweetBt || !deleteForm) {
            console.warn("One or more child elements not found within a BoxBase.");
            return;
        }

        const imageColumn = document.createElement('div');
        imageColumn.id = 'imageColumn';
        const dataColumn = document.createElement('div');
        dataColumn.id = 'dataColumn';

        imageColumn.style.display = 'flex';
        imageColumn.style.flexDirection = 'column';
        imageColumn.style.marginRight = '8px';

        dataColumn.style.display = 'flex';
        dataColumn.style.flexDirection = 'column';
        dataColumn.style.flexGrow = '1';

        imageColumn.appendChild(customImg);
        dataColumn.appendChild(versionData);
        dataColumn.appendChild(postData);
        dataColumn.appendChild(downloadBt);
        // dataColumn.appendChild(tweetBt);
        // dataColumn.appendChild(deleteForm);

        while (boxBase.firstChild) {
            boxBase.removeChild(boxBase.firstChild);
        }
        boxBase.appendChild(imageColumn);
        boxBase.appendChild(dataColumn);

        boxBase.style.display = 'flex';
        boxBase.style.flexDirection = 'row';
        boxBase.style.flexWrap = 'nowrap';
        boxBase.style.width = 'auto';
        boxBase.style.height = 'auto';
        boxBase.style.borderRadius = '0px';
        boxBase.style.margin = '8px';

    }

    function styleAllChildren(element) {
        element.style.position = 'relative';
        element.style.margin = '0px';

        const children = element.children;
        for (let i = 0; i < children.length; i++) {
            styleAllChildren(children[i]);
        }
    }


        function styleMain() {
        const mainElement = document.getElementById('Main');
        if (mainElement) {
            mainElement.style.position = 'relative';
            // Remove properties by setting them to empty string or initial/unset
            mainElement.style.left = 'unset';       // or mainElement.style.removeProperty('left');
            mainElement.style.marginRight = 'unset'; // or mainElement.style.removeProperty('margin-right');
            mainElement.style.transform = 'unset';  // or mainElement.style.removeProperty('transform');
            mainElement.style.minWidth = 'unset';   // or mainElement.style.removeProperty('min-width');
            mainElement.style.maxWidth = 'unset';   // or mainElement.style.removeProperty('max-width');
            mainElement.style.width = 'unset';      // or mainElement.style.removeProperty('width');


            mainElement.style.display = 'flex';
            mainElement.style.justifyContent = 'center';
            mainElement.style.flexWrap = 'wrap';
        }
    }

    // Get ALL BoxBase elements
    const boxBaseElements = document.querySelectorAll('div#BoxBase');

    // Loop through each BoxBase element
    boxBaseElements.forEach(boxBase => {
        styleAllChildren(boxBase);  // Apply styles to the current BoxBase and its descendants
        rearrangeLayout(boxBase); // Apply layout rearrangement to the current BoxBase
    });

    styleMain(); // Apply styles to #Main

})();