DeAnnoy CNN [papo] by papo

/* ==UserStyle==
@name           DeAnnoy CNN [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.5
@description    Updated: 2024-04. Notes and feedback: https://github.com/paponius/userstyles/. What's the point of placing overlay buttons over the video. Also removes dark shade covering the video. More Options to come. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo
@license        CC BY-NC-SA 4.0
@preprocessor   stylus

--- end of common block ---
@var checkbox fixControls            "Video Player: Move controls and buttons from video overlay down to blank space." 1
@var checkbox vidRemoveShade         "Video Player: Remove shade when mouse hover" 1
@var checkbox unlockHeader           "Don't lock header to top of a page" 1
@var checkbox makeResponsive         "make Responsive (older mod. This will break some stuff now)" 0


==/UserStyle== */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.1.1 24-03 */

/* history:
was name           cnn.com res [papo]
created: 2018-08-27
edited: 2023-08-16 */
@-moz-document domain("cnn.com") {


/* 
fsd: Full screen detection. There is no common class name distinguishing full screen. Luckily there is now :has()

pui_default-play-slate > .pui_control-bar > div > .pui_control-bar_bottom-control-bar > button.pui_control-bar_fullscreen-toggle > svg.window-expand-icon

All selectors need `body:not(.layout-homepage)` to disable them on a home page, where are small video players
*/

if fixControls {
	/* - add space for controls - */
	body:not(.layout-homepage) .video-resource__wrapper {
		/* fsd:	this rule is irelevant in FS, let it apply */
		/* .video-resource__wrapper:has(.pui_control-bar_bottom-control-bar > button.pui_control-bar_fullscreen-toggle > svg.window-expand-icon) { */
		padding-bottom: calc(56.3% + 50px);
	}
	/* WO fsd: #top-container-1 { */
	body:not(.layout-homepage) .fave-player-container:has(.pui_control-bar_bottom-control-bar > button.pui_control-bar_fullscreen-toggle > svg.window-expand-icon) #top-container-1 {
		height: calc(100% - 50px) !important;
	}

	/* move down */
/* 	the same class but .gqoASd might change */
	body:not(.layout-homepage) .gqoASd,
	body:not(.layout-homepage) .pui_center-controls {
		/* --was-top: 50%; */
		top: unset;
		transform: unset;
		/* --was-transform: translateY(-50%); */
		bottom: 0px;
	}

	/* dont's hide when mouse away */
	/* WO fsd: .gqoASd = .pui_center-controls */
	body:not(.layout-homepage) .fave-player-container:has(.pui_control-bar_bottom-control-bar > button.pui_control-bar_fullscreen-toggle > svg.window-expand-icon) .pui_center-controls
	/* WO fsd: ,.pui_control-bar > .dzTrFF, but .dzTrFF changed. Now using "div", there are two, the second is the progress bar */
	,body:not(.layout-homepage) .fave-player-container:has(.pui_control-bar_bottom-control-bar > button.pui_control-bar_fullscreen-toggle > svg.window-expand-icon) .pui_control-bar > div
	{
		opacity: 1 !important;
	}
	/* keep progress bar up and make it thicker */
	body:not(.layout-homepage) .pui_control-bar_progress-bar {
		height: 10px !important;
	    bottom: 40px !important;
		/* it's ON always anyway */
		/* opacity: 1 */
		--was-when-hidden-bottom: 0px
		--was-when-hidden-height: 2px
		--was-when-hidden-margin: 0px;
		--was-when-hidden-transition: bottom 0.75s ease 0s;
		--was-when-hidden-width: 100%;
		/* - was when hover - */
		--was-when-hover-height: 2px;
	    --was-when-hover-bottom: 40px;
	}

	/* this class changed: .foLvOZ */
	body:not(.layout-homepage) .pui_control-bar {
		pointer-events: none;
		/* --was-pointer-events: auto; */
	}
	body:not(.layout-homepage) .pui_control-bar_bottom-control-bar [class*="pui_control-bar_"],
	body:not(.layout-homepage) .pui_control-bar_progress-bar {
		pointer-events: auto;
	}

	/* btn common */
	body:not(.layout-homepage) .pui_center-controls > button {
		margin: 0 8px;
		position: unset;
		/* --was-position: absolute; */
	}
	body:not(.layout-homepage) .pui_center-controls > button > svg {
		width: 24px;
		height: 24px;
	}
	/* ball */
	/* in non-fullscreen player, the div with the ball is inserted/removed by JS on control bar hover */
	body:not(.layout-homepage) .pui_progress-bar--content > .pui_progress-bar--content {
		opacity: 1;
		height: 16px;
		width: 16px;
		top: -3px;
	}
	body:not(.layout-homepage) .pui_progress-bar--content > .pui_progress-bar--content:hover {
		height: 24px;
		width: 24px;
		top: -7px;
	}
	
/* 	todo: there is one more hover, when hover over progressbar is different than controls */


	/*
parent has the same class name .pui_progress-bar--content
div.pui_progress-bar--content.sc-eqIVtm.fHZfbP

transform: translateX(-11px);
}
@media screen and (min-width: 1024px) {
  .sc-fMiknA:hover .fHZfbP {
    opacity: 1;
    height: 12px;
    width: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .sc-fMiknA .fHZfbP {
    opacity: 0;
    height: 4px;
    width: 4px;
  }
}
.fHZfbP {
  background-color: rgb(204, 0, 0);
  border-radius: 12px;
  height: 12px;
  left: 0px;
  position: absolute;
  top: -4.5px;
  */
}

