DeAnnoy CNN [papo] by papo

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


# --- optional common block ---
#var checkbox UnstickHeader          "Unstick the header" 1

#var checkbox HidePriHeader          'Hide primary navi header on article pages. (When ON, Go to Home Page to access it.)' 0
#var checkbox HideSecHeader          'Hide secondary navi header on article pages. (When ON, Go to Home Page to access it.)' 0
#var checkbox DeclutterHeaders       'Remove links and menus from headers on article pages. (When ON, Go to Home Page to access menu.)' 0

#var checkbox smallerHeader          "Smaller Header" 1
#var checkbox oneHeader              "One joined header" 1

# - recycle - recirc -
#var checkbox HideMidArticleAnnoy    "Hide mid-article subscription and unrelated annoyance boxes" 1
#var checkbox HideMidArticleRecirc   "Hide mid-article recirculation cards" 0
#var checkbox HideOutbrainRecycle    'Hide 3rd party visitor Recycle elements' 1
#var checkbox NoRecycle              'Distraction Free: Do not Recycle me (no More Stories, no Related, ...)' 0
#var checkbox Declutter              'Remove excessive elements, which have nothing to do with opened article.' 0

#var checkbox xxx                    'Find and install my "Dark BBC [papo]" Style for Dark but colorful restyling' 1

#var checkbox FullWidth              "Full Width (must enable also Distraction Free)" 0
#var checkbox responsive             "Make page more responsive to the size of a browser. (Not perfect.)" 0

#var checkbox hideFloatingShareBar   "Hide floating share bar." 1
#var checkbox hideOverPicShare       "Hide picture share overlay - icon over each picture in the article." 1
#var checkbox hideOverPicCnt         "Hide picture album overlay - icon over each picture in the article." 1
#var checkbox hideSelTextShare       "Hide share box poping up after a text is selected in an article." 0
#var checkbox fixEmptiness           "Remove excessive whitespace padding." 0

#var checkbox HideNewsletter         "Hide Newsletter subscription box" 1

#var checkbox HideComments           "Hide comments" 0

#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 blockPopupMenus           "Block popup menus, opening on hover over page content." 1

### Video player ###
#var checkbox hidePausedVideoOverlay "Hide spam on paused video. Enabling to see freezed video." 1
#var checkbox hideVidRecom           "Video Player: Hide recommendation overlay on pause" 1
#var checkbox hideVidBackdrop        "Video Player: Hide Video Backdrop overlay. Half of video is darker on mouse hover." 1
#var checkbox hideChromelessPlayer   "Hide floating video player, playing unrelated stories at the bottom of a page." 1
#var checkbox hideSmallPlayer        "Small Video Player: Hide always" 0
#var checkbox dontAutoPlayPreview    "Don't autoplay a video preview on some videos within the article. Show a video poster instead." 1
#var checkbox movePlayerPrevNext     "Video Player: Move big video overlaying Prev Next buttons to control panel. And remove black shade from video on mouse hover." 1
#var checkbox movePlayerVolume       "Video Player: Change volume control to horizontal. To avoid clicking it by mistake instead of the progress bar." 1
#var checkbox showProgressPossition  "Video Player: Show currently playing position." 1

#var checkbox hideRelatedVideo       'Small Video Player: Hide unrelated "Related videos". Sometimes it shows unrelated videos.' 1
#var checkbox moveControlsDown       "Small Video Player: Move nonsensicaly big red overlaying control buttons down" 1
#var checkbox moveVidContrUp         "Video Player: Move control buttons up. Usefull for videos with subtitles or a crawl text." 0
#var checkbox hideVidLogo            "Video Player: Hide Independent Logo" 0
#var checkbox hideVidSomething       "Video Player: Hide more overlays. No idea what. Let me know." 0
#var checkbox hideVidCaptions        "Video Player: Hide captions. No idea when, did not see any. Let me know." 0
#var checkbox hideVidContr           "Video Player: Hide control buttons. This could be useful to temporarily hide to take a screenshot." 0
#var checkbox showProgressPossition  "Video Player: Show ball on currently playing position." 1
#var checkbox movePlayerVolume       "Video Player: Change volume control to horizontal. To avoid clicking it by mistake instead of the progress bar." 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 vidDisableShade        "vidDisableShade" 1

#var select debug-test "debug" {
  '0:Normal': '{ --debug: 0; }',
  "1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "{ --debug: 1; color: yellow !important; background: violet !important; }"
}

# --- END: optional common block ---


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

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