Dark BBC [papo] by papo

/* ==UserStyle==
@name           Dark BBC [papo]
@namespace      github.com/paponius/userstyles
@version        2.3.19
@description    Updated: 2024-11. [m] Notes and feedback: https://github.com/paponius/userstyles/, BBC uses 4 different themes. All are covered by this Style. Also check my DeAnnoy BBC Style.
@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"         [18, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [26, 12, 35, 1, "px"]
# --- END: common block ---


@var color  s-color-BG-Red  "BBC Background color"   #671919
@var color  s-color-BG-Red2 "BBC Background color 2" hsl(0, 61%, 10%)

@var select BBCBlocks "BBC logo - Blocks color" {
  "Red":    "#EB0000",
  "White":  "white",
  "Black*": "black"
}


# --- 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 BBC [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/15219/deannoy-bbc-papo-menu-title-bar-smaller-hiding' {
  '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

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


# There are some enabled and modified options in optional 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 domain("bbc.com"), domain("bbc.co.uk") {


/* ** Multiple different themes used by BBC
   This UserStyle covers all of them in separate sections divided with a comment line containing `***`

   Theme 2024. Using: data-testid="Countries and Cities"
     .sc-3ac2e8e0-3.eVUgNQ[data-testid="..."]
     2024-03-12: BBC switched to a new theme, which is a complete overhaul. Old articles, and bbc.co.uk still open in the older theme.

   Orbit. Using: orbit, org-modules, nv-c-nav, lx-, gs-
     top header:                    body.qa-lx-page-loaded > div > div#orbit-header.orbit-header-container
     more headers and page content: body.qa-lx-page-loaded > div > div#orb-modules
     used in 2024-03 by e.g. https://www.bbc.co.uk/mediacentre/2024/...
                             /news/live/
                        e.g. https://www.bbc.com/news/live/uk-wales-68569230?src_origin=BBCS_BBC
	                         but this does not match few days later anymore. It looks the same, but different DOM
	 24-07: /news/live now uses Chameleon theme
     In 2018 I used in this file some selectors matching this theme.

   Chameleon. Using: class="ssrcss-irv5dn-Zone e1mcntqj4"
     top header: body>div#root header#header-content[data-testid="header-content"] nav.ssrcss-1gctzoi-ChameleonGlobalNavigation[aria-label="BBC"]
     pre 2024-03-12 articles
     BBC.co.uk (not .com) in 2024-03

     On BBC site classnames of format .ssrcss-<Random{6}>-<sensibleName>, e.g. .ssrcss-nsdtmh-StyledHeading,
     do change with time. Also, the <sensibleName> part is not unique for one specific use on site,
     and can't be safely used as a selector, e.g. [class*="-StyledHeading"], without at least limiting it to a parent.
     And another problem is, some of these partial classnames are part of classname of different classnames.
     e.g. [class*="-StyledHeading"] will also match "-StyledHeadingContainer", or [class*="-LinkPost"] will "-LinkPostContent"

   Homepage on bbc.com
     It does use separate theme from all other BBC site parts. After the middle of 2024-03, it can only be seen when accessing bbc.com from UK.

   Language versions
     in 2024, also uses React, as does 2024 theme, but the structure is different from all the other BBC css styles
	 I will not be Dark styling this. e.g. French: https://www.bbc.com/afrique

   Help/Error pages
     another theme. navi header has class .GlobalNavigation
     https://www.bbc.co.uk/news/help/16617948
 */

/* todo:
  fixed, test: img background while loading flashes white. line 527
  https://www.bbc.com/video, right column is not styled at all "hawaii"
  
 */

/* 24-05-07: BBC broke the 2024 theme. Names of tags changed and restructured <main> and added <article>
 */

: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: var(--p-color-headline);
	--p-color-caption-sec: var(--p-color-heading);
	--p-color-by: var(--p-color-byline);
}

/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */
:root {
	--s-color-BG-Red: /*[[s-color-BG-Red]]*/;
	--s-color-BG-Red2: /*[[s-color-BG-Red2]]*/;
	--s-color-BBCBlocks: /*[[BBCBlocks]]*/;
}

/* using site's variables */
/* :root {
	--something: var(--p-background-base);
} */



/* *** *** Theme 2024. Using: data-testid="" *** ***
 Style tested by BBC by the end of 2023 and activated for non UK visitors 2024-03 
 DOM: 2403: <body><div id="__next"><main class="app">...
 20240608: HP: <html lang="en-GB"><body><div id="__next"><div class="app"><main id="main-content"><article class="sc-9636e898-0 dYtsiK">
   article page is the same except <article> tag has no classnames
   this now conflicts with Theme Chameleon, which uses selector: main#main-content article
   best way to limit seems to be: body > #__next SOMETHING
 */

/* -- masthead -- */
/* <header class="sc-75742244-0 hByHvK"> */
/* .hByHvK { */
/* until 24-05-07: main > header */
main > header:not(.huhu)
, .app > header {
	background-color: var(--s-color-BG-Red);
	/* --was-background-color: rgb(255, 255, 255); */
}
/* class="sc-2c06e71a-0 kOvwAC"> */
main > header [category="logo"][icon="bbc"]
, .app > header [category="logo"][icon="bbc"] {
	fill: var(--s-color-BBCBlocks);
}
/* there are 4 buttons on header, only two on left side need change from white BG, but making them all alike for now */
main > header button:not(.huh...