Dark WSJ [papo] by papo

/* ==UserStyle==
@name           Dark WSJ [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.15
@description    Updated: 2024-12. [m] Notes and feedback: https://github.com/paponius/userstyles/
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   uso
@advanced color color-primary "Text Primary" white
@advanced color color-secondary "Text Secondary" #ccc
@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" violet
# up to 24-04: #B62EF0
@advanced dropdown background-base "Background" {
  dft "Tiles" <<<EOT #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  dc  "Dark charcoal" <<<EOT #333 EOT;
  cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@advanced dropdown bg-options "Background image type" {
  Tiled "Tiled" <<<EOT
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: left top !important; EOT;
  Fit "Fit Window" <<<EOT
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
  s   "Scroll" <<<EOT  EOT;
  f   "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Text Background" {
  dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Text Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@var range    p-size-primary-text  "Text Primary size"         [17, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [27, 12, 35, 1, "px"]
# --- END: common block ---


@advanced dropdown prop-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background: rgba(0, 0, 0, .3) !important; EOT;
  r "Reddish" <<<EOT background-color: rgba(64, 17, 17, .3); !important; EOT;
  a "Transparent" <<<EOT background: unset !important; EOT;
  b "Black" <<<EOT background: black !important; EOT;
  c "as Custom Text Background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}
@var select debug-test "debug" {
  '0:Normal': '',
  "1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "color: yellow !important; background: violet !important;"
}
==/UserStyle== */

/* Do NOT edit this file.
   It will disable updates, instead create another style to override desired rules. Or CSS variables.
   I don't use !important where not required to allow that. You need to check injection order in Stylus.

   Used background-base and bg-options from: https://github.com/StylishThemes
   This preprocessor header and global variables are common part used in most of my styles. Version: 1.4.4 2024-11
 */
