X (twitter) website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
/* ==UserStyle==
@name X (twitter) optimized & customizable for wide screens
@description X (twitter) website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
@version 1.0.18
@author BreatFR (https://breat.fr)
@namespace https://breat.fr
@homepageURL https://usercssjs.breat.fr/x/x-twitter
@supportURL https://discord.gg/W7FKesJ9aG
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var color backgroundcolor "Background color" #15202b
@var checkbox hidegrok "Hide Grok" 0
@var checkbox hidemessages "Hide messages" 0
@var checkbox hidepremium "Hide premium" 1
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox hidesidebarleft "Hide sidebar L" 0
@var checkbox hidesidebarright "Hide sidebar R" 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
Bluesky https://bsky.app/profile/breatfroff.bsky.social
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== */
/* ==Support==
brave Creators https://publishers.basicattentiontoken.org/c/breatfr
Buy me a coffee https://buymeacoffee.com/breatfr
ko-fi https://ko-fi.com/breatfr
PayPal https://paypal.me/breat
==/Support== */
@-moz-document domain("x.com") {
/* =============================
X (twitter)
============================= */
/* Version */
:root {
--themeversion: 'Theme v1.0.18 by BreatFR';
--install: ' usercssjs.breat.fr/x/x-twitter';
--help: ' discord.gg/W7FKesJ9aG';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat';
}
* {
--background: backgroundcolor !important;
}
@media (min-width: 900px) {
body::after,
body::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
display: block;
font-family: inherit;
font-size: 1.2rem;
line-height: calc(53px / 2);
pointer-events: none;
position: fixed;
text-align: center;
top: 0;
width: auto;
white-space: pre-line;
z-index: 9999;
}
body::after {
content: var(--themeversion) '\A Help: ' url("https://code.breat.fr/share/images/icons/discord.png") var(--help);
left: 30%;
}
body::before {
content: 'Install: ' url("https://code.breat.fr/share/images/icons/breat.fr.png") var(--install) '\ASupport me: ' url("https://code.breat.fr/share/images/icons/ko-fi.png") var(--support1) ' · ' url("https://code.breat.fr/share/images/icons/paypal.png") var(--support2);
right: 30%;
}
}
[data-testid="ScrollSnap-List"]:not([data-testid="toolBar"] *) {
justify-content: space-between;
max-width: 100%;
}
[data-testid="ScrollSnap-List"] > div {
max-width: 25%;
}
[data-testid="ScrollSnap-List"] > div > div > div {
justify-content: center;
}
[data-testid="ScrollSnap-nextButtonWrapper"],
[data-testid="ScrollSnap-prevButtonWrapper"] {
display: none;
}
/* Background */
.r-kemksi,
.css-175oi2r:has(>[data-testid="ScrollSnap-List"]),
body {
background-color: backgroundcolor !important;
}
/* 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 hidegrok {
[aria-label*="Grok"],
[data-testid*="Grok"] {
display: none;
}
}
if hidemessages {
[style="position: absolute; bottom: 0px; width: 100%; transition: transform 300ms ease 0s; transform: translateY(0px);"],
[data-testid="chat-drawer-root"] {
display: none;
}
}
if hidepremium {
[data-testid="cellInnerDiv"]:has([href*="/i/premium_sign_up"]),
[aria-label="Premium"],
a[href="/i/premium_sign_up"],
a[href="/i/verified-choose"],
a[href="/i/verified-orgs-signup"],
div[data-testid="super-upsell-UpsellCardRenderProperties"],
.r-uaa2di {
display: none !important;
}
.css-175oi2r.r-1ifxtd0:has(div[data-testid="super-upsell-UpsellCardRenderProperties"]) {
margin-bottom: 0 !important;
}
}
if hidescrollbars {
* {
scrollbar-width: none !important;
}
}
if hidesidebarleft {
header[role="banner"] {
display: none;
}
}
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;
}
}
}
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;
}
}
/* Photos/Videos */
[data-testid="cellInnerDiv"] {
.css-175oi2r.r-9aw3ui {
margin-left: 3em;
}
.css-175oi2r.r-1adg3ll.r-1udh08x {
height: 100% !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;
}
}
.css-175oi2r.r-9aw3ui > div {
max-width: calc(100vw - 275px - 350px) !important;
}
.r-1ye8kvj {
max-width: 100%;
}
/* Preview type */
if (previewtype=="previewtypecontainblur") {
img.css-9pa8cd {
backdrop-filter: blur(100px);
object-fit: contain;
opacity: 1;
}
}
if (previewtype=="previewtypecontain") {
img.css-9pa8cd {
object-fit: contain;
opacity: 1;
}
}
if (previewtype=="previewtypecover") {
div[style="max-width:286.875px;"],
div[style="max-width: 286.875px;"] {
max-width: 100% !important;
}
img.css-9pa8cd {
object-fit: cover;
opacity: 1;
}
}
/* Make images/videos start under avatar */
.css-175oi2r.r-9aw3ui.r-1s2bzr4 {
margin-left: -50px;
}
if widemode {
main > div {
width: 100% !important;
}
[data-testid="primaryColumn"] {
max-width: calc(100% - 370px) !important;
}
[data-testid="sidebarColumn"] {
margin-right: 10px !important;
}
[data-testid="card.wrapper"] {
overflow-y: auto;
}
}
}
@-moz-document url-prefix("https://x.com/i/communities/suggested") {
/* Communities */
/* 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/") {
/* Settings */
if widemode {
[aria-labelledby="root-header"] {
min-width: fit-content !important;
}
[aria-labelledby="detail-header"] {
max-width: calc(100% - 296px - 275px) !important;
}
}
}
@-moz-document regexp("https:\\/\\/x\\.com\\/[^\\/]+\\/status\\/[^\\/]+") {
/* Status */
/* Make images/videos start under avatar */
.css-175oi2r.r-9aw3ui.r-1s2bzr4 {
margin-left: 0 !important;
}
}
@-moz-document url-prefix("https://devcommunity.x.com/") {
/* Dev community */
.menu-panel.drop-down {
left: 0% !important;
}
}