Dark Economist [papo] by papo

/* ==UserStyle==
@name           Dark Economist [papo]
@namespace      github.com/paponius/userstyles
@version        2.0.0
@description    Updated: 2025-03 [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)"
# --- END: common block ---

2503: 1.25rem, 1.75rem
@var range    p-size-primary-text  "Text Primary size"         [1.25, 0.75, 3, 0.25, "rem"]
@var range    p-size-primary-line  "Text Primary line height"  [1.75, 0.75, 3, 0.25, "rem"]


# orig: 1.25rem 20px; 1.4 28px
#var range    p-size-primary-text  "Text Primary size"         [20, 10, 30, 1, "px"]
#var range    p-size-primary-line  "Text Primary line height"  [28, 12, 35, 1, "px"]

@var select rule-AcquisitionBanner "Bottom banner" {
  '0:Show': '',
  "1:Hide": "display: none;"
}

==/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.3 2024-05
 */
@-moz-document domain("economist.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]]*/;

	/* Legacy */
	--p-color-caption-sec: var(--p-color-heading);
	--p-color-sub: var(--p-color-deck);
	--p-color-by: var(--p-color-byline);
	--gl-text-primary: var(--p-color-primary);
	--gl-text-sec: var(--p-color-secondary);
	--gl-text-caption: var(--p-color-headline);
	--gl-text-caption-sec: var(--p-color-caption-sec);
    --gl-link-visited: var(--p-color-link-visited);
    --gl-link-hover: var(--p-color-link-hover);
	--gl-background: var(--p-background);
}

/* orig defines this on elements */
/* :root {
	--mb-section-header-colour: var(--p-color-heading);
}
 */


/* --- masthead --- */
/* -- 1st header, AND sticky header 2503 -- */
/*   .nav-bar_mb-masthead__nav-bar__OAJzo */
[class*="nav-bar_mb-masthead__nav-bar__"] {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}
/* .link_mb-link__EG0v0 */
[class*="link_mb-link__"] {
	color: var(--p-color-secondary);
}
/* only "Menu" */
/* .button_mb-masthead__button__4sHC_ */
[class*="button_mb-masthead__button__"] {
	color: var(--p-color-secondary);
}


/* -- 2st header, 2503 -- */
/* .quick-links_mb-masthead__quick-links__QJqE5 */
[class*="quick-links_mb-masthead__quick-links__"] {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}



/* --- hero section --- */
/* -- breadcrumb -- */
/* -- headline -- */
/* -- deck - dek -- */
/* -- lead - lede - perex -- */
/* -- byline -- */

/* --- article --- */
article#new-article-template > div > div,
article[data-test-id="Article"] > [data-test-id="standard-article-template"] > div {
	p[data-component="paragraph"] {
		font-size: var(--p-size-primary-text);
		line-height: var(--p-size-primary-line);
		color: var(--p-color-primary);
	}
}
/* -- heading -- */
/* -- caption -- */
/* -- link -- */
/* -- author box -- */

/* -- quote -- */


/* --- features --- */

/* -- ADs -- */
ADs {
	/*[[prop-BG-ADs]]*/
}



/* --- more-on --- */
/* -- mid-article -- */
/* -- sidebar -- */



/* === HP === */


/* === Card === */
/* --- section --- */
/* [class*="section-header_mb-section-header__Wk_hk margin_mb-u-margin-b-lg__qMuVb section-header_mb-section-header--medium__qckXU" */
[class*="section-header_mb-section-header__"] {
	hr {
			color: var(--p-color-primary);
	}
	h2 a {
			color: var(--p-color-heading);
	}
}

/* not all have a pic (figure) */
/* .e11c7tvl0, */
div:has(> div > h3 + p):not(:has(> div > h3 + p + *)):has(> div > h3 > a):not(.salt),
li:has(> div > h3 + p):not(:has(> div > h3 + p + *)):has(> div > h3 > a):not(.salt),
/* type: vertical pic headline only */
div:has(> div > figure > img):has(> div > h3 > a):not(.salt),
/* type: just a h3. this might be trouble */
div:has(> div > h3 > a):not(.salt) {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	padding-left: 5px;
	padding-right: 5px;

	h3 a {
		color: var(--p-color-primary);
	}
	h3:has(+ p) a {
		color: var(--p-color-headline);
	}
	p {
		color: var(--p-color-primary);
	}
}



/* === common === */

body {
	background: var(--p-background-base);
	/*[[bg-options]]*/
}




/* ==== > 2503 ==== */
/* classnames did not change from beginning of 2024
2406 .adComponent_advert__kPVUI
.eis2tu50 is more common selector at least used since 2404
.css-1b409a9 for only some cards, while all also have .eis2tu50 (above line) at least used since 2404
 */

/* using site's variables */
:root {
	--header-headline-color: var(--gl-text-caption);
/* 	breadcrump */
	--header-fly-color: var(--p-color-breadcrumb);
/* 	deck */
	--header-rubric-color: var(--p-color-deck);
	--ds-color-london-5: var(--gl-text-primary);
	--ds-color-london-10: var(--gl-text-primary);
/* 	used also as BG for Menu and Search bar */
	--ds-color-london-20: var(--gl-text-sec);
	/* sometimes, this is a text color, also used for icon in Search menu */
	--ds-color-london-100: var(--gl-background);
/* 	todo: chicago-30 used also as BG color for a notice  */
	--ds-color-chicago-30: var(--gl-link-hover);
	--ds-color-chicago-95: #000; /* link background on :focus */
	/* figcap */
	--ds-color-london-35: var(--p-color-secondary);
	/* 	BG for e.g. hardwall notice. Expected is hsl/hsla. Fade-out for paywall still does not work, I don't care. */
	/* --was--ds-color-hsl-los-angeles-95: 51,22%,95%; */
	--ds-color-hsl-los-angeles-95: 0, 0%, 0%, .3;
	--ds-color-hsl-london-100: 0, 0%, 0%, .3;
	/* --was--ds-color-hsl-london-100: 0, 0%, 100%; */
	
	/* font-size: var(--ds-type-scale-1);
	line-height: var(--ds-type-leading-lower); */
/* 	--ds-type-scale-1: var(--p-size-primary-text); */
/* 	--ds-type-leading-lower: var(--p-size-primary-line); */
}


/* --- masthead --- */
/* on standard pages, there is also a parent: .styled-masthead, but not on special pages, e.g. Advanced Search */
.ds-masthead {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}

.ds-menu-disclosure .path-foreground, /* icon - menu */
.ds-navigation-disclosure .path-foreground { /* arrow down next to Search */
  fill: var(--gl-text-primary);
}

/* icon - search */
/* in orig, when Menu/Search is open, icon is inverted and must not be invereted here again */
.ds-navigation-disclosure--icon.ds-navigation-disclosure--icon-search:not(.ds-navigation-disclosure--inverse)::before {
	filter: invert(1);
}
/* "Subscribe" */
.ds-masthead .ds-call-to-action {
	background: hsl(230, 59%, 20%);
	/* --was-background: var(--ds-color-chicago-30); */
	/* 	--was: #1f2e7a; */
/* 	used only on speci...