Patreon responsive + customizations

Patreon website is more suitable for wide screens.
目前為 2024-06-29 提交的版本，檢視最新版本。
Wrap lines
/* ==UserStyle==
@name           Patreon responsive + customizations
@version        1.0.12
@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 {
        * {
            aspect-ratio: auto !important;
        }
        .dofSdt img {
            min-width: 100% !important;
            object-fit: cover !important;
        }        
        div[elevation="subtle"] div:not([data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div) {
            display: flex !important;
            flex-basis: 100% !important;
            flex-direction: column !important;
        }
        img,
        div[elevation="subtle"] > div,
        .djipQD > .image-grid {
            display: block !important;
            height: auto !important;
            max-height: 100% !important;            
            min-width: 100% !important;
            object-fit: contain !important;
        }
        img[loading="eager"] {
            width: auto !important;
        }
        .image-grid + .image-grid {
            margin-top: 2px;
        }
        
        .image-carousel {
            height: 112px;
            object-fit: contain;
            width: auto !important;
        }
        /* Little unblur */
        .dgyaSI {
            background: transparent !important;
            opacity: 0 !important;
        }
        .image-grid > img {
            background: transparent !important;
            object-fit: contain !important;
            min-width: 100% !important;
        }
        .jQZWvF > div > div,
        .image-grid div {
            display: none !important;
            height: 0 !important;
            width: 0 !important;
        }        
        [data-tag="locked-badge-button"] p {
            padding-right: 3em;
        }
    }
    
    /* Custom font size */
    :root,
    button,
    div,
    li,
    p,
    .cLOyGt,
    .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,
        .gSEDWh,
        .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;
        }
    }
}

@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
    div[elevation="subtle"] div:not(div:nth-child(2)>div,[data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div) {
        display: flex !important;
        flex-basis: 100% !important;
        flex-direction: column !important;
    }
    div[elevation="subtle"] div:nth-child(2) > div {
        justify-content: center;
    }
    header {
        height: 417px !important;
    }
    .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
        padding-right: 2em;
    }
}
欢迎访问Greasy Fork镜像
