☰

Greasy Fork is available in English.

Twitter - Clean 2019 Design (Now With Light Blue™)

It's same new Twitter, except much cleaner and little bit better.

/* ==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.5.0
@license        unlicense
@preprocessor   stylus
@var checkbox   enable-light-blue   "Enable light blue colors for 'Default' theme"   1


<--------------------------------------------- NOTE --------------------------------------------->

Read about recommended uBlock filterlist! Otherwise, not all of the annoying elements are blocked!

Visit this page for more info (copy & paste it to new tab):
https://github.com/krisu5/userstyles/tree/master/Twitter%20-%20Clean%202019%20Design%20(Now%20With%20Light%20Blue)#notes

<------------------------------------------------------------------------------------------------>


==/UserStyle== */

@-moz-document domain("twitter.com") {

/* --------- Global Values, Light Blue Color Stylings, Blocked Elements, Tweaks ---------- */

:root {
    --thin-scrollbar: 8px;
    --twitter-scrollbar-color-1: rgb(247, 249, 249); /* Twitter's default `scrollbar-color` CSS color #1 */
    --twitter-scrollbar-color-2: rgb(185, 202, 211); /* Twitter's default `scrollbar-color` CSS color #2 */
}

/* ===================================================================
   ====== [TOGGLE] Enable light blue colors for 'Default' theme ======
   =================================================================== */

if enable-light-blue {
    /* v--- Body background & sidebar's search form BG fix ---v */
    body[style^="background-color: rgb(255"],
    body[style^="background-color: #FFFFFF"],
    body[style^="background-color: rgb(255"] div[data-testid="sidebarColumn"] form[role="search"],
    body[style^="background-color: #FFFFFF"] div[data-testid="sidebarColumn"] form[role="search"]
    {
        background-color: rgba(24, 161, 242, 0.05) !important;
    }

    /* v--- Search form #1 [SIDEBAR] ---v */
    body[style^="background-color: rgb(255"] div[data-testid="sidebarColumn"] form[role="search"] > div > div,
    body[style^="background-color: #FFFFFF"] div[data-testid="sidebarColumn"] form[role="search"] > div > div
    {
        background-color: #fff !important;
    }

    /* v--- Search form #2 [SIDEBAR] ---v */
    body[style^="background-color: rgb(255"] div[data-testid="sidebarColumn"] form[role="search"]:not(:focus-within) > div > div,
    body[style^="background-color: #FFFFFF"] div[data-testid="sidebarColumn"] form[role="search"]:not(:focus-within) > div > div
    {
        border-color: rgba(207, 217, 222, 0.55) !important;  
    }
    
    /* v--- Search suggestions box [SIDEBAR] ---v */
    body[style^="background-color: rgb(255"] div[data-testid="sidebarColumn"] form[role="search"] div[style^="left:"][style*="width:"], /* Empty #1 */
    body[style^="background-color: #FFFFFF"] div[data-testid="sidebarColumn"] form[role="search"] div[style^="left:"][style*="width:"], /* Empty #2 */
    body[style^="background-color: rgb(255"] div[data-testid="sidebarColumn"] form[role="search"] [id^="typeaheadDropdown"]:not([role="listbox"]), /* With search suggestions #1 */
    body[style^="background-color: #FFFFFF"] div[data-testid="sidebarColumn"] form[role="search"] [id^="typeaheadDropdown"]:not([role="listbox"])  /* With search suggestions #2 */
    {
        box-shadow: rgba(101, 119, 134, 0.05) 0px 0px 10px, rgba(101, 119, 134, 0.09) 0px 0px 3px 1px !important;
    }

    /* v--- Missing BG to sections [SETTINGS] ---v */ 
    body[style^="background-color: rgb(255"] section[aria-label="Section navigation"],
    body[style^="background-color: #FFFFFF"] section[aria-label="Section navigation"],
    body[style^="background-color: rgb(255"] section[aria-label="Section details"],
    body[style^="background-color: #FFFFFF"] section[aria-label="Section details"]
    {
        background: #fff !important;
    }
}
    
/* ==============================
   ====== Blocked elements ======
   ============================== */
   
nav a[href="/i/twitter_blue_sign_up"], /* <--- "Twitter Blue" promo [NAVIGATION] */

section[aria-labelledby^="accessible-list"] 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[role="menu"] a[href^="/i/newsletters"], /* <--- "Newsletters" menu link (promo for Revue) [MORE MENU] */

div[aria-labelledby="modal-header"][aria-modal="true"] > div:nth-child(2), /* <--- Another Revue promo (after pressing "+" button) [TWEET COMPOSE MODAL] */

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]) div[style*="position: absolute;"] .r-109y4c4.r-1p6iasa:empty, /* <--- Light gray seperator [TIMELINES] */

div[aria-label="Timeline: Explore"] a[href^="/i/connect_people"], /* <--- "Show more" link [EXPLORE PAGE] */

div[data-testid="sidebarColumn"] .css-1dbjc4n.r-1867qdf.r-1phboty.r-rs99b7.r-1udh08x:not(.r-14lw9ot):not(.r-18bvks7):not(.r-1kqtdi0), /* <--- "What's happening" / "Who to follow" boxes [SIDEBAR] */

div[data-testid="sidebarColumn"] [aria-label="Timeline: Trending now"], /* <--- "What's happening" box (just in case) [SIDEBAR] */

