Dark The Guardian [papo] by papo

/* ==UserStyle==
@name           Dark The Guardian [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.4
@description    Updated: 2024-05. 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 ---

@var range    p-size-primary-text  "Text Primary size"         [18, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [26, 12, 35, 1, "px"]
	


#var color color-breadcrumb "Section/Series" hsl(140, 40%, 75%)
@var color color-breadcrumb "Section/Series" hsl(10, 61%, 56%)
#833
# too dark: #4f2121, orig: #C70000

@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 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;"
}


# --- 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-breadcrumb "Section/Series" #C70000

# --- END: optional common block ---


==/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.2 2024-04
 */
@-moz-document regexp("https://www.theguardian.com/[^/]*/20.*")
, domain("theguardian.com")
{
/* URL ends in 20, (a year 20xx), to exclude links with "live" content. e.g. https://www.theguardian.com/<*>/live/2024/jan/25/ARTICLE_NAME */

/* when homepage will be added, /artanddesign/ should stay unstyled as it's black */
/* e.g. https://www.theguardian.com/artanddesign/gallery/2024/mar/04/life-at-norways-remote-arctic-fox-breeding-station-in-pictures */

/* tried one by one, but there are too many
url-prefix("xhttps://www.theguardian.com/world/20"), url-prefix("xhttps://www.theguardian.com/us-news/20"), url-prefix("xhttps://www.theguardian.com/australia-news/20"), url-prefix("xhttps://www.theguardian.com/commentisfree/"), url-prefix("xhttps://www.theguardian.com/law/"),
*/
: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]]*/;


	--s-color-breadcrumb: /*[[color-breadcrumb]]*/;
	/* color is derived from original masthead: background-color: #052962; = background-color: hsl(217, 90%, 20%);	--article-background: hsl(217, 90%, 5%); */
	--s-color-BG-submenu: hsl(217, 90%, 5%);

	/* Legacy */
	--p-color-caption-sec: var(--p-color-heading);
	--gl-text-primary: var(--p-color-primary);
    --gl-text-dark: var(--p-color-dark);
    --gl-text-sub: var(--p-color-sub);
    --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. */

/* On this site, class names are random and do change quite often */

/* using site's variables */
:root {
	--article-border: #666;
	/* this does apply to submenu, for which I was defining it here, but it is also used on e.g. /world/live/... */
	/* --article-background: var(--s-color-BG-submenu); */
	--article-background: unset;
	--series-title-text: var(--s-color-breadcrumb);
	/* BG for "more", "most" on article pages and sometimes bottom submenu */
	--article-section-background: var(--s-color-BG-submenu);
	--standfirst-text: var(--p-color-lead);
	--sub-meta-label-text: var(--p-color-dark);
	/* e.g. captions (under pic) */
	--caption-text: var(--p-color-secondary);
	--article-link-text: var(--p-color-link);
	--sub-nav-link: var(--p-color-dark);
	--dateline: var(--p-color-byline);
	--last-updated-text: var(--p-color-byline);
	--key-event-title: var(--p-color-byline);
	--byline-anchor: var(--p-color-byline);
	--byline: var(--p-color-byline);
	/* --was-byline: #BB3B80; */
	/* actually not used by article text, but titles in "Most viewed" */
	--article-text: var(--p-color-headline);
	--block-quote-text: var(--p-color-secondary);
	--subheading-text: var(--p-color-heading);
	/* - more - */
	/* "Most viewed" */
	--article-section-title: var(--p-color-heading);
	/* small single banner on side */
	--rich-link-background: rgba(0, 0, 0, .3);
	/* hover */
	--rich-link-background-hover: rgba(0, 0, 0, .5);
	/* bottom tag icons */
	--sub-meta-background: none;
	
	--discussion-section-background: rgba(0, 0, 0, .5);
	--discussion-top-pick-background: rgba(0, 0, 0, .5);


	/* /live/ */
/* 	--headline-blog-background: unset; */
	--headline-blog-background: #AB06134D;
	/* --was-headline-blog-background: #AB0613; */
/* 	--standfirst-background: unset; */
	--standfirst-background: #8B00004D;
	/* --was-standfirst-background: #8B0000; */
	/* timeline */
	--key-event-background-desktop: rgba(0, 0, 0, .1);
	--live-block-container-background: var(--p-background);
}

/* --- some variables are defined on other elements, also more in code below --- */
/* - more - */
/* small single banner on side */
[data-component="rich-link"] > div {
	--rich-link-header: var(--p-color-secondary);
}
h2 {
	--carousel-text: var(--p-color-caption-sec);
}


/* -- masthead -- */
/* alt: #bannerandheader aside a[data-link-name^="nav2 : subnav : "], but not all have it { */
/* this was sometimes working sometimes not: #bannerandheader aside a */

/* bottom submenu */
/* 24-03: .dcr-1mqy9jp { */
/* ,body > aside a:not(.huhu) */

/* { */
/* 	color: var(--p-color-secondary); */
	/* --was-color: #...