DeAnnoy Independent.co.uk [papo] by papo

/* ==UserStyle==
@name           DeAnnoy Independent.co.uk [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.2
@description    Updated: 2024-07. Notes and feedback: https://github.com/paponius/userstyles/. Removed distracting and annoying elements, more responsive. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo
@license        CC BY-NC-SA 4.0
@preprocessor   stylus

@var checkbox hideNewsletter         "Hide Newsletter subscription box" 1
@var checkbox concise                "Concise huge elements and whitespace - Less scrolling" 0
@var checkbox NoRecycle 'Distraction Free: Do not Recycle me (no More Stories, no Related, ...)' 0
@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 hideRelatedVideo       'Small Video Player: Hide unrelated "Related videos". Sometimes it shows unrelated videos.' 1
@var checkbox hideSmallPlayer        "Small Video Player: Hide always" 0
@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
--- end of common block ---

==/UserStyle== */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.1 24-02 */
@-moz-document domain("independent.co.uk"), url("https://cdn.jwplayer.com/players/DOveT6jm-QoL8Kre2.html") {
/* this URL is an iframe with videos placed inline in article. top videos are directly on independent.co.uk */
/* cdn.jwplayer.com/players/DOveT6jm-QoL8Kre2.html */


/* TODO:
   check if the iframe with video does not change in time, and with different pages and sections
   check if class names do not change
 */


/* if taboola spam is blocked, the site will show an empty space where the spam should have been.
This will remove the empty space only if the spam did not load. */
#taboola-mid-article-thumbnails-iii:not(:has(div)), #taboola-below-article-1:not(:has(div)) {
	display: none;
}
/* on "liveblog" live articles */
.amp-live-list-item[id^="ad-"]:has(.taboola):not(:has(.taboola > *)) {
	display: none;
}


 .gYzCaH
,.newsletter-component
 { /* must be indented because of stupid preprocessor */
	display: none unless not hideNewsletter;
}

.jw-related-shelf-container {
	display: none unless not hideVidRecom;
}



if concise {
	#articleHeader > div {
		padding-top: 5px;
		padding-bottom: 5px;
		/* --was-padding: 20px 16px 18px; */
		margin-top: 5px;
		/* --was-margin: 20px auto 0; */
	}
	#articleHeader div:has(> nav) h1 {
		font-size: 25px;
		line-height: 27px;
		/* --was-font: 700 54px/58px "Indy Serif","Indy Serif Fallback",serif; */
	}
	#articleHeader > div > nav {
		padding-top: 2px;
		padding-bottom: 12px;
		/* --was-padding: 24px 0 19px; */
	}
	#articleHeader div:has(> nav) h2 {
		font-size: 18px;
		line-height: 18px;
		/* --was-font: normal 20px/24px Indy Sans,Indy Sans Fallback,sans-serif; */
	}
	#articleHeader div > nav + div > * {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#articleHeader div > nav + div > h1 {
		margin-bottom: 10px;
	}
}



if NoRecycle {
	.main-wrapper .related

	, .sidebar .most-popular
	, .sidebar .popular-videos
	, .sidebar .indy100-trending
	, .sidebar .sponsored-features
	{ display: none; }
}


/* Video player: Half bottom of the video is shaded to black when mouse moves above the video.
   Backdrop is here limited to Controls area. It is usually not noticeable, as most videos are wide with Letterboxing black bar on bottom.
   But still need to keep it on the bottom for tall 4:3 videos. This can be seen on https://www.imdb.com/video/vi1157933593/ */
if hideVidBackdrop or moveVidContrUp {
	.jwplayer:not(.jw-state-idle) .jw-controls-backdrop {
	/* 	display: none unless not hideVidBackdrop; */

		height: 61px; /* was not good for different player sizes: 12%; */
		/* width: 100%; */
		bottom: 0;
		top: unset;
	}
}

