JellyFin Custom CSS

jellyfin-custom.css

/* Made by https://github.com/hexxone */

/* gradient default */
/* :root {
    --accent1-light: #a95bc2;
    --accent1-dark: #3f2348;
    --accent1-light-opacity1: rgba(169, 91, 194, .4);
    --accent2-light: #00a4db;
    --accent2-dark: #003d52
} */
/* gradient mauve */
/* :root {
    --accent1-light: hsl(272, 40%, 25%);
    --accent1-dark: hsl(272, 40%, 5%);
    --accent1-light-opacity1: hsla(272, 40%, 25%, 0.4);
    --accent2-light: hsl(309, 21%, 37%);
    --accent2-dark: hsl(309, 21%, 16%);
  } */

/* gradient nightsky */
/* :root {
    --accent1-light: hsl(210, 76%, 34%);
    --accent1-dark: hsl(210, 76%, 17%);
    --accent1-light-opacity1: hsl(210, 76%, 34%, 0.4);
    --accent2-light: hsl(150, 76%, 34%);
    --accent2-dark: hsl(150, 76%, 17%);
  } */

/* gradient sea */
/* :root {
    --accent1-light: hsl(340, 13%, 5%);
    --accent1-dark: hsl(340, 13%, 2%);
    --accent1-light-opacity1: hsla(340, 13%, 5%, 0.4);
    --accent2-light: hsl(191, 100%, 38%);
    --accent2-dark: hsl(191, 100%, 16%);
} */
/* gradient custom */
:root {
    --accent1-light: hsl(340, 13%, 5%);
    --accent1-dark: hsl(340, 13%, 2%);
    --accent1-light-opacity1: hsla(340, 13%, 5%, 0.4);
    --accent2-light: hsl(18, 85%, 55%);
    --accent2-dark: hsl(18, 85%, 25%);
}

/** ============== Main.css ============== **/

.backgroundContainer {
    background-color: #010e18;
	z-index: -999999;
}

.backgroundContainer.withBackdrop {
    background: transparent !important
}

.backdropContainer {
    filter: blur(10px) brightness(70%) saturate(110%) contrast(130%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent)
}

.withTabs .content-primary {
    padding-top: 1em !important
}

.scrollY {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 1em calc(100% - 1em), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 1em calc(100% - 1em), transparent);
    padding: 1em 0
}

.pageTabContent {
    padding: 0 1em
}

.appfooter {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background: rgba(0, 0, 0, .65)
}

::-moz-selection {
    background: var(--accent2-light)
}

::selection {
    background: var(--accent2-light)
}

.skinHeader {
    background: transparent !important;
    position: static
}

.layout-desktop body,
.layout-mobile body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden !important
}

div[data-role=page].page {
    height: calc(100% + 1.2em);
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 1em calc(100% - 1em), transparent);
    mask-image: linear-gradient(0deg, transparent, #000 1em calc(100% - 1em), transparent);
    overflow: hidden visible;
    padding: 1.2em 0 !important;
    position: absolute
}

.mainAnimatedPages.skinBody {
    height: 100%;
    position: relative
}

.selectionCommandsPanel {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, .75);
    box-shadow: 0 0 15px #000
}

.emby-button {
    position: relative
}

.emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button),
.emby-button[is=emby-button]:not(.emby-tab-button) {
    background: #063660;
    border-radius: 100vh;
    overflow: hidden
}

.emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):after,
.emby-button[is=emby-button]:not(.emby-tab-button):after {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .15s linear;
    width: 100%;
    z-index: -1
}

.emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):focus:after,
.emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):hover:after,
.emby-button[is=emby-button]:not(.emby-tab-button):focus:after,
.emby-button[is=emby-button]:not(.emby-tab-button):hover:after {
    opacity: 1
}

.emby-button.emby-collapsible-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none
}

.emby-button.emby-collapsible-button:after {
    display: none !important
}

.paper-icon-button-light {
    border-radius: 10px
}

.skipIntro {
    background: #063660 !important;
    border: none;
    border-radius: 100vh;
    bottom: 12em;
    box-shadow: 0 0 15px #000;
    color: #fff !important;
    font-size: 1.2em;
    overflow: hidden;
    padding: .5em;
    right: 8em
}

