xcellent.user.css

/* ==UserStyle==

@name					Xcellent
@namespace				github.com/Himither
@homepageURL				https://github.com/Himither/Xcellent
@supportURL				https://github.com/Himither/Xcellent/issues
@version				1.0.20
@updateURL				https://raw.githubusercontent.com/Himither/Xcellent/master/xcellent.user.css
@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 checkbox				timeline-grok				"Hide grok stuff" 				0

@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-hideFollow			"Hide sidebar 'Who to follow'"			0
@var checkbox				sidebar-hideTrends			"Hide sidebar 'What's happening'"		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") {

	/* Formerly known as Twitter ¯\_(ツ)_/¯ */
	: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);
	}

	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) !important;
		}

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

	if timeline-grok {

		div[data-testid="GrokDrawer"],
		button[aria-label*="Grok"],
		a[aria-label*="Grok"],
		button:has(path[d*="21h4.241L6.446"]),
		[data-testid="tweet"] div:has(> nav) {
			display: none;
		}
	}

	/* ━━━━━━⮞ 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 or other-hateBorders {
		[data-testid="primaryColumn"] nav {
			border-bottom-color: transparent;
		}

		[data-testid="primaryColumn"] [role="separator"] {
			background-color: var(--bg);
		}
	}

	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-hideTrends {
		[data-testid="sidebarColumn"]:has(section) div:has(> section) {
			display: none !important;
		}
	}

	if sidebar-hideLegalNotice {
		[data-testid="sidebarColumn"]:has(section) div:has(> nav) {
			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;
		}
	}
}

@-moz-document url-prefix("https://x.com/home") {

	/* Home /*
	/* ━━━━━━⮞ Sidebar */
	if sidebar-hideFollow {
		[data-testid="sidebarColumn"]:has(section) div:has(> div > aside) {
			display: none !important;
		}
	}
}