DeAnnoy CBS News [papo] by papo

/* ==UserStyle==
@name           DeAnnoy CBS News [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.0
@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 ---



@var checkbox UnstickHeader          "Unstick the header" 1
@var checkbox UnstickLiveHeader      "Unstick the second header, on Live pages" 1

@var checkbox NotHugeSectionLabels   'Not Huge Section Labels' 0
@var checkbox DisableGap             'Disable promo-image-wrapper, removes the top gap' 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 */
@-moz-document domain("cbsnews.com") {

& when (@UnstickHeader = 1) {
	.site-header__container:not(.salt) {
		position: unset;
	}
	/* sub header on Live pages */
	.has-collapsible-header .is-collapsed #amp-live-list--title {
		top: 0;
	}
}

& when (@UnstickLiveHeader = 1) {
	.has-collapsible-header .is-collapsed #amp-live-list--title {
		position: unset;
	}
}

/* I don't see a function for content__promo-image-wrapper. It's causing a gap between header and content.
   This element has margin-bottom: -415px;
   but height: 370px;
   this will move it up, above its parent.
   next flex item, .content__high-wrapper (hero), will then start at the bottom of the previous item,
   that is higher than the parent element and so part will become covered over by the header.
   to fix this, orig site uses min-height: 415px; with justify-content: flex-end; on it.
   the hero element is still partialy overlaped by the header, but its content is moved down, leaving the covered-over part unused.
 */
& when (@DisableGap = 1) {
	.content__promo-image-wrapper {
		display: none;
	}
	.content__high-wrapper {
		min-height: unset;
	}
}


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

	@media (min-width: 1020px) {
		.component__title {
			font-size: 2rem;
		}
	}
	@media (min-width: 1360px) {
		.component__title {
			font-size: 2rem;
		}
	}
}
}