☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

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

/* ==UserStyle==
@name           Patreon responsive + customizations
@version        1.0.9
@description    Patreon website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/patreon
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    bigimages   "Big images"            1
@var    text        fontsize    "Custom font size"      1.2rem
@var    checkbox    nojump      "No Jump to level up"   1
@var    checkbox    nocomments  "No comments"           0
@var    checkbox    widemode    "Wide mode"             1
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */
@-moz-document domain("patreon.com") {
    :root {
        --fontsize: fontsize;
    }
    
    /* Loved */
    [data-tag="like-button"][aria-checked="true"] > div > svg path {
        fill: #c6374d;
    }
    
    /* No double scrollbar */
    #__next > .sc-uiqay7-0.cnwZin {
        overflow: hidden;
    }
    
    if bigimages {
        .kZrqiR,
        .gFIRbI,
        .ekfOSd,
        .dlPwPr,
        .kBqPDk {
            height: 100%;
            max-height: 100%;
        }
        .gFIRbI,
        .ekfOSd,
        .kZrqiR {
            display: block;
        }
        .kZrqiR img {
            margin-bottom: 2px;
            object-fit: cover;
        }
        .image-carousel {
            height: 112px;
            object-fit: cover;
            width: auto;
        }
        /* Little unblur */
        .dgyaSI {
            background: transparent !important;
            opacity: 0 !important;
        }
        .image-grid > img {
            background: transparent !important;
        }
        .jQZWvF > div > div,
        .image-grid div {
            display: none !important;
            height: 0 !important;
            width: 0 !important;
        }
    }
    
    /* Custom font size */
    :root,
    button,
    div,
    li,
    p,
    .cuiKYE,
    .cQjDCC,
    .fxePXf,
    .jYEggK {
        font-size: fontsize !important;
    }    
    .vWGl {
        font-size: calc(var(--fontsize) - .2rem)!important;
    }
    span > .vWGl {
        font-size: inherit !important;
    } 
    .gxOVkK {
        font-size: calc(var(--fontsize) - .4rem)!important;
    }
    
    if nocomments {
        [data-tag="content-card-comment-thread-container"],
        .bmnjsr {
            display: none !important;
        }
    }
    
    if nojump {
        .sc-jrQzAO.bAzCwM,
        .sc-o4u8m1-2 > div > div:nth-child(2),
        [data-tag="upgrade-free-membership-button"],
        [data-tag="free-membership-upgrade-cta"] {
            display: none !important;
            height: 0 !important;
            max-height: 0 !important;
        }
    }
    
    if widemode {
        section.fZbiny>div,
        .bNdQpa,
        .bnFcNI,
        .cuHeCZ,
        .hGVSIy,
        .idaEYe,
        .kYRjdn,
        .lghRlU,
        .McnWk,
        .PSylB {
            max-width: 100% !important;
        }
        .gwGwhu {
            padding: 0;
        }

        .bcGqVn {
            grid-template-columns: 80% 20%;
        }

        .jwWBqC {
            grid-column-end: span 1;
        }
        
        .leSNuf:nth-child(odd)> .dGdDmr {
            flex-direction: row-reverse !important;
        }
        
        .sc-o4u8m1-4.hBubtn > div > div > h2 {
            margin-top: 1rem;
        }        
        .dzWUmz,
        .cgDWfu {
            max-width: max-content !important;
        }
    }
}