Dark IMDb [papo] by papo

/* ==UserStyle==
@name           Dark IMDb [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.1
@description    Updated: 2024-05. Notes and feedback: https://github.com/paponius/userstyles/
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   uso
@advanced color color-primary "Text Primary" white
@advanced color color-secondary "Text Secondary" #ccc
@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" violet
# up to 24-04: #B62EF0
@advanced dropdown background-base "Background" {
  dft "Tiles" <<<EOT #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  dc  "Dark charcoal" <<<EOT #333 EOT;
  cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@advanced dropdown bg-options "Background image type" {
  Tiled "Tiled" <<<EOT
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: left top !important; EOT;
  Fit "Fit Window" <<<EOT
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
  s   "Scroll" <<<EOT  EOT;
  f   "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Text Background" {
  dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Text Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
# --- end of common block ---


@advanced dropdown fixTrampPic "Easter tramp egg" {
  a "Proper" <<<EOT
  	.ipc-media--poster-27x40 > img[alt="Donald Trump"] {
		background: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/B42F/production/_112972164_gettyimages-1207986277.jpg.webp) no-repeat;
		background-position-x: 37%;
		background-size: cover;
		padding-left: 100%;
		width: 100%;
		height: 100%;
	} EOT;
  b "Futuristic" <<<EOT
  	.ipc-media--poster-27x40 > img[alt="Donald Trump"] {
		background: url(https://imageio.forbes.com/specials-images/imageserve/6426115a6e155db9ba8cd6f1/Fake-mugshot-of-former-president-Donald-Trump-that-s-been-circulating-on-social/960x0.jpg?format=jpg&width=1440) no-repeat;
		background-position-x: 0;
		background-size: cover;
		padding-left: 100%;
		width: 100%;
		height: 100%;
	} EOT;
  c "Futuristic profile" <<<EOT
  	.ipc-media--poster-27x40 > img[alt="Donald Trump"] {
		background: url(https://imageio.forbes.com/specials-images/imageserve/6426115a6e155db9ba8cd6f1/Fake-mugshot-of-former-president-Donald-Trump-that-s-been-circulating-on-social/960x0.jpg?format=jpg&width=1440) no-repeat;
		background-position-x: 100%;
		background-size: cover;
		padding-left: 100%;
		width: 100%;
		height: 100%;
	} EOT;
  d "IMDb Original" <<<EOT  EOT;
}


# --- optional common block ---
#advanced dropdown color-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background-color: rgba(0, 0, 0, .3); !important; EOT;
  a "Transparent" <<<EOT background-color: unset !important; EOT;
  b "Black" <<<EOT background-color: black !important; EOT;
  c "as custom text background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}

#var select xxx 'Get my "DeAnnoy XXX [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/XXX/XXX' {
  'You need to copy the text on the left with a mouse, right click and choose open in tab. This is not a setting.': 0
}
#var select debug-test "debug" {
  '0:Normal': '',
  "1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "color: yellow !important; background: violet !important;"
}

#var color color-section "Section/Series" #C70000


==/UserStyle== */

/* Do NOT edit this file.
   It will disable updates, instead create another style to override desired rules. Or CSS variables.
   I don't use !important where not required to allow that. You need to check injection order in Stylus.

   Used background-base and bg-options from: https://github.com/StylishThemes
   This preprocessor header and global variables are common part used in most of my styles. Version: 1.4.0 2024-04
 */

/* backup of eggs
https://miro.medium.com/v2/resize:fit:720/format:webp/1*YEh7_BHIyd0xO3Qpody_pw.jpeg
https://pbs.twimg.com/media/FrwgAmQWIAczw2M?format=jpg&name=large

 switch new version preview
   https://www.imdb.com/preferences/beta-control/?e=lists&t=1&u=/list/ls528000000/
 back
   https://www.imdb.com/preferences/beta-control/?e=lists&t=0&u=/list/ls528000000/


 */
