Deannoy IMDb [papo] by papo

/* ==UserStyle==
@name           DeAnnoy IMDb [papo]
@namespace      github.com/paponius/userstyles
@version        1.5.2
@description    Updated: 2024-12. 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
@license        CC BY-NC-SA 4.0
@preprocessor   stylus

@var checkbox fixRoundPics           "Fix rounded pictures of actors on a Title page. Restore full square view." 1
#                                      [default, min, max, step, units] All items but the default value are optional. Use "null" to skip.
@var range    OverallRoundAvatars    "Shape of avatars overall (e.g. homepage). From squared to rounded. (except the above)" [5, 0, 50, 5, "%"]
@var range    BiggerPicOnArtistHover "Bigger artist's picture on hover. (set to 150px to turn this off) (not perfect as the pic is thumb quality. Get UserScript instead, also on my git.)"    [300, 150, 400, 50, "px"]
@var checkbox fixEmptiness           "Remove excessive whitespace (for weary scrolling finger)" 1
@var checkbox responsive             "Make page more responsive to the size of a browser. (Not perfect. and only affects the old site's style pages.)" 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
#                                      [default, min, max, step, units] All items but the default value are optional. Use "null" to skip.
@var checkbox hideIMDbPro            "Hide some annoying IMDb Pro links." 1
@var checkbox RemoveUnrelated        'Remove unrelated "Related news" ,"Contribute"' 0
#var checkbox MovePrimeADDown        'Move Prime AD Down' 0
@var checkbox RemoveADEditorial      'Remove Editorial AD "Everything New on Prime", ...' 0
@var checkbox RemoveRightColumn      "Remove right column" 0
@var checkbox FooterCondense         'Condense the footer' 1
@var checkbox RemoveFooterSocialAndApp "Remove Social and App boxes from footer. (When ON, Go to Home Page to access it)" 1
@var checkbox highlightnonUS         'Highlight line with Country or Language if a movie is not English speaking from Hollywood (from US)' 0

@var checkbox otherOlder             "Older: Hide some annoying bars. Probably not used anymore by IMDb." 1
@var checkbox fixTrampPic            "Easter tramp egg" 1
#var checkbox debug-test "Debug. Just for testing. Don't turn this ON." 0
==/UserStyle== */
/* hist: first created 2019-04-30, name: IMDb declutted [papo] */
@-moz-document domain("imdb.com") {


/* === Video Player === */

/* Move next/prev buttons from the middle of the video, down to control bar */
if movePlayerPrevNext {
	.jw-controls > .jw-display > .jw-display-container {
		bottom: 0;
		left: 319px;
		position: absolute;
		z-index: 1;
	}
	.jw-breakpoint-4 .jw-display .jw-icon, .jw-breakpoint-4 .jw-display .jw-svg-icon, .jw-breakpoint-5 .jw-display .jw-icon, .jw-breakpoint-5 .jw-display .jw-svg-icon, .jw-breakpoint-6 .jw-display .jw-icon, .jw-breakpoint-6 .jw-display .jw-svg-icon, .jw-breakpoint-7 .jw-display .jw-icon, .jw-breakpoint-7 .jw-display .jw-svg-icon {
		width: 27px;
		height: 27px;
		line-height: 27px;
	}
	/* play - hide */
	.jw-display-icon-container.jw-display-icon-display {
		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/ */
	.jw-controls-backdrop {
		height: 12%;
		/* width: 100%; */
		bottom: 0;
		top: unset;
	}

	/* from 2019-12, in 2024 can't find .jw-skin-paradiso selector.  */
	.jwplayer.jw-skin-paradiso.jw-state-paused .jw-controls {
		/* --was-background-color: rgba(30,30,30,0.4); */
		background-color: unset;
	}
}

/* Original Next button next to play. This will show it, but clicking it does nothing. Event function runs, but nothing happens. This probably won't work without JS tweaking.
.jw-icon-inline.jw-icon-next {
	display: flex !important; reset display to default from none defined inline
}
.jw-display-controls {
 	display: none;
}
*/


/* 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);
	}
}

/* === END Video Player === */


/* todo: overall radius */

.ipc-avatar, .ipc-avatar .ipc-lockup-overlay, .ipc-avatar .ipc-lockup-overlay__screen {
	border-radius: OverallRoundAvatars;
}
.ipc-media.ipc-media--circle-radius, .ipc-media.ipc-media--circle-radius ~ .ipc-lockup-overlay {
	border-radius: OverallRoundAvatars;
}



if (BiggerPicOnArtistHover != '150px') {
/* need media at-rule, 1. horizontal scrolls were not scrollable (solved by adding :hover), 2. it's breaking page design on mobile view, 3. bigger pic does not look good on <1024px page design and as there is usually no mouse hence hover on smaller screens, it's not worth to create a separate US for it */
@media screen and (min-width: 1024px) {
/* 	[data-testid="title-cast-item__avatar"]:hover > .ipc-avatar--base > .ipc-media--avatar:not(.ipc-media--fallback) { */
/* 	alt title-cast--movie */
	/* .ipc-avatar:hover seems unnecessary, but after problems with .ipc-shoveler__grid it's included */
	.title-cast .ipc-avatar:hover .ipc-media--avatar {
	  overflow: visible;
	}
/* 	[data-testid="title-cast-item__avatar"]:hover > .ipc-avatar--base > .ipc-media--avatar:not(.ipc-media--fallback) .ipc-image { */
	.title-cast .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback) .ipc-image {
		height: BiggerPicOnArtistHover;
		width: BiggerPicOnArtistHover;
		z-index: 10;
		left: 58px;
		margin-top: 0;
		top: 68px;
	}
	/* this was blocking horizontal scrolling on mobile/touchscreen
	   Now this whole feature is in >1024px at-rule, but needed to add :hover, as it's still issue with bigger touch screens
	 */
	.ipc-shoveler .ipc-shoveler__grid:has(.ipc-avatar:hover) {
		overflow: visible;
		/* --was-overflow: auto; */
	}
	/* with some sizes, there is a few line tiny scroll on this element, which is not noticable, but it also captures mouse scroll and disabling whole page scroll */
	/* :hover condition seems unnecessary, but after problems with .ipc-shoveler__grid it's included */
	.ipc-shoveler:has(.ipc-avatar:hover) {
		overflow-x: visible;
		/* --was-overflow-x: hidden; */
	}
	/* - making space for two or three bottom line pop-up avatars - */
	.title-cast .ipc-shoveler__grid:has(> [data-testid="title-cast-item"]:nth-last-child(-n + 2) .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback)) {
/* 		margin-bottom: 260px; */
		margin-bottom: (BiggerPicOnArtistHover - 40)px;
	
	}
	.title-cast .ipc-shoveler__grid:has(> [data-testid="title-cast-item"]:nth-last-child(3) .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback)),
	.title-cast .ipc-shoveler__grid:has(> [data-testid="title-cast-item"]:nth-last-child(4) .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback)) {
/* 		margin-bottom: 150px; */
		margin-bottom: (BiggerPicOnArtistHover - 40 - 110)px;
	
	}
	.title-cast .ipc-shoveler__grid:has(> [data-testid="title-cast-item"]:nth-last-child(5) .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback)),
	.title-cast .ipc-shoveler__grid:has(> [data-testid="title-cast-item"]:nth-last-child(6) .ipc-avatar:hover .ipc-media--avatar:not(.ipc-media--fallback)) {
/* 		margin-bottom: 40px; */
		margin-bottom: (BiggerPicOnArtistHover - 40 - 220)px;
	}
}
}



