jellyskin-mod-public/JellySkin-mod.css

/*--JellySkin Style Sheets--*/

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/light.css");

button.raised.cancel.block.btnForgotPassword.emby-button {
	display: none;
}

/*--JellySkin Primary Color Scheme--*/

:root {
	--accent1-light: hsl(349, 100%, 80%);
	--accent1-dark: hsl(349, 46%, 58%);
	--accent1-light-opacity1: hsla(349, 100%, 80%, 0.4);
	--accent1-light-opacity0-2: hsla(349, 100%, 80%, 0.2);
	--accent2-light: hsl(348, 100%, 71%);
	--accent2-dark: hsl(348, 50%, 50%);
	--accent2-superdark: hsl(348, 58%, 23%);
	--swiper-theme-color: hsl(351, 100%, 70%);
}

/*--Spinner--*/

.mdl-spinner__layer-1 {
	border-color: var(--swiper-theme-color);
}

.mdl-spinner__layer-2 {
	border-color: var(--swiper-theme-color);
}

.mdl-spinner__layer-3 {
	border-color: var(--swiper-theme-color);
}

.mdl-spinner__layer-4 {
	border-color: var(--swiper-theme-color);
}

/*--Playback Controls--*/

.mdl-slider-background-lower {
	background: var(--swiper-theme-color);
}

.mdl-slider::-moz-range-thumb {
	background: var(--accent2-light);
}

div.mdl-slider-background-lower,
input.mdl-slider::-webkit-slider-thumb,
.mdl-slider::-webkit-slider-thumb,
.sliderBubbleTrack {
	background: var(--swiper-theme-color);
}

.chapterThumbText {
	margin: 8px;
	font-weight: bold;
	color: var(--swiper-theme-color);
}

.upNextDialog-countdownText {
	color: var(--accent1-dark);
}

.upNextContainer.upNextDialog {
	border-radius: 10px;
}

/*--Subtitles & Video Player Font--*/

.videoSubtitlesInner {
	font-weight: 600;
}

.pageTitle {
	font-weight: 700;
}

/*--Color Fix--*/

.paper-icon-button-light:hover {
	color: var(--swiper-theme-color) !important;
	background-color: var(--accent1-light-opacity0-2) !important;
}

.paper-icon-button-light:active:not(:disabled) {
	color: var(--swiper-theme-color) !important;
}

.emby-button.raised[is="emby-linkbutton"]:not(.emby-tab-button),
.emby-button[is="emby-button"]:not(.emby-tab-button) {
	background: var(--accent2-superdark) !important;
}

.emby-tab-button:hover {
	color: var(--accent2-light);
}

.button-flat:hover {
	color: var(--bg);
}

.dialog .emby-button.actionSheetMenuItem {
	background: transparent !important;
}

.checkboxOutline {
	background-color: var(--accent2-superdark) !important;
	border-color: var(--accent2-superdark) !important;
}

.backgroundContainer {
	background-color: hsl(313, 92%, 5%);
}

.playstatebutton-icon-played {
	color: var(--accent2-light);
}

.ratingbutton-icon-withrating {
	color: var(--accent2-light);
}

.iconOsdProgressInner {
	background: var(--accent2-light);
}


/*--Fix Details Button Margin--*/

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem .paper-icon-button-light[data-action=menu]:after {
	margin-left: 0% !important;
}

/*--Backdrop--*/

.backdropContainer {
	filter: blur(6px) brightness(50%) saturate(100%) !important;
	mask-image: linear-gradient(180deg, black, transparent) !important;
	-webkit-mask-image: linear-gradient(180deg, black, hsla(0, 0%, 0%, 0.6)) !important;
}

/*--Icons Fix--*/

.material-icons.server::before {
	content: "\f233" !important;
}

.material-icons.book::before {
	content: "\f02d" !important;
}

.material-icons.toc::before {
	content: "\f03a" !important;
}

.material-icons.discord::before {
	font-family: "Font Awesome 6 Brands" !important;
	content: "\f392" !important;
}

/*--Login Page Desktop--*/

#loginPage>div {
	padding: 20px !important;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
	width: 100%;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
	height: max-content;
	border-radius: 15px;
	background: hsla(0, 0%, 0%, 0.25);
	overflow: initial;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#loginPage #divUsers .card {
	width: 10em;
}

div#divUsers {
	flex-direction: inherit;
	flex-wrap: wrap;
	justify-content: center;
	overflow-x: auto;
	max-width: inherit;
}

#loginPage:after {
	background: url(https://levi.land/public/jf-login-bg.webp);
	filter: brightness(0.5);
	background-size: cover;
	content: "";
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 1;
}

#loginPage .emby-button {
	background: transparent !important;
}

#loginPage .emby-button:hover {
	background: hsla(0, 0%, 100%, .2) !important;
}

/*--Skip Intro Button--*/

.skipIntro {
	background-color: hsla(0, 0%, 0%, 0.37) !important;
	border: 3px solid var(--swiper-theme-color) !important;
	border-radius: 10px !important;
	bottom: 9em;
	box-shadow: inset 0 0 40px transparent !important;
	cursor: pointer;
	display: inline-block;
	padding: 0 1px;
	position: absolute;
	right: 10em;
	transition: 0.4s ease-out !important;
}

.btnSkipIntro.paper-icon-button-light {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
}

div[data-role="page"] .skipIntro {
	padding-top: 0px !important;
}

.skipIntro:hover {
	box-shadow: inset 60px 0px 30px var(--swiper-theme-color), inset 180px 0px 40px var(--accent1-light) !important;
	transition: 0.4s ease-in !important;
	border: 3px solid var(--accent1-light) !important;
}

.skipIntro .paper-icon-button-light:hover:not(:disabled) {
	background-color: transparent !important;
	color: white !important;
}

/* Progress Bars */

.itemProgressBarForeground {
	background-color: hsl(0, 0%, 93%) !important;
}

.taskProgressInner {
	background: var(--swiper-theme-color) !important;
}

/* Google Progress Bars */

progress::-webkit-progress-value {
	background: var(--swiper-theme-color) !important;
}

/* Firefox Progress Bars */

progress::-moz-progress-bar {
	background: hsl(0, 0%, 93%) !important;
}

/* Edge Progress Bars */

progress {
	background: var(--swiper-theme-color) !important;
}