.skipIntro:hover {
    box-shadow: 0 0 15px #000 !important
}

.skipIntro:after {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .15s linear;
    width: 100%;
    z-index: 0
}

.skipIntro .paper-icon-button-light {
    color: #fff !important;
    z-index: 1
}

.skipIntro:focus:after,
.skipIntro:hover:after {
    opacity: 1
}

.dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem).button-delete {
    background: #f70000 !important
}

.emby-scroller {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 .5em calc(100% - .5em), transparent);
    mask-image: linear-gradient(270deg, transparent, #000 .5em calc(100% - .5em), transparent)
}

.card {
    contain: none !important
}

.card.overflowSquareCard .cardScalable {
    aspect-ratio: 1
}

.card.overflowSquareCard .cardImageContainer:after {
    background-size: contain !important
}

.cardOverlayContainer {
    background: rgba(0, 0, 0, .7)
}

.cardImageIcon {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.cardScalable {
    aspect-ratio: auto;
    border-radius: 10px 10px 0 0;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
    width: calc(100% + 1px)
}

.cardScalable>* {
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%
}

.cardScalable:not(.imageEditorCard) .cardImageContainer:after,
.cardScalable:not(.imageEditorCard) .cardImageContainer:before {
    background: inherit;
    content: "";
    position: absolute
}

.cardScalable:not(.imageEditorCard) .cardImageContainer:after {
    background-size: cover;
    height: 100%;
    left: 0;
    transform: scale(1);
    transition: transform .15s ease-in-out;
    width: 100%;
    z-index: -1
}

.cardScalable:not(.imageEditorCard) .cardImageContainer:before {
    filter: blur(5px) brightness(50%);
    height: calc(100% + 20px);
    left: -10px;
    top: -10px;
    width: calc(100% + 20px);
    z-index: -1
}

.card:focus-visible .cardImageContainer:after,
.card:hover .cardImageContainer:after {
    transform: scale(1.2)
}

.card[data-type=Person] {
    aspect-ratio: 1/1;
    height: auto
}

.card[data-type=Person] .cardPadder-overflowPortrait {
    padding-bottom: 100% !important
}

.card[data-type=Person] .cardPadder-overflowPortrait .cardImageIcon {
    color: transparent !important
}

.card[data-type=Person] .cardBox {
    aspect-ratio: 1/1;
    margin: .5em !important;
    position: relative
}

.card[data-type=Person] .cardOverlayContainer {
    background: transparent !important;
    height: calc(100% - 2.825em);
    z-index: 3
}

.card[data-type=Person] .cardOverlayButton-br {
    bottom: .5em;
    right: .5em
}

.card[data-type=Person] .cardContent {
    filter: brightness(1);
    transition: filter .25s ease-in-out
}

.card[data-type=Person] .cardScalable {
    aspect-ratio: 1/1;
    height: auto
}

.card[data-type=Person] .cardScalable:after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.card[data-type=Person] .cardScalable .cardImageContainer:after {
    background-size: cover
}

.card[data-type=Person] .cardText-first {
    bottom: 0;
    color: #fff;
    padding: .5em !important;
    position: absolute;
    width: calc(100% - 1em)
}

.card[data-type=Person]:hover .cardContent {
    filter: brightness(.3)
}

.card[data-type=Actor] {
    aspect-ratio: 1/1;
    height: auto
}

.card[data-type=Actor] .cardPadder-overflowPortrait {
    padding-bottom: 100% !important
}

.card[data-type=Actor] .cardPadder-overflowPortrait .cardImageIcon {
    color: transparent !important
}

.card[data-type=Actor] .cardBox {
    aspect-ratio: 1/1;
    margin: .5em !important;
    position: relative
}

.card[data-type=Actor] .cardOverlayContainer {
    background: transparent !important;
    height: calc(100% - 2.825em);
    z-index: 3
}

.card[data-type=Actor] .cardOverlayButton-br {
    bottom: .5em;
    right: .5em
}

.card[data-type=Actor] .cardContent {
    filter: brightness(1);
    transition: filter .25s ease-in-out
}

.card[data-type=Actor] .cardScalable {
    aspect-ratio: 1/1;
    height: auto
}

.card[data-type=Actor] .cardScalable:after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.card[data-type=Actor] .cardScalable .cardImageContainer:after {
    background-size: cover
}

.card[data-type=Actor] .cardText-first {
    bottom: 1.565em;
    color: #fff;
    padding: .1em .5em !important;
    position: absolute;
    width: calc(100% - 1em)
}

.card[data-type=Actor] .cardText-secondary {
    bottom: .2em;
    font-size: .86em;
    padding: .1em .5em !important;
    position: absolute;
    width: calc(100% - 1em)
}

.card[data-type=Actor]:hover .cardContent {
    filter: brightness(.3)
}

.card .cardBox {
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
    box-shadow: 0 0 .5em rgba(0, 0, 0, .75);
    margin: .5em !important;
    overflow: hidden;
    transition: background .15s
}

.card:not([data-type=Person]) .cardText-secondary {
    padding-bottom: .5em
}

.card:focus-visible .cardBox,
.card:hover .cardBox {
    background: rgba(0, 0, 0, .5)
}

.card.squareCard .cardScalable {
    padding-top: 100%;
    width: 100%
}

.card[data-userid] .cardScalable {
    padding-top: 0 !important
}

.card[data-userid] .cardScalable .cardContent {
    padding-top: 100% !important
}

.cardPadder {
    background: linear-gradient(130deg, var(--accent1-dark), var(--accent2-dark)) !important
}

.cardPadder-square {
    aspect-ratio: 0 !important;
    padding: 0
}

.cardPadder-square+div {
    aspect-ratio: 1
}

.cardImageContainer.defaultCardBackground {
    background: transparent
}

.innerCardFooter {
    border-radius: 10px;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 90%
}

.innerCardFooter .itemProgressBar {
    background: hsla(0, 0%, 100%, .3);
    height: .4em
}

.innerCardFooter .itemProgressBar .itemProgressBarForeground {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light))
}

