Last active
February 16, 2025 22:10
-
-
Save lo48576/6c66c99bf584d51d12a71071ae8989ff to your computer and use it in GitHub Desktop.
Firefox の Stylus で使える、何とは言わない某の新 UI 用 CSS 。英語版 UI でテストしているので日本語版で使うならラベル文字列とかちょっと調整してね
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Left sidebar | |
*/ | |
/* Hide menu labels */ | |
nav[aria-label="メインメニュー"], | |
nav[aria-label="Primary"] { | |
a[role="link"], | |
div[role="button"] { | |
> div > div:last-child:not(:first-child) { | |
display: none; | |
} | |
} | |
} | |
/* Hide "Tweet" Button */ | |
a[aria-label="ツイートする"], | |
a[aria-label="Tweet"], | |
a[data-testid="SideNav_NewTweet_Button"] { | |
/*display: none;*/ | |
padding-left: 0; | |
padding-right: 0; | |
border-radius: initial; | |
min-width: 40px; | |
} | |
/* Erase left margin of the sidebar */ | |
/* NOTE: This disables whole UI centering. */ | |
header.r-obd0qt.r-16y2uox.r-1g40b8q[role="banner"] { | |
flex-grow: 0; | |
} | |
/* Shrink left sidebar width */ | |
header[role="banner"] .r-o96wvk { | |
width: 80px; | |
} | |
/* Remove left margin */ | |
header[role="banner"] .r-i5ea98 { | |
margin-left: 0 | |
} | |
/* Hide "explore" item */ | |
nav[aria-label="Primary"] a[href="/explore"], | |
[aria-label="調べたいものを検索"] { | |
display: none; | |
} | |
/* Shrink account switcher */ | |
div[data-testid="SideNav_AccountSwitcher_Button"] > .css-1dbjc4n.r-obd0qt.r-16y2uox { | |
display: none !important; | |
} | |
/* Hide logo */ | |
h1[role="heading"] a[aria-label="X"] { | |
display: none; | |
} | |
/* Hide "Twitter Blue" item */ | |
a[aria-label="Twitter Blue"] { | |
display: none; | |
} | |
/* Hide "Communities" item */ | |
a[aria-label="Communities"], a[aria-label="コミュニティ"] { | |
display: none; | |
} | |
/* Hide "Premium" item */ | |
a[aria-label="Premium"], a[aria-label="プレミアム"] { | |
display: none; | |
} | |
/* Hide "Business" or "Verified Orgs" item */ | |
a[aria-label="Business"], a[aria-label="Verified Orgs"] { | |
display: none; | |
} | |
/* Hide "Grok" item */ | |
a[aria-label="Grok"] { | |
display: none; | |
} | |
/* Hide "Jobs" item */ | |
a[aria-label="Jobs"] { | |
display: none; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Adjust columns size | |
*/ | |
/* Expand main column */ | |
/* This seems to be `[data-testid="primaryColumn"]`. */ | |
/* Note that a column in the account setting page is `section.r-1ye8kvj[role="region"][aria-label="Section navigation"]`. */ | |
.r-1ye8kvj:not([role="region"]) { | |
/* Note that `.r-1ye8kvj` is used for modal tweet box. | |
* modal box can be matched by `[aria-labelledby="modal-header"][aria-modal="true"]` selector. | |
*/ | |
max-width: inherit; | |
} | |
/* Shrink right sidebar */ | |
/* This seems to be `[data-testid="sidebarColumn"]` */ | |
/* | |
.r-1ovo9ad { | |
width: initial; | |
max-width: 200px; | |
} | |
*/ | |
/* Stop search bar from overflowing from the viewport */ | |
div:has(>div >div[aria-label="Trending"]), div:has(>div >div >div >form[role="search"]) { | |
/* Original value was `fixed`, which makes the element overflow out of the viewport. */ | |
position: static; | |
} | |
} | |
@-moz-document url-prefix("https://twitter.com/i/bookmarks"), url-prefix("https://x.com/i/bookmarks") { | |
/* | |
* Adjust columns size (revert) | |
*/ | |
/* Shrink the main column */ | |
.r-1ye8kvj:not([role="region"]) { | |
/* Note that `.r-1ye8kvj` is used for modal tweet box. | |
* modal box can be matched by `[aria-labelledby="modal-header"][aria-modal="true"]` selector. | |
*/ | |
/* 600px is from `.r-1ye8kvj` */ | |
max-width: 600px; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Hide right sidebar items | |
*/ | |
/* Erase "Subscribe to Premium" */ | |
/* [role="complementary"] */ | |
div:has(>aside[aria-label="Subscribe to Premium"][role="complementary"]) { | |
display: none; | |
} | |
/* Erase "Trending now" */ | |
div:has(>section[role="region"] >div[aria-label="Timeline: Trending now"]) { | |
display: none; | |
} | |
/* Erase "Who to follow" */ | |
div:has(>div >aside[aria-label="Who to follow"][role="complementary"]) { | |
display: none; | |
} | |
/* Erase footer */ | |
div:has(>nav[aria-label="Footer"][role="navigation"]) { | |
display: none; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Search bar | |
*/ | |
/* Hide mushimegane icon in input box */ | |
form[aria-label="Search Twitter"][role="search"] svg { | |
display: none; | |
} | |
/* Hide looking glass icon in candidate list */ | |
form[aria-label="Search Twitter"] [role="option"] .css-1dbjc4n.r-18kxxzh.r-5f2r5o { | |
display: none; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Disable round icon | |
*/ | |
/* Reset border radius */ | |
/* Icon in each tweet may have `[data-testid="tweet"]`, | |
* but icons in profile pages doesn't seem to have specific `data-testid` attribute. | |
* Note that this selector may disable rounding of other stuff as a side effect. | |
*/ | |
a .r-sdzlij { | |
border-radius: initial; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Tweet dialog | |
*/ | |
/* Modal tweet dialog */ | |
[aria-labelledby="modal-header"][aria-modal="true"] .r-1ye8kvj { | |
min-width: 40em; | |
width: 65vw; | |
} | |
} | |
@-moz-document url-prefix("https://twitter.com/explore"), url-prefix("https://x.com/explore") { | |
/* | |
* Search (explore) page | |
*/ | |
section.css-1dbjc4n[aria-labelledby^="accessible-list-"][role="region"] { | |
display: none; | |
} | |
} | |
@-moz-document url("https://twitter.com/home"), url("https://x.com/home") { | |
/* | |
* Hide "Show {n} posts" since it will appear just to push new advertisement (which can be hidden by CSS) | |
*/ | |
div[aria-label="Timeline: Your Home Timeline"] { | |
/* `div[data-testid="cellInnerDiv"]` is used for each post and a "Show {n} posts" entry */ | |
div[data-testid="cellInnerDiv"]:first-child { | |
div.css-175oi2r.r-1igl3o0.r-qklmqi >button { | |
/* .r-1pl7oy7 has `min-height: 48px;`, and this is not used for containers of real posts */ | |
display: none; | |
} | |
} | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* | |
* Disable "read before RT" dropdown menu item | |
*/ | |
div[data-testid="Dropdown"] >a.r-1awozwy { | |
display: none; | |
} | |
} | |
@-moz-document domain("twitter.com"), domain("x.com") { | |
/* Hide impression */ | |
a[href^="/"][href$="/analytics"][aria-label$="analytics"] { | |
display: none; | |
} | |
} | |
@-moz-document domain("x.com") { | |
/* Hide "Grok actions" button */ | |
button[aria-label="Grok actions"] { | |
display: none; | |
} | |
} | |
@-moz-document domain("x.com") { | |
/* Hide Grok drawer */ | |
div[data-testid="GrokDrawer"] { | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment