Adjustable timeline width, hide ads, hide stuff, show stuff only on hover & more
Xcellent by Himither
Mirrored from https://raw.githubusercontent.com/Himither/Xcellent/master/xcellent.user.css
Details
AuthorHimither
LicenseMIT
Categoryx
Created
Updated
Size9.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Issues here
Source code
/* ==UserStyle==
@name Xcellent
@namespace github.com/Himither
@homepageURL https://github.com/Himither/Xcellent
@supportURL https://github.com/Himither/Xcellent/issues
@version 1.0.13
@description Adjustable timeline width, hide ads, hide stuff, show stuff only on hover & more
@author Himither
@license MIT
@preprocessor stylus
@var checkbox wide "Make it wide" 1
@var text Timeline "━━━━━━⮞【Timeline】" '_'
@var range timeline-width "Timline max-width" [900, 600, 1800, 1, "px"]
@var checkbox timeline-header "Non-sticky timline header" 0
@var checkbox timeline-hideFollow "Hide 'Who to follow'" 0
@var checkbox timeline-hideAds "Hide Ads" 0
@var checkbox timeline-outerBorders "Hide borders around timeline" 0
@var checkbox timeline-postBorders "Hide borders between posts" 0
@var checkbox timeline-imgBorders "Hide borders around images" 0
@var checkbox timeline-quoteBorders "Hide borders around quotes" 0
@var checkbox timeline-quoteImg "Round top corners for quote images" 0
@var text Sidemenu "━━━━━━⮞【Sidemenu】" '_'
@var checkbox sidemenu-hover "Show menu only on hover" 0
@var checkbox sidemenu-hidePremium "Hide 'Premium' button" 0
@var checkbox sidemenu-hideJobs "Hide 'Jobs' button" 0
@var checkbox sidemenu-hideVerifiedOrgs "Hide 'Verified Orgs' button" 0
@var checkbox sidemenu-hidePost "Hide 'Post' button" 0
@var text Sidebar "━━━━━━⮞【Sidebar】" '_'
@var checkbox sidebar-hover "Show sidebar only on hover" 0
@var checkbox sidebar-hideSearch "Hide sidebar searchbar" 0
@var checkbox sidebar-hideLike "Hide sidebar 'You might like'" 0
@var checkbox sidebar-hideTrends "Hide sidebar trends" 0
@var checkbox sidebar-hideLegalNotice "Hide sidebar legal notice" 0
@var text Other "━━━━━━⮞【Other】" '_'
@var checkbox other-hoverMessages "Show Messages only on hover" 0
@var checkbox other-hateBorders "Make all borders transparent" 0
==/UserStyle== */
@-moz-document url-prefix("https://x.com") {
:root:has(body[style*="rgb(0"]) {
--bg: rgb(0, 0, 0);
}
:root:has(body[style*="rgb(21"]) {
--bg: rgb(21, 32, 43);
}
:root:has(body[style*="rgb(255"]) {
--bg: rgb(255, 255, 255);
}
/* Formerly known as Twitter ¯\_(ツ)_/¯ */
if wide {
html {
overflow-x: hidden;
}
header[role="banner"] {
position: absolute !important;
left: 0 !important;
}
header[role="banner"] > div {
position: absolute !important;
left: 0 !important;
margin-left: 0 !important;
}
header[role="banner"] > div > div {
left: 0 !important;
}
main[role="main"] > div {
width: 100dvw !important;
}
[data-testid="primaryColumn"] {
position: absolute !important;
left: 275px !important;
width: auto !important;
margin: auto !important;
max-width: timeline-width !important;
right: calc(382px + 32px) !important;
transform: translateX(0) !image-orientation;
}
[data-testid="primaryColumn"] > div > div:last-child,
[data-testid="primaryColumn"] > div > div:last-child > div > div {
min-width: unset !important;
max-width: unset !important;
width: 100% !important;
margin: 0 !important;
}
[data-testid="sidebarColumn"] {
position: absolute !important;
right: 0 !important;
padding-right: 32px !important;
margin-right: 0 !important;
width: 382px !important;
min-width: unset !important;
max-width: unset !important;
}
[data-testid="sidebarColumn"] > div {
align-items: flex-end !important;
width: 100% !important;
}
[data-testid="sidebarColumn"] > div > div {
width: 350px !important;
}
if sidemenu-hover or sidebar-hover {
[data-testid="primaryColumn"] {
transition: all 300ms ease-in-out !important;
}
}
if sidemenu-hover {
[data-testid="primaryColumn"] {
left: 0 !important;
}
header[role="banner"] > div > div {
background-color: var(--bg) !important;
}
}
if sidebar-hover {
[data-testid="primaryColumn"] {
z-index: 0 !important;
right: 32px !important;
}
[data-testid="sidebarColumn"]:hover {
width: 414px !important;
background-color: var(--bg) !important;
}
}
@media screen and (max-width: 1264px) {
header[role="banner"] > div > div > div {
width: 68px !important;
}
[data-testid="primaryColumn"] {
left: 68px !important;
}
}
@media screen and (max-width: 987px) {
[data-testid="primaryColumn"] {
right: 0 !important;
}
}
@media screen and (max-width: 499px) {
[data-testid="primaryColumn"] {
left: 0 !important;
}
}
}
/* ━━━━━━⮞ Timeline */
if timeline-header {
[data-testid="primaryColumn"] > div > div:first-child {
position: unset !important;
}
}
if timeline-outerBorders {
[data-testid="primaryColumn"] {
border-color: transparent !important
}
}
if timeline-hideFollow {
div[aria-label$="posts"] > div > div:not(:has(:is(article, a[href^="/i/status"], [role="progressbar"], button > div > svg))) {
display: none !important;
}
}
if timeline-hideAds {
main section > div > div > div:has(article > div > div > div > div > div > div > div > div > div > span) {
display: none !important;
}
}
if timeline-postBorders {
[data-testid="primaryColumn"] nav,
[data-testid="primaryColumn"] section[role="region"] > div > div > div > div {
border-color: transparent !important
}
}
if timeline-postBorders or other-hateBorders {
[data-testid="primaryColumn"]:has(article) > div > div:nth-child(4),
[data-testid="primaryColumn"] section[role="region"] > div > div > div > div > div {
background-color: transparent !important;
}
}
if timeline-imgBorders {
[data-testid="primaryColumn"] div[id^="id__"] > div > div > div > div {
border-color: transparent !important
}
}
if timeline-quoteBorders {
[data-testid="primaryColumn"] div[id^="id__"] > div:last-child[role="link"] {
border-color: transparent !important
}
}
if timeline-quoteImg {
div[data-testid="tweetPhoto"] {
border-radius: 16px;
}
}
/* ━━━━━━⮞ Side menu */
if sidemenu-hover {
header[role="banner"] > div > div {
opacity: 0 !important;
transition: all 300ms ease-in-out !important;
}
header[role="banner"] > div > div:hover {
opacity: 1 !important;
}
if wide {
header[role="banner"] > div > div {
left: calc(-275px + 32px) !important;
}
header[role="banner"] > div > div:hover {
left: 0px !important;
}
@media screen and (max-width: 1264px) {
header[role="banner"] > div > div {
left: calc(-88px + 32px) !important;
}
header[role="banner"] > div > div:hover {
left: 0 !important;
}
}
}
}
if sidemenu-hidePremium {
header a[data-testid="premium-hub-tab"] {
display: none;
}
}
if sidemenu-hideJobs {
header a[data-testid="jobs-tab-item"] {
display: none;
}
}
if sidemenu-hideVerifiedOrgs {
header a[data-testid="vo-signup-tab"] {
display: none;
}
}
if sidemenu-hidePost {
header div:has(> a[data-testid="SideNav_NewTweet_Button"]) {
display: none;
}
}
/* ━━━━━━⮞ Sidebar */
if sidebar-hover {
[data-testid="sidebarColumn"] {
height: 100dvh !important;
opacity: 0 !important;
transition: all 300ms ease-in-out !important;
}
[data-testid="sidebarColumn"]:hover {
opacity: 1 !important;
}
if wide {
[data-testid="sidebarColumn"] {
transition: all 300ms ease-in-out !important;
}
[data-testid="sidebarColumn"] {
transform: translateX(calc(100% - 32px)) !important;
}
[data-testid="sidebarColumn"] {
position: fixed !important;
}
[data-testid="sidebarColumn"]:hover {
transform: translateX(0) !important;
}
[data-testid="sidebarColumn"]:hover > div > div > div > div > div > div:first-child {
transform: translateX(0) !important;
}
}
}
if sidebar-hideSearch {
[data-testid="sidebarColumn"]:has(section) > div > div > div > div > div > div:nth-child(1) {
display: none !important;
}
}
if sidebar-hideLike {
[data-testid="sidebarColumn"]:has(section) > div > div > div > div > div > div:nth-last-child(3) {
display: none !important;
}
}
if sidebar-hideTrends {
[data-testid="sidebarColumn"]:has(section) > div > div > div > div > div > div:nth-last-child(2) {
display: none !important;
}
}
if sidebar-hideLegalNotice {
[data-testid="sidebarColumn"]:has(section) > div > div > div > div > div > div:nth-last-child(1) {
display: none !important;
}
}
/* ━━━━━━⮞ Others */
if other-hoverMessages {
div#layers div[data-testid="DMDrawer"] {
opacity: 0 !important;
transform: translateX(90%) !important;
margin-right: 0px !important;
padding-right: 32px !important;
transition: all 300ms ease-in-out !important;
}
div#layers div[data-testid="DMDrawer"]:hover {
opacity: 1 !important;
transform: translateX(0) !important;
}
}
if other-hateBorders {
* {
border-color: transparent !important;
}
}
}