.cardOverlayContainer {
    align-content: center;
    align-items: center;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center
}

.cardOverlayButton {
    border-radius: 5px
}

.cardOverlayButton span {
    background: linear-gradient(0deg, var(--accent1-light) 10%, var(--accent2-light) 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    transition: .15s
}

.cardOverlayButton[data-action=resume] {
    background: transparent !important;
    border-radius: 5px;
    padding: 1.5em
}

.cardOverlayButton:focus-visible span,
.cardOverlayButton:hover span {
    color: transparent !important
}

.cardIndicators,
.listItemIndicators {
    right: 0;
    top: 0
}

.cardIndicators .indicator,
.listItemIndicators .indicator {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    border-radius: 0 0 0 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .7);
    padding: .2em
}

[data-collectiontype=livetv] .cardText,
[data-isfolder=true][data-type=CollectionFolder]:not([data-type=Series]) .cardText {
    padding: .75em !important
}

.cardText:nth-child(4) {
    display: none
}

.defaultCardBackground {
    background: linear-gradient(130deg, var(--accent1-dark), var(--accent2-dark)) !important
}

.chapterCard .innerCardFooter {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .6);
    border-radius: 0 1em 1em 0 !important
}

.layout-mobile .cardOverlayButton {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
    border-radius: 10px !important;
    bottom: 10px;
    right: 10px;
    width: -moz-fit-content;
    width: fit-content
}

.devicesList .cardScalable {
    aspect-ratio: 16/9
}

.devicesList .cardPadder {
    display: none
}

.itemSelectionPanel {
    background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 21%);
    border: 1px solid var(--accent1-light);
    border-radius: 10px;
    overflow: hidden;
    padding: .5em
}

.dialogContainer .card .cardImageContainer:after,
.dialogContainer .card .cardImageContainer:before {
    display: none !important
}

:not(.dashboardDocument) .mainDrawer {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background: rgba(0, 0, 0, .5)
}

