Dark CNBC [papo] by papo

/* ==UserStyle==
@name           Dark CNBC [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.3
@description    Updated: 2025-03 [m] 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)"
@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 select FixHeaderOverlap     'Fix top header overlapping "Livestream" with CNBC on mobile' {
  'ON': '',
  'OFF': 'DISABLED'
}
@var select FixColumnMargin      'Fix main article column not centered on mobile.' {
  'ON': '',
  'OFF': 'DISABLED'
}
@var select FixHeadersMobile     'Fix top headers "Live" and "Breaking" to show wider scrolling area on mobile.' {
  'ON': '',
  'OFF': '(max-width: 1px) and'
}


@advanced dropdown prop-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background: rgba(0, 0, 0, .3) !important; EOT;
  r "Reddish" <<<EOT background-color: rgba(64, 17, 17, .3); !important; EOT;
  a "Transparent" <<<EOT background: unset !important; EOT;
  b "Black" <<<EOT background: black !important; EOT;
  c "as Custom Text Background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}


@var select xxx 'To unstick header, remove elements, get my "DeAnnoy XXX [papo]" UserStyle. https://userstyles.world/style/21349/deannoy-cnbc-papo' {
  '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
}


==/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.3 2024-05
 */
@-moz-document url-prefix("https://www.cnbc.com/20")
, domain("www.cnbc.com")
{

/* 2do: https://www.cnbc.com/search/?query=Microsoft */

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

/* 
HP:   Home Page International PageBuilder-page
Article page: Regular Article PageBuilder-page
 */

:root {
	/* brighter blue, from a blue color used in orig style */
/* 	--x-color-blua-from: #002f6c; */
/* 	--x-color-blua-from: hsl(214, 100%, 21%); */
	--s-color-blua: hsl(214, 100%, 40%);
}

/* todo

 test .LiveAlerts-heading header  bigger area [m]


*/


/* === fix [m] === */
/* copy is in my DeAnnoy UserStyle */
/* - fix overlapping header items - */
@media (max-width: 359px) {
	/*[[FixHeaderOverlap]]*/.CNBCGlobalNav-rightNavigationWrapper .CNBCGlobalNav-livestreamWrapper {
		margin-right: 128px;
		/* --was-margin-right: 78px; */
	}
	/*[[FixHeaderOverlap]]*/.WatchLivestream-watchContainer {
		right: -57px;
	/* 	right: -16px; */

		.WatchLivestream-streamTxt {
			width: 29px;
			overflow: hidden; /* also need Y, as it will start to scroll */
		}
	}
	/* for some reason 'sign-in' is now too far right */
	/*[[FixHeaderOverlap]]*/.CNBCGlobalNav-rightNavigationWrapper .CNBCGlobalNav-signInMenuWrapper {
/* 		margin-right: 12px; */
	}

/* - fix margins of Article page content - */
	/* .PageBuilder-col-full would cause horizontal scroll on HP */
	/* double use: sometimes orig sel has last-child, so 0-2-0 is needed */
	/*[[FixColumnMargin]]*/.PageBuilder-col:not(.PageBuilder-col-full),
	/*[[FixColumnMargin]]*/.PageBuilder-sidebar {
		margin: 0 auto;
		/* --was-margin-right: 30px; */
	}
	/* on HP, one more box (besides .PageBuilder-col-full) is causing horisontal scroll after the above */
	.FeaturedNewsHero-container {
		margin: 0 -13px;
		/* --was-margin: 0 -20px; */
		.SecondaryCardContainer-container {
			padding: 0px 14px;
			/* --was-padding: 0 21px; */
		}
	}
	
}

/* - fix "Breaking" header [m] scrolling text in too narrow box - */
@media /*[[FixHeadersMobile]]*/ (max-width: 459px) {
	.BreakingNews-wrapper,
	.LiveAlerts-wrapper {
		padding: 0 7px;
		/* --was-padding: 0 20px; */
	}
	.BreakingNews-heading,
	.LiveAlerts-heading {
		margin-right: 2px;
		/* --was-margin-right: 20px; */
	}
	.BreakingNews-heading {
		color: hsl(220, 100%, 86%);
	/*   color: #171717; */
/* 		box-shadow: 10px 0 5px 8px hsl(220, 100%, 80%); */
	}
	.BreakingNews-article::before {
    	background: linear-gradient(to right, hsl(0, 65%, 19%), transparent);
		content: "";
		height: 100%;
		position: absolute;
		left: 0;
/* 		top: 0; */
		width: 10px;
		z-index: 1;
	}
	.BreakingNews-article {
		width: calc(100% - 110px);
		/* --was-width: calc(100% - 130px); */
	}
	.BreakingNews-closeButton {
		right: 0;
		/* --was-right: 20px; */
	}
	.LiveAlerts-article {
		width: calc(100% - 110px);
		/* --was-width: calc(100% - 130px); */
	}
	.LiveAlerts-closeButton {
		right: 0;
		/* --was-right: 20px; */
	}
}

/* hide AD container if empty */
.BoxRail-ad:has(.mps-slot):not(:has(.mps-slot > div)),
.TopBanner-container[data-test="adTopBanner-0"]:has(.mps-slot):not(:has(.mps-slot > div)) {
	display: none;
}



/* --- masthead --- */
/* - three-lines menu drop down - */
.mega-links-container a, .mega-links-containerPro a {
	color: #ddd;
	/* --was-color: #005594; */
}
.mega-links-primaryLinkExpanded a:hover, .mega-links-primaryLinkExpandedProAndIC a:hover {
	color: hsl(214, 78%, 48%);
	/* --was-color: #071d39; */
}
.mega-menu-megaMenu {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;	
	/* --was-background: #fff; */
/*   color: #071d39; */
}

/* - menu items drop down - */
.nav-menu-button + .nav-menu-subLinks {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;	
	/* --was-background: #fff; */
}
.nav-menu-button + .nav-menu-subLinks .nav-menu-subLink {
	color: #ddd;
	/* --was-color: #005594; */
}
.nav-menu-button + .nav-menu-subLinks li {
	border-bottom: 2px solid #333;
	/* --was-border-bottom: 2px solid #f3f5f7; */
}
/* weird method for hover */
.nav-menu-button + .nav-menu-subLinks li:hover::before {
	color: white;
	/* --was-color: #005594; */
}
.nav-menu-button + .nav-menu-subLinks li:hover {
	background-color: rgba(0, 0, 0, .2);
	/* --was-background-color: #f3f5f7; */
}

/* "Select" item separately */
.EditionMenu-featuredSubLink {
	color: #ddd !important;
	/* --was-color: #005594 !important; */
}
.EditionMenu-featuredSubLinks {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;	
	/* --was-background: #fff; */
	/* --was-box-shadow: 0 0 6px #0000002e; */
}
.EditionMenu-featuredListItem:hover {
	background-color: rgba(...