@-moz-document domain("imdb.com") {
:root {
	--p-color-primary: /*[[color-primary]]*/;
	--p-color-secondary: /*[[color-secondary]]*/;
	--p-color-dark: #6e6e6e;
	--p-color-headline: /*[[color-headline]]*/;
	--p-color-heading: /*[[color-heading]]*/;
	--p-color-deck: #ffdede;
	--p-color-byline: #C56E6E;
/* 	--p-color-link: #00ADEE; */
	--p-color-link: #82C1FF;
	--p-color-link-visited: /*[[color-link-visited]]*/;
	--p-color-link-hover: hsl(210, 100%, 85%);
	--p-background-base: /*[[background-base]]*/ /*[[bg-attachment]]*/;
	--p-background: /*[[background]]*/;
	--p-background-base-custom: /*[[background-base-custom]]*/;
	--p-background-custom: /*[[background-custom]]*/;
	
	/* Legacy */
	--p-color-caption: var(--p-color-headline);
	--p-color-caption-sec: var(--p-color-heading);
	--p-color-sub: var(--p-color-deck);
	--p-color-by: var(--p-color-byline);
}

:root {
	--ipt-base-bg: var(--p-background-base);
	/* --was-ipt-base-bg: var(--ipt-base-color); */
	--ipc-pageSection-base-bg: rgba(0, 0, 0, .25);
	/* --was-ipc-pageSection-base-bg: var(--ipt-base-bg); */
	/* --was-ipc-pageSection-base-bg: var(--ipt-base-shade1-bg); */

	--ipt-base-shade3-bg: var(--p-background);
	/* --was-ipt-base-shade3-bg: var(--ipt-base-shade3-color); */
	/* --was-ipc-listCard-base-bg: var(--ipt-base-shade3-bg); */

	--ipt-on-base-textPrimary-color: var(--p-color-primary);
	--ipt-on-base-rgb: 255, 255, 255;
	--was-ipt-on-base-rgb: 0,0,0;
/* top part background sides */
/* 	--ipt-baseAlt-shade1-bg: var(--p-background-base); */
	/* e.g. quote on /list/... */
	--ipc-blockQuote-base-accent1-bg: hsl(46, 92%, 5%);
	/* --was--ipc-blockQuote-base-accent1-bg: var(--ipc-blockQuote-base-accent1-color,#fef9e8); */
}


/* -- masthead -- */
/* - Search - */
nav#imdbHeader {
	/* e.g. Search box */
	--ipt-base-bg: var(--p-background);
	/* e.g. "All" or other selected category, <input> text color */
	--ipt-on-base-textPrimary-color: rgba(255, 255, 255, .87);
	/* e.g. magnifier icon */
	--ipt-on-base-textSecondary-color: rgba(255, 255, 255, 0.54);
	/* --was---ipt-on-base-textSecondary-color: rgba(0,0,0,0.54); */
}
@media screen and (min-width: 600px) {
  #nav-search-form {
	box-shadow: 0 0 0 1px var(--ipt-accent1-color, rgb(245,197,24));
  }
/*   #nav-search-form.searchform--focused { */
	/* --was-box-shadow: inset 0 0 0 2px var(--ipt-accent1-color, rgb(245,197,24)); */
/*   } */
}
#nav-search-form .searchCatSelector__opener {
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	/* --was-border-right: 1px solid rgba(0, 0, 0, 0.3); */
}


/* poster cards
  <div class="ipc-poster-card ipc-poster-card--base ipc-poster-card--dynamic-width ipc-sub-grid-item ipc-sub-grid-item--span-2" role="group"> */
.ipc-poster-card--base {
	box-shadow: 0 0 10px 1px #000000eb;
}
/* shadow is being cut off */
.ipc-poster-card {
	margin-bottom: 10px;
}

/* actors:
  <div data-testid="title-cast-item" class="sc-bfec09a1-5 hNfYaW"> */
[data-testid="title-cast-item"]
,.sc-bfec09a1-5
,.hNfYaW
{
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}

/* list cards, darker
<div class="ipc-list-card--border-line ipc-list-card--tp-none ipc-list-card--bp-none ipc-list-card sc-c3661566-1 chCwWk ipc-list-card--base"> */
.ipc-list-card--base {
	background-color: rgba(0, 0, 0, .25);
	background-blend-mode: darken;
}


/* remove gradient on text overflow */
.ipc-overflowText.ipc-overflowText--base.ipc-overflowText--listCard .ipc-overflowText-overlay,
.ipc-overflowText.ipc-overflowText--base .ipc-overflowText-overlay {
	background: transparent;
	/* --was-background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 30%,#fff 80%,#fff); */
}


a:visited {
	color: var(--p-color-link-visited);
}

/* fixed tramp pic on https://www.imdb.com/name/nm0874339/ */
/* ipc-media ipc-media--poster-27x40 ipc-image-media-ratio--poster-27x40 ipc-media--baseAlt ipc-media--poster-m ipc-poster__poster-image ipc-media__img */
/*[[fixTrampPic]]*/



/* --- page: https://www.imdb.com/search/title/... ---  */
/* e.g. https://www.imdb.com/search/title/?title_type=feature&release_date=2021-09-01,2021-09-30&user_rating=2.5,10&num_votes=1000,&sort=release_date,asc */

/* title visitable */
/* was together: .ipc-title-link-...