X (twitter) responsive + customizations

X (twitter) website is more suitable for wide screens.

Versión del día 05/06/2024. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

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

@var checkbox   hidemessages        "Hide messages"         0
@var checkbox   hidepremium         "Hide premium"          1
@var checkbox   hidesidebarleft     "Hide sidebar on left"  0
@var checkbox   hidesidebarright    "Hide sidebar on right" 0
@var checkbox   logocentred         "Logo centred"          1
@var select     previewtype         "Preview type"          {
    "Contain + Blur": "previewtypecontainblur",
    "Contain": "previewtypecontain",
    "Cover": "previewtypecover"
}
@var checkbox   oldlogo             "Old logo"              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/+5ZLC2qntf6xmYmI0
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("x.com") {    
/* ===================================================================================================================================
    Hide scrollbars
=================================================================================================================================== */
    .css-1lbk8wf,
    :root ::-webkit-scrollbar {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -moz-overflow-style: none !important;
        -webkit-overflow-style: none !important;
        width: 0px;
    }    
    ::-webkit-scrollbar {
        display: none;
        width: 0px;
    }
    
/* ===================================================================================================================================
    Header
=================================================================================================================================== */
    header {
        align-items: flex-start !important;
        flex-grow: 0 !important;
        margin-left: -3% !important;
        max-width: 335px !important;
        -webkit-box-align: start !important;
    }
    
    /* Logo */
    if logocentred {
        #react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div > div.css-175oi2r.r-1habvwh > div.css-175oi2r.r-dnmrzs.r-1559e4e {
            transform: translateX(195%);
            
        }
    }    
    
    if oldlogo {
        div[data-testid=interstitialGraphic] svg.r-13v1u17,
        h1 > a[href="/home"] svg,
        svg[aria-label="Twitter"],
        #placeholder svg {
            background-color: rgb(29, 155, 240);
            fill: none;
            mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGNsYXNzPSJyLTEzdjF1MTcgci00cXRxcDkgci15eXl5b28gci0xNnkydW94IHItOGt6MGdrIHItZG5tcnpzIHItYm53cWltIHItMXBsY3J1aSByLWxydmliciByLWxyc2xscCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Zz48cGF0aCBkPSJNMjMuNjQzIDQuOTM3Yy0uODM1LjM3LTEuNzMyLjYyLTIuNjc1LjczM2E0LjY3IDQuNjcgMCAwIDAgMi4wNDgtMi41NzggOS4zIDkuMyAwIDAgMS0yLjk1OCAxLjEzIDQuNjYgNC42NiAwIDAgMC03LjkzOCA0LjI1IDEzLjIyOSAxMy4yMjkgMCAwIDEtOS42MDItNC44NjhjLS40LjY5LS42MyAxLjQ5LS42MyAyLjM0MkE0LjY2IDQuNjYgMCAwIDAgMy45NiA5LjgyNGE0LjY0NyA0LjY0NyAwIDAgMS0yLjExLS41ODN2LjA2YTQuNjYgNC42NiAwIDAgMCAzLjczNyA0LjU2OCA0LjY5MiA0LjY5MiAwIDAgMS0yLjEwNC4wOCA0LjY2MSA0LjY2MSAwIDAgMCA0LjM1MiAzLjIzNCA5LjM0OCA5LjM0OCAwIDAgMS01Ljc4NiAxLjk5NSA5LjUgOS41IDAgMCAxLTEuMTEyLS4wNjUgMTMuMTc1IDEzLjE3NSAwIDAgMCA3LjE0IDIuMDkzYzguNTcgMCAxMy4yNTUtNy4wOTggMTMuMjU1LTEzLjI1NCAwLS4yLS4wMDUtLjQwMi0uMDE0LS42MDJhOS40NyA5LjQ3IDAgMCAwIDIuMzIzLTIuNDF6Ii8+PC9nPjwvc3ZnPg==');
            -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGNsYXNzPSJyLTEzdjF1MTcgci00cXRxcDkgci15eXl5b28gci0xNnkydW94IHItOGt6MGdrIHItZG5tcnpzIHItYm53cWltIHItMXBsY3J1aSByLWxydmliciByLWxyc2xscCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Zz48cGF0aCBkPSJNMjMuNjQzIDQuOTM3Yy0uODM1LjM3LTEuNzMyLjYyLTIuNjc1LjczM2E0LjY3IDQuNjcgMCAwIDAgMi4wNDgtMi41NzggOS4zIDkuMyAwIDAgMS0yLjk1OCAxLjEzIDQuNjYgNC42NiAwIDAgMC03LjkzOCA0LjI1IDEzLjIyOSAxMy4yMjkgMCAwIDEtOS42MDItNC44NjhjLS40LjY5LS42MyAxLjQ5LS42MyAyLjM0MkE0LjY2IDQuNjYgMCAwIDAgMy45NiA5LjgyNGE0LjY0NyA0LjY0NyAwIDAgMS0yLjExLS41ODN2LjA2YTQuNjYgNC42NiAwIDAgMCAzLjczNyA0LjU2OCA0LjY5MiA0LjY5MiAwIDAgMS0yLjEwNC4wOCA0LjY2MSA0LjY2MSAwIDAgMCA0LjM1MiAzLjIzNCA5LjM0OCA5LjM0OCAwIDAgMS01Ljc4NiAxLjk5NSA5LjUgOS41IDAgMCAxLTEuMTEyLS4wNjUgMTMuMTc1IDEzLjE3NSAwIDAgMCA3LjE0IDIuMDkzYzguNTcgMCAxMy4yNTUtNy4wOTggMTMuMjU1LTEzLjI1NCAwLS4yLS4wMDUtLjQwMi0uMDE0LS42MDJhOS40NyA5LjQ3IDAgMCAwIDIuMzIzLTIuNDF6Ii8+PC9nPjwvc3ZnPg==');
            mask-position: center;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
        }
    }
    