/* html body div#botr_DOveT6jm_QoL8Kre2_div.jwplayer.jw-reset.jw-state-paused.jw-stretch-uniform.jw-flag-aspect-mode.jw-breakpoint-3.jw-floating-dismissible.jw-flag-user-inactive div.jw-wrapper.jw-reset div.jw-controls-backdrop.jw-reset */

if moveVidContrUp {
	.jwplayer:not(.jw-flag-small-player) .jw-controlbar {
		bottom: unset;
		/* --was-bottom: 0; */
	}
	.jwplayer:not(.jw-flag-small-player) .jw-controls-backdrop {
	/*   display: none unless not hideVidBackdrop; */
		bottom: unset;
		top: 5px;
		top: 0;
	}
}

if hideVidContr {
	.jw-controlbar {
		display: none;
	}
	.jw-controls-backdrop {
		display: none;
	}
}

.jw-logo {
	display: none unless not hideVidLogo;
}

.jw-captions.jw-captions-enabled {
	display: none unless not hideVidCaptions;
}

.jw-overlays {
	display: none unless not hideVidSomething;
}

.jw-nextup-container {
}

/* Horizontal volume
   Vertical Volume keeps opening and then clicking on the progress bar will mute audio.
 */
if movePlayerVolume {
	.jw-horizontal-volume-container {
		/* flex: 0 0 auto; */
		/* 	position: relative; */
		/* 	height: 44px; */
		width: 107px;
		/* 	align-items: center; */
		display: flex;
		/* 	justify-content: center; */
	}

	.jw-horizontal-volume-container .jw-knob {
		transform: translate(-50%,-50%) scale(0.5);
	}

	.jw-controlbar .jw-icon-volume .jw-overlay {
		display: none;
	}
}

if showProgressPossition {
	.jw-slider-time .jw-knob {
		transform: translate(-50%,-50%) scale(0.5);
	}
}


if moveControlsDown {
	.jw-display-controls {
		display: none;
	}
	.jw-flag-small-player:not(.jw-flag-audio-player):not(.jw-flag-ads) .jw-controlbar .jw-button-container > .jw-icon-next,
	.jw-flag-small-player:not(.jw-flag-audio-player):not(.jw-flag-ads) .jw-controlbar .jw-button-container > .jw-icon-playback,
	.jw-flag-small-player:not(.jw-flag-audio-player):not(.jw-flag-ads) .jw-controlbar .jw-button-container > .jw-icon-rewind {
		display: flex;
	}
}


/* related */
if hideRelatedVideo {
	.jwplayer .jw-overlays .jw-plugin-related.jw-plugin-related-open {
		display: none;
	}

	/* 	show controls */
	.jwplayer.jw-flag-overlay-open-related .jw-controls, .jwplayer.jw-flag-overlay-open-related .jw-title {
 		display: block;
		/* --was-display: none; */
	}
	.jw-flag-overlay-open-related .jw-logo {
 		display: block;
		/* --was-display: none; */
	}
}

.jw-flag-small-player {
	display: none unless not hideSmallPlayer;
}
/* sometimes it's not JW */
.video-sticky-video {
	display: none unless not hideSmallPlayer;
}

/*

before first start play
jwplayer jw-reset jw-state-idle jw-stretch-uniform jw-flag-aspect-mode jw-breakpoint-3 jw-floating-dismissible jw-flag-user-inactive
paused
jwplayer jw-reset jw-state-paused jw-stretch-uniform jw-flag-aspect-mode jw-breakpoint-3 jw-floating-dismissible jw-flag-user-inactive

when video player jumps down, it stays in DOM where it was, just this class is added: jw-flag-small-player
full
jwplayer jw-reset jw-state-paused jw-stretch-uniform jw-flag-aspect-mode jw-skin-independent-regular jw-breakpoint-6 jw-floating-dismissible jw-flag-user-inactive
small player
jwplayer jw-reset jw-state-paused jw-stretch-uniform jw-flag-aspect-mode jw-skin-independent-regular jw-breakpoint-1 jw-floating-dismissible jw-flag-user-inactive jw-flag-small-player

*/
}