Dark BBC [papo] by papo

/* ==UserStyle==
@name           Dark BBC [papo]
@namespace      github.com/paponius/userstyles
@version        2.2.4
@description    Updated: 2024-05. 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") {

/* todo: 24-05-07: BBC broke the 2024 theme. Names of tags changed and restructured <main> and added <article>
   everything broke (again). Now fixed, except: Menu, Watch more-on
 */

/* Different themes used
   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
     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 bbb.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.

   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.


   Because of need for multiple themes and the problem of random and nonstatic class names in some, or elements with no class name at all,
   the Style in this file differs in a structure from my other Styles.
 */

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

: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: <body><div id="__next"><main class="app">...
 */

/* -- 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(.huhu)
, .app > header button:not(.huhu) {
/* 	background-color: var(--s-color-BG-Red2); */
	background: rgba(0, 0, 0, .3);
	color: var(--p-color-secondary);
/* 	border: 1px solid var(--p-color-secondary); */
}
/* In orig, when the icon is "Menu" - three lines, hover BG is transparent, but when it's "Close" - "X", hover is rgb(230, 232, 234);
   Overruling transparent for both cases */
main > header button:not(.huhu):hover
, .app > header button:not(.huhu):hover {
	background-color: transparent;
}
/* that's what login button has. must also keep border here, so the size will be identical */
main > header button[aria-la...