Dark BBC [papo] by papo

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


/* ** BBC web is using multiple different themes.
  Based on type of the web page. Normal Article, Opinion Article, Live Article, ...
  Next based on the age of the Article. Older, archieved articles use old theme.
  Based on location from where the BBC web is accessed. Visitors from UK see different page than from outside of the country.
  This UserStyle tries to covers all of them. Each in a separate section divided with a comment line containing `***`.
  
  These are the individual themes. It might not be a complete list. Names of these themes are mostly made-up by me for my own reference.


  *** Theme Countries and Cities 2024
  Theme is used for visitors from outside of the UK (bbc.co.uk) from around 2024-03-12. There was a limited testing period at the end of 2023.
  Some special pages are still open using older theme. But are gradually being switched over to this one.

  Theme is developed in Next.js. It does not use stable class names. Every element usually contains two class names
  and some do have property data-testid, which is stable, but sometimes removed in web app updates.
  e.g. <div data-testid="backdrop" class="sc-3192fecd-0 ifUzfO">
  Various types of Cards and their parent containers do use names of cities and countries within the data-testid property,
  hence the name of the theme.
  
  DOM structure
    202403: <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">
	20240608: Article page: <html lang="en-GB"><body><div id="__next"><div class="app"><main id="main-content"><article>
      <article> tag has no classnames. This created a conflict with already existing styling for Theme Chameleon,
	  which uses selector: main#main-content article. Need to add distinguisher: "body > #__next" or "body:not(> #__next)"


  *** 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"


  *** 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
	    also, or now 2501: <body class=""> <div class="orbit-header-container" id="orbit-header"> <header id="orb-banner" ...
     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.

e.g. https://www.bbc.co.uk/future/future-planet/

. Using: orbit, org-modules, nv-c-nav, lx-, gs- *** ***
 in 2024-03 used on:
   .../news/live/...
      e.g. https://www.bbc.com/news/live/uk-wales-68569230?src_origin=BBCS_BBC
           2024-03, but this does not match few days later anymore. It looks the same, but different DOM
      There might be mixed element from Theme Chameleon. e.g. election: https://www.bbc.com/news/live/uk-politics-68609729?src_origin=BBCS_BBC,
	    a banner, which is normally on page: https://www.bbc.com/news/election/2024/england/results
   ...co.uk/mediacentre/... (it will not switch to .com outside UK)
      e.g. https://www.bbc.co.uk/mediacentre/2024/jack-black-kickstarts-cbeebies-bedtime-stories-easter-weekend-lineup
 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


  *** 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
 */


/* 
body:has(> #__next > .app) {
	--p-note: 'Theme: Countries and Cities 2024';
}
 */


/* todo:
  fixed,...