DeAnnoy Washington Post [papo] unstick, subscrib.. by papo

/* ==UserStyle==
@name           DeAnnoy Washington Post [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.6
@description    Updated: 2024-10. 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 UnstickHeader2          "Unstick the secondary (Live, Trending) header" 1
@var checkbox HideOutbrainRecycle    'Hide 3rd party visitor Recycle elements' 1
@var checkbox HideMidArticleAnnoy    "Hide mid-article subscription, Follow and unrelated annoyance boxes" 1
@var checkbox HideMidArticleRecirc   "Hide mid-article recirculation cards" 0
@var checkbox HideNewsletter         "Hide Newsletter subscription box" 1
@var checkbox HideComments           "Hide comments" 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

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


==/UserStyle== */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.1.3 24-10 */
@-moz-document domain("washingtonpost.com"), url-prefix("file") {

/* todo:
https://www.washingtonpost.com/business/interactive/2024/us-sanctions-work-russian-oligarch-yacht-seized/
 */

@bUnstickHeader: boolean(@UnstickHeader = 1);
@bUnstickHeader2: boolean(@UnstickHeader2 = 1);

/* - alert header -
& when (@xxx-OptionalTODO-UnstickAlertHeader-xxx) {
	#sf-primary-nav ~ [data-link-group="alert"] {
		position: static;
		--was-position: sticky;
	  top: 0;
	}
}
 */

& when (@bUnstickHeader) {
	/* .wpds-c-fFSapB-fAfUZ-isFixed-true { */
	nav[class*="-isFixed-true"] {
		position: absolute;
		/* --was-position: fixed; */
	}
	/* sometimes the nav's parent is sicky instead */
	/* #sf-primary-nav.wpds-c-gCLoHk-fREMik-isSticky-true { */
	#sf-primary-nav[class*="-isSticky-true"] {
		position: relative;
		/* --was-position: sticky; */
	}
	
	/* - sometimes: Subscribe: :"For a limited time only, save up to 75% on a year of The Post! Switch on." */
	/* .wpds-c-cFaYiI-dguCHI-position-fixed */
	.center [class*="-position-fixed"]:first-child {
		position: absolute;
		/* --was-position: fixed; */
	}

	/* alert header move to top */
	#sf-primary-nav ~ [data-link-group="alert"] {
		top: 0;
	}

	/* move to top second header when it's still sticky */
	/* are not live and trending bar always on one bar? */
	#main-content > div:has(> ul[data-link-group="live-bar"]),
	#main-content > div:has(> ul[data-link-group="trending-bar"]) {
		top: 0;
		/* --was-top: 59px; */
	}
}

& when (@bUnstickHeader2) {
	#main-content > div:has(> ul[data-link-group="live-bar"]),
	#main-content > div:has(> ul[data-link-group="trending-bar"]) {
		top: 0;
		position: relative;
		/* --was-position: sticky; */
	}
/* 		when this header is present on a page, it will get sticky after a scroll-down, it also hides primary header */
	#elex-subnav {
		position: relative;
		/* --was-position: sticky; */
	}
}

& when (@HideNewsletter = 1) {
	div:has(> div[data-qa="newsletter"]) {
		display: none;
	}
	div:has(> div > [data-test-id="tf-wrapper"]) {
		display: none;
	}
}

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

/* in another userstyle: */
.article-body:has(a[data-qa="interstitial-link"], > [data-qa="subscribe-promo"], > #gift-share-inline) {
	--x-another: 1;
}

& when (@HideMidArticleAnnoy = 1) {
	#gift-share-inline,
/* "Follow" */
	div:has(> [data-test-id="tf-wrapper"])
	{
		display: none;
	}
	/* - newsletter subscription - */
	/* this is in a carousel, with one item shown at a time, sometimes the last of these is Subscribe,
	   only hide here, if the Subscribe is the first */
	.article-body > div:has([data-testid="carousel-item-0"] a[href^="https://www.washingtonpost.com/newsletters/"])
	, .article-body > div:has([data-qa="carousel-item-0"] a[href^="https://www.washingtonpost.com/newsletters/"])
	{
		display: none;
	}

}

& when (@HideMidArticleRecirc = 1) {
	.article-body:has([data-testid="inline-magnet"]),
	.article-body:has([data-qa="inline-magnet"]) {
		display: none;
	}
}

& when (@HideComments = 1) {
	[data-testid="coral-comments"],
	div:has(> [data-qa="comments-btn-div"]),
	[data-testid="article-actions-bar"] [data-testid="comments-button"]
	{
		display: none;
	}
}

}