Very minimal Twitter UI style

barbudo2005

I use this CSS style with Stylus to obtain a very minimal UI only to read:

/* ADS*/
/* hide promoted tweets */
:has(meta[property="og:site_name"][content="Twitter"]),
  [data-testid="cellInnerDiv"]:has(svg + [dir="auto"]) {
  display: none;
}

/* hide what's happening section */
:has(meta[property="og:site_name"][content="Twitter"]),
  [aria-label="Timeline: Trending now"] {
  display: none !important;
}



.css-175oi2r.r-1wbh5a2.r-dnmrzs.r-1ny4l3l.r-1awozwy.r-18u37iz


{margin-top: 50px !important;}


span[style="text-overflow: unset;"]

{font-size: 10px !important;}


.css-1dbjc4n .r-eqz5dr .r-c7oifj

{color: red !important;}


section

{margin-left: 0px !important;}



time,
a[role="link"],
a[href*= "https"] span


{color: rgba(169,199,243,0.5) !important;
font-size: 6px !important;}


a[href*= "https"]


{filter: opacity(1)}





span[class="r-18u37iz"]

{line-height: 0.35 !important;}


[class="css-1dbjc4n r-1iusvr4 r-16y2uox r-1777fci r-ig955"] [class="css-1dbjc4n r-zl2h9q"]

{margin-top: 45px !important;}


.r-1hbzrj0,
article

{margin-right: 0px !important;}


[data-testid="socialContext"]

{margin-left: 0px !important;}


span

{font-size: revert !important;}

span.css-901oao

{font-size: 16px !important;}


[data-testid*="UserAvatar-Container"]

{margin-top: 0px !important;
border-radius: 4px !important;

}


*:not(span > *)



{font-family: Lato  !important;
font-size: 30px; 
font-style: normal !important;
font-weight: 400 !important;}


[role="link"]

{font-size: 12px   !important;}



[data-testid="socialContext"],
[role="link"],
[class="css-1dbjc4n r-18u37iz"],
a

{color: #73a3ff !important;}    
  
    



.r-157er04

{background-color: rgb(123, 146, 170)!important;
border: 0.1px solid   #73a3ff !important;
margin-left: -8px !important;}




[style="height: calc(100% - 4px); width: calc(100% - 4px);"],
[style*="https://pbs.twimg.com/card_img"],
[style*="https://pbs.twimg.com/media"],
[aria-label="Video insertado"],
[style*="https://pbs.twimg.com/media"],
img:has([scr*= "https://pbs.twimg.com/card_img"]),
[data-testid="card.wrapper"],
.css-9pa8cd



{border: 1px solid rgba(216,216,216,0.5) !important;
box-shadow: rgba(0,0,0,1) 5px 5px 0px 0px !important;}



*:not([data-testid*="UserAvatar-Container"])

{border-radius: 10px !important;}





.css-1dbjc4n.r-172uzmj.r-1pi2tsx.r-1ny4l3l.r-13qz1uu .css-1dbjc4n.r-172uzmj.r-1pi2tsx.r-1ny4l3l.r-13qz1uu

{border-radius: 6px !important;}




article

{border: 1px solid rgb(128, 128, 128) !important;
margin-bottom: 10px !important;
padding-bottom: 10px !important;}



*

{border: 0px solid rgb(128, 128, 128) !important;}



body
{border: 1px solid rgb(128, 128, 128) !important;}


body

{border-color: transparent !important;
margin-left: -75px !important;}


.css-1dbjc4n.r-9aw3ui,
.css-1dbjc4n.r-19qsa7v.r-rpnbwx#id__jyisjzd4uv,
#id__z64wcr05z5,
#id__x1xkl1yobdr,
#id__bngphq7rq3h,
#id__fw2nq9bap4,
#id__pjwjgtmpxz,
#id__ksntapvy5sr,
.css-1dbjc4n .r-1kqtdi0 .r-1867qdf .r-1phboty .r-rs99b7 .r-1ny4l3l .r-1udh08x .r-o7ynqc .r-6416eg,
#id__pkut0cvo4bh,



div:has([scr*= "https://pbs.twimg.com/card_img"]),
[data-testid="tweetPhoto"],
#id__cp0ds2it5mk,
[data-testid="card.wrapper"],
[aria-label="Video insertado"],
[style*="https://pbs.twimg.com/media"],
img:has([scr*= "https://pbs.twimg.com/card_img"]),
[data-testid="card.wrapper"],
[aria-label="Imagen"],
[aria-label="Cuenta verificada"]



{opacity: 0.9 !important;}


[src*="emoji"],
[aria-label="Cuenta verificada"],
[data-testid="icon-verified"],
[viewBox="0 0 24 24"]:not(:has([d="M21 12L4 2v20l17-10z"])),
span[data-testid="app-text-transition-container"],
div[data-testid="ScrollSnap-prevButtonWrapper"],
div[data-testid="ScrollSnap-SwipeableList"],
nav[role="navigation"],
[class="css-175oi2r r-aqfbo4 r-gtdqiz r-1gn8etr r-1g40b8q"],


.css-175oi2r.r-1pi2tsx.r-1wtj0ep.r-1rnoaur.r-f9dfq4.r-5f36wq,
.css-175oi2r.r-1iusvr4.r-16y2uox.r-1777fci.r-1h8ys4a.r-1bylmt5.r-13tjlyg.r-7qyjyx.r-1ftll1t,
.css-175oi2r.r-18u37iz.r-184en5c,
.css-175oi2r.r-1awozwy.r-6koalj.r-eqz5dr.r-16y2uox.r-uxrrfj.r-1777fci.r-s8bhmr.r-c9eks5.r-qi0n3.r-o7ynqc.r-6416eg.r-3al2xr.r-1ny4l3l.r-1loqt21,
.css-175oi2r.r-6b64d0.r-cpa5s6.r-16y2uox,
.css-175oi2r.r-1b3axf,
.css-175oi2r.r-thmkab.r-c2syf2.r-1loqt21.r-o7ynqc.r-6416eg.r-1cuuowz.r-1ny4l3l,
.css-175oi2r.r-1wtj0ep.r-thmkab.r-c2syf2.r-1ny4l3l,
.css-175oi2r.r-thmkab.r-w0qc3r.r-o7ynqc.r-6416eg.r-1cuuowz.r-1ny4l3l.r-1loqt21,

.css-175oi2r.r-le4f52.r-19urhcx,

.css-175oi2r.r-aqfbo4.r-1pi2tsx.r-1xcajam.r-ipm5af


{display: none !important;}

I use it at 175% page zoom.

barbudo2005

I updated the style.

barbudo2005

The following words must be translated into your language:

"Video insertado"
"Imagen"
"Cuenta verificada"

barbudo2005

Related to this post this is the code (for Adguard) to remove other annoying things on Twitter:

twitter.com,x.com#?#[class*="css"]:contains(/Who to follow|push|Premium+/)

Replace the words in your language.

barbudo2005

Code to hide retweets of an author's own tweets (uBO or Adguard):

twitter.com,x.com##:xpath(//a[@id and @href=ancestor::article[@data-testid="tweet"]//div[@data-testid="User-Name"]/div/div/a[1]/@href]/span[@data-testid="socialContext"]/ancestor::div[@data-testid="cellInnerDiv"])

barbudo2005

Code to hide the retweets made by a person or institution of a person or institution that you already follow, and thus avoid having them repeated (Adguard code):

twitter.com,x.com#?#article:contains(/(?=.*Person1)(?=.*reposted)(?=.*Person2)/)

Change reposted to your language.