A new userstyle
x.com by madmax17
Details
Authormadmax17
LicenseNo License
Categoryhttps://x.com
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name x.com
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://x.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 */
}
body {
scrollbar-color: rgb(185, 202, 211) rgb(247, 249, 249);
background-color: rgba(24, 161, 242, 0.05) !important;
}
/* ===================================================================
====== [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(".*\\://x.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(".*\\://x.com/settings/.*"),
regexp(".*\\://x.com/.*(?<!intent)\\/follow.*"),
regexp(".*\\://x.com/.*\\/status/.*\\/(likes|retweets).*"),
regexp(".*\\://x.com/(search|hashtag).*[?&]f=user.*"),
regexp(".*\\://x.com/.*\\/lists/.*\\/members"),
regexp(".*\\://x.com/.*\\/communities/.*\\/about"),
regexp(".*\\://x.com/follower_requests") {
/* ...