/* ===================================================================================================================================
    Wide mode
=================================================================================================================================== */
    if widemode {
        main > div {
            width: 100% !important;
        }
        [data-testid="primaryColumn"] {
            max-width: calc(100% - 370px) !important;
        }
        [data-testid="sidebarColumn"] {
            margin-right: 10px !important;
            max-width: 350px;
        }
    }

/* ===================================================================================================================================
    Photos/Videos
=================================================================================================================================== */    
    [data-testid="cellInnerDiv"] {
        .css-175oi2r.r-1adg3ll.r-1udh08x {
            height: auto !important;
            width: 100% !important;
        }
        a[href*="https://pbs.twimg.com/media/"] > div {
            align-items: center !important;
            height: 100% !important;
            min-width: 100% !important;
        }
        .r-k200y {
            align-self: unset;
        }
    }
    .r-1ye8kvj {
        max-width: 100%;
    }

/* ===================================================================================================================================
    Preview type
=================================================================================================================================== */
        if (previewtype=="previewtypecontainblur") {
            img.css-9pa8cd {
                backdrop-filter: blur(100px);
                -o-backdrop-filter: blur(100px);
                -moz-backdrop-filter: blur(100px);
                -ms-backdrop-filter: blur(100px);
                -webkit-backdrop-filter: blur(100px);
                object-fit: contain;
                opacity: 1;
            }
        }
        if (previewtype=="previewtypecontain") {
            img.css-9pa8cd {
                object-fit: contain;
                opacity: 1;
            }
            .r-vvn4in {
                background: none !important;
            }
        }
        if (previewtype=="previewtypecover") {
            img.css-9pa8cd {
                object-fit: cover;
                opacity: 1;            
            }
        }
    
    /* Make images/videos start under avatar */
    .css-175oi2r.r-9aw3ui.r-1s2bzr4 {
        margin-left: -50px;
    }
    
/* ===================================================================================================================================
    Hide messages
=================================================================================================================================== */
    if hidemessages {
        [style="position: absolute; bottom: 0px; width: 100%; transition: transform 300ms ease 0s; transform: translateY(0px);"] {
            display: none;
        }
    }
    
/* ===================================================================================================================================
    Hide premium
=================================================================================================================================== */
    if hidepremium {
        [aria-label="Premium"],
        a[href="/i/verified-choose"],
        .css-175oi2r.r-1hycxz.r-gtdqiz > div > div > div > div:nth-child(3),
        .r-uaa2di {
            display: none !important;
        }
    }

/* ===================================================================================================================================
    Hide sidebar on left
=================================================================================================================================== */
    if hidesidebarleft {
        header[role="banner"] {
            display: none;
        }
    }

/* ===================================================================================================================================
    Hide sidebar on right
=================================================================================================================================== */
    if hidesidebarright {
        [data-testid="sidebarColumn"] {
           display: none;
        }
        [data-testid="primaryColumn"] {
            max-width: 100% !important;
        }
        [data-testid="cellInnerDiv"] {
            .css-175oi2r.r-1adg3ll.r-1udh08x {
                height: auto !important;
                width: 100% !important;
            }
            a[href*="https://pbs.twimg.com/media/"] > div {
                height: 100% !important;
                min-width: 100% !important;
            }
            .r-k200y {
                align-self: unset;
            }
        }
    }
}

@-moz-document url-prefix("https://x.com/i/communities/suggested") {
/* ===================================================================================================================================
    Fix suggested communities view
=================================================================================================================================== */
    .css-175oi2r.r-1q9bdsx.r-1b7u577.r-1udh08x.r-7bouqp,
    .css-175oi2r.r-1adg3ll.r-1udh08x {
        height: 96px !important;
        width: 96.95px !important;
    }
    img.css-9pa8cd {
        min-height: 96px !important;
        max-width: 96.95px !important;
    }
}

@-moz-document url-prefix("https://x.com/settings/account") {
/* ===================================================================================================================================
    Fix account view
=================================================================================================================================== */
    .r-1ye8kvj {
        max-width: 75% !important;
    }
}


@-moz-document url-prefix("https://devcommunity.x.com/") {
    .menu-panel.drop-down {
        left: 0% !important;
    }
}