DeAnnoy WSJ [papo] by papo

/* ==UserStyle==
@name           DeAnnoy WSJ [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.6
@description    Updated: 2024-12. [m] Notes and feedback: https://github.com/paponius/userstyles/. Removed distracting and annoying elements. Check what it does in style Options, or read @var descriptions on top of the code.
@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 UnstickHeader              "Unstick the header on Home and Main pages" 1
@var checkbox HideArtStickyHeader        "Hide the header on Article pages, showing article headline and share buttons (also Mobile view home page)" 0
@var checkbox HideArtStickyHeaderExcMenu " ... as the above, but keep the menu button and progress line" 1
@var checkbox HideSmallerInterimHeader   "Don't show the smaller header when Article page is scrolled just a little bit down" 1
@var checkbox HideBrandsHeader           "Hide the top header on Home page, showing Brands." 1
@var checkbox blockPopupMenus            "Block drop-down menus opened on mouse hover, covering over page content. This will also show the hamburger button, where links from the blocked drop-down are accessible. But only on Article pages, not Home or Main pages" 0


==/UserStyle== */
/* tpl: 1.2.2 24-11 */
@-moz-document domain("wsj.com") {

/* todo unstickstyleB: https://www.wsj.com/world/europe/sleeper-agents-putin-global-hunt-a7978f84?mod=hp_lead_pos7 */

/* on [m]
HideArtStickyHeader
 progress does not show at all
HideArtStickyHeaderExcMenu
 on some art pages, there is no menu hamburger
*/

& when (@UnstickHeader = 1) {
/* 	.css-ea71j7-MainHeader-CollapsedHeader { */
	header[class*="-MainHeader-CollapsedHeader"] {
		position: absolute;
		/* --was-position: fixed; */
	}
	
	/* 	on market pages */
	/* 	.style__collapsed-header_7sa1KNOWxi_hujucmXqzt { */
	#full-header header[class*="style__scrolled_"] > [class*="style__collapsed-header_"] {
		visibility: hidden;
		/* --was-visibility: visible; */
	}
}



& when (@HideArtStickyHeader = 1) and (@HideArtStickyHeaderExcMenu = 0) and (@blockPopupMenus = 0) {
	[class*="-UtilityNavContainer"]:not(.salt) {
		display: none;
	}
	/* on Style B Article page only */
	[class*="-MainHeader"] {
		position: relative;
		/* --was-position: fixed; */
	}
	[data-header-fixed="true"] header[class*="-MainHeaderStyled"] {
		position: relative;
		/* --was-position: fixed; */
	}
}
/* [m] */
& when (@HideArtStickyHeader = 1) or (@HideArtStickyHeaderExcMenu = 1) {
	xxxxx [data-header-fixed="true"] header[class*="-MainHeaderStyled"] {
		position: relative;
		/* --was-position: fixed; */
	}
}

