PLEX Dark Theme- by jboutin

/* ==UserStyle==
@name         PLEX Dark Theme
@version      20240827.06.33
@namespace    https://userstyles.world/user/jboutin
@description  Custom dark theme from https://github.com/themepark-dev/theme.park/tree/master?tab=readme-ov-file
@author       jboutin
@license      No License
==/UserStyle== */

@-moz-document url-prefix("http://127.0.0.1:32400/") {
:root {
	--main-bg-color: #010101;

	--modal-bg-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
	--modal-header-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
	--modal-footer-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;

	--drop-down-menu-bg: #121212;

	--button-color: #7a7a7a;
	--button-color-hover: #9b9b9b;
	--button-text: #eee;
	--button-text-hover: #FFF;

	--accent-color: 170, 170, 170;
	--accent-color-hover: rgba(255, 255, 255, 0.45);
	--link-color: #7a7a7a;
	--link-color-hover: #fff;
	--label-text-color: black;

	--text: #ddd;
	--text-hover: #fff;
	--text-muted: #999;

	/*Specials*/
	--arr-queue-color: #6b5;
	/* Servarr apps + Bazarr*/
	--plex-poster-unwatched: #e5a00d;
	--petio-spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%);
	/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
	--gitea-color-primary-dark-4: 255, 255, 255;
	--overseerr-gradient: radial-gradient(circle, rgba(58, 58, 58, .95), rgba(45, 45, 45, .95), rgba(32, 32, 32, .95), rgba(20, 20, 20, .95), rgb(0, 0, 0, .95)) center center/cover no-repeat fixed;
}

::-webkit-input-placeholder {
	color: var(--text-muted) !important
}

:focus::-webkit-input-placeholder {
	color: var(--text-hover) !important
}

:-moz-placeholder {
	color: var(--text-muted) !important
}

:focus:-moz-placeholder {
	color: var(--text-hover) !important
}

::-moz-placeholder {
	color: var(--text-muted) !important
}

:focus::-moz-placeholder {
	color: var(--text-hover) !important
}

:-ms-input-placeholder {
	color: var(--text-muted) !important
}

:focus:-ms-input-placeholder {
	color: var(--text-hover) !important
}

:root {
	--transparency-dark-05: rgba(0, 0, 0, .05);
	--transparency-dark-10: rgba(0, 0, 0, .10);
	--transparency-dark-15: rgba(0, 0, 0, .15);
	--transparency-dark-25: rgba(0, 0, 0, .25);
	--transparency-dark-35: rgba(0, 0, 0, .35);
	--transparency-dark-40: rgba(0, 0, 0, .40);
	--transparency-dark-45: rgba(0, 0, 0, .45);
	--transparency-dark-50: rgba(0, 0, 0, .50);
	--transparency-dark-55: rgba(0, 0, 0, .55);
	--transparency-dark-60: rgba(0, 0, 0, .60);
	--transparency-dark-65: rgba(0, 0, 0, .65);
	--transparency-dark-70: rgba(0, 0, 0, .70);
	--transparency-dark-75: rgba(0, 0, 0, .75);
	--transparency-dark-80: rgba(0, 0, 0, .80);
	--transparency-dark-85: rgba(0, 0, 0, .85);
	--transparency-dark-90: rgba(0, 0, 0, .90);
	--transparency-light-05: rgba(255, 255, 255, .05);
	--transparency-light-10: rgba(255, 255, 255, .10);
	--transparency-light-15: rgba(255, 255, 255, .15);
	--transparency-light-20: rgba(255, 255, 255, .20);
	--transparency-light-25: rgba(255, 255, 255, .25);
	--transparency-light-30: rgba(255, 255, 255, .30);
	--transparency-light-35: rgba(255, 255, 255, .35);
	--transparency-light-45: rgba(255, 255, 255, .45);
	--transparency-light-50: rgba(255, 255, 255, .50);
	--transparency-light-55: rgba(255, 255, 255, .55);
	--transparency-light-95: rgba(255, 255, 255, .95)
}

* {
	outline: 0
}

[class*=ClaimedServer-messageHeader-],
[class*=MetadataPosterCardTitle-isSecondary-],
[class*=MetadataPosterCardTitle-isSecondary-] a,
[class*=PrePlaySummary-summary-],
body,
label,
p {
	color: var(--text) !important
}

[class*=Link-default-],
[class*=PrePlayTertiaryTitle-tertiaryTitle-],
[class*=SourceSidebarLink-sourceLink-],
[class*=SourceSidebarLink-title-] {
	color: var(--text)
}

[class*=PivotTab-button-] {
	color: var(--text) !important
}

[class*=PivotTabDropdown-isSelected-] {
	border-color: rgb(var(--accent-color)) !important;
	border-bottom-width: 5px !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top-width: 0 !important;
	margin-top: -2px !important
}

[class*=MetadataPosterCardActions-editButton-],
[class*=MetadataPosterCardActions-moreButton-] {
	color: rgb(var(--accent-color)) !important
}

[class*=MetadataPosterCardActions-editButton-]:hover,
[class*=MetadataPosterCardActions-moreButton-]:hover {
	color: var(--accent-color-hover) !important
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
[class*=CollapsibleText-readMore-],
[class*=FormLabel-label-],
[class*=HubTitle-hubTitle-],
[class*=MenuHeader-menuHeader-WuKJVD],
[class*=PageHeader-pageHeader-],
[class*=PageHeaderTitle-title-],
[class*=PrePlayDetailsGroupItem-label-],
[class*=PrePlayLeftTitle-leftTitle-],
[class*=PrePlayPrimaryTitle-primaryTitle-],
[class*=PrePlayPrimaryTitle-primaryTitle-] a,
[class*=ServerDashboardPageHeader-headerTitle-],
[class*=SidebarList-sidebarListHeader-],
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-hover) !important
}