/* Links to IMDb Pro */
/* My UserStyles do not remove ADs on principle from sites.
   Exception are ADs leading to viruses, or misleading by what it says, or annoying by doing unexpected stuff when clicked.
 */
if hideIMDbPro {
	/* - more on pro -
	   Name page: "View contact info at IMDbPro", bottom of top section.
	   different elements are shown for different resolution. both have links navigating away from curernt page to a page with Pro AD
	 */
	/* on res >1024px  */
	.ipc-metadata-list-item--link:has(a[href^="https://pro.imdb.com/"]) {
		pointer-events: none;
	}
	.ipc-metadata-list-item--link a[href^="https://pro.imdb.com/"] + .ipc-metadata-list-item__content-container
	, .ipc-metadata-list-item--link a[href^="https://pro.imdb.com/"] ~ .ipc-metadata-list-item__icon-link
	{
		display: none;
	}
	/* on res <1024px  */
	.ipc-metadata-list__item:has(#ProUpsellLink) {
		pointer-events: none;
		/* display: none; */
	}
	.ipc-metadata-list__item:has(#ProUpsellLink) a {
		color: white;
	}

/* todo: check which to keep (and which without link) */
	a[href^="https://pro.imdb.com/title/"] {
		display: none;
	}
	/* containers */
	[data-testid="title-cast-styling-proupsell"] {
		display: none;
	}
	#full_cast_title_pro_link {
		display: none;
	}

	/* Name page, "star meter" score. Make non-clickable. It's misleading and annoying. clicking on it does navigate away from opened page to a page with Pro AD */
	.starmeter-logo
	, .starmeter-content
	{
		pointer-events: none;
	}
}



if RemoveUnrelated {
	.ipc-page-section[data-testid="News"]
	, .ipc-page-secti...