:not(.dashboardDocument) .mainDrawer.drawer-open {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

:not(.dashboardDocument) .mainDrawer.drawer-open .scrollContainer {
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 .5em calc(100% - .5em), transparent);
    mask-image: linear-gradient(0deg, transparent, #000 .5em calc(100% - .5em), transparent)
}

:not(.dashboardDocument) .mainDrawer .navMenuOption:after {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .15s linear;
    width: 100%;
    z-index: -1
}

:not(.dashboardDocument) .mainDrawer .navMenuOption .navMenuOptionIcon {
    transition: margin-right .15s linear
}

:not(.dashboardDocument) .mainDrawer .navMenuOption-selected {
    background: linear-gradient(130deg, var(--accent2-light), var(--accent1-light)) !important
}

:not(.dashboardDocument) .mainDrawer .navMenuOption:hover .navMenuOptionIcon {
    margin-right: 1.46em
}

:not(.dashboardDocument) .mainDrawer .navMenuOption:hover:after {
    opacity: 1
}

.mainDrawer.drawer-open .scrollContainer::-webkit-scrollbar-track {
    box-shadow: none !important
}

.mainDrawer.drawer-open .scrollContainer::-webkit-scrollbar-track-piece {
    background: transparent !important
}

.inputContainer {
    position: relative
}

.inputContainer .inputLabel {
    font-size: .95em;
    position: absolute;
    top: -1.2em;
    transition: top .25s, font-size .25s
}

.inputContainer .inputLabel-float:not(.inputContainer .inputLabelFocused) {
    font-size: 1.2em;
    top: 0
}

.inputContainer .emby-input {
    background: transparent;
    border: none;
    border-bottom: .1em solid hsla(0, 0%, 100%, .7);
    border-radius: 0 !important
}

.inputContainer .emby-input:focus {
    border-color: var(--accent2-light) !important
}

.emby-select {
    background: transparent;
    border: none !important;
    border-bottom: .1em solid hsla(0, 0%, 100%, .7) !important;
    border-radius: 0 !important
}

.emby-select:focus {
    border-color: var(--accent2-light) !important
}

.emby-select:focus~.selectArrowContainer {
    transform: rotate(180deg)
}

.selectArrowContainer {
    transition: transform .15s
}

.checkboxOutline {
    background-color: #063660 !important;
    border-color: #063660 !important;
    border-radius: 5px !important
}

span.checkboxLabel {
    position: relative
}

span.checkboxLabel:after {
    background-color: #fff;
    bottom: -.2em;
    content: "";
    height: .1em;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease-in-out;
    width: 100%
}

.emby-checkbox:focus-visible+span.checkboxLabel:after {
    transform: scaleX(1)
}

.checkboxIcon-checked,
.emby-checkbox-label .checkboxIcon-checked {
    align-items: center;
    display: block !important;
    justify-content: center;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s, opacity .15s
}

.emby-checkbox:checked+span+.checkboxOutline>.checkboxIcon-checked {
    display: flex !important;
    opacity: 1;
    transform: rotate(0deg) scale(1)
}

.emby-textarea {
    background: transparent;
    border: none;
    border-bottom: .1em solid hsla(0, 0%, 100%, .7);
    border-radius: 0 !important;
    width: 100%
}

.emby-textarea:focus {
    border-color: var(--accent2-light) !important
}

.checkboxList.paperList {
    background: rgba(0, 0, 0, .5) !important;
    border-radius: 10px !important;
    overflow: auto !important
}

.paperList {
    background: transparent !important;
    border-radius: 20px;
    overflow: hidden
}

.paperList .listItem {
    background: rgba(0, 0, 0, .5);
    border: none !important;
    border-radius: 8px;
    margin-bottom: .3em;
    transition: background .25s
}

.paperList .listItem:last-child {
    border: none;
    margin-bottom: 0 !important
}

.paperList .listItem:focus-visible,
.paperList .listItem:hover {
    background: rgba(0, 0, 0, .7)
}

.paperList .listItemIcon {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
    color: var(--accent2-light)
}

#myPreferencesMenuPage .listItem {
    border-radius: 10px;
    transition: background .25s
}

#myPreferencesMenuPage .listItem:hover {
    background: #000
}

#myPreferencesMenuPage .listItem:hover .listItemIcon {
    margin-right: .5em
}

#myPreferencesMenuPage .listItem-border {
    border: none !important
}

#myPreferencesMenuPage .listItemIcon {
    background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: margin-right .25s
}

.dialog {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, .7);
    border-radius: 20px !important;
    box-shadow: none;
    overflow: hidden
}

.dialog .smoothScrollY {
    max-height: 100%
}

.dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem) {
    background: transparent !important
}

.dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem):after {
    all: unset !important
}

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

.dialog .cardText {
    display: block !important
}

.filterDialogContent {
    height: 100%;
    overflow: auto
}

a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption) {
    margin-bottom: .3em;
    position: relative;
    text-decoration: none !important
}

a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption).button-link {
    color: var(--accent2-light)
}

a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption):after {
    background: currentColor;
    bottom: -.1em;
    content: "" !important;
    height: .1em;
    left: 0 !important;
    position: absolute;
    transform: scale(0);
    transform-origin: right;
    transition: transform .15s ease-in-out;
    width: 100%
}

a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption):hover:after {
    transform: scale(1);
    transform-origin: left
}

.sliderBubble {
    background: transparent;
    border-radius: 20px;
    overflow: hidden
}

.chapterThumbTextContainer {
    background: linear-gradient(0deg, #000 .25em, rgba(0, 0, 0, .25), transparent) !important;
    padding: .5em .25em !important
}

#indexPage .sectionTitle {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 1.6em
}

#indexPage .sectionTitle:before {
    background: #fff;
    content: "";
    height: 2px;
    margin-right: .5em;
    width: 1.3em
}

#indexPage .emby-scroller .emby-button:not(.cardOverlayButton) {
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
    box-shadow: 0 0 .5em rgba(0, 0, 0, .75);
    margin-right: 1.2em;
    overflow: hidden
}

#indexPage .emby-scroller .emby-button:not(.cardOverlayButton):after {
    all: unset
}

#indexPage .emby-scroller .emby-button:not(.cardOverlayButton):hover {
    background: rgba(0, 0, 0, .5)
}

#indexPage .section0 .emby-scrollbuttons {
    display: none
}

#indexPage .section0 .itemsContainer {
    flex-wrap: wrap
}

#itemDetailPage {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-y: auto;
    width: 100vw
}

#itemDetailPage .mediaInfoItem {
    border-radius: 10vh;
    white-space: nowrap
}

#itemDetailPage .detailRibbon {
    background: transparent;
    font-size: 2.2vh;
    height: 7.2em;
    margin-top: 10vh;
    position: static !important
}

#itemDetailPage .detailRibbon .itemMiscInfo {
    margin-bottom: 0 !important
}

#itemDetailPage .detailImageContainer .card {
    border-radius: 10px;
    left: 3.3%;
    position: fixed !important;
    top: calc(50% + 1em);
    transform: translateY(-50%);
    width: 25vw
}

#itemDetailPage .detailPageWrapperContainer {
    width: 100vw
}

#itemDetailPage .mainDetailButtons .emby-button:not([data-action=resume], [data-action=play]) {
    background: transparent !important
}

#itemDetailPage .detailLogo {
    display: none
}

#itemDetailPage .emby-button {
    align-items: center;
    background: transparent !important;
    border-radius: 10vh;
    flex-flow: row;
    justify-content: center;
    margin-right: .5em !important;
    text-decoration: none
}

#itemDetailPage .emby-button[is=emby-linkbutton] {
    color: unset
}

#itemDetailPage .emby-button:not([is=emby-linkbutton]):hover {
    background: hsla(0, 0%, 100%, .1) !important;
    color: #fff
}

#itemDetailPage .emby-button:not([is=emby-linkbutton]):after {
    display: none
}

#itemDetailPage .emby-button[title=Play],
#itemDetailPage .emby-button[title=Resume] {
    background: hsla(0, 0%, 100%, .2) !important;
    color: #fff;
    gap: .2em;
    margin-right: .5em;
    padding: .4em 1em !important
}

