DeAnnoy CBS News [papo] by papo

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

@var checkbox UnstickTopAd           'Unstick top Ad' 1


==/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;
		}
	}
}

& when (@UnstickTopAd = 1) {
	.device--type-desktop:not(.has-collapsible-header) .top-ad-container.is-sticky {
		position: relative;
		/* --was-position: -webkit-sticky; */
		/* --was-position: sticky; */
	}
}

}