div[data-testid="primaryColumn"] aside[aria-label="Who to follow"], /* <--- "Suggested" box [PROFILE BIO] */

/* 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,
div[aria-label^="Timeline:"]:not([aria-label$="Explore"]) div[data-testid="UserCell"],
div.css-1dbjc4n.r-1adg3ll > a[href^="/i/related_users/"],
div[aria-label^="Timeline:"]:not([aria-label$="Explore"]) > div > div[style^="position: absolute;"] > * > div:empty
{
    display: none !important;
}


/* ====================
   ====== Tweaks ====== 
   ==================== */
  
div[data-testid="sidebarColumn"] form[role="search"] { /* <--- Search form [SIDEBAR] */
    padding-top: 15px;
    margin-top: -7px;
}

/* v--- Search suggestions box [SIDEBAR / EXPLORE] ---v */
form[role="search"] > div:nth-child(2) > div:not([id^="typeaheadDropdown"]), /* Empty */
form[role="search"] [id^="typeaheadDropdown"] /* With search suggestions */
{
    margin-top: 10px;
    border-radius: 10px;
    scrollbar-width: thin; /* Experimental CSS, Firefox only for now */
}

[role="search"] [style="width: 374px;"] { /* <--- Div before "search suggestion box" [SIDEBAR / EXPLORE] */
    width: 350px !important;
}

[data-testid="typeaheadEmptySearch"] { /* <--- Search suggestion box, "Try searching ..." text [SIDEBAR / EXPLORE] */
    padding-top: 36px !important;
}

form[role="search"] [id^="typeaheadDropdown"]::-webkit-scrollbar { /* <--- Scrollbar #1, Chromium & Safari only [SEARCH SUGGESTIONS BOX] */
    width: var(--thin-scrollbar);
    background: var(--twitter-scrollbar-color-1);
}
    
form[role="search"] [id^="typeaheadDropdown"]::-webkit-scrollbar-thumb { /* <--- Scrollbar #2, Chromium & Safari only [SEARCH SUGGESTIONS BOX] */
    background: var(--twitter-scrollbar-color-2);
}

nav[aria-label="Footer"] [role="button"] { /* <--- Push Twitter copyright text more down [FOOTER] */
    padding-bottom: 11px;
}

div[data-testid="card.wrapper"] { /* <--- Link with thumbnail left or top [TWEETS] */
    margin-top: 1px;
    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;
}

[data-testid="socialContext"] { /* <--- "X Retweeted / Liked" etc. text [TWEETS] */
    font-weight: normal !important;
}

div[aria-label="Timeline: Notifications"] div:not([role="button"]) svg { /* <--- Retweet / like / follower notification icons [NOTIFICATIONS] */
    height: 1.45em;
}
    
/* v--- Direct message sections [MESSAGES] ---v */
section[aria-label="Section navigation"] div,
section[aria-label="Section details"] div
{
    scrollbar-width: thin; /* Experimental CSS, Firefox only for now */
}

/* v--- Scrollbar #1, Chromium & Safari only [MESSAGES] ---v */
section[aria-label="Section navigation"] div::-webkit-scrollbar,
section[aria-label="Section details"] div::-webkit-scrollbar {
    width: var(--thin-scrollbar);
    background: var(--twitter-scrollbar-color-1);
}

/* v--- Scrollbar #2, Chromium & Safari only [MESSAGES] ---v */
section[aria-label="Section navigation"] div::-webkit-scrollbar-thumb,
section[aria-label="Section details"] div::-webkit-scrollbar-thumb {
    background: var(--twitter-scrollbar-color-2); 
}

@media (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/.*") {
/* ======================================
   ====== Toaster alert [SETTINGS] ======
   ====================================== */

@media (min-width: 1282px) {
    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/.*(?<!intent)\\/follow.*"), regexp(".*\\://twitter.com/.*\\/status/.*\\/(likes|retweets).*"), regexp(".*\\://twitter.com/(search|hashtag).*[?&]f=user.*"), regexp(".*\\://twitter.com/.*\\/lists/.*\\/members"), regexp(".*\\://twitter.com/.*\\/communities/.*\\/about"), regexp(".*\\://twitter.com/follower_requests") {
/* ==========================
   ====== Whitelist #1 ======
   ========================== */

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]) div[data-testid="UserCell"] { /* <--- WHITELISTED: "Who to follow" boxes [PROFILE TIMELINE] ---v */
    display: flex !important;
}
}

@-moz-document regexp(".*\\://twitter.com/.*\\/(status|moment|topics|events|lists).*") {
/* ==========================
   ====== Whitelist #2 ======
   ========================== */

/* v--- WHITELISTED: "Who to follow" boxes [PROFILE TIMELINE] ---v */ 
div > .css-1dbjc4n.r-qklmqi.r-1adg3ll > .css-1dbjc4n.r-1wtj0ep,
div.css-1dbjc4n.r-1adg3ll > a[href^="/i/related_users/"]
{
    display: flex !important;
}
}

@-moz-document regexp(".*\\://twitter.com/i/events.*"), regexp(".*\\://twitter.com/.*\\/topics/.*"), regexp(".*\\://twitter.com/.*\\/communities.*") {
/* ==========================
   ====== Whitelist #3 ======
   ========================== */

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]) div[style*="position: absolute;"] .r-109y4c4.r-1p6iasa:empty { /* <--- WHITELISTED: Light gray seperator [TIMELINES] */
    display: flex !important;
}
}