☰

Lemmy Style Cleanup

Reformat widescreen desktop to look more like Reddit

当前为 2023-06-13 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Lemmy Style Cleanup
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Reformat widescreen desktop to look more like Reddit
// @author       mershed_perderders, CodingAndCoffee
// @match        https://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=itjust.works
// @grant        none
// @license      MIT
// ==/UserScript==

// adapted from, and credit to, https://github.com/soundjester/lemmy_monkey/blob/main/old.reddit

(function() {
    'use strict';
    //Thank you God!
    var isLemmy = document.head.querySelector("[name~=Description][content]").content === "Lemmy";

    //special thanks to StackOverflow - the one true source of all code, amen.
    function GM_addStyle(css) {
        const style = document.getElementById("GM_addStyleBy8626") || (function() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = "GM_addStyleBy8626";
            document.head.appendChild(style);
            return style;
        })();
        const sheet = style.sheet;
        sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
    }
    
    function makeClickableHeaders () {
        document.querySelectorAll("button[aria-label='Collapse'], button[aria-label='Expand']").forEach(function (it) {
            if (typeof it.parentNode.dataset['clickableHeader'] !== 'string') {
                it.parentNode.addEventListener('click', function() {
                    it.click();
                });
                it.parentNode.setAttribute('data-clickable-header', true);
            }
        });
    }

    //specific Lemmy-to-Old.Reddit style reformats
    if (isLemmy) {
        GM_addStyle(".upvote, .downvote, .vote-bar>.unselectable { font-size: 1.5em; }");
        GM_addStyle(".container-fluid, .container-lg, .container-md, .container-sm, .container-xl {   margin-right: unset !important; margin-left: unset !important;}");
        GM_addStyle(".container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 100% !important; }");
        GM_addStyle(".col-md-4 { flex: 0 0 20% !important; max-width: 20%; }");
        GM_addStyle(".col-md-8 { flex: 0 0 80% !important; max-width: 80%; }");
        GM_addStyle(".col-sm-2 { flex: 0 0 9% !important; max-width: 10%; }");
        GM_addStyle(".col-1 { flex: 0 0 4% !important; max-width: 5%; }");
        GM_addStyle(".mb-2, .my-2 { margin-bottom: 0.3rem !important; }");
        GM_addStyle(".thumbnail {   min-height: 100px; max-height: 125px; }");
        GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
        GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
        GM_addStyle(".vote-bar { margin-top: 15px !important; }");
        GM_addStyle(".comments {  margin-left: 20px; }"); // removed max-width parameter that squished nested comments

        // make header clickable to collapse/expand
        GM_addStyle("div.d-flex:has([aria-label='Collapse']) { cursor: pointer; }");
        GM_addStyle("div.d-flex:has([aria-label='Expand']) { cursor: pointer; }");
        GM_addStyle("div.d-flex:has([aria-label='Collapse']) div.flex-lg-grow-0 { flex-grow: 1 !important; }");
        GM_addStyle("div.d-flex:has([aria-label='Expand']) div.flex-lg-grow-0 { flex-grow: 1 !important; }");
        GM_addStyle("div.d-flex:has([aria-label='Collapse']) a.unselectable::after { content: 'points' }");
        GM_addStyle("div.d-flex:has([aria-label='Expand']) a.unselectable::after { content: 'points' }");

        makeClickableHeaders();
        setInterval(makeClickableHeaders, 50);

        // rearrange upvote/downvote and reply buttons
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='reply'] { order: 1 }");
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='reply']::after { content: ' reply'; }");
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='Upvote'] { order: 2; margin-left: auto; }");
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='Downvote'] { order: 3 }");
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='more'] { order: 10 }");

        // upvote / downvote hover colors
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='Upvote']:hover { color: #3498db !important }");
        GM_addStyle("div.comment div.d-flex:nth-child(2) [aria-label='Downvote']:hover { color: #e74c3c !important }");
    }
})();