.text-muted {
	color: var(--text-muted)
}

[class*=Link-isSelected-],
[class*=Link-primary-],
[class*=MetadataPosterCardTitle-title-],
[class*=MetadataPosterCardTitle-title-] a,
[class*=PrePlayDetailsGroupItem-groupItem-] a,
[class*=PrePlayTagListLink-tagsListLink-][class*=Link-default-],
a,
a[class*=MetadataPosterCardTitle-title-] {
	color: var(--link-color)
}

.artwork-file-container:hover a,
[class*=Link-link-]:hover:not([type=button]):not([role=menuitem]):not([type=submit]),
[class*=MetadataPosterCardTitle-title-] a:hover,
a:hover,
a[class*=MetadataPosterCardTitle-title-]:hover {
	color: var(--link-color-hover)
}

[class*=".MetadataTableRow-title-"] a:hover,
[class*=MetadataPosterCardTitle-title-][class*=MetadataPosterCardTitle-isSecondary-377V8A] [class*=Link-link-1Kt-hA]:hover,
[class*=MetadataPosterCardTitle-title-][class*=MetadataPosterCardTitle-isSecondary-377V8A]:hover,
a[class*=MetadataTableRow-title-]:hover {
	color: var(--text-hover) !important
}

[class*=TopUsersCell-playHistoryLink-][class*=Link-link-] {
	color: var(--label-text-color) !important
}

#plex > div[class*=FullPageBackground-backgroundContainer-] > div > canvas,
#plex > div[class*=FullPageBackground-backgroundContainer-] > div > div:first-child > canvas {
	display: none !important
}

[class*=FullPageBackground-backgroundContainer-],
body {
	background: var(--main-bg-color);
	background-repeat: repeat, no-repeat;
	background-attachment: fixed, fixed;
	background-position: center center, center center;
	background-size: auto, cover;
	-webkit-background-size: auto, cover;
	-moz-background-size: auto, cover;
	-o-background-size: auto, cover
}

.plex-preloader-container {
	background-color: transparent
}

[class*=BottomBar-bottomBar-] {
	background: var(--transparency-dark-70);
	box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%)
}

[class*=SourceSidebarLink-isSelected-] {
	box-shadow: inset 2px 0 0 0 rgb(var(--accent-color));
	background: rgb(var(--accent-color), .05)
}

[class*=SourceSidebar-openSidebar-][class*=SourceSidebar-sidebar-],
[class*=SourceSidebar-sidebar-] {
	background: var(--transparency-dark-25)
}

[class*=SourceSidebar-expandedSidebar-][class*=SourceSidebar-sidebar-] {
	background: var(--modal-bg-color);
	background-repeat: repeat, no-repeat;
	background-attachment: fixed, fixed;
	background-position: center center, center center;
	background-size: auto, cover;
	-webkit-background-size: auto, cover;
	-moz-background-size: auto, cover;
	-o-background-size: auto, cover
}

@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
	[class*=SourceSidebar-expandedSidebar-][class*=SourceSidebar-sidebar-] {
		background: var(--header-blur-background);
		-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
		backdrop-filter: saturate(1.8) blur(1.5em);
		background: var(--transparency-dark-50)
	}
}

[class*=DisclosureArrow-isSelected-] {
	border-color: rgb(var(--accent-color))
}

[class*=SourceSidebarLink-isSelected-]:before {
	background-color: rgb(var(--accent-color)) !important
}

[class*=SourceSidebarLink-isSelected-] [class*=SourceSidebarLink-iconContainer-],
[class*=SourceSidebarLink-isSelected-] [class*=SourceSidebarLink-title-] {
	color: rgb(var(--accent-color))
}

[class*=SourceSidebarLink-sourceLink-]:hover [class*=SourceSidebarLink-iconContainer-],
[class*=SourceSidebarLink-sourceLink-]:hover [class*=SourceSidebarLink-title-] {
	color: var(--accent-color-hover)
}

[class*=SourceSidebarServerHeader-title-] {
	color: rgb(var(--accent-color))
}

[class*=NavBar-container-] {
	background: var(--transparency-dark-25) !important
}

[class*=NavBarActivityButton-isHighlighted-] [class*=NavBarActivityButton-activityIcon-] {
	color: rgb(var(--accent-color))
}

.NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-activityIcon-3gF_TD {
	background-color: rgb(var(--accent-color));
	color: var(--label-text-color)
}

.NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-activityIcon-3gF_TD {
	background-color: var(--accent-color-hover);
	color: var(--label-text-color) !important
}

[class*=NavBarActivityButton-isHighlighted-]:hover [class*=NavBarActivityButton-activityIcon-] {
	color: var(--accent-color-hover)
}

[class*=NavBarActivityButton-isHighlighted-] [class*=NavBarActivityButton-label-] {
	color: rgb(var(--accent-color))
}

[class*=NavBarActivityButton-isHighlighted-]:hover [class*=NavBarActivityButton-label-] {
	color: var(--accent-color-hover)
}

[class*=TabButton-selected-] {
	color: rgb(var(--accent-color))
}

[class*=TabButton-selected-]:after {
	background-color: rgb(var(--accent-color))
}

[class*=TabButton-selected-]:hover:after {
	background-color: rgb(var(--accent-color), .8)
}

.heart-rating.user-rating,
.star-rating.user-rating {
	color: rgb(var(--accent-color));
	opacity: 1
}

.nav-header > li > a.selected .badge,
[class*=Badge-primary-] {
	background-color: rgb(var(--accent-colo...