/* detached-ruleset */
@Hide-UtilityNavContainer-exceptHamMenu: {
	[class*="-UtilityNavContainer"] {
		button + a {
			display: none;
		}
		[class*="-SpacedGridItem"]:not(:has(button[aria-label="Open Navigation Menu"])) {
			display: none;
		}
		nav[class*="-NavGrid"] {
			background: transparent;
/* 			reset from my Dark style */
			box-shadow: unset;
			border-block-end: none;
			pointer-events: none;
			/* [m] */
			padding-block-end: 0;
			/* --was-padding-block-end: 18px; */
		}
		/* margin makes the hamburger element wider, prohibiting mouse clicks */
		button[aria-label="Open Navigation Menu"] {
			margin-inline-end: 0;
			--p-x: 1;
			/* --was-margin-inline-end: 16px; */
		}
		button[aria-label="Open Navigation Menu"] use {
			fill: white;
		}
		/* ham button. move line up */
		[class*="-SpacedGridItem"] {
			grid-row: 2;
			pointer-events: all;
		}
		/* 		needs BG even without Dark skip */
		button[aria-label="Open Navigation Menu"]:not(:disabled) {
			background-color: rgba(0, 0, 0, .5);
		}
		button[aria-label="Open Navigation Menu"]:not(:disabled):hover {
			background-color: black;
		}

		.css-nffz7h-MainHeaderStyled:not([data-header-visible="true"]) {
/*   			visibility: visible; */
  		}
	}

	/* - only on Style B Article page - */
	/* 	only [m], the classname is actually xxxx-MainHeaderStyled, but -MainHeader works too */
 	[class*="-HeaderContainer"][data-header-fixed="true"] [class*="-MainHeader"] > [class*="-MastHeadContainer"]:has(> [class*="-BurgerMenu"]) {
		a[class*="-LogoBase-BrandLogo"]
		, [class*="-LoginButtonsWrapper-LoginButtonsWrapper-LoginButtonsWrapper"] {
			display: none;
		}
	}
/* 	[m], reset BG from Dark US */
	[class*="-HeaderContainer"][data-header-fixed="true"] > header {
		background: transparent;
		box-shadow: unset;
		border-bottom: unset;
	}
	/* The Hamburger button is not where it should be when page is scrolled up. That's not possible to solve here */
	[class*="-MainHeader"] {
		position: static;
/* 		width: 0; */
		/* --was-width: 100%; */
	}
	[class*="-MainHeader"] > [class*="-MastHeadContainer"] > [class*="-BurgerMenu"] {
		position: fixed;
	}
	/* 	don't know what this element does. without DeAnnoy it's covered by the header, but still does flash white as a glitch of the browser. */
	[class*="-DummyWrapper"] {
		display: none;
	}
	/* [m] only. HeaderContainer on bottom. to detect [m], header element is present only on web version */
	/* [class*="-UtilityNavContainer"] is not always present (or never) */
	[class*="-HeaderContainer"]:not(:has(> header + [class*="-UtilityNavContainer"])) [class*="-ScrollbarGridLayoutItem"] {
		grid-row: 44;
	}
}

/* parent element must be full width, else the progress bar does not work ok. does make the prograss bar short, not full width */



& when (@HideArtStickyHeaderExcMenu = 1) or ((@HideArtStickyHeader = 1) and (@blockPopupMenus = 1)) {
	@Hide-UtilityNavContainer-exceptHamMenu();
}



& when (@HideSmallerInterimHeader = 1) {
	[class*="-CollapsedHeaderStyled"] {
		display: none;
	}
}

& when (@HideBrandsHeader = 1) {
	nav-hat:has(#cx-nav-hat) {
		display: none;
	}
	/* 	margin on the header below the hidden one */
	[class*="-MarketDataStripWrapper"] [class*="-Strip"] {
		margin-block-start: 0;
		/* --was-margin-block-start: 4px; */
	}
}



/* data-utility-nav-visible="true" */

& when (@blockPopupMenus = 1) {
	[class*="-HeaderContainer"]:has(> [data-utility-nav-visible="false"]) {
		@Hide-UtilityNavContainer-exceptHamMenu();
		[class*="-UtilityNavContainer"]:not(.salt) {
			display: block;
		}
	}

	[class*="-NavItems"] li > [class*="-ColumnWrapper"] {
		visibility: hidden;
	}
	/* 	.css-1bibqss-Item:not(:first-of-type) { */
	[class*="-NavItems"] li:not(.salt) {
		/* 		JS is probably adding this style and it's not correct. FF does not show it in DevTools, but the style is accepted anyway.  */
		border: none;
		/* 	border-top-width: ;
		border-top-style: ;
		border-top-color: ;
		border-right-width: ;
		border-right-style: ;
		border-right-color: ;
		border-left-width: ;
		border-left-style: ;
		border-left-color: ;
		border-image-outset: ;
		border-image-repeat: ;
		border-image-slice: ;
		border-image-source: ;
		border-image-width: ;
		border-bottom: medium; */
		/* 		BG is causing a line in the element below to disappear. What is a desired side effect in orig */
		background: none;
		/* 		background-color: rgb(249, 249, 249); */
	}
	
	/* -- old: "wsj.com dis_menu [papo]" -- */
	/* 	Date installed: Aug 7, 2018 */
	/* disable menu overlay */
/* 	#full-header header > nav > div > div > a + div {
		display: none !important;
	}
 */
}



/* & when (@debug-test[--debug] = 1) {

} */
}