/* ==UserStyle==
@name Twitter - Clean 2019 Design (Now With Light Blue™)
@description It's same new Twitter, except much cleaner and little bit better.
@author krisu (https://github.com/krisu5)
@namespace github.com/krisu5/userstyles
@homepageURL https://github.com/krisu5/userstyles/tree/master/Twitter%20-%20Clean%202019%20Design%20(Now%20With%20Light%20Blue)
@supportURL https://github.com/krisu5/userstyles/issues
@version 1.2.5
@license unlicense
@preprocessor uso
==/UserStyle== */
@-moz-document domain("twitter.com") {
/* ==================================================
====== Colors (only enabled in white theme) ======
================================================== */
body[style^="background-color: rgb(255, 255, 255);"],
body[style^="background-color: rgb(255, 255, 255);"] div[data-testid="sidebarColumn"] form[role="search"]
{
background-color: rgba(24, 161, 242, 0.05) !important;
}
body[style^="background-color: rgb(255, 255, 255);"] .r-1u4rsef { /* <--- Hover / focus color [TWEETS] */
background-color: rgba(230, 236, 240, 0.55) !important;
}
/* v--- Missing BG to sections [SETTINGS] ---v */
body[style^="background-color: rgb(255, 255, 255);"] section[aria-label="Section navigation"],
body[style^="background-color: rgb(255, 255, 255);"] section[aria-label="Section details"]
{
background: #fff;
}
/* ==============================
====== Blocked elements ======
============================== */
div > .css-1dbjc4n.r-1adg3ll > .css-1dbjc4n.r-1or9b2r:empty, /* <--- Empty space [TIMELINE] */
div[aria-label^="Timeline"] .r-1adg3ll .r-k5y9r7, /* <--- Empty space [TIMELINE] */
div[aria-label^="Timeline:"][aria-label$="’s Tweets"] .r-1adg3ll .r-k5y9r7:empty, /* <--- Empty space [PROFILE TIMELINE] */
div[aria-label="Timeline: Conversation"] div > .css-1dbjc4n.r-1adg3ll > .css-1dbjc4n.r-1or9b2r:empty, /* <--- Empty space [TWEET CONVERSATION] */
.css-1dbjc4n.r-1adg3ll a[href^="/search?q="][href*="&f=user"], /* <--- "See more" link [SEARCH PAGE] */
div[role="menu"] a[href^="https://ads.twitter.com/"], /* <--- "Promote Mode" & "Twitter Ads" menu links [MORE MENU] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-1u4rsef.r-9cbz99, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, WHITE] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-1uaug3w.r-1uhd6vh, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, DIM] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-1ysxnx4.r-k0dy70, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, LIGHTS OUT] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-e84r5y.r-1tlfku8, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, WHITE, INCREASE COLOR CONTRAST] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-16hm58k.r-9wg5yf, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, DIM, INCREASE COLOR CONTRAST] */
div[data-testid="sidebarColumn"] .css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-b3or1f.r-1yj08i2, /* <--- "Trending now" & "Who to follow" boxes [SIDEBAR, LIGHTS OUT, INCREASE COLOR CONTRAST] */
/* v--- "Who to follow" boxes [PROFILE TIMELINE] ---v */
div[aria-label^="Timeline: "][aria-label$="’s Tweets"] div .r-1or9b2r:empty,
div > .css-1dbjc4n.r-qklmqi.r-1adg3ll > .css-1dbjc4n.r-1wtj0ep,
.css-1dbjc4n.r-qklmqi.r-1adg3ll > div[data-testid="UserCell"],
div.css-1dbjc4n.r-1adg3ll > a[href^="/i/related_users/"]
{
display: none !important;
}
/* ==========================
====== Misc. tweaks ======
========================== */
div[data-testid="sidebarColumn"] form[role="search"] {
padding-top: 15px;
padding-bottom: 3px;
margin-top: -7px;
}
form[role="search"] .r-1f0042m { /* <--- Search suggestions box */
margin-top: 8px;
border-radius: 10px;
scrollbar-width: thin; /* Experimental CSS, Firefox only for now */
scrollbar-color: #1da1f2 transparent; /* Experimental CSS, Firefox only for now */
}
form[role="search"] .r-1f0042m::-webkit-scrollbar { /* <--- Scrollbar #1, Chromium & Safari only [SEARCH SUGGESTIONS BOX] */
width: 6px;
background: transparent;
}
form[role="search"] .r-1f0042m::-webkit-scrollbar-thumb { /* <--- Scrollbar #2, Chromium & Safari only [SEARCH SUGGESTIONS BOX] */
background-color: #1da1f2;
}
div > .css-1dbjc4n.r-qklmqi.r-1adg3ll:empty { /* <--- Empty element with border [TIMELINE] */
border-bottom-width: 0;
}
.css-1dbjc4n.r-t23y2h.r-1phboty.r-rs99b7.r-1udh08x.r-o7ynqc.r-1j63xyz[aria-haspopup="false"] { /* <--- Link with thumbnail left or top [TWEETS] */
margin-top: 2px;
margin-bottom: 2px;
}
div[data-testid="tweet"] .css-1dbjc4n.r-18u37iz.r-1wtj0ep { /* <--- Div with name, username, time and "more" menu [TWEETS] */
margin-bottom: 1px;
}
div[data-testid="previewInterstitial"] * { /* <--- For videos / GIFs, prevents accidental selecting [TWEETS] */
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
svg.r-yucp9h { /* <--- Retweet / like / follower icons [NOTIFICATIONS] */
height: 1.45em;
}
@media only screen and (min-width: 1282px) {
/* v--- Toaster alert ---v */
div[data-testid="toast"] {
border-radius: 15px 15px 0 0;
width: 600px;
margin: 0 0 0 -114px;
}
div[data-testid="toast"] > div {
padding-left: 0;
padding-right: 0;
text-align: center;
}
div[data-testid="toast"] > div > span {
width: 580px;
display: block;
}
}
}
@-moz-document regexp(".*\\://twitter.com/settings/.*") {
@media only screen and (min-width: 1282px) {
/* v--- Toaster alert [SETTINGS] ---v */
div[data-testid="toast"] {
width: 990px;
margin: 0 0 0 272px;
}
div[data-testid="toast"] > div > span {
width: 970px;
display: block;
}
}
}
@-moz-document regexp(".*\\://twitter.com/settings/.*"), regexp(".*\\://twitter.com/.*\\/follow.*"), regexp(".*\\://twitter.com/.*\\/status/.*\\/retweets.*"), regexp(".*\\://twitter.com/.*\\/status/.*\\/likes.*"), regexp(".*\\://twitter.com/search.*&f=user"), regexp(".*\\://twitter.com/hashtag/.*&f=user") {
/* ==========================
====== Whitelist #1 ======
========================== */
.css-1dbjc4n.r-qklmqi.r-1adg3ll > div[data-testid="UserCell"] {
display: inherit !important;
}
}
@-moz-document regexp(".*\\://twitter.com/explore"), regexp(".*\\://twitter.com/.*\\/status/.*") {
/* ==========================
====== Whitelist #2 ======
========================== */
div > .css-1dbjc4n.r-1adg3ll > .css-1dbjc4n.r-1or9b2r:empty,
div > .css-1dbjc4n.r-qklmqi.r-1adg3ll > .css-1dbjc4n.r-1wtj0ep,
.css-1dbjc4n.r-qklmqi.r-1adg3ll > div[data-testid="UserCell"],
div.css-1dbjc4n.r-1adg3ll > a[href^="/i/related_users/"]
{
display: inherit !important;
}
}
