twitter-style-compact.css

twitter-style-compact.css

:root {
	--main-border-color: #888;
	--main-font-size: 14px;
	--main-font-family: sans-serif; 
	--main-col-width: 1200px;
}
div {
	border-radius: 0 !important;
}
nav[role="navigation"] {
	& a[aria-label="Premium"], a[aria-label="Grok"], a[aria-label="Explore"] {
		display: none; 
	}
}
div[aria-label="Trending"] div:has(>section div[aria-label*="Timeline"]) {
	display: none 
}
div:has(>div[data-testid="news_sidebar"]) {
	display: none 
}
div:has(>div>aside[aria-label="Who to follow"]) {
	display: none 
}
div:has(>nav[aria-label="Footer"]) {
	display: none;
}
form[aria-label="Search"] > div:first-child > div:first-child {
	border: none; 
}
[data-testid="GrokDrawer"] { 
	display: none; 
}
div:has(>aside[aria-label="Relevant people"]) { 
	display: none; 
}
div[data-testid="chat-drawer-main"] {
	position: fixed; 
	box-shadow: none; 
	left:12px;
	top:-4px;
	& > div {
		border: none; 
	}
} 
div[data-testid^="sidebar"] {
	position: fixed;
	left: 0;
	height: 0;
}
div:has(>div[id^="typeaheadDropdown"]) {
	box-shadow: unset;
	max-height: calc(-53px +100vh);
	& > div[id^="typeaheadDropdown"] {
		& > div {
			padding-bottom: 2px;
			padding-top: 2px;
		}
		& div:first-child > div:first-child > span {
			font-size: 0.8em;
		}
	}
}
main[role="main"] {
	z-index: 101;
}
header[role="banner"] {
	flex-grow: 0;
}

div:has(>div[data-testid="Tweet-User-Avatar"])+div {
	padding-bottom: 4px;	
}

div[data-testid="primaryColumn"] {
	max-width: var(--main-col-width) !important;
	& :is(div:has(>section)) {
    	max-width: var(--main-col-width) !important;
	}
}
article {
	font-size: var(--main-font-size);
	line-height: normal;
    padding-left: 0px !important;
	& div[id][data-testid*="User-Name"] {
		& a div span span {
			color: #8aff;
			font-weight: 400;
			font-size: 1.0em;
			text-shadow: 1px 1px 0px #f880, -1px -1px 1px #8af8;
		}
	}
    & div:first-child > div:not(:has(>div:first-child)) {
        padding-top: 0px !important;
    }
    & div[data-testid="Tweet-User-Avatar"] {
        flex-basis: unset;
    }
    & div[data-testid^="UserAvatar-Container"] div:has(>a[href]) {
        border-radius: unset !important;  /* Remove rounded corners from user avatars */
		overflow: visible !important;
		& >a[href] >div {
			overflow: visible;	
		}
    }
	& div:has(>div>div>div>img), div:has(>div>div>img), div:has(>div>img), div:has(>img) {
		overflow: visible !important;
		border-radius: unset !important;
	}
	& div[role="link"] {
		& div:first-child>div:first-child {
			margin-top: 0;
		}
	}
	& div[id]:has(>div>div[role="link"]) {
		margin-top: 4px
	}
	& div[style]:first-child:not(:has(>*)) {
		/* max-height: 200px !important;*/
		background-size: contain;
	}
	& div[style^="padding-bottom: 4"], div[style^="padding-bottom: 5"], div[style^="padding-bottom: 6"] {
		padding-bottom: 20% !important;
	}
	& div[style^="padding-bottom: 7"], div[style^="padding-bottom: 8"], div[style^="padding-bottom: 9"] {
		padding-bottom: 40% !important;
	}
	& div[style^="padding-bottom: 100"], div[style^="padding-bottom: 11"], div[style^="padding-bottom: 12"], div[style^="padding-bottom: 13"] {
		padding-bottom: 60% !important;
	}
	& div[data-testid^="UserAvatar-Container"] div[style^="padding-bottom: 100"] {
		padding-bottom: 100% !important;
	}
	& div > div > div > div > div > a {
		&:not([role="link"]) {
			margin-left: auto !important;
			margin-right: auto !important;
		}
	}
	& div:has(>div>div[id][role="group"]) {
		margin-left: auto;
		bottom: 100%;
		height: 0px;
	}
	& div:has(>div[data-testid="card.wrapper"]) {
		margin-top: 0px;
	}
	& div[id][role="group"] {
		margin-top: 2px;
		display:flex;
		flex-direction: row;
		flex-wrap:wrap;
		width: 360px;
		height: 24px;
		& > * {
			display: none; 
			margin-top: 0px;
			width:auto;
		}
	}
	&:not(:hover) div[id][role="group"] {
		& > *:first-child:has(span > span > span) {
			display: inline-block;
			left:90%;
		}
	}
	&:hover div[id][role="group"] {
		margin-top: 2px;
		& > * {
			display: inline-block;
		}
	}
	& button:is([aria-label="Share post"], [aria-label="Grok actions"], [aria-label="More"]) {
		display: none;
	}
}