Single post view. Clean, wide. [papo] by papo

/* ==UserStyle==
@name           Single post view. Clean, wide. [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.3
@description    Updated: 2024-11. Notes and feedback: https://github.com/paponius/userstyles/. Not for a standard Twitter user. Usefull when you use Twitter just to view single posts someone sent you. Or you always open posts in new Browser Tabs, or with Browser Containers, multiple profiles...
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   less

@var checkbox AlsoWhenSignedIn 'Also when signed-in' 0
@var checkbox HideBackArrow    'Hide top bar. With back arrow, Reply button. (Also when signed-in above must be ON, always hidden when not signed-in)' 0
#                                      [default, min, max, step, units] All items but the default value are optional. Use "null" to skip.
@var range    ContentWidth  "Width (0: no width limit)"    [0, 0, 2000, 100, "px"]

==/UserStyle== */
@-moz-document regexp("https://x.com/.*/status/\\d+/?") {

/* bug in Stylus, when the US will disapear from menu if CSS is empty after LESS compile. i.e. switching @var checkbox results in empty CSS */
#dummy{
	color: violet;
}

@detached-ruleset: {

/* login/register bar

#layers:
when not signed in
css-175oi2r r-aqfbo4 r-zchlnj r-1d2f490 r-1xcajam r-1p0dtai r-12vffkv
  css-175oi2r r-12vffkv  -  login/register
    ... data-testid="BottomBar"
	alt: #layers [style*="position: absolute; bottom: 0px; width: 100%;"]:has(a[href="/login"])
  css-175oi2r r-12vffkv  -  "welcome..."
    ... data-testid="BottomBar", also: data-testid="xMigrationBottomBar"
  css-175oi2r r-12vffkv  -  cookies notice

when signed-in
css-175oi2r r-aqfbo4 r-zchlnj r-1d2f490 r-1xcajam r-1p0dtai r-12vffkv
  css-175oi2r r-12vffkv
  css-175oi2r r-12vffkv
css-175oi2r r-zchlnj r-1d2f490 r-u8s1d r-ipm5af r-1p0dtai r-105ug2t  -  drop-down menus, usefull stuff
 */
#layers > div:has([data-testid="BottomBar"]) {
	display: none;
}


/* sidebar */
[data-testid="sidebarColumn"] {
	display: none;
}

/* right column, rotating circle */
main + [role="progressbar"] {
	display: none;
}

/* left column */
header[role="banner"]:has(+ main) {
	display: none;
}

/* width */
[data-testid="primaryColumn"] when (@ContentWidth = 0px) {
	max-width: unset;
	/* --was-max-width: 600px; */
}
[data-testid="primaryColumn"] when not (@ContentWidth = 0px) {
	max-width: @ContentWidth;
}

/* Google login dialog */
#credential_picker_container {
	display: none;
}

} // END: @detached-ruleset {

/* top bar with back arrow */
.hideTopBar() {
/* 	[data-testid="primaryColumn"] > [aria-label] > div:first-child when (@HideBackArrow = 1) { */
	[data-testid="primaryColumn"] > [aria-label] > div:first-child {
		display: none;
	}
}

/* alt1
.hideTopBarWhen() when (@HideBackArrow = 1) {
	.hideTopBar();
} */

body:has(a[href="/login"]) {
	.hideTopBar();
	& when not (@AlsoWhenSignedIn = 1) {
		@detached-ruleset();
	}
}
& when (@AlsoWhenSignedIn = 1) {
/* alt1	.hideTopBarWhen(); */
	& when (@HideBackArrow = 1) {
		.hideTopBar();
	}
	@detached-ruleset();
}

}