Dark New York Times by papo

/* ==UserStyle==
@name           Dark New York Times [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.1
@description    Updated: 2024-05. Notes and feedback: https://github.com/paponius/userstyles/. Only article pages. Main home page is not yet styled.
@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)"
# --- end of common block ---


@advanced dropdown color-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background-color: rgba(0, 0, 0, .3); !important; EOT;
  a "Transparent" <<<EOT background-color: unset !important; EOT;
  b "Black" <<<EOT background-color: black !important; EOT;
  c "as custom text background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}


# --- optional common block ---
#advanced dropdown color-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background-color: rgba(0, 0, 0, .3); !important; EOT;
  a "Transparent" <<<EOT background-color: unset !important; EOT;
  b "Black" <<<EOT background-color: black !important; EOT;
  c "as custom text background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}

#var select xxx 'Get my "DeAnnoy XXX [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/XXX/XXX' {
  'You need to copy the text on the left with a mouse, right click and choose open in tab. This is not a setting.': 0
}
#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;"
}

#var color color-section "Section/Series" #C70000


==/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.0 2024-04
 */
@-moz-document url-prefix("https://www.nytimes.com/20")
, domain("nytimes.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-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]]*/;

	/* Legacy */
	--p-color-caption-sec: var(--p-color-heading);
	--gl-text-primary: var(--p-color-primary);
	--gl-text-sec: var(--p-color-secondary);
    --gl-text-dark: var(--p-color-dark);
    --gl-text-sub: var(--p-color-deck);
    --gl-text-by: var(--p-color-by);
    --gl-link: var(--p-color-link);
    --gl-link-hover: var(--p-color-link-hover);
	--gl-background: var(--p-background);
}
/* 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 {
	/* actually used by a headline */
	--color-content-primary: var(--p-color-headline);
	/* standard text, also sub-heading */
	--color-content-secondary: var(--p-color-primary);
	/* e.g. under pic text */
	--color-content-quaternary: var(--p-color-secondary);
	/* in some I changed rules individually, before adding this globaly */
	--color-background-primary:	background-color: rgba(0, 0, 0, .3);
	--color-stroke-primary: hsl(0, 0%, 93%);
/* 	--was-color-stroke-primary: hsla(0, 0%, 7.06%, 1); */
	/* sometimes it's the masthead menu */
	--color-background-elevated: background-color: rgba(0, 0, 0, .3);
	/* e.g. image preload */
	--color-background-tertiary: background-color: rgba(0, 0, 0, .3);
	/* --was--color-background-tertiary: hsla(0,0%,92.16%,1); */
}

/* AD or something */
#app > div > div:has(> [data-testid="StandardAd"]) {
	/*[[color-BG-ADs]]*/
	/* --was-background-color: var(--color-background-secondary,#F8F8F8); */
}

/* -- masthead -- */
/* <div data-testid="masthead-container" class="NYTAppHideMasthead css-1q2w90k e1m0pzr40"> */
/* must have it's own BG, as it says on top and too transparent would be ugly */
/* 240318: .css-1q2w90k { */
[data-testid="masthead-container"] {
	background: var(--p-background-base);
	background-color: rgba(0, 0, 0, .3);
	background-blend-mode: darken;
	/* --was-background-color: #fff; */
}
/* icon menu */
[data-testid="masthead-container"] button#desktop-sections-button {
	background-color: #333;
	/* --was-background-color: rgb(255, 255, 255); */
}

/* 2nd. must be non transparent, it slides over the top masthead */
article#story > div:first-of-type {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: var(--color-background-elevated,#FFFFFF); */
}
article#story > div:first-of-type div:has(> nav[aria-labelledby="storyline-menu-title"]) {
	background: unset;
	/* --was-background: var(--color-background-elevated,#FFFFFF); */
}
/* .css-nfyi9h { */
p#storyline-menu-title > a,
p#storyline-menu-title > span {
	background-color: unset;
	/* --was-background-color: var(--color-background-elevated,#FFFFFF); */
	box-shadow: unset;
	/* --was-box-shadow: 4px 0 7px 10px var(--color-background-elevated,#FFFFFF); */
}
/* logo */
article#story a[data-testid="tlogo-home-link"] > svg > g > g {
	fill:white;
}
/* .css-136d4fr { */
article#story span:has(> a[data-testid="tlogo-home-link"]) {
	background: rgba(0, 0, 0, .2);
	/* --was-background: #fff; */
}

/* -- hero section -- */
/* - breadcrumb - */
/* - headline - */
/* 2204:
    headline and heading in arcicle are changing class name,
    or there is more types of articles. e.g. "briefing"
   2402: css-4hqsrd e1h9rw200
   .css-2wh0do and .css-rcspn7, .css-1tvdtcr, .css-rcspn7 {

   article>header h1 {
    not always header tag
   article h1 {
    was working
   alt: article [data-testid="headline"] {

 */
article > header h1[data-testid="headline"]:not(.huhu) {
	background-color: rgba(0, 0, 0, .3);
/* 	background-blend-mode: darken; */
	margin-bottom: 0;
	/* --was-margin-bottom: 0.5rem; */
	padding-bottom: 0.5rem;
	padding-left: 5px;
	padding-right: 5px;
}
p#article-summary {
	color: var(--p-color-caption-sec);
	background-color: rgba(0, 0, 0, .3);
	padding-left: 5px;
	padding-right: 5px;

	margin-bottom: 0;
	/* --was-margin-bottom: 1.25rem; */
	padding-bottom: 1.25rem;
}
@media (min-width: 740px) {
  p#article-summary {
	margin-bottom: 0;
	/* --was-margin-bottom: 1.875rem; */
	padding-bottom: 1.875rem;
  }
}
/* full bleed - big on the whole viewport */
#fullBleedHeaderContent > header > div:has(h1[data-testid="headline"]) {
/* .css-1xqucq6 { */
	background-color: unset;
/* 	background-color: #ffffff; */
}
#fullBleedHeaderContent h1[data-testid="headline"] {
	color: var(--p-color-headline);
}
#fullBleedHeaderContent p {
	color: var(--p-color-primary);
}
/* this takes care of img caption too */
#fullBleedHeaderContent div:has(> p) {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}

/* - deck - */

/* - byline - */
p:has(>span.byline-prefix) {
	color: var(--p-color-byline);
	/* --was-color: var(--color-content...