☰

X (twitter) responsive + customizations

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

As of 2024-06-29. See the latest version.

  1. /* ==UserStyle==
  2. @name           X (twitter) responsive + customizations
  3. @version        1.0.6
  4. @description    X (twitter) website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/x-twitter
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var checkbox   hidemessages        "Hide messages"         0
  13. @var checkbox   hidepremium         "Hide premium"          1
  14. @var checkbox   hidesidebarleft     "Hide sidebar on left"  0
  15. @var checkbox   hidesidebarright    "Hide sidebar on right" 0
  16. @var checkbox   logocentred         "Logo centred"          1
  17. @var select     previewtype         "Preview type"          {
  18.     "Contain + Blur": "previewtypecontainblur",
  19.     "Contain": "previewtypecontain",
  20.     "Cover": "previewtypecover"
  21. }
  22. @var checkbox   oldlogo             "Old logo"              0
  23. @var checkbox   widemode            "Wide mode"             1
  24. ==/UserStyle== */
  25.  
  26. /* === Credits ===
  27. Website         https://breat.fr
  28. facebook        https://www.facebook.com/breatfroff
  29. mastodon        https://mastodon.social/@breat_fr
  30. telegram        https://t.me/breatfr
  31. vk              https://vk.com/breatfroff
  32. X (twitter)     https://x.com/breatfroff
  33. === Credits === */
  34.  
  35. @-moz-document domain("x.com") {  
  36.     /* ===================================================================================================================================
  37.     Version
  38. =================================================================================================================================== */
  39.     :root {
  40.         --themeversion: 'Theme v1.0.6';
  41.         --author: 'by BreatFR';
  42.         --link: ' gitlab.com/breatfr/x-twitter ';
  43.     }
  44.  
  45.     header > div > div > div > div.css-175oi2r.r-1habvwh::after {
  46.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  47.         background-clip: text;
  48.         -webkit-background-clip: text;
  49.         color: transparent;
  50.         content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
  51.         bottom: -15%;
  52.         display: flex;
  53.         flex-direction: column;
  54.         font-size: 18px;
  55.         left: 0;
  56.         position: absolute;
  57.         text-align: center;
  58.         width: max-content;
  59.         white-space: pre-line;
  60.     }
  61. /* ===================================================================================================================================
  62.     Hide scrollbars
  63. =================================================================================================================================== */
  64.     .css-1lbk8wf,
  65.     :root ::-webkit-scrollbar {
  66.         scrollbar-width: none !important;
  67.         -ms-overflow-style: none !important;
  68.         -moz-overflow-style: none !important;
  69.         -webkit-overflow-style: none !important;
  70.         width: 0px;
  71.     }    
  72.     ::-webkit-scrollbar {
  73.         display: none;
  74.         width: 0px;
  75.     }
  76.     
  77. /* ===================================================================================================================================
  78.     Header
  79. =================================================================================================================================== */
  80.     header {
  81.         align-items: flex-start !important;
  82.         flex-grow: 0 !important;
  83.         margin-left: -3% !important;
  84.         max-width: 335px !important;
  85.         -webkit-box-align: start !important;
  86.     }
  87.     
  88.     /* Logo */
  89.     if logocentred {
  90.         #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 {
  91.             transform: translateX(195%);
  92.             
  93.         }
  94.     }    
  95.     
  96.     if oldlogo {
  97.         div[data-testid=interstitialGraphic] svg.r-13v1u17,
  98.         h1 > a[href="/home"] svg,
  99.         svg[aria-label="Twitter"],
  100.         #placeholder svg {
  101.             background-color: rgb(29, 155, 240);
  102.             fill: none;
  103.             mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGNsYXNzPSJyLTEzdjF1MTcgci00cXRxcDkgci15eXl5b28gci0xNnkydW94IHItOGt6MGdrIHItZG5tcnpzIHItYm53cWltIHItMXBsY3J1aSByLWxydmliciByLWxyc2xscCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Zz48cGF0aCBkPSJNMjMuNjQzIDQuOTM3Yy0uODM1LjM3LTEuNzMyLjYyLTIuNjc1LjczM2E0LjY3IDQuNjcgMCAwIDAgMi4wNDgtMi41NzggOS4zIDkuMyAwIDAgMS0yLjk1OCAxLjEzIDQuNjYgNC42NiAwIDAgMC03LjkzOCA0LjI1IDEzLjIyOSAxMy4yMjkgMCAwIDEtOS42MDItNC44NjhjLS40LjY5LS42MyAxLjQ5LS42MyAyLjM0MkE0LjY2IDQuNjYgMCAwIDAgMy45NiA5LjgyNGE0LjY0NyA0LjY0NyAwIDAgMS0yLjExLS41ODN2LjA2YTQuNjYgNC42NiAwIDAgMCAzLjczNyA0LjU2OCA0LjY5MiA0LjY5MiAwIDAgMS0yLjEwNC4wOCA0LjY2MSA0LjY2MSAwIDAgMCA0LjM1MiAzLjIzNCA5LjM0OCA5LjM0OCAwIDAgMS01Ljc4NiAxLjk5NSA5LjUgOS41IDAgMCAxLTEuMTEyLS4wNjUgMTMuMTc1IDEzLjE3NSAwIDAgMCA3LjE0IDIuMDkzYzguNTcgMCAxMy4yNTUtNy4wOTggMTMuMjU1LTEzLjI1NCAwLS4yLS4wMDUtLjQwMi0uMDE0LS42MDJhOS40NyA5LjQ3IDAgMCAwIDIuMzIzLTIuNDF6Ii8+PC9nPjwvc3ZnPg==');
  104.             -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGNsYXNzPSJyLTEzdjF1MTcgci00cXRxcDkgci15eXl5b28gci0xNnkydW94IHItOGt6MGdrIHItZG5tcnpzIHItYm53cWltIHItMXBsY3J1aSByLWxydmliciByLWxyc2xscCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Zz48cGF0aCBkPSJNMjMuNjQzIDQuOTM3Yy0uODM1LjM3LTEuNzMyLjYyLTIuNjc1LjczM2E0LjY3IDQuNjcgMCAwIDAgMi4wNDgtMi41NzggOS4zIDkuMyAwIDAgMS0yLjk1OCAxLjEzIDQuNjYgNC42NiAwIDAgMC03LjkzOCA0LjI1IDEzLjIyOSAxMy4yMjkgMCAwIDEtOS42MDItNC44NjhjLS40LjY5LS42MyAxLjQ5LS42MyAyLjM0MkE0LjY2IDQuNjYgMCAwIDAgMy45NiA5LjgyNGE0LjY0NyA0LjY0NyAwIDAgMS0yLjExLS41ODN2LjA2YTQuNjYgNC42NiAwIDAgMCAzLjczNyA0LjU2OCA0LjY5MiA0LjY5MiAwIDAgMS0yLjEwNC4wOCA0LjY2MSA0LjY2MSAwIDAgMCA0LjM1MiAzLjIzNCA5LjM0OCA5LjM0OCAwIDAgMS01Ljc4NiAxLjk5NSA5LjUgOS41IDAgMCAxLTEuMTEyLS4wNjUgMTMuMTc1IDEzLjE3NSAwIDAgMCA3LjE0IDIuMDkzYzguNTcgMCAxMy4yNTUtNy4wOTggMTMuMjU1LTEzLjI1NCAwLS4yLS4wMDUtLjQwMi0uMDE0LS42MDJhOS40NyA5LjQ3IDAgMCAwIDIuMzIzLTIuNDF6Ii8+PC9nPjwvc3ZnPg==');
  105.             mask-position: center;
  106.             mask-repeat: no-repeat;
  107.             -webkit-mask-position: center;
  108.             -webkit-mask-repeat: no-repeat;
  109.         }
  110.     }
  111.     
  112. /* ===================================================================================================================================
  113.     Wide mode
  114. =================================================================================================================================== */
  115.     if widemode {
  116.         main > div {
  117.             width: 100% !important;
  118.         }
  119.         [data-testid="primaryColumn"] {
  120.             max-width: calc(100% - 370px) !important;
  121.         }
  122.         [data-testid="sidebarColumn"] {
  123.             margin-right: 10px !important;
  124.             max-width: 350px;
  125.         }
  126.     }
  127.  
  128. /* ===================================================================================================================================
  129.     Photos/Videos
  130. =================================================================================================================================== */    
  131.     [data-testid="cellInnerDiv"] {
  132.         .css-175oi2r.r-1adg3ll.r-1udh08x {
  133.             height: auto !important;
  134.             width: 100% !important;
  135.         }
  136.         a[href*="https://pbs.twimg.com/media/"] > div {
  137.             align-items: center !important;
  138.             height: 100% !important;
  139.             min-width: 100% !important;
  140.         }
  141.         .r-k200y {
  142.             align-self: unset;
  143.         }
  144.     }
  145.     .r-1ye8kvj {
  146.         max-width: 100%;
  147.     }
  148.  
  149. /* ===================================================================================================================================
  150.     Preview type
  151. =================================================================================================================================== */
  152.         if (previewtype=="previewtypecontainblur") {
  153.             img.css-9pa8cd {
  154.                 backdrop-filter: blur(100px);
  155.                 -o-backdrop-filter: blur(100px);
  156.                 -moz-backdrop-filter: blur(100px);
  157.                 -ms-backdrop-filter: blur(100px);
  158.                 -webkit-backdrop-filter: blur(100px);
  159.                 object-fit: contain;
  160.                 opacity: 1;
  161.             }
  162.         }
  163.         if (previewtype=="previewtypecontain") {
  164.             img.css-9pa8cd {
  165.                 object-fit: contain;
  166.                 opacity: 1;
  167.             }
  168.             .r-vvn4in {
  169.                 background: none !important;
  170.             }
  171.         }
  172.         if (previewtype=="previewtypecover") {
  173.             img.css-9pa8cd {
  174.                 object-fit: cover;
  175.                 opacity: 1;            
  176.             }
  177.         }
  178.     
  179.     /* Make images/videos start under avatar */
  180.     .css-175oi2r.r-9aw3ui.r-1s2bzr4 {
  181.         margin-left: -50px;
  182.     }
  183.     
  184. /* ===================================================================================================================================
  185.     Hide messages
  186. =================================================================================================================================== */
  187.     if hidemessages {
  188.         [style="position: absolute; bottom: 0px; width: 100%; transition: transform 300ms ease 0s; transform: translateY(0px);"] {
  189.             display: none;
  190.         }
  191.     }
  192.     
  193. /* ===================================================================================================================================
  194.     Hide premium
  195. =================================================================================================================================== */
  196.     if hidepremium {
  197.         [aria-label="Premium"],
  198.         a[href="/i/premium_sign_up"],
  199.         a[href="/i/verified-choose"],
  200.         a[href="/i/verified-orgs-signup"],
  201.         .css-175oi2r.r-1hycxz.r-gtdqiz > div > div > div > div:nth-child(3),
  202.         .r-uaa2di {
  203.             display: none !important;
  204.         }
  205.     }
  206.  
  207. /* ===================================================================================================================================
  208.     Hide sidebar on left
  209. =================================================================================================================================== */
  210.     if hidesidebarleft {
  211.         header[role="banner"] {
  212.             display: none;
  213.         }
  214.     }
  215.  
  216. /* ===================================================================================================================================
  217.     Hide sidebar on right
  218. =================================================================================================================================== */
  219.     if hidesidebarright {
  220.         [data-testid="sidebarColumn"] {
  221.            display: none;
  222.         }
  223.         [data-testid="primaryColumn"] {
  224.             max-width: 100% !important;
  225.         }
  226.         [data-testid="cellInnerDiv"] {
  227.             .css-175oi2r.r-1adg3ll.r-1udh08x {
  228.                 height: auto !important;
  229.                 width: 100% !important;
  230.             }
  231.             a[href*="https://pbs.twimg.com/media/"] > div {
  232.                 height: 100% !important;
  233.                 min-width: 100% !important;
  234.             }
  235.             .r-k200y {
  236.                 align-self: unset;
  237.             }
  238.         }
  239.     }
  240. }
  241.  
  242. @-moz-document url-prefix("https://x.com/i/communities/suggested") {
  243. /* ===================================================================================================================================
  244.     Fix suggested communities view
  245. =================================================================================================================================== */
  246.     .css-175oi2r.r-1q9bdsx.r-1b7u577.r-1udh08x.r-7bouqp,
  247.     .css-175oi2r.r-1adg3ll.r-1udh08x {
  248.         height: 96px !important;
  249.         width: 96.95px !important;
  250.     }
  251.     img.css-9pa8cd {
  252.         min-height: 96px !important;
  253.         max-width: 96.95px !important;
  254.     }
  255. }
  256.  
  257. @-moz-document url-prefix("https://x.com/settings/account") {
  258. /* ===================================================================================================================================
  259.     Fix account view
  260. =================================================================================================================================== */
  261.     .r-1ye8kvj {
  262.         max-width: 75% !important;
  263.     }
  264. }
  265.  
  266.  
  267. @-moz-document url-prefix("https://devcommunity.x.com/") {
  268.     .menu-panel.drop-down {
  269.         left: 0% !important;
  270.     }
  271. }