297 lines
No EOL
6.5 KiB
CSS
297 lines
No EOL
6.5 KiB
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(8px) saturate(150%) brightness(75%) !important;
|
|
mask-image: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)) !important;
|
|
-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)) !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 .sectionTitle {
|
|
content: url(https://watch.levi.land/web/assets/img/banner-light.png);
|
|
height: 6vw;
|
|
}
|
|
|
|
#loginPage>div {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page {
|
|
height: max-content;
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,.7);
|
|
overflow: initial;
|
|
position: absolute;
|
|
}
|
|
|
|
#loginPage #divUsers .card {
|
|
width: 10em;
|
|
}
|
|
|
|
#loginPage:after {
|
|
background: url(https://levi.land/public/jf-login-bg.webp), radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
|
|
filter: blur(2px);
|
|
background-size: cover;
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
#loginPage .emby-button {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#loginPage .emby-button:hover {
|
|
background: hsla(0, 0%, 0%, .3) !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;
|
|
}
|
|
|
|
/* Sidebar/Drawer Menu */
|
|
|
|
:not(.dashboardDocument) .mainDrawer {
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
:not(.dashboardDocument) .mainDrawer.drawer-open {
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
}
|
|
|
|
/* Dialog Box */
|
|
|
|
.dialog {
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(75%);
|
|
background: rgba(0,0,0,.2);
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,.7) !important;
|
|
}
|
|
|
|
/* Change top-left logo */
|
|
|
|
.pageTitleWithDefaultLogo {
|
|
background-image: url(https://watch.levi.land/web/assets/img/icon-transparent.png) !important;
|
|
} |