Twitter of Zen Mode by KABA

/* ==UserStyle==
@name         Twitter of Zen Mode
@version      20250322.17.24
@namespace    https://userstyles.world/user/KABA
@description  Hide menu and sidebar until hover. Additional adjustments to make the article easier to read.
@author       KABA
@license      No License
==/UserStyle== */

@-moz-document regexp("https://(x|twitter).com/.*") {
/* Base */

/*
	NOTE: Highlight style for identification
	outline: solid #f003;
*/

:root {
	--navbar-zIndex: 1;

	--show-duration: .64s;
	--show-delay: .2s;
	--hide-duration: .4s;
	--hide-delay: 0;

	--transition:
		var(--show-duration)
		var(--show-delay)
		ease-in-out;

	--border-color: light-dark(#eff3f4, #2f3336);
	--text-black: #0f1419; /* = rgb(15, 20, 25); */
	
	--bg-white: #fff;
	--bg-black: #000;
	--bg-color: light-dark(var(--bg-white), var(--bg-black));
	--bg-faded: light-dark(
		color-mix(in hsl, #0000, var(--bg-white) 85%),
		color-mix(in hsl, #0000, var(--bg-black) 65%)
	);

	--break-point--Menu: 500px;
	--break-point--Sidebar: 988px;

	&:has(body[style*="rgb(21, 32, 43)"]) {
		--border-color: rgb(56, 68, 77);
	}
}


/* - Keyboard shortcut Button */
h2:has(a[href="/i/keyboard_shortcuts"]) {
	@media (width >= 500px /* var(--break-point--Menu) */ ) {
		position: fixed;
		bottom: 0;
		z-index: var(--navbar-zIndex);
		margin: 1.75rem 1.5rem;

		width: revert;
		height: revert;
		overflow: revert;
		clip: revert;

		/* Hide Texts */
		span {
			display: block;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		a {
			/* NOTE: Not focusable due to `tabindex="-1"` */
			color: var(--text-black) !important;
			text-decoration: none;
			outline: revert; /* NOTE: Hidden on hover while focus-within */

			--darken: 0%;
			--shadow:
				0 0 0 1px #0001,
				0 1px 1px #0002;
			--border-b: 1px;

			&:focus { --darken: 2% }
			&:hover { --darken: 4% }
			&:active {
				--darken: 8%;
				--shadow:
					0 0 0 1px #0001 inset,
					0 2px 1px #0002 inset;
				--border-b: 0;
			}

			/* Key button */
			&::before {
				display: grid;
				place-content: center;
				height: 2.25rem;
				aspect-ratio: 1.125 / 1;

				box-shadow: var(--shadow);
				border-radius: 4px;
				border-bottom: solid var(--border-b) #cfd9de;
				background: color-mix(in hsl, #f7f9f9, #000 var(--darken));

				content: "?";
				transition: background .2s;
			}
		}
	}
}
/* Adjust z-index */
#layers { z-index: calc(var(--navbar-zIndex) + 1) !important }
header[role="banner"] {
	&, :has(> &) { z-index: revert }

	> * { z-index: revert }
	> * > * {
		z-index: var(--navbar-zIndex);
		backdrop-filter: blur(4px);
	}
}
[role="main"] { z-index: 1 } /* Avoid Navbar backdrop-filter */
/* Layer check styles */
/* NOTE: Menu overlaps when changing screen width */
/* header[role="banner"] {
	&, > * > * { background: #f003; opacity: 1 !important }
}
[data-testid="primaryColumn"] { background: #00f3 }
main[class] { :has(> &) { background: #0f03 } } */


/* - Hide Navbar, Sidebar, Message */
header[role="banner"] > * > *, /* NOTE: z-index animates strangely when Applied directly to header */
[data-testid="sidebarColumn"],
#layers > * > * > :has([data-testid="DMDrawer"]) {
	transition: var(--transition);

	&:not(:hover, :focus-within) {
		transition-duration: var(--hide-duration);
		transition-delay:    var(--hide-delay);
		opacity: 0;
	}

	/* Disable click on Hidden */
	> * {
		transition:
			calc(
				var(--show-duration) +
				var(--show-delay)
			)
			allow-discrete
		;
	}
	&:not(:hover, :focus-within) {
		> * {
			pointer-events: none;
			transition-duration: inherit;
		}
	}
}
/* NOTE: #layers contains Menu, Modal, Message drawer, etc. */
/*
	- Menu           : `:has([role="menu"])`
	- Modal          : `:has([role="dialog"])`
	- Message drawer : `:has([data-testid="DMDrawer"])`
*/


/* - Modal */
[role="dialog"][aria-labelledby="modal-header"] {
	> div {
		/* Contents */
		[data-viewportview="true"] {

			/* Header */
			/* > div:has(~ div:last-child) {} */
			/* Body */
			> div:last-child {
				border-top: solid 1px var(--border-color);
			}
		}
	}
}


/* - Navbar */
header[role="banner"] {
	nav[role="navigation"] {
		/* Fix width to actual link range */
		a, button {
			width: 90%; /* = Post button width */
			align-items: stretch;
			> * { justify-content: flex-start }
		}
	}
}


/* - Primary column */
[data-testid="primaryColumn"] { border-color: #0000 }


/* - Components */
[dir]:has(.DraftEditor-root) {
	font-size: 15px;
	line-height: 20px;
}
/* Tag list */
[role="listbox"] { border-radius: 12px } /* = Tooltip size */
}

@-moz-document regexp("https://(x|twitter).com/intent/post?.*") {
/* Adjust z-index for Keyboard shortcut Button */
main[class] {
	:has(> &) { z-index: var(--navbar-zIndex) }
}
}

@-moz-document regexp("https://(x|twitter).com/.*") {
/* Home */
/* NOTE: URL changes even on home if modal is open */

/* - Primary column */
[data-testid="primaryColumn"] {
	> * > * {
		&,
		/* Border bottom of Post block */
		~ :has([data-testid="toolBar"]) > :empty:last-child {
			transition: var(--transition);
		}

		/* Tabs (on Home) */
		&:first-child:has([role="tablist"] a[href="/home"]) {
			/* Disable click on Hidden */
			> *,
			~ :last-child > * /* Posts */ {
				transition:
					calc(
						var(--show-duration) +
						var(--show-delay)
					)
					allow-discrete
				;
			}
			&:not(:hover, :focus-within) {
				&:not(:has(~ :last-child:is(:hover, :focus-within, [aria-expanded="true"]))) {
					&,
					/* Border bottom of Post block -- NOTE: HTML structure seems to change sometimes */
					~ :has([data-testid="toolBar"]) + *,
					~ :has([data-testid="toolBar"]) > :empty:last-child {
						transition-duration: var(--hide-duration);
						transition-delay:    var(--hide-delay);
						opacity: 0;
					}

					/* Disable click on Hidden */
					> * {
						pointer-events: none;
						transition-duration: inherit;
					}
				}

				/* Posts */
				~ :last-child {
					&:not(:hover, :focus-within, :has([aria-expanded="true"])) {
						transition-duration: var(--hide-duration);
						transition-delay:    var(--hide-delay);
						opacity: 0;

						/* Disable click on Hidden */
						> * {
							pointer-events: none;
							transition-duration: inherit;
						}
					}
				}
			}
		}

		/* Post block */
		/* NOTE: `section` is for Post detail (/[user_name]/status/\d+) */
		&:has([data-testid="toolBar"]):not(section) {
			--tab-height: calc(53px + 1px);

			position: sticky;
			top: var(--tab-height);
			background: 0;

			> :first-child {
				margin-block: 1.25rem;
				box-shadow:
					 1px 0       var(--bg-color),
					-1px 0       var(--bg-color),
					0    0 0 1px var(--border-color);
				background: var(--bg-faded);
				backdrop-filter: blur(12px);

				/* Actions */
				.css-175oi2r.r-14lw9ot.r-jumn1c.r-xd6kpl.r-gtdqiz.r-ipm5af.r-184en5c {
					&,
					> div > div > div { background: 0 }

					/* Set animation for conversation settings button */
					> .css-175oi2r.r-1awozwy.r-18u37iz.r-1wtj0ep {
						interpolate-size: allow-keywords;
						transition: height .2s;
						overflow: hidden;

						/* Not opend */
						&:not(.r-j5o65s.r-qklmqi.r-1w6e6rj.r-m5k245.r-13qz1uu) { height: 0 }
					}
				}

				@media (width >= 500px ) {
					box-shadow:
						1px 0       var(--bg-color),
						2px 0       var(--border-color),
						0   0 0 1px var(--border-color);
					border-radius: 2rem;
					overflow: hidden; /* Mask content background */

					@media (width < 720px ) {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}
				}

				--min-container-width: 72px + 8px * 2 + 600px + 16px * 2;
				@media (width >= 720px ) {
					box-shadow: 0 0 0 1px var(--border-color);
				}

				@media (width >= 988px /* var(--break-point--Sidebar) */ ) {
					margin-block: 1.5rem;
				}
			}
		}
	}
}
}

@-moz-document regexp("https://(x|twitter).com/.+/status/.+") {
/* Post detail and Article */
/* NOTE: Applies to home also if modal is open */

/* - Primary column */
[data-testid="primaryColumn"] {

	/* Hide related contents */
	[data-testid="cellInnerDiv"] {
		/* has h2 with text -- HACK: Exclude `Who to follow` on home */
		&:has(h2 ~ div) {
			/* with Subsequent siblings */
			&, ~ * { transition: var(--transition) }
			/* Disable click on Hidden */
			~ * {
				> * {
					transition:
						calc(
							var(--show-duration) +
							var(--show-delay)
						)
						allow-discrete
					;
				}
			}

			&:not(:hover, :has(~:is(:hover, :focus-within))) {
				&, ~ * {
					transition-duration: var(--hide-duration);
					transition-delay:    var(--hide-delay);
				}

				opacity: .2;
				~ * {
					opacity: 0;

					/* Disable click on Hidden */
					> * {
						pointer-events: none;
						transition-duration: inherit;
					}
				}
			}
		}
	}

	[data-testid="tweet"][tabindex="-1"] {
		/* Sticky Date */
		overflow: unset;
		> * > * > * > :nth-last-child(1 of :has(time)) /* NOTE: Contents may contain time */ {
			position: sticky;
			bottom: 1rem;

			&::before {
				position: absolute;
				inset: -1rem;
				background: var(--bg-faded);
				backdrop-filter: blur(12px);
				content: "";
			}
		}

		/* Adjust text only Article */
		&:has([data-testid="twitter-article-title"]) {
			:has([data-testid="tweetPhoto"]) {
				&:has(~ * [data-testid="twitter-article-title"]) {
					margin-bottom: 0;
					border-radius: 1rem;
					overflow: hidden;
				}
			}
			[data-testid="twitter-article-title"] {
				font-size: 2rem;
				line-height: calc(38 / 30);
			}
			.longform-header-one {
				margin-block: 2rem 1.2rem;
				font-size: 1.6rem;
				line-height: calc(32 / 24);
			}
			.longform-header-two {
				margin-block: 1.2rem .8rem;
				font-size: calc(20rem / 15);
				line-height: 1.5;
			}
			[data-contents="true"] {
				/* Only for Windows */
				font-feature-settings: "palt";
				letter-spacing: .03em;

				/* NOTE: Applies to Headings as Well */
				* { font-feature-settings: inherit }

				> :first-child {
					> .longform-header-one { margin-top: .2rem }
					> .longform-header-two { margin-top: 0...