if unlockHeader {
	/* on pages: /videos */
	/* the menu content - .header__subnav, will not show if .header__wrapper-outer is static.
	   When the menu is shown, JS will add .header--active class to #pageHeader. This will detect that.
	 */
	.header__wrapper-outer:not(:has(nav#pageHeader.header--active)) {
		position: static;
	}
	#nav__plain-header {
		position: absolute !important;
	}
}


/* =======
   all below is older, 2018 - 2023
   some might not work anymore or be useless
 */
if vidRemoveShade {
	/* video player - remove the dark curtain */
	.pui-wrapper > div {
		pointer-events: unset !important;
		background-color: unset !important;
	}
	/* video player bottom bar - remove the dark curtain */
	.pui_control-bar > div {
				background-color: unset !important;
		}

	/* show positioner - red dot */
		.pui_progress-bar--content___XXX {

		height: 15px !important;
		width: 15px !important;
		opacity: 1 !important;
	}
}


/* ===== from my other older style - responsiveness 2018-08-02 */
if makeResponsive {
/* responsivness was done by mix of CSS and JS,
added wide right padding to main content,
JS then sets "left" with fixed px to position it on right */

/* this also unintentionally make show pinned video on narrow screens, which might be undesirabl on phones */

/* @media (min-width: 960px) */
.pg-rail--align-right .pg-rail-short__wrapper, .pg-rail--align-right .pg-rail-tall__wrapper {
    padding-right: unset;
    /* padding-right: 320px; */
}

/* right panel, just ADs - remove */
/* <div data-bundle="adzones" class="pg-rail pg-rail-tall__rail"> */
/* can keep the ADs, but I didn't test where they will show */
div[data-bundle="adzones"] {
    display: none !important;
}

body.videopinning--on .pg-rail-tall__head .inbetweener-unpinner {
    right: -10px !important;
    left: unset !important;
    /* left: -10px; */
    
}
body.videopinning--on.inbetweener-pinner--type1 .pg-rail-tall__head .inbetweener-pinner--type1 {
    right: 0px !important;
    left: unset !important;
    /* left: 0px; */
}
.pg-rail-tall__head .inbetweener-pinner--type1, .pg-rail-tall__head .inbetweener-pinner--type2 {
    right: 0px !important;
    left: unset !important;
    /* left: 0px; */
}
body.videopinning--on .pg-rail-tall__head .media__video--responsive div.theoplayer-container {
    right: 0px !important;
    left: unset !important;
    /* left: 0px; */    
}
body.videopinning--on .pg-rail-tall__head .media__video--responsive .media__caption.el__storyelement__title.fade-in {
    right: 0px !important;
    left: unset !important;
    /* left: 0px; */    
}
}
}