#itemDetailPage .emby-button[title=Play]:after,
#itemDetailPage .emby-button[title=Resume]:after {
    background: transparent;
    content: attr(title);
    display: block;
    font-size: 1.5em;
    font-weight: 400;
    height: -moz-fit-content;
    height: fit-content;
    opacity: 1;
    position: static
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr
}

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

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem .paper-icon-button-light:not([data-action=menu]) {
    aspect-ratio: 1;
    border-radius: 10px
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem[data-type=Episode] {
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    flex-direction: column;
    margin: 0 !important;
    padding: 0;
    transition: background .25s
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem[data-type=Episode]:hover {
    background: rgba(0, 0, 0, .7)
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem-content {
    flex-direction: column
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemImage-large {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem-overview {
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

#itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemBody {
    width: 95%
}

#itemDetailPage .listItem {
    flex-flow: column !important
}

#itemDetailPage .listItem[data-mediatype=Audio] {
    flex-flow: row !important;
    grid-column: auto/span 3
}

.layout-mobile #itemDetailPage .itemBackdrop {
    background-image: linear-gradient(130deg, var(--accent1-light), var(--accent2-light));
    filter: blur(10px) brightness(50%);
    height: 80vh !important;
    left: -10px;
    margin-top: 0 !important;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
    position: absolute !important;
    top: 0;
    width: calc(100vw + 20px)
}

.layout-mobile #itemDetailPage .detailRibbon {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 70vh;
    justify-content: flex-end;
    margin-top: 0 !important
}

.layout-mobile #itemDetailPage .detailImageContainer {
    overflow: hidden;
    padding: 0 !important;
    position: static
}

.layout-mobile #itemDetailPage .detailImageContainer .card {
    filter: none !important;
    margin: 0 !important;
    max-width: 50vw !important;
    min-width: 50vw;
    position: static !important;
    top: 0;
    transform: none
}

.layout-mobile #itemDetailPage .detailImageContainer .cardBox {
    box-shadow: none;
    margin: 0 !important
}

.layout-mobile #itemDetailPage .itemMiscInfo {
    justify-content: flex-start
}

.layout-mobile #itemDetailPage .infoText {
    text-align: start;
    width: -moz-fit-content !important;
    width: fit-content !important
}

.layout-mobile #itemDetailPage .infoWrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 0 !important
}

.layout-mobile #itemDetailPage .mainDetailButtons {
    flex-wrap: nowrap;
    gap: 1em !important;
    justify-content: flex-start;
    overflow: auto;
    width: 100%
}

.layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Play],
.layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Resume] {
    background: transparent !important;
    border: none !important;
    overflow: visible;
    padding: .7em
}

.layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Play]:after,
.layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Resume]:after {
    all: unset !important
}

.layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list {
    grid-template-columns: 1fr
}

.layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemImage {
    flex-basis: 20vh;
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%
}

.layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem-bottomoverview {
    font-size: 88%;
    margin-bottom: 1em;
    margin-top: .2em;
    padding: 0 1em 1em
}

.layout-mobile #itemDetailPage .emby-button {
    margin: 0 !important
}

@media (orientation:landscape) {
    .layout-mobile #itemDetailPage .detailRibbon {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        margin-top: 10vh !important
    }

    .layout-mobile #itemDetailPage .detailRibbon .infoWrapper {
        align-items: center;
        display: grid;
        flex-basis: 50vw;
        flex-direction: row;
        grid-template-areas: "card name" "card info"
    }

    .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .detailImageContainer {
        grid-area: card
    }

    .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .nameContainer {
        align-self: self-end;
        grid-area: name;
        justify-self: flex-end;
        text-overflow: ellipsis;
        width: calc(100% - 1.2em)
    }

    .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .itemMiscInfo-primary {
        align-self: self-start;
        grid-area: info;
        justify-self: flex-end;
        text-overflow: ellipsis;
        width: calc(100% - 1.2em)
    }

    .layout-mobile #itemDetailPage .detailRibbon .infoText {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        font-size: 3.2em;
        max-width: -moz-fit-content;
        max-width: fit-content;
        overflow: hidden;
        text-align: start;
        width: -moz-fit-content !important;
        width: fit-content !important
    }

    .layout-mobile #itemDetailPage .detailImageContainer .card {
        max-width: 40vw !important;
        min-width: 20vw;
        width: 100%
    }

    .layout-mobile #itemDetailPage .mainDetailButtons {
        flex-basis: 50vw;
        font-size: 1.5em;
        margin: 0 !important;
        padding: 0 !important;
        width: -moz-fit-content;
        width: fit-content
    }

    .layout-mobile #itemDetailPage .parentName a {
        text-align: start
    }
}

@media (min-width:40em) {
    .dashboardDocument .skinBody {
        width: calc(100% - 20em)
    }
}

.dashboardDocument .headerTabs {
    margin-left: 0;
    width: auto
}

