DeAnnoy BBC [papo] header,menu,title small/hide by papo

/* ==UserStyle==
@name           DeAnnoy BBC [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.0
@description    Updated: 2024-05. Notes and feedback: https://github.com/paponius/userstyles/. Removed distracting and annoying elements. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   stylus

--- end of common block ---

@var checkbox unstickHeader          "Unstick the header" 1
@var checkbox smallerHeader          "Smaller Header" 1
@var checkbox oneHeader              "One joined header" 1
@var checkbox dont_degrade_images    '"Do not highlight images" There are some images, placed in a block big as the screen, where it is hard to find a spot for a mouse to not hover over this box and degrade the image.' 1
@var checkbox liveScreenSaver        'Live feed: screen space saver' 1
@var checkbox liveNormalSizeCaption  'Live feed: normal size caption' 1
var checkbox vidDisableShade        "vidDisableShade" 1
@var checkbox xxx                    'Find and install my "Dark BBC [papo]" Style for Dark but colorful restyling' 1


==/UserStyle== */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.1.1 24-03 */
@-moz-document domain("bbc.com"), domain("bbc.co.uk") {

if unstickHeader {
	main > header:not(.huhu)
	, .app > header:not(.huhu)
	, main > nav[data-testid="level1-navigation-container"]
	, .app > nav[data-testid="level1-navigation-container"]
	{
		position: unset;
		/* --was-position: sticky; */
	}
}
/* why .huhu?, !important is overkill, I use made up classes to make a ruleset just a one step more specific as the one I am overriding */
if dont_degrade_images {
	a > div:not(.huhu):hover img {
		opacity: 1;
		outline: #671919 dotted 2px;
/* 		outline-style: dashed; */
	}
}

if smallerHeader {
	/* .bbWPuq { */
	main > header:not(.huhu)
	, .app > header:not(.huhu) {
/* 	main > header { */
		height: unset;
		/* --was-height: 65px; */
	}
	/* .cwjPWg { */
	main > header > div:not(.huhu)
	, .app > header > div:not(.huhu) {
		padding: 3px;
		/* --was-padding: 1rem; */
	}
	
	/* also have to move nav header up, in case it's still sticky, to flush with the top header */
	main > nav[data-testid="level1-navigation-container"]
	, .app > nav[data-testid="level1-navigation-container"] {
		top: 39px;
	}
}

if oneHeader {
	main > nav[data-testid="level1-navigation-container"]
	, .app > nav[data-testid="level1-navigation-container"] {
		top: 0;
		background: transparent;
		/* same as the header was set to originally. 4000? why not 2 billions? */
		z-index: 4000;
		border-bottom: none;
		position: fixed;
		pointer-events: none;
	}
	main > nav[data-testid="level1-navigation-container"] > section
	, .app > nav[data-testid="level1-navigation-container"] > section {
		border-bottom: none;
	}
	main > nav[data-testid="level1-navigation-container"] > section > nav
	, .app > nav[data-testid="level1-navigation-container"] > section > nav {
		pointer-events: auto;
	}
	main > header > div > div:first-of-type
	/* 24-05-07: now it is already "start" */
	, .app > header > div > div:first-of-type {
		justify-content: start;
	}
	main > header > div > div:nth-of-type(2)
	, .app > header > div > div:nth-of-type(2) {
		order: -1;
  		padding-right: 6px;
		flex-grow: 0;
	}
}
/* It helps, that when width is getting smaller, at one moment the nav header is hidden by the original site's design.
   by coincidence, it's quite fitting width size, for when it would start colliding with the <header> header elements.
 */

if oneHeader && !smallerHeader {
	main > nav[data-testid="level1-navigation-container"]
	, .app > nav[data-testid="level1-navigation-container"] {
		top: 26px;
	}
}
if oneHeader && unstickHeader {
	main > nav[data-testid="level1-navigation-container"]
	, .app > nav[data-testid="level1-navigation-container"] {
		position: absolute;
	}
}



/* video player is in a shadow-root */
/* <smp-video-layout style="display: block; --smp-volume-controls-group-width: 48px; --smp-secondary-controls-group-width: 144px;" aria-hidden="false" part="controls" class="smp_B3 title_header_visible fadedOut">

smp_B3 title_header_visible fadedIn controlsShown

fadedOut changes to fadedIn
controlsShown
 */

/* if vidDisableShade {

} */


if liveScreenSaver {
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] > div:has(> [data-testid="glastonbury-title-section"]) {
	grid-template-columns: auto 1fr 1fr;
	grid-template-rows: 1fr 1fr;
  }
  /* e.g. "NEWS" logo */
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] > div:has(> [data-testid="glastonbury-title-section"]) > div:has(> [data-testid="glastonbury-heading"]) {
	grid-area: 2/2/3/3;
	grid-template-columns: unset;
	grid-template-rows: auto 1fr;
	justify-items: center;
  }
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] > div:has(> [data-testid="glastonbury-title-section"]) > div[data-testid="glastonbury-title-section"] {
	grid-column: 1/2;
	grid-row: 1/3;
  }
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] > div:has(> [data-testid="glastonbury-title-section"]) > div[data-testid="glastonbury-button"] {
	grid-area: 1 / 2 / 2 / 3;
	margin-left: 10px;
  }
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] {
	margin-top: 10px;
	/* --was-margin-top: 37px; */
  }
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] [data-testid="glastonbury-title-section"] {
	margin-bottom: 10px;
	/* --was-margin-bottom: 16px; */
  }
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] [data-testid="glastonbury-title-section"] [data-testid="glastonbury-image-wrapper"] {
	margin-bottom: 0;
	/* --was-margin-bottom: 16px; */
  }
  
}

if liveNormalSizeCaption {
  main > article > section[data-testid="tennessee-section-outer"] [data-testid="glastonbury-container"] h2[data-testid="glastonbury-title"] {
	font-size: 18px;
	line-height: 22px;
  }
}


example {
	padding: 2px 10px !important unless not xxx;
}

}