Skip to content

Twitter - Clean 2019 Design (Now With Light Blue) by krisu

Imported from https://github.com/krisu5/userstyles/raw/master/Twitter%20-%20Clean%202019%20Design%20(Now%20With%20Light%20Blue)/twitter_2019_clean_design_now_with_light_blue.user.css

Mirrored from https://raw.githubusercontent.com/krisu5/userstyles/master/Twitter%20-%20Clean%202019%20Design%20(Now%20With%20Light%20Blue)/twitter_2019_clean_design_now_with_light_blue.user.css

Screenshot of Twitter - Clean 2019 Design (Now With Light Blue)
Homepage Write a review Install Get Stylus

Details

Authorkrisu

Licenseunlicense

Categorytwitter

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

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

  • Toggleable option to change white background color to light blue (enabled by default, only in "default white theme")
  • Removes annoying elements such as trends, promoted tweets, "who to follow" boxes etc.
  • And more with recommended uBlock filterlist!
  • Other really minor tweaks / style changes.


⚠ Please read the notes!

Notes

This userstyle and filterlist works ONLY with English language (I'm not adding support for other languages).

Works best with default white theme, but other themes are supported for element blocks.

uBlock Origin filterlist (⚠ IMPORTANT!)

This userstyle can't remove everything because limitations of current CSS and complexity of layout.

So I also made uBlock filterlist that removes even more elements, that are harder to do otherwise.

Click here to see the filterlist

Extra additions for the style

Optional userstyles, made by me.

Optional userscripts by other developers, that in my option makes Twitter so much better again.

Changelog

See the full changelog here!


Userstyle is also available at Github & Greasy Fork

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==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/.*\\/list...

Reviews

No reviews yet.