@-moz-document domain("wsj.com") {
:root {
	--p-color-primary: /*[[color-primary]]*/;
	--p-color-secondary: /*[[color-secondary]]*/;
	--p-color-dark: #6e6e6e;
	--p-color-headline: /*[[color-headline]]*/;
	--p-color-heading: /*[[color-heading]]*/;
	--p-color-deck: #ffdede;
	--p-color-lead: #ffdede;
	--p-color-breadcrumb: hsl(140, 40%, 75%);
	--p-color-byline: #C56E6E;
/* 	--p-color-link: #00ADEE; */
	--p-color-link: #82C1FF;
	--p-color-link-visited: /*[[color-link-visited]]*/;
	--p-color-link-hover: hsl(210, 100%, 85%);
	--p-background-base: /*[[background-base]]*/ /*[[bg-attachment]]*/;
	--p-background: /*[[background]]*/;
	--p-background-base-custom: /*[[background-base-custom]]*/;
	--p-background-custom: /*[[background-custom]]*/;
	--p-size-primary-text: /*[[p-size-primary-text]]*/;
	--p-size-primary-line: /*[[p-size-primary-line]]*/;
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */

/* using site's variables */
/* :root {
} */
h1 {
	--headline-font-color: var(--p-color-headline);
}



/* --- masthead --- */
/* three headers: 1. logo with first menu and second menu, 2. "collapsed" is duplicated first shown after a bit of scroll down, with logo and second menu, 3. "utility" header
   on [m], the HeaderContainer will have two different children instead
 */
[class*="-HeaderContainer"] {
	/* logo. both headers 1. and 2. */
	[class*="-LogoBase-BrandLogo"] {
		filter: invert(1);
	}
	/* but not on Style B */
	[class*="-MastHeadContainer"]:has(> [data-nav-dark="true"]) [class*="-LogoBase-BrandLogo"] {
	/* [class*="-MastHeadContainer"]:has(> button) [class*="-LogoBase-BrandLogo"] { */
		filter: unset;
	}
	header [class*="-ButtonWrapper-LoginButton"] {
		color: #ccc !important;
		border-color: #ccc;
	}
	> header {
		background: var(--p-background);
		box-shadow: 0 0 10px 1px #000000eb;
		/* --was-background-color: var(--color-white); */
	}
	/* 	- first header's menu. only on 1. - (header[class*="-MainHeader"]) */
	[class*="-ListItem "] a {
		color: #ccc;
	}
	[class*="-Button"] {
		color: white;
	}
	[class*="-Button"]::after {
		border-color: white transparent;
	}
	/* first menu drop-down */
	ul[class*="-Flyout"] {
		/* border: 1px solid var(--color-silver); */
		background-color: rgba(0, 0, 0, .93);
		/* --was-background-color: var(--color-white); */
	}
	/* - nav menu - for both headers 1. and 2. */
	/* search icon. it is on nav menu header, but is using a sibling element */
	[class*="-SearchIconSvg"] {
		color: white;
	}
	/* would also non-desirably, but without a conflict so far, target NavGrid, which is here below */
	nav[class*="-Nav"] {
		[class*="-SectionLink"] {
			color: #ccc;
		}
		/* - selected (hover) menu item - will change class to .css-1bibqss-Item, there is also css .css-1bibqss-Item:not(:first-of-type) */
		[class*="-Item"] {
			background-color: unset;
			/* --was-background-color: rgb(249, 249, 249); */
		}
		[class*="-Item"]:not(:first-of-type):hover {
			background-color: rgba(0, 0, 0, .93);
		}

		/* - nav menu drop-down - */
		/* .css-mxdekq-ColumnLabel { */
		[class*="-ColumnLabel"] {
			color: white;
			/* --was-color: var(--color-coal); */
		}
		/* .css-1asvaa1-SubSectionLink { */
		[class*="-SubSectionLink"] {
			color: #ccc;
			/* --was-color: var(--color-nickel); */
		}
		[class*="-SubSectionLink"]:hover {
			color: white;
			/* --was-color: var(--color-jet); */
		}
		/* 		.css-6vlh9u-ColumnWrapper { */
		[class*="-ColumnWrapper"] {
			/* --was-border-bottom: 1px solid var(--color-silver); */
			background-color: rgba(0, 0, 0, .93);
			/* --was-background-color: #f9f9f9; */
		}
	}
	/* - UtilityNavContainer - sticky with Article Name and Hamburger menu - */
	/* 	under <div data-utility-nav-visible="true" class="css-1xw3e15-UtilityNavContainer */
	/* .css-1nrueqm-NavGrid { */
	nav[class*="-NavGrid"] {
		background: var(--p-background);
		/* --was-background-color: rgb(255, 255, 255); */
		box-shadow: 0 0 10px 1px #000000eb;
		color: white;

		/* "WSJ" logo */
		img {
			filter: invert(1);
		}
		/* fill has no effect, the color is set in <use> as current */
		/* .css-ocps42 svg { */
		svg {
			color: white;
			/* fill: white; */
			/* --was-fill: var(--color-inkBase); */
		}
	}
	/* - [m] MainHeaderStyled - */
	/* - ham - */
	button[class*="-BurgerMenu"] svg {
		color: white;
	}
	/* .css-ocps42:hover:not(:disabled) { */
	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;
	}

	/* - [m] login/register - possible on two different headers: MainHeaderStyled (here above), or dedicated LoginButtonsWrapper */
	[class*="-LoginOptionWrapper-LoginOptionWrapper-LoginOptionWrapper"] {
		background: rgba(0, 0, 0, .3);
		/* --was-background-color: var(--color-white); */
		color: white
	}
	/* parent of the above */
	[class*="-LoginWrapper-LoginWrapper-LoginWrapper"] {
		background-color: unset
		/* --was-background-color: var(--color-white); */
	}
	/* parent of the above */
	[class*="-LoginButtonsWrapper-LoginButtonsWrapper-LoginButtonsWrapper"] {
		background: rgba(0, 0, 0, .3);
		/* --was-background-color: var(--color-white); */
	}
}

/* [m] only. an unspecified div. article pages only */
.layout-grid div:has([class*="-HeaderContainer"]) {
	background-color: unset
}
/* style C only, does not have .layout-grid */
#__next > div > div div:has(> [class*="-HeaderContainer"]) {
	background-color: unset
}


/* - kiwi does not know nested CSS (duplicating here temporarily) - */
	[class*="-HeaderContainer"] > header {
			background: var(--p-background);
			box-shadow: 0 0 10px 1px #000000eb;
	}
	/* - ham - */
	[class*="-HeaderContainer"] button[class*="-BurgerMenu"] svg {
		color: white;
	}
	/* .css-ocps42:hover:not(:disabled) { */
	[class*="-HeaderContainer"] button[aria-label="Open Navigation Menu"]:not(:disabled) {
		background-co...