☰

Reddit responsive + customizations

Reddit website is more suitable for wide screens.

Tính đến 11-01-2025. Xem phiên bản mới nhất.

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

@var    text        customfontsize  "Custom font size"      1.1rem
@var    checkbox    hidemenu        "Hide menu"             0
@var    checkbox    hidesidebar     "Hide sidebar"          0
@var    select      previewtype     "Preview type" {
    "Contain": "previewtypecontain",
    "Cover": "previewtypecover"
}
==/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("reddit.com") {
    /* Wide */
    .flex-grid--main-container-card.right-sidebar-xs {
        max-width: calc(100vw - var(--flex-nav-width));
    }
    /* .m\\:max-w-\\[calc\\(100vw-272px\\)\\], */
    .m\\:w-\\[1120px\\] /*,
    #main-content */ {
        max-width: 100% !important;
        min-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .m\\:px-lg {
        padding-left: 3rem;
        padding-right: 0;
    }
    gallery-carousel,
    shreddit-aspect-ratio {
        --gallery-initial-height: 100% !important;
        max-height: 100% !important;
        max-width: 100% !important;
        --max-height: 100% !important;
    }
    
    /* Custom font size */
    * {
        font-size: customfontsize !important;
    }
    
    if hidemenu {
        #left-sidebar-container,
        .left-sidebar {
            display: none !important;
            width: 0px !important;
        }
        
        .m\\:col-start-2 {
            grid-column: 1 / span 2 !important;
        }
    }
    
    if hidesidebar {
        #right-sidebar-container {
            display: none !important;
            width: 0 !important;
        }
        .main-container,
        .main-container > main {
            width: calc(100% - 10px);
        }
    }
    
    if hidemenu && hidesidebar {
        .main-container,
        .main-container > main {
            max-width: calc(100% - 10px) !important;
            width: 100% !important;
        }
    }
    
    if (previewtype=="previewtypecover") {
        gallery-carousel img,
        shreddit-aspect-ratio img,
        shreddit-aspect-ratio video {
            object-fit: cover !important;
        }
    }
    if (previewtype=="previewtypecontain") {
        gallery-carousel img,
        shreddit-aspect-ratio img,
        shreddit-aspect-ratio video {
            object-fit: contain !important;
        }
    }
    
}

@-moz-document url-prefix("https://www.reddit.com/r") {
    /* Wide */
    #main-content {
        max-width: calc(100% - 305px) !important;
        min-width: calc(100% - 305px) !important;
        overflow-x: hidden !important;
        width: calc(100% - 305px) !important;
    }
}