.dashboardColumn:first-child .dashboardSection .paperList {
    background: rgba(0, 0, 0, .5) !important;
    color: hsla(0, 0%, 100%, .7);
    font-size: 1.1em
}

.layout-mobile .dashboardDocument .headerTabs {
    width: 100%
}

#loginPage {
    -webkit-mask-image: none;
    mask-image: nonee
}

#loginPage:after {
    background: linear-gradient(to bottom right, var(--accent1-dark), var(--accent2-dark));
    background-size: cover;
    content: "";
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1
}

#loginPage>div {
    left: 50%;
    max-width: 50vw;
    min-width: 40vw;
    padding: 0 !important;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

#loginPage #divUsers {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: auto
}

#loginPage #divUsers .card {
    width: 30%
}

#loginPage #divUsers .card .cardBox {
    box-shadow: none !important
}

#loginPage .emby-button {
    background: transparent;
    border: .2em solid
}

#loginPage .emby-button:after {
    all: unset !important
}

#loginPage .emby-button:focus-visible,
#loginPage .emby-button:hover {
    background: hsla(0, 0%, 100%, .2)
}

#loginPage .checkboxOutline {
    background: transparent !important;
    border: .152em solid #fff !important
}

#loginPage .emby-input:focus,
#loginPage .inputLabelFocused {
    border-bottom-color: #fff !important;
    color: #fff !important
}

.layout-mobile #loginPage>div {
    max-width: 85vw;
    width: 85vw
}

@media (orientation:portrait) and (max-width:43em) {
    .nowPlayingInfoContainer {
        align-items: center;
        justify-content: center
    }

    .nowPlayingPageImageContainer {
        flex-grow: 0
    }
}

.nowPlayingSongName {
    font-size: 1.5em;
    text-overflow: ellipsis;
    white-space: nowrap
}

.subtitleSync {
    left: 0;
    top: 8em
}

.subtitleSyncContainer {
    background-color: rgba(0, 0, 0, .75)
}

.sliderBubble,
.subtitleSyncContainer {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.sliderBubble {
    background: rgba(0, 0, 0, .75)
}

body,
h1,
h2,
h4,
h5,
html {
    font-family: Montserrat, sans-serif
}


/** ============== Logo.css ============== **/



.layout-mobile #itemDetailPage .itemBackdrop {
    display: block !important
}

.layout-mobile #itemDetailPage .parentName,
.layout-mobile #itemDetailPage .parentNameLast {
    display: block !important;
    font-size: 1.6em !important
}

.layout-mobile #itemDetailPage .detailLogo:not(.hide),
body #itemDetailPage .itemBackdrop {
    display: none !important
}

body #itemDetailPage .parentName,
body #itemDetailPage .parentNameLast {
    font-size: 0 !important
}

body #itemDetailPage .nameContainer .parentName a {
    border-radius: 0 !important;
    font-size: 0;
    height: 16vh;
    left: 32.435vw;
    position: absolute;
    top: 10vh;
    width: 25vw
}

body #itemDetailPage .detailRibbon {
    height: -moz-fit-content;
    height: fit-content;
    margin-top: 0
}

body #itemDetailPage .detailLogo:not(.hide) {
    background-position: 0;
    display: block !important;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 32.425vw;
    margin-top: 10vh !important;
    position: static
}

body #itemDetailPage .detailLogo.hide+.detailPageWrapperContainer>.detailPagePrimaryContainer {
    margin-top: 10vh
}

body #itemDetailPage .detailLogo.hide+.detailPageWrapperContainer>.detailPagePrimaryContainer>.infoWrapper>.nameContainer>.itemName {
    display: block !important;
    font-size: 2.5em !important
}


/** ============== Customized ============== **/

.disclaimerContainer {
    display: -webkit-flex !important;
    display: flex !important;
    margin-top: 2em !important;
}

#itemDetailPage,#tvRecommendedPage,#moviesPage,#indexPage,.backgroundContainer {
    background: linear-gradient(to bottom right, var(--accent1-dark), var(--accent2-dark));
    background-size: cover;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    padding-top: 6.5rem !important;
    width: 100vw;
}


.pageTitleWithDefaultLogo {
    background-image: url(FruitLix.png) !important;
}