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

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

当前为 2021-02-27 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

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