DeAnnoy CNN [papo] by papo

/* ==UserStyle==
@name           DeAnnoy CNN [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.3
@description    Updated: 2025 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   less

# --- END: common block ---



# leaving varname unlockHeader, instead of UnstickHeader, to not change prefs for existing users.
@var checkbox unlockHeader           "Unstick the header" 1

@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 makeResponsive         "make Responsive (older mod. This will break some stuff now)" 0
@var checkbox CompressFooter         'Compress footer' 1
@var checkbox RemoveFooterMenu       'Remove menu from footer' 0

==/UserStyle== */


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

/* & when (@blockPopupMenus = 1) {} */

/* & when (@HideOutbrainRecycle = 1) {
	[data-testid="outbrain"] {
		display: none;
	}
}
 */






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

& when (@fixControls = 1) {
	/* - 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;
  */
}

& when (@unlockHeader = 1) {
	/* 
	   alternative: static
	   2404 `position: static` was used on .header__wrapper-outer in this US file
	   2411 changed to relative, static was hiding box-shadow
	   2503 again to static, relative is not good when there is above-header-ad
	   When static is used, content of menu (clicking hamburger icon) is not shown. (on pages: /videos, but 2411 on any cnn page).
	   a solution is to change to static only when the menu is not open. On opening the menu, JS on orig page adds .header--active class to #pageHeader.
	 */
	.header__wrapper-outer:not(:has(nav#pageHeader.header--active)) {
		position: static;
	}

/* 	.header__wrapper-outer { */
/* 		position: relative; */
/* 	} */
	#nav__plain-header {
		position: absolute !important;
	}
}



/* =======
   all below is older, 2018 - 2023
   some might not work anymore or be useless
 */
& when (@vidRemoveShade = 1) {
	/* 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 */
& when (isdefined(@makeResponsive)) {
& when (@makeResponsive = 1) {
/* 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; */    
}

}
}

& when (@CompressFooter = 1) {
	#pageFooter {
		.subnav__subsection, .subnav__subsection-link {
			margin-top: 0;
			/* --was-margin-top: 4px; */
		}
		.subnav__subsections {
			margin-top: 0;
			/* --was-margin-top: 12px; */
		}
		.subnav__section {
			margin-bottom: 5px;
			/* --was-margin-bottom: 12px; */
		}
		.footer__subnav {
			margin-bottom: 0;
			/* --was-margin-bottom: 24px; */
		}
		.footer__divider {
			margin: 0 auto;
			--was-margin: 24px auto;
		}
		.footer__row {
			margin-top: 0;
			/* --was-margin-top: 32px; */
		}
		.footer__links {
			margin-top: 0;
			/* --was-margin-top: 24px; */
		}
		.footer__copyright-text {
			margin-top: 0;
			/* --was-margin: 24px auto 0; */
		}
		.search-bar__form {
			margin-bottom: 5px;
			/* --was-margin-bottom: 24px; */
		}

		padding-top: 8px;
		/* --was-padding-top: 48px; */
		padding-bottom: 0;
		/* --was-padding-bottom: 24px; */
	}
}


& when (@RemoveFooterMenu = 1) {
	#pageFooter .footer__subnav {
		display: none;
	}
}


}