☰

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

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

目前为 2021-02-27 提交的版本。查看 最新版本。

/* ==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.3.8
@license      unlicense
@preprocessor uso
==/UserStyle== */

@-moz-document domain("twitter.com") {
/* --------- Main Stylings, Tweaks, Blocks ---------- */

/* ==================================================
   ====== 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 !important;
}


/* ==============================
   ====== Blocked elements ======
   ============================== */

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-label^="Timeline"] .r-1adg3ll .r-k5y9r7, /* <--- Empty space [TIMELINE] */

div > .css-1dbjc4n.r-1ny4l3l > .r-k5y9r7.r-5kkj8d:empty, /* <--- Empty space [TIMELINE] */

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]):not([aria-label$="Your Lists"]) .r-1or9b2r, /* <--- Empty space [TIMELINE] */

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]):not([aria-label$="Your Lists"]) .r-tbmifm, /* <--- 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] */

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] */

/* 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-z2wwpe { /* <--- 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-z2wwpe::-webkit-scrollbar { /* <--- Scrollbar #1, Chromium & Safari only [SEARCH SUGGESTIONS BOX] */
    width: 6px;
    background: transparent;
}

form[role="search"] .r-z2wwpe::-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;
}

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

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;
}

div[aria-label^="Timeline:"]:not([aria-label$="Notifications"]) article div[style="flex-basis: 49px;"] > svg { /* <--- Icon next to "X Retweeted / Liked" text [TWEETS] */
    width: 16px !important;
}

[data-testid="socialContext"], /* <--- "X Retweeted / Liked" text [TWEETS] */
li[data-testid="TypeaheadUser"] div[style="-webkit-line-clamp: 2;"] span /* <--- "Following" text [SEARCH SUGGESTIONS] */
{
    font-weight: normal !important;
}

svg.r-yucp9h { /* <--- Retweet / like / follower icons [NOTIFICATIONS] */
    height: 1.45em;
}

@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/.*\\/follow.*"), regexp(".*\\://twitter.com/.*\\/status/.*\\/(likes|retweets).*"), regexp(".*\\://twitter.com/(search|hashtag).*[?&]f=user.*") {
/* ==========================
   ====== Whitelist #1 ======
   ========================== */

.css-1dbjc4n.r-qklmqi.r-1adg3ll > div[data-testid="UserCell"] {
    display: flex !important;
}
}

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

div > .css-1dbjc4n.r-1ny4l3l > .r-k5y9r7.r-5kkj8d: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: flex !important;
}
}

@-moz-document regexp(".*\\://twitter.com/explore.*") {
/* ==========================
   ====== Whitelist #3 ======
   ========================== */

div > .css-1dbjc4n.r-1ny4l3l > .r-k5y9r7.r-5kkj8d:empty,

div > .css-1dbjc4n.r-qklmqi.r-1adg3ll > .css-1dbjc4n.r-1wtj0ep
{
    display: flex !important;
}
}

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

div[aria-label^="Timeline:"]:not([aria-label$="Explore"]):not([aria-label$="Your Lists"]) .r-1or9b2r,
div[aria-label^="Timeline:"]:not([aria-label$="Explore"]):not([aria-label$="Your Lists"]) .r-tbmifm
{
    display: flex !important;
}
}