☰

X (twitter) responsive + customizations

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址