Repository: tedhinklater/finimalism Branch: main Commit: 7bf48ff8368e Files: 15 Total size: 672.1 KB Directory structure: gitextract__1fn8705/ ├── Finimalism11.css ├── Finimalism12.css ├── LICENSE ├── Multicolour/ │ └── placeholder.txt ├── README.md ├── blurryface's-half-and-half.css ├── finimalism-just-black.css ├── finimalism10.11-black.css ├── finimalism10.11.css ├── finimalism7.css ├── horizontal-scrolling.css ├── libraryCardAriaText.css ├── no-animation.css ├── scrollers-11.css └── theme.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: Finimalism11.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&display=swap'); :root { --accent: 133, 100, 255; --backdropBlur: blur(0px); --detailGradient: linear-gradient( 54deg, rgba(var(--tint), 1) 0%, rgba(var(--tint), 0.99996337890625) 6.25%, rgba(var(--tint), 0.9994140625) 12.5%, rgba(var(--tint), 0.99703369140625) 18.75%, rgba(var(--tint), 0.990625) 25%, rgba(var(--tint), 0.97711181640625) 31.25%, rgba(var(--tint), 0.9525390625) 37.5%, rgba(var(--tint), 0.91207275390625) 43.75%, rgba(var(--tint), 0.85) 50%, rgba(var(--tint), 0.78792724609375) 56.25%, rgba(var(--tint), 0.7474609375) 62.5%, rgba(var(--tint), 0.72288818359375) 68.75%, rgba(var(--tint), 0.709375) 75%, rgba(var(--tint), 0.70296630859375) 81.25%, rgba(var(--tint), 0.7005859375) 87.5%, rgba(var(--tint), 0.70003662109375) 93.75%, rgba(var(--tint), 0.7) 100%); --loginGradient: linear-gradient( 180deg, rgba(var(--tint), 1) 0%, rgba(var(--tint), 0.99996337890625) 6.25%, rgba(var(--tint), 0.9994140625) 12.5%, rgba(var(--tint), 0.99703369140625) 18.75%, rgba(var(--tint), 0.990625) 25%, rgba(var(--tint), 0.97711181640625) 31.25%, rgba(var(--tint), 0.9525390625) 37.5%, rgba(var(--tint), 0.91207275390625) 43.75%, rgba(var(--tint), 0.85) 50%, rgba(var(--tint), 0.78792724609375) 56.25%, rgba(var(--tint), 0.7474609375) 62.5%, rgba(var(--tint), 0.72288818359375) 68.75%, rgba(var(--tint), 0.709375) 75%, rgba(var(--tint), 0.70296630859375) 81.25%, rgba(var(--tint), 0.7005859375) 87.5%, rgba(var(--tint), 0.70003662109375) 93.75%, rgba(var(--tint), 0.7) 100%); --tint: 17, 14, 30; --tint2: 71, 51, 145; --rounding: 0.8em; } body { font-family: "Geom", sans-serif; font-size: 1.8vh; } html { color: #fff; color: rgba(255, 255, 255, 1); } .backgroundContainer, .preload { background-color: rgb(var(--tint)); } .itemsContainer { opacity: 0; animation: fadeTitle 0.3s ease-out 0s forwards; } .mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3, .mdl-spinner__layer-4 { border-color: rgb(var(--accent)); } .sections.homeSectionsContainer::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgb(var(--tint)); background-size: cover; opacity: 0; z-index: -1; background-attachment: fixed; pointer-events: none; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(var(--tint), 0.86); background-size: cover; z-index: -1; background-attachment: fixed; } .detailPagePrimaryContainer { position: relative; z-index: 2; pointer-events: none; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 4em); background: ; background-size: cover; opacity: 1; z-index: -1; margin-top: -4em; } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: ; background-size: cover; opacity: 1; z-index: -1; } .headerTop { padding: 0.95em; } h2 { font-size: 1.8vh; } h1 { font-size: 1.3em; } .textActionButton { transition: color 0.3s, font-weight 0.3s; } .textActionButton:hover { -webkit-text-decoration: none; text-decoration: none; color: rgb(var(--accent)); } .cardText-secondary, .fieldDescription, .guide-programNameCaret, .listItem .secondary, .nowPlayingBarSecondaryText, .programSecondaryTitle, .secondaryText { color: rgba(255, 255, 255, 0.75); } .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { background: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); right: 0; left: 0; top: 0; bottom: 0; margin: 0; } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { padding-left: max(env(safe-area-inset-left),3.7%); padding-right: 7.5%; padding-right: max(env(safe-area-inset-right),3.5%); } } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x { transition: color 0.3s; } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:hover, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:focus { color: rgb(var(--accent)); } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x .button-link:hover, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x .button-link:hover { text-decoration: none !important; } .layout-desktop p.overview, .layout-tv p.overview { color: #fff; font-weight: 500; padding-top: 0.4em; margin-bottom: 0; width: 60vh; transition: width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s, border-radius 1s ease-out 1s; border-radius: var(--rounding) !important; } .layout-desktop p.overview.detail-clamp-text, .layout-tv p.overview.detail-clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; height: fit-content; max-height: 6.4em; margin-top: 0.5em; margin-bottom: -1em; padding-top: 0; padding-left: 0em; border-radius: 0 !important; } .layout-desktop .itemDetailPage:has(.card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"]) p.overview:hover, .layout-tv .itemDetailPage:has(.card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"]) p.overview:focus { width: calc(93vw - 60vh); background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: calc(0em + -1px); margin-left: -1px; padding-left: 0em; padding-right: 0.5em; height: fit-content; max-height: 6.4em; transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s, border-radius 0.2s ease-out 0s; border-radius: var(--rounding) !important; overflow-y: scroll; } .layout-desktop p.overview:hover, .layout-tv p.overview:focus { width: calc(93vw - 60vh); background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: calc(0.5em - 1px); margin-left: -1px; padding-left: 0.5em; padding-right: 0.5em; height: fit-content; max-height: 6.4em; transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s, border-radius 0.2s ease-out 0s; border-radius: var(--rounding) !important; overflow-y: scroll; -webkit-line-clamp: unset; } .layout-desktop .emby-tabs-slider { opacity: 0; transition: opacity 2s ease-out 2s; } .layout-desktop .emby-tabs-slider:hover { opacity: 1; transition: opacity 2s ease-out 0s; } .layout-desktop .overview-expand.emby-button, .layout-tv .overview-expand.emby-button { opacity: 0; pointer-events: none; } @media (min-width: 75em) { .portraitCard { width: 11%; } } @media (min-width: 43.75em) { .portraitCard, .squareCard { width: 24%; } } @media (min-width: 50em) { .portraitCard { width: 11%; } } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailSectionContent, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailSectionContent { max-height: unset; margin-top: 0; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview:hover, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview:hover { width: 60vh; padding-top: 0.4em; border: none; margin-left: 0px; padding-left: 0em; padding-right: 0em; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview.detail-clamp-text { -webkit-line-clamp: unset; display: block; overflow: scroll; height: 9em; width: calc(90vw + -54vh); padding-top: 0.4em; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible { margin-top: -17em; height: unset; position: relative; max-width: calc(98vw - 60vh); } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right.vertical-wrap { height: unset; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer, .layout-mobile .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer { animation: none !important; opacity: 1 !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text { width: calc(90vw - 60vh); transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 0s, padding-right 0s ease-out 1s; max-height: 5em !important; overflow-y: scroll !important; } #itemDetailPage .tagline { font-weight: 600; } .quality-overlay-container { opacity: 0; transition: opacity 0.3s; transition-delay: opacity 0.5s; } .card:hover .quality-overlay-container { opacity: 1; transition-delay: 0s; } .layout-desktop #itemDetailPage .tagline, .layout-tv #itemDetailPage .tagline { margin-top: 0em; margin-bottom: 0em; min-height: 1.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; width: calc(93vw - 60vh); } .detailImageContainer:has(.cardImageIcon.material-icons.person) { animation: none !important; opacity: 1 !important; } .mdl-slider::-webkit-slider-thumb, .mdl-slider .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-moz-range-thumb, .mdl-slider .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-ms-thumb, .mdl-slider .mdl-slider::-ms-thumb { background: rgb(var(--accent)) !important; border: none !important; } .mdl-slider .mdl-slider-background-lower[style] { background: rgb(var(--accent)) !important; background-color: rgb(var(--accent)) !important; } .mdl-slider-background-flex { background: hsla(0,0%,100%,.3); border: 0; display: -webkit-flex; display: flex; height: .2em; margin-top: -.1em; overflow: hidden; padding: 0; padding-top: 0px; padding-bottom: 0px; top: 50%; width: 100%; height: 0.75em; padding-bottom: 0em; padding-top: 0em; margin-top: -0.44em; border-radius: var(--rounding); } .mdl-slider { font-size: 0.5em; width: 100%; color: transparent; margin-left: 0em; margin-top: -0.2em; border-top-left-radius: 0em; border-top-right-radius: var(--rounding); border-bottom-left-radius: 0em; border-bottom-right-radius: var(--rounding); } .sliderMarker.watched { background-color: #fff; height: 0.75em; z-index: 1; } .sliderMarker.unwatched { background-color: hsla(0,0%,100%,.3); height: 0.75em; } #pause-screen-progress-bar > span { display: block; height: 100%; width: 0%; background: rgb(var(--accent)); } .layout-desktop .itemName.infoText.parentNameLast, .layout-tv .itemName.infoText.parentNameLast { text-align: center; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; } :root {--selection: 170, 95, 200;} .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0); } .backgroundProgress > div { background-color: #7b7b7b; } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(120, 120, 120, 0.6); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: white; } .raised, .fab, a[data-role="button"] { background: rgb(var(--tint)); transition: all 0.2s !important; border: 1px solid white; font-weight: 900; } .raised:hover, .fab:hover, .navMenuOption:hover, .actionSheetMenuItem:hover { background: rgba(80, 80, 80, 0.8) !important; color: #fff !important; } .paper-icon-button-light:hover { background-color: rgba(0, 0, 0, 0) !important; } .defaultCardBackground1 { background-color: rgb(var(--tint2)); } .defaultCardBackground2 { background-color: rgb(var(--tint2)); } .defaultCardBackground3 { background-color: rgb(var(--tint2)); } .defaultCardBackground4 { background-color: rgb(var(--tint2)); } .defaultCardBackground5 { background-color: rgb(var(--tint2)); } .countIndicator { box-shadow: none; } .checkboxOutline, .emby-input, .emby-textarea, .emby-select-withcolor { background: rgba(0, 0, 0, 0.2); border: 0.01em solid rgba(255, 255, 255, 0.22); } .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus { background: rgba(0, 0 , 0, 0.4) !important; } .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid rgba(var(--selection), 0.8) !important; } .emby-checkbox:checked + span + .checkboxOutline { background-color: rgba(0, 0 , 0, 0.4) !important; border: 0.01em solid rgba(var(--selection), 0.8) !important; } #loginPage .readOnlyContent, #loginPage form { max-width: fit-content; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; transform: translateX(-50%); padding-left: 1em; padding-right: 1em; width: fit-content; max-width: calc(63.5vw + 32vh); background: rgba(var(--tint2), 0.1); border-radius: var(--rounding); } #loginPage .squareCard { max-width: 11em; min-width: 10em; } #loginPage .card.squareCard.scalableCard.squareCard-scalable { border: 1px solid #58547a; border-radius: var(--rounding); margin: 1em; } #loginPage .cardBox.cardBox-bottompadded { padding: 0 !important; margin: 0 !important; } .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { border-color: rgba(var(--accent)); } #loginPage .raised { font-weight: 500; width: calc(1.5vw + 32vh); } #loginPage .checkboxOutline { border-radius: 999em; } #loginPage .visualLoginForm { margin-bottom: 2em; } #loginPage .readOnlyContent .emby-button { width: calc(1.5vw + 32vh); transform: translateX(-50%); margin-left: 50%; margin-right: 50%; margin-top: 1.5em; } #divUsers.itemsContainer.vertical-wrap.centered { margin-right: 0; width: 100%; } #loginPage form { padding-top: 4em; } #loginPage .sectionTitle{ margin-left: auto !important; margin-right: auto !important; } #loginPage { background: var(--loginGradient) !important; background-size: cover !important; } .layout-desktop .visualLoginForm h1, .layout-tv .visualLoginForm h1 { padding-top: 1em; } #childrenContent .starRatingContainer { display: none; } @media (min-width: 100em) { .portraitCard, .squareCard { width: 11%; } } .layout-desktop .dialogContainer .availableImagesList .card, .layout-tv .dialogContainer .availableImagesList .card { width: 20%; } .layout-desktop .dialogContentInner .card.scalableCard.imageEditorCard, .layout-tv .dialogContentInner .card.scalableCard.imageEditorCard { width: 30%; } @media (max-width: 62.5em) { .layout-desktop .detailPageWrapperContainer, .layout-tv .detailPageWrapperContainer { margin-top: 0em !important; } } @media (orientation: landscape) { .layout-desktop #itemDetailPage { position: relative; } .layout-desktop #itemDetailPage::after, .layout-tv #itemDetailPage::after { content: none; } .layout-desktop .detailLogo, .layout-tv .detailLogo { position: fixed; z-index: 0; left: 4.5em; width: 30vw; height: 30vh; animation: fadeLogo 0.5s 2s ease-out forwards; display: block; transform: translateX(-50%) translateY(-50%); opacity: 1; } .layout-desktop #itemDetailPage:has(.portraitCard) .detailLogo, .layout-tv #itemDetailPage:has(.portraitCard) .detailLogo { top: 80vh; left: 20vw; bottom: unset; } } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailLogo, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .detailLogo { display: none; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo { display: none; } .layout-desktop #itemDetailPage .nameContainer, .layout-tv #itemDetailPage .nameContainer { position: fixed; left: 2.75em; top: 35.78em; width: 22.1em; justify-content: center; text-align: center; height: 3.6em; display: flex; pointer-events: all; flex-direction: row; } .layout-desktop .skinHeader, .layout-tv .skinHeader { position: fixed; top: -0.5em; } @media (orientation: landscape) { .itemDetailPage { padding-top: 0em !important; } } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { position: fixed !important; } .headerTabs.sectionTabs { text-size-adjust: 110%; } .pageTitle { margin-top: auto; margin-bottom: auto; filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } [dir="ltr"] .listItem { padding: .25em .25em .25em .25em; } .docspinner { contain: layout style size; height: 10vh; left: 50%; margin-left: -5vh; margin-top: -5vh; position: fixed; top: 50%; width: 10vh; z-index: 9999999; } .mdl-spinner__circle-clipper .mdl-spinner__circle { width: 200%; border: 0.5em solid white; } .mdlSpinnerActive .mdl-spinner__circleLeft { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; border: 0.5em solid rgb(var(--accent)); } .cardIndicators, .listItemIndicators { top: 0.5em; } .cardBox-bottompadded { margin-bottom: 0.4em !important; } .itemsContainer > .card > .cardBox { margin-right: 0.8em; } .raised.homeLibraryButton { background: rgba(0, 0, 0, 0.35) !important; filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); } .raised.homeLibraryButton:hover { background: rgba(0, 0, 0, 0.5) !important; } .raised.homeLibraryButton:hover {transition: filter 0.2s} .raised.homeLibraryButton {transition: filter 0.2s} .homeLibraryButton { min-width: 9em; margin: 0.4em; } @media all and (max-width: 26em){ .homeLibraryButton { min-width: 35%; width: auto !important; } } .homeLibraryButton { width: auto !important; } .visualCardBox, .cardImageContainer { box-shadow: none; } #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0.2em !important; } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer, .layout-tv #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0em !important; } .backgroundProgress > div { background: rgba(0, 0, 0, 0); } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: rgb(var(--tint)); border-radius: var(--rounding); } .button-flat:hover { background: transparent !important; color: rgb(var(--accent)) !important; } .dashboardSection h3 { margin: .5em .0em .5em .5em; } .dashboardSection .sectionTitleTextButton > .material-icons.material-icons { margin-top: .5em; margin-bottom: .5em; margin-right: .2em; } .listItemIcon { background: #0000 !important; } .listItem-border { border-color: rgba(255, 255, 255, 0) !important; } .formDialogFooter-clear, .formDialogHeader-clear, .innerCardFooterClear { background-color: transparent !important; } .emby-button.show-focus:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 8px, 0.75)); transform: scale(1); } .paper-icon-button-light.show-focus:focus { color: rgb(var(--accent)) !important; } button-flat:hover { color: rgb(var(--accent)) !important; } .raised:hover, .fab:hover, a[data-role="button"]:hover { background: #fff !important; color: #000 !important; font-weight: 800; } .subtitleappearance-preview { background: linear-gradient(140deg,rgba(var(--accent)),#111) !important; } .navMenuOption-selected { color: rgb(var(--accent)); } .mdl-slider-background-lower { background-color: rgb(var(--accent)); } progress::-moz-progress-bar { background-color: rgba(var(--accent),0.75); } progress::-webkit-progress-value { background-color: rgba(var(--accent),0.75); } .taskProgressInner { background: rgba(var(--accent),0.75) !important; } #dashboardPage .playbackProgress > div { background-color: rgba(var(--accent), 0.75) !important; } #dashboardPage .transcodingProgress > div { background-color: rgba(var(--accent), 0.35) !important; } .mdl-slider-background-lower { background-color: rgb(var(--accent)); z-index: 0; border-radius: 5em; padding-right: 0.4vw; } .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)); } .mdl-slider::-ms-thumb { background: rgb(var(--accent)); } .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)); } .mdl-slider-background-flex-container { box-sizing: border-box; padding: 0px 0em; position: absolute; top: 50%; width: 100%; } .iconOsdProgressInner { background: rgb(var(--accent)); } .countIndicator, .playedIndicator { background: rgb(var(--tint2)); } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: rgb(var(--accent)); } .cardOverlayButton-hover .playstatebutton-icon-played { color: #fff; } .material-icons.detailButton-icon.favorite:hover { color: #f00; transition: color 1s; } .ratingbutton-icon-withrating { color: #ff0060; filter: drop-shadow(0px 0px 5px #ff666669) } .material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating:hover { color: rgb(var(--accent)); transition: color 1s; } #itemDetailPage .button-link { color: inherit; font-weight: 600; transition: color 0.3s; } #itemDetailPage .button-link:hover { color: rgb(var(--accent)) !important; text-decoration: none; } .navMenuOption:hover, .actionSheetMenuItem:hover { background-color: #fff !important; } .emby-checkbox:checked + span + .checkboxOutline, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid #fff !important; } .layout-desktop .mainDetailButtons, .layout-tv .mainDetailButtons { font-size: 1.08em; } .startTimeText, .endTimeText { width: 3.4em; display: block; text-align: center; } .osdTitle { margin-left: 0.5em; } .osdTimeText { } .videoOsdBottom { padding-top: 1em; } .skinHeader-withBackground.osdHeader { height: 5em; } .collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox { background-color: rgb(var(--tint)); } progress { background: rgba(0, 0, 0, 0.5) !important; } .emby-input, .emby-textarea { padding: .4em .55em; } .emby-select { padding: .35em 1.9em .35em .35em; } .selectArrow { margin-top: 1.05em; } .sectionTitleTextButton > .material-icons { margin-bottom: -0.1em; opacity: 0; } .sectionTitle { margin-left: 0em !important; margin-top: 0.5em !important; font-weight: 600; } .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 3%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap, .layout-tv .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { max-width: 93%; padding: 0; gap: 1%; } .layout-desktop #homeTab .emby-scroller, .layout-tv #homeTab .emby-scroller { padding-left: max(env(safe-area-inset-left),0%); } .layout-desktop .sections.homeSectionsContainer, .layout-tv .sections.homeSectionsContainer { padding-left: max(env(safe-area-inset-left),0.5%); } .layout-desktop #homeTab .sectionTitleContainer-cards, .layout-tv #homeTab .sectionTitleContainer-cards { padding-left: 0; } [dir="ltr"] .padded-left { padding-left: 1em; } .card:hover .indicator.videoIndicator { opacity: 0; } .nowPlayingBarCurrentTime { width: 6em; } .osdTextContainer { margin: 0 !important; margin-top: 0.2em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .headerUserButtonRound { border-radius: 50px !important; } .navMenuOptionText { margin-top: 0; } .formDialogHeaderTitle { margin-left: 1em; } .dialogContentInner { padding: .5em 1em 1em; padding-right: 1em; padding-left: 1em; padding-bottom: 6em; } .listItem-indexnumberleft { margin: 1em; } .listItem { padding-left: 1em; } .layout-desktop #itemDetailPage .overflowSquareCard, .layout-tv #itemDetailPage .overflowSquareCard { width: 6.7em; } .layout-desktop #itemDetailPage .overflowBackdropCard, .layout-tv #itemDetailPage .overflowBackdropCard { width: 14.94em; } .skinHeader { display: -webkit-flex; display: flex; } .cardPadder { background-color: #0000 !important; box-shadow: none !important; } .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 600; padding-top: 0.25em; padding-bottom: 0.25em; line-height: 1.15em; } .layout-desktop .cardText.cardTextCentered.cardText-secondary, .layout-tv .cardText.cardTextCentered.cardText-secondary { padding-top: 0; padding-bottom: 0.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1em; max-height: 2.2em; margin-top: 0em; } .skinHeader-withBackground { background-color: transparent !important; } @media all and (min-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 0em; padding-top: 3.5em !important; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard, .layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard { width: 14.94em; margin-top: -0.3em; } } @media all and (max-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 6em; padding-top: 0.5em !important; } } @media all and (max-width: 100em){ .layout-desktop #indexPage, .layout-tv #indexPage, .layout-desktop #moviesPage, .layout-tv #moviesPage, .layout-desktop #tvRecommendedPage, .layout-tv #tvRecommendedPage, .layout-desktop #musicRecommendedPage, .layout-tv #musicRecommendedPage { margin-top: 2em; padding-top: 0.5em !important; } } .force-scroll { overflow-y: auto; overflow-x: auto; } .raised.homeLibraryButton { box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; border: solid 1px rgba(var(--accent),0) !important; } #homeTab .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x .raised.homeLibraryButton.emby-button .material-icons.homeLibraryIcon { margin-left:0.05em; } @media (min-width: 70em) { .cardOverlayContainer { background-color: rgba(255, 255, 255, 0.05); } } .cardOverlayContainer:hover, .cardOverlayContainer:focus, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff; } .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .cardOverlayContainer { border: solid 1px #fff !important; } .drawer-open { box-shadow: 0px 0px 5px #fff !important; border-right: solid 1px #fff !important; } @supports (backdrop-filter: blur(15px)) { .dialog, .mainDrawer, .toast, .appfooter { backdrop-filter: blur(15px); background-color: rgb(var(--tint)); } .paper-icon-button-light:hover, #itemDetailPage .itemProgressBar, #dashboardPage .backgroundProgress > div { backdrop-filter: blur(0px); } @media all and (max-width: 70em){ .cardOverlayButtonIcon { background-color: rgba(0, 0, 0, 0) !important; } } } .cardOverlayButton-br { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: auto; padding: 0em; gap: 1em; border-radius: 10px; } .cardOverlayButtonIcon { width: 1.1em !important; height: 1.5em !important; display: flex; justify-content: center; align-items: center; } .cardOverlayButton { position: relative; color: #fff; padding: 0.12em; } .cardOverlayContainer > .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3.1em; } .missingIndicator, .unairedIndicator, .detailTable, .primaryImageWrapper > img, .toast, .paperList, .cardContent, .sessionNowPlayingInnerContent, .listItem:hover, .cardImage, .fab, .raised, .multiSelectCheckboxOutline, .itemSelectionPanel, .cardContent-button, .cardContent-shadow, .itemDetailImage, .cardImageContainer, .cardPadder, .listItemImage, .listItemImageButton, .listItemButton, .blurhash-canvas, .dialog, .listItemIcon, .listItem-border, .visualCardBox, .checkboxOutline, .emby-select-withcolor, .chapterThumbTextContainer, .chapterThumbContainer, .chapterThumb, .emby-input, .emby-textarea, .emby-select-withcolor, .nowPlayingPageImage, .upNextDialog-poster-img, .upNextContainer, .cardOverlayButtonIcon, .cardOverlayContainer { border-radius: var(--rounding) !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItemImageButton, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItemImageButton { background: transparent; color: transparent; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItem.listItem-largeImage.listItem-withContentWrapper:hover .paper-icon-button-light[data-action="resume"], .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItem.listItem-largeImage.listItem-withContentWrapper:focus .paper-icon-button-light[data-action="resume"] { background-color: rgba(0, 0, 0, 0.5); color: white; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:hover, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:focus { background-color: rgba(0, 0, 0, 0.86) !important; color: rgb(var(--accent)) !important; } .layout-desktop #itemDetailPage .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast[data-action="link"], .layout-tv #itemDetailPage .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast[data-action="link"] { border-radius: var(--rounding) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; max-width: 100%; width: 100%; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItem, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItem { padding: 0; } /*hover zoom*/ .layout-desktop .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus, .layout-desktop .card.portraitCard:hover, .layout-desktop .card.backdropCard:hover, .layout-desktop .card.squareCard:hover { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transform: scale(1.02); transition: transform 1s ease; } .layout-tv .card:focus { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transition: transform 1s ease; } .layout-desktop .homeLibraryButton, .layout-tv .homeLibraryButton { font-weight: 700; border-radius: 0.5em !important; } .layout-desktop .homeLibraryButton:hover, .layout-mobile .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover { filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); background: #fff !important; color: #000 !important; transform: revert; font-weight: 700; } .backdropImage { filter: blur(0px) saturate(100%) contrast(110%) brightness(100%); } .listItem { text-align: center; padding: 10px; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast { transition: box-shadow 0.3s; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .itemProgressBarForeground { border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } .detailsGroupItem.genresGroup, .detailsGroupItem.writersGroup, .itemTags { display: none; } .layout-desktop .detailsGroupItem, .trackSelections .selectContainer, .layout-tv .detailsGroupItem, .trackSelections .selectContainer { display: -webkit-flex; display: flex; } .layout-desktop .trackSelections { position: fixed; left: 2.5em; bottom: 9.381em; width: 21.66em; font-weight: 500; opacity: 0; animation: fadeTracks 0.5s ease-out 1.25s forwards; pointer-events: all; } .layout-tv .trackSelections { position: fixed; left: 1.5em; top: 48.6em; width: 27em; font-weight: 500; opacity: 1; animation: none; } @keyframes fadeTracks { from { opacity: 0; } to { opacity: 1; } } .layout-desktop .trackSelections .selectContainer .detailTrackSelect, .layout-tv .trackSelections .selectContainer .detailTrackSelect { text-overflow: ellipsis; text-align: left; padding-left: 1em; padding-right: 1.5em; font-weight: 600; margin-left: 0.5em; transform: translateX(-5.7%); max-height: 1.5em; font-size: 95%; } .layout-desktop .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .trackSelections.focuscontainer-x .selectSource, .layout-tv .trackSelections.focuscontainer-x .selectVideo, .layout-tv .trackSelections.focuscontainer-x .selectAudio, .layout-tv .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .trackSelections.focuscontainer-x .selectSource { margin-left: 2em; } #seriesScheduleSection { display: none; } .itemsContainer.padded-left { flex: 1; display: flex; white-space: normal; flex-wrap: wrap; } .layout-desktop #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x, .layout-tv #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x { justify-content: space-evenly; } .itemsContainer.padded-left { flex: 1; } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { width: 19.145em; top: 3.5em; left: 4.3em; min-width: unset; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .layout-desktop .detailImageContainer .card.backdropCard, .layout-tv .detailImageContainer .card.backdropCard { width: 22.975em; top: 24.5em; left: 4.3em; min-width: 265px; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailLogo, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailLogo { display: none; } .itemProgressBar { background: rgba(0, 0, 0, 0.25); height: 0.5em; position: absolute; bottom: 0em; left: 0; width: 100%; } .itemProgressBarForeground { background: rgb(var(--accent)); } .layout-desktop .detailImageContainer .card.portraitCard:hover, .layout-tv .detailImageContainer .card.portraitCard:focus, .layout-desktop .detailImageContainer .card.backdropCard:hover, .layout-tv .detailImageContainer .card.backdropCard:focus, .layout-desktop .detailImageContainer .card.squareCard:hover, .layout-tv .detailImageContainer .card.squareCard:focus { filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)) !important; transform: none; transition: transform 1s ease; } .layout-desktop #itemDetailPage .card.squareCard, .layout-tv #itemDetailPage .card.squareCard { top: 13em; } .flex.align-items-center.flex-grow.headerTop { padding-bottom: 20px; height: 2.2em; } @media (min-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-3.65em; position:relative; width:100vw; } } @media (max-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-2em; position:relative; } } @media (max-width:85em) { #moviesTab .layout-desktop .headerTop, #moviesTab .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; } } @media (max-width:959px) { .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; margin-top:-1.3em; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button, .layout-tv .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button { max-width: fit-content; } } @media (orientation: landscape) and (max-width:960px) { .headerTabs { margin-top: -4em !important; } } .mainDrawer { background-color: rgba(var(--tint), 0.4); } .layout-desktop .mainDrawer, .layout-tv .mainDrawer { max-width: 14.5vw; } [dir="ltr"] .sidebarHeader { margin-left: 2%; font-weight: 700; text-transform: uppercase; text-align: left; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0.1s; color: black !important; } .navMenuOption { border-radius: var(--rounding) !important; width: 100% !important; margin-left: 0em !important; } [dir="ltr"] .navMenuOption { padding: .75em 0 .75em 1.5em !important; } .navMenuOption:hover .navMenuOptionText { color: black !important; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption, .mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, button.is-emby-button emby-button { background-color: transparent !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { background: #3733531f !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding { display: flex; flex-direction: column; align-items: center; } #myPreferencesMenuPage .sectionTitle { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: fit-content; margin-left: 0 !important; margin-bottom: 1em; border-radius: var(--rounding) !important; background-color: transparent !important; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; text-align: center; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: calc(1.5vw + 32vh); margin-left: 0 !important; margin-bottom: 1em !important; border-radius: var(--rounding) !important; background-color: rgba(var(--tint2), 0.1) !important; transition: background 0.3s ease; display: flex !important; justify-content: center; transition: background-color 0.3s ease-out 0s, box-shadow 0.8s ease-out 0.1s; box-shadow: 0px 0px 5px rgba(var(--tint), 1) !important; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { transition: background-color 0s ease-out 0s, box-shadow 0.3s ease-out 0s; background-color: rgba(var(--tint2), 0.6) !important; transition: background 0.3s ease; display: flex !important; justify-content: center; box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; } @media (min-width: 50em) { .layout-desktop #myPreferencesMenuPage .readOnlyContent, .layout-tv #myPreferencesMenuPage .readOnlyContent { max-width: calc(4.5vw + 32vh); background: rgba(var(--tint2), 0.1); border-radius: var(--rounding); } } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem:hover { background: transparent; box-shadow: none; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-align: center; width: 100%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: white !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:focus .listItemBodyText { color: white !important; } #myPreferencesMenuPage [dir="ltr"] .listItemIcon { margin: 0 .25em 0 0.25em; } .mdl-slider-background-upper { background: rgba(var(--tint)); border-radius: var(--rounding); height: 0.75em !important; opacity: 0.25; } .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards, .layout-tv div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin: 0; padding-top: 0.5em; } #albumsTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; } .alphaPicker-fixed { top: 9em; } [dir="ltr"] .alphaPicker-fixed-right { right: max(env(safe-area-inset-right),0.5em); } } #myPreferencesMenuPage .listItemIcon { margin: 0; } .homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { margin-left: auto; } .emby-scrollbuttons-button > .material-icons { display: block; min-height: 24px; min-width: 24px; margin-top: -0.3em; } .layout-desktop .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard, .layout-tv .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; } .layout-desktop .overflowBackdropCard, .layout-tv .overflowBackdropCard { } .verticalSection .card img { width: 100%; height: auto; } .detailVerticalSection .nextUpItems { margin-top: -5px; } .itemName { padding-top: 0em; } .infoText { max-width: 100%; min-width: 0; text-align: left; } .subtitle { margin: .15em 0 .2em -1em; padding-left: 0em; text-align: center; } @media only screen and (max-width: 426px) { .homePage .section1.verticalSection .sectionTitle-cards { margin-right: -3.5em; margin-left: 10px; } } .homeLibraryButton { margin-left: 1em !important; margin-right: 1em !important; min-width: 7em; } .layout-desktop .alphaPickerButton-vertical, .layout-tv .alphaPickerButton-vertical { width: 3vw; height: 3vh; } .layout-desktop .alphaPickerButton, .layout-tv .alphaPickerButton { padding: .2em .4em; } .layout-desktop .alphaPicker-fixed, .layout-tv .alphaPicker-fixed { top: max(env(safe-area-inset-top),20vh); height: 80vh; } @media (min-width: 62.5em) { [dir="ltr"] .alphaPicker-fixed-right { right: 1em; right: max(env(safe-area-inset-right),1vw); z-index: 99; } } .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper { width: 76%; max-width: 76%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource { margin-left: 3.354em; } .layout-desktop .trackSelections .selectContainer { } @media (max-width: 50em) { .trackSelections .selectContainer { overflow: hidden; } } .programCell { background: transparent !important; } .programCell-active { background: rgba(var(--accent), 0.35) !important; } .programCell-movie { background: transparent !important; } .guideProgramNameText { font-weight: 400; margin: 0; overflow: hidden; text-overflow: ellipsis; } .channelPrograms { white-space: wrap; } .layout-desktop .verticalSection.section2 .card.overflowBackdropCard, .layout-tv .verticalSection.section2 .card.overflowBackdropCard { } .verticalSection.section0 .card[data-type="CollectionFolder"] .cardBox { background: transparent; } .verticalSection.section0 .textActionButton[data-type="CollectionFolder"], .verticalSection.section0 .textActionButton[data-type="UserView"] { display: none; } .layout-desktop .verticalSection-extrabottompadding, .layout-tv .verticalSection-extrabottompadding { } .content-primary, .padded-bottom-page, .page, .pageWithAbsoluteTabs .pageTabContent { width: 100%; } .layout-desktop .itemsContainer.vertical-wrap.centered, .layout-tv .itemsContainer.vertical-wrap.centered { width: 96%; margin: 0 auto; margin-right: 2em; } .collectionItems .itemsContainer.padded-left::before { opacity: 0; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: 4.6em; } #childrenContent .listItem-content .listItemBodyText { color: #fff; font-weight: 600; } #childrenContent .listItem-content .secondary.listItemBodyText { color: #ffffffe3; font-weight: 500; justify-content: space-between; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:focus { filter: blur(0px); opacity: 1; } .cardOverlayButtonIcon, .cardOverlayButtonIcon.material-icons { display: flex; filter: drop-shadow(1px -1px 1px rgba(2, 2, 2, 0.8)); } .upNextContainer { background: rgba(var(--tint), 0.86); z-index: 50; } .upNextContainer .raised { background: rgba(var(--accent), 0.41) border: transparent; padding: 0.8em; padding-left: 2em; padding-right: 2em; margin-left: 0; } .upNextContainer .flex.flex-direction-row.upNextDialog-buttons { gap: calc(100% - 18.93em); margin: 0; max-width: 100%; } .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { } .upNextContainer .raised:hover { background: #fff !important; } .raised.raised-mini.btnHide.upNextDialog-button.emby-button:hover { } /*Iskelderon's cleaner Scenes & Specials grid */ @media (min-width:1800px) and (min-height:900px) { #specialsCollapsible .emby-scroller, #musicVideosCollapsible.emby-scroller, #scenesCollapsible.emby-scroller { } #specialsCollapsible .emby-scrollbuttons, #musicVideosCollapsible .emby-scrollbuttons, #scenesCollapsible .emby-scrollbuttons { } #specialsCollapsible .itemsContainer, #musicVideosCollapsible .itemsContainer, #scenesCollapsible .itemsContainer { } #specialsCollapsible .overflowBackdropCard, #musicVideosCollapsible .overflowBackdropCard, #scenesCollapsible .overflowBackdropCard { } } .osdControls { } .css-4yt2of, .css-139vfv2 { background-color: rgb(var(--tint)) color: rgb(255, 255, 255); background-image: none; } .previewListItem:hover { color:black !important; } .skip-button { bottom: 7.52em; right: 7.5em; color: #fff; background: rgba(var(--tint), 0.86); border: 1px solid white; border-radius: 0.8em; padding: 0.5em 1em; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .skip-button:hover, .skip-button:focus { background: #fff; color: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .layout-desktop .skip-button .material-icons.skip_next, .layout-tv .skip-button .material-icons.skip_next { padding-top: 0.2em; } .skip-button-container { bottom: 0; right: -5em; } #myPreferencesMenuPage .sectionTitle { text-decoration: underline; } #myPreferencesPage .readOnlycontent { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem { justify-content: center; overflow: visible; width: 70%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody { overflow: visible; text-overflow: unset; white-space: wrap; padding-right: 0.75em; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-mobile #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon, .layout-mobile #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon { transform: translateX(-0.7em); } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-overflow: visible !important; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary { font-weight: 500; text-align: center; filter: drop-shadow(0px 4px 1px #0005); gap: 3%; margin-bottom: 0 !important; font-size: 0.9em; justify-content: space-between; position: absolute; top: 1.8em; left: 47.9vh; margin-top: 0vh; width: 21vh; max-height: 2.6vh; color: #fff; pointer-events: all; transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s; padding-top: 0.4em; border-radius: var(--rounding); background-color: transparent; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary:hover, .layout-tv div.itemMiscInfo.itemMiscInfo-primary:focus { width: calc(91vw - 65vh); transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s; background-color: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: calc(0vh - 1px); margin-left: -1px; padding-left: 0.5em; padding-right: 0.5em; } .layout-desktop .itemName.originalTitle, .layout-tv .itemName.originalTitle { font-weight: 600; text-align: center; filter: drop-shadow(0px 4px 1px #0005); justify-content: flex-start; width: 61vw; gap: 5%; } .layout-desktop .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 30.3em; left: 3.5em; width: 13.4em; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%); font-weight: 600; } .layout-tv .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 10.3em; left: 19.2em; width: 28.3em !important; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%) translateX(-50%); font-weight: 600; } @media (orientation: portrait) { .itemMiscInfo { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.1em; } } button[is="paper-icon-button-light"].cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.cardOverlayFab-primary[data-action="resume"] { background-color: rgba(0, 0, 0, 0.7); height: 2em; left: 50%; margin-left: -1em; margin-top: -1em; padding: 0; position: absolute; top: 50%; width: 2em; } .first-imageEditor-buttons, .imageEditor-buttons { margin-top: 0em; margin-bottom: 0em; } @media (min-width: 70em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.show-focus.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid #62626287; margin-bottom: 1em; background: rgb(var(--tint)); } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.show-focus.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; padding: 1em !important; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.show-focus:focus { color: #000; padding: 1em; background: #fff !important; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button .emby-button-foreground { background: transparent; font-weight: 500; border-radius: 0.2em; } .headerTabs .emby-tab-button { transition: 0s !important; width: auto; color: #fff; } .layout-tv .emby-tab-button { color: #fff; } #moviesTab .listItem { } #moviesTab .listItemBody.itemAction { } #moviesTab .secondary.listItemMediaInfo { } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #moviesTab .listViewUserDataButtons { justify-content: space-around; } #seriesTab .listItem { } #seriesTab .listItemBody.itemAction { } #seriesTab .secondary.listItemMediaInfo { } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #seriesTab .listViewUserDataButtons { justify-content: space-around; } #episodesTab .listItem { } #episodesTab .listItemBody.itemAction { } #episodesTab .secondary.listItemMediaInfo { } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); justify-content: center !important; display: flex; margin-right: 0; } #episodesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #episodesTab .listViewUserDataButtons { justify-content: space-around; } #genresTab .portraitCard, .squareCard { } } .layout-desktop .headerLeft, .layout-tv .headerLeft { -webkit-flex-grow: 1; flex-grow: 1; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; max-width: fit-content; border-radius: 0.25em; z-index: 90; background: rgba(var(--tint), 0.6); margin-left: 0.1em; } .layout-desktop .headerRight, .layout-tv .headerRight { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; background: rgba(var(--tint), 0.6); color: #000 !important; border-radius: 0.25em; transform: translateY(-11%); transition: 0s; z-index: 90; position: fixed; right: 0.7vw; top: 1em; } .headerSelectedPlayer { max-width: 10em; white-space: nowrap; color: rgb(var(--accent)); } .navMenuOption { -webkit-align-items: center; align-items: center; border-radius: 0em !important; } #displayPreferencesPage .sectionTitle { } .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .card.portraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .countIndicator.indicator { transition: opacity 0.3s ease; } [dir="ltr"] .emby-scrollbuttons { } #castCollapsible .emby-scrollbuttons.padded-right, #similarCollapsible .emby-scrollbuttons.padded-right, #guestCastCollapsible .emby-scrollbuttons.padded-right, #specialsCollapsible .emby-scrollbuttons.padded-right, #musicVideosCollapsible .emby-scrollbuttons.padded-right, #scenesCollapsible .emby-scrollbuttons.padded-right { margin-top: -0.5em; margin-right: calc(6.1vw + -8.7vh); } .layout-desktop .emby-scrollbuttons.padded-right { opacity: 0; transition: opacity 0.3s ease-out 0.5s; } .layout-desktop .emby-scroller-container:hover .emby-scrollbuttons.padded-right { opacity: 1 !important; } .layout-desktop #homeTab .emby-scroller-container { position: relative; overflow: hidden; } .listItemImage { cursor: pointer; } .listItemImage:hover { box-shadow: 0px 0px 350px rgba(var(--accent), 0.1); } .skinHeader { pointer-events: none; } .headerButton, .headerTabs.sectionTabs { pointer-events: all; -webkit-filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX { } .collectionItems { } @media (max-width: 1000px) { .raised.homeLibraryButton { } .raised.homeLibraryButton { justify-content: center; border-radius: 0em !important; border: 1px solid #1d102e94 !important; } .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0.5em; display: grid; grid-template-columns: repeat(2, 1fr); /* 2 column layout */ grid-gap: 1em; } } .layout-desktop #homeTab .emby-scrollbuttons.padded-right, .layout-tv #homeTab .emby-scrollbuttons.padded-right { } #homeTab button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: 2em; margin-top: 0.35em; } #homeTab button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: -2.1em; margin-top: 0.35em; } #homeTab button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #homeTab button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="left"] { right: 2.5em; position: absolute; top: 0.5em; z-index: 50; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="right"] { right: 0em; position: absolute; top: 0.5em; z-index: 50; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-tv .cardBox.cardBox-bottompadded { } .layout-desktop .listItemImage-large, .layout-tv .listItemImage-large { } .layout-desktop #itemDetailPage .listItem-content, .layout-tv #itemDetailPage .listItem-content { border-radius: var(--rounding); overflow: hidden; transition: background 0.15s ease-in-out; flex-flow: column; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -ms-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; } .layout-desktop .listItemImage.listItemImage-large, .layout-tv .listItemImage.listItemImage-large { width: 100%; margin: 0; transition: box-shadow 2s ease-in; } .layout-desktop .listItem-overview.listItemBodyText, .layout-tv .listItem-overview.listItemBodyText { height: 5.5em !important; } .layout-desktop #itemDetailPage .listItem, .layout-tv #itemDetailPage .listItem { position: relative; height: -webkit-fit-content; height: -moz-fit-content; overflow: hidden; border-radius: var(--rounding); backdrop-filter: blur(2px) brightness(81%); margin-bottom: 0.5%; box-shadow: 0px 0px 2px rgb(0, 0, 0); background: rgba(var(--tint), 0.6); } .layout-desktop #itemDetailPage .listItem { width: calc(31.3vw + -16vh); } .listItem:hover, .listItem:focus { transition: 0.2s; background: rgba(0, 0, 0, 0.34); transform: scale(1.01); } .layout-desktop #itemDetailPage .listItem:hover, .layout-tv #itemDetailPage .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .layout-desktop .listItem[data-mediatype="Audio"], .layout-tv .listItem[data-mediatype="Audio"] { padding: 0.5em 1em; border-radius: var(--rounding) !important; -webkit-border-radius: var(--rounding) !important; -moz-border-radius: var(--rounding) !important; -ms-border-radius: var(--rounding) !important; -o-border-radius: var(--rounding) !important; } .layout-desktop .listItemImageButton, .layout-tv .listItemImageButton { margin: auto; } .layout-desktop .playlistSection .listItemBody.itemAction, .layout-desktop .playlistSection .listItem-bottomoverview.secondary, .layout-tv .playlistSection .listItemBody.itemAction, .layout-tv .playlistSection .listItem-bottomoverview.secondary { z-index: 1; } .layout-desktop .listItem-bottomoverview.secondary, .layout-tv .listItem-bottomoverview.secondary { text-align: justify; } .nowPlayingInfoContainer .nowPlayingInfoControls .infoContainer.flex { } .infoContainer, .sliderContainer { -webkit-filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); } .layout-desktop .trackSelections .selectContainer .selectLabel, .layout-tv .trackSelections .selectContainer .selectLabel { text-align: center; } .layout-desktop #itemDetailPage .itemExternalLinks, .layout-tv #itemDetailPage .itemExternalLinks { display: flex; flex-direction: column; align-items: flex-start; position: fixed; left: 2.9em; transform: translateX(-50%) translateY(-100%); top: 25.25em; z-index: 2; padding: 1em; padding-top: 1em; padding-bottom: 1em; min-height: 17.55em; padding-bottom: 3em; padding-top: 0.5em; opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemExternalLinks, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemExternalLinks { top: 35.75em !important; } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button { background: rgb(var(--tint)); padding: 0.7vh; border-radius: var(--rounding); border-top-right-radius: 0; border-bottom-right-radius: 0; filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.68)); } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button:hover, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button:focus { filter: brightness(110%); } .itemExternalLinks a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="imdb.com"] { font-size: 0; } .itemExternalLinks a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="trakt.tv"] { font-size: 0; } .itemExternalLinks a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="themoviedb.org"] { font-size: 0; } .itemExternalLinks a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="thetvdb.com"] { font-size: 0; } .itemExternalLinks a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="tvmaze.com"] { font-size: 0; } .itemExternalLinks a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="anidb.net"] { font-size: 0; } .itemExternalLinks a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="anilist.co"] { font-size: 0; } .itemExternalLinks a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="kitsu.app"] { font-size: 0; } .itemExternalLinks a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="theaudiodb.com"] { font-size: 0; } .itemExternalLinks a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="music.apple.com"] { font-size: 0; } .itemExternalLinks a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="musicbrainz.org"] { font-size: 0; } .itemExternalLinks a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="myanimelist.net"] { font-size: 0; } .itemExternalLinks a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="kinopoisk.ru"] { font-size: 0; } .itemExternalLinks a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="shokoanime.com"] { font-size: 0; } .itemExternalLinks.focuscontainer-x { color: #0002; filter: drop-shadow(-2px 1px 0px #131313c7); } .layout-desktop .mainDetailButtons.focuscontainer-x, .layout-tv .mainDetailButtons.focuscontainer-x { position: fixed; left: 4em; width: 17.266em; justify-content: space-between; top: 13.125em; z-index: -1; border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 15.253em; border-top-left-radius: 0em; padding-bottom: 0.3em !important; pointer-events: all; } .layout-desktop .mainDetailButtons.focuscontainer-x::before, .layout-tv .mainDetailButtons.focuscontainer-x::before { content: ''; position: absolute; left: 0; width: 17.708em; height: 2.557777em; background: rgb(var(--tint)); border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 15.355em; border-top-left-radius: 1em; top: -1.25em; box-shadow: 0px 2px 8px #0005; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; padding-bottom: 0em; } .layout-desktop #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .layout-desktop .cardPadder, .layout-tv .cardPadder { border-radius: unset; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat { margin-right: 0em !important; padding: 0 !important; z-index: 5; border-radius: 0.26em !important; margin-top: 0.5em !important; margin-bottom: 0.5em !important; } /* .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { background: #29264a !important; } */ /* D-E-N-U's title fix */ .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle, .layout-tv .itemName.infoText.parentNameLast { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; filter: drop-shadow(-2px 4px 1px #0005); line-height: 1.1em; font-weight: 600; font-size: 151%; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; font-weight: 700; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText { display: flex !important; font-weight: 500; padding-top: 0.5em; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText { font-weight: 500; margin-top: -0.5em; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; opacity: 0.8; } .layout-desktop .listItem:hover .secondary.listItem-overview.listItemBodyText { opacity: 1 !important; } .layout-desktop .itemName.infoText.originalTitle, .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .parentName.musicParentName.focuscontainer-x { opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .itemName.infoText.parentNameLast, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .itemName.infoText.parentNameLast { margin-top: -0.5em; } @keyframes fadeTitle { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeBackdrop { from { opacity: 0.6; } to { opacity: 1; } } @keyframes fadeLogo { from { opacity: 1; } to { opacity: 0; } } .layout-desktop .itemName.infoText.originalTitle, .layout-tv .itemName.infoText.originalTitle { top: 39.3em; left: 4.3em; width: 19.2em; position: fixed; } .layout-desktop #seriesAirTime, .layout-tv #seriesAirTime { position: absolute; top: 38.92em; left: 4.316em; width: 19.07em; text-align: center; font-weight: 600; } .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle { position: absolute; top: -19em; left: 2.1em; width: 20em; } .layout-desktop .detailsGroupItem.genres.content.focuscontainer-x { } .layout-desktop .itemDetailsGroup .detailsGroupItem, .layout-tv .itemDetailsGroup .detailsGroupItem { font-weight: 400; } .layout-desktop .detailsGroupItem, .layout-tv .detailsGroupItem { max-width: 66vw; } .layout-desktop [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer, .layout-tv [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer { right: 2em; top: 0; } .layout-desktop #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: transform 0s color 0.3s; font-weight: 600; } .layout-tv #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1) translateY(-50%); } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1); } .layout-desktop #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata { } .alphaPickerButton:hover { color: rgba(255, 255, 255, 0.75); } .mainDrawer { } .layout-desktop .subtitleSync, .layout-tv .subtitleSync { position: absolute; width: 100%; margin-top: 4em; } .layout-desktop .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName { position: absolute; left: 9.4em; top: 3em; transform: translateX(-50%); width: 17em; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons { justify-content: space-between; width: 100%; background: transparent; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played { filter: drop-shadow(0px 0px 3px #9f93e4ab); } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"], .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"] { color: #ffffff2e; border-radius: var(--rounding); } /*.dialogContainer .listItem:hover .listItemBody { color: #fff; }*/ .subtitleResults .listItem:hover .listItemBody { color: #fff !important; } .subtitleList .listItem:hover .listItemBody { color: #fff !important; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa !important; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText, .actionSheetScroller .listItem.listItem-button:hover .listItemIcon { color: #000; } .layout-desktop .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened, .layout-tv .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened { min-height: 50vh; max-height: 100vh; } .layout-desktop #songsTab .itemsContainer.vertical-list { } .layout-desktop #songsTab .itemsContainer.vertical-list .listItemBody.itemAction { } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(var(--tint)); z-index: 0; } .layout-desktop .videoPlayerContainer, .layout-tv .videoPlayerContainer { animation: 1240ms ease-in fadeTitle !important; animation-name: fadeTitle !important; animation-duration: 1240ms !important; animation-timing-function: ease-in !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; z-index: -1; } .content-primary { padding-bottom: 5em !important; } .localUsers .cardText-secondary { height: auto; white-space: pre-wrap; } @media (min-width: 70em) { .localUsers .squareCard { } } @media (max-width: 70em) { .localUsers .squareCard { } } @media (min-aspect-ratio: 21/9) and (max-aspect-ratio: 30/9) and (min-width: 3000px) and (max-width: 3440px) { body { } } .sectionTitle.sectionTitle-cards { } #itemDetailPage button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0.5; margin-right: 2.324em; margin-top: 0em; } #itemDetailPage button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0.5; margin-right: 1em; margin-top: 0em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-desktop #itemDetailPage .detailVerticalSection, .layout-tv #itemDetailPage .detailVerticalSection { opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; padding-left: 0.5em; pointer-events: all; position: absolute; bottom: 0em; max-width: calc(90vw - 60vh); transition: max-width 0.5s; transition-delay: 0.5s; height: 17.7em; } .layout-tv #castCollapsible { bottom: calc(9em - 49vh) !important; } .layout-desktop #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection { flex: 0 0 60vh; max-width: calc(60vw + -54vh); margin-bottom: 0.2em; transition: width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s; border-radius: var(--rounding) !important; z-index: 1; height: 22vh; bottom: 1.6em; } .layout-desktop #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection:focus { background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-bottom: 2px; margin-left: -1px; padding-left: 0.5em; padding-right: 0.5em; transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s; border-radius: var(--rounding); } .layout-desktop #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection { flex: 1 1 auto; width: 100%; max-width: calc(93vw - 60vh); border-radius: var(--rounding); transition: max-width 0.2s ease-out 2s, background 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; height: 12.83em; margin-bottom: 0.2em; z-index: 1; } .layout-desktop #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection:focus { background: rgb(var(--tint)) !important; transition: max-width 0.2s ease-out 0s, background 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s !important; border: 0.5px solid; border-color: #fff3; padding-right: 1em; padding-left: 1em; margin-bottom: calc(0.2em - 0.5px); } .layout-desktop #itemDetailPage #castCollapsible #peopleHeader.sectionTitle, .layout-tv #itemDetailPage #castCollapsible #peopleHeader.sectionTitle, .layout-desktop #itemDetailPage #guestCastCollapsible #guestCastHeader.sectionTitle, .layout-tv #itemDetailPage #guestCastCollapsible #guestCastHeader.sectionTitle { padding-top: 0.2em; padding-bottom: 0.5em; margin-top: 0 !important; } .layout-desktop #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection { margin-left: calc(63vw + -54vh); max-width: 30vw; border-radius: var(--rounding); transition: max-width 0.2s ease-out 2s, background 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; height: 22vh; bottom: 1.6em; } .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection { position: fixed; bottom: -2em; } .layout-desktop #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection:focus { background: rgb(var(--tint)) !important; transition: max-width 0.2s ease-out 0s, background 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s !important; border: 0.5px solid; border-color: #fff3; margin-bottom: -1px; padding-right: 1em; padding-left: 1em; } .layout-desktop .overview-controls, .layout-tv .overview-controls { display: none; } .layout-desktop #guestCastHeader.sectionTitle.sectionTitle-cards.padded-right, .layout-tv #guestCastHeader.sectionTitle.sectionTitle-cards.padded-right { padding-top: 0 !important; } .layout-desktop #castCollapsible .cardPadder, .layout-tv #castCollapsible .cardPadder, .layout-desktop #guestCastCollapsible .cardPadder, .layout-tv #guestCastCollapsible .cardPadder { pointer-events: none; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { position: relative; } .layout-desktop #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv #specialsCollapsible.verticalSection.detailVerticalSection { top: 19.5em; left: 30.5em; max-width: 54vh; height: 15.54em; position: fixed !important; color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s; border-radius: var(--rounding) !important; height: 15.54em !important; z-index: 1; } .layout-desktop .itemDetailPage:has(.button-flat.btnShuffle.detailButton.emby-button) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .detailPagePrimaryContent.padded-right:has(.button-flat.btnShuffle.detailButton.emby-button) #specialsCollapsible.verticalSection.detailVerticalSection { top: 3.5em; left: 26.25em; height: 18em; position: fixed !important; } .layout-desktop .itemDetailPage:has(.nextUpSection .card.overflowBackdropCard.card-hoverable) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .itemDetailPage:has(.nextUpSection .card.overflowBackdropCard.show-focus.show-animation.card-withuserdata.itemAction) #specialsCollapsible.verticalSection.detailVerticalSection { top: 3.5em; left: 61vw; width: 54vh; height: 14.476em !important; position: fixed !important; transition: max-width 0.2s ease-out 2s, background 1s ease-out 0s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s; overflow: hidden; } .layout-desktop #specialsCollapsible.verticalSection .card .cardText.cardTextCentered.cardText-secondary, .layout-tv #specialsCollapsible.verticalSection .card .cardText.cardTextCentered.cardText-secondary { display: none; } .button-submit:focus { background: rgb(var(--accent)); color: #fff; } .layout-desktop .itemDetailPage:has(#scenesCollapsible #scenesContent .card.itemAction.chapterCard.overflowBackdropCard[data-isfolder="false"]) #specialsCollapsible { top: 17.098em !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible.verticalSection.detailVerticalSection { position: relative !important; left: 0 !important; top: unset; max-width: 107vh !important; margin-top: 4em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible .sectionTitle, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible .sectionTitle, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible .sectionTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible .sectionTitle, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .verticalSection.detailVerticalSection.moreFromSeasonSection .sectionTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .verticalSection.detailVerticalSection.moreFromSeasonSection .sectionTitle, .layout-desktop #scenesCollapsible .sectionTitle, .layout-desktop #specialsCollapsible .sectionTitle { padding-top: 0; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible .emby-scrollbuttons.padded-right, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible .emby-scrollbuttons.padded-right { margin-top: 0em; } .layout-desktop .nextUpSection.verticalSection.detailVerticalSection, .layout-tv .nextUpSection.verticalSection.detailVerticalSection { top: 0em !important; max-width: 107vh; overflow: hidden; } .layout-desktop #listChildrenCollapsible.detailVerticalSection, .layout-tv #listChildrenCollapsible.detailVerticalSection { top: 13.925em; transition: max-width 0.2s ease-out 1s, background 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding); max-width: 55vh; height: 15.346em !important; padding-right: 1em; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible { top: -28.2em !important; max-width: 45vh !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #childrenContent .itemsContainer.padded-right.vertical-list { padding-top: 0.3em; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible:hover { background: transparent !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right { max-width: 45vh !important; height: 52vh !important; overflow-y: scroll; } .layout-desktop .verticalSection.detailVerticalSection.moreFromArtistSection, .layout-tv .verticalSection.detailVerticalSection.moreFromArtistSection { bottom: 1em !important; z-index: 9; max-width: calc(91vw - 60vh) !important; } .layout-desktop .textActionButton, .layout-tv .textActionButton { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.3em; } .layout-desktop #listChildrenCollapsible:hover, .layout-tv #listChildrenCollapsible:focus { background: rgb(var(--tint)) !important; transition: max-width 0.2s ease-out 0s, background 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s !important; max-width: calc(90vw - 25.845em); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; padding-left: 0.5em; padding-right: 1em; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible:focus { border: none !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #listChildrenCollapsible:focus { background: transparent !important; border: none !important; margin-left: 0px; margin-top: 0px; } .layout-desktop #childrenContent .itemsContainer:hover, .layout-tv #childrenContent .itemsContainer:hover { background: ; } .layout-desktop #listChildrenCollapsible .sectionTitle.sectionTitle-cards, .layout-tv #listChildrenCollapsible .sectionTitle.sectionTitle-cards { padding-top: 0em; } .layout-desktop #childrenContent .itemsContainer.cardBox, .layout-tv #childrenContent .itemsContainer.cardBox { margin-left: 0em !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #listChildrenCollapsible { top: 5.81em !important; height: unset !important; max-width: calc(116vw - 89vh) !important; width: calc(104vw - 66.5vh) !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text { -webkit-line-clamp: 3; max-height: 5.3em; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; min-height: unset; font-size: 1.1em; } .layout-desktop #specialsCollapsible:hover, .layout-tv #specialsCollapsible:focus, .layout-desktop .verticalSection.detailVerticalSection.moreFromArtistSection:hover, .layout-tv .verticalSection.detailVerticalSection.moreFromArtistSection:focus { max-width: calc(95.5vw - 61.5vh) !important; background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s !important; border-radius: var(--rounding); } .layout-desktop .itemDetailPage:has(.streaming-lookup-container) #specialsCollapsible:hover, .layout-tv .itemDetailPage:has(.streaming-lookup-container) #specialsCollapsible:focus { max-width: 54vh !important; } .layout-desktop #itemDetailPage .itemDetailsGroup, .layout-tv #itemDetailPage .itemDetailsGroup { opacity: 0; animation: fadeTitle 0.5s ease-out 1.3s forwards; padding-left: 0.5em; pointer-events: all; position: fixed; bottom: 1.5em; left: 2em; width: 25em; } .layout-desktop .detailsGroupItem .content, .layout-tv .detailsGroupItem .content { text-align: left; } .layout-desktop #homeTab .verticalSection.section2.emby-scroller-container, .layout-tv #homeTab .verticalSection.section2 { } @media (min-width: 1000px) { .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap { height: 13.3em; overflow-y: scroll; width: 100%; margin: 0; max-width: calc(90vw - 25.845em) !important; } .layout-desktop #childrenContent .cardText, .layout-tv #childrenContent .cardText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.show-focus { width: 7.5em; min-width: unset; transition: transform 0.3s ease-out 0.5s; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata:focus { transform: scale(1.05); transition: transform 0.3s ease-out 0s; } .layout-desktop .listItem[data-type="Audio"], .layout-tv .listItem[data-type="Audio"] { width: 96%; margin-left: 0.5vw; } .layout-desktop .playlistSection, .layout-tv .playlistSection { width: 82%; margin-left: 0%; position: fixed; top: calc(16vw + 9vh); height: calc(83vh + -12vw); overflow-y: scroll; padding-top: 0.5em; } .layout-desktop .nowPlayingInfoContainer, .layout-tv .nowPlayingInfoContainer { position: fixed; top: 3.32em; left: 1vw; width: 96.7vw; border-radius: var(--rounding); padding: 1em; box-shadow: 0px 2px 12px #000; background: rgb(var(--tint)); } .layout-desktop .playlistSectionButton, .layout-tv .playlistSectionButton { background: none; color: inherit; width: 16%; justify-content: space-evenly; position: fixed; left: 2vw; top: calc(16.5vw + 9vh); } .layout-desktop #scenesContent .innerCardFooter, .layout-tv #scenesContent .innerCardFooter { height: 1.6em; width: 100%; display: inline-flex; justify-content: space-between; background: rgb(var(--tint)); border-bottom-left-radius: var(--rounding); border-bottom-right-radius: var(--rounding); } .layout-desktop #scenesCollapsible .itemAction.chapterCard.overflowBackdropCard, .layout-tv #scenesCollapsible .itemAction.chapterCard.overflowBackdropCard { width: 14.94em; min-width: unset; } .layout-desktop #scenesCollapsible, .layout-tv #scenesCollapsible { top: 3.5em; left: 26.25em; height: 16em; position: fixed !important; } .layout-desktop .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible, .layout-tv .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible { left: 33.2em; color: #fff; max-width: 54vh !important; color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding) !important; height: 12.45em !important; } .layout-desktop .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible:hover, .layout-tv .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible:focus { max-width: calc(94.5vw - 60vh) !important; background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s !important; border-radius: var(--rounding); } .layout-desktop #scenesCollapsible, .layout-tv #scenesCollapsible { max-width: 54vh !important; color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding) !important; height: 11.62em !important; z-index: 1; } .layout-desktop #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #castCollapsible .card.overflowPortraitCard.personCard.show-focus { width: calc(11.6vw + -7.5vh); margin: 0; height: 11em; } .layout-desktop #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-tv #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary { max-height: 1.7em; } .layout-desktop #scenesCollapsible:hover, .layout-tv #scenesCollapsible:focus { max-width: calc(95.5vw - 61.5vh) !important; background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s !important; border-radius: var(--rounding); } .layout-desktop .itemDetailPage:has(.streaming-lookup-container) #scenesCollapsible:hover, .layout-tv .itemDetailPage:has(.streaming-lookup-container) #scenesCollapsible:focus { max-width: 54vh !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailSection, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailSection { height: 0; } .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata { width: calc(11.6vw + -7.5vh); margin: 0; height: 12em; } .layout-desktop #similarCollapsible .card.overflowPortraitCard, .layout-tv #similarCollapsible .card.overflowPortraitCard { width: 6.25em; min-width: unset; padding-top: 0em; } .layout-desktop #similarCollapsible .cardOverlayButton, .layout-tv #similarCollapsible .cardOverlayButton { pointer-events: none; } .layout-desktop #similarCollapsible .cardText, .layout-tv #similarCollapsible .cardText { display: none; } @media (max-height: 1200px) { .spotlightiframe { } .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } @media (max-width: 1400px) and (min-height: 870px) { .layout-desktop .headerTabs, .layout-tv .headerTabs { } .layout-desktop .emby-tab-button, .layout-desktop .emby-tab-button { background: transparent; border-radius: 0; box-shadow: none; box-sizing: border-box; cursor: pointer; display: inline-block; -webkit-flex-shrink: 0; flex-shrink: 0; font-family: inherit; font-weight: 600; height: auto; line-height: 1.25; min-width: 0; min-width: auto; outline: none; overflow: hidden; position: relative; vertical-align: middle; width: auto; } } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding { } .layout-desktop .pageTitleWithLogo, .layout-tv .pageTitleWithLogo { background-position: 0; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.95)); } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: rgba(var(--tint), 0.6); padding-bottom: 0.5em; padding-top: 0.5em; border-top-right-radius: 1em; border-top-left-radius: 1em; width: 98vw; margin-left: 1vw; } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction { align-self: baseline; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent { padding-left: 26.25em; max-width: calc(86vw - 24em); } .layout-desktop [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-desktop [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup, .layout-tv [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup { padding-left: 0.5em; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent .detailSectionContent { margin-top: 51.2vh; pointer-events: all; text-align: left; max-width: 60vh; max-height: 0; } .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Movie"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Movie"]) #listChildrenCollapsible, .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Series"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Series"]) #listChildrenCollapsible, .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Episode"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Episode"]) #listChildrenCollapsible { position: relative !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailSectionContent, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .detailSectionContent { margin-top: 0em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #castCollapsible, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #castCollapsible { display: none; } .layout-desktop [dir="ltr"] .detailRibbon, .layout-tv [dir="ltr"] .detailRibbon { padding-left: 32em; background: transparent; } [dir="ltr"] .detailPageContent { padding-left: 26.2em; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered { } @media (min-height: 25.9375em) { [dir="ltr"] .padded-right-withalphapicker { } } @media (min-width: 900px) { .dashboardDocument .mainAnimatedPage:not(.metadataEditorPage) { } } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { height: 4em; margin-top: -4em; position: relative; } .layout-desktop .detailRibbon::before, .layout-tv .detailRibbon::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: transparent; background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.itemsContainer-tv.vertical-list .listItem.itemAction.listItem-button .listItemBody { width: calc(30.5vw + -16vh); min-width: calc(30.5vw + -16vh); background: transparent; border-radius: 0; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage), .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage) { justify-content: space-evenly; width: 100% !important; } .layout-desktop #childrenContent .listItemImage, .layout-tv #childrenContent .listItemImage.listItemImage-large.listItemImage-large-tv { aspect-ratio: unset; background-size: cover; background-position: center; border-radius: 10px; } .layout-desktop #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding.emby-scroller, .layout-tv #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding { width: 100%; overflow: hidden; } [dir="ltr"] .pageTitle { margin: 0em 0.5em 0 0.5em; } .layout-tv #itemDetailPage .emby-button.show-focus:focus { border: solid 1px #fff; background: transparent !important; color: rgb(var(--accent)) !important; padding-left: 0.5em; padding-right: 0.5em; box-shadow: 0px 0px 5px #fff9; } .layout-tv #itemDetailPage .button-flat.btnPlay.detailButton.emby-button.show-focus:focus { border: solid 1px #fff; background: #fff !important; color: rgb(var(--accent)) !important; } .layout-tv .card.show-focus:focus { transform: scale(0.95); transition: transform 0.1s ease; } .layout-tv .card.show-focus:focus .cardImageContainer, .layout-tv .listItem-focusscale:focus { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff !important; } .layout-tv div.itemMiscInfo.itemMiscInfo-primary { margin-top: 0.3em; } .layout-tv .itemDetailPage { padding-top: 3em !important; } .currentTimeText { padding-left: .8em; padding-right: .8em; color: #fff; } .itemsContainer-tv > .portraitCard, .itemsContainer-tv > .squareCard { width: 15%; margin-bottom: 1em; } .listItemImage-large-tv { width: calc(31.3vw + -16vh) !important; height: 22vh !important } .layout-tv .overflowBackdropCard { max-width: 21em; } .layout-tv #itemDetailPage .card.squareCard { top: 22.8em; } .layout-tv #childrenContent .listItemBody { width: 400em; } .layout-desktop .listItem-content, .layout-tv .listItem-content { align-items: center; display: flex; width: 100%; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer { display: inline-flex; white-space: normal; gap: 0.5%; width: calc(100vw - 26.975em); opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; flex-direction: row; flex-wrap: wrap; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap { scroll-snap-type: y mandatory; scroll-padding-top: 0em; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard { scroll-snap-align: start; } .layout-tv #itemDetailPage .listItem { } .pageTitleWithLogo { width: 6.25em; height: 1.4em; } @media (max-height: 870px) and (min-width: 1000px) { .pageTitleWithLogo { width: 6.5em; height: 1.2em; } } @media (min-width: 1950px) { .pageTitleWithLogo { width: 7.25em; } } @media (min-width: 3000px) { .pageTitleWithLogo { width: 7.65em; } } .layout-desktop #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: 0em !important; } .layout-desktop .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .layout-tv .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--detailGradient); background-size: cover; opacity: 0.6; z-index: -1; background-attachment: fixed; pointer-events: none; animation: fadeBackdrop 1s ease-out 2s forwards; } .layout-mobile .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--detailGradient); background-size: cover; opacity: 0.6; z-index: 0; background-attachment: fixed; pointer-events: none; animation: fadeBackdrop 1s ease-out 2s forwards; } .mainAnimatedPages:has(.nextUpSection) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.nextUpSection) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { animation: fadeBackdrop 1s ease-out 2s forwards !important; opacity: 0.6; } .mainAnimatedPages:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { animation: none !important; opacity: 1; } .layout-desktop #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first, .layout-tv #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .layout-desktop .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x, .layout-tv .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { padding-right: max(env(safe-area-inset-right),3.3%); width: 98vw; } .paper-icon-button-light[data-action="resume"]:hover { background-color: rgba(0, 0, 0, 0.86) !important; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker { max-width: 96vw; } .layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-desktop #indexPage .itemsContainer .card.overflowSquareCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowSquareCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowBackdropCard, .layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard, .layout-tv #indexPage .itemsContainer .card.overflowSquareCard, .layout-desktop #indexPage .itemsContainer .card.overflowSquareCard { width: 16vw; } .layout-desktop .card.overflowBackdropCard .cardOverlayButton-br .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.emby-button.playstatebutton-played, .layout-tv .card.overflowBackdropCard .cardOverlayButton-br .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.emby-button.playstatebutton-played { padding-top: 0.3vh; } .layout-tv .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX.itemsContainer-tv { } #indexPage button[data-direction="left"], #indexPage button[data-direction="right"] { opacity: 0; } .layout-desktop #indexPage .itemsContainer, .layout-tv #indexPage .itemsContainer { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem; padding: 0; margin: 0; overflow: visible !important; white-space: normal !important; } .layout-desktop #indexPage .itemsContainer .card.portraitCard, .layout-tv #indexPage .itemsContainer .card.portraitCard { flex: 1 0 calc((100% - (0.5rem * 7)) / 8); } .layout-desktop #indexPage .itemsContainer .card.backdropCard, .layout-tv #indexPage .itemsContainer .card.backdropCard { flex: 1 0 calc((100% - (0.5rem * 5)) / 6); } .layout-desktop .mediaInfoStream, .layout-tv .mediaInfoStream { display: inline-block; margin: 0 3em 0 0; vertical-align: top; width: 20%; } .layout-desktop .sectionTitleContainer-cards, .layout-tv .sectionTitleContainer-cards { padding-top: 1em; } @supports (width:max(1px,1px)) { #homeTab .emby-scroller { padding-right: max(env(safe-area-inset-right),0%); } } @supports (width:max(1px,1px)) { .emby-scroller { padding-right: 0; } } @supports (width:max(1px,1px)) { .layout-desktop #favoritesTab .emby-scroller { padding-left: max(env(safe-area-inset-left),0.3%); } } @supports (width:max(1px,1px)) { [dir="ltr"] .padded-right { padding-right: max(env(safe-area-inset-right),1.3%); } } .layout-desktop .page.libraryPage.backdropPage .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-list, .layout-tv .page.libraryPage.backdropPage .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-list { width: 90%; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection, .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection .listItem, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection .listItem { width: calc(93vw - 47vh) !important; max-width: calc(93vw - 47vh) !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .listViewUserDataButtons, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .listViewUserDataButtons { justify-content: end !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .mainDetailButtons.focuscontainer-x { width: 21.25em !important; left: 4em !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemBody.itemAction, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemBody.itemAction { width: 5000em; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .secondary.listItemMediaInfo, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .secondary.listItemMediaInfo { width: 28em; justify-content: center; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container { opacity: 0; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .detailPageWrapperContainer { animation: none; opacity: 1; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible:focus { border: none !important; } .layout-tv #childrenContent .itemsContainer.padded-right.itemsContainer-tv.vertical-list { width: 70vw; } .layout-desktop .itemDetailPage:has(.itemName.parentNameLast) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) #itemBackdrop { height: 3em; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-primary { width: fit-content; min-width: 7em; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .infoWrapper, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .infoWrapper { display: inline-flex; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-secondary, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-secondary { position: absolute; top: 37em; pointer-events: all; left: 26.7em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle { animation: none !important; opacity: 1 !important; top: 42.8em !important; width: 29.4em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks, .layout-tv .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks { animation: none !important; opacity: 1 !important; top: 44em !important; width: 4em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup { width: 41em; left: 1.5em; padding-left: 0; } .layout-tv .trackselections { animation: none; opacity: 1; } .itemBackdrop { height: 0vh; } .detailPageWrapperContainer { min-height: 100vh; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"], .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"] { color: rgb(var(--accent)) !important; font-weight: 800; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover, .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover { color: #fff !important; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .cardText.cardTextCentered.cardText-secondary, .layout-tv #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .cardText.cardTextCentered.cardText-secondary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+19), .layout-tv #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+19) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+19), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+19) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+19), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+19) { display: revert !important; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x { width: 96.25vw; display: flex; justify-content: space-evenly; padding-left: 0.75em; gap: 1em; } .layout-desktop #indexPage .overflowPortraitCard, .layout-tv #indexPage .overflowPortraitCard { width: 16vw; } .layout-desktop #indexPage .overflowSquareCard, .layout-tv #indexPage .overflowSquareCard { width: 16vw; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button { width: 100%; padding: 0.25em; justify-content: center; border-radius: var(--rounding) !important; margin: 0; background: rgb(var(--tint2)); font-weight: 700; } .layout-desktop .itemDetailsGroup, .layout-tv .itemDetailsGroup { margin-top: 1em; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator { opacity: 0; } /* --- Episode Page --- */ .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop, .layout-desktop .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop, .layout-tv .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop { height: 0em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop { height: 3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemDetailsGroup { position: fixed; top: 47.2em; left: 1em !important; width: 29.4em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x { text-align: left; width: 34em !important; margin-left: 3em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label { text-align: center; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { left: 60.7vh; top: 1.8em; height: 1.6em; max-width: 84vh; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailLogo { top: 3.3em; width: 33.75em; height: 6em; transition: width 0.2s ease-in-out; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv #itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x { top: 5.94em !important; width: 23.538em; padding-top: 18.011em; padding-bottom: 0.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before { width: 24.688em; padding-top: 18.26em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.backdropCard { top: 12.3em !important; width: 26.54em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button { margin-left: 0em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper .nameContainer .itemName.infoText.subtitle.focuscontainer-x { top: 8.4em; left: 4.3575em; width: 23.24em; font-weight: 600; font-size: revert; } .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .infoWrapper .nameContainer .parentName.focuscontainer-x { width: 18.3em; font-weight: 600; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { top: 36em !important; width: 26.45em !important; left: 4.3em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .overview.detail-clamp-text { margin-bottom: 0; padding-top: 0.4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .trackSelections { top: 43.3em !important; width: 38em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x { width: 32.6em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailRibbon, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailRibbon { padding-left: 40.5em; height: 4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPagePrimaryContent, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPageContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPagePrimaryContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPageContent { padding-left: 33.2em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.originalTitle { width: 26.7em !important; margin-top: -10em !important; left: 4.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailSectionContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailSectionContent { width: 54vw !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard { top: 14.5em !important; width: 19em; left: 12em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: .2em !important; } .layout-desktop .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem, .layout-tv .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem { margin: 0; font-size: 110%; margin-top: -0.3em; margin-bottom: 1em; margin-right: 0.5em; padding-top: 0.1em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; top: 30.725em !important; height: unset !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1 !important; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x { width: 16.75em; left: 11.15em; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before { width: 17.55em; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .mainDetailButtons.focuscontainer-x { width: 17.93em !important; left: 3.92em !important; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before { width: 17.67em !important; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x { width: 15.6em; left: 11.55em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemName.infoText.subtitle, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .itemName.infoText.subtitle { width: 12.516em; top: 4.15em; } .layout-desktop .collectionItems, .layout-tv .collectionItems { width: 94vh !important; pointer-events: all; top: 0; position: absolute; max-height: 50vh; overflow-y: scroll; } .layout-desktop .itemDetailPage:has(.collectionItems) .overview.detail-clamp-text { } .layout-desktop .cardImageContainer .language-overlay-container, .layout-tv .cardImageContainer .language-overlay-container { max-width: 2em; margin-bottom: 0.125em; } .layout-desktop .cardImageContainer .genre-overlay-container, .layout-tv .cardImageContainer .genre-overlay-container { margin-right: 1em; opacity: 0; gap: 0.15em; transition: opacity 0.5s ease-in-out; top: unset; bottom: 0.55em; transition-delay: 0.5s; } .layout-desktop #itemDetailPage .detailImageContainer .genre-overlay-container, .layout-tv #itemDetailPage .detailImageContainer .genre-overlay-container, .layout-desktop #itemDetailPage .nextUpSection .genre-overlay-container, .layout-tv #itemDetailPage .nextUpSection .genre-overlay-container { display: none !important; } .layout-desktop .card:hover .genre-overlay-container, .layout-tv .card:hover .genre-overlay-container { opacity: 1; } .layout-desktop .cardImageContainer .quality-overlay-container, .layout-tv .cardImageContainer .quality-overlay-container { } .layout-desktop .genre-tag, .layout-tv .genre-tag { display: flex; align-items: center; justify-content: center; height: auto; width: auto; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); overflow: hidden; background: rgba(var(--tint), 0.8); color: #E0E0E0; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: none; max-height: 1em; max-width: fit-content; padding: 0.2em; } .layout-desktop .genre-tag .material-symbols-outlined, .layout-tv .genre-tag .material-symbols-outlined { line-height: 1; } .layout-desktop .genre-tag .genre-text, .layout-tv .genre-tag .genre-text { display: none; white-space: nowrap; font-weight: 500; margin-left: 6px; margin-right: 10px; text-transform: capitalize; font-size: 0.75em; } .layout-desktop .quality-overlay-label, .layout-tv .quality-overlay-label { font-size: 0.75em; } .trackSelections .selectLabel { font-size: 0 !important; position: relative; } .trackSelections .selectLabel::before { font-size: 1.9vh; line-height: 2.5vh; } .layout-desktop.trackSelections .selectLabel::before, .layout-tv .trackSelections .selectLabel::before { font-size: 1vw; line-height: 1vh; } .selectSourceContainer .selectLabel::before { content: "inventory_2"; font-family: "Material Icons"; } .selectVideoContainer .selectLabel::before { content: "videocam"; font-family: "Material Icons"; } .selectAudioContainer .selectLabel::before { content: "audiotrack"; font-family: "Material Icons"; } .selectSubtitlesContainer .selectLabel::before { content: "subtitles"; font-family: "Material Icons"; } .itemDetailsGroup .label { font-size: 0 !important; position: relative; } .itemDetailsGroup .label::before { font-family: "Material Icons"; font-size: 1.9vh; line-height: 2.5vh; } .genresGroup .genresLabel::before { content: "theater_comedy"; } .directorsGroup .directorsLabel::before { content: "movie_creation"; } .writersGroup .writersLabel::before { content: "edit"; } .studiosGroup .studiosLabel::before { content: "apartment"; } .layout-desktop .itemDetailsGroup .detailsGroupItem .focuscontainer-x, .layout-tv .itemDetailsGroup .detailsGroupItem .focuscontainer-x { margin-left: 1.9em; width: 20em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-height: 1.5em; overflow: hidden; font-size: 95%; } .detailPageWrapperContainer { min-height: calc(100vh - 3em) !important; animation: fadeTitle 0.5s ease-out 2s forwards; opacity: 0; } .detailPageWrapperContainer::before { content: ''; position: absolute; animation: fadeTitle 2s ease-out 2.5s forwards; top: 0; left: 0; height: 100%; background: transparent; background-size: auto; background-size: cover; backdrop-filter: var(--backdropBlur); z-index: -1; width: 100vw; height: 100vh; } .detailPageWrapperContainer:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]), .detailPageWrapperContainer:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]), .detailPageWrapperContainer:has(.button-link.itemAction.emby-button[data-type="Season"]) { animation: none !important; opacity: 1; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection { position: absolute !important; top: -15.77em; left: 33.2em; bottom: unset !important; max-width: 54vh !important; color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding) !important; height: 13.3em !important; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container:hover, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection:focus { max-width: calc(94.5vw - 60vh) !important; background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, height 1s ease-out 0.25s !important; border-radius: var(--rounding); } .layout-desktop .infoWrapper, .layout-tv .infoWrapper { -webkit-flex: 1 0 0; flex: 1 0 0; max-width: 76%; min-width: 0; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button, .layout-tv .button-flat.btnPlay.detailButton.emby-button { height: 1.66em; background: rgb(var(--accent)) !important; box-shadow: 0px 0px 13px #432b6f7a; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: rgb(var(--tint2)) !important; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; width: 5.893em; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x { width: 17.3em !important; left: 3.9em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) #listChildrenCollapsible:focus { border: none; margin-top: 0; margin-left: 0; background: transparent !important; } .layout-desktop .itemDetailPage:has(.verticalSection[data-type="MusicAlbum"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.verticalSection[data-type="MusicAlbum"]) #listChildrenCollapsible:focus { border: none; margin-top: 0; margin-left: 0; background: transparent !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailLogo, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailLogo { display: none !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks { top: 47.75em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before { width: 17.8em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard { top: 21.35em; width: 18.6em; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailLogo, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailLogo, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailLogo, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailLogo { top: 80vh; right: 20vw; bottom: unset; left: unset; } .layout-desktop .card:hover .countIndicator, .layout-tv .card:hover .countIndicator { opacity: 0; } .nowPlayingInfoContainerMedia { margin-bottom: 1em; text-align: left; font-size: 1.3em; } .layout-desktop #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons, .layout-tv #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons { margin-top: -4.4em; width: 78.3vw; margin-left: 17vw !important; } .layout-tv #itemDetailPage .itemDetailsGroup .detailsGroupItem .content { margin-left: 1em; } /* 1440p TV resolution */ @media (min-width: 2400px) { .layout-tv body { font-size: 130% !important; } } /* 4k resolution */ @media (min-width: 3000px) { .spotlightiframe { margin-top: -3.5em !important; } } /* 4k TV resolution */ @media (min-width: 3000px) { .layout-tv body { font-size: 173% !important; } .spotlightiframe { margin-top: -3.5em !important; } } .layout-desktop #similarCollapsible .scrollSlider.itemsContainer, .layout-tv #similarCollapsible .scrollSlider.itemsContainer { display: flex !important; flex-wrap: wrap !important; white-space: normal !important; gap: 0.5%; } .layout-desktop #castContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #castContent.scrollSlider.itemsContainer .card:nth-child(n+19), .layout-desktop #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19) { display: none !important; } .layout-desktop #castCollapsible .itemsContainer > .card > .cardBox, .layout-desktop #guestCastCollapsible .itemsContainer > .card > .cardBox, .layout-tv #castCollapsible .itemsContainer > .card > .cardBox, .layout-tv #guestCastCollapsible .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: transparent; border-radius: var(--rounding); } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { position: fixed; top: 0em; right: 0em; width: 5vw; } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { position: fixed; top: 3.32em; right: 0em; width: 18.33em; overflow-y: scroll; max-height: calc(100vh - 0em); height: calc(100vh - 5.5em); padding-top: 1em; padding-bottom: 3em; z-index: 0; } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container::before, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding::before { content: ''; position: fixed; top: 0; right: 0; width: 8.1em; height: 100vh; background: linear-gradient(90deg, rgb(6.667% 5.49% 11.765% / 0) 0%, rgb(6.667% 5.49% 11.765% / 0.0728076171875) 6.25%, rgb(6.667% 5.49% 11.765% / 0.132421875) 12.5%, rgb(6.667% 5.49% 11.765% / 0.1805419921875) 18.75%, rgb(6.667% 5.49% 11.765% / 0.21875) 25%, rgb(6.667% 5.49% 11.765% / 0.2485107421875) 31.25%, rgb(6.667% 5.49% 11.765% / 0.271171875) 37.5%, rgb(6.667% 5.49% 11.765% / 0.2879638671875) 43.75%, rgb(6.667% 5.49% 11.765% / 0.3) 50%, rgb(6.667% 5.49% 11.765% / 0.3082763671875) 56.25%, rgb(6.667% 5.49% 11.765% / 0.313671875) 62.5%, rgb(6.667% 5.49% 11.765% / 0.3169482421875) 68.75%, rgb(6.667% 5.49% 11.765% / 0.31875000000000003) 75%, rgb(6.667% 5.49% 11.765% / 0.31960449218750003) 81.25%, rgb(6.667% 5.49% 11.765% / 0.319921875) 87.5%, rgb(6.667% 5.49% 11.765% / 0.3199951171875) 93.75%, rgb(6.667% 5.49% 11.765% / 0.32) 100% ); z-index: -1; } .layout-desktop #similarCollapsible .card.overflowPortraitCard, .layout-tv #similarCollapsible .card.overflowPortraitCard, .layout-desktop #similarCollapsible .card.overflowSquareCard, .layout-tv #similarCollapsible .card.overflowSquareCard, .layout-desktop #similarCollapsible .card.overflowBackdropCard, .layout-tv #similarCollapsible .card.overflowBackdropCard { transition: transform 0.1s ease-in-out 0s, margin-bottom 0.1s ease-out 0s; transform: translateX(15%); transform-origin: top right; margin-left: 10.5em; } .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus, .layout-desktop #similarCollapsible .card.overflowSquareCard:hover, .layout-tv #similarCollapsible .card.overflowSquareCard:focus, .layout-desktop #similarCollapsible .card.overflowBackdropCard:hover, .layout-tv #similarCollapsible .card.overflowBackdropCard:focus { transform: translateX(20%) translateY(-6%) scale(1.2); transform-origin: top right; transition: transform 0.2s ease-out 0s, margin-bottom 0.2s ease-out 0s; z-index: 9; margin-bottom: 5%; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #similarCollapsible .card.overflowSquareCard:hover, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #similarCollapsible .card.overflowSquareCard:focus { transform: translateX(20%) translateY(-6%) scale(1.45); transform-origin: top right; transition: transform 0.3s ease-out 0s, margin-bottom 0.3s ease-out 0s; z-index: 9; margin-bottom: 12%; } .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover .cardOverlayButton, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus .cardOverlayButton, .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover .overflowSquareCard, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus .overflowSquareCard { opacity: 0; } .layout-desktop #similarCollapsible .card.overflowPortraitCard .quality-overlay-container, .layout-desktop #similarCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-desktop #listChildrenCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .genre-overlay-container, .layout-tv #similarCollapsible .card.overflowPortraitCard .quality-overlay-container, .layout-tv #similarCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-tv #listChildrenCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .genre-overlay-container { pointer-events: none; opacity: 0; } .layout-desktop #similarCollapsible .sectionTitle, .layout-tv #similarCollapsible .sectionTitle { display: none; } .layout-desktop .personCard .cardScalable, .layout-desktop .personCard .cardImageContainer, .layout-desktop .personCard .cardPadder, .layout-tv .personCard .cardScalable, .layout-tv .personCard .cardImageContainer, .layout-tv .personCard .cardPadder { width: 5em; height: 5em; min-width: 5em; min-height: 5em; margin-left: calc(5.8vw + -8.9vh); } .layout-desktop .personCard .cardImageContainer, .layout-tv .personCard .cardImageContainer { border-radius: 999em !important; overflow: hidden; background-size: cover; background-position: center; } .layout-desktop .personCard .cardOverlayContainer, .layout-tv .personCard .cardOverlayContainer { border-radius: 999em !important; } .layout-desktop .personCard.overflowPortraitCard .cardPadder, .layout-tv .personCard.overflowPortraitCard .cardPadder { padding-top: 0 !important; } .layout-desktop .personCard, .layout-tv .personCard { width: 4vw; margin: 0 0.5vw; } .layout-desktop .personCard .cardText, .layout-tv .personCard .cardText { margin-top: 0.1em; font-size: 90%; } .layout-desktop .personCard .cardText.cardTextCentered.cardText-secondary, .layout-tv .personCard .cardText.cardTextCentered.cardText-secondary { max-height: 1.8em; } .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailPageWrapperContainer, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .trackSelections, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .trackSelections, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemExternalLinks.focuscontainer-x, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemExternalLinks.focuscontainer-x, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemDetailsGroup { animation: none !important; opacity: 1 !important; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols { opacity: 0; transition: opacity 1s ease-out 0.5s; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols.hide { display: block !important; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols:hover, .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols:hover::before { opacity: 1; transition: opacity 0.1s ease-out 0s; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: 15vh; pointer-events: auto; background: transparent; } @media (min-width: 100em) { .libraryPage:not(.noSecondaryNavPage) { padding-top: 4.6em !important; width: 99%; } } .playerStats { background: rgba(var(--tint), 0.8); border-radius: var(--rounding); } .itemsContainer, .scrollSlider, .emby-scroller, .overview { scrollbar-width: none; } .itemsContainer::-webkit-scrollbar, .scrollSlider::-webkit-scrollbar, .emby-scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .mainAnimatedPages, .skinBody { scrollbar-width: auto; } .mainAnimatedPages::-webkit-scrollbar, .skinBody::-webkit-scrollbar { display: block; width: 8px; } .layout-desktop #itemDetailPage:has([data-type="BoxSet"]) .detailSectionContent, .layout-tv #itemDetailPage:has([data-type="BoxSet"]) .detailSectionContent { margin-top: unset; max-height: unset; } .layout-desktop #itemDetailPage:has([data-type="BoxSet"]) .collectionItems, .layout-tv #itemDetailPage:has([data-type="BoxSet"]) .collectionItems { position: relative; max-height: unset; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.backdropCard.card-hoverable.card-withuserdata, .layout-tv .itemsContainer.padded-left.padded-right.itemsContainer-tv.padded-right-withalphapicker.vertical-wrap .card.backdropCard.show-focus.show-animation.card-withuserdata { width: 15.75%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.bannerCard, .layout-tv .itemsContainer.padded-left.padded-right.itemsContainer-tv.padded-right-withalphapicker.vertical-wrap .card.bannerCard { width: 24.15%; } .noBackdropTransparency .detailPagePrimaryContainer, .noBackdropTransparency .detailPageSecondaryContainer { background-color: transparent; } #indexPage h2 { font-size: 1.2em; } #indexPage .cardText.itemAction.textActionButton.emby-button { margin: 0; } .recordingFields { pointer-events: all; } .layout-desktop .remoteControlSection, .layout-tv .remoteControlSection { position: absolute; width: 14%; top: calc(20.5vw + 9vh); left: 2vw; } /* ------ Jellyseerr ------ */ .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section { position: relative; left: calc(59vw + -47vh); top: -40.33em; max-width: 20.2vh; font-size: 75%; transition: max-width 0.2s ease-out 2s, background 1s ease-out 0s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s, max-height 0.2s ease-out 0.15s; max-height: 2.2em; overflow: hidden; border-radius: var(--rounding); } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { background: rgb(var(--tint)); border: 0.5px solid; border-color: #fff3; margin-top: -1px; margin-left: -1px; margin-bottom: -1px; transition: max-width 0.2s ease-out 0.3s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s, max-height 0.2s ease-out 0.25s !important; border-radius: var(--rounding); max-height: 30.6em; overflow: hidden; max-width: 40.4vh; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .card { width: 14.87em; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .cardText, .layout-tv .verticalSection.emby-scroller-container.jellyseerr-details-section { display: none; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .sectionTitle.sectionTitle-cards.focuscontainer-x.padded-right { height: 1.3em; margin-top: 0 !important; padding-top: 0.3em; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .emby-scrollbuttons { padding-top: 0em; } .jellyseerr-icon-on-card { display: none; } .jellyseerr-rating { display: none; } .cardText.cardTextCentered.cardText-secondary.jellyseerr-meta { font-size: 1em; } .layout-desktop .itemDetailPage:has(.streaming-lookup-container) .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { max-width: 34.4vh; } .layout-desktop .padded-bottom-page { padding-bottom: 1.3em !important; } .layout-desktop .jellyseerr-overview { backdrop-filter: blur(20px) brightness(50%); font-size: 83%; border-radius: var(--rounding); height: 40%; width: 66%; top: unset; bottom: 1px; left: 1px; } .je-more-info-modal .modal-container { background: rgba(var(--accent), 0.25); } .je-more-info-modal .je-modal-backdrop-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(var(--tint),1) 100%); } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .verticalSection.jellyseerr-person-discovery-section, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .verticalSection.jellyseerr-person-discovery-section { display: none; } .jellyseerr-media-badge { opacity: 0; } .jellyseerr-overview .content { -webkit-line-clamp: 5; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .focuscontainer-x.itemsContainer.scrollSlider.animatedScrollX { display: flex !important; max-height: 29em; } .layout-desktop .itemDetailPage:not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) :not(:has(#childrenContent .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"][data-isfolder="true"])) :not(:has(#scenesCollapsible .card[data-type="Movie"])) :not(:has(#specialsCollapsible .card[data-type="Video"])) .verticalSection.emby-scroller-container.jellyseerr-details-section { left: 0.6em !important; } .layout-desktop .itemDetailPage:not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) :not(:has(#childrenContent .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"][data-isfolder="true"])) :not(:has(#scenesCollapsible .card[data-type="Movie"])) :not(:has(#specialsCollapsible .card[data-type="Video"])) .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { max-width: 59.9em; } .layout-desktop :has(#listChildrenCollapsible) :not(:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"])) :not(:has(.verticalSection[data-type="MusicAlbum"])) .detailPagePrimaryContent :not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #listChildrenCollapsible, .layout-tv :has(#listChildrenCollapsible) :not(:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"])) :not(:has(.verticalSection[data-type="MusicAlbum"])) .detailPagePrimaryContent :not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) #listChildrenCollapsible { top: 0em; max-width: 45vh; height: fit-content !important; min-height: 16em; max-height: 29.346em; } .layout-desktop body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible, .layout-tv body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible { max-width: 90vh !important; } .layout-desktop .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap { min-height: 15em; max-height: 27.3em; height: min-content; } .layout-desktop body:has(#itemBirthday:not(.hide)) #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv body:has(#itemBirthday:not(.hide)) #childrenContent .itemsContainer.padded-right.vertical-wrap { max-height: fit-content !important; } .layout-desktop .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata, .layout-tv .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.show-focus { width: 8.2em; } .layout-desktop body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible, .layout-tv body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible { top: 15.925em !important; } /* ---- Jellyfin Enhanced TMDB ---- */ .layout-desktop .streaming-lookup-container { position: fixed; top: calc(10em + -9vh); right: 8em; max-width: 13em; z-index: -21; } .layout-desktop .streaming-lookup-container .elsewhere-link-reset { font-size: 1.3vh !important; } .layout-desktop .streaming-lookup-container div[style*= "inline-flex"] { font-size: 1.4vh !important; border: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; white-space: wrap !important; } .layout-desktop .streaming-lookup-container div[style*="flex-wrap: wrap"] { max-height: 12vh; overflow-y: scroll; } .layout-desktop .streaming-lookup-container div[style*="flex-wrap: wrap"] { max-height: 12vh; overflow-y: scroll; } .streaming-lookup-container div[style*="backdrop-filter: blur"] { background: rgba(var(--tint), 0.5) !important; } .layout-desktop .detailSection.tmdb-reviews-section { position: fixed; top: 1.5em; right: 7.5em; } .layout-desktop .tmdb-review-swipe-container { max-height: 31vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5em; max-width: 20em; scroll-snap-type: y mandatory; scroll-padding-top: 0em; } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card { max-height: 15.8em; overflow-y: scroll; scroll-snap-align: start; } .tmdb-review-swipe-container .tmdb-review-card { border-left: 0.3em solid rgba(var(--accent)); background: rgba(var(--tint), 0.96); } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card .tmdb-review-text { line-height: 1.8vh; font-size: 90%; } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card .tmdb-review-content-wrapper { overflow-y: scroll; } /* --------------- MOBILE --------------- */ .layout-mobile .card { } @media (orientation: landscape) { .layout-mobile body { font-size: 3.5vh; } } @media (orientation: portrait) { .layout-mobile body { font-size: 3.5vw; } } .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { } .layout-mobile .trackSelections { max-width: 44em; font-weight: 400; } .layout-mobile .trackSelections .selectContainer .detailTrackSelect { padding-left: 0.5em; text-align: center; padding-right: 0.5em; margin-left: 4%; color: #eee !important; } .layout-mobile p.overview.detail-clamp-text { } .layout-mobile .itemDetailsGroup, .layout-mobile .itemDetailsGroup .detailsGroupItem .emby-button { font-weight: 400; } .layout-mobile .itemDetailsGroup { text-align: center; margin-top: 2em; } .layout-mobile .detailSectionContent, .layout-mobile .detailSection { margin-top: 2em; } .layout-mobile span.homeLibraryText { } .layout-mobile .itemName.infoText.parentNameLast { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } @media (max-width:800x) { .layout-mobile .itemName.infoText.parentNameLast { max-width: 59vw; width: 59vw; } } .layout-mobile .listItemImageButton { background: rgba(0, 0, 0, 0); height: 2em; } .layout-mobile .detailPagePrimaryContainer { background: transparent; padding-left: } .layout-mobile .adminDrawerLogo { border-bottom: none; } @media (orientation: portrait) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: portrait) { .layout-mobile #itemDetailPage .detailLogo { position: absolute; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); display: block; bottom: unset; right: unset; width: 90vw; top: 4em; transform: translateX(-50%); left: 50vw; max-height: 6.7em; } } @media (orientation: portrait) { .itemDetailPage { padding-top: 0 !important; } } @media (orientation: landscape) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: landscape) { .layout-mobile .detailLogo { position: absolute; left: 50vw; top: 12em; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) and (min-width:1000px) and (min-width:800px) { .layout-mobile .detailLogo { position: absolute; left: 61vw; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) { .layout-mobile .detailImageContainer .card { position: absolute !important; top: 20% !important; max-width: 25%; left: 2%; width: 20vw; } .layout-mobile #itemDetailPage .card.backdropCard { width: 50vh; transform: translateY(-50%); max-width: 25vw; margin-top: 0vh; } } .layout-mobile .videoOsdBottom { } @media (orientation: landscape) { .layout-mobile .detailPageContent { padding-left: 25%; padding-right: 0%; } } @media (max-width: 750px) and (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-right: 11vw; } } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-left: 0vw !important; } } .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { padding-top: 1em; } .layout-mobile #homeTab .emby-scroller { padding-left: 0em; } .layout-mobile [dir="ltr"] .padded-left { padding: 0em; left: 0; } @media (orientation: portrait) { .layout-mobile #homeTab .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 768px) and (orientation: landscape) { .portraitCard, .squareCard { width: 12em; } } .layout-mobile .cardOverlayButtonIcon { display: none !important; } .layout-mobile .sectionTitle.sectionTitle-cards { } .layout-mobile .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { } .layout-mobile .headerTabs { -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; -webkit-justify-content: center; justify-content: center; margin-top: -2em; position: relative; } @media (min-width: 70em) { .layout-mobile .headerTabs { margin-top: -4em !important; z-index: -1; } } @media (max-width: 70em) { .layout-mobile .headerTabs { margin-top: -2em !important; z-index: -1; } } .layout-mobile .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; margin-bottom: 0em; } .layout-mobile .mediaInfoItem { justify-content: center; display: flex; max-width: fit-content; } .layout-mobile .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 14vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { justify-content: space-evenly; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 24vw; padding-top: 2em; } } @media (orientation: portrait) { .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; white-space: normal; gap: 1%; width: 86%; } .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 10%; } } @media (orientation: landscape) { .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 0%; margin-left: 3.5%; gap: 1.2%; } } @media (orientation: landscape) and (max-width: 1000px) { .layout-mobile .nameContainer { max-width: 100%; margin-left: 0; } } @media (orientation: landscape) and (max-height: 380px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 25%; padding-top: 1em; } } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-right: 0.5em; margin-left: 10px; } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-top: 0.5em !important; margin-left: 10px; } .layout-mobile .alphaPicker-fixed { top: max(env(safe-area-inset-top),24vh); height: 72vh; } .layout-mobile .alphaPickerButton-vertical { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; text-align: center; width: 7vw; height: 2.7vh; margin-bottom: 0.15vh; } @media (orientation: portrait) { .layout-mobile .detailButton { padding-left: 1em !important; padding-right: 1em !important; } } @media (max-width: 768px) and (orientation: portrait) { .mainDetailButtons.focuscontainer-x { margin-bottom: 0em; margin-top: 0em; } } @media (max-width: 32em) and (orientation: portrait) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0; padding-left: 0em; margin-top: 0.5em; width: 100vw; justify-content: space-evenly; margin-left: 0em; } } @media (min-width: 65em) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0em; margin-top: 4em; } } .layout-mobile .mediaInfoOfficialRating { position: relative; } .layout-mobile .backgroundContainer { background-color: transparent; } .layout-mobile .flex.align-items-center.flex-grow.headerTop { width: 100vw; padding-left: 0; } .layout-mobile [dir="ltr"] .pageTitle { margin: 0; } .layout-mobile .itemMiscInfo, .layout-mobile .itemName, .layout-mobile .mainDetailButtons, .layout-mobile .parentName { justify-content: space-evenly; text-align: center; } .layout-mobile #itemDetailPage .tagline { text-align: center; width: 96vw; } .layout-mobile .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr; } @media (max-width: 100em) { .trackSelections .selectContainer { overflow: hidden; margin-left: 1% !important; margin-right: 1% !important; width: 100%; max-width: 92%; } } @media (max-width: 100em) { .layout-mobile .infoWrapper { position: relative; max-height: fit-content; } } .layout-mobile .detailsGroupItem { display: inline-block; margin: 0 0.5em 1.5em !important; width: 98%; } .layout-mobile .selectArrowContainer { top: 0; } .layout-mobile .subtitleSync { margin-top: 2em; } .layout-mobile #itemDetailPage .itemExternalLinks.focuscontainer-x { gap: 5%; display: flex; font-size: 0 !important; width: 100%; justify-content: center; } .layout-mobile .detailRibbon { background: rgba(32,32,32,0); margin-top: calc(100vh - 28em); } .layout-mobile .detailRibbon.padded-left.padded-right::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: rgb(var(--tint)); background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-mobile [dir="ltr"] .detailPageContent { padding-left: 2vw; } @media (min-width: 30em) and (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 0%; width: 66vw; } } @media (orientation: landscape) and (max-height: 900px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 0%; } } @media (orientation: landscape) { .layout-mobile .itemDetailPage { padding-top: 59vh !important; } } .layout-mobile h1.itemName, .layout-mobile h1.parentName { margin-top: 0em; } @media (orientation:landscape) { .layout-mobile .detailPageSecondaryContainer { padding-top: 1em; } } .layout-mobile .subtitle { margin: .5em .2em .5em .2em; padding-left: 0; } .layout-mobile #itemDetailPage .listViewUserDataButtons { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; } @media (orientation: landscape) { .layout-mobile .detailButton { } } .layout-mobile .detailPagePrimaryContent { padding-top: 0.25em; position: relative; padding-left: 2vw !important; padding-right: 2vw !important; } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContent { padding-left: 2vw !important; padding-right: 2vw !important; } } .layout-mobile [dir="ltr"] .mediaInfoItem { margin: 0 0em 0 0; margin-top: 0.5em; margin-bottom:0.5em; } @media (orientation: portrait) { .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { width: 100vw; margin-left: 0vw; justify-items: center; color: #eee !important; } } @media (orientation: landscape) and (max-width:1400px) { .layout-mobile .detailRibbon { } .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 2%; width: 98%; } .layout-mobile .mainDetailButtons.focuscontainer-x { padding-left: 0; margin-top: 0; } } .layout-mobile .detailPageContent { padding-left: 5%; padding-right: 0; } @media (orientation: landscape){ .layout-mobile .button-flat { } } .layout-mobile .headerLeft { display: -webkit-flex; display: flex; } .layout-mobile .upNextContainer { } .layout-mobile .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { gap: 14%; } @media (orientation: portrait) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 28vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 28vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 42vw; } } @media (orientation: landscape) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 15vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 15vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 30vw; } } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper { box-shadow: 0px 1px 8px rgb(0, 0, 0); background: rgb(var(--tint)); } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .secondary.listItem-overview.listItemBodyText p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.portraitCard { position: absolute; left: 50%; top: 10vh; bottom: unset; right: unset; margin-top: -40vh; width: 20vh; max-width: 50vw; transform: translateX(-50%); } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { position: absolute; left: 1vw; top: -18em; bottom: unset; right: unset; transform: none; width: 98vw; max-width: 98vw; } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.squareCard { position: absolute; top: -21em; bottom: unset; left: 50vw; transform: translateX(-50%); max-width: 98vw; max-height: 32em; width: 20em; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.portraitCard { left: 8vw; top: unset !important; bottom: 23vh; right: unset; transform: none; width: 30vh; max-width: 50vw; } } @media (min-width: 800px) and (min-height: 1000px) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.portraitCard { opacity: 0; } .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 0vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 0vw; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { left: 4vw; bottom: unset; top: -1em !important; margin-top: -40vh; transform: none; width: 44vh; max-width: 50vw; } } .layout-mobile p.overview.detail-clamp-text { color: #fff; font-weight: 400; -webkit-line-clamp: unset; text-align: center; margin-bottom: 2em; } .layout-mobile [dir="ltr"] .infoWrapper { padding: 0vw; max-width: 100%; width: 100%; } .layout-mobile .genre-overlay-container { opacity: 0; } .layout-mobile .quality-overlay-container { opacity: 1; } .layout-mobile .quality-overlay-label { border-radius: var(--rounding); padding: 0.1rem 0.5rem; font-size: 0.6rem; } .layout-mobile .trackSelections .selectContainer .selectLabel { opacity: 0; } @media (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { max-width: 100%; width: 100%; padding: 0; } .layout-mobile .trackSelections.focuscontainer-x { left: 25%; } } .layout-mobile .itemsContainer.padded-right.vertical-wrap { gap: 2%; } .layout-mobile .trackSelections { margin-left: 0; max-width: 100%; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button { width: 22%; background: rgb(var(--accent)) !important; box-shadow: 0px 0px 13px #432b6f7a; margin-left: -0.9em !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: rgb(var(--tint2)) !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } .layout-mobile .detailPagePrimaryContainer { pointer-events: all; } @media (max-width: 1000px) and (max-height: 999px) { .layout-mobile .itemDetailsGroup .label::before, .layout-mobile .trackSelections .selectLabel::before { font-size: 1.3rem; line-height: revert; } } @media (min-width: 1000px) and (min-height: 800px) { .layout-mobile .itemDetailsGroup .label::before, .layout-mobile .trackSelections .selectLabel::before { font-size: 2rem; line-height: revert; } } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile body { font-size: 3vw; } } @media (orientation: landscape) and (min-height: 800px) { .layout-mobile body { font-size: 3.6vh; } } @media (orientation: portrait) { .layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; background: rgb(var(--tint)); border-radius: var(--rounding); transform: translateX(-50%); padding-left: 1em; padding-right: 1em; width: 90vw; max-width: 90vw; } #loginPage .raised { font-weight: 500; width: 90vw; } #loginPage .readOnlyContent .emby-button { width: 90vw; transform: translateX(-50%); margin-left: 50%; margin-right: 50%; margin-top: 1.5em; } } @media (max-width: 999px) and (max-height: 999px) { .layout-mobile a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } } ================================================ FILE: Finimalism12.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&display=swap'); :root { --accent: 91, 194, 255; --backdropBlur: blur(0px); --detailGradient: linear-gradient( 54deg, rgba(var(--tint), 1) 0%, rgba(var(--tint), 0.99996337890625) 6.25%, rgba(var(--tint), 0.9994140625) 12.5%, rgba(var(--tint), 0.99703369140625) 18.75%, rgba(var(--tint), 0.990625) 25%, rgba(var(--tint), 0.97711181640625) 31.25%, rgba(var(--tint), 0.9525390625) 37.5%, rgba(var(--tint), 0.91207275390625) 43.75%, rgba(var(--tint), 0.85) 50%, rgba(var(--tint), 0.78792724609375) 56.25%, rgba(var(--tint), 0.7474609375) 62.5%, rgba(var(--tint), 0.72288818359375) 68.75%, rgba(var(--tint), 0.709375) 75%, rgba(var(--tint), 0.70296630859375) 81.25%, rgba(var(--tint), 0.7005859375) 87.5%, rgba(var(--tint), 0.70003662109375) 93.75%, rgba(var(--tint), 0.7) 100%); --loginGradient: linear-gradient( 180deg, rgba(var(--tint), 1) 0%, rgba(var(--tint), 0.99996337890625) 6.25%, rgba(var(--tint), 0.9994140625) 12.5%, rgba(var(--tint), 0.99703369140625) 18.75%, rgba(var(--tint), 0.990625) 25%, rgba(var(--tint), 0.97711181640625) 31.25%, rgba(var(--tint), 0.9525390625) 37.5%, rgba(var(--tint), 0.91207275390625) 43.75%, rgba(var(--tint), 0.85) 50%, rgba(var(--tint), 0.78792724609375) 56.25%, rgba(var(--tint), 0.7474609375) 62.5%, rgba(var(--tint), 0.72288818359375) 68.75%, rgba(var(--tint), 0.709375) 75%, rgba(var(--tint), 0.70296630859375) 81.25%, rgba(var(--tint), 0.7005859375) 87.5%, rgba(var(--tint), 0.70003662109375) 93.75%, rgba(var(--tint), 0.7) 100%); --tint: 3, 16, 41; --tint2: 16, 60, 143; --rounding: 0.8em; } body { font-family: "Geom", sans-serif; font-size: 1.8vh; } html { color: #fff; color: rgba(255, 255, 255, 1); } .backgroundContainer, .preload { background-color: rgb(var(--tint)); } .itemsContainer { opacity: 0; animation: fadeTitle 0.3s ease-out 0s forwards; } .mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3, .mdl-spinner__layer-4 { border-color: rgb(var(--accent)); } .sections.homeSectionsContainer::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgb(var(--tint)); background-size: cover; opacity: 0; z-index: -1; background-attachment: fixed; pointer-events: none; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(var(--tint), 0.86); background-size: cover; z-index: -1; background-attachment: fixed; } .detailPagePrimaryContainer { position: relative; z-index: 2; pointer-events: none; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 4em); background: ; background-size: cover; opacity: 1; z-index: -1; margin-top: -4em; } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: ; background-size: cover; opacity: 1; z-index: -1; } .headerTop { padding: 0.95em; } h2 { } h1 { font-size: 1.3em; } .textActionButton { transition: color 0.3s, font-weight 0.3s; } .textActionButton:hover { -webkit-text-decoration: none; text-decoration: none; color: rgb(var(--accent)); } .cardText-secondary, .fieldDescription, .guide-programNameCaret, .listItem .secondary, .nowPlayingBarSecondaryText, .programSecondaryTitle, .secondaryText { color: rgba(255, 255, 255, 0.75); } .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { background: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); right: 0; left: 0; top: 0; bottom: 0; margin: 0; } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { padding-left: max(env(safe-area-inset-left),3.7%); padding-right: 7.5%; padding-right: max(env(safe-area-inset-right),3.5%); } } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x { transition: color 0.3s; } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:hover, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:focus { color: rgb(var(--accent)); } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x .button-link:hover, .layout-tv #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x .button-link:hover { text-decoration: none !important; } .layout-desktop p.overview, .layout-tv p.overview { color: #fff; font-weight: 500; padding-top: 0.4em; margin-bottom: 0; transition: width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s, border-radius 1s ease-out 1s; border-radius: var(--rounding) !important; } .layout-desktop p.overview.detail-clamp-text, .layout-tv p.overview.detail-clamp-text { margin-top: 0.5em; margin-bottom: -1em; padding-top: 0; padding-left: 0em; border-radius: 0 !important; } .layout-desktop .itemDetailPage:has(.card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"]) p.overview:hover, .layout-tv .itemDetailPage:has(.card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"]) p.overview:focus { } .layout-desktop p.overview:hover, .layout-tv p.overview:focus { } .layout-desktop .emby-tabs-slider { opacity: 0; transition: opacity 2s ease-out 2s; } .layout-desktop .emby-tabs-slider:hover { opacity: 1; transition: opacity 0.3s ease-out 0s; } .layout-desktop .overview-expand.emby-button, .layout-tv .overview-expand.emby-button { opacity: 0; pointer-events: none; } @media (min-width: 75em) { .portraitCard { width: 11%; } } @media (min-width: 43.75em) { .portraitCard, .squareCard { width: 24%; } } @media (min-width: 50em) { .portraitCard { width: 13.5vw; } } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailSectionContent, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailSectionContent { max-height: unset; margin-top: 0; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) p.overview.detail-clamp-text { -webkit-line-clamp: unset; display: block; overflow: scroll; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible { } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right.vertical-wrap { height: unset; } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer, .layout-mobile .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .detailPageWrapperContainer { animation: none !important; opacity: 1 !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text { width: calc(90vw - 60vh); transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 0s, padding-right 0s ease-out 1s; max-height: 5em !important; overflow-y: scroll !important; } #itemDetailPage .tagline { font-weight: 600; } .quality-overlay-container { opacity: 0; transition: opacity 0.3s; transition-delay: opacity 0.5s; } .card:hover .quality-overlay-container { opacity: 1; transition-delay: 0s; } .layout-desktop #itemDetailPage .tagline, .layout-tv #itemDetailPage .tagline { margin-top: 0em; margin-bottom: 0em; min-height: 1.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; width: calc(93vw - 60vh); } .detailImageContainer:has(.cardImageIcon.material-icons.person) { animation: none !important; opacity: 1 !important; } .mdl-slider::-webkit-slider-thumb, .mdl-slider .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-moz-range-thumb, .mdl-slider .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-ms-thumb, .mdl-slider .mdl-slider::-ms-thumb { background: rgb(var(--accent)) !important; border: none !important; } .mdl-slider .mdl-slider-background-lower[style] { background: rgb(var(--accent)) !important; background-color: rgb(var(--accent)) !important; } .mdl-slider-background-flex { background: hsla(0,0%,100%,.3); border: 0; display: -webkit-flex; display: flex; height: .2em; margin-top: -.1em; overflow: hidden; padding: 0; padding-top: 0px; padding-bottom: 0px; top: 50%; width: 100%; height: 0.75em; padding-bottom: 0em; padding-top: 0em; margin-top: -0.44em; border-radius: var(--rounding); } .mdl-slider { font-size: 0.5em; width: 100%; color: transparent; margin-left: 0em; margin-top: -0.2em; border-top-left-radius: 0em; border-top-right-radius: var(--rounding); border-bottom-left-radius: 0em; border-bottom-right-radius: var(--rounding); } .sliderMarker.watched { background-color: #fff; height: 0.75em; z-index: 1; } .sliderMarker.unwatched { background-color: hsla(0,0%,100%,.3); height: 0.75em; } #pause-screen-progress-bar > span { display: block; height: 100%; width: 0%; background: rgb(var(--accent)); } .layout-desktop .itemName.infoText.parentNameLast, .layout-tv .itemName.infoText.parentNameLast { text-align: center; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; } :root {--selection: 170, 95, 200;} .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0); } .backgroundProgress > div { background-color: #7b7b7b; } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(120, 120, 120, 0.6); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: white; } .raised, .fab, a[data-role="button"] { background: rgb(var(--tint)); transition: all 0.2s !important; border: 1px solid white; font-weight: 900; } .raised:hover, .fab:hover, .navMenuOption:hover, .actionSheetMenuItem:hover { background: rgba(80, 80, 80, 0.8) !important; color: #fff !important; } .paper-icon-button-light:hover { background-color: rgba(0, 0, 0, 0) !important; } .defaultCardBackground1 { background-color: rgb(var(--tint2)); } .defaultCardBackground2 { background-color: rgb(var(--tint2)); } .defaultCardBackground3 { background-color: rgb(var(--tint2)); } .defaultCardBackground4 { background-color: rgb(var(--tint2)); } .defaultCardBackground5 { background-color: rgb(var(--tint2)); } .countIndicator { box-shadow: none; } .checkboxOutline, .emby-input, .emby-textarea, .emby-select-withcolor { background: rgba(0, 0, 0, 0.2); border: 0.01em solid rgba(255, 255, 255, 0.22); } .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus { background: rgba(0, 0 , 0, 0.4) !important; } .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid rgba(var(--selection), 0.8) !important; } .emby-checkbox:checked + span + .checkboxOutline { background-color: rgba(0, 0 , 0, 0.4) !important; border: 0.01em solid rgba(var(--selection), 0.8) !important; } #loginPage .readOnlyContent, #loginPage form { max-width: fit-content; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; transform: translateX(-50%); padding-left: 1em; padding-right: 1em; width: fit-content; max-width: calc(63.5vw + 32vh); background: rgba(var(--tint2), 0.1); border-radius: var(--rounding); } #loginPage .squareCard { max-width: 11em; min-width: 10em; } #loginPage .card.squareCard.scalableCard.squareCard-scalable { border: 1px solid #58547a; border-radius: var(--rounding); margin: 1em; } #loginPage .cardBox.cardBox-bottompadded { padding: 0 !important; margin: 0 !important; } .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { border-color: rgba(var(--accent)); } #loginPage .raised { font-weight: 500; width: calc(1.5vw + 32vh); } #loginPage .checkboxOutline { border-radius: 999em; } #loginPage .visualLoginForm { margin-bottom: 2em; } #loginPage .readOnlyContent .emby-button { width: calc(1.5vw + 32vh); transform: translateX(-50%); margin-left: 50%; margin-right: 50%; margin-top: 1.5em; } #divUsers.itemsContainer.vertical-wrap.centered { margin-right: 0; width: 100%; } #loginPage form { padding-top: 4em; } #loginPage .sectionTitle{ margin-left: auto !important; margin-right: auto !important; } #loginPage { background: var(--loginGradient) !important; background-size: cover !important; } .layout-desktop .visualLoginForm h1, .layout-tv .visualLoginForm h1 { padding-top: 1em; } #childrenContent .starRatingContainer { display: none; } @media (min-width: 100em) { .portraitCard, .squareCard { width: 11%; } } .layout-desktop .dialogContainer .availableImagesList .card, .layout-tv .dialogContainer .availableImagesList .card { width: 20%; } .layout-desktop .dialogContentInner .card.scalableCard.imageEditorCard, .layout-tv .dialogContentInner .card.scalableCard.imageEditorCard { width: 30%; } @media (max-width: 62.5em) { .layout-desktop .detailPageWrapperContainer, .layout-tv .detailPageWrapperContainer { margin-top: 0em !important; } } @media (orientation: landscape) { .layout-desktop #itemDetailPage { position: relative; } .layout-desktop #itemDetailPage::after, .layout-tv #itemDetailPage::after { content: none; } .layout-desktop .detailLogo, .layout-tv .detailLogo { position: fixed; z-index: 0; left: 4.5em; width: 30vw; height: 30vh; animation: fadeLogo 0.5s 2s ease-out forwards; display: block; transform: translateX(-50%) translateY(-50%); opacity: 1; } .layout-desktop #itemDetailPage:has(.portraitCard) .detailLogo, .layout-tv #itemDetailPage:has(.portraitCard) .detailLogo { top: 80vh; left: 20vw; bottom: unset; } } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailLogo, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .detailLogo { display: none; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo { display: none; } .layout-desktop #itemDetailPage .nameContainer, .layout-tv #itemDetailPage .nameContainer { position: fixed; left: 2.75em; top: 35.78em; width: 22.1em; justify-content: center; text-align: center; height: 3.6em; display: flex; pointer-events: all; flex-direction: row; } .layout-desktop .skinHeader, .layout-tv .skinHeader { position: fixed; top: -0.5em; } @media (orientation: landscape) { .itemDetailPage { padding-top: 0em !important; } } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { position: fixed !important; } .headerTabs.sectionTabs { text-size-adjust: 110%; } .pageTitle { margin-top: auto; margin-bottom: auto; filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } [dir="ltr"] .listItem { padding: .25em .25em .25em .25em; } .docspinner { contain: layout style size; height: 10vh; left: 50%; margin-left: -5vh; margin-top: -5vh; position: fixed; top: 50%; width: 10vh; z-index: 9999999; } .mdl-spinner__circle-clipper .mdl-spinner__circle { width: 200%; border: 0.5em solid white; } .mdlSpinnerActive .mdl-spinner__circleLeft { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; border: 0.5em solid rgb(var(--accent)); } .cardIndicators, .listItemIndicators { top: 0.5em; } .cardBox-bottompadded { } .itemsContainer > .card > .cardBox { margin-right: 0.8em; } .raised.homeLibraryButton { background: rgba(0, 0, 0, 0.35) !important; filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); } .raised.homeLibraryButton:hover { background: rgba(0, 0, 0, 0.5) !important; } .raised.homeLibraryButton:hover {transition: filter 0.2s} .raised.homeLibraryButton {transition: filter 0.2s} .homeLibraryButton { min-width: 9em; margin: 0.4em; } @media all and (max-width: 26em){ .homeLibraryButton { min-width: 35%; width: auto !important; } } .homeLibraryButton { width: auto !important; } .visualCardBox, .cardImageContainer { box-shadow: none; } #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0.2em !important; } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer, .layout-tv #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0em !important; } .backgroundProgress > div { background: rgba(0, 0, 0, 0); } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: rgb(var(--tint)); border-radius: var(--rounding); } .button-flat:hover { background: transparent !important; color: rgb(var(--accent)) !important; } .dashboardSection h3 { margin: .5em .0em .5em .5em; } .dashboardSection .sectionTitleTextButton > .material-icons.material-icons { margin-top: .5em; margin-bottom: .5em; margin-right: .2em; } .listItemIcon { background: #0000 !important; } .listItem-border { border-color: rgba(255, 255, 255, 0) !important; } .formDialogFooter-clear, .formDialogHeader-clear, .innerCardFooterClear { background-color: transparent !important; } .emby-button.show-focus:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 8px, 0.75)); transform: scale(1); } .paper-icon-button-light.show-focus:focus { color: rgb(var(--accent)) !important; } button-flat:hover { color: rgb(var(--accent)) !important; } .raised:hover, .fab:hover, a[data-role="button"]:hover { background: #fff !important; color: #000 !important; font-weight: 800; } .subtitleappearance-preview { background: linear-gradient(140deg,rgba(var(--accent)),#111) !important; } .navMenuOption-selected { color: rgb(var(--accent)); } .mdl-slider-background-lower { background-color: rgb(var(--accent)); } progress::-moz-progress-bar { background-color: rgba(var(--accent),0.75); } progress::-webkit-progress-value { background-color: rgba(var(--accent),0.75); } .taskProgressInner { background: rgba(var(--accent),0.75) !important; } #dashboardPage .playbackProgress > div { background-color: rgba(var(--accent), 0.75) !important; } #dashboardPage .transcodingProgress > div { background-color: rgba(var(--accent), 0.35) !important; } .mdl-slider-background-lower { background-color: rgb(var(--accent)); z-index: 0; border-radius: 5em; padding-right: 0.4vw; } .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)); } .mdl-slider::-ms-thumb { background: rgb(var(--accent)); } .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)); } .mdl-slider-background-flex-container { box-sizing: border-box; padding: 0px 0em; position: absolute; top: 50%; width: 100%; } .iconOsdProgressInner { background: rgb(var(--accent)); } .countIndicator, .playedIndicator { background: rgb(var(--tint2)); } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: rgb(var(--accent)); } .cardOverlayButton-hover .playstatebutton-icon-played { color: #fff; } .material-icons.detailButton-icon.favorite:hover { color: #f00; transition: color 1s; } .material-icons { font-size: 2em; } .cardScalable .cardImageContainer { -webkit-mask-image: linear-gradient(180deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.98) 40%, rgb(0% 0% 0% / 0.9) 60%, rgb(0% 0% 0% / 0.7) 75%, rgb(0% 0% 0% / 0.4) 85%, rgb(0% 0% 0% / 0.25) 93%, rgb(0% 0% 0% / 0) 100% ); } .card:hover .cardScalable .cardImageContainer, .card:focus .cardScalable .cardImageContainer { -webkit-mask-image: none; } .detailImageContainer.hide-mobile .cardImageContainer, .card[data-type="CollectionFolder"] .cardImageContainer, .personCard .cardImageContainer { -webkit-mask-image: none; } .ratingbutton-icon-withrating { color: #ff0060; filter: drop-shadow(0px 0px 5px #ff666669) } .material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating:hover { color: rgb(var(--accent)); transition: color 1s; } #itemDetailPage .button-link { color: inherit; font-weight: 600; transition: color 0.3s; } #itemDetailPage .button-link:hover { color: rgb(var(--accent)) !important; text-decoration: none; } .navMenuOption:hover, .actionSheetMenuItem:hover { background-color: #fff !important; } .emby-checkbox:checked + span + .checkboxOutline, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid #fff !important; } .layout-desktop .mainDetailButtons, .layout-tv .mainDetailButtons { font-size: 1.08em; } .startTimeText, .endTimeText { width: 3.4em; display: block; text-align: center; } .osdTitle { margin-left: 0.5em; } .osdTimeText { } .videoOsdBottom { padding-top: 1em; } .skinHeader-withBackground.osdHeader { height: 5em; } .collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox { background-color: rgb(var(--tint)); } progress { background: rgba(0, 0, 0, 0.5) !important; } .emby-input, .emby-textarea { padding: .4em .55em; } .emby-select { padding: .35em 1.9em .35em .35em; } .selectArrow { margin-top: 1.05em; } .sectionTitleTextButton > .material-icons { margin-bottom: -0.1em; opacity: 0; } .sectionTitle { margin-left: 0em !important; margin-top: 0.5em !important; font-weight: 600; } .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 3%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap, .layout-tv .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { max-width: 93%; padding: 0; gap: 1%; } .layout-desktop #homeTab .emby-scroller, .layout-tv #homeTab .emby-scroller { padding-left: max(env(safe-area-inset-left),0%); } .layout-desktop .sections.homeSectionsContainer, .layout-tv .sections.homeSectionsContainer { padding-left: max(env(safe-area-inset-left),0.5%); } .layout-desktop #homeTab .sectionTitleContainer-cards, .layout-tv #homeTab .sectionTitleContainer-cards { padding-left: 0; } [dir="ltr"] .padded-left { padding-left: 1em; } .card:hover .indicator.videoIndicator { opacity: 0; } .nowPlayingBarCurrentTime { width: 6em; } .osdTextContainer { margin: 0 !important; margin-top: 0.2em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .headerUserButtonRound { border-radius: 50px !important; } .navMenuOptionText { margin-top: 0; } .formDialogHeaderTitle { margin-left: 1em; } .dialogContentInner { padding: .5em 1em 1em; padding-right: 1em; padding-left: 1em; padding-bottom: 6em; } .listItem-indexnumberleft { margin: 1em; } .listItem { padding-left: 1em; } .layout-desktop #itemDetailPage .overflowSquareCard, .layout-tv #itemDetailPage .overflowSquareCard { width: 6.7em; } .layout-desktop #itemDetailPage .overflowBackdropCard, .layout-tv #itemDetailPage .overflowBackdropCard { width: 13.3vw; } .skinHeader { display: -webkit-flex; display: flex; } .cardPadder { background-color: #0000 !important; box-shadow: none !important; } .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 600; padding-top: 0.25em; padding-bottom: 0.25em; line-height: 1.15em; } .layout-desktop .cardText.cardTextCentered.cardText-secondary, .layout-tv .cardText.cardTextCentered.cardText-secondary { padding-top: 0; padding-bottom: 0.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1em; max-height: 2.2em; margin-top: 0em; } .skinHeader-withBackground { background-color: transparent !important; } @media all and (min-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 0em; padding-top: 3.5em !important; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard, .layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard { width: 14.94em; margin-top: -0.3em; } } @media all and (max-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 6em; padding-top: 0.5em !important; } } @media all and (max-width: 100em){ .layout-desktop #indexPage, .layout-tv #indexPage, .layout-desktop #moviesPage, .layout-tv #moviesPage, .layout-desktop #tvRecommendedPage, .layout-tv #tvRecommendedPage, .layout-desktop #musicRecommendedPage, .layout-tv #musicRecommendedPage { margin-top: 2em; padding-top: 0.5em !important; } } .force-scroll { overflow-y: auto; overflow-x: auto; } .raised.homeLibraryButton { box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; border: solid 1px rgba(var(--accent),0) !important; } #homeTab .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x .raised.homeLibraryButton.emby-button .material-icons.homeLibraryIcon { margin-left:0.05em; } @media (min-width: 70em) { .cardOverlayContainer { background-color: rgba(255, 255, 255, 0.05); } } .cardOverlayContainer:hover, .cardOverlayContainer:focus, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff; } .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .cardOverlayContainer { border: solid 1px #fff !important; } .drawer-open { box-shadow: 0px 0px 5px #fff !important; border-right: solid 1px #fff !important; } @supports (backdrop-filter: blur(15px)) { .dialog, .mainDrawer, .toast, .appfooter { backdrop-filter: blur(15px); background-color: rgb(var(--tint)); } .paper-icon-button-light:hover, #itemDetailPage .itemProgressBar, #dashboardPage .backgroundProgress > div { backdrop-filter: blur(0px); } @media all and (max-width: 70em){ .cardOverlayButtonIcon { background-color: rgba(0, 0, 0, 0) !important; } } } .cardOverlayButton-br { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: auto; padding: 0em; gap: 1em; border-radius: 10px; } .cardOverlayButtonIcon { width: 1.1em !important; height: 1.5em !important; display: flex; justify-content: center; align-items: center; } .cardOverlayButton { position: relative; color: #fff; padding: 0.12em; } .cardOverlayContainer > .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3.1em; } .missingIndicator, .unairedIndicator, .detailTable, .primaryImageWrapper > img, .toast, .paperList, .cardContent, .sessionNowPlayingInnerContent, .listItem:hover, .cardImage, .fab, .raised, .multiSelectCheckboxOutline, .itemSelectionPanel, .cardContent-button, .cardContent-shadow, .itemDetailImage, .cardImageContainer, .cardPadder, .listItemImage, .listItemImageButton, .listItemButton, .blurhash-canvas, .dialog, .listItemIcon, .listItem-border, .visualCardBox, .checkboxOutline, .emby-select-withcolor, .chapterThumbTextContainer, .chapterThumbContainer, .chapterThumb, .emby-input, .emby-textarea, .emby-select-withcolor, .nowPlayingPageImage, .upNextDialog-poster-img, .upNextContainer, .cardOverlayButtonIcon, .cardOverlayContainer { border-radius: var(--rounding) !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItemImageButton, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItemImageButton { background: transparent; color: transparent; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItem.listItem-largeImage.listItem-withContentWrapper:hover .paper-icon-button-light[data-action="resume"], .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItem.listItem-largeImage.listItem-withContentWrapper:focus .paper-icon-button-light[data-action="resume"] { background-color: rgba(0, 0, 0, 0.5); color: white; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:hover, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:focus { background-color: rgba(0, 0, 0, 0.86) !important; color: rgb(var(--accent)) !important; } .layout-desktop #itemDetailPage .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast[data-action="link"], .layout-tv #itemDetailPage .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast[data-action="link"] { border-radius: var(--rounding) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; max-width: 100%; width: 100%; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItem, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .listItem { padding: 0; } /*hover zoom*/ .layout-desktop .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus, .layout-desktop .card.portraitCard:hover, .layout-desktop .card.backdropCard:hover, .layout-desktop .card.squareCard:hover { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transform: scale(1.02); transition: transform 1s ease; } .layout-tv .card:focus { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transition: transform 1s ease; } .layout-desktop .homeLibraryButton, .layout-tv .homeLibraryButton { font-weight: 700; border-radius: 0.5em !important; } .layout-desktop .homeLibraryButton:hover, .layout-mobile .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover { filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); background: #fff !important; color: #000 !important; transform: revert; font-weight: 700; } .backdropImage { filter: blur(0px) saturate(100%) contrast(110%) brightness(100%); } .listItem { text-align: center; padding: 10px; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast { transition: box-shadow 0.3s; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .itemProgressBarForeground { border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } .detailsGroupItem.genresGroup, .detailsGroupItem.writersGroup, .itemTags { display: none; } .layout-desktop .detailsGroupItem, .trackSelections .selectContainer, .layout-tv .detailsGroupItem, .trackSelections .selectContainer { display: -webkit-flex; display: flex; } .layout-desktop .trackSelections { position: fixed; left: 2.5em; bottom: 9.381em; width: 21.66em; font-weight: 500; opacity: 0; animation: fadeTracks 0.5s ease-out 1.25s forwards; pointer-events: all; } .layout-tv .trackSelections { position: fixed; left: 2.5em; top: 41.1em; width: 22em; font-weight: 500; opacity: 1; animation: none; } @keyframes fadeTracks { from { opacity: 0; } to { opacity: 1; } } .layout-desktop .trackSelections .selectContainer .detailTrackSelect, .layout-tv .trackSelections .selectContainer .detailTrackSelect { text-overflow: ellipsis; text-align: left; padding-left: 1em; padding-right: 1.5em; font-weight: 600; margin-left: 0.5em; transform: translateX(-5.7%); max-height: 1.5em; font-size: 95%; } .layout-desktop .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .trackSelections.focuscontainer-x .selectSource { margin-left: 2em; } .layout-tv .trackSelections.focuscontainer-x .selectVideo, .layout-tv .trackSelections.focuscontainer-x .selectAudio, .layout-tv .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .trackSelections.focuscontainer-x .selectSource { margin-left: 1em; } #seriesScheduleSection { display: none; } .itemsContainer.padded-left { flex: 1; display: flex; white-space: normal; flex-wrap: wrap; } .layout-desktop #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x, .layout-tv #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x { justify-content: space-evenly; } .itemsContainer.padded-left { flex: 1; } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { width: 19.145em; top: 3.5em; left: 4.3em; min-width: unset; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .layout-desktop .detailImageContainer .card.backdropCard, .layout-tv .detailImageContainer .card.backdropCard { width: 22.975em; top: 24.5em; left: 4.3em; min-width: 265px; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailLogo, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailLogo { display: none; } .itemProgressBar { height: 100%; left: 0; width: 100%; background: rgba(51, 51, 51, 0); position: relative; } .itemProgressBarForeground { background: linear-gradient( 270deg, rgba(var(--accent), 1) 0%, rgba(var(--accent), 0.9) 10%, rgba(var(--accent), 0.8) 20%, rgba(var(--accent), 0.7) 30%, rgba(var(--accent), 0.6) 40%, rgba(var(--accent), 0.5) 50%, rgba(var(--accent), 0.4) 60%, rgba(var(--accent), 0.3) 70%, rgba(var(--accent), 0.2) 80%, rgba(var(--accent), 0.1) 90%, rgba(var(--accent), 0) 100% ); filter: drop-shadow(6px 0px 6px rgba(var(--tint2), 0.9)) !important; } .layout-desktop .detailImageContainer .card.portraitCard:hover, .layout-tv .detailImageContainer .card.portraitCard:focus, .layout-desktop .detailImageContainer .card.backdropCard:hover, .layout-tv .detailImageContainer .card.backdropCard:focus, .layout-desktop .detailImageContainer .card.squareCard:hover, .layout-tv .detailImageContainer .card.squareCard:focus { filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)) !important; transform: none; transition: transform 1s ease; } .layout-desktop #itemDetailPage .card.squareCard, .layout-tv #itemDetailPage .card.squareCard { top: 13em; } .flex.align-items-center.flex-grow.headerTop { padding-bottom: 20px; height: 2.2em; } @media (min-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-3.65em; position:relative; width:100vw; } } @media (max-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-2em; position:relative; } } @media (max-width:85em) { #moviesTab .layout-desktop .headerTop, #moviesTab .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; } } @media (max-width:959px) { .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; margin-top:-1.3em; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button, .layout-tv .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button { max-width: fit-content; } } @media (orientation: landscape) and (max-width:960px) { .headerTabs { margin-top: -4em !important; } } .mainDrawer { background-color: rgba(var(--tint), 0.4); } .layout-desktop .mainDrawer, .layout-tv .mainDrawer { max-width: 14.5vw; } [dir="ltr"] .sidebarHeader { margin-left: 2%; font-weight: 700; text-transform: uppercase; text-align: left; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0.1s; color: black !important; } .navMenuOption { border-radius: var(--rounding) !important; width: 100% !important; margin-left: 0em !important; } [dir="ltr"] .navMenuOption { padding: .75em 0 .75em 1.5em !important; } .navMenuOption:hover .navMenuOptionText { color: black !important; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption, .mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, button.is-emby-button emby-button { background-color: transparent !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { background: #3733531f !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding { display: flex; flex-direction: column; align-items: center; } #myPreferencesMenuPage .sectionTitle { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: fit-content; margin-left: 0 !important; margin-bottom: 1em; border-radius: var(--rounding) !important; background-color: transparent !important; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; text-align: center; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: calc(1.5vw + 32vh); margin-left: 0 !important; margin-bottom: 1em !important; border-radius: var(--rounding) !important; background-color: rgba(var(--tint2), 0.1) !important; transition: background 0.3s ease; display: flex !important; justify-content: center; transition: background-color 0.3s ease-out 0s, box-shadow 0.8s ease-out 0.1s; box-shadow: 0px 0px 5px rgba(var(--tint), 1) !important; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { transition: background-color 0s ease-out 0s, box-shadow 0.3s ease-out 0s; background-color: rgba(var(--tint2), 0.6) !important; transition: background 0.3s ease; display: flex !important; justify-content: center; box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; } @media (min-width: 50em) { .layout-desktop #myPreferencesMenuPage .readOnlyContent, .layout-tv #myPreferencesMenuPage .readOnlyContent { max-width: calc(4.5vw + 32vh); background: rgba(var(--tint2), 0.1); border-radius: var(--rounding); } } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem:hover { background: transparent; box-shadow: none; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-align: center; width: 100%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: white !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:focus .listItemBodyText { color: white !important; } #myPreferencesMenuPage [dir="ltr"] .listItemIcon { margin: 0 .25em 0 0.25em; } .mdl-slider-background-upper { background: rgba(var(--tint)); border-radius: var(--rounding); height: 0.75em !important; opacity: 0.25; } .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards, .layout-tv div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin: 0; padding-top: 0.5em; } #albumsTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; } .alphaPicker-fixed { top: 9em; } [dir="ltr"] .alphaPicker-fixed-right { right: max(env(safe-area-inset-right),0.5em); } } #myPreferencesMenuPage .listItemIcon { margin: 0; } .homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { margin-left: auto; } .emby-scrollbuttons-button > .material-icons { display: block; min-height: 24px; min-width: 24px; margin-top: -0.3em; } .layout-desktop .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard, .layout-tv .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; } .layout-desktop .overflowBackdropCard, .layout-tv .overflowBackdropCard { } .verticalSection .card img { width: 100%; height: auto; } .detailVerticalSection .nextUpItems { margin-top: -5px; } .itemName { padding-top: 0em; } .infoText { max-width: 100%; min-width: 0; text-align: left; } .subtitle { margin: .15em 0 .2em -1em; padding-left: 0em; text-align: center; } @media only screen and (max-width: 426px) { .homePage .section1.verticalSection .sectionTitle-cards { margin-right: -3.5em; margin-left: 10px; } } .homeLibraryButton { margin-left: 1em !important; margin-right: 1em !important; min-width: 7em; } .layout-desktop .alphaPickerButton-vertical, .layout-tv .alphaPickerButton-vertical { width: 3vw; height: 3vh; } .layout-desktop .alphaPickerButton, .layout-tv .alphaPickerButton { padding: .2em .4em; } .layout-desktop .alphaPicker-fixed, .layout-tv .alphaPicker-fixed { top: max(env(safe-area-inset-top),20vh); height: 80vh; } @media (min-width: 62.5em) { [dir="ltr"] .alphaPicker-fixed-right { right: 1em; right: max(env(safe-area-inset-right),1vw); z-index: 99; } } .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper { width: 76%; max-width: 76%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource { margin-left: 3.354em; } .layout-desktop .trackSelections .selectContainer { } @media (max-width: 50em) { .trackSelections .selectContainer { overflow: hidden; } } .programCell { background: transparent !important; } .programCell-active { background: rgba(var(--accent), 0.35) !important; } .programCell-movie { background: transparent !important; } .guideProgramNameText { font-weight: 400; margin: 0; overflow: hidden; text-overflow: ellipsis; } .channelPrograms { white-space: wrap; } .layout-desktop .verticalSection.section2 .card.overflowBackdropCard, .layout-tv .verticalSection.section2 .card.overflowBackdropCard { } .verticalSection.section0 .card[data-type="CollectionFolder"] .cardBox { background: transparent; } .verticalSection.section0 .textActionButton[data-type="CollectionFolder"], .verticalSection.section0 .textActionButton[data-type="UserView"] { display: none; } .layout-desktop .verticalSection-extrabottompadding, .layout-tv .verticalSection-extrabottompadding { margin-bottom: 1.8vh; } .content-primary, .padded-bottom-page, .page, .pageWithAbsoluteTabs .pageTabContent { width: 100%; } .layout-desktop .itemsContainer.vertical-wrap.centered, .layout-tv .itemsContainer.vertical-wrap.centered { width: 96%; margin: 0 auto; margin-right: 2em; } .collectionItems .itemsContainer.padded-left::before { opacity: 0; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: 4.6em; } #childrenContent .listItem-content .listItemBodyText { color: #fff; font-weight: 600; } #childrenContent .listItem-content .secondary.listItemBodyText { color: #ffffffe3; font-weight: 500; justify-content: space-between; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:focus { filter: blur(0px); opacity: 1; } .cardOverlayButtonIcon, .cardOverlayButtonIcon.material-icons { display: flex; filter: drop-shadow(1px -1px 1px rgba(2, 2, 2, 0.8)); } .upNextContainer { background: rgba(var(--tint), 0.86); z-index: 50; } .upNextContainer .raised { background: rgba(var(--accent), 0.41) border: transparent; padding: 0.8em; padding-left: 2em; padding-right: 2em; margin-left: 0; } .upNextContainer .flex.flex-direction-row.upNextDialog-buttons { gap: calc(100% - 18.93em); margin: 0; max-width: 100%; } .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { } .upNextContainer .raised:hover { background: #fff !important; } .raised.raised-mini.btnHide.upNextDialog-button.emby-button:hover { } /*Iskelderon's cleaner Scenes & Specials grid */ @media (min-width:1800px) and (min-height:900px) { #specialsCollapsible .emby-scroller, #musicVideosCollapsible.emby-scroller, #scenesCollapsible.emby-scroller { } #specialsCollapsible .emby-scrollbuttons, #musicVideosCollapsible .emby-scrollbuttons, #scenesCollapsible .emby-scrollbuttons { } #specialsCollapsible .itemsContainer, #musicVideosCollapsible .itemsContainer, #scenesCollapsible .itemsContainer { } #specialsCollapsible .overflowBackdropCard, #musicVideosCollapsible .overflowBackdropCard, #scenesCollapsible .overflowBackdropCard { } } .osdControls { } .css-4yt2of, .css-139vfv2 { background-color: rgb(var(--tint)) color: rgb(255, 255, 255); background-image: none; } .previewListItem:hover { color:black !important; } .skip-button { bottom: 7.52em; right: 7.5em; color: #fff; background: rgba(var(--tint), 0.86); border: 1px solid white; border-radius: 0.8em; padding: 0.5em 1em; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .skip-button:hover, .skip-button:focus { background: #fff; color: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .layout-desktop .skip-button .material-icons.skip_next, .layout-tv .skip-button .material-icons.skip_next { padding-top: 0.2em; } .skip-button-container { bottom: 0; right: -5em; } #myPreferencesMenuPage .sectionTitle { text-decoration: underline; } #myPreferencesPage .readOnlycontent { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem { justify-content: center; overflow: visible; width: 70%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody { overflow: visible; text-overflow: unset; white-space: wrap; padding-right: 0.75em; } .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-mobile #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody, .layout-desktop #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon, .layout-tv #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon, .layout-mobile #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemIcon { transform: translateX(-0.7em); } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-overflow: visible !important; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary { font-weight: 500; text-align: center; filter: drop-shadow(0px 4px 1px #0005); gap: 3%; margin-bottom: 0 !important; font-size: 0.9em; justify-content: space-between; position: absolute; top: 1.8em; left: 47.9vh; margin-top: 0vh; width: calc(50vw - 1vh); max-height: 2.6vh; color: #fff; pointer-events: all; transition: width 0.2s ease-out 1s, background-color 1s ease-out 0s, border-color 0.5s ease-out 0s, padding-left 1s ease-out 0.25s, padding-right 1s ease-out 0.25s; padding-top: 0.4em; border-radius: var(--rounding); background-color: transparent; } .layout-desktop .itemName.originalTitle, .layout-tv .itemName.originalTitle { font-weight: 600; text-align: center; filter: drop-shadow(0px 4px 1px #0005); justify-content: flex-start; width: 61vw; gap: 5%; } .layout-desktop .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 30.3em; left: 3.5em; width: 13.4em; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%); font-weight: 600; } .layout-tv .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 10.3em; left: 19.2em; width: 28.3em !important; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%) translateX(-50%); font-weight: 600; } @media (orientation: portrait) { .itemMiscInfo { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.1em; } } button[is="paper-icon-button-light"].cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.cardOverlayFab-primary[data-action="resume"] { background-color: rgba(0, 0, 0, 0.7); height: 2em; left: 50%; margin-left: -1em; margin-top: -1em; padding: 0; position: absolute; top: 50%; width: 2em; } .first-imageEditor-buttons, .imageEditor-buttons { margin-top: 0em; margin-bottom: 0em; } @media (min-width: 70em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.show-focus.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid #62626287; margin-bottom: 1em; background: rgb(var(--tint)); } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.show-focus.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; padding: 1em !important; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.show-focus:focus { color: #000; padding: 1em; background: #fff !important; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button .emby-button-foreground { background: transparent; font-weight: 500; border-radius: 0.2em; } .headerTabs .emby-tab-button { transition: 0s !important; width: auto; color: #fff; } .layout-tv .emby-tab-button { color: #fff; } #moviesTab .listItem { } #moviesTab .listItemBody.itemAction { } #moviesTab .secondary.listItemMediaInfo { } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #moviesTab .listViewUserDataButtons { justify-content: space-around; } #seriesTab .listItem { } #seriesTab .listItemBody.itemAction { } #seriesTab .secondary.listItemMediaInfo { } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #seriesTab .listViewUserDataButtons { justify-content: space-around; } #episodesTab .listItem { } #episodesTab .listItemBody.itemAction { } #episodesTab .secondary.listItemMediaInfo { } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); justify-content: center !important; display: flex; margin-right: 0; } #episodesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #episodesTab .listViewUserDataButtons { justify-content: space-around; } #genresTab .portraitCard, .squareCard { } } .layout-desktop .headerLeft, .layout-tv .headerLeft { -webkit-flex-grow: 1; flex-grow: 1; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; max-width: fit-content; border-radius: 0.25em; z-index: 90; background: rgba(var(--tint), 0.6); margin-left: 0.1em; } .layout-desktop .headerRight, .layout-tv .headerRight { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; background: rgba(var(--tint), 0.6); color: #000 !important; border-radius: 0.25em; transform: translateY(-11%); transition: 0s; z-index: 90; position: fixed; right: 0.7vw; top: 1em; } .headerSelectedPlayer { max-width: 10em; white-space: nowrap; color: rgb(var(--accent)); } .navMenuOption { -webkit-align-items: center; align-items: center; border-radius: 0em !important; } #displayPreferencesPage .sectionTitle { } .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .card.portraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .countIndicator.indicator { transition: opacity 0.3s ease; } [dir="ltr"] .emby-scrollbuttons { } #castCollapsible .emby-scrollbuttons.padded-right, #similarCollapsible .emby-scrollbuttons.padded-right, #guestCastCollapsible .emby-scrollbuttons.padded-right, #specialsCollapsible .emby-scrollbuttons.padded-right, #musicVideosCollapsible .emby-scrollbuttons.padded-right, #scenesCollapsible .emby-scrollbuttons.padded-right { } .layout-desktop .emby-scrollbuttons.padded-right { transition: opacity 0.3s ease-out 0.5s; padding-top: 1.5em; } .layout-desktop #scenesCollapsible .emby-scrollbuttons.padded-right, .layout-desktop #specialsCollapsible .emby-scrollbuttons.padded-right, .layout-desktop #castCollapsible .emby-scrollbuttons.padded-right, .layout-desktop #guestCastCollapsible .emby-scrollbuttons.padded-right, .layout-desktop #scenesCollapsible .emby-scrollbuttons.padded-right, .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .emby-scrollbuttons.padded-right { padding-top: 1em; } .layout-desktop .emby-scroller-container:hover .emby-scrollbuttons.padded-right { opacity: 1 !important; } .layout-desktop #homeTab .emby-scroller-container { position: relative; overflow: hidden; } .listItemImage { cursor: pointer; } .listItemImage:hover { box-shadow: 0px 0px 350px rgba(var(--accent), 0.1); } .skinHeader { pointer-events: none; } .headerButton, .headerTabs.sectionTabs { pointer-events: all; -webkit-filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX { } .collectionItems { } @media (max-width: 1000px) { .raised.homeLibraryButton { } .raised.homeLibraryButton { justify-content: center; border-radius: 0em !important; border: 1px solid #1d102e94 !important; } .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0.5em; display: grid; grid-template-columns: repeat(2, 1fr); /* 2 column layout */ grid-gap: 1em; } } .layout-desktop #homeTab .emby-scrollbuttons.padded-right, .layout-tv #homeTab .emby-scrollbuttons.padded-right { } #homeTab button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: 2em; } #homeTab button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: -2.1em; } #homeTab button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #homeTab button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="left"] { color: #fff; } #itemDetailPage button[data-direction="right"] { color: #fff; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-tv .cardBox.cardBox-bottompadded { } .layout-desktop .listItemImage-large, .layout-tv .listItemImage-large { } .layout-desktop #itemDetailPage .listItem-content, .layout-tv #itemDetailPage .listItem-content { border-radius: var(--rounding); overflow: hidden; transition: background 0.15s ease-in-out; flex-flow: column; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -ms-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; } .layout-desktop .listItemImage.listItemImage-large, .layout-tv .listItemImage.listItemImage-large { width: 100%; margin: 0; transition: box-shadow 2s ease-in; } .layout-desktop .listItem-overview.listItemBodyText, .layout-tv .listItem-overview.listItemBodyText { height: 5.5em !important; } .layout-desktop #itemDetailPage .listItem, .layout-tv #itemDetailPage .listItem { position: relative; height: -webkit-fit-content; height: -moz-fit-content; overflow: hidden; border-radius: var(--rounding); backdrop-filter: blur(2px) brightness(81%); margin-bottom: 0.5%; box-shadow: 0px 0px 2px rgb(0, 0, 0); background: rgba(var(--tint), 0.6); } .layout-desktop #itemDetailPage .listItem { } .listItem:hover, .listItem:focus { transition: 0.2s; background: rgba(0, 0, 0, 0.34); transform: scale(1.01); } .layout-desktop #itemDetailPage .listItem:hover, .layout-tv #itemDetailPage .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .layout-desktop .listItem[data-mediatype="Audio"], .layout-tv .listItem[data-mediatype="Audio"] { padding: 0.5em 1em; border-radius: var(--rounding) !important; -webkit-border-radius: var(--rounding) !important; -moz-border-radius: var(--rounding) !important; -ms-border-radius: var(--rounding) !important; -o-border-radius: var(--rounding) !important; } .layout-desktop .listItemImageButton, .layout-tv .listItemImageButton { margin: auto; } .layout-desktop .playlistSection .listItemBody.itemAction, .layout-desktop .playlistSection .listItem-bottomoverview.secondary, .layout-tv .playlistSection .listItemBody.itemAction, .layout-tv .playlistSection .listItem-bottomoverview.secondary { z-index: 1; } .layout-desktop .listItem-bottomoverview.secondary, .layout-tv .listItem-bottomoverview.secondary { text-align: justify; } .nowPlayingInfoContainer .nowPlayingInfoControls .infoContainer.flex { } .infoContainer, .sliderContainer { -webkit-filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); } .layout-desktop .trackSelections .selectContainer .selectLabel, .layout-tv .trackSelections .selectContainer .selectLabel { text-align: center; } .layout-desktop #itemDetailPage .itemExternalLinks, .layout-tv #itemDetailPage .itemExternalLinks { display: flex; flex-direction: column; align-items: flex-start; position: fixed; left: 2.9em; transform: translateX(-50%) translateY(-100%); top: 25.25em; z-index: 2; padding: 1em; padding-top: 1em; padding-bottom: 1em; min-height: 17.55em; padding-bottom: 3em; padding-top: 0.5em; opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemExternalLinks, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemExternalLinks { top: 35.75em !important; } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button { background: rgb(var(--tint)); padding: 0.7vh; border-radius: var(--rounding); border-top-right-radius: 0; border-bottom-right-radius: 0; filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.68)); } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button:hover, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button:focus { filter: brightness(110%); } .itemExternalLinks a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="imdb.com"] { font-size: 0; } .itemExternalLinks a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="trakt.tv"] { font-size: 0; } .itemExternalLinks a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="themoviedb.org"] { font-size: 0; } .itemExternalLinks a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="thetvdb.com"] { font-size: 0; } .itemExternalLinks a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="tvmaze.com"] { font-size: 0; } .itemExternalLinks a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="anidb.net"] { font-size: 0; } .itemExternalLinks a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="anilist.co"] { font-size: 0; } .itemExternalLinks a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="kitsu.app"] { font-size: 0; } .itemExternalLinks a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="theaudiodb.com"] { font-size: 0; } .itemExternalLinks a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="music.apple.com"] { font-size: 0; } .itemExternalLinks a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="musicbrainz.org"] { font-size: 0; } .itemExternalLinks a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="myanimelist.net"] { font-size: 0; } .itemExternalLinks a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="kinopoisk.ru"] { font-size: 0; } .itemExternalLinks a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 4vh; height: 2vh; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .itemExternalLinks a[href*="shokoanime.com"] { font-size: 0; } .itemExternalLinks.focuscontainer-x { color: #0002; filter: drop-shadow(-2px 1px 0px #131313c7); } .layout-desktop .mainDetailButtons.focuscontainer-x, .layout-tv .mainDetailButtons.focuscontainer-x { position: fixed; left: 4em; width: 17.266em; justify-content: space-between; top: 13.125em; z-index: -1; border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 15.253em; border-top-left-radius: 0em; padding-bottom: 0.3em !important; pointer-events: all; } .layout-desktop .mainDetailButtons.focuscontainer-x::before, .layout-tv .mainDetailButtons.focuscontainer-x::before { content: ''; position: absolute; left: 0; width: 17.708em; height: 2.557777em; background: rgb(var(--tint)); border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 15.355em; border-top-left-radius: 1em; top: -1.25em; box-shadow: 0px 2px 8px #0005; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; padding-bottom: 0em; } .layout-desktop #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .layout-desktop .cardPadder, .layout-tv .cardPadder { border-radius: unset; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat { margin-right: 0em !important; padding: 0 !important; z-index: 5; border-radius: 0.26em !important; margin-top: 0.5em !important; margin-bottom: 0.5em !important; } /* .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { background: #29264a !important; } */ /* D-E-N-U's title fix */ .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle, .layout-tv .itemName.infoText.parentNameLast { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; filter: drop-shadow(-2px 4px 1px #0005); line-height: 1.1em; font-weight: 600; font-size: 151%; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; font-weight: 700; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText { display: flex !important; font-weight: 500; padding-top: 0.5em; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText { font-weight: 500; margin-top: -0.5em; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; opacity: 0.8; } .layout-desktop .listItem:hover .secondary.listItem-overview.listItemBodyText { opacity: 1 !important; } .layout-desktop .itemName.infoText.originalTitle, .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .parentName.musicParentName.focuscontainer-x { opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .itemName.infoText.parentNameLast, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .itemName.infoText.parentNameLast { margin-top: -0.5em; } @keyframes fadeTitle { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeBackdrop { from { opacity: 0.6; } to { opacity: 1; } } @keyframes fadeLogo { from { opacity: 1; } to { opacity: 0; } } .layout-desktop .itemName.infoText.originalTitle, .layout-tv .itemName.infoText.originalTitle { top: 39.3em; left: 4.3em; width: 19.2em; position: fixed; } .layout-desktop #seriesAirTime, .layout-tv #seriesAirTime { position: fixed; top: 39.92em; left: 4.316em; width: 19.07em; text-align: center; font-weight: 600; } .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle { position: absolute; top: -19em; left: 2.1em; width: 20em; } .layout-desktop .detailsGroupItem.genres.content.focuscontainer-x { } .layout-desktop .itemDetailsGroup .detailsGroupItem, .layout-tv .itemDetailsGroup .detailsGroupItem { font-weight: 400; } .layout-desktop .detailsGroupItem, .layout-tv .detailsGroupItem { max-width: 66vw; } .layout-desktop [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer, .layout-tv [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer { right: 2em; top: 0; } .layout-desktop #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: transform 0s color 0.3s; font-weight: 600; } .layout-tv #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1) translateY(-50%); } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1); } .layout-desktop #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata { } .alphaPickerButton:hover { color: rgba(255, 255, 255, 0.75); } .mainDrawer { } .layout-desktop .subtitleSync, .layout-tv .subtitleSync { position: absolute; width: 100%; margin-top: 4em; } .layout-desktop .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName { position: absolute; left: 9.4em; top: 3em; transform: translateX(-50%); width: 17em; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons { justify-content: space-between; width: 100%; background: transparent; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played { filter: drop-shadow(0px 0px 3px #9f93e4ab); } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"], .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"] { color: #ffffff2e; border-radius: var(--rounding); } /*.dialogContainer .listItem:hover .listItemBody { color: #fff; }*/ .subtitleResults .listItem:hover .listItemBody { color: #fff !important; } .subtitleList .listItem:hover .listItemBody { color: #fff !important; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa !important; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText, .actionSheetScroller .listItem.listItem-button:hover .listItemIcon { color: #000; } .layout-desktop .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened, .layout-tv .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened { min-height: 50vh; max-height: 100vh; } .layout-desktop #songsTab .itemsContainer.vertical-list { } .layout-desktop #songsTab .itemsContainer.vertical-list .listItemBody.itemAction { } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(var(--tint)); z-index: 0; } .layout-desktop .videoPlayerContainer, .layout-tv .videoPlayerContainer { animation: 1240ms ease-in fadeTitle !important; animation-name: fadeTitle !important; animation-duration: 1240ms !important; animation-timing-function: ease-in !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; z-index: -1; } .content-primary { padding-bottom: 5em !important; } .localUsers .cardText-secondary { height: auto; white-space: pre-wrap; } @media (min-width: 70em) { .localUsers .squareCard { } } @media (max-width: 70em) { .localUsers .squareCard { } } @media (min-aspect-ratio: 21/9) and (max-aspect-ratio: 30/9) and (min-width: 3000px) and (max-width: 3440px) { body { } } .sectionTitle.sectionTitle-cards { } #itemDetailPage button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0.5; margin-right: 2.324em; margin-top: 0em; } #itemDetailPage button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0.5; margin-right: 1em; margin-top: 0em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-desktop #itemDetailPage .detailVerticalSection, .layout-tv #itemDetailPage .detailVerticalSection { opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; padding-left: 0.5em; pointer-events: all; bottom: 0em; transition: max-width 0.5s; transition-delay: 0.5s; } .layout-tv #castCollapsible { } .layout-desktop #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection { } .layout-desktop #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage:has(#guestCastCollapsible:not(.hide)) #castCollapsible.verticalSection.detailVerticalSection:focus { } .layout-desktop #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection { } .layout-desktop #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage:has(#guestCastCollapsible.hide) #castCollapsible.verticalSection.detailVerticalSection:focus { } .layout-desktop #itemDetailPage #castCollapsible #peopleHeader.sectionTitle, .layout-tv #itemDetailPage #castCollapsible #peopleHeader.sectionTitle, .layout-desktop #itemDetailPage #guestCastCollapsible #guestCastHeader.sectionTitle, .layout-tv #itemDetailPage #guestCastCollapsible #guestCastHeader.sectionTitle { padding-top: 0.2em; padding-bottom: 0.5em; margin-top: 0 !important; } .layout-desktop #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection, .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection { } .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection { } .layout-desktop #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection:hover, .layout-tv #itemDetailPage #guestCastCollapsible.verticalSection.detailVerticalSection:focus { } .layout-desktop .overview-controls, .layout-tv .overview-controls { display: none; } .layout-desktop #guestCastHeader.sectionTitle.sectionTitle-cards.padded-right, .layout-tv #guestCastHeader.sectionTitle.sectionTitle-cards.padded-right { padding-top: 0 !important; } .layout-desktop #castCollapsible .cardPadder, .layout-tv #castCollapsible .cardPadder, .layout-desktop #guestCastCollapsible .cardPadder, .layout-tv #guestCastCollapsible .cardPadder { pointer-events: none; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { position: relative; } .layout-desktop #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv #specialsCollapsible.verticalSection.detailVerticalSection { } .layout-desktop .itemDetailPage:has(.button-flat.btnShuffle.detailButton.emby-button) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .detailPagePrimaryContent.padded-right:has(.button-flat.btnShuffle.detailButton.emby-button) #specialsCollapsible.verticalSection.detailVerticalSection { } .layout-desktop .itemDetailPage:has(.nextUpSection .card.overflowBackdropCard.card-hoverable) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .itemDetailPage:has(.nextUpSection .card.overflowBackdropCard.show-focus.show-animation.card-withuserdata.itemAction) #specialsCollapsible.verticalSection.detailVerticalSection { } .layout-desktop #specialsCollapsible.verticalSection .card .cardText.cardTextCentered.cardText-secondary, .layout-tv #specialsCollapsible.verticalSection .card .cardText.cardTextCentered.cardText-secondary { } .button-submit:focus { background: rgb(var(--accent)); color: #fff; } .layout-desktop .itemDetailPage:has(#scenesCollapsible #scenesContent .card.itemAction.chapterCard.overflowBackdropCard[data-isfolder="false"]) #specialsCollapsible { } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible.verticalSection.detailVerticalSection.emby-scroller-container, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible.verticalSection.detailVerticalSection { } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible .sectionTitle, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible .sectionTitle, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible .sectionTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible .sectionTitle, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .verticalSection.detailVerticalSection.moreFromSeasonSection .sectionTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .verticalSection.detailVerticalSection.moreFromSeasonSection .sectionTitle, .layout-desktop #scenesCollapsible .sectionTitle, .layout-desktop #specialsCollapsible .sectionTitle { padding-top: 0; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #specialsCollapsible .emby-scrollbuttons.padded-right, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #specialsCollapsible .emby-scrollbuttons.padded-right { margin-top: 0em; } .layout-desktop .nextUpSection.verticalSection.detailVerticalSection, .layout-tv .nextUpSection.verticalSection.detailVerticalSection { } .layout-desktop #listChildrenCollapsible.detailVerticalSection, .layout-tv #listChildrenCollapsible.detailVerticalSection { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #childrenContent .itemsContainer.padded-right.vertical-list { padding-top: 0.3em; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible:hover { background: transparent !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #listChildrenCollapsible #childrenContent .itemsContainer.padded-right { } .layout-desktop .verticalSection.detailVerticalSection.moreFromArtistSection, .layout-tv .verticalSection.detailVerticalSection.moreFromArtistSection { } .layout-desktop .textActionButton, .layout-tv .textActionButton { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.3em; } .layout-desktop #listChildrenCollapsible:hover, .layout-tv #listChildrenCollapsible:focus { } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) #listChildrenCollapsible:focus { border: none !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #listChildrenCollapsible:focus { background: transparent !important; border: none !important; margin-left: 0px; margin-top: 0px; } .layout-desktop #childrenContent .itemsContainer:hover, .layout-tv #childrenContent .itemsContainer:hover { background: ; } .layout-desktop #listChildrenCollapsible .sectionTitle.sectionTitle-cards, .layout-tv #listChildrenCollapsible .sectionTitle.sectionTitle-cards { padding-top: 0em; } .layout-desktop #childrenContent .itemsContainer.cardBox, .layout-tv #childrenContent .itemsContainer.cardBox { margin-left: 0em !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #listChildrenCollapsible { top: 5.81em !important; height: unset !important; max-width: calc(116vw - 89vh) !important; width: calc(104vw - 66.5vh) !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .overview.detail-clamp-text { -webkit-line-clamp: 3; max-height: 5.3em; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; min-height: unset; font-size: 1.1em; } .layout-desktop #specialsCollapsible:hover, .layout-tv #specialsCollapsible:focus, .layout-desktop .verticalSection.detailVerticalSection.moreFromArtistSection:hover, .layout-tv .verticalSection.detailVerticalSection.moreFromArtistSection:focus { } .layout-desktop .itemDetailPage:has(.streaming-lookup-container) #specialsCollapsible:hover, .layout-tv .itemDetailPage:has(.streaming-lookup-container) #specialsCollapsible:focus { max-width: 54vh !important; } .layout-desktop #itemDetailPage .itemDetailsGroup, .layout-tv #itemDetailPage .itemDetailsGroup { opacity: 0; animation: fadeTitle 0.5s ease-out 1.3s forwards; padding-left: 0.5em; pointer-events: all; position: fixed; bottom: 1.5em; left: 2em; width: 25em; } .layout-desktop .detailsGroupItem .content, .layout-tv .detailsGroupItem .content { text-align: left; } .layout-desktop #homeTab .verticalSection.section2.emby-scroller-container, .layout-tv #homeTab .verticalSection.section2 { } @media (min-width: 1000px) { .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap { } .layout-desktop #childrenContent .cardText, .layout-tv #childrenContent .cardText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.show-focus { width: 10.15em; min-width: unset; transition: transform 0.3s ease-out 0.5s; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata:focus { transform: scale(1.05); transition: transform 0.3s ease-out 0s; } .layout-desktop .listItem[data-type="Audio"], .layout-tv .listItem[data-type="Audio"] { width: 99%; } .layout-desktop .playlistSection, .layout-tv .playlistSection { } .layout-desktop .nowPlayingInfoContainer, .layout-tv .nowPlayingInfoContainer { top: 3.32em; left: 1vw; width: 96.7vw; border-radius: var(--rounding); padding: 1em; box-shadow: 0px 2px 12px #000; background: rgb(var(--tint)); } .layout-desktop .playlistSectionButton, .layout-tv .playlistSectionButton { background: none; color: inherit; } .layout-desktop #scenesContent .innerCardFooter, .layout-tv #scenesContent .innerCardFooter { height: 1.6em; width: 100%; display: inline-flex; justify-content: space-between; background: rgb(var(--tint)); border-bottom-left-radius: var(--rounding); border-bottom-right-radius: var(--rounding); } .layout-desktop #scenesCollapsible .itemAction.chapterCard.overflowBackdropCard, .layout-tv #scenesCollapsible .itemAction.chapterCard.overflowBackdropCard { width: 13.3vw; min-width: unset; } .layout-desktop #scenesCollapsible, .layout-tv #scenesCollapsible { } .layout-desktop .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible, .layout-tv .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible { color: #fff; border-radius: var(--rounding) !important; } .layout-desktop .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible:hover, .layout-tv .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) #scenesCollapsible:focus { } .layout-desktop #scenesCollapsible, .layout-tv #scenesCollapsible { color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding) !important; z-index: 1; } .layout-desktop #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #castCollapsible .card.overflowPortraitCard.personCard.show-focus, .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.show-focus { width: 10.3vw; margin: 0; } .layout-desktop #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-tv #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata .cardText.cardTextCentered.cardText-secondary { max-height: 1.7em; } .layout-desktop #scenesCollapsible:hover, .layout-tv #scenesCollapsible:focus { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailSection, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailSection { } .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata { width: 10.3vw; } .layout-desktop #similarCollapsible .card.overflowPortraitCard, .layout-tv #similarCollapsible .card.overflowPortraitCard { } .layout-desktop #similarCollapsible .cardOverlayButton, .layout-tv #similarCollapsible .cardOverlayButton { pointer-events: none; } .layout-desktop #similarCollapsible .cardText, .layout-tv #similarCollapsible .cardText { } @media (max-height: 1200px) { .spotlightiframe { } .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } @media (max-width: 1400px) and (min-height: 870px) { .layout-desktop .headerTabs, .layout-tv .headerTabs { } .layout-desktop .emby-tab-button, .layout-desktop .emby-tab-button { background: transparent; border-radius: 0; box-shadow: none; box-sizing: border-box; cursor: pointer; display: inline-block; -webkit-flex-shrink: 0; flex-shrink: 0; font-family: inherit; font-weight: 600; height: auto; line-height: 1.25; min-width: 0; min-width: auto; outline: none; overflow: hidden; position: relative; vertical-align: middle; width: auto; } } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding { } .layout-desktop .pageTitleWithLogo, .layout-tv .pageTitleWithLogo { background-position: 0; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.95)); } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: rgba(var(--tint), 0.6); padding-bottom: 0.5em; padding-top: 0.5em; border-top-right-radius: 1em; border-top-left-radius: 1em; width: 98vw; margin-left: 1vw; } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction { align-self: baseline; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent { padding-left: 26.25em; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-desktop [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup, .layout-tv [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup { padding-left: 0.5em; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent .detailSectionContent { pointer-events: all; text-align: left; } .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Movie"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Movie"]) #listChildrenCollapsible, .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Series"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Series"]) #listChildrenCollapsible, .layout-desktop .itemDetailPage:has(#childrenContent .verticalSection[data-type="Episode"]) #listChildrenCollapsible, .layout-tv .itemDetailPage:has(#childrenContent .verticalSection[data-type="Episode"]) #listChildrenCollapsible { position: relative !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailSectionContent, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .detailSectionContent { margin-top: 0em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) #castCollapsible, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) #castCollapsible { display: none; } .layout-desktop [dir="ltr"] .detailRibbon, .layout-tv [dir="ltr"] .detailRibbon { padding-left: 32em; background: transparent; } [dir="ltr"] .detailPageContent { padding-left: 26.2em; padding-right: 0%; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered { } @media (min-height: 25.9375em) { [dir="ltr"] .padded-right-withalphapicker { } } @media (min-width: 900px) { .dashboardDocument .mainAnimatedPage:not(.metadataEditorPage) { } } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { height: 4em; margin-top: -4em; position: relative; } .layout-desktop .detailRibbon::before, .layout-tv .detailRibbon::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: transparent; background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.itemsContainer-tv.vertical-list .listItem.itemAction.listItem-button .listItemBody { width: calc(30.5vw + -16vh); min-width: calc(30.5vw + -16vh); background: transparent; border-radius: 0; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage), .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage) { justify-content: space-evenly; width: 100% !important; } .layout-desktop #childrenContent .listItemImage, .layout-tv #childrenContent .listItemImage.listItemImage-large.listItemImage-large-tv { aspect-ratio: unset; background-size: cover; background-position: center; border-radius: 10px; } .layout-desktop #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding.emby-scroller, .layout-tv #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding { width: 100%; overflow: hidden; } [dir="ltr"] .pageTitle { margin: 0em 0.5em 0 0.5em; } .layout-tv #itemDetailPage .emby-button.show-focus:focus { border: solid 1px #fff; background: transparent !important; color: rgb(var(--accent)) !important; padding-left: 0.5em; padding-right: 0.5em; box-shadow: 0px 0px 5px #fff9; } .layout-tv #itemDetailPage .button-flat.btnPlay.detailButton.emby-button.show-focus:focus { border: solid 1px #fff; background: #fff !important; color: rgb(var(--accent)) !important; } .layout-tv .card.show-focus:focus { transform: scale(0.95); transition: transform 0.1s ease; } .layout-tv .card.show-focus:focus .cardImageContainer, .layout-tv .listItem-focusscale:focus { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff !important; } .layout-tv div.itemMiscInfo.itemMiscInfo-primary { margin-top: 0.3em; } .layout-tv .itemDetailPage { padding-top: 3em !important; } .currentTimeText { padding-left: .8em; padding-right: .8em; color: #fff; } .itemsContainer-tv > .portraitCard, .itemsContainer-tv > .squareCard { width: 15%; margin-bottom: 1em; } .listItemImage-large-tv { width: calc(31.3vw + -16vh) !important; height: 22vh !important } .layout-tv .overflowBackdropCard { max-width: 21em; } .layout-tv #itemDetailPage .card.squareCard { top: 22.8em; } .layout-tv #childrenContent .listItemBody { width: 400em; } .layout-desktop .listItem-content, .layout-tv .listItem-content { align-items: center; display: flex; width: 100%; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer { display: inline-flex; white-space: normal; gap: 0.5%; width: calc(100vw - 26.975em); opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; flex-direction: row; flex-wrap: wrap; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap { } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard { } .layout-tv #itemDetailPage .listItem { } .pageTitleWithLogo { width: 6.25em; height: 1.4em; } @media (max-height: 870px) and (min-width: 1000px) { .pageTitleWithLogo { width: 6.5em; height: 1.2em; } } @media (min-width: 1950px) { .pageTitleWithLogo { width: 7.25em; } } @media (min-width: 3000px) { .pageTitleWithLogo { width: 7.65em; } } .layout-desktop #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: 0em !important; } .layout-desktop .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .layout-tv .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--detailGradient); background-size: cover; opacity: 0.6; z-index: -1; background-attachment: fixed; pointer-events: none; animation: fadeBackdrop 1s ease-out 2s forwards; } .layout-mobile .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--detailGradient); background-size: cover; opacity: 0.6; z-index: 0; background-attachment: fixed; pointer-events: none; animation: fadeBackdrop 1s ease-out 2s forwards; } .mainAnimatedPages:has(.nextUpSection) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.nextUpSection) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { animation: fadeBackdrop 1s ease-out 2s forwards !important; opacity: 0.6; } .mainAnimatedPages:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .mainAnimatedPages:has(.button-link.itemAction.emby-button[data-type="Season"]) .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { animation: none !important; opacity: 1; } .layout-desktop #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first, .layout-tv #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .layout-desktop .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x, .layout-tv .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { padding-right: max(env(safe-area-inset-right),3.3%); width: 98vw; } .paper-icon-button-light[data-action="resume"]:hover { background-color: rgba(0, 0, 0, 0.86) !important; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker { max-width: 96vw; } .layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-desktop #indexPage .itemsContainer .card.overflowSquareCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowSquareCard.card-hoverable.card-withuserdata, .layout-tv #indexPage .itemsContainer .card.overflowBackdropCard, .layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard, .layout-tv #indexPage .itemsContainer .card.overflowSquareCard, .layout-desktop #indexPage .itemsContainer .card.overflowSquareCard { width: 16vw; } .layout-desktop .card.overflowBackdropCard .cardOverlayButton-br .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.emby-button.playstatebutton-played, .layout-tv .card.overflowBackdropCard .cardOverlayButton-br .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.emby-button.playstatebutton-played { padding-top: 0.3vh; } .layout-tv .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX.itemsContainer-tv { } #indexPage button[data-direction="left"], #indexPage button[data-direction="right"] { opacity: 0; } .layout-desktop #indexPage .itemsContainer, .layout-tv #indexPage .itemsContainer { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem; padding: 0; margin: 0; overflow: visible !important; white-space: normal !important; } .layout-desktop #indexPage .itemsContainer .card.portraitCard, .layout-tv #indexPage .itemsContainer .card.portraitCard { flex: 1 0 calc((100% - (0.5rem * 7)) / 8); } .layout-desktop #indexPage .itemsContainer .card.backdropCard, .layout-tv #indexPage .itemsContainer .card.backdropCard { flex: 1 0 calc((100% - (0.5rem * 5)) / 6); } .layout-desktop .mediaInfoStream, .layout-tv .mediaInfoStream { display: inline-block; margin: 0 3em 0 0; vertical-align: top; width: 20%; } .layout-desktop .sectionTitleContainer-cards, .layout-tv .sectionTitleContainer-cards { padding-top: 1em; } @supports (width:max(1px,1px)) { #homeTab .emby-scroller { padding-right: max(env(safe-area-inset-right),0%); } } @supports (width:max(1px,1px)) { .emby-scroller { padding-right: 0; } } @supports (width:max(1px,1px)) { .layout-desktop #favoritesTab .emby-scroller { padding-left: max(env(safe-area-inset-left),0.3%); } } @supports (width:max(1px,1px)) { [dir="ltr"] .padded-right { padding-right: max(env(safe-area-inset-right),1.3%); } } .layout-desktop .page.libraryPage.backdropPage .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-list, .layout-tv .page.libraryPage.backdropPage .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-list { width: 90%; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection, .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection .listItem, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible.verticalSection.detailVerticalSection .listItem { width: calc(93vw - 47vh) !important; max-width: calc(93vw - 47vh) !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .listViewUserDataButtons, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .listViewUserDataButtons { justify-content: end !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .mainDetailButtons.focuscontainer-x { width: 21.25em !important; left: 4em !important; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemBody.itemAction, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemBody.itemAction { width: 5000em; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .secondary.listItemMediaInfo, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .secondary.listItemMediaInfo { width: 28em; justify-content: center; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible .listItemImage.itemAction[data-action="playallfromhere"] .genre-overlay-container { opacity: 0; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) .detailPageWrapperContainer { animation: none; opacity: 1; } .layout-desktop .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.button-flat.btnPlaystate.detailButton.emby-button[data-type="Playlist"]) #listChildrenCollapsible:focus { border: none !important; } .layout-tv #childrenContent .itemsContainer.padded-right.itemsContainer-tv.vertical-list { width: 70vw; } .layout-desktop .itemDetailPage:has(.itemName.parentNameLast) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) #itemBackdrop { height: 3em; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-primary { width: fit-content; min-width: 7em; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .infoWrapper, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .infoWrapper { display: inline-flex; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-secondary, .layout-tv .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-secondary { position: absolute; top: 3.5em; pointer-events: all; left: 26.7em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle { animation: none !important; opacity: 1 !important; top: 42.8em !important; width: 29.4em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks, .layout-tv .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks { animation: none !important; opacity: 1 !important; top: 44em !important; width: 4em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup { width: 41em; left: 1.5em; padding-left: 0; } .layout-tv .trackselections { animation: none; opacity: 1; } .itemBackdrop { height: 0vh; } .detailPageWrapperContainer { min-height: 100vh; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"], .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"] { color: rgb(var(--accent)) !important; font-weight: 800; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover, .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover { color: #fff !important; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .cardText.cardTextCentered.cardText-secondary, .layout-tv #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .cardText.cardTextCentered.cardText-secondary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+19), .layout-tv #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+19) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+19), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+19) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+19), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+19) { display: revert !important; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x { width: 96.25vw; display: flex; justify-content: space-evenly; padding-left: 0.75em; gap: 1em; } .layout-desktop #indexPage .overflowPortraitCard, .layout-tv #indexPage .overflowPortraitCard { width: 16vw; } .layout-desktop #indexPage .overflowSquareCard, .layout-tv #indexPage .overflowSquareCard { width: 16vw; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button { width: 100%; padding: 0.25em; justify-content: center; border-radius: var(--rounding) !important; margin: 0; background: rgb(var(--tint2)); font-weight: 700; } .layout-desktop .itemDetailsGroup, .layout-tv .itemDetailsGroup { margin-top: 1em; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator { opacity: 0; } /* --- Episode Page --- */ .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop, .layout-desktop .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop, .layout-tv .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop { height: 0em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop { height: 3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemDetailsGroup { position: fixed; top: 47em; left: 1em !important; width: 29.4em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x { text-align: left; width: 34em !important; margin-left: 3em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label { text-align: center; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { left: 60.7vh; top: 1.8em; height: 1.6em; max-width: 84vh; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailLogo { top: 3.3em; width: 33.75em; height: 6em; transition: width 0.2s ease-in-out; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv #itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x { top: 5.94em !important; width: 23.538em; padding-top: 18.011em; padding-bottom: 0.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before { width: 24.688em; padding-top: 18.26em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.backdropCard { top: 12.3em !important; width: 26.54em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button { margin-left: 0em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper .nameContainer .itemName.infoText.subtitle.focuscontainer-x { top: 8.4em; left: 4.3575em; width: 23.24em; font-weight: 600; font-size: revert; } .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .infoWrapper .nameContainer .parentName.focuscontainer-x { width: 18.3em; font-weight: 600; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { top: 36em !important; width: 26.45em !important; left: 4.3em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .overview.detail-clamp-text { margin-bottom: 0; padding-top: 0.4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .trackSelections { top: 43.3em !important; width: 38em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x { width: 32.6em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailRibbon, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailRibbon { padding-left: 40.5em; height: 4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPagePrimaryContent, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPageContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPagePrimaryContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPageContent { padding-left: 33.2em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.originalTitle { width: 26.7em !important; margin-top: -10em !important; left: 4.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailSectionContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailSectionContent { width: 54vw !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard { top: 11.6em !important; width: 15.7em; left: 9.9em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: .2em !important; } .layout-desktop .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem, .layout-tv .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem { margin: 0; font-size: 110%; margin-top: -0.3em; margin-bottom: 1em; margin-right: 0.5em; padding-top: 0.1em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; top: 30.725em !important; height: unset !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1 !important; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x { width: 16.75em; left: 7.75em; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before { width: 17.55em; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .mainDetailButtons.focuscontainer-x { width: 17.93em !important; left: 3.92em !important; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before { width: 17.67em !important; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x { width: 15.6em; left: 8.25em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemName.infoText.subtitle, .layout-tv .itemDetailPage:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]) .itemName.infoText.subtitle { width: 12.516em; top: 4.15em; } .layout-desktop .collectionItems, .layout-tv .collectionItems { pointer-events: all; } .layout-desktop .itemDetailPage:has(.collectionItems) .overview.detail-clamp-text { } .layout-desktop .cardImageContainer .language-overlay-container, .layout-tv .cardImageContainer .language-overlay-container { max-width: 2em; margin-bottom: 0.125em; } .layout-desktop .cardImageContainer .genre-overlay-container, .layout-tv .cardImageContainer .genre-overlay-container { margin-right: 1em; opacity: 0; gap: 0.15em; transition: opacity 0.5s ease-in-out; top: unset; bottom: 0.55em; transition-delay: 0.5s; } .layout-desktop #itemDetailPage .detailImageContainer .genre-overlay-container, .layout-tv #itemDetailPage .detailImageContainer .genre-overlay-container, .layout-desktop #itemDetailPage .nextUpSection .genre-overlay-container, .layout-tv #itemDetailPage .nextUpSection .genre-overlay-container { display: none !important; } .layout-desktop .card:hover .genre-overlay-container, .layout-tv .card:hover .genre-overlay-container { opacity: 1; } .layout-desktop .cardImageContainer .quality-overlay-container, .layout-tv .cardImageContainer .quality-overlay-container { } .layout-desktop .genre-tag, .layout-tv .genre-tag { display: flex; align-items: center; justify-content: center; height: auto; width: auto; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); overflow: hidden; background: rgba(var(--tint), 0.8); color: #E0E0E0; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: none; max-height: 1em; max-width: fit-content; padding: 0.2em; } .layout-desktop .genre-tag .material-symbols-outlined, .layout-tv .genre-tag .material-symbols-outlined { line-height: 1; } .layout-desktop .genre-tag .genre-text, .layout-tv .genre-tag .genre-text { display: none; white-space: nowrap; font-weight: 500; margin-left: 6px; margin-right: 10px; text-transform: capitalize; font-size: 0.75em; } .layout-desktop .quality-overlay-label, .layout-tv .quality-overlay-label { font-size: 0.75em; } .trackSelections .selectLabel { font-size: 0 !important; position: relative; } .trackSelections .selectLabel::before { font-size: 1.9vh; line-height: 2.5vh; } .layout-desktop.trackSelections .selectLabel::before { font-size: 1vw; line-height: 1vh; } .selectSourceContainer .selectLabel::before { content: "inventory_2"; font-family: "Material Icons"; } .selectVideoContainer .selectLabel::before { content: "videocam"; font-family: "Material Icons"; } .selectAudioContainer .selectLabel::before { content: "audiotrack"; font-family: "Material Icons"; } .selectSubtitlesContainer .selectLabel::before { content: "subtitles"; font-family: "Material Icons"; } .itemDetailsGroup .label { font-size: 0 !important; position: relative; } .itemDetailsGroup .label::before { font-family: "Material Icons"; font-size: 1.9vh; line-height: 2.5vh; } .genresGroup .genresLabel::before { content: "theater_comedy"; } .directorsGroup .directorsLabel::before { content: "movie_creation"; } .writersGroup .writersLabel::before { content: "edit"; } .studiosGroup .studiosLabel::before { content: "apartment"; } .layout-desktop .itemDetailsGroup .detailsGroupItem .focuscontainer-x, .layout-tv .itemDetailsGroup .detailsGroupItem .focuscontainer-x { margin-left: 1.9em; width: 20em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-height: 1.5em; overflow: hidden; font-size: 95%; } .detailPageWrapperContainer { min-height: calc(100vh - 3em) !important; animation: fadeTitle 0.5s ease-out 2s forwards; opacity: 0; } .detailPageWrapperContainer::before { content: ''; position: absolute; animation: fadeTitle 2s ease-out 2.5s forwards; top: 0; left: 0; height: 100%; background: transparent; background-size: auto; background-size: cover; backdrop-filter: var(--backdropBlur); z-index: -1; width: 100vw; height: 100vh; } .detailPageWrapperContainer:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]), .detailPageWrapperContainer:has(.listItem.itemAction.listItem-button.listItem-focusscale.listItem-largeImage[data-type="Episode"]), .detailPageWrapperContainer:has(.button-link.itemAction.emby-button[data-type="Season"]) { animation: none !important; opacity: 1; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection { color: #fff; transition: max-width 0.2s ease-out 1s, background-color 1s ease-out 2s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s !important; border-radius: var(--rounding) !important; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container:hover, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection:focus { } .layout-desktop .infoWrapper, .layout-tv .infoWrapper { -webkit-flex: 1 0 0; flex: 1 0 0; max-width: 76%; min-width: 0; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button, .layout-tv .button-flat.btnPlay.detailButton.emby-button { height: 1.66em; background: rgb(var(--accent)) !important; box-shadow: 0px 0px 13px #432b6f7a; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: rgb(var(--tint2)) !important; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; width: 5.893em; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x { width: 17.3em !important; left: 3.9em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) #listChildrenCollapsible:focus { border: none; margin-top: 0; margin-left: 0; background: transparent !important; } .layout-desktop .itemDetailPage:has(.verticalSection[data-type="MusicAlbum"]) #listChildrenCollapsible:hover, .layout-tv .itemDetailPage:has(.verticalSection[data-type="MusicAlbum"]) #listChildrenCollapsible:focus { border: none; margin-top: 0; margin-left: 0; background: transparent !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailLogo, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) .detailLogo { display: none !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard { top: 20.9em; width: 18.7em; min-width: unset; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before { width: 17.8em !important; } .layout-desktop .card:hover .countIndicator, .layout-tv .card:hover .countIndicator { opacity: 0; } .nowPlayingInfoContainerMedia { } .layout-desktop #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons, .layout-tv #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons { } .layout-tv #itemDetailPage .itemDetailsGroup .detailsGroupItem .content { margin-left: 1em; } /* 1440p TV resolution */ @media (min-width: 2400px) { .layout-tv body { font-size: 130% !important; } } /* 4k resolution */ @media (min-width: 3000px) { .spotlightiframe { margin-top: -3.5em !important; } } /* 4k TV resolution */ @media (min-width: 3000px) { .layout-tv body { font-size: 173% !important; } .spotlightiframe { margin-top: -3.5em !important; } } .layout-desktop #similarCollapsible .scrollSlider.itemsContainer, .layout-tv #similarCollapsible .scrollSlider.itemsContainer { } .layout-desktop #castContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #castContent.scrollSlider.itemsContainer .card:nth-child(n+19), .layout-desktop #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19) { } .layout-desktop #castCollapsible .itemsContainer > .card > .cardBox, .layout-desktop #guestCastCollapsible .itemsContainer > .card > .cardBox, .layout-tv #castCollapsible .itemsContainer > .card > .cardBox, .layout-tv #guestCastCollapsible .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: transparent; border-radius: var(--rounding); } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding { } .layout-desktop #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding.emby-scroller-container::before, .layout-tv #similarCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding::before { } .layout-desktop #similarCollapsible .card.overflowPortraitCard, .layout-tv #similarCollapsible .card.overflowPortraitCard, .layout-desktop #similarCollapsible .card.overflowSquareCard, .layout-tv #similarCollapsible .card.overflowSquareCard, .layout-desktop #similarCollapsible .card.overflowBackdropCard, .layout-tv #similarCollapsible .card.overflowBackdropCard { width: 13.3vw; } .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus, .layout-desktop #similarCollapsible .card.overflowSquareCard:hover, .layout-tv #similarCollapsible .card.overflowSquareCard:focus, .layout-desktop #similarCollapsible .card.overflowBackdropCard:hover, .layout-tv #similarCollapsible .card.overflowBackdropCard:focus { } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName) #similarCollapsible .card.overflowSquareCard:hover, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName) #similarCollapsible .card.overflowSquareCard:focus { } .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover .cardOverlayButton, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus .cardOverlayButton, .layout-desktop #similarCollapsible .card.overflowPortraitCard:hover .overflowSquareCard, .layout-tv #similarCollapsible .card.overflowPortraitCard:focus .overflowSquareCard { opacity: 0; } .layout-desktop #similarCollapsible .card.overflowPortraitCard .quality-overlay-container, .layout-desktop #similarCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-desktop #listChildrenCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .genre-overlay-container, .layout-tv #similarCollapsible .card.overflowPortraitCard .quality-overlay-container, .layout-tv #similarCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-tv #listChildrenCollapsible .card.overflowPortraitCard .genre-overlay-container, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .genre-overlay-container { pointer-events: none; opacity: 0; } .layout-desktop #similarCollapsible .sectionTitle, .layout-tv #similarCollapsible .sectionTitle { } .layout-desktop .personCard .cardScalable, .layout-desktop .personCard .cardImageContainer, .layout-desktop .personCard .cardPadder, .layout-tv .personCard .cardScalable, .layout-tv .personCard .cardImageContainer, .layout-tv .personCard .cardPadder { width: 6.65vw; height: 6.65vw; min-width: 6.65vw; min-height: 6.65vw; margin-left: 1.5vw; } .layout-desktop .personCard .cardImageContainer, .layout-tv .personCard .cardImageContainer { border-radius: 999em !important; overflow: hidden; background-size: cover; background-position: center; } .layout-desktop .personCard .cardOverlayContainer, .layout-tv .personCard .cardOverlayContainer { border-radius: 999em !important; } .layout-desktop .personCard.overflowPortraitCard .cardPadder, .layout-tv .personCard.overflowPortraitCard .cardPadder { padding-top: 0 !important; } .layout-desktop .personCard, .layout-tv .personCard { width: 4vw; margin: 0 0.5vw; } .layout-desktop .personCard .cardText, .layout-tv .personCard .cardText { margin-top: 0.1em; font-size: 90%; } .layout-desktop .personCard .cardText.cardTextCentered.cardText-secondary, .layout-tv .personCard .cardText.cardTextCentered.cardText-secondary { max-height: 1.8em; } .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailPageWrapperContainer, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .detailPageWrapperContainer, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .trackSelections, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .trackSelections, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemExternalLinks.focuscontainer-x, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemExternalLinks.focuscontainer-x, .layout-desktop .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"]) .itemDetailsGroup { animation: none !important; opacity: 1 !important; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols { opacity: 0; transition: opacity 1s ease-out 0.5s; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols.hide { display: block !important; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols:hover, .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols:hover::before { opacity: 1; transition: opacity 0.1s ease-out 0s; } .layout-desktop .videoOsdBottom.videoOsdBottom-maincontrols::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: 15vh; pointer-events: auto; background: transparent; } @media (min-width: 100em) { .libraryPage:not(.noSecondaryNavPage) { padding-top: 4.6em !important; width: 99%; } } .playerStats { background: rgba(var(--tint), 0.8); border-radius: var(--rounding); } .itemsContainer, .scrollSlider, .emby-scroller, .overview { scrollbar-width: none; } .itemsContainer::-webkit-scrollbar, .scrollSlider::-webkit-scrollbar, .emby-scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .mainAnimatedPages, .skinBody { scrollbar-width: auto; } .mainAnimatedPages::-webkit-scrollbar, .skinBody::-webkit-scrollbar { display: block; width: 8px; } .layout-desktop #itemDetailPage:has([data-type="BoxSet"]) .detailSectionContent, .layout-tv #itemDetailPage:has([data-type="BoxSet"]) .detailSectionContent { } .layout-desktop #itemDetailPage:has([data-type="BoxSet"]) .collectionItems, .layout-tv #itemDetailPage:has([data-type="BoxSet"]) .collectionItems { } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.backdropCard.card-hoverable.card-withuserdata, .layout-tv .itemsContainer.padded-left.padded-right.itemsContainer-tv.padded-right-withalphapicker.vertical-wrap .card.backdropCard.show-focus.show-animation.card-withuserdata { width: 15.75%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.bannerCard, .layout-tv .itemsContainer.padded-left.padded-right.itemsContainer-tv.padded-right-withalphapicker.vertical-wrap .card.bannerCard { } .noBackdropTransparency .detailPagePrimaryContainer, .noBackdropTransparency .detailPageSecondaryContainer { background-color: transparent; } #indexPage h2 { font-size: 1.2em; } #indexPage .cardText.itemAction.textActionButton.emby-button { margin: 0; } .recordingFields { pointer-events: all; } .layout-desktop .remoteControlSection, .layout-tv .remoteControlSection { } /* ------ Jellyseerr ------ */ .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section { transition: max-width 0.2s ease-out 2s, background 1s ease-out 0s, border-color 0.5s ease-out 2s, padding-left 1s ease-out 1s, padding-right 1s ease-out 1s, max-height 0.2s ease-out 0.15s; overflow: hidden; border-radius: var(--rounding); } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .card { } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .cardText, .layout-tv .verticalSection.emby-scroller-container.jellyseerr-details-section { } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .sectionTitle.sectionTitle-cards.focuscontainer-x.padded-right { } .tmdb-review-toggle { color: rgba(var(--accent), 1); font-weight: bold; cursor: pointer; text-decoration: underline; margin-left: 0.3em; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .emby-scrollbuttons { } .jellyseerr-icon-on-card { display: none; } .jellyseerr-rating { display: none; } .cardText.cardTextCentered.cardText-secondary.jellyseerr-meta { font-size: 1em; } .layout-desktop .itemDetailPage:has(.streaming-lookup-container) .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { } .layout-desktop .padded-bottom-page { } .layout-desktop .jellyseerr-overview { backdrop-filter: blur(20px) brightness(50%); font-size: 83%; border-radius: var(--rounding); height: 40%; width: 66%; top: unset; bottom: 1px; left: 1px; } .je-more-info-modal .modal-container { background: rgba(var(--accent), 0.25); } .je-more-info-modal .je-modal-backdrop-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(var(--tint),1) 100%); } .layout-desktop .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .verticalSection.jellyseerr-person-discovery-section, .layout-tv .itemDetailPage:has(.detailImageContainer > .card .cardImageIcon.person) .verticalSection.jellyseerr-person-discovery-section { } .jellyseerr-media-badge { opacity: 0; } .jellyseerr-overview .content { -webkit-line-clamp: 5; } .layout-desktop .verticalSection.emby-scroller-container.jellyseerr-details-section .focuscontainer-x.itemsContainer.scrollSlider.animatedScrollX { } .layout-desktop .itemDetailPage:not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) :not(:has(#childrenContent .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"][data-isfolder="true"])) :not(:has(#scenesCollapsible .card[data-type="Movie"])) :not(:has(#specialsCollapsible .card[data-type="Video"])) .verticalSection.emby-scroller-container.jellyseerr-details-section { } .layout-desktop .itemDetailPage:not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) :not(:has(#childrenContent .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Season"][data-isfolder="true"])) :not(:has(#scenesCollapsible .card[data-type="Movie"])) :not(:has(#specialsCollapsible .card[data-type="Video"])) .verticalSection.emby-scroller-container.jellyseerr-details-section:hover { } .layout-desktop :has(#listChildrenCollapsible) :not(:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"])) :not(:has(.verticalSection[data-type="MusicAlbum"])) .detailPagePrimaryContent :not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #listChildrenCollapsible, .layout-tv :has(#listChildrenCollapsible) :not(:has(.parentName.focuscontainer-x .button-link.itemAction.emby-button[data-type="Series"])) :not(:has(.verticalSection[data-type="MusicAlbum"])) .detailPagePrimaryContent :not(:has(.nextUpSection .card.overflowBackdropCard[data-type="Episode"])) #listChildrenCollapsible { } .layout-desktop body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible, .layout-tv body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible { } .layout-desktop .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap { } .layout-desktop body:has(#itemBirthday:not(.hide)) #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv body:has(#itemBirthday:not(.hide)) #childrenContent .itemsContainer.padded-right.vertical-wrap { } .layout-desktop .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata, .layout-tv .detailPagePrimaryContent:not(:has(.nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata[data-type="Episode"])) #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.show-focus { width: 8.2em; } .layout-desktop body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible, .layout-tv body:has(#itemBirthday:not(.hide)) #listChildrenCollapsible { } /* ---- Jellyfin Enhanced TMDB ---- */ .layout-desktop .streaming-lookup-container { z-index: -21; } .layout-desktop .streaming-lookup-container .elsewhere-link-reset { font-size: 1.3vh !important; } .layout-desktop .streaming-lookup-container div[style*= "inline-flex"] { font-size: 1.4vh !important; border: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; white-space: wrap !important; } .layout-desktop .streaming-lookup-container div[style*="flex-wrap: wrap"] { } .layout-desktop .streaming-lookup-container div[style*="flex-wrap: wrap"] { } .streaming-lookup-container div[style*="backdrop-filter: blur"] { background: rgba(var(--tint), 0.5) !important; } .layout-desktop .tmdb-review-swipe-container { } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card { } .tmdb-review-swipe-container .tmdb-review-card { border-left: 0.3em solid rgba(var(--accent)); background: rgba(var(--tint), 0.96); max-width: 19.5vw; } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card .tmdb-review-text { line-height: 1.8vh; } .layout-desktop .tmdb-review-swipe-container .tmdb-review-card .tmdb-review-content-wrapper { overflow-y: scroll; } /* --------------- MOBILE --------------- */ .layout-mobile .card { } @media (orientation: landscape) { .layout-mobile body { font-size: 3.5vh; } } @media (orientation: portrait) { .layout-mobile body { font-size: 3.5vw; } } .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { } .layout-mobile .trackSelections { max-width: 44em; font-weight: 400; } .layout-mobile .trackSelections .selectContainer .detailTrackSelect { padding-left: 0.5em; text-align: center; padding-right: 0.5em; margin-left: 4%; color: #eee !important; } .layout-mobile p.overview.detail-clamp-text { } .layout-mobile .itemDetailsGroup, .layout-mobile .itemDetailsGroup .detailsGroupItem .emby-button { font-weight: 400; } .layout-mobile .itemDetailsGroup { text-align: center; margin-top: 2em; } .layout-mobile .detailSectionContent, .layout-mobile .detailSection { margin-top: 2em; } .layout-mobile span.homeLibraryText { } .layout-mobile .itemName.infoText.parentNameLast { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } @media (max-width:800x) { .layout-mobile .itemName.infoText.parentNameLast { max-width: 59vw; width: 59vw; } } .layout-mobile .listItemImageButton { background: rgba(0, 0, 0, 0); height: 2em; } .layout-mobile .detailPagePrimaryContainer { background: transparent; padding-left: } .layout-mobile .adminDrawerLogo { border-bottom: none; } @media (orientation: portrait) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: portrait) { .layout-mobile #itemDetailPage .detailLogo { position: absolute; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); display: block; bottom: unset; right: unset; width: 90vw; top: 4em; transform: translateX(-50%); left: 50vw; max-height: 6.7em; } } @media (orientation: portrait) { .itemDetailPage { padding-top: 0 !important; } } @media (orientation: landscape) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: landscape) { .layout-mobile .detailLogo { position: absolute; left: 50vw; top: 12em; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) and (min-width:1000px) and (min-width:800px) { .layout-mobile .detailLogo { position: absolute; left: 61vw; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) { .layout-mobile .detailImageContainer .card { position: absolute !important; top: 20% !important; max-width: 25%; left: 2%; width: 20vw; } .layout-mobile #itemDetailPage .card.backdropCard { width: 50vh; transform: translateY(-50%); max-width: 25vw; margin-top: 0vh; } } .layout-mobile .videoOsdBottom { } @media (orientation: landscape) { .layout-mobile .detailPageContent { padding-left: 25%; padding-right: 0%; } } @media (max-width: 750px) and (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-right: 11vw; } } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-left: 0vw !important; } } .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { padding-top: 1em; } .layout-mobile #homeTab .emby-scroller { padding-left: 0em; } .layout-mobile [dir="ltr"] .padded-left { padding: 0em; left: 0; } @media (orientation: portrait) { .layout-mobile #homeTab .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 768px) and (orientation: landscape) { .portraitCard, .squareCard { width: 12em; } } .layout-mobile .cardOverlayButtonIcon { display: none !important; } .layout-mobile .sectionTitle.sectionTitle-cards { } .layout-mobile .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { } .layout-mobile .headerTabs { -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; -webkit-justify-content: center; justify-content: center; margin-top: -2em; position: relative; } @media (min-width: 70em) { .layout-mobile .headerTabs { margin-top: -4em !important; z-index: -1; } } @media (max-width: 70em) { .layout-mobile .headerTabs { margin-top: -2em !important; z-index: -1; } } .layout-mobile .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; margin-bottom: 0em; } .layout-mobile .mediaInfoItem { justify-content: center; display: flex; max-width: fit-content; } .layout-mobile .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 14vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { justify-content: space-evenly; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 24vw; padding-top: 2em; } } @media (orientation: portrait) { .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; white-space: normal; gap: 1%; width: 86%; } .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 10%; } } @media (orientation: landscape) { .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 0%; margin-left: 3.5%; gap: 1.2%; } } @media (orientation: landscape) and (max-width: 1000px) { .layout-mobile .nameContainer { max-width: 100%; margin-left: 0; } } @media (orientation: landscape) and (max-height: 380px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 25%; padding-top: 1em; } } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-right: 0.5em; margin-left: 10px; } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-top: 0.5em !important; margin-left: 10px; } .layout-mobile .alphaPicker-fixed { top: max(env(safe-area-inset-top),24vh); height: 72vh; } .layout-mobile .alphaPickerButton-vertical { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; text-align: center; width: 7vw; height: 2.7vh; margin-bottom: 0.15vh; } @media (orientation: portrait) { .layout-mobile .detailButton { padding-left: 1em !important; padding-right: 1em !important; } } @media (max-width: 768px) and (orientation: portrait) { .mainDetailButtons.focuscontainer-x { margin-bottom: 0em; margin-top: 0em; } } @media (max-width: 32em) and (orientation: portrait) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0; padding-left: 0em; margin-top: 0.5em; width: 100vw; justify-content: space-evenly; margin-left: 0em; } } @media (min-width: 65em) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0em; margin-top: 4em; } } .layout-mobile .mediaInfoOfficialRating { position: relative; } .layout-mobile .backgroundContainer { background-color: transparent; } .layout-mobile .flex.align-items-center.flex-grow.headerTop { width: 100vw; padding-left: 0; } .layout-mobile [dir="ltr"] .pageTitle { margin: 0; } .layout-mobile .itemMiscInfo, .layout-mobile .itemName, .layout-mobile .mainDetailButtons, .layout-mobile .parentName { justify-content: space-evenly; text-align: center; } .layout-mobile #itemDetailPage .tagline { text-align: center; width: 96vw; } .layout-mobile .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr; } @media (max-width: 100em) { .layout-mobile .infoWrapper { position: relative; max-height: fit-content; } } .layout-mobile .detailsGroupItem { display: inline-block; margin: 0 0.5em 1.5em !important; width: 98%; } .layout-mobile .selectArrowContainer { top: 0; } .layout-mobile .subtitleSync { margin-top: 2em; } .layout-mobile #itemDetailPage .itemExternalLinks.focuscontainer-x { gap: 5%; display: flex; font-size: 0 !important; width: 100%; justify-content: center; } .layout-mobile .detailRibbon { background: rgba(32,32,32,0); margin-top: calc(100vh - 28em); } .layout-mobile .detailRibbon.padded-left.padded-right::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: rgb(var(--tint)); background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-mobile [dir="ltr"] .detailPageContent { padding-left: 2vw; } @media (min-width: 30em) and (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 0%; width: 66vw; } } @media (orientation: landscape) and (max-height: 900px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 0%; } } @media (orientation: landscape) { .layout-mobile .itemDetailPage { padding-top: 59vh !important; } } .layout-mobile h1.itemName, .layout-mobile h1.parentName { margin-top: 0em; } @media (orientation:landscape) { .layout-mobile .detailPageSecondaryContainer { padding-top: 1em; } } .layout-mobile .subtitle { margin: .5em .2em .5em .2em; padding-left: 0; } .layout-mobile #itemDetailPage .listViewUserDataButtons { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; } @media (orientation: landscape) { .layout-mobile .detailButton { } } .layout-mobile .detailPagePrimaryContent { padding-top: 0.25em; position: relative; padding-left: 2vw !important; padding-right: 2vw !important; } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContent { padding-left: 2vw !important; padding-right: 2vw !important; } } .layout-mobile [dir="ltr"] .mediaInfoItem { margin: 0 0em 0 0; margin-top: 0.5em; margin-bottom:0.5em; } @media (orientation: portrait) { .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { width: 100vw; margin-left: 0vw; justify-items: center; color: #eee !important; } } @media (orientation: landscape) and (max-width:1400px) { .layout-mobile .detailRibbon { } .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 2%; width: 98%; } .layout-mobile .mainDetailButtons.focuscontainer-x { padding-left: 0; margin-top: 0; } } .layout-mobile .detailPageContent { padding-left: 5%; padding-right: 0; } @media (orientation: landscape){ .layout-mobile .button-flat { } } .layout-mobile .headerLeft { display: -webkit-flex; display: flex; } .layout-mobile .upNextContainer { } .layout-mobile .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { gap: 14%; } @media (orientation: portrait) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 28vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 28vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 42vw; } } @media (orientation: landscape) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 15vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 15vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 30vw; } } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper { box-shadow: 0px 1px 8px rgb(0, 0, 0); background: rgb(var(--tint)); } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .secondary.listItem-overview.listItemBodyText p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.portraitCard { position: absolute; left: 50%; top: 10vh; bottom: unset; right: unset; margin-top: -40vh; width: 20vh; max-width: 50vw; transform: translateX(-50%); } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { position: absolute; left: 1vw; top: -18em; bottom: unset; right: unset; transform: none; width: 98vw; max-width: 98vw; } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.squareCard { position: absolute; top: -21em; bottom: unset; left: 50vw; transform: translateX(-50%); max-width: 98vw; max-height: 32em; width: 20em; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.portraitCard { left: 8vw; top: unset !important; bottom: 23vh; right: unset; transform: none; width: 30vh; max-width: 50vw; } } @media (min-width: 800px) and (min-height: 1000px) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.portraitCard { opacity: 0; } .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 0vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 0vw; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { left: 4vw; bottom: unset; top: -1em !important; margin-top: -40vh; transform: none; width: 44vh; max-width: 50vw; } } .layout-mobile p.overview.detail-clamp-text { color: #fff; font-weight: 400; -webkit-line-clamp: unset; text-align: center; margin-bottom: 2em; } .layout-mobile [dir="ltr"] .infoWrapper { padding: 0vw; max-width: 100%; width: 100%; } .layout-mobile .genre-overlay-container { opacity: 0; } .layout-mobile .quality-overlay-container { opacity: 1; } .layout-mobile .quality-overlay-label { border-radius: var(--rounding); padding: 0.1rem 0.5rem; font-size: 0.6rem; } .layout-mobile .trackSelections .selectContainer .selectLabel { opacity: 0; } @media (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { max-width: 100%; width: 100%; padding: 0; } .layout-mobile .trackSelections.focuscontainer-x { left: 25%; } } .layout-mobile .itemsContainer.padded-right.vertical-wrap { gap: 2%; } .layout-mobile .trackSelections { margin-left: 0; max-width: 100%; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button { width: 22%; background: rgb(var(--accent)) !important; box-shadow: 0px 0px 13px #432b6f7a; margin-left: -0.9em !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: rgb(var(--tint2)) !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } .layout-mobile .detailPagePrimaryContainer { pointer-events: all; } @media (max-width: 1000px) and (max-height: 999px) { .layout-mobile .itemDetailsGroup .label::before, .layout-mobile .trackSelections .selectLabel::before { font-size: 1.3rem; line-height: revert; } } @media (min-width: 1000px) and (min-height: 800px) { .layout-mobile .itemDetailsGroup .label::before, .layout-mobile .trackSelections .selectLabel::before { font-size: 2rem; line-height: revert; } } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile body { font-size: 3vw; } } @media (orientation: landscape) and (min-height: 800px) { .layout-mobile body { font-size: 3.6vh; } } @media (orientation: portrait) { .layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; background: rgb(var(--tint)); border-radius: var(--rounding); transform: translateX(-50%); padding-left: 1em; padding-right: 1em; width: 90vw; max-width: 90vw; } #loginPage .raised { font-weight: 500; width: 90vw; } #loginPage .readOnlyContent .emby-button { width: 90vw; transform: translateX(-50%); margin-left: 50%; margin-right: 50%; margin-top: 1.5em; } } @media (max-width: 999px) and (max-height: 999px) { .layout-mobile a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .layout-mobile a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } } ================================================ FILE: LICENSE ================================================ GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 Copyright (C) 2007 Free Software Foundation, Inc. Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Preamble The GNU General Public License is a free, copyleft license for software and other kinds of works. The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users. We, the Free Software Foundation, use the GNU General Public License for most of our software; it applies also to any other work released this way by its authors. You can apply it to your programs, too. When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things. To protect your rights, we need to prevent others from denying you these rights or asking you to surrender the rights. Therefore, you have certain responsibilities if you distribute copies of the software, or if you modify it: responsibilities to respect the freedom of others. For example, if you distribute copies of such a program, whether gratis or for a fee, you must pass on to the recipients the same freedoms that you received. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights. Developers that use the GNU GPL protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License giving you legal permission to copy, distribute and/or modify it. For the developers' and authors' protection, the GPL clearly explains that there is no warranty for this free software. For both users' and authors' sake, the GPL requires that modified versions be marked as changed, so that their problems will not be attributed erroneously to authors of previous versions. Some devices are designed to deny users access to install or run modified versions of the software inside them, although the manufacturer can do so. This is fundamentally incompatible with the aim of protecting users' freedom to change the software. The systematic pattern of such abuse occurs in the area of products for individuals to use, which is precisely where it is most unacceptable. Therefore, we have designed this version of the GPL to prohibit the practice for those products. If such problems arise substantially in other domains, we stand ready to extend this provision to those domains in future versions of the GPL, as needed to protect the freedom of users. Finally, every program is threatened constantly by software patents. States should not allow patents to restrict development and use of software on general-purpose computers, but in those that do, we wish to avoid the special danger that patents applied to a free program could make it effectively proprietary. To prevent this, the GPL assures that patents cannot be used to render the program non-free. The precise terms and conditions for copying, distribution and modification follow. TERMS AND CONDITIONS 0. Definitions. "This License" refers to version 3 of the GNU General Public License. "Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks. "The Program" refers to any copyrightable work licensed under this License. Each licensee is addressed as "you". "Licensees" and "recipients" may be individuals or organizations. To "modify" a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a "modified version" of the earlier work or a work "based on" the earlier work. A "covered work" means either the unmodified Program or a work based on the Program. To "propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well. To "convey" a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying. An interactive user interface displays "Appropriate Legal Notices" to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion. 1. Source Code. The "source code" for a work means the preferred form of the work for making modifications to it. "Object code" means any non-source form of a work. A "Standard Interface" means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language. The "System Libraries" of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A "Major Component", in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it. The "Corresponding Source" for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those subprograms and other parts of the work. The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source. The Corresponding Source for a work in source code form is that same work. 2. Basic Permissions. All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law. You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you. Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary. 3. Protecting Users' Legal Rights From Anti-Circumvention Law. No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures. When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures. 4. Conveying Verbatim Copies. You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program. You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee. 5. Conveying Modified Source Versions. You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions: a) The work must carry prominent notices stating that you modified it, and giving a relevant date. b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices". c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it. d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so. A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an "aggregate" if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate. 6. Conveying Non-Source Forms. You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways: a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange. b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge. c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b. d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements. e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d. A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work. A "User Product" is either (1) a "consumer product", which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, "normally used" refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product. "Installation Information" for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made. If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM). The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network. Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying. 7. Additional Terms. "Additional permissions" are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions. When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission. Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms: a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or b) Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or c) Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or d) Limiting the use for publicity purposes of names of licensors or authors of the material; or e) Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or f) Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors. All other non-permissive additional terms are considered "further restrictions" within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying. If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms. Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way. 8. Termination. You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11). However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation. Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice. Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10. 9. Acceptance Not Required for Having Copies. You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so. 10. Automatic Licensing of Downstream Recipients. Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License. An "entity transaction" is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts. You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it. 11. Patents. A "contributor" is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's "contributor version". A contributor's "essential patent claims" are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, "control" includes the right to grant patent sublicenses in a manner consistent with the requirements of this License. Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version. In the following three paragraphs, a "patent license" is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To "grant" such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party. If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent license to downstream recipients. "Knowingly relying" means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid. If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it. A patent license is "discriminatory" if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007. Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law. 12. No Surrender of Others' Freedom. If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program. 13. Use with the GNU Affero General Public License. Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU Affero General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the special requirements of the GNU Affero General Public License, section 13, concerning interaction through a network will apply to the combination as such. 14. Revised Versions of this License. The Free Software Foundation may publish revised and/or new versions of the GNU General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU General Public License, you may choose any version ever published by the Free Software Foundation. If the Program specifies that a proxy can decide which future versions of the GNU General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program. Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version. 15. Disclaimer of Warranty. THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 16. Limitation of Liability. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 17. Interpretation of Sections 15 and 16. If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee. END OF TERMS AND CONDITIONS How to Apply These Terms to Your New Programs If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms. To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found. Copyright (C) This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . Also add information on how to contact you by electronic and paper mail. If the program does terminal interaction, make it output a short notice like this when it starts in an interactive mode: Copyright (C) This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. This is free software, and you are welcome to redistribute it under certain conditions; type `show c' for details. The hypothetical commands `show w' and `show c' should show the appropriate parts of the General Public License. Of course, your program's commands might be different; for a GUI interface, you would use an "about box". You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. For more information on this, and how to apply and follow the GNU GPL, see . The GNU General Public License does not permit incorporating your program into proprietary programs. If your program is a subroutine library, you may consider it more useful to permit linking proprietary applications with the library. If this is what you want to do, use the GNU Lesser General Public License instead of this License. But first, please read . ================================================ FILE: Multicolour/placeholder.txt ================================================ ================================================ FILE: README.md ================================================ # Finimalism for Jellyfin v10.11.x ![jsDelivr](https://data.jsdelivr.com/v1/package/gh/tedhinklater/finimalism/badge) Just paste the import line into your "Dashboard > Branding > CSS" section, or "User Settings > Display > CSS" section. Note: For Jellyfin Media Player, you need the latest [Jellyfin Desktop 2.0.0](https://flathub.org/en/apps/org.jellyfin.JellyfinDesktop) ### Examples with [Home Screen Sections](https://github.com/IAmParadox27/jellyfin-plugin-home-sections) / [Featured Content Bar](https://github.com/tedhinklater/Jellyfin-Featured-Content-Bar) / [Jellyfin Enhanced](https://github.com/n00bcodr/Jellyfin-Enhanced) ## V11 ```css @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/Finimalism11.css"); ``` ## V12 ```css @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/Finimalism12.css"); ```
## Modded UI & animations (v11) 1 ![movie](https://github.com/user-attachments/assets/2f8d44f1-2a02-42ff-ba08-fc9ee63a7aef) ![show](https://github.com/user-attachments/assets/f7f01b87-d3e4-43b8-814b-d44f5adf6c80) ![player](https://github.com/user-attachments/assets/e50a50aa-c020-4c66-893f-d7b6e0c0a6b3) ## Classic Jellyfin layout (v12) 1 2 3 4
## Custom colours Below is an example of how to use custom colours ```css @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/Finimalism11.css"); /* Custom Colours */ :root { --accent: 202, 20, 20; --backdropBlur: blur(0px); --rounding: 0.8em; --tint: 0, 0, 0; --tint2: 176, 34, 7; } ``` 1 Add this for horizontal scrollers on the homepage ```css @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/scrollers-11.css"); ``` # Feedback Bug reports are hugely appreciated, but to save time, can you include this info - Screen resolution (1920x1080, 2560x1440 etc) - Screen ratio (16:9, 21:9 etc) - Device type (Tablet, Desktop, TV) - Client (Jellyfin Media Player (does not work atm, JMP update soon), Chrome, Firefox etc) - Which version of the theme (10.11, 10.11-Black, 11, 12) ================================================ FILE: blurryface's-half-and-half.css ================================================ .itemBackdrop { display: inherit; height: 53em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop { height: 40.5em !important; } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { height: 3em; margin-top: -7em; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary { transform: none; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .trackSelections { top: 37.8em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle { top: 4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { top: 36.5em !important; } .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle { top: 6em; } .layout-desktop #itemDetailPage .itemExternalLinks, .layout-tv #itemDetailPage .itemExternalLinks, .itemName.infoText.originalTitle, .itemName.infoText.parentNameLast, .layout-desktop .parentName.musicParentName.focuscontainer-x, .layout-desktop .itemDetailPage:has(.itemName.parentNameLast) #itemBackdrop, .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) #itemBackdrop, .layout-desktop .trackSelections, .layout-tv .trackSelections, .itemsContainer, .itemDetailsGroup { animation: none !important; opacity: 1 !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailRibbon, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailRibbon { height: 3em !important; } ================================================ FILE: finimalism-just-black.css ================================================ @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism7.css"); /* Backdrop */ .backgroundContainer { background: #000; -webkit-background-size: cover; background-size: cover; opacity: 0; } .itemsContainer.padded-left { position: top; z-index: 1; } .itemsContainer.padded-left::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-size: cover; opacity: 1; z-index: -1; backdrop-filter: saturate(0%) !important; } .sectionTitleContainer.sectionTitleContainer-cards.padded-left::before { backdrop-filter: saturate(0%) !important; } .detailPagePrimaryContainer { position: relative; z-index: 2; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000ba; background-size: cover; opacity: 1; z-index: -1; backdrop-filter: saturate(25%) contrast(150%) blur(2px); filter: drop-shadow(0px 3px 4px #000a); } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000db; background-size: cover; opacity: 1; z-index: -1; backdrop-filter: saturate(0%) contrast(200%) blur(1px); } .raised.homeLibraryButton { box-shadow: 0px 0px 1px rgb(255, 255, 255) !important; border: solid 1px rgba(var(--accent),0) !important; } .raised.homeLibraryButton:hover,.emby-tab-button:hover, .textareaLabelFocused, .buttonActive { color: rgb(0, 0, 0) !important; box-shadow: 0px 0px 5px rgb(255, 255, 255) !important; } .button-flat:hover, .paper-icon-button-light:hover { color: rgb(255, 255, 255) !important; } .cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px rgb(255, 255, 255); border: solid 1px rgba(var(--accent),0); } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0 !important; color: #000 !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover, #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody:hover, #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem:hover { background: #fff !important; transition: background 0.3s ease; color: #000 !important; } .dialogContainer .listItem:hover .listItemBodyText { color: #000; } .dialogContainer .listItem:hover .listItemAside { color: #000d; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: black !important; } .subtitleList .listItem:hover .listItemBody { color: #fff; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText { color: #000; } .verticalSection-extrabottompadding .emby-button { transition: background 0.3s ease; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover .navMenuOptionText { color: #000 !important; } .emby-select-withcolor > option { color: inherit; background: #000; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { background: #404040 !important; } .innerCardFooter, .countIndicator, .playedIndicator { background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%); box-shadow: none; color: rgb(--accent); } .headerTabs.sectionTabs:hover .emby-button { color: #fff !important; box-shadow: none !important; } #loginPage { background: url(https://i.ibb.co/xnWbbLm/bg.jpg) !important; background-size: cover !important; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000000db; background-attachment: scroll; background-size: auto; background-size: cover; opacity: 1; backdrop-filter: saturate(0%) contrast(200%); z-index: -1; background-attachment: fixed; } .layout-desktop .mainDetailButtons.focuscontainer-x { background: #000000ba; background-size: auto; background-size: cover; opacity: 1; z-index: -1; backdrop-filter: saturate(25%) contrast(150%) blur(3px); } .backgroundContainer, .preload { background-color: #000; } @media (hover: hover) and (pointer: fine) { .paper-icon-button-light:hover:not(:disabled) { color: rgba(var(--accent)) !important; background-color: rgba(199, 199, 199, 0.2); } } .paper-icon-button-light:active:not(:disabled), .paper-icon-button-light.show-focus:focus, .inputLabelFocused, .selectLabelFocused, .textareaLabelFocused, .upNextDialog-countdownText, .button-flat:hover, .button-link, .emby-select-withcolor:focus, .emby-tab-button.show-focus:focus, .emby-tab-button:hover, .guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus, .buttonActive, .metadataSidebarIcon, .layout-tv .emby-button.detailFloatingButton:focus, #dialogToc .bookplayerButtonIcon:hover, #dialogToc .toc li a:active, #dialogToc .toc li a:hover { color: #fff !important; } .alphaPickerButton-tv:focus, .emby-select-tv-withcolor:focus, .guide-channelHeaderCell:focus, .programCell:focus, .guide-date-tab-button.show-focus:focus, .emby-button.detailFloatingButton, .alphaPickerButton-tv:focus, .emby-select-tv-withcolor:focus, .emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground { background-color: rgba(var(--accent)) !important; } .progressring-spiner, .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-checkbox:checked + span + .checkboxOutline, .emby-checkbox:focus:not(:checked) + span + .checkboxOutline, .card:focus .cardBox.visualCardBox, .card:focus .cardBox:not(.visualCardBox) .cardScalable { border-color: rgba(var(--accent)) !important; } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000c; z-index: 0; } .layout-desktop .headerLeft, .layout-tv .headerLeft { background: #0008; } @media (min-width: 60em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { background: #000000e0 !important; } } .layout-desktop .headerRight, .layout-tv .headerRight { background: #0008; } .skip-button { background: #000; } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: #000a; } ================================================ FILE: finimalism10.11-black.css ================================================ @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css"); /* ---- Black ---- */ :root {--accentBlack: #ca1414;} /* Backdrop */ .backgroundContainer { background: #000; -webkit-background-size: cover; background-size: cover; opacity: 0; } @keyframes fadeContainer { from { opacity: 0.5; } to { opacity: 1; } } .itemsContainer.padded-left { position: top; z-index: 1; } .itemsContainer.padded-left::before { opacity: 1; animation: fadeContainer 5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .sectionTitleContainer.sectionTitleContainer-cards.padded-left::before { backdrop-filter: saturate(0%) !important; } .detailPagePrimaryContainer { position: relative; z-index: 2; } .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0); filter: saturate(0%); } @supports (backdrop-filter: blur(15px)) { .dialog, .mainDrawer, .toast, .appfooter { backdrop-filter: blur(15px); background-color: #000a; } } .raised, .fab, a[data-role="button"] { background: #000; transition: all 0.2s !important; border: 1px solid white; font-weight: 900; } .collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox { background-color: #000a; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; background-size: cover; opacity: 1; z-index: -1; animation: fadeContainer 5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; margin-top: 0; } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; background-size: cover; opacity: 1; z-index: -1; animation: fadeContainer 5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemsContainer.padded-left::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemsContainer.padded-left::before, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPagePrimaryContainer::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPagePrimaryContainer::before, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPageSecondaryContainer::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPageSecondaryContainer::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemsContainer.padded-left::before, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemsContainer.padded-left::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailPagePrimaryContainer::before, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailPagePrimaryContainer::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailPageSecondaryContainer::before, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .detailPageSecondaryContainer::before { animation: none !important; } .layout-desktop .detailRibbon::before, .layout-tv .detailRibbon::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: #070707; background-size: auto; background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-desktop .mainDetailButtons.focuscontainer-x::before, .layout-tv .mainDetailButtons.focuscontainer-x::before { background: #070707; box-shadow: 0px 2px 8px #0005; } .layout-desktop .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .layout-tv .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: transparent; background-attachment: scroll; background-size: auto; background-size: cover; opacity: 1; z-index: -1; background-attachment: fixed; pointer-events: none; backdrop-filter: saturate(0%); } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:hover { color: var(--accentBlack) !important; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"], .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"] { color: var(--accentBlack) !important; } .listItemImage:hover { box-shadow: 0px 0px 350px #5b00ff6b; } .layout-desktop #itemDetailPage .listItem:hover, .layout-tv #itemDetailPage .listItem:hover { box-shadow: 0px 0px 5px #fff9; background: #07070785; } .raised.homeLibraryButton { box-shadow: 0px 0px 1px rgb(255, 255, 255) !important; border: solid 1px var(--accentBlack) !important; } .raised.homeLibraryButton:hover,.emby-tab-button:hover, .textareaLabelFocused, .buttonActive { color: rgb(0, 0, 0) !important; box-shadow: 0px 0px 5px rgb(255, 255, 255) !important; } .button-flat:hover, .paper-icon-button-light:hover { color: rgb(255, 255, 255) !important; } .cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px rgb(255, 255, 255); border: solid 1px #fff; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0 !important; color: #000 !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover, #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody:hover, #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem:hover { background: #fff !important; transition: background 0.3s ease; color: #000 !important; } .dialogContainer .listItem:hover .listItemBodyText { color: #000; } .dialogContainer .listItem:hover .listItemAside { color: #000d; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: black !important; } .subtitleList .listItem:hover .listItemBody { color: #fff; } .mdl-slider::-webkit-slider-thumb, .mdl-slider .mdl-slider::-webkit-slider-thumb { background: var(--accentBlack) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-moz-range-thumb, .mdl-slider .mdl-slider::-moz-range-thumb { background: var(--accentBlack) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-ms-thumb, .mdl-slider .mdl-slider::-ms-thumb { background: var(--accentBlack) !important; border: none !important; } .mdl-slider .mdl-slider-background-lower[style] { background: var(--accentBlack) !important; background-color: var(--accentBlack) !important; } .mdlSpinnerActive .mdl-spinner__circleLeft { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; border: 0.5em solid: var(--accentBlack); } .button-flat:hover { background: transparent !important; color: var(--accentBlack) !important; } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: var(--accentBlack); } .cardOverlayButton-hover .playstatebutton-icon-played { color: var(--accentBlack); background: #fff !important; border-radius: 9999em !important; width: 1.098766666em !important; height: 1.09876666666em !important; margin-top: 0.19em; margin-right: 0.05em; } .countIndicator, .playedIndicator { background: var(--accentBlack); } #scenesContent .innerCardFooter { background: #000000bd !important; } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: var(--accentBlack); } .material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating:hover { color: var(--accentBlack); transition: color 1s; } .itemProgressBarForeground { background: var(--accentBlack); } .upNextContainer .raised { background: var(--accentBlack); border: transparent; padding: 0.8em; padding-left: 2em; padding-right: 2em; margin-left: 0; } .layout-tv #itemDetailPage .emby-button.show-focus:focus { border: solid 1px #fff; background: transparent !important; color: var(--accentBlack) !important; width:auto; height: auto; transform: scale(1); padding-left: 0.5em; padding-right: 0.5em; box-shadow: 0px 0px 5px #fff9; } .raised.homeLibraryButton:hover, .emby-tab-button:hover, .textareaLabelFocused, .buttonActive { color: rgb(255, 255, 255) !important; box-shadow: 0px 0px 5px rgb(255, 255, 255) !important; } .layout-desktop .headerTabs.sectionTabs .emby-tab-button-active:hover, .layout-tv .headerTabs.sectionTabs .emby-tab-button-active:focus { color: #000 !important; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText { color: #000; } .verticalSection-extrabottompadding .emby-button { transition: background 0.3s ease; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover .navMenuOptionText { color: #000 !important; } .emby-select-withcolor > option { color: inherit; background: #000; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { } #loginPage { background: url(https://i.ibb.co/xnWbbLm/bg.jpg) !important; background-size: cover !important; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000000db; background-attachment: scroll; background-size: auto; background-size: cover; opacity: 1; backdrop-filter: saturate(0%); z-index: -1; background-attachment: fixed; } .layout-desktop .mainDetailButtons.focuscontainer-x { background-size: auto; background-size: cover; opacity: 1; z-index: -1; border-radius: var(--rounding); } .backgroundContainer, .preload { background-color: #000; } @media (hover: hover) and (pointer: fine) { .paper-icon-button-light:hover:not(:disabled) { color: var(--accentBlack) !important; background-color: rgba(199, 199, 199, 0.2); } } .alphaPickerButton-tv:focus, .emby-select-tv-withcolor:focus, .guide-channelHeaderCell:focus, .programCell:focus, .guide-date-tab-button.show-focus:focus, .emby-button.detailFloatingButton, .alphaPickerButton-tv:focus, .emby-select-tv-withcolor:focus, .emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground { background-color: var(--accentBlack) !important; } .textActionButton:hover { color: var(--accentBlack) !important; } .progressring-spiner, .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-checkbox:checked + span + .checkboxOutline, .emby-checkbox:focus:not(:checked) + span + .checkboxOutline, .card:focus .cardBox.visualCardBox, .card:focus .cardBox:not(.visualCardBox) .cardScalable { border-color: var(--accentBlack) !important; } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000c; z-index: 0; } .layout-desktop .headerLeft, .layout-tv .headerLeft { background: #0008; } .layout-desktop .headerRight, .layout-tv .headerRight { background: #0008; } .skip-button { background: #000; } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: #000a; } @media (min-width: 70em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } } @media (min-width: 70em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid #62626287; margin-bottom: 1em; } } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: #00000059; border-radius: var(--rounding); } .verticalSection.section0 .cardBox { background: transparent; } .defaultCardBackground1, .defaultCardBackground2, .defaultCardBackground3, .defaultCardBackground4, .defaultCardBackground5 { background-color: #2d0000ba; } .mdl-slider-background-lower { background-color: var(--accentBlack); } .headerSelectedPlayer { max-width: 10em; white-space: nowrap; color: #ff6767; filter: drop-shadow(0px 0px 3px #f00); } .layout-desktop #itemDetailPage .listItem, .layout-tv #itemDetailPage .listItem { background: #070707; } .layout-desktop .nowPlayingInfoContainer, .layout-tv .nowPlayingInfoContainer { position: fixed; top: 4em; left: 1vw; width: 96.7vw; border-radius: var(--rounding); padding: 1em; box-shadow: 0px 2px 12px #000; background: #0d0d0dbd; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button, .layout-tv .button-flat.btnPlay.detailButton.emby-button { background: var(--accentBlack) !important; box-shadow: 0px 0px 13px #8200007a; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: var(--accentBlack) !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button { width: 22%; height: 2em; background: var(--accentBlack) !important; box-shadow: 0px 0px 13px #432b6f7a; margin-left: -0.9em !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: var(--accentBlack) !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } #itemDetailPage .button-link:hover { color: var(--accentBlack) !important; text-decoration: none; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:hover { background-color: rgba(0, 0, 0, 0.86) !important; color: var(--accentBlack) !important; } ================================================ FILE: finimalism10.11.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&display=swap'); body { font-family: "Geom", sans-serif; font-size: 12pt; } html { color: #fff; color: rgba(255, 255, 255, 1); } :root {--accent: #8546ff;} :root {--rounding: 0.8em;} .backgroundContainer, .preload { background-color: #110e1ebd; } .itemsContainer { opacity: 0; animation: fadeTitle 0.3s ease-out 0s forwards; } .mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3, .mdl-spinner__layer-4 { border-color: var(--accent); } .sections.homeSectionsContainer::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #110e1ebd; background-size: cover; opacity: 0; z-index: -1; background-attachment: fixed; pointer-events: none; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #110e1eeb; background-size: cover; z-index: -1; background-attachment: fixed; } .detailPagePrimaryContainer { position: relative; z-index: 2; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 4em); background: linear-gradient(180deg, rgb(6.667% 5.49% 11.765% / 0.95) 0%, rgb(6.667% 5.49% 11.765% / 0.9497204350490196) 6.25%, rgb(6.667% 5.49% 11.765% / 0.9488817401960784) 12.5%, rgb(6.667% 5.49% 11.765% / 0.9474839154411764) 18.75%, rgb(6.667% 5.49% 11.765% / 0.9455269607843136) 25%, rgb(6.667% 5.49% 11.765% / 0.9430108762254902) 31.25%, rgb(6.667% 5.49% 11.765% / 0.9399356617647059) 37.5%, rgb(6.667% 5.49% 11.765% / 0.9363013174019608) 43.75%, rgb(6.667% 5.49% 11.765% / 0.9321078431372549) 50%, rgb(6.667% 5.49% 11.765% / 0.9273552389705882) 56.25%, rgb(6.667% 5.49% 11.765% / 0.9220435049019607) 62.5%, rgb(6.667% 5.49% 11.765% / 0.9161726409313725) 68.75%, rgb(6.667% 5.49% 11.765% / 0.9097426470588235) 75%, rgb(6.667% 5.49% 11.765% / 0.9027535232843137) 81.25%, rgb(6.667% 5.49% 11.765% / 0.8952052696078431) 87.5%, rgb(6.667% 5.49% 11.765% / 0.8870978860294118) 93.75%, rgb(6.667% 5.49% 11.765% / 0.8784313725490196) 100% ); background-size: cover; opacity: 1; z-index: -1; margin-top: -4em; } .layout-mobile .detailPagePrimaryContainer::before { backdrop-filter: blur(1px); } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #110e1ee0; background-size: cover; opacity: 1; z-index: -1; } .layout-mobile .detailPagePrimaryContainer::before { backdrop-filter: blur(1px); } .headerTop { padding: 0.95em; } h2 { font-size: 1.3em; } .textActionButton { transition: color 0.3s, font-weight 0.3s; } .textActionButton:hover { -webkit-text-decoration: none; text-decoration: none; color: #8564ff; } .cardText-secondary, .fieldDescription, .guide-programNameCaret, .listItem .secondary, .nowPlayingBarSecondaryText, .programSecondaryTitle, .secondaryText { color: rgba(255, 255, 255, 0.75); } .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { background: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); right: 0; left: 0; top: 0; bottom: 0; margin: 0; } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { padding-left: max(env(safe-area-inset-left),3.7%); padding-right: 7.5%; padding-right: max(env(safe-area-inset-right),3.5%); } } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x { transition: color 0.3s; } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x:hover { color: #a086ff; } .layout-desktop #itemDetailPage .infoWrapper .nameContainer .parentName.focuscontainer-x .button-link:hover { text-decoration: none !important; } p.overview.detail-clamp-text { color: #fff; font-weight: 500; -webkit-line-clamp: unset; font-size: 1.17em; min-height: 6em; } #itemDetailPage .tagline { font-weight: 600; } .layout-desktop #itemDetailPage .tagline, .layout-tv #itemDetailPage .tagline { margin-top: 1.3em; margin-bottom: 2em; font-size: 1.5em; min-height: 2em; } .mdl-slider::-webkit-slider-thumb, .mdl-slider .mdl-slider::-webkit-slider-thumb { background: var(--accent) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-moz-range-thumb, .mdl-slider .mdl-slider::-moz-range-thumb { background: var(--accent) !important; border: none !important; box-shadow: none !important; } .mdl-slider::-ms-thumb, .mdl-slider .mdl-slider::-ms-thumb { background: var(--accent) !important; border: none !important; } .mdl-slider .mdl-slider-background-lower[style] { background: var(--accent) !important; background-color: #8564ff !important; } .mdl-slider-background-flex { background: hsla(0,0%,100%,.3); border: 0; display: -webkit-flex; display: flex; height: .2em; margin-top: -.1em; overflow: hidden; padding: 0; padding-top: 0px; padding-bottom: 0px; top: 50%; width: 100%; height: 0.85em; padding-bottom: 0em; padding-top: 0em; margin-top: -0.44em; } .mdl-slider { font-size: 0em; width: 100%; color: transparent; } .sliderMarker.watched { background-color: #fff; height: 0.85em; z-index: 1; } .sliderMarker.unwatched { background-color: hsla(0,0%,100%,.3); height: 0.85em; } #pause-screen-progress-bar > span { display: block; height: 100%; width: 0%; background: var(--accent); } .layout-desktop .itemName.infoText.parentNameLast, .layout-tv .itemName.infoText.parentNameLast { text-align: center; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; } :root {--selection: 170, 95, 200;} .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0); } .backgroundProgress > div { background-color: #7b7b7b; } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(120, 120, 120, 0.6); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: white; } .raised, .fab, a[data-role="button"] { background: #111126; transition: all 0.2s !important; border: 1px solid white; font-weight: 900; } .raised:hover, .fab:hover, .navMenuOption:hover, .actionSheetMenuItem:hover { background: rgba(80, 80, 80, 0.8) !important; color: #fff !important; } .paper-icon-button-light:hover { background-color: rgba(0, 0, 0, 0) !important; } .defaultCardBackground1 { background-color: #3d3479ba; } .defaultCardBackground2 { background-color: #352b78ba; } .defaultCardBackground3 { background-color: #2d2176ba; } .defaultCardBackground4 { background-color: #352c67ba; } .defaultCardBackground5 { background-color: #2c1f78ba; } .countIndicator { box-shadow: none; } .checkboxOutline, .emby-input, .emby-textarea, .emby-select-withcolor { background: rgba(0, 0, 0, 0.2); border: 0.01em solid rgba(255, 255, 255, 0.22); } .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus { background: rgba(0, 0 , 0, 0.4) !important; } .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid rgba(var(--selection), 0.8) !important; } .emby-checkbox:checked + span + .checkboxOutline { background-color: rgba(0, 0 , 0, 0.4) !important; border: 0.01em solid rgba(var(--selection), 0.8) !important; } #loginPage .readOnlyContent, #loginPage form { max-width: fit-content; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; background: #0a041847; border-radius: var(--rounding); transform: translateX(-50%); padding-left: 1em; padding-right: 1em; width: fit-content; max-width: 70vw; } #loginPage .squareCard { max-width: 11em; min-width: 10em; } #loginPage .card.squareCard.scalableCard.squareCard-scalable { border: 1px solid #58547a; border-radius: var(--rounding); margin: 1em; } #loginPage .cardBox.cardBox-bottompadded { padding: 0 !important; margin: 0 !important; } #loginPage .visualLoginForm { margin-bottom: 2em; } #loginPage .readOnlyContent .emby-button { width: max-content; transform: translateX(-50%); margin-left: 50%; margin-right: 50%; margin-top: 1.5em; } #divUsers.itemsContainer.vertical-wrap.centered { margin-right: 0; width: 100%; } #loginPage form { padding-top: 4em; } #loginPage .sectionTitle{ margin-left: auto !important; margin-right: auto !important; } #loginPage { background: linear-gradient(180deg, rgb(10.98% 11.373% 22.353%) 0%, rgb(10.411% 10.755% 21.118%) 6.25%, rgb(9.877% 10.178% 19.963%) 12.5%, rgb(9.381% 9.64% 18.888%) 18.75%, rgb(8.922% 9.142% 17.892%) 25%, rgb(8.499% 8.684% 16.976%) 31.25%, rgb(8.113% 8.266% 16.14%) 37.5%, rgb(7.763% 7.888% 15.383%) 43.75%, rgb(7.451% 7.549% 14.706%) 50%, rgb(7.175% 7.25% 14.108%) 56.25%, rgb(6.936% 6.991% 13.591%) 62.5%, rgb(6.734% 6.772% 13.153%) 68.75%, rgb(6.569% 6.593% 12.794%) 75%, rgb(6.44% 6.454% 12.515%) 81.25%, rgb(6.348% 6.354% 12.316%) 87.5%, rgb(6.293% 6.294% 12.197%) 93.75%, rgb(6.275% 6.275% 12.157%) 100% ) !important; background-size: cover !important; } .layout-desktop .visualLoginForm h1, .layout-tv .visualLoginForm h1 { padding-top: 1em; } #childrenContent .starRatingContainer { display: none; } @media (min-width: 100em) { .portraitCard, .squareCard { width: 11%; } } @media (max-width: 62.5em) { .layout-desktop .detailPageWrapperContainer, .layout-tv .detailPageWrapperContainer { margin-top: 0em !important; } } @media (orientation: landscape) { .layout-desktop #itemDetailPage { position: relative; } .layout-desktop #itemDetailPage::after, .layout-tv #itemDetailPage::after { content: none; } .layout-desktop .detailLogo, .layout-tv .detailLogo { position: fixed; z-index: 10; left: 4.5em; width: 22.6em; height: 8.3em; animation: logoScale 0.3s ease-out forwards; display: block; transition: width 0.2s ease-in-out; } .layout-desktop #itemDetailPage:has(.portraitCard) .detailLogo, .layout-tv #itemDetailPage:has(.portraitCard) .detailLogo { top: 3em; } } .layout-desktop #itemDetailPage .nameContainer, .layout-tv #itemDetailPage .nameContainer { position: fixed; left: 2.75em; top: 49.7em; width: 26.4em; justify-content: center; text-align: center; height: 3.6em; display: flex; flex-direction: row; } .layout-desktop .skinHeader, .layout-tv .skinHeader { position: fixed; top: -0.5em; } @media (orientation: landscape) { .itemDetailPage { padding-top: 0em !important; } } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { position: fixed !important; } .headerTabs.sectionTabs { text-size-adjust: 110%; } .pageTitle { margin-top: auto; margin-bottom: auto; filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } [dir="ltr"] .listItem { padding: .25em .25em .25em .25em; } .docspinner { contain: layout style size; height: 10vh; left: 50%; margin-left: -5vh; margin-top: -5vh; position: fixed; top: 50%; width: 10vh; z-index: 9999999; } .mdl-spinner__circle-clipper .mdl-spinner__circle { width: 200%; border: 0.5em solid white; } .mdlSpinnerActive .mdl-spinner__circleLeft { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; border: 0.5em solid #8564ff; } .cardIndicators, .listItemIndicators { top: 0.5em; } .cardBox-bottompadded { margin-bottom: 0.4em !important; } .itemsContainer > .card > .cardBox { margin-right: 0.8em; } .raised.homeLibraryButton { background: rgba(0, 0, 0, 0.35) !important; filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); } .raised.homeLibraryButton:hover { background: rgba(0, 0, 0, 0.5) !important; } .raised.homeLibraryButton:hover {transition: filter 0.2s} .raised.homeLibraryButton {transition: filter 0.2s} .homeLibraryButton { min-width: 9em; margin: 0.4em; } @media all and (max-width: 26em){ .homeLibraryButton { min-width: 35%; width: auto !important; } } .homeLibraryButton { width: auto !important; } .visualCardBox, .cardImageContainer { box-shadow: none; } #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0.2em !important; } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer, .layout-tv #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0em !important; } .backgroundProgress > div { background: rgba(0, 0, 0, 0); } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; background: #0a0715d6; border-radius: var(--rounding); } .button-flat:hover { background: transparent !important; color: #8564ff !important; } .dashboardSection h3 { margin: .5em .0em .5em .5em; } .dashboardSection .sectionTitleTextButton > .material-icons.material-icons { margin-top: .5em; margin-bottom: .5em; margin-right: .2em; } .listItemIcon { background: #0000 !important; } .listItem-border { border-color: rgba(255, 255, 255, 0) !important; } .formDialogFooter-clear, .formDialogHeader-clear, .innerCardFooterClear { background-color: transparent !important; } .emby-button.show-focus:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 8px, 0.75)); transform: scale(1); } .paper-icon-button-light.show-focus:focus { color: rgba(var(--accent)) !important; } button-flat:hover { color: rgba(var(--accent)) !important; } .raised:hover, .fab:hover, a[data-role="button"]:hover { background: #fff !important; color: #000 !important; font-weight: 800; } .subtitleappearance-preview { background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; } .navMenuOption-selected { color: rgba(var(--accent)); } .mdl-slider-background-lower { background-color: rgba(var(--accent)); } progress::-moz-progress-bar { background-color: rgba(var(--accent),0.75); } progress::-webkit-progress-value { background-color: rgba(var(--accent),0.75); } .taskProgressInner { background: rgba(var(--accent),0.75) !important; } #dashboardPage .playbackProgress > div { background-color: rgba(var(--accent), 0.75) !important; } #dashboardPage .transcodingProgress > div { background-color: rgba(var(--accent), 0.35) !important; } .mdl-slider-background-lower { background-color: var(--accent); z-index: 0; border-radius: 5em; } .mdl-slider::-moz-range-thumb { background: #8546ff; } .mdl-slider::-ms-thumb { background: #8546ff; } .mdl-slider::-webkit-slider-thumb { background: #8546ff; } .iconOsdProgressInner { background: #8546ff; } .countIndicator, .playedIndicator { background: #473391; } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: #8564ff; } .cardOverlayButton-hover .playstatebutton-icon-played { color: #fff; } .material-icons.detailButton-icon.favorite:hover { color: #f00; transition: color 1s; } .ratingbutton-icon-withrating { color: #ff0060; filter: drop-shadow(0px 0px 5px #ff666669) } .material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating:hover { color: #8564ff; transition: color 1s; } #itemDetailPage .button-link { color: inherit; font-weight: 600; transition: color 0.3s; } #itemDetailPage .button-link:hover { color: #8564ff !important; text-decoration: none; } .navMenuOption:hover, .actionSheetMenuItem:hover { background-color: #fff !important; } .emby-checkbox:checked + span + .checkboxOutline, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid #fff !important; } .layout-desktop .mainDetailButtons, .layout-tv .mainDetailButtons { font-size: 1.08em; } .startTimeText, .endTimeText { width: 3.4em; display: block; text-align: center; } .osdTitle { margin-left: 0.5em; } .osdTimeText { } .videoOsdBottom { padding-top: 1em; } .skinHeader-withBackground.osdHeader { height: 5em; } .collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox { background-color: #070710a3; } progress { background: rgba(0, 0, 0, 0.5) !important; } .emby-input, .emby-textarea { padding: .4em .55em; } .emby-select { padding: .35em 1.9em .35em .35em; } .selectArrow { margin-top: 1.05em; } .sectionTitleTextButton > .material-icons { margin-bottom: -0.1em; opacity: 0; } .sectionTitle { margin-left: 0em !important; margin-top: 0.5em !important; font-weight: 600; } .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 3%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap, .layout-tv .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { max-width: 93%; padding: 0; gap: 1%; } #homeTab .emby-scroller { padding-left: 1em; } [dir="ltr"] .padded-left { padding-left: 1em; } .card:hover .indicator.videoIndicator { opacity: 0; } .nowPlayingBarCurrentTime { width: 6em; } .osdTextContainer { margin: 0 !important; margin-top: 0.2em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .headerUserButtonRound { border-radius: 50px !important; } .navMenuOptionText { margin-top: 0; } .formDialogHeaderTitle { margin-left: 1em; } .dialogContentInner { padding: .5em 1em 1em; padding-right: 1em; padding-left: 1em; padding-bottom: 6em; } .listItem-indexnumberleft { margin: 1em; } .listItem { padding-left: 1em; } .layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard { width: 7.5vw; min-width: 9em; } .layout-tv .overflowPortraitCard, .layout-tv .overflowSquareCard { width: 7.5vw; min-width: 9em; } .layout-desktop #itemDetailPage .overflowSquareCard, .layout-tv #itemDetailPage .overflowSquareCard { width: 7.5vw; min-width: 9em; } .layout-desktop #itemDetailPage .overflowBackdropCard, .layout-tv #itemDetailPage .overflowBackdropCard { width: 15.3vw; min-width: 18em; } .skinHeader { display: -webkit-flex; display: flex; } .cardPadder { background-color: #0000 !important; box-shadow: none !important; } .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 600; padding-top: 0.25em; padding-bottom: 0.25em; line-height: 1.05em; } .cardText.cardTextCentered.cardText-secondary { padding-top: 0; padding-bottom: 0.4em; } .skinHeader-withBackground { background-color: transparent !important; } @media all and (min-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 0em; padding-top: 3.5em !important; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard, .layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card.overflowBackdropCard { width: 16vw; } } @media all and (max-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 6em; padding-top: 0.5em !important; } } @media all and (max-width: 100em){ .layout-desktop #indexPage, .layout-tv #indexPage, .layout-desktop #moviesPage, .layout-tv #moviesPage, .layout-desktop #tvRecommendedPage, .layout-tv #tvRecommendedPage, .layout-desktop #musicRecommendedPage, .layout-tv #musicRecommendedPage { margin-top: 2em; padding-top: 0.5em !important; } } .force-scroll { overflow-y: auto; overflow-x: auto; } .raised.homeLibraryButton { box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; border: solid 1px rgba(var(--accent),0) !important; } #homeTab .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x .raised.homeLibraryButton.emby-button .material-icons.homeLibraryIcon { margin-left:0.05em; } @media (min-width: 70em) { .cardOverlayContainer { background-color: rgba(255, 255, 255, 0.05); } } .cardOverlayContainer:hover, .cardOverlayContainer:focus, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff; } .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .cardOverlayContainer { border: solid 1px #fff !important; } .drawer-open { box-shadow: 0px 0px 5px #fff !important; border-right: solid 1px #fff !important; } @supports (backdrop-filter: blur(15px)) { .dialog, .mainDrawer, .toast, .appfooter { backdrop-filter: blur(15px); background-color: #110e1ebd; } .paper-icon-button-light:hover, #itemDetailPage .itemProgressBar, #dashboardPage .backgroundProgress > div { backdrop-filter: blur(0px); } @media all and (max-width: 70em){ .cardOverlayButtonIcon { background-color: rgba(0, 0, 0, 0) !important; } } } .cardOverlayButton-br { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: auto; padding: 0em; gap: 1em; border-radius: 10px; } .cardOverlayButtonIcon { width: 1.1em !important; height: 1.5em !important; display: flex; justify-content: center; align-items: center; } .cardOverlayButton { position: relative; color: #fff; padding: 0.12em; } .cardOverlayContainer > .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3.1em; } .missingIndicator, .unairedIndicator, .detailTable, .primaryImageWrapper > img, .toast, .paperList, .cardContent, .sessionNowPlayingInnerContent, .listItem:hover, .cardImage, .fab, .raised, .multiSelectCheckboxOutline, .itemSelectionPanel, .cardContent-button, .cardContent-shadow, .itemDetailImage, .cardImageContainer, .cardPadder, .listItemImage, .listItemImageButton, .listItemButton, .blurhash-canvas, .dialog, .listItemIcon, .listItem-border, .visualCardBox, .checkboxOutline, .emby-select-withcolor, .chapterThumbTextContainer, .chapterThumbContainer, .chapterThumb, .emby-input, .emby-textarea, .emby-select-withcolor, .nowPlayingPageImage, .upNextDialog-poster-img, .upNextContainer, .cardOverlayButtonIcon, .cardOverlayContainer { border-radius: var(--rounding) !important; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItemImageButton { background: transparent; color: transparent; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .listItem.listItem-largeImage.listItem-withContentWrapper:hover .paper-icon-button-light[data-action="resume"] { background-color: rgba(0, 0, 0, 0.5); color: white; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .paper-icon-button-light[data-action="resume"]:hover { background-color: rgba(0, 0, 0, 0.86) !important; color: var(--accent) !important; } .layout-desktop #itemDetailPage .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast[data-action="link"] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; max-width: 100%; width: 100%; } /*hover zoom*/ .layout-desktop .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus, .layout-desktop .card.portraitCard:hover, .layout-desktop .card.backdropCard:hover, .layout-desktop .card.squareCard:hover { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transform: scale(1.02); transition: transform 1s ease; } .layout-tv .card:focus { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transition: transform 1s ease; } .layout-desktop .homeLibraryButton, .layout-tv .homeLibraryButton { font-weight: 700; border-radius: 0.5em !important; } .layout-desktop .homeLibraryButton:hover, .layout-mobile .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-mobile .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); background: #fff !important; color: #000 !important; transform: revert; font-weight: 700; } .backdropImage { filter: blur(0px) saturate(100%) contrast(110%) brightness(100%); } .listItem { text-align: center; padding: 10px; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast { transition: box-shadow 0.3s; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .itemProgressBarForeground { border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } .detailsGroupItem.genresGroup, .detailsGroupItem.writersGroup, .itemTags { display: none; } .layout-desktop .detailsGroupItem, .trackSelections .selectContainer, .layout-tv .detailsGroupItem, .trackSelections .selectContainer { display: -webkit-flex; display: flex; } .layout-desktop .trackSelections { position: fixed; left: 1.5em; top: 55.6em; width: 27em; font-weight: 500; opacity: 0; animation: fadeTracks 0.5s ease-out 1.25s forwards; } .layout-tv .trackSelections { position: fixed; left: 1.5em; top: 55.6em; width: 27em; font-weight: 500; opacity: 1; animation: none; } @keyframes fadeTracks { from { opacity: 0; } to { opacity: 1; } } .layout-desktop .trackSelections .selectContainer .detailTrackSelect, .layout-tv .trackSelections .selectContainer .detailTrackSelect { text-overflow: ellipsis; text-align: center; padding-left: 1em; padding-right: 1.5em; font-weight: 600; margin-left: 0.5em; transform: translateX(-5.7%); } .layout-desktop .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .trackSelections.focuscontainer-x .selectSource, .layout-tv .trackSelections.focuscontainer-x .selectVideo, .layout-tv .trackSelections.focuscontainer-x .selectAudio, .layout-tv .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .trackSelections.focuscontainer-x .selectSource { margin-left: 3.2em; } #seriesScheduleSection { display: none; } .itemsContainer.padded-left { flex: 1; display: flex; } .layout-desktop #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x, .layout-tv #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x { justify-content: space-evenly; } .itemsContainer.padded-left { flex: 1; } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { width: 22.975em; top: 11.5em; left: 4.3em; min-width: 265px; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .layout-desktop .detailImageContainer .card.backdropCard, .layout-tv .detailImageContainer .card.backdropCard { width: 22.975em; top: 32.5em; left: 4.3em; min-width: 265px; filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)); max-width: unset; } .itemProgressBar { background: rgba(0, 0, 0, 0.25); height: 0.5em; position: absolute; bottom: 0em; left: 0; width: 100%; } .itemProgressBarForeground { background: #8564ff; } .layout-desktop .detailImageContainer .card.portraitCard:hover, .layout-tv .detailImageContainer .card.portraitCard:hover, .layout-desktop .detailImageContainer .card.backdropCard:hover, .layout-tv .detailImageContainer .card.backdropCard:hover, .layout-desktop .detailImageContainer .card.squareCard:hover, .layout-tv .detailImageContainer .card.squareCard:hover { filter: drop-shadow(-6px 2px 8px rgba(0, 0, 0, 0.58)) !important; transform: none; transition: transform 1s ease; } .layout-desktop #itemDetailPage .card.squareCard, .layout-tv #itemDetailPage .card.squareCard { top: 22.8em; } .flex.align-items-center.flex-grow.headerTop { padding-bottom: 20px; height: 2.2em; } @media (min-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-3.65em; position:relative; width:100vw; } } @media (max-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-2em; position:relative; } } @media (max-width:85em) { #moviesTab .layout-desktop .headerTop, #moviesTab .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; } } @media (max-width:959px) { .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; margin-top:-1.3em; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button, .layout-tv .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button { max-width: fit-content; } } @media (orientation: landscape) and (max-width:960px) { .headerTabs { margin-top: -4em !important; } } .mainDrawer { background-color: #110e1ebd; } .layout-desktop .mainDrawer, .layout-tv .mainDrawer { max-width: 14.5vw; } [dir="ltr"] .sidebarHeader { margin-left: 2%; font-weight: 700; text-transform: uppercase; text-align: left; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0.1s; color: black !important; } .navMenuOption { border-radius: var(--rounding) !important; width: 100% !important; margin-left: 0em !important; } [dir="ltr"] .navMenuOption { padding: .75em 0 .75em 1.5em !important; } .navMenuOption:hover .navMenuOptionText { color: black !important; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption, .mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, button.is-emby-button emby-button { background-color: transparent !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { background: #3733531f !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding { display: flex; flex-direction: column; align-items: center; } #myPreferencesMenuPage .sectionTitle { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: fit-content; margin-left: 0 !important; margin-bottom: 1em; border-radius: var(--rounding) !important; background-color: transparent !important; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; text-align: center; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-align: center; width: 100%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: white !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:focus .listItemBodyText { color: white !important; } #myPreferencesMenuPage [dir="ltr"] .listItemIcon { margin: 0 .25em 0 0.25em; } .mdl-slider-background-upper { background: #fff; border-radius: 0em !important; height: 0.85em !important; opacity: 0.2; } .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards, .layout-tv div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin: 0; padding-top: 1.25em; } #albumsTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; } .alphaPicker-fixed { top: 9em; } [dir="ltr"] .alphaPicker-fixed-right { right: max(env(safe-area-inset-right),0.5em); } } #myPreferencesMenuPage .listItemIcon { margin: 0; } .homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { margin-left: auto; } .emby-scrollbuttons-button > .material-icons { display: block; min-height: 24px; min-width: 24px; margin-top: -0.3em; } .layout-desktop .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard, .layout-tv .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; } .layout-desktop .overflowBackdropCard, .layout-tv .overflowBackdropCard { } .verticalSection .card img { width: 100%; height: auto; } .detailVerticalSection .nextUpItems { margin-top: -5px; } .itemName { padding-top: 0em; } .infoText { max-width: 100%; min-width: 0; text-align: left; } .subtitle { margin: .15em 0 .2em -1em; padding-left: 0em; text-align: center; } @media only screen and (max-width: 426px) { .homePage .section1.verticalSection .sectionTitle-cards { margin-right: -3.5em; margin-left: 10px; } } .homeLibraryButton { margin-left: 1em !important; margin-right: 1em !important; min-width: 7em; } .layout-desktop .alphaPickerButton-vertical, .layout-tv .alphaPickerButton-vertical { width: 3vw; height: 3vh; } .layout-desktop .alphaPickerButton, .layout-tv .alphaPickerButton { padding: .2em .4em; } .layout-desktop .alphaPicker-fixed, .layout-tv .alphaPicker-fixed { top: max(env(safe-area-inset-top),20vh); height: 80vh; } @media (min-width: 62.5em) { [dir="ltr"] .alphaPicker-fixed-right { right: 1em; right: max(env(safe-area-inset-right),1vw); z-index: 99; } } .cardOverlayFab-primary { background-color: rgba(0,0,0,0); height: 3em; left: 50%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper { width: 76%; max-width: 76%; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectVideo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectAudio, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSubtitles, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x .selectSource { margin-left: 3.8em; } .layout-desktop .trackSelections .selectContainer { } @media (max-width: 50em) { .trackSelections .selectContainer { overflow: hidden; } } .programCell { background: transparent !important; } .programCell-active { background: rgba(6, 161, 217, 0.05) !important; } .programCell-movie { background: transparent !important; } .guideProgramNameText { font-weight: 400; margin: 0; overflow: hidden; text-overflow: ellipsis; } .channelPrograms { white-space: wrap; } .layout-desktop .verticalSection.section2 .card.overflowBackdropCard, .layout-tv .verticalSection.section2 .card.overflowBackdropCard { } .verticalSection.section0 .card[data-type="CollectionFolder"] .cardBox { background: transparent; } .verticalSection.section0 .textActionButton[data-type="CollectionFolder"], .verticalSection.section0 .textActionButton[data-type="UserView"] { display: none; } .layout-desktop .verticalSection-extrabottompadding, .layout-tv .verticalSection-extrabottompadding { } .layout-desktop .nextUpSection.verticalSection.detailVerticalSection { } .content-primary, .padded-bottom-page, .page, .pageWithAbsoluteTabs .pageTabContent { width: 100%; } .layout-desktop .itemsContainer.vertical-wrap.centered, .layout-tv .itemsContainer.vertical-wrap.centered { width: 96%; margin: 0 auto; margin-right: 2em; } .collectionItems .itemsContainer.padded-left::before { opacity: 0; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: 4.6em; } #childrenContent .listItem-content .listItemBodyText { color: #fff; font-weight: 600; } #childrenContent .listItem-content .secondary.listItemBodyText { color: #ffffffe3; font-weight: 500; justify-content: space-between; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover { filter: blur(0px); opacity: 1; } .cardOverlayButtonIcon, .cardOverlayButtonIcon.material-icons { display: flex; filter: drop-shadow(1px -1px 1px rgba(2, 2, 2, 0.8)); } #skipIntro .emby-button:hover, #skipIntro .emby-button:focus { } #skipIntro { } #skipIntro .emby-button { } .upNextContainer { background: #140f22a3; z-index: 50; } .upNextContainer .raised { background: #8564ff69; border: transparent; padding: 0.8em; padding-left: 2em; padding-right: 2em; margin-left: 0; } .upNextContainer .flex.flex-direction-row.upNextDialog-buttons { gap: calc(100% - 18.93em); margin: 0; max-width: 100%; } .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { } .upNextContainer .raised:hover { background: #fff !important; } .raised.raised-mini.btnHide.upNextDialog-button.emby-button:hover { } /*Iskelderon's cleaner Scenes & Specials grid */ @media (min-width:1800px) and (min-height:900px) { #specialsCollapsible .emby-scroller, #musicVideosCollapsible.emby-scroller, #scenesCollapsible.emby-scroller { } #specialsCollapsible .emby-scrollbuttons, #musicVideosCollapsible .emby-scrollbuttons, #scenesCollapsible .emby-scrollbuttons { } #specialsCollapsible .itemsContainer, #musicVideosCollapsible .itemsContainer, #scenesCollapsible .itemsContainer { } #specialsCollapsible .overflowBackdropCard, #musicVideosCollapsible .overflowBackdropCard, #scenesCollapsible .overflowBackdropCard { } } .osdControls { } .css-4yt2of, .css-139vfv2 { background-color: rgb(20, 16, 28); color: rgb(255, 255, 255); background-image: none; } .previewListItem:hover { color:black !important; } .skip-button { bottom: 7.52em; right: 7.5em; color: #fff; background: #1b0d3c8f; border: 1px solid white; border-radius: 0.8em; padding: 0.5em 1em; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .skip-button:hover, .skip-button:focus { background: #fff; color: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .skip-button-container { bottom: 0; right: -5em; } #myPreferencesMenuPage .sectionTitle { text-decoration: underline; } #myPreferencesPage .readOnlycontent { } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem { justify-content: center; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody { overflow: visible; text-overflow: unset; white-space: wrap; padding-right: 0.75em; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-overflow: visible !important; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary { font-weight: 600; text-align: center; filter: drop-shadow(0px 4px 1px #0005); justify-content: flex-start; width: 100%; gap: 2%; margin-bottom: 0 !important; max-height: 4em; transform: translateY(20%); } .layout-desktop .itemName.originalTitle, .layout-tv .itemName.originalTitle { font-weight: 600; text-align: center; filter: drop-shadow(0px 4px 1px #0005); justify-content: flex-start; width: 61vw; gap: 5%; } .layout-desktop .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 30.3em; left: 5em; width: 22em; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%); font-weight: 600; } .layout-tv .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 10.3em; left: 19.2em; width: 28.3em !important; filter: drop-shadow(-1px 1px 2px black); line-height: unset; transform: translateY(-50%) translateX(-50%); font-weight: 600; } @media (orientation: portrait) { .itemMiscInfo { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.1em; } } button[is="paper-icon-button-light"].cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.cardOverlayFab-primary[data-action="resume"] { background-color: rgba(0, 0, 0, 0.7); height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3em; } .first-imageEditor-buttons, .imageEditor-buttons { margin-top: 0em; margin-bottom: 0em; } @media (min-width: 70em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active.lastFocused { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid #62626287; margin-bottom: 1em; background: #0a071559; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active { background: #fff; padding: 0.656em 1em 0.656em; border-radius: 0.25em; margin-left: 1vw; margin-right: 1vw; border: 1px solid transparent; color: #000; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button .emby-button-foreground { background: transparent; font-weight: 500; border-radius: 0.2em; } .headerTabs .emby-tab-button { transition: 0s !important; width: auto; color: #fff; } #moviesTab .listItem { } #moviesTab .listItemBody.itemAction { } #moviesTab .secondary.listItemMediaInfo { } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #moviesTab .listViewUserDataButtons { justify-content: space-around; } #seriesTab .listItem { } #seriesTab .listItemBody.itemAction { } #seriesTab .secondary.listItemMediaInfo { } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #seriesTab .listViewUserDataButtons { justify-content: space-around; } #episodesTab .listItem { } #episodesTab .listItemBody.itemAction { } #episodesTab .secondary.listItemMediaInfo { } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); justify-content: center !important; display: flex; margin-right: 0; } #episodesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); justify-content: center; } #episodesTab .listViewUserDataButtons { justify-content: space-around; } #genresTab .portraitCard, .squareCard { } } .layout-desktop .headerLeft, .layout-tv .headerLeft { -webkit-flex-grow: 1; flex-grow: 1; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; max-width: fit-content; background: #0a0418b5; border-radius: 0.25em; z-index: 90; background: #110e1ebd; margin-left: 0.1em; } .layout-desktop .headerRight, .layout-tv .headerRight { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; background: #110e1ebd; color: #000 !important; border-radius: 0.25em; transform: translateY(-11%); transition: 0s; z-index: 90; position: fixed; right: 0.7vw; top: 1em; } .headerSelectedPlayer { max-width: 10em; white-space: nowrap; color: #df9aff; filter: drop-shadow(0px 0px 4px var(--accent)); } .navMenuOption { -webkit-align-items: center; align-items: center; border-radius: 0em !important; } #displayPreferencesPage .sectionTitle { } .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .card.portraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .countIndicator.indicator { transition: opacity 0.3s ease; } [dir="ltr"] .emby-scrollbuttons { } #castCollapsible .emby-scrollbuttons.padded-right, #similarCollapsible .emby-scrollbuttons.padded-right, #guestCastCollapsible .emby-scrollbuttons.padded-right, #specialsCollapsible .emby-scrollbuttons.padded-right, #musicVideosCollapsible .emby-scrollbuttons.padded-right, #scenesCollapsible .emby-scrollbuttons.padded-right { } .layout-desktop #homeTab .emby-scroller-container, .layout-tv #homeTab .emby-scroller-container { position: relative; overflow: hidden; } .listItemImage { cursor: pointer; } .listItemImage:hover { box-shadow: 0px 0px 350px #2f21488a; } .skinHeader { pointer-events: none; } .headerButton, .headerTabs.sectionTabs { pointer-events: all; -webkit-filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX { } .collectionItems { } @media (max-width: 1000px) { .raised.homeLibraryButton { } .raised.homeLibraryButton { justify-content: center; border-radius: 0em !important; border: 1px solid #1d102e94 !important; } .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0.5em; display: grid; grid-template-columns: repeat(2, 1fr); /* 2 column layout */ grid-gap: 1em; } } .layout-desktop #homeTab .emby-scrollbuttons.padded-right, .layout-tv #homeTab .emby-scrollbuttons.padded-right { } #homeTab button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: 2em; margin-top: 0.35em; } #homeTab button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0.2; margin-right: -2.1em; margin-top: 0.35em; } #homeTab button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #homeTab button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="left"] { right: 2.5em; position: absolute; top: 0.5em; z-index: 50; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="right"] { right: 0em; position: absolute; top: 0.5em; z-index: 50; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-tv .cardBox.cardBox-bottompadded { } .layout-desktop #listChildrenCollapsible { } .layout-desktop .listItemImage-large, .layout-tv .listItemImage-large { } .layout-desktop #itemDetailPage .listItem-content, .layout-tv #itemDetailPage .listItem-content { border-radius: var(--rounding); overflow: hidden; transition: background 0.15s ease-in-out; flex-flow: column; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -ms-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; } .layout-desktop .listItemImage.listItemImage-large, .layout-tv .listItemImage.listItemImage-large { width: 100%; margin: 0; transition: box-shadow 2s ease-in; } .layout-desktop .listItem-overview.listItemBodyText, .layout-desktop .listItem-overview.listItemBodyText{ height: 5.5em !important; } .layout-desktop #itemDetailPage .listItem, .layout-tv #itemDetailPage .listItem { position: relative; height: -webkit-fit-content; height: -moz-fit-content; overflow: hidden; border-radius: var(--rounding); backdrop-filter: blur(2px) brightness(81%); margin-bottom: 0.5%; box-shadow: 0px 0px 2px rgb(0, 0, 0); background: #0a07159e; } .layout-desktop #itemDetailPage .listItem { width: 27em; } .listItem:hover, .listItem:focus { transition: 0.2s; background: rgba(0, 0, 0, 0.34); } .layout-desktop #itemDetailPage .listItem:hover, .layout-tv #itemDetailPage .listItem:hover { box-shadow: 0px 0px 5px #fff9; } .layout-desktop itemDetailPage .secondary.listItem-overview.listItemBodyText, .layout-tv itemDetailPage .secondary.listItem-overview.listItemBodyText { height: 100%; } .layout-desktop .listItem[data-mediatype="Audio"], .layout-tv .listItem[data-mediatype="Audio"] { padding: 0.5em 1em; border-radius: var(--rounding) !important; -webkit-border-radius: var(--rounding) !important; -moz-border-radius: var(--rounding) !important; -ms-border-radius: var(--rounding) !important; -o-border-radius: var(--rounding) !important; } .layout-desktop .listItemImageButton, .layout-tv .listItemImageButton { margin: auto; } .layout-desktop .playlistSection .listItemBody.itemAction, .layout-desktop .playlistSection .listItem-bottomoverview.secondary, .layout-tv .playlistSection .listItemBody.itemAction, .layout-tv .playlistSection .listItem-bottomoverview.secondary { z-index: 1; } .layout-desktop .listItem-bottomoverview.secondary, .layout-tv .listItem-bottomoverview.secondary { text-align: justify; } .nowPlayingInfoContainer .nowPlayingInfoControls .infoContainer.flex { } .infoContainer, .sliderContainer { -webkit-filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); } .layout-desktop .trackSelections .selectContainer .selectLabel, .layout-tv .trackSelections .selectContainer .selectLabel { text-align: center; } .layout-desktop #itemDetailPage .itemExternalLinks, .layout-tv #itemDetailPage .itemExternalLinks { display: flex; flex-direction: column; align-items: flex-start; position: fixed; left: 2.9em; transform: translateX(-50%) translateY(-100%); top: 35.75em; z-index: 2; padding: 1em; padding-top: 1em; padding-bottom: 1em; min-height: 17.55em; padding-bottom: 3em; padding-top: 0.5em; opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button { background: #14152b45; padding: 7px; border-radius: 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.68)); } .layout-desktop #itemDetailPage .itemExternalLinks .button-link.emby-button:hover, .layout-tv #itemDetailPage .itemExternalLinks .button-link.emby-button:focus { background: #150c27b5; } a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="imdb.com"] { font-size: 0; } a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="trakt.tv"] { font-size: 0; } a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="themoviedb.org"] { font-size: 0; } a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="thetvdb.com"] { font-size: 0; } a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="tvmaze.com"] { font-size: 0; } a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="anidb.net"] { font-size: 0; } a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="anilist.co"] { font-size: 0; } a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="kitsu.app"] { font-size: 0; } a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="theaudiodb.com"] { font-size: 0; } a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="music.apple.com"] { font-size: 0; } a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="musicbrainz.org"] { font-size: 0; } a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="myanimelist.net"] { font-size: 0; } a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="kinopoisk.ru"] { font-size: 0; } a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 40px; height: 20px; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } a[href*="shokoanime.com"] { font-size: 0; } .itemExternalLinks.focuscontainer-x { color: #0002; filter: drop-shadow(-2px 1px 0px #131313c7); } .layout-desktop .mainDetailButtons.focuscontainer-x, .layout-tv .mainDetailButtons.focuscontainer-x { position: fixed; left: 4em; width: 20em; justify-content: space-between; top: 22.75em; z-index: -1; border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 18.3em; border-top-left-radius: 0em; padding-bottom: 0.3em !important; } .layout-desktop .mainDetailButtons.focuscontainer-x::before, .layout-tv .mainDetailButtons.focuscontainer-x::before { content: ''; position: absolute; left: 0; width: 21.25em; height: 2.557777em; background: #0a0715d6; border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 18.5em; border-top-left-radius: 1em; top: -1.25em; box-shadow: 0px 2px 8px #0005; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; padding-bottom: 0em; } .layout-desktop #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.portraitCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .layout-desktop .cardPadder, .layout-tv .cardPadder { border-radius: unset; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat { margin-right: 0em !important; padding: 0 !important; z-index: 5; border-radius: 0.26em !important; margin-top: 0.5em !important; margin-bottom: 0.5em !important; } /* .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { background: #29264a !important; } */ /* D-E-N-U's title fix */ .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle, .layout-tv .itemName.infoText.parentNameLast { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; filter: drop-shadow(-2px 4px 1px #0005); line-height: 1.1em; font-weight: 600; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction .listItemBodyText { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; font-weight: 700; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItemMediaInfo.listItemBodyText { display: flex !important; font-weight: 500; padding-top: 0.5em; } .layout-desktop #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText, .layout-tv #listChildrenCollapsible.verticalSection.detailVerticalSection.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .secondary.listItem-overview.listItemBodyText { font-weight: 500; margin-top: -0.5em; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .layout-desktop .itemName.infoText.originalTitle, .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .parentName.musicParentName.focuscontainer-x { opacity: 0; animation: fadeTitle 0.5s ease-out 1.25s forwards; } @keyframes fadeTitle { from { opacity: 0; } to { opacity: 1; } } .layout-desktop .itemName.infoText.originalTitle, .layout-tv .itemName.infoText.originalTitle { top: 53.6em; left: 4.3em; width: 23em; position: fixed; } .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle { position: absolute; top: -19em; left: 2.1em; width: 20em; } .layout-desktop .detailsGroupItem.genres.content.focuscontainer-x { } .layout-desktop .itemDetailsGroup .detailsGroupItem, .layout-tv .itemDetailsGroup .detailsGroupItem { font-weight: 400; } .layout-desktop .detailsGroupItem, .layout-tv .detailsGroupItem { max-width: 66vw; } .layout-desktop [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer, .layout-tv [dir="ltr"] .trackSelections.focuscontainer-x .selectArrowContainer { right: 2em; top: 0; } .layout-desktop #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: transform 0s color 0.3s; font-weight: 600; } .layout-tv #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1) translateY(-50%); } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1); } .layout-desktop #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata { } .alphaPickerButton:hover { color: rgba(255, 255, 255, 0.75); } .mainDrawer { } .layout-desktop .subtitleSync, .layout-tv .subtitleSync { position: absolute; width: 100%; margin-top: 4em; } .layout-desktop .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName, .layout-tv .musicParentName { position: absolute; left: 11.2em; top: 3em; transform: translateX(-50%); width: 19em; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listViewUserDataButtons { justify-content: space-between; width: 100%; background: transparent; } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-played { filter: drop-shadow(0px 0px 3px #9f93e4ab); } .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .material-icons.check.playstatebutton-icon-unplayed, .layout-desktop #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"], .layout-tv #listChildrenCollapsible #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItemButton.paper-icon-button-light.emby-button[data-isfavorite="false"] { color: #ffffff2e; border-radius: var(--rounding); } /*.dialogContainer .listItem:hover .listItemBody { color: #fff; }*/ .subtitleResults .listItem:hover .listItemBody { color: #fff !important; } .subtitleList .listItem:hover .listItemBody { color: #fff !important; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa !important; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText, .actionSheetScroller .listItem.listItem-button:hover .listItemIcon { color: #000; } .layout-desktop .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened, .layout-tv .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened { min-height: 50vh; max-height: 100vh; } .layout-desktop #songsTab .itemsContainer.vertical-list { } .layout-desktop #songsTab .itemsContainer.vertical-list .listItemBody.itemAction { } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0F031F91; z-index: 0; } .layout-desktop .videoPlayerContainer, .layout-tv .videoPlayerContainer { animation: 1240ms ease-in fadeTitle !important; animation-name: fadeTitle !important; animation-duration: 1240ms !important; animation-timing-function: ease-in !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; } .content-primary { padding-bottom: 5em !important; } .localUsers .cardText-secondary { height: auto; white-space: pre-wrap; } @media (min-width: 70em) { .localUsers .squareCard { } } @media (max-width: 70em) { .localUsers .squareCard { } } @media (min-aspect-ratio: 21/9) and (max-aspect-ratio: 30/9) and (min-width: 3000px) and (max-width: 3440px) { body { } } .sectionTitle.sectionTitle-cards { } #itemDetailPage button[data-direction="left"] { color: #fff; cursor: pointer; opacity: 0; margin-right: 2em; margin-top: 0.35em; } #itemDetailPage button[data-direction="right"] { color: #fff; cursor: pointer; opacity: 0; margin-right: 0em; margin-top: 0.35em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-desktop #itemDetailPage .detailVerticalSection, .layout-tv #itemDetailPage .detailVerticalSection, .layout-desktop #itemDetailPage .itemDetailsGroup, .layout-tv #itemDetailPage .itemDetailsGroup { opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; padding-left: 0.5em; } .layout-desktop .sections.homeSectionsContainer, .layout-tv .sections.homeSectionsContainer { } .layout-desktop #homeTab .verticalSection.section2.emby-scroller-container, .layout-tv #homeTab .verticalSection.section2.emby-scroller-container { } @media (min-width: 1000px) { .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap { display: flex !important; gap: 0.5rem; padding: 0rem; width: calc(100vw - 33em); margin: 0; white-space: wrap !important; flex-direction: row !important; } .layout-desktop #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata, .layout-tv #childrenContent .itemsContainer.padded-right.vertical-wrap .card.overflowPortraitCard.card-hoverable.card-withuserdata { width: 7.63vw; } .layout-desktop .listItem[data-type="Audio"] { width: 97%; margin-left: 0.25vw; } .layout-desktop .playlistSection, .layout-tv .playlistSection { width: 82%; margin-left: 0%; position: fixed; top: 28.5em; height: calc(100vh - 26em); overflow-y: scroll; padding-top: 0.5em; } .layout-desktop .nowPlayingInfoContainer, .layout-tv .nowPlayingInfoContainer { position: fixed; top: 4em; left: 1vw; width: 96.7vw; border-radius: var(--rounding); padding: 1em; box-shadow: 0px 2px 12px #000; background: #110e1ebd; } .layout-desktop .playlistSectionButton, .layout-tv .playlistSectionButton { background: none; color: inherit; width: 19.6em; justify-content: space-evenly; position: fixed; left: 2vw; top: 27.1em; } .layout-desktop #scenesContent .innerCardFooter, .layout-tv #scenesContent .innerCardFooter { height: 1.6em; width: 100%; display: inline-flex; justify-content: space-between; background: #0d0a20bd; } .layout-desktop #scenesCollapsible .itemAction.chapterCard.overflowBackdropCard, .layout-tv #scenesCollapsiblecard .itemAction.chapterCard.overflowBackdropCard { width: 15.3vw; min-width: unset; } .layout-desktop #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #castCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata { width: 7.5vw; } .layout-desktop #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, .layout-tv #guestCastCollapsible .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata { width: 7.5vw; } .layout-desktop #similarCollapsible .card.overflowPortraitCard, .layout-tv #similarCollapsible .card.overflowPortraitCard { width: 7.5vw; } @media (max-height: 1000px) { .layout-desktop body { font-size: 100% !important; } .layout-tv body { font-size: 80% !important; } .spotlightiframe { } .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { } } @media (max-height: 900px) and (max-width: 1500px) { .layout-desktop body { font-size: 80% !important; } } @media (max-width: 1400px) and (min-height: 870px) { .layout-desktop .headerTabs, .layout-tv .headerTabs { } .layout-desktop .emby-tab-button, .layout-desktop .emby-tab-button { background: transparent; border-radius: 0; box-shadow: none; box-sizing: border-box; cursor: pointer; display: inline-block; -webkit-flex-shrink: 0; flex-shrink: 0; font-family: inherit; font-weight: 600; height: auto; line-height: 1.25; min-width: 0; min-width: auto; outline: none; overflow: hidden; position: relative; vertical-align: middle; width: auto; } } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding { } .layout-desktop .pageTitleWithLogo, .layout-tv .pageTitleWithLogo { background-position: 0; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.95)); } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: #0a0418b5; padding-bottom: 0.5em; padding-top: 0.5em; border-top-right-radius: 1em; border-top-left-radius: 1em; width: 98vw; margin-left: 1vw; } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction { align-self: baseline; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent { padding-left: 31.5em; max-width: 62vw; } .layout-desktop [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-tv [dir="ltr"] .detailPagePrimaryContent .detailSectionContent, .layout-desktop [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup, .layout-tv [dir="ltr"] .detailPagePrimaryContent .itemDetailsGroup { padding-left: 0.5em; } .layout-desktop [dir="ltr"] .detailRibbon, .layout-tv [dir="ltr"] .detailRibbon { padding-left: 32em; background: transparent; } [dir="ltr"] .detailPageContent { padding-left: 31.5em; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered { } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { } } @media (min-width: 900px) { .dashboardDocument .mainAnimatedPage:not(.metadataEditorPage) { } } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { height: 4em; margin-top: -4em; position: relative; } .layout-desktop .detailRibbon::before, .layout-tv .detailRibbon::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: #110d20de; background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemBody.itemAction { width: 26em; min-width: 26em; background: transparent; border-radius: 0; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage), .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .listViewUserDataButtons:has(.listItem-largeImage) { justify-content: space-evenly; width: 100% !important; } .layout-desktop #childrenContent .listItemImage, .layout-tv #childrenContent .listItemImage { aspect-ratio: unset; background-size: cover; background-position: center; border-radius: 10px; } .layout-desktop #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding.emby-scroller, .layout-tv #itemDetailPage .padded-top-focusscale.padded-bottom-focusscale.no-padding.emby-scroller { width: 100%; overflow: hidden; } [dir="ltr"] .pageTitle { margin: 0em 0.5em 0 0.5em; } .layout-tv #itemDetailPage .emby-button.show-focus:focus { border: solid 1px #fff; background: transparent !important; color:#8564ff !important; padding-left: 0.5em; padding-right: 0.5em; box-shadow: 0px 0px 5px #fff9; } .layout-tv #itemDetailPage .button-flat.btnPlay.detailButton.emby-button.show-focus:focus { border: solid 1px #fff; background: #fff !important; color:#8564ff !important; } .layout-tv .card.show-focus:focus { transform: scale(0.95); transition: transform 0.1s ease; } .layout-tv .card.show-focus:focus .cardImageContainer, .layout-tv .listItem-focusscale:focus { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff !important; } .layout-tv div.itemMiscInfo.itemMiscInfo-primary { margin-top: 0.3em; } .layout-tv .itemDetailPage { padding-top: 3em !important; } .currentTimeText { padding-left: .8em; padding-right: .8em; color: #fff; } .itemsContainer-tv > .portraitCard, .itemsContainer-tv > .squareCard { width: 15%; margin-bottom: 1em; } .listItemImage-large-tv { height: 10.98em !important; width: 19.52em !important; } .layout-tv .overflowBackdropCard { max-width: 21em; } .layout-tv #itemDetailPage .card.squareCard { top: 22.8em; } .layout-tv #childrenContent .listItemBody { width: 400em; } .layout-desktop .listItem-content, .layout-tv .listItem-content { align-items: center; display: flex; width: 100%; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer { display: inline-flex; white-space: normal; gap: 0.5%; width: calc(100vw - 32.5em); opacity: 0; animation: fadeTitle 0.5s ease-out 0s forwards; flex-direction: row; flex-wrap: wrap; } .layout-tv #itemDetailPage .listItem { } .pageTitleWithLogo { width: 6.25em; height: 1.4em; } @media (max-height: 870px) and (min-width: 1000px) { .pageTitleWithLogo { width: 6.5em; height: 1.2em; } } @media (min-width: 1950px) { .pageTitleWithLogo { width: 7.25em; } } @media (min-width: 3000px) { .pageTitleWithLogo { width: 7.65em; } } .layout-desktop #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv #itemDetailPage .card.backdropCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: 0em !important; } .layout-desktop .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before, .layout-tv .page.libraryPage.itemDetailPage.noSecondaryNavPage.selfBackdropPage.mainAnimatedPage::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient( 90deg, rgb(12, 3, 26, 0.92) 0%, rgba(12, 3, 26, 0.44) 25%, rgba(8, 4, 37, 0) 32% ); background-size: cover; opacity: 1; z-index: -1; background-attachment: fixed; pointer-events: none; } .layout-desktop #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first, .layout-tv #itemDetailPage .nextUpItems.vertical-wrap.padded-right.itemsContainer .cardText.cardTextCentered.cardText-first { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .layout-desktop .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x, .layout-tv .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { padding-right: max(env(safe-area-inset-right),3.3%); width: 98vw; } .paper-icon-button-light[data-action="resume"]:hover { background-color: rgba(0, 0, 0, 0.86) !important; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .padded-left.padded-right.padded-bottom-page.padded-right-withalphapicker { max-width: 96vw; } .layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard.card-hoverable.card-withuserdata { width: 13.5vw; } .layout-tv #indexPage .itemsContainer .card.overflowBackdropCard { width: 13.5vw; } .layout-tv .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX.itemsContainer-tv { transform: none !important; } #indexPage button[data-direction="left"], #indexPage button[data-direction="right"] { opacity: 0; } .layout-desktop #indexPage .itemsContainer, .layout-tv #indexPage .itemsContainer { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem; padding: 0; margin: 0; overflow: visible !important; white-space: normal !important; } .layout-desktop #indexPage .itemsContainer .card.portraitCard, .layout-tv #indexPage .itemsContainer .card.portraitCard { flex: 1 0 calc((100% - (0.5rem * 7)) / 8); } .layout-desktop #indexPage .itemsContainer .card.backdropCard, .layout-tv #indexPage .itemsContainer .card.backdropCard { flex: 1 0 calc((100% - (0.5rem * 5)) / 6); } .layout-desktop .mediaInfoStream, .layout-tv .mediaInfoStream { display: inline-block; margin: 0 3em 0 0; vertical-align: top; width: 20%; } .layout-desktop .sectionTitleContainer-cards, .layout-tv .sectionTitleContainer-cards { padding-top: 1em; } @supports (width:max(1px,1px)) { .emby-scroller { padding-right: max(env(safe-area-inset-right),1.3%); } } @supports (width:max(1px,1px)) { [dir="ltr"] .padded-right { padding-right: max(env(safe-area-inset-right),1.3%); } } .layout-tv #childrenContent .itemsContainer.padded-right.itemsContainer-tv.vertical-list { width: 70vw; } .layout-desktop .itemDetailPage:has(.itemName.parentNameLast) #itemBackdrop, .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) #itemBackdrop { height: calc(100vh + 3em); animation: shrinkBackdrop 1s cubic-bezier(0.25, 0.8, 0.25, 1) 1.25s forwards; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-primary { width: fit-content; min-width: 7em; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .infoWrapper { display: inline-flex; } .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) .itemMiscInfo.itemMiscInfo-secondary { padding: 1.2em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle { animation: none !important; opacity: 1 !important; top: 44em !important; width: 38.7em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks .layout-tv .itemDetailPage:has(.secondary.listItemMediaInfo.listItemBodyText) .itemExternalLinks { animation: none !important; opacity: 1 !important; top: 44em !important; width: 4em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup { width: 41em; left: 1.5em; padding-left: 0; } .layout-tv .trackselections { animation: none; opacity: 1; } @keyframes shrinkBackdrop { 0% { height: 100vh; } 80% { height: 5vh; } 100% { height: 3em; } } .itemBackdrop { height: 0vh; } .detailPageWrapperContainer { min-height: 100vh; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"], .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"] { color: #7c64ff !important; font-weight: 800; } .layout-desktop #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover, .layout-tv #itemDetailPage .nameContainer .itemName.infoText.subtitle.focuscontainer-x .button-link.itemAction.emby-button[data-action="link"]:hover { color: #fff !important; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .cardText.cardTextCentered.cardText-secondary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+15), .layout-tv #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX[data-monitor="videoplayback,markplayed"] .card:nth-child(n+15) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+15), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+15) { display: none !important; } .layout-desktop #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+15), .layout-tv #indexPage .verticalSection .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card[data-type="CollectionFolder"]:nth-child(n+15) { display: revert !important; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x { width: 96.25vw; display: flex; justify-content: space-evenly; padding-left: 0.75em; gap: 1em; } .layout-desktop #indexPage .overflowPortraitCard, .layout-tv #indexPage .overflowPortraitCard { width: 13.5vw; } .layout-desktop #indexPage .overflowSquareCard, .layout-tv #indexPage .overflowSquareCard { width: 13.5vw; } .layout-desktop .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button, .layout-tv .padded-top-focusscale.padded-bottom-focusscale.emby-scroller.scrollX[data-centerfocus="true"] .padded-top.padded-bottom.scrollSlider.focuscontainer-x .raised.emby-button { width: 100%; padding: 0.25em; justify-content: center; border-radius: var(--rounding) !important; margin: 0; background: #19134287; font-weight: 700; } .layout-desktop .itemDetailsGroup, .layout-tv .itemDetailsGroup { margin-top: 1em; } .layout-desktop #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator, .layout-tv #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer:has(.listItem[data-type="Episode"]) .listItem-content .indicators.listItemIndicators .playedIndicator.indicator { opacity: 0; } /* --- Episode Page --- */ .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop, .layout-desktop .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop, .layout-tv .itemDetailPage:has(.itemName.infoText.subtitle) #itemBackdrop { height: 0em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop { height: 3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemDetailsGroup { position: fixed; top: 49.7em; left: 1em; width: 38.4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genres.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writers.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directors.content.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studios.content.focuscontainer-x { text-align: center; width: 34em !important; margin-left: 1.5em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.genresGroup .genresLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.writersGroup .writersLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.directorsGroup .directorsLabel.label, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemDetailsGroup .detailsGroupItem.studiosGroup .studiosLabel.label { text-align: center; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { font-weight: 600; text-align: center; filter: drop-shadow(0px 4px 1px #0005); justify-content: flex-start; padding-top: 0em; width: 100%; gap: 5%; } @media (max-height: 1000px) { .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) div.itemMiscInfo.itemMiscInfo-primary { width: 96%; } } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailLogo { top: 3.3em; width: 33.75em; height: 6em; transition: width 0.2s ease-in-out; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv #itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x { top: 8em !important; width: 28.6em; padding-top: 21.7em; padding-bottom: 0.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before { width: 31.5em; padding-top: 22em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.backdropCard { top: 14.35em !important; width: 34.15em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .button-flat.btnPlay.detailButton.emby-button { margin-left: 0em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .infoWrapper .nameContainer .itemName.infoText.subtitle.focuscontainer-x { top: 10.3em; left: 5.25em; width: 28em; font-weight: 600; } .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .infoWrapper .nameContainer .parentName.focuscontainer-x { width: 18.3em; font-weight: 600; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { top: 36em !important; width: 34.15em !important; left: 4.3em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .overview.detail-clamp-text, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .overview.detail-clamp-text { margin-bottom: 0; padding-top: 0.4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .trackSelections { top: 43.3em !important; width: 38em; left: 1.5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.subtitle.focuscontainer-x { width: 32.6em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailRibbon, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailRibbon { padding-left: 40.5em; height: 4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPagePrimaryContent, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailPageContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPagePrimaryContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailPageContent { padding-left: 40em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .itemName.infoText.originalTitle { width: 34em !important; margin-top: -2.43em !important; left: 4.3em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailSectionContent, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailSectionContent { width: 54vw !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard { top: 14.5em !important; width: 19em; left: 12em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast { border-radius: .2em !important; } .layout-desktop .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem, .layout-tv .itemMiscInfo.itemMiscInfo-primary .mediaInfoItem { margin: 0; font-size: 1.25em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; top: 37.5em !important; height: unset !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1 !important; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x { width: 16.75em; left: 11.15em; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before { width: 17.55em; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x { width: 20.4em !important; left: 4em !important; } .layout-desktop .itemDetailPage:has(.itemAction.textActionButton[data-type="Season"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .mainDetailButtons.focuscontainer-x::before { width: 21.3em !important; } .layout-desktop .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemDetailPage:has(.detailImageContainer .card.squareCard .cardImageContainer.coveredImage.cardContent.lazy.blurhashed.lazy-image-fadein-fast) .itemName.infoText.subtitle.focuscontainer-x { width: 15.6em; left: 11.55em; } .layout-desktop .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemName.infoText.subtitle, .layout-tv .itemDetailPage:has(.listItem.listItem-largeImage.listItem-withContentWrapper[data-type="Episode"]) .itemName.infoText.subtitle { width: 20.2em; top: 5em; } .layout-desktop .collectionItems, .layout-tv .collectionItems { width: 72vw !important; } .layout-desktop .cardImageContainer .language-overlay-container, .layout-tv .cardImageContainer .language-overlay-container { max-width: 2em; margin-bottom: 0.125em; } .layout-desktop .cardImageContainer .genre-overlay-container, .layout-tv .cardImageContainer .genre-overlay-container { margin-right: 1em; opacity: 0; gap: 0.15em; transition: opacity 0.5s ease-in-out; top: unset; bottom: 0.55em; transition-delay: 0.5s; } .layout-desktop #itemDetailPage .detailImageContainer .genre-overlay-container, .layout-tv #itemDetailPage .detailImageContainer .genre-overlay-container { display: none !important; } .layout-desktop .card:hover .genre-overlay-container, .layout-tv .card:hover .genre-overlay-container { opacity: 1; } .layout-desktop .cardImageContainer .quality-overlay-container, .layout-tv .cardImageContainer .quality-overlay-container { } .layout-desktop .genre-tag, .layout-tv .genre-tag { display: flex; align-items: center; justify-content: center; height: auto; width: auto; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); overflow: hidden; background-color: rgba(10, 10, 10, 0.8); color: #E0E0E0; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); max-height: 1em; max-width: fit-content; padding: 0.2em; } .layout-desktop .genre-tag .material-symbols-outlined, .layout-tv .genre-tag .material-symbols-outlined { line-height: 1; } .layout-desktop .genre-tag .genre-text, .layout-tv .genre-tag .genre-text { display: none; white-space: nowrap; font-weight: 500; margin-left: 6px; margin-right: 10px; text-transform: capitalize; } .trackSelections .selectLabel { font-size: 0 !important; position: relative; } .trackSelections .selectLabel::before { font-size: 15pt; line-height: 20px; } .layout-desktop.trackSelections .selectLabel::before, .layout-tv .trackSelections .selectLabel::before { font-size: 1vw; line-height: 1vh; } .selectSourceContainer .selectLabel::before { content: "inventory_2"; font-family: "Material Icons"; } .selectVideoContainer .selectLabel::before { content: "videocam"; font-family: "Material Icons"; } .selectAudioContainer .selectLabel::before { content: "audiotrack"; font-family: "Material Icons"; } .selectSubtitlesContainer .selectLabel::before { content: "subtitles"; font-family: "Material Icons"; } .itemDetailsGroup .label { font-size: 0 !important; position: relative; } .itemDetailsGroup .label::before { font-family: "Material Icons"; font-size: 15pt; line-height: 20px; } .genresGroup .genresLabel::before { content: "theater_comedy"; } .directorsGroup .directorsLabel::before { content: "movie_creation"; } .writersGroup .writersLabel::before { content: "edit"; } .studiosGroup .studiosLabel::before { content: "apartment"; } .layout-desktop .itemDetailsGroup .detailsGroupItem .focuscontainer-x { margin-left: 1em; } .detailPageWrapperContainer { min-height: calc(100vh) !important; } .layout-desktop .infoWrapper, .layout-tv .infoWrapper { -webkit-flex: 1 0 0; flex: 1 0 0; max-width: 76%; min-width: 0; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button, .layout-tv .button-flat.btnPlay.detailButton.emby-button { height: 2em; background: #503eb3 !important; box-shadow: 0px 0px 13px #432b6f7a; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: #39334f !important; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; width: 7.1em; } .layout-desktop .button-flat.btnPlay.detailButton.emby-button:hover .detailButton-content, .layout-tv .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x { width: 20.4em !important; left: 3.9em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .itemExternalLinks, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .itemExternalLinks { top: 47.75em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .mainDetailButtons.focuscontainer-x::before, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .mainDetailButtons.focuscontainer-x::before { width: 21.4em !important; } .layout-desktop .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-desktop .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.nameContainer .parentName.musicParentName.focuscontainer-x) .detailImageContainer .card.backdropCard, .layout-tv .itemDetailPage:has(.card.overflowSquareCard.card-hoverable) .detailImageContainer .card.backdropCard { top: 32em; } .layout-desktop .card:hover .countIndicator { opacity: 0; } .nowPlayingInfoContainerMedia { margin-bottom: 1em; text-align: left; font-size: 1.3em; } .layout-desktop #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons, .layout-tv #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons { margin-top: -4.4em; width: 78.3vw; margin-left: 17vw !important; } .layout-tv #itemDetailPage .itemDetailsGroup .detailsGroupItem .content { margin-left: 1em; } /* 720p resolution */ @media (max-width: 1280px) and (max-height: 720px) { .layout-desktop body, .layout-tv body { font-size: 77% !important; } } /* 1440p resolution */ @media (min-width: 2400px) { .layout-desktop body { font-size: 133.333% !important; } .itemDetailsGroup .label::before, .trackSelections .selectLabel::before { font-size: 27pt; line-height: 35px; } } /* 1440p TV resolution */ @media (min-width: 2400px) { .layout-tv body { font-size: 130% !important; } } /* 4k resolution */ @media (min-width: 3000px) { .layout-desktop body { font-size: 200% !important; } .spotlightiframe { margin-top: -3.5em !important; } .itemDetailsGroup .label::before, .trackSelections .selectLabel::before { font-size: 32pt; line-height: 46px; } } /* 4k TV resolution */ @media (min-width: 3000px) { .layout-tv body { font-size: 173% !important; } .spotlightiframe { margin-top: -3.5em !important; } } .layout-desktop #itemDetailPage .scrollSlider.itemsContainer, .layout-tv #itemDetailPage .scrollSlider.itemsContainer { display: flex !important; flex-wrap: wrap !important; white-space: normal !important; gap: 0.5%; } .layout-desktop #castContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #castContent.scrollSlider.itemsContainer .card:nth-child(n+19), .layout-desktop #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19), .layout-tv #guestCastContent.scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX .card:nth-child(n+19) { display: none !important; } /* --------------- MOBILE --------------- */ .layout-mobile .card { } .layout-mobile body { font-size: 10pt; } .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { } .layout-mobile .trackSelections { max-width: 44em; font-weight: 400; } .layout-mobile .trackSelections .selectContainer .detailTrackSelect { padding-left: 0.5em; text-align: center; padding-right: 0.5em; margin-left: 4%; color: #eee !important; } .layout-mobile p.overview.detail-clamp-text { } .layout-mobile .itemDetailsGroup, .layout-mobile .itemDetailsGroup .detailsGroupItem .emby-button { font-weight: 400; } .layout-mobile .itemDetailsGroup { text-align: center; margin-top: 2em; } .layout-mobile .detailSectionContent, .layout-mobile .detailSection { margin-top: 2em; } .layout-mobile span.homeLibraryText { } .layout-mobile .itemName.infoText.parentNameLast { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } @media (max-width:800x) { .layout-mobile .itemName.infoText.parentNameLast { max-width: 59vw; width: 59vw; } } .layout-mobile .listItemImageButton { background: rgba(0, 0, 0, 0); height: 2em; } .layout-mobile .detailPagePrimaryContainer { background: transparent; padding-left: } .layout-mobile .adminDrawerLogo { border-bottom: none; } @media (orientation: portrait) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: portrait) { .layout-mobile #itemDetailPage .detailLogo { position: absolute; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); display: block; bottom: unset; right: unset; width: 90vw; top: 4em; transform: translateX(-50%); left: 50vw; max-height: 6.7em; } } @media (orientation: portrait) { .itemDetailPage { padding-top: 0 !important; } } @media (orientation: landscape) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: landscape) { .layout-mobile .detailLogo { position: absolute; left: 50vw; top: 12em; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) and (min-width:1000px) and (min-width:800px) { .layout-mobile .detailLogo { position: absolute; left: 61vw; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) { .layout-mobile .detailImageContainer .card { position: absolute !important; top: 20% !important; max-width: 25%; left: 2%; width: 20vw; } .layout-mobile #itemDetailPage .card.backdropCard { width: 65vh; transform: translateY(-26%); max-width: 65vh; margin-top: -33vh; } } .layout-mobile .videoOsdBottom { } @media (orientation: landscape) { .layout-mobile .detailPageContent { padding-left: 25%; padding-right: 0%; } } @media (max-width: 750px) and (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-right: 11vw; } } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-left: 0vw !important; } } .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { padding-top: 1em; } .layout-mobile #homeTab .emby-scroller { padding-left: 0em; } .layout-mobile [dir="ltr"] .padded-left { padding: 0em; left: 0; } @media (orientation: portrait) { .layout-mobile #homeTab .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 768px) and (orientation: landscape) { .portraitCard, .squareCard { width: 12em; } } .layout-mobile .cardOverlayButtonIcon { display: none !important; } .layout-mobile .sectionTitle.sectionTitle-cards { } .layout-mobile .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { } .layout-mobile .headerTabs { -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; -webkit-justify-content: center; justify-content: center; margin-top: -2em; position: relative; } @media (min-width: 70em) { .layout-mobile .headerTabs { margin-top: -4em !important; z-index: -1; } } @media (max-width: 70em) { .layout-mobile .headerTabs { margin-top: -2em !important; z-index: -1; } } .layout-mobile .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; margin-bottom: 0em; } .layout-mobile .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { display: grid; } .layout-mobile .mediaInfoItem { justify-content: center; display: flex; max-width: fit-content; } .layout-mobile .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 14vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { justify-content: space-evenly; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 24vw; padding-top: 2em; } } @media (orientation: portrait) { .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; white-space: normal; gap: 1%; width: 86%; } .layout-mobile .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 10%; } } @media (orientation: landscape) { .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { margin-right: 0%; margin-left: 3.5%; gap: 1.2%; } } @media (orientation: landscape) and (max-width: 1000px) { .layout-mobile .nameContainer { max-width: 100%; margin-left: 0; } } @media (orientation: landscape) and (max-height: 380px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 25%; padding-top: 1em; } } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-right: 0.5em; margin-left: 10px; } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-top: 0.5em !important; margin-left: 10px; } .layout-mobile .alphaPicker-fixed { top: max(env(safe-area-inset-top),24vh); height: 72vh; } .layout-mobile .alphaPickerButton-vertical { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; text-align: center; width: 7vw; height: 2.7vh; margin-bottom: 0.15vh; } @media (orientation: portrait) { .layout-mobile .detailButton { padding-left: 1em !important; padding-right: 1em !important; } } @media (max-width: 768px) and (orientation: portrait) { .mainDetailButtons.focuscontainer-x { margin-bottom: 0em; margin-top: 0em; } } @media (max-width: 32em) and (orientation: portrait) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0; padding-left: 0em; margin-top: 0.5em; width: 100vw; justify-content: space-evenly; margin-left: 0em; } } @media (min-width: 65em) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0em; margin-top: 4em; } } .layout-mobile .mediaInfoOfficialRating { position: relative; } .layout-mobile .backgroundContainer { background-color: transparent; } .layout-mobile .flex.align-items-center.flex-grow.headerTop { width: 100vw; padding-left: 0; } .layout-mobile [dir="ltr"] .pageTitle { margin: 0; } .layout-mobile .itemMiscInfo, .layout-mobile .itemName, .layout-mobile .mainDetailButtons, .layout-mobile .parentName { justify-content: space-evenly; text-align: center; } .layout-mobile #itemDetailPage .tagline { text-align: center; width: 96vw; } .layout-mobile .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr; } @media (max-width: 100em) { .trackSelections .selectContainer { overflow: hidden; margin-left: 1% !important; margin-right: 1% !important; width: 100%; max-width: 92%; } } @media (max-width: 100em) { .layout-mobile .infoWrapper { position: relative; max-height: fit-content; } } .layout-mobile .detailsGroupItem { display: inline-block; margin: 0 0.5em 1.5em !important; width: 98%; } .layout-mobile .selectArrowContainer { top: 0; } .layout-mobile .subtitleSync { margin-top: 2em; } .layout-mobile #itemDetailPage .itemExternalLinks.focuscontainer-x { gap: 5%; display: flex; font-size: 0 !important; width: 100%; justify-content: center; } .layout-mobile .detailRibbon { background: rgba(32,32,32,0); margin-top: calc(100vh - 28em); } .layout-mobile .detailRibbon.padded-left.padded-right::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: #0a071573; background-size: auto; background-size: cover; z-index: -1; width: 100vw; } .layout-mobile [dir="ltr"] .detailPageContent { padding-left: 2vw; } @media (min-width: 30em) and (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 0%; width: 66vw; } } @media (orientation: landscape) and (max-height: 900px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 0%; } } @media (orientation: landscape) { .layout-mobile .itemDetailPage { padding-top: 75vh !important; } } .layout-mobile h1.itemName, .layout-mobile h1.parentName { margin-top: 0em; } @media (orientation:landscape) { .layout-mobile .detailPageSecondaryContainer { padding-top: 1em; } } .layout-mobile .subtitle { margin: .5em .2em .5em .2em; padding-left: 0; } .layout-mobile #itemDetailPage .listViewUserDataButtons { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; } @media (orientation: landscape) { .layout-mobile .detailButton { } } .layout-mobile .detailPagePrimaryContent { padding-top: 0.25em; position: relative; padding-left: 2vw !important; padding-right: 2vw !important; } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContent { padding-left: 2vw !important; padding-right: 2vw !important; } } .layout-mobile [dir="ltr"] .mediaInfoItem { margin: 0 0em 0 0; margin-top: 0.5em; margin-bottom:0.5em; } @media (orientation: portrait) { .layout-mobile div.itemMiscInfo.itemMiscInfo-primary { width: 100vw; margin-left: 0vw; justify-items: center; color: #eee !important; } } @media (orientation: landscape) and (max-width:1400px) { .layout-mobile .detailRibbon { } .layout-mobile [dir="ltr"] .infoWrapper { padding-left: 2%; width: 98%; } .layout-mobile .mainDetailButtons.focuscontainer-x { padding-left: 0; margin-top: 0; } } .layout-mobile .detailPageContent { padding-left: 5%; padding-right: 0; } @media (orientation: landscape){ .layout-mobile .button-flat { } } .layout-mobile .headerLeft { display: -webkit-flex; display: flex; } .layout-mobile .upNextContainer { } .layout-mobile .upNextContainer .flex.flex-direction-row.upNextDialog-mediainfo { gap: 14%; } @media (orientation: portrait) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 28vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 28vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 42vw; } } @media (orientation: landscape) { .layout-mobile .portraitCard, .layout-mobile .overflowPortraitCard { width: 15vw; } .layout-mobile .squareCard, .layout-mobile .overflowSquareCard { width: 15vw; } .layout-mobile .backdropCard, .layout-mobile .overflowBackdropCard { width: 30vw; } } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper { box-shadow: 0px 1px 8px rgb(0, 0, 0); background: #0f0c1a8c; } .layout-mobile #listChildrenCollapsible.verticalSection-extrabottompadding #childrenContent .itemsContainer.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .secondary.listItem-overview.listItemBodyText p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.portraitCard { position: absolute; left: 50%; top: 4em; bottom: unset; right: unset; margin-top: -40vh; width: 21vh; max-width: 50vw; transform: translateX(-50%); } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { position: absolute; left: 1vw; top: -18em; bottom: unset; right: unset; transform: none; width: 98vw; max-width: 98vw; } } @media (max-width: 50em) and (orientation: portrait) { .layout-mobile .detailImageContainer .card.squareCard { position: absolute; top: -21em; bottom: unset; left: 50vw; transform: translateX(-50%); max-width: 98vw; max-height: 32em; width: 20em; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.portraitCard { left: 3vw; top: -5em !important; bottom: unset; right: unset; margin-top: -40vh; transform: none; width: 37vh; max-width: 50vw; } } @media (max-width: 100em) and (orientation: landscape) { .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard { left: 1vw; bottom: unset; top: -1em !important; margin-top: -40vh; transform: none; width: 44vh; max-width: 50vw; } } .layout-mobile p.overview.detail-clamp-text { color: #fff; font-weight: 500; -webkit-line-clamp: unset; text-align: center; margin-bottom: 2em; } .layout-mobile [dir="ltr"] .infoWrapper { padding: 0vw; max-width: 100%; width: 100%; } @media (orientation: landscape) { .layout-mobile [dir="ltr"] .infoWrapper { max-width: 100%; width: 100%; padding: 0; } .layout-mobile .trackSelections.focuscontainer-x { left: 25%; } } .layout-mobile .itemsContainer.padded-right.vertical-wrap { gap: 2%; } .layout-mobile .trackSelections { margin-left: 0; max-width: 100%; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button { width: 22%; height: 2em; background: #503eb3 !important; box-shadow: 0px 0px 13px #432b6f7a; margin-left: -0.9em !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus { background: #fff !important; box-shadow: 0px 0px 11px #ffffff70; color: #39334f !important; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button .detailButton-content { transform-origin: center; } .layout-mobile .button-flat.btnPlay.detailButton.emby-button:focus .detailButton-content { transform: scale(1.25); } ================================================ FILE: finimalism7.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap'); #txtCustomCss, #txtLocalCustomCss { height: 400px !important; max-height: none !important; overflow-y: scroll !important; resize: vertical !important; font-size: 0.85em; } .customCssContainer textarea { height: auto !important; } html { color: #fff; color: rgba(255, 255, 255, 1); } .backgroundContainer, .preload { background-color: #080112; } .itemsContainer.padded-left { position: top; z-index: 1; } .sections.homeSectionsContainer::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(90deg, rgb(8.627% 2.353% 18.431%) 0%, rgb(8.556% 2.353% 18.458%) 6.25%, rgb(8.344% 2.353% 18.536%) 12.5%, rgb(8% 2.353% 18.663%) 18.75%, rgb(7.536% 2.353% 18.833%) 25%, rgb(6.972% 2.353% 19.041%) 31.25%, rgb(6.328% 2.353% 19.279%) 37.5%, rgb(5.629% 2.353% 19.536%) 43.75%, rgb(4.902% 2.353% 19.804%) 50%, rgb(4.175% 2.353% 20.072%) 56.25%, rgb(3.476% 2.353% 20.329%) 62.5%, rgb(2.832% 2.353% 20.566%) 68.75%, rgb(2.268% 2.353% 20.774%) 75%, rgb(1.804% 2.353% 20.945%) 81.25%, rgb(1.46% 2.353% 21.072%) 87.5%, rgb(1.248% 2.353% 21.15%) 93.75%, rgb(1.176% 2.353% 21.176%) 100% ); background-size: cover; opacity: 0; z-index: -1; background-attachment: fixed; pointer-events: none; } .pageTabContent.is-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(90deg, rgb(8.627% 2.353% 18.431%) 0%, rgb(8.556% 2.353% 18.458%) 6.25%, rgb(8.344% 2.353% 18.536%) 12.5%, rgb(8% 2.353% 18.663%) 18.75%, rgb(7.536% 2.353% 18.833%) 25%, rgb(6.972% 2.353% 19.041%) 31.25%, rgb(6.328% 2.353% 19.279%) 37.5%, rgb(5.629% 2.353% 19.536%) 43.75%, rgb(4.902% 2.353% 19.804%) 50%, rgb(4.175% 2.353% 20.072%) 56.25%, rgb(3.476% 2.353% 20.329%) 62.5%, rgb(2.832% 2.353% 20.566%) 68.75%, rgb(2.268% 2.353% 20.774%) 75%, rgb(1.804% 2.353% 20.945%) 81.25%, rgb(1.46% 2.353% 21.072%) 87.5%, rgb(1.248% 2.353% 21.15%) 93.75%, rgb(1.176% 2.353% 21.176%) 100% ); background-size: cover; opacity: 0.95; filter: brightness(50%); z-index: -1; background-attachment: fixed; } .detailPagePrimaryContainer { position: relative; z-index: 2; } .detailPagePrimaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgb(8.627% 2.353% 18.431%) 0%, rgb(8.556% 2.353% 18.458%) 6.25%, rgb(8.344% 2.353% 18.536%) 12.5%, rgb(8% 2.353% 18.663%) 18.75%, rgb(7.536% 2.353% 18.833%) 25%, rgb(6.972% 2.353% 19.041%) 31.25%, rgb(6.328% 2.353% 19.279%) 37.5%, rgb(5.629% 2.353% 19.536%) 43.75%, rgb(4.902% 2.353% 19.804%) 50%, rgb(4.175% 2.353% 20.072%) 56.25%, rgb(3.476% 2.353% 20.329%) 62.5%, rgb(2.832% 2.353% 20.566%) 68.75%, rgb(2.268% 2.353% 20.774%) 75%, rgb(1.804% 2.353% 20.945%) 81.25%, rgb(1.46% 2.353% 21.072%) 87.5%, rgb(1.248% 2.353% 21.15%) 93.75%, rgb(1.176% 2.353% 21.176%) 100% ); background-size: cover; opacity: 0.85; z-index: -1; filter: saturate(100%) brightness(50%); } .detailPageSecondaryContainer { position: relative; z-index: 1; } .detailPageSecondaryContainer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgb(8.627% 2.353% 18.431%) 0%, rgb(8.556% 2.353% 18.458%) 6.25%, rgb(8.344% 2.353% 18.536%) 12.5%, rgb(8% 2.353% 18.663%) 18.75%, rgb(7.536% 2.353% 18.833%) 25%, rgb(6.972% 2.353% 19.041%) 31.25%, rgb(6.328% 2.353% 19.279%) 37.5%, rgb(5.629% 2.353% 19.536%) 43.75%, rgb(4.902% 2.353% 19.804%) 50%, rgb(4.175% 2.353% 20.072%) 56.25%, rgb(3.476% 2.353% 20.329%) 62.5%, rgb(2.832% 2.353% 20.566%) 68.75%, rgb(2.268% 2.353% 20.774%) 75%, rgb(1.804% 2.353% 20.945%) 81.25%, rgb(1.46% 2.353% 21.072%) 87.5%, rgb(1.248% 2.353% 21.15%) 93.75%, rgb(1.176% 2.353% 21.176%) 100% ); background-size: cover; opacity: 0.925; z-index: -1; filter: saturate(60%) brightness(70%) contrast(100%); } .headerTop { padding: 0.95em; } body { font-family: "Sofia Sans", sans-serif; font-size: 12pt; } .layout-mobile body { font-size: 12pt; } h2 { font-size: 1.3em; } .layout-desktop .card, .layout-tv .card { } .cardScalable { margin-bottom: 0.2em; } .textActionButton { transition: color 0.3s, font-weight 0.3s; } .textActionButton:hover { -webkit-text-decoration: none; text-decoration: none; color: #15afe6; font-weight: 700; } .cardText-secondary, .fieldDescription, .guide-programNameCaret, .listItem .secondary, .nowPlayingBarSecondaryText, .programSecondaryTitle, .secondaryText { color: rgba(255, 255, 255, 0.75); } .layout-mobile .card { font-size: 0.85em !important; } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { padding-left: max(env(safe-area-inset-left),3.7%); padding-right: 7.5%; padding-right: max(env(safe-area-inset-right),3.5%); } } .parentName { margin: 0 0 0; } .hide + .detailPageWrapperContainer .itemName { display: none !important; } div.itemMiscInfo.itemMiscInfo-primary { font-size: 12pt; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary { font-size: 12pt; } p.overview.detail-clamp-text { font-size: 1.1em; color: #fff; font-weight: 400; } #itemDetailPage .tagline { font-weight: 600; font-size: 1.15em; } .layout-mobile p.overview.detail-clamp-text { font-size: 0.85em; } .layout-mobile .itemDetailsGroup { font-size: 0.85em; } span.homeLibraryText { font-family: "Sofia Sans", sans-serif; font-size: 1.2em; transform: translateY(5%); } .layout-mobile span.homeLibraryText { font-size: 12pt; } .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { background: rgba(0, 0, 0, 0); right: 0; left: 0; top: 0; bottom: 0; margin: 0; } .itemProgressBarForeground { background: linear-gradient(90deg, rgb(1, 9, 40) 0%, rgb(36, 75, 147) 45%, rgb(23, 125, 255) 85%, rgb(24, 170, 222) 100%); } .itemBackdrop { height: 25.5em !important; display: inherit; } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { margin-top: -1.925em; padding-top: 0em; padding-bottom: 0em; } .layout-tv .detailRibbon { margin-top: -4em !important; } .layout-desktop .detailImageContainer .card, .layout-tv .detailImageContainer .card { top: 18vh; } [dir="ltr"] .detailPageContent { padding-left: 31em; padding-right: 0%; } .layout-desktop .itemName.infoText.parentNameLast, .layout-tv .itemName.infoText.parentNameLast { display: block; text-align: center; } .layout-desktop [dir="ltr"] .detailPagePrimaryContainer, .layout-tv [dir="ltr"] .detailPagePrimaryContainer { padding-left: 31em; } .hide+.detailPageWrapperContainer .itemName { display: block !important; } .itemName { margin: .5em 0 !important; } .layout-mobile .itemName.infoText.parentNameLast { display: block; font-size: 1.3em; } :root {--selection: 170, 95, 200;} .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0); } .emby-select-withcolor > option { color: inherit; background: #11091d; } #user_usage_report_table, .detailTable { background: rgba(0,0,0,.5); } .detailTableBodyRow-shaded { background: #0000 !important; } .infoBanner { background: #101010; } .navMenuOptionText { margin-top: 0; } .backgroundProgress > div { background-color: #0000; } .visualCardBox, .cardImageContainer { box-shadow: none; } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(120, 120, 120, 0.6); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: white; } .dashboardSection h3 { margin-left: 0.5em; } .sessionCardFooter { border: none; } .paperList, .visualCardBox { background-color: rgba(0, 0, 0, 0.5); } .listItem-border { border-color: rgba(255, 255, 255, 0) !important; } fieldset { border: 1px solid rgba(4, 4, 4, 0.8); border-radius: 0.4em; } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { background: rgba(255,255,255,.1) !important; height: 6em; } .itemBackdrop::after { background: rgba(0,0,0,.1) !important; } .appfooter { background: rgba(0,0,0,0.9); } .button-flat:hover { background: rgba(0,0,0,0.9); } progress { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.22); } progress::-webkit-progress-bar { background: rgba(0, 0, 0, 0.5) !important; border: 0px solid rgba(255, 255, 255, 0.22); } progress::-moz-progress-bar { background-color: rgba(255,255,255,0.75); } progress::-webkit-progress-value { background-color: rgba(255,255,255,0.75); } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .taskProgressOuter { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.22); } .taskProgressInner { background: rgba(255,255,255,0.75) !important; } #scheduledTasksPage span { color: rgba(255,255,255,0.75) !important; } #loginPage { background: url(https://i.ibb.co/Qv2NWWPs/bg.jpg) !important; background-size: cover !important; } #loginPage .visualLoginForm { width: 26.5em !important; } #loginPage .visualLoginForm h1 { padding-top: 1em; } .innerCardFooter { background: #2f1b57b8; box-shadow: none; color: rgb(--accent); } .countIndicator, .playedIndicator { background: linear-gradient(90deg, rgb(40.392% 6.275% 50.98%) 0%, rgb(40.023% 6.794% 51.27%) 6.25%, rgb(38.929% 8.334% 52.13%) 12.5%, rgb(37.154% 10.835% 53.525%) 18.75%, rgb(34.764% 14.2% 55.403%) 25%, rgb(31.852% 18.3% 57.69%) 31.25%, rgb(28.53% 22.978% 60.301%) 37.5%, rgb(24.925% 28.054% 63.133%) 43.75%, rgb(21.176% 33.333% 66.078%) 50%, rgb(17.428% 38.612% 69.024%) 56.25%, rgb(13.823% 43.688% 71.856%) 62.5%, rgb(10.501% 48.366% 74.466%) 68.75%, rgb(7.589% 52.467% 76.754%) 75%, rgb(5.199% 55.832% 78.632%) 81.25%, rgb(3.423% 58.332% 80.027%) 87.5%, rgb(2.33% 59.872% 80.886%) 93.75%, rgb(1.961% 60.392% 81.176%) 100% ); box-shadow: none; color: rgb(--accent); } .subtitleappearance-preview { background: linear-gradient(140deg,#444,#111) !important; } .blurhash-canvas { filter: opacity(60%) saturate(60%); } .navMenuOption-selected, .selectionCommandsPanel { background: #101010 !important; } .mainDrawer { background-color: rgba(0, 0, 0, 0.8); } .raised, .fab, a[data-role="button"] { background: rgba(4, 4, 4, 0.8) !important; transition: all 0.2s !important; } .raised:hover, .fab:hover, .navMenuOption:hover, .actionSheetMenuItem:hover { background: rgba(80, 80, 80, 0.8) !important; color: #fff !important; } .paper-icon-button-light:hover { background-color: rgba(0, 0, 0, 0) !important; } .navMenuOption-selected, .selectionCommandsPanel { background: #101010 !important; } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .ratingbutton-icon-withrating, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link{ color: rgba(120, 120, 120, 0.6) !important; } progress { background: rgba(0, 0, 0, 0.5) !important; } /*Theme syncplay*/ .syncPlayIconCircle { color: rgba(255,255,255,1) !important; text-shadow: none !important; } @-webkit-keyframes pulse { 0% { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,.3); } 70% { -webkit-transform:scale(1); transform:scale(1); color:rgba(0,0,0,.6); background:rgba(0,0,0,0); box-shadow:0 0 0 60px rgba(0,0,0,0); } to { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,0); } } @keyframes pulse { 0% { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,.3); } 70% { -webkit-transform:scale(1); transform:scale(1); color:rgba(0,0,0,.6); background:rgba(0,0,0,0); box-shadow:0 0 0 60px rgba(0,0,0,0); } to { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,0); } } @-webkit-keyframes infinite-pulse { 0% { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,.3); } 70% { -webkit-transform:scale(1); transform:scale(1); color:rgba(0,0,0,.6); background:rgba(0,0,0,0); box-shadow:0 0 0 60px rgba(0,0,0,0); } to { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,0); } } @keyframes infinite-pulse { 0% { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,.3); } 70% { -webkit-transform:scale(1); transform:scale(1); color:rgba(0,0,0,.6); background:rgba(0,0,0,0); box-shadow:0 0 0 60px rgba(0,0,0,0); } to { -webkit-transform:scale(.95); transform:scale(.95); color:rgba(0,0,0,.7); background:rgba(0,0,0,.3); box-shadow:0 0 0 0 rgba(0,0,0,0); } } .css-17c09up.Mui-selected, .css-1ip8vbj.Mui-selected { background-color: rgb(33, 22, 89) !important; } .css-17c09up:hover, .css-1ip8vbj.Mui-selected:hover, .css-1ip8vbj:hover { text-decoration: none; background-color: rgba(61, 53, 108, 0.53) !important; } .mdl-spinner__layer-1 { border-color: rgba(255, 255, 255, 1); } .mdl-spinner__layer-2 { border-color: rgba(128, 128, 128, 1); } .mdl-spinner__layer-3 { border-color: rgba(4, 4, 4, 1); } .mdl-spinner__layer-4 { border-color: rgba(0, 0, 0, 1); } ::-webkit-scrollbar-track-piece { background-color: #0000; } ::-webkit-scrollbar-corner { background-color: #0000; } ::-webkit-scrollbar-thumb { background: rgba(120,120,120,0.6) !important; border-radius: var(--rounding); } * { scrollbar-color: rgba(120,120,120,0.6) #0000 !important; } .defaultCardBackground1 { background-color: #3d3479ba; } .defaultCardBackground2 { background-color: #352b78ba; } .defaultCardBackground3 { background-color: #2d2176ba; } .defaultCardBackground4 { background-color: #352c67ba; } .defaultCardBackground5 { background-color: #2c1f78ba; } .raised:hover, .fab:hover, a[data-role="button"]:hover { background: linear-gradient(to right, rgba(168, 6, 217, 0.3), rgba(6, 161, 217, 0.6)) !important; } .subtitleappearance-preview { background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; } .navMenuOption-selected { color: rgba(var(--accent)); } .mdl-slider-background-lower { background-color: rgba(var(--accent)); } .playbackProgress>div { background-color: rgba(var(--accent),0.75); } progress::-moz-progress-bar { background-color: rgba(var(--accent),0.75); } progress::-webkit-progress-value { background-color: rgba(var(--accent),0.75); } .taskProgressInner { background: rgba(var(--accent),0.75) !important; } .transcodingProgress>div, .itemProgressBarForeground { background-color: rgba(var(--accent),0.35); } .mdl-slider-background-lower { background-color: rgb(var(--accent)); } .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)); } .mdl-slider::-ms-thumb { background: rgb(var(--accent)); } .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)); } .iconOsdProgressInner { background: rgb(var(--accent)); } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .ratingbutton-icon-withrating, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: rgba(var(--accent)) !important; } #itemDetailPage .button-link { color: inherit !important; } .navMenuOption:hover, .actionSheetMenuItem:hover { background-color: linear-gradient(to right, rgba(168, 6, 217, 0.3), rgba(6, 161, 217, 0.6)) !important; } .upNextDialog-countdownText { color: rgba(var(--accent)); } .mdl-spinner__layer-1 { border-color: rgba(var(--accent)); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(var(--accent), 0.5); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: rgba(var(--accent)); } ::-webkit-scrollbar-thumb { background: rgba(var(--accent),0.8) !important; } * { scrollbar-color: rgba(var(--accent),0.8) #0000 !important; } .syncPlayIconCircle { color: rgba(var(--accent),1) !important; text-shadow: none !important; } .innerCardFooter { margin: .5em; } .countIndicator { background: linear-gradient(90deg, rgb(40.392% 6.275% 50.98%) 0%, rgb(40.023% 6.794% 51.27%) 6.25%, rgb(38.929% 8.334% 52.13%) 12.5%, rgb(37.154% 10.835% 53.525%) 18.75%, rgb(34.764% 14.2% 55.403%) 25%, rgb(31.852% 18.3% 57.69%) 31.25%, rgb(28.53% 22.978% 60.301%) 37.5%, rgb(24.925% 28.054% 63.133%) 43.75%, rgb(21.176% 33.333% 66.078%) 50%, rgb(17.428% 38.612% 69.024%) 56.25%, rgb(13.823% 43.688% 71.856%) 62.5%, rgb(10.501% 48.366% 74.466%) 68.75%, rgb(7.589% 52.467% 76.754%) 75%, rgb(5.199% 55.832% 78.632%) 81.25%, rgb(3.423% 58.332% 80.027%) 87.5%, rgb(2.33% 59.872% 80.886%) 93.75%, rgb(1.961% 60.392% 81.176%) 100% ); box-shadow: none; } .mediaSourceIndicator { background: rgba(0,0,0,0.4); box-shadow: none; border-radius: var(--rounding); } .emby-input, .emby-textarea { padding: .4em .55em; } .emby-select { padding: .35em 1.9em .35em .35em; } .selectArrow { margin-top: 1.05em; } .checkboxOutline, .emby-input, .emby-textarea, .emby-select-withcolor { background: rgba(0, 0, 0, 0.2); border: 0.01em solid rgba(255, 255, 255, 0.22); } .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor:focus { background: rgba(0, 0 , 0, 0.4) !important; } .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid rgba(var(--selection), 0.8) !important; } .emby-checkbox:checked + span + .checkboxOutline { background-color: rgba(0, 0 , 0, 0.4) !important; border: 0.01em solid rgba(var(--selection), 0.8) !important; } progress { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.22); } progress::-webkit-progress-bar { background: rgba(0, 0, 0, 0.5) !important; border: 0px solid rgba(255, 255, 255, 0.22); } progress::-moz-progress-bar { background-color: rgba(255,255,255,0.75); } progress::-webkit-progress-value { background-color: rgba(255,255,255,0.75); } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .taskProgressOuter { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.22); } .taskProgressInner { background: rgba(255,255,255,0.75) !important; } #scheduledTasksPage span { color: rgba(255,255,255,0.75) !important; } #loginPage .readOnlyContent, #loginPage form { max-width: 22em; padding-left: 3em; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-top: 8em; } #loginPage .raised.cancel.block.btnForgotPassword.emby-button { display: none; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-left: 50%; margin-right: auto; background: rgba(0, 0, 0, 0.35); width: 24em; border-radius: var(--rounding); transform: translateX(-50%); } #loginPage .squareCard { width: 33%; } #loginPage form { padding-top: 4em; } #loginPage .sectionTitle{ margin-left: auto !important; margin-right: auto !important; margin-bottom: 1.2em !important; } #loginPage { background: url(https://i.ibb.co/Qv2NWWPs/bg.jpg) !important; background-size: cover !important; } .listItemImageButton { margin: auto; font-size: 1.6em !important; } #childrenContent .starRatingContainer { display: none; } .missingIndicator, .unairedIndicator { background: #ae3030eb; padding: .3em .6em; color: #fff; } .layout-mobile .listItemImageButton { background: rgba(0, 0, 0, 0); } /*Rounded corners on pretty much everything*/ .detailButton { border-radius: 50%; } progress { border-radius: var(--rounding); } progress::-webkit-progress-bar { border-radius: var(--rounding); } progress::-moz-progress-bar { border-radius: var(--rounding); } progress::-webkit-progress-value { border-radius: var(--rounding); } .taskProgressOuter, .taskProgressInner { border-radius: var(--rounding) !important; } .formDialogHeader { border-top-left-radius: var(--rounding); border-top-right-radius: var(--rounding); } .formDialogFooter { border-bottom-left-radius: var(--rounding); border-bottom-right-radius: var(--rounding); } .cardOverlayContainer { border-radius: var(--rounding) !important; } .missingIndicator, .unairedIndicator, .detailTable, .primaryImageWrapper > img, .toast, .paperList, .cardContent, .sessionNowPlayingInnerContent, .listItem:hover, .cardImage, .fab, .raised, .multiSelectCheckboxOutline, .itemSelectionPanel, .cardContent-button, .cardContent-shadow, .itemDetailImage, .cardImageContainer, .cardPadder, .listItemImage, .listItemImageButton, .listItemButton, .blurhash-canvas, .dialog, .countIndicator, .playedIndicator, .listItemIcon, .listItem-border, .visualCardBox, .checkboxOutline, .emby-select-withcolor, .chapterThumbTextContainer, .chapterThumbContainer, .chapterThumb, .emby-input, .emby-textarea, .emby-select-withcolor, .nowPlayingPageImage, .upNextDialog-poster-img, .upNextContainer, .cardOverlayButtonIcon { border-radius: var(--rounding) !important; } .osdPoster img { border-radius: var(--rounding); border: none; } .mdl-slider::-moz-range-thumb { border-radius: var(--rounding); } .mdl-slider::-ms-thumb { border-radius: var(--rounding); } .mdl-slider::-webkit-slider-thumb { border-radius: var(--rounding); } div[data-role="controlgroup"] a[data-role="button"]:first-child { border-bottom-left-radius: var(--rounding); border-top-left-radius: var(--rounding); } div[data-role="controlgroup"] a[data-role="button"]:last-child { border-bottom-right-radius: var(--rounding); border-top-right-radius: var(--rounding); } #dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent { border-radius: var(--rounding) var(--rounding) 0 0 !important; } #divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent { border-radius: var(--rounding) var(--rounding) 0 0 !important; } #userProfilesPage .cardImage, #userProfilesPage .cardContent { border-radius: var(--rounding) var(--rounding) 0 0 !important; } .emby-textarea { font-family: monospace; font-size: 12pt; } .card.show-animation:focus>.cardBox { -webkit-transform:scale(1.1); transform:scale(1.1); } div[data-role="controlgroup"] a.ui-btn-active { background: rgba(0, 0, 0, 0.5) !important; color: orange !important; } div[data-role="controlgroup"] a[data-role="button"] { display: table-cell !important; margin: 0 !important; } .layout-mobile .detailPagePrimaryContainer { background: transparent; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: } .layout-mobile .adminDrawerLogo { border-bottom: none; } .layout-mobile .itemBackdrop { margin-top: 0rem; } .layout-mobile .detailPageContent { padding-left: 5%; padding-right: 0%; } @media (orientation: portrait) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: portrait) { .layout-mobile #itemDetailPage .detailLogo { position: static; margin-left: 40%; display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; background-position: 0 70%; margin-top: -18vh; margin-bottom: 1vh; width: 50vw; } } @media (orientation: portrait) { .itemDetailPage { padding-top: 13em !important; } } @media (max-width: 62.5em) { .layout-desktop .detailPageWrapperContainer, .layout-tv .detailPageWrapperContainer { margin-top: 0em !important; } } /* Landscape orientation styles */ @media (orientation: landscape) { .layout-mobile .itemBackdrop { display: block; -webkit-animation: backdrop-fadein .8s ease-in normal both; animation: backdrop-fadein .8s ease-in normal both; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100vh !important; position: fixed !important; top: 0; margin-top: 0rem; left: 0; width: 100%; z-index: -1; } } @media (orientation: landscape) { .layout-desktop .detailLogo, .layout-tv .detailLogo { position: absolute; left: 60vw; margin-right: 10%; display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); width: 64vw; max-height: 21em; height: 26vw; top: 10em; margin-bottom: 7.7em; transform: translateX(-50%); } .layout-tv .detailLogo { margin-top: -3em; } } .layout-desktop #itemDetailPage .nameContainer { position: fixed; left: 2em; top: 37.25em; width: 26em; justify-content: center; text-align: center; height: 4.8em; } .layout-tv #itemDetailPage .nameContainer { position: fixed; left: 2.8em; top: 35em; width: 22em; justify-content: center; text-align: center; height: 4.8em; } .layout-desktop .skinHeader, .layout-tv .skinHeader { position: fixed; top: -0.5em; } @media (orientation: landscape) { .layout-mobile .detailLogo { position: absolute; left: 65%; top: 26%; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; background-position: 0 70%; margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) and (min-width:1000px) and (min-width:800px) { .layout-mobile .detailLogo { position: absolute; left: 65%; top: 8%; transform: translate(-50%, -50%); display: block; -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); flex-shrink: 0; background-position: 0 70%; margin: 0; width: 50vw !important; height: 30vh !important; } } @media (orientation: landscape) { .itemDetailPage { padding-top: 13em !important; } } /*Stop covers from being scrolled on desktop*/ .layout-desktop .detailImageContainer .card { position: fixed !important; top: 10% !important; } .layout-tv .detailImageContainer .card { position: fixed !important; top: 50%; } @media (orientation: landscape) { .layout-mobile .detailImageContainer .card { position: fixed !important; top: 20% !important; max-width: 21%; } .layout-mobile #itemDetailPage .card.backdropCard { width:13em; position:absolute!important; } } .headerTabs.sectionTabs { text-size-adjust: 110%; font-size: 110%; } .pageTitle { margin-top: auto; margin-bottom: auto; filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } .progressring-spiner { border-color: rgba(var(--accent)); border-width: .35em; } .progressring { margin: .4em; } .progressring-bg { display: none; } #itemDetailPage .button-link { color: inherit !important; } .cardIndicators, .listItemIndicators { right: 0.5em; top: 0.5em; } .mediaSourceIndicator { left: 0.5em; top: 0.5em; } @media all and (min-width: 70em){ .cardOverlayFab-primary { background-color: #00000000; } .cardOverlayButtonIcon { background-color: #00000000 !important; } .cardOverlayContainer { background-color: rgba(255, 255, 255, 0.05); } } @media all and (max-width: 70em){ .cardOverlayFab-primary { background-color: #00000000; } .cardOverlayButtonIcon { background-color: #00000000 !important; } .cardOverlayContainer { background-color: rgba(0, 0, 0, 0.5); } .cardOverlayButton { padding: 0.25em; } } .nowPlayingPageImage { border: none; } .upNextDialog-countdownText { color: white; } .chapterThumb { height: 14vh; min-width: 14vh; box-shadow: 0 0 1.9vh #000; } .chapterThumbText { font-size: 1em; } .sliderBubble { background: #0000; } .chapterThumbTextContainer { right: auto; bottom: 4px; padding: .25em 0.7em; } .chapterThumbContainer { box-shadow: 0 0 1.9vh #000; } .sliderBubble { -webkit-transform: translate3d(-50%,-108%,0); transform: translate3d(-50%,-108%,0); } .cardBox-bottompadded { margin-bottom: 0.4em !important; } .itemsContainer > .card > .cardBox { margin-right: 0.8em; } .raised.homeLibraryButton { background: rgba(0, 0, 0, 0.35) !important; filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); } .raised.homeLibraryButton:hover { background: rgba(0, 0, 0, 0.5) !important; } .raised.homeLibraryButton:hover {transition: filter 0.2s} .raised.homeLibraryButton {transition: filter 0.2s} .homeLibraryButton { min-width: 9em; margin: 0.4em; } @media all and (max-width: 26em){ .homeLibraryButton { min-width: 35%; width: auto !important; } } .homeLibraryButton { width: auto !important; } .listItem:hover, .listItem:focus { transition: 0.2s; background: rgba(0, 0, 0, 0.4); } .visualCardBox, .cardImageContainer { box-shadow: none; } #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0.2em !important; } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer, .layout-tv #itemDetailPage .detailImageContainer.padded-left .cardScalable .cardImageContainer { border-radius: 0em !important; } .backgroundProgress > div { background: rgba(0, 0, 0, 0); } .itemProgressBar { background: rgba(0, 0, 0, 0.25); height: .5em; position: absolute; bottom: 0em; left: 0; width: 100%; } #divRunningTasks span { color: rgba(255,255,255,0.75) !important; } .itemsContainer > .card > .cardBox { margin-left: 0.6em !important; margin-right: 0.2em !important; } .button-flat:hover { background: transparent !important; color: #00a4dc !important; } .dashboardSection h3 { margin: .5em .0em .5em .5em; } .dashboardSection .sectionTitleTextButton > .material-icons.material-icons { margin-top: .5em; margin-bottom: .5em; margin-right: .2em; } .listItemIcon { background: #0000 !important; } .listItem-border { border-color: rgba(255, 255, 255, 0) !important; } .formDialogFooter-clear, .formDialogHeader-clear, .innerCardFooterClear { background-color: transparent !important; } .emby-button.show-focus:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 8px, 0.75)); transform: scale(1.5); } .paper-icon-button-light.show-focus:focus { color: rgba(var(--accent)) !important; } button-flat:hover { color: rgba(var(--accent)) !important; } .raised:hover, .fab:hover, a[data-role="button"]:hover { background: #fff !important; color: #000 !important; font-weight: 800; } .subtitleappearance-preview { background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; } .navMenuOption-selected { color: rgba(var(--accent)); } .mdl-slider-background-lower { background-color: rgba(var(--accent)); } progress::-moz-progress-bar { background-color: rgba(var(--accent),0.75); } progress::-webkit-progress-value { background-color: rgba(var(--accent),0.75); } .taskProgressInner { background: rgba(var(--accent),0.75) !important; } #dashboardPage .playbackProgress > div { background-color: rgba(var(--accent), 0.75) !important; } #dashboardPage .transcodingProgress > div { background-color: rgba(var(--accent), 0.35) !important; } .mdl-slider-background-lower { background-color: rgb(var(--accent)); } .mdl-slider::-moz-range-thumb { background: rgb(var(--accent)); } .mdl-slider::-ms-thumb { background: rgb(var(--accent)); } .mdl-slider::-webkit-slider-thumb { background: rgb(var(--accent)); } .iconOsdProgressInner { background: rgb(var(--accent)); } .paper-icon-button-light:hover, .raised.homeLibraryButton:hover, .button-flat:hover, .playstatebutton-icon-played, .ratingbutton-icon-withrating, .paper-icon-button-light:hover:not(:disabled), .emby-tab-button:hover, .selectLabelFocused, .inputLabelFocused, .textareaLabelFocused, .buttonActive, .button-link { color: rgba(var(--accent)) !important; } #itemDetailPage .button-link { color: inherit !important; } .navMenuOption:hover, .actionSheetMenuItem:hover { background-color: #fff !important; } .emby-checkbox:checked + span + .checkboxOutline, .emby-textarea:focus, .emby-select-withcolor:focus, .emby-input:focus, .itemSelectionPanel { border: 0.01em solid #fff !important; } .upNextDialog-countdownText { color: rgba(var(--accent)); } .mdl-spinner__layer-1 { border-color: rgba(var(--accent)); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { background: rgba(var(--accent), 0.5); } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: rgba(var(--accent)); } ::-webkit-scrollbar-thumb { background: #fff !important; } * { scrollbar-color: #fff #0000 !important; } .syncPlayIconCircle { color: rgba(var(--accent),1) !important; text-shadow: none !important; } .mainDetailButtons { font-size: 120%; } @media (orientation: landscape){ .layout-mobile .button-flat { margin-top: -1em !important; } } .startTimeText, .endTimeText { width: 3.4em; display: block; text-align: center; } .osdTitle { margin-left: 0.5em; } .osdTimeText { font-size: 90%; } .videoOsdBottom { padding-top: 1em; } .layout-mobile .videoOsdBottom { font-size: 80%; } .skinHeader-withBackground.osdHeader { height: 5em; } @media (orientation: landscape) { .layout-mobile .detailPageContent { padding-left: 27%; padding-right: 0%; } } @media (max-width: 750px) and (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-right: 11vw; } } @media (orientation: landscape) { .layout-mobile .detailPagePrimaryContainer { padding-left: 15vw !important; } } .emby-input, .emby-textarea { padding: .4em .55em; } .emby-select { padding: .35em 1.9em .35em .35em; } .selectArrow { margin-top: 1.05em; } .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { padding-top: 1em; } .sectionTitleTextButton > .material-icons { font-size: 1.5em; margin-bottom: -0.1em; opacity: 0; } .sectionTitle { margin-left: 0em !important; margin-top: 0.5em !important; font-weight: 700; font-size: 1.6em; } .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { padding-left: 3%; margin-right: 3%; } .layout-desktop .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap, .layout-tv .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { padding-right: 1vw; justify-content: space-evenly; padding-left: 0; } #homeTab .emby-scroller { padding-left: 1em; } .layout-mobile #homeTab .emby-scroller { padding-left: 0em; } [dir="ltr"] .padded-left { padding-left: 1em; } .layout-mobile [dir="ltr"] .padded-left { padding-left: 0.5em; } .card:hover .indicator.videoIndicator { opacity: 0; } .nowPlayingBarCurrentTime { width: 6em; } .osdTextContainer { margin: 0 !important; margin-top: 0.2em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .headerUserButtonRound { border-radius: 50px !important; } .navMenuOptionText { margin-top: 0; } .formDialogHeaderTitle { margin-left: 1em; } .formDialogContent { margin-bottom: 6.2em; } .dialogContentInner { padding: .5em 1em 1em; padding-right: 1em; padding-left: 1em; } .listItem-indexnumberleft { margin: 1em; } .listItem { padding-left: 1em; } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard { width: 13.13em; } .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { width: 13.13em; } @media (orientation: portrait) { .layout-mobile .overflowPortraitCard { width: 47vw; } .layout-mobile .overflowSquareCard { width: 47vw; } .layout-mobile .overflowBackdropCard { width: 70vw; } } @media (orientation: landscape) { .layout-mobile .overflowPortraitCard { width: 22.1vw; } .layout-mobile .overflowSquareCard { width: 22.1vw; } .layout-mobile .overflowBackdropCard { width: 33vw; } } .layout-mobile .headerLeft, .skinHeader { display: -webkit-flex; display: flex; font-size: 90%; } .cardPadder { background-color: #0000 !important; box-shadow: none !important; } .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 400; } @media (orientation: portrait) { .layout-mobile #homeTab .cardText { overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: normal; margin-left: 0em; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } .cardText.cardTextCentered.cardText-secondary { font-size: 0.85em; } @media (min-width: 120em) { .portraitCard, .squareCard { width: 11vw; } } @media (max-width: 768px) and (orientation: landscape) { .portraitCard, .squareCard { width: 12em; } } .skinHeader-withBackground { background-color: transparent !important; } @media all and (min-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 0em; padding-top: 4em !important; } } @media all and (max-width: 100em){ #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage { margin-top: 6em; padding-top: 0.5em !important; } } .force-scroll { overflow-y: auto; overflow-x: auto; } .raised.homeLibraryButton { box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; border: solid 1px rgba(var(--accent),0) !important; } #homeTab .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x .raised.homeLibraryButton.emby-button .material-icons.homeLibraryIcon { margin-left:0.05em; } .cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px #fff9; border: solid 1px #fff; } .cardOverlayContainer { border: solid 1px #fff !important; } .drawer-open { box-shadow: 0px 0px 5px #fff !important; border-right: solid 1px #fff !important; } @supports (backdrop-filter: blur(15px)) { .dialog, .mainDrawer, .toast, .appfooter { backdrop-filter: blur(15px); background-color: rgba(0, 0, 0, 0.35); } .paper-icon-button-light:hover, #itemDetailPage .itemProgressBar, #dashboardPage .backgroundProgress > div { backdrop-filter: blur(0px); } @media all and (max-width: 70em){ .cardOverlayButtonIcon { background-color: rgba(0, 0, 0, 0) !important; } } } .layout-mobile .cardOverlayButtonIcon { display: none !important; } .cardOverlayButton-br { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: auto; padding: 0em; gap: 1em; border-radius: 10px; } .cardOverlayButtonIcon { font-size: 1.55em !important; width: 1.1em !important; height: 1.5em !important; display: flex; justify-content: center; align-items: center; } .cardOverlayButton { position: relative; color: #fff; } .cardOverlayContainer > .cardOverlayFab-primary { background-color: rgba(0,0,0,0); font-size: 100%; height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3.1em; } :root {--accent: 6, 161, 217;} :root {--rounding: 12px;} /*hover zoom*/ .layout-desktop .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus, .layout-desktop .card:hover { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transform: scale(1.02); transition: transform 1s ease; } .layout-tv .card:focus { -webkit-filter: none !important; box-shadow: 0 0 5px 0, 255, 222; filter: none !important; transition: transform 1s ease; } .layout-desktop .homeLibraryButton, .layout-tv .homeLibraryButton { font-weight: 700; border-radius: 0.5em !important; } .layout-desktop .homeLibraryButton:hover, .layout-mobile .homeLibraryButton:hover, .layout-tv .homeLibraryButton:hover, .layout-desktop .homeLibraryButton:focus, .layout-mobile .homeLibraryButton:focus, .layout-tv .homeLibraryButton:focus { filter: drop-shadow(0 0 1px rgba(2, 2, 2, 0.75)); background: #fff !important; color: #000 !important; transform: revert; font-weight: 700; } .backdropImage { filter: blur(0px) saturate(100%) contrast(110%) brightness(100%); } .listItem { text-align: center; padding: 10px; font-size: 12pt; } .listItemIcon { display: none; padding: 10px; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content .listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast { height: 13.2em; transition: box-shadow 0.3s; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .listItem-content { max-height: 30em; min-height: 20em; } #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItem.listItem-largeImage.listItem-withContentWrapper .itemProgressBarForeground { border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } .detailsGroupItem.genresGroup, .detailsGroupItem.writersGroup { display: none; } .itemTags { display: none; } .layout-desktop .detailsGroupItem, .trackSelections .selectContainer, .layout-tv .detailsGroupItem, .trackSelections .selectContainer { display: -webkit-flex; display: flex; margin: 0 0 .1em !important; max-width: 33em; font-size: 0.85em; } .layout-desktop .trackSelections { position: fixed; left: 0em; width: 33em; top: 45em; } .layout-tv .trackSelections { position: fixed; left: 0em; width: 33em; top: 47em; } .layout-desktop .trackSelections .selectContainer .detailTrackSelect, .layout-tv .trackSelections .selectContainer .detailTrackSelect { font-size: inherit; padding-left: 0.5em; max-width: 22em; text-overflow: ellipsis; text-align: center; } #seriesScheduleSection { display: none; } #detailPage .sectionTitle.sectionTitle-cards { margin-right: 10px; margin-left: 1.2em !important; } .layout-mobile .sectionTitle.sectionTitle-cards { font-size: 105%; } .layout-mobile .emby-button { font-size: 90%; } .itemsContainer.padded-left { flex: 1; display: flex; } .layout-desktop #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x, .layout-tv #homeTab .section0 .verticalSection.verticalSection-extrabottompadding .itemsContainer.padded-left.padded-right.vertical-wrap.focuscontainer-x { justify-content: space-evenly; } .sectionTitle.sectionTitle-cards { margin-right: 0.1em; } .itemsContainer.padded-left { flex: 1; } .layout-desktop .detailImageContainer .card { left: 5em; width: 20em; top: 3.5em !important; max-width: unset; } .layout-tv .detailImageContainer .card { left: 4.75em; max-height: 32em; max-width: 18vw !important; width: 18.35em; top: 18em !important; } .layout-desktop #itemDetailPage .card.squareCard { left: 5em; width: 20em; top: 13.5em !important; max-width: unset; } .layout-tv #itemDetailPage .card.squareCard { left: 4.75em; max-height: 32em; max-width: 18vw !important; width: 18.35em; top: 18em !important; } .layout-desktop .detailImageContainer .card.backdropCard, .layout-tv .detailImageContainer .card.backdropCard { top: 22.2em !important; } .flex.align-items-center.flex-grow.headerTop { padding-bottom: 20px; height: 2.2em; } .layout-mobile .flex.align-items-center.flex-grow.headerTop { padding-bottom: 0em; height: 3.2em; } .layout-mobile .headerTabs .emby-tab-button { width: fit-content; padding-top: 0.5em; } .layout-mobile .flex.align-items-center.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom.focuscontainer-x { padding-top: 0em; font-size: 85%; } @media (min-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-3.55em; position:relative; width:100vw; } } @media (max-width:45em) { .layout-desktop .headerTop, .layout-tv .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; margin-top:-2em; position:relative; } } @media (max-width:85em) { #moviesTab .layout-desktop .headerTop { padding:.8em .8em } .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; } } @media (max-width:959px) { .headerTabs { -webkit-align-items:center; align-items:center; -webkit-align-self:center; align-self:center; -webkit-justify-content:center; justify-content:center; position:relative; margin-top:-1.3em; } .layout-desktop .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button, .layout-tv .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tabs-slider .emby-tab-button { max-width: fit-content; } } .layout-mobile .headerTabs { -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; -webkit-justify-content: center; justify-content: center; margin-top: 0em; position: relative; } } .mainDrawer { background-color: rgba(0, 0, 0, 0.9); } .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, .mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, button.is-emby-button:hover emby-button { background: #fff !important; transition: background 0.1s; color: black !important; } .navMenuOption { border-radius: var(--rounding) !important; width: 100% !important; margin-left: 0em !important; } .navMenuOption:hover .navMenuOptionText { color: black !important; } .mainDrawer-scrollContainer.scrollContainer .navMenuOption, .mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, button.is-emby-button emby-button { background-color: transparent !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover { background: #2c1f78ba !important; transition: background 0.3s ease; } #myPreferencesMenuPage .verticalSection-extrabottompadding { display: flex; flex-direction: column; align-items: center; } #myPreferencesMenuPage .sectionTitle { margin-left: 0em !important; margin-bottom: 0em !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button { width: 30% !important; margin-left: 0 !important; margin-bottom: 1em; border-radius: var(--rounding) !important; background-color: transparent !important; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; text-align: center; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-align: center; width: 100%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:hover .listItemBodyText { color: white !important; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button:focus .listItemBodyText { color: white !important; border: 1px solid white; border-radius: 1em; } .mdl-slider-background-lower { background: linear-gradient(90deg, rgb(1, 9, 40) 0%, rgb(36, 75, 147) 45%, rgb(23, 125, 255) 85%, rgb(24, 170, 222) 100%); } .mdl-slider-background-upper { background: #92dcf499; } .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards, .layout-tv div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin: 0; padding-top: .5em; } .layout-mobile .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; margin-bottom: 0em; font-size: 90%; } .layout-mobile #indexPage .overflowBackdropCard, .overflowSmallBackdropCard { } @media (orientation: portrait) { .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { padding-left: 5%; margin-right: 7%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; } #albumsTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { display: flex; } #albumsTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.squareCard { width: 40%; } .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap .card.portraitCard { width: auto; } .alphaPicker-fixed { top: 9em; } [dir="ltr"] .alphaPicker-fixed-right { right: max(env(safe-area-inset-right),0.5em); } } .homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { margin-left: auto; } .emby-scrollbuttons-button > .material-icons { display: block; min-height: 24px; min-width: 24px; margin-top: -0.3em; } .layout-desktop .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard, .layout-tv .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { margin-top: 0em; } .layout-desktop .overflowBackdropCard, .layout-tv .overflowBackdropCard { } .verticalSection .card img { width: 100%; height: auto; } @media (min-width: 100em) { .layout-tv .mainDetailButtons { font-size: 108%; margin: 1em 0 1.25em; position: absolute; right: 10em; top: 1em; } } .detailVerticalSection .nextUpItems { margin-top: -5px; } .padded-top.padded-bottom.scrollSlider.focuscontainer-x { } .layout-desktop .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer, .layout-tv .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0em; } .layout-mobile .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0.5em; display: grid; } .layout-desktop .mediaInfoItem, .layout-tv .mediaInfoItem { margin-top: 0.2em !important; margin-right: 7vw; } .layout-mobile .mediaInfoItem { margin: 0.2em !important; justify-content: center; display: flex; max-width: fit-content; } .layout-mobile .nameContainer { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal; padding: 0.25em; font-size: 1.3em; } @media (orientation: portrait) and (min-width: 800px) { .layout-mobile .itemMiscInfo.itemMiscInfo-primary { padding-left: 21vw; } .layout-mobile [dir="ltr"] .mainDetailButtons { justify-content: space-evenly; } .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 24vw; padding-top: 2em; } } @media (orientation: landscape) and (max-height: 380px) { .layout-mobile [dir="ltr"] .mainDetailButtons { padding-left: 25%; font-size: 0.84em; padding-top: 1em; } } @media (orientation: landscape) and (max-width: 1000px) { .nameContainer { max-width: 60vw; margin-left: 1em; } } .sectionTitleContainer-cards { margin: 0; padding-top: 0em; } .itemName { margin: 0em 0 !important; padding-top: 0em; } .infoText { max-width: 100%; min-width: 0; text-align: left; } .subtitle { margin: .15em 0 .2em -1em; padding-left: 0em; text-align: center; } @media only screen and (max-width: 426px) { .homePage .section1.verticalSection .sectionTitle-cards { margin-right: -3.5em; margin-left: 10px; } } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-right: 0.5em; margin-left: 10px; } .layout-mobile .homePage .section1.verticalSection .sectionTitle-cards { margin-top: 0.5em !important; margin-left: 10px; } .homeLibraryButton { margin-left: 1em !important; margin-right: 1em !important; min-width: 7em; } .layout-desktop .alphaPickerButton-vertical, .layout-tv .alphaPickerButton-vertical { width: 3vw; height: 3vh; } .layout-desktop .alphaPickerButton, .layout-tv .alphaPickerButton { padding: .2em .4em; } .layout-desktop .alphaPicker-fixed, .layout-tv .alphaPicker-fixed { top: max(env(safe-area-inset-top),20vh); height: 80vh; } .layout-mobile .alphaPicker-fixed { top: max(env(safe-area-inset-top),24vh); height: 72vh; } .layout-mobile .alphaPickerButton-vertical { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; text-align: center; width: 7vw; height: 2.7vh; margin-bottom: 0.15vh; } @media (orientation: portrait) { #trailersTab .itemsContainer.padded-left.padded-right.padded-right-withalphapicker.vertical-wrap { padding-left: 5%; margin-right: 7%; display: inherit; } } @media (min-width: 62.5em) { [dir="ltr"] .alphaPicker-fixed-right { right: 1em; right: max(env(safe-area-inset-right),1vw); z-index: 99; } } .cardOverlayFab-primary { background-color: rgba(0,0,0,0); font-size: 100%; height: 3em; left: 50%; } .infoWrapper { min-width: 52%; max-width: 100%; max-height: 5.5em; } @media (orientation: landscape) { .layout-mobile .detailButton { padding-left: 1.8em !important; padding-right: 1.8em !important; } } @media (orientation: portrait) { .layout-mobile .detailButton { padding-left: 1em !important; padding-right: 1em !important; } } @media (max-width: 768px) and (orientation: portrait) { .mainDetailButtons.focuscontainer-x { margin-bottom: 0em; margin-top: 0em; } } @media (max-width: 32em) and (orientation: portrait) { .layout-mobile [dir="ltr"] .mainDetailButtons { margin-bottom: 0; padding-left: 0em; font-size: 73%; margin-top: 2em; width: 95vw; justify-content: space-evenly; margin-left: -1em; } } @media (min-width: 65em) { .layout-mobile [dir="ltr"] .mainDetailButtons { font-size: 90%; margin-bottom: 0em; margin-top: 4em; } } .layout-mobile .mediaInfoOfficialRating { position: relative; } .trackSelections .selectContainer { font-size: 0.85em; overflow: hidden; } } @media (max-width: 50em) { .trackSelections .selectContainer { font-size: 8pt; overflow: hidden; } } .programCell { background: transparent !important; } .programCell-active { background: rgba(6, 161, 217, 0.05) !important; } .programCell-movie { background: transparent !important; } .guideProgramNameText { font-weight: 400; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 80%; } .channelPrograms { white-space: wrap; } #detailPage .layout-mobile .card.overflowBackdropCard.card-withuserdata { width: 18.15em !important; } .layout-desktop .overflowBackdropCard, .layout-tv .overflowBackdropCard, .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.68)); } .layout-desktop .verticalSection.section2 .card.overflowBackdropCard, .layout-tv .verticalSection.section2 .card.overflowBackdropCard { } .verticalSection.section0 .textActionButton { display: none; } .layout-mobile .verticalSection-extrabottompadding { margin-bottom: 2em; margin-top: 0em; } .layout-desktop .verticalSection-extrabottompadding, .layout-tv .verticalSection-extrabottompadding { margin-bottom: 1em !important; } .layout-desktop .nextUpSection.verticalSection.detailVerticalSection { } .content-primary, .padded-bottom-page, .page, .pageWithAbsoluteTabs .pageTabContent { padding-bottom: 0 !important; position: absolute; width: 100%; min-height: 35.1%; } .collectionItems .itemsContainer.padded-left::before { opacity: 0; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText { transition: filter 0.8s, opacity 0.8s; filter: blur(0px); opacity: 1; min-height: 7em; overflow-y: auto; padding-right: 1em; } #childrenContent .listItem-content .listItemBodyText { color: #fff; font-weight: 600; } #childrenContent .listItem-content .secondary.listItemBodyText { color: #fff; font-weight: 300; } .layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover, .layout-tv #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText:hover { filter: blur(0px); opacity: 1; } .cardOverlayButtonIcon, .cardOverlayButtonIcon.material-icons { display: flex; filter: drop-shadow(1px -1px 1px rgba(2, 2, 2, 0.8)); } #skipIntro .emby-button:hover, #skipIntro .emby-button:focus { } #skipIntro { } #skipIntro .emby-button { } .upNextContainer { background: #000; z-index: 50; } .raised.raised-mini.btnHide.upNextDialog-button.emby-button:hover { } /*Iskelderon's cleaner Scenes & Specials grid */ @media (min-width:1800px) and (min-height:900px) { #specialsCollapsible .emby-scroller, #musicVideosCollapsible.emby-scroller, #scenesCollapsible.emby-scroller { margin-right: 0; } #specialsCollapsible .emby-scrollbuttons, #musicVideosCollapsible .emby-scrollbuttons, #scenesCollapsible .emby-scrollbuttons { display: none; } #specialsCollapsible .itemsContainer, #musicVideosCollapsible .itemsContainer, #scenesCollapsible .itemsContainer { flex-wrap: wrap; } #specialsCollapsible .overflowBackdropCard, #musicVideosCollapsible .overflowBackdropCard, #scenesCollapsible .overflowBackdropCard { max-width: 15.4vw; } } .osdControls { font-size: 1.25em; } .css-4yt2of, .css-139vfv2 { background-color: rgb(20, 16, 28); color: rgb(255, 255, 255); background-image: none; } .previewListItem:hover { color:black !important; } /*Change Intro Skip Color*/ .skip-button { bottom: 7.52em; right: 7.5em; color: #fff; background: #0a0418b5; border: 1px solid white; border-radius: 0.2em; padding: 0.5em 1em; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .skip-button:hover, .skip-button:focus { background: #fff; color: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .skip-button-container { bottom: 7%; right: 0em; } .layout-mobile .backgroundContainer { background-color: transparent;} #myPreferencesMenuPage .sectionTitle { text-decoration: underline; } #myPreferencesPage .readOnlycontent { font-size: 90%; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItem { justify-content: center; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBody { overflow: visible; text-overflow: unset; white-space: wrap; padding-right: 0.75em; } #myPreferencesMenuPage .verticalSection-extrabottompadding .emby-button .listItemBodyText { text-overflow: visible !important; } .layout-mobile .flex.align-items-center.flex-grow.headerTop { width: 100vw; padding-left: 0; } .layout-mobile [dir="ltr"] .pageTitle { margin: 0; } .layout-desktop div.itemMiscInfo.itemMiscInfo-primary, .layout-tv div.itemMiscInfo.itemMiscInfo-primary, .layout-desktop .itemName.originalTitle, .layout-tv .itemName.originalTitle { margin-bottom: 0em !important; font-size: 1.4em; font-weight: 600; text-align: center; justify-content: left; filter: drop-shadow(0px 4px 1px #0005); } .layout-desktop .itemName.infoText.subtitle.focuscontainer-x, .layout-tv .itemName.infoText.subtitle.focuscontainer-x { text-align: center; position: fixed; top: 17.5em; left: 4.5em; width: 18.25em; filter: drop-shadow(-1px 1px 2px black); } .layout-mobile .itemMiscInfo, .layout-mobile .itemName, .layout-mobile .mainDetailButtons, .layout-mobile .parentName { justify-content: space-evenly; text-align: center; margin-top: 1em; font-size: 0.85em !important; } .layout-mobile #itemDetailPage .tagline { font-size: 1em; } @media (orientation: portrait) { .itemMiscInfo { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.1em; } } button[is="paper-icon-button-light"].cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light.cardOverlayFab-primary[data-action="resume"] { background-color: rgba(0, 0, 0, 0.7); font-size: 130%; height: 3em; left: 50%; margin-left: -1.5em; margin-top: -1.5em; padding: 0; position: absolute; top: 50%; width: 3em; } .first-imageEditor-buttons, .imageEditor-buttons { margin-top: 0em; margin-bottom: 0em; } @media (min-width: 60em) { .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button { background: #0a0418b5 !important; color: #fff !important; border-radius: 0.25em; height: 2em; width: auto; transform: translateY(-23%); transition: 0s; margin-left: 0.25em; margin-right: 0.25em; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active { background: #fff !important; color: #000 !important; border-radius: 0.25em; height: 2em; width: auto; transform: translateY(-11%); transition: 0s; } .headerTabs.sectionTabs .tabs-viewmenubar.emby-tabs.focusable.scrollX .emby-tab-button.emby-button.emby-tab-button-active .emby-button-foreground { transform: translateY(-13%); } .headerTabs .emby-tab-button { transition: 0s !important; width: auto; color: #fff; } #moviesTab .listItem { font-size: 1.15em; } #moviesTab .listItemBody.itemAction { max-width: 60vw; } #moviesTab .secondary.listItemMediaInfo { width: 13vw; } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); min-width: 4vw; } #moviesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); min-width: 4vw; margin-right: 2vw; } #moviesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); min-width: 1.5vw; justify-content: center; } #moviesTab .listViewUserDataButtons { width: 13vw; justify-content: space-around; } #seriesTab .listItem { font-size: 1.15em; } #seriesTab .listItemBody.itemAction { max-width: 60vw; } #seriesTab .secondary.listItemMediaInfo { width: 3vw; } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); min-width: 4vw; } #seriesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); min-width: 4vw; margin-right: 2vw; } #seriesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); min-width: 4vw; justify-content: center; } #seriesTab .listViewUserDataButtons { width: 13vw; justify-content: space-around; } #episodesTab .listItem { font-size: 1.15em; } #episodesTab .listItemBody.itemAction { max-width: 50vw; } #episodesTab .secondary.listItemMediaInfo { width: 21vw; } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem { transform: translateX(-50%); min-width: 6.5vw; justify-content: center !important; display: flex; margin-right: 0; } #episodesTab .secondary.listItemMediaInfo .starRatingContainer.mediaInfoItem { transform: translateX(-50%); min-width: 6vw; margin-right: 0vw; } #episodesTab .secondary.listItemMediaInfo .mediaInfoItem.mediaInfoText.closedCaptionMediaInfoText { transform: translateX(-50%); min-width: 1.5vw; justify-content: center; margin-right: 1em; } #episodesTab .listViewUserDataButtons { width: 13vw; justify-content: space-around; } #genresTab .portraitCard, .squareCard { width: 11%; } } .layout-desktop .headerLeft, .layout-tv .headerLeft { -webkit-flex-grow: 1; flex-grow: 1; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; max-width: fit-content; background: #0a0418b5; padding-right: 1em; border-radius: 0.25em; margin-left: -1em; padding-bottom: 0.25em; margin-top: -0.25em; padding-top: 0.5em; z-index: 90; background: #110e1ebd; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); } .layout-desktop .headerRight, .layout-tv .headerRight { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; background: #110e1ebd; color: #000 !important; border-radius: 0.25em; height: 2em; width: auto; transform: translateY(-11%); transition: 0s; padding: 0.5em; right: 0em; position: absolute; padding-top: 1.7em; z-index: 90; padding-bottom: 0.75em; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); } .navMenuOption { -webkit-align-items: center; align-items: center; border-radius: 0em !important; } #displayPreferencesPage .sectionTitle { margin-bottom: 1em !important; margin-left: 0em !important; } .card.overflowPortraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .card.portraitCard.card-hoverable.card-withuserdata:hover .countIndicator.indicator { opacity: 0; } .countIndicator.indicator { transition: opacity 0.3s ease; } [dir="ltr"] .emby-scrollbuttons { right: 0em; padding-right: 0em; } #castCollapsible .emby-scrollbuttons.padded-right, #similarCollapsible .emby-scrollbuttons.padded-right, #guestCastCollapsible .emby-scrollbuttons.padded-right, #specialsCollapsible .emby-scrollbuttons.padded-right, #musicVideosCollapsible .emby-scrollbuttons.padded-right, #scenesCollapsible .emby-scrollbuttons.padded-right { padding-top: 2em !important; } .layout-desktop #homeTab .emby-scroller-container, .layout-tv #homeTab .emby-scroller-container { position: relative; overflow: hidden; margin-top: 0.5em; } .listItemImage { cursor: pointer; } .listItemImage:hover { box-shadow: 0px 0px 350px #fff3; } .skinHeader { pointer-events: none; } .headerButton, .headerTabs.sectionTabs { pointer-events: all; -webkit-filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0)); color: #fff; } .collectionItems { min-height: calc(18em + 8.6vh); } @media (max-width: 1000px) { .raised.homeLibraryButton { max-width: 47vw !important; } .raised.homeLibraryButton { min-width: unset !important; max-width: unset !important; width: unset !important; margin: 0 !important; justify-content: center; border-radius: 0em !important; border: 1px solid #1d102e94 !important; } .sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { margin-bottom: 0em; padding-top: 0.5em; display: grid; grid-template-columns: repeat(2, 1fr); /* 2 column layout */ grid-gap: 1em; } } .layout-desktop #homeTab .emby-scrollbuttons.padded-right, .layout-tv #homeTab .emby-scrollbuttons.padded-right { right: 2.5em; padding-right: 0em; width: 100vw; } #homeTab button[data-direction="left"] { right: 6.5em; position: absolute; top: 0em; z-index: 50; font-size: 1.5em; color: #fff; height: 1.5em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 1.5em;; padding: 0; padding-top: 1em; } #homeTab button[data-direction="right"] { right: 0.5em; position: absolute; top: 0em; z-index: 50; font-size: 1.5em;; color: #fff; height: 1.5em;; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 1.5em;; padding: 0; padding-top: 1em; } #homeTab button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #homeTab button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="left"] { right: 3.5em; position: absolute; top: 1em; z-index: 50; font-size: 2em; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="right"] { right: 0em; position: absolute; top: 1em; z-index: 50; font-size: 2em; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="left"]:hover { color: #fff !important; opacity: 1; } #itemDetailPage button[data-direction="right"]:hover { color: #fff !important; opacity: 1; } .layout-tv .cardBox.cardBox-bottompadded { margin-bottom: 2em !important; } .layout-desktop .childrenItemsContainer.itemsContainer.padded-right.vertical-list { display: grid; grid-template-columns: 1fr 1fr 1fr; } .layout-desktop .listItemImage-large, .layout-tv .listItemImage-large { height: 9em; } @media all and (max-width: 2000px) { .layout-desktop .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr 1fr 1fr; } } @media all and (max-width: 1000px) { .layout-desktop .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr 1fr; } } .layout-mobile .childrenItemsContainer.itemsContainer.padded-right.vertical-list { grid-template-columns: 1fr; } .layout-desktop #itemDetailPage .listItem-content { border-radius: var(--rounding); overflow: hidden; transition: background 0.15s ease-in-out; flex-flow: column; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -ms-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; } .layout-desktop .listItemImage.listItemImage-large { width: 100%; margin: 0; } .layout-desktop .listViewUserDataButtons { justify-content: space-evenly; width: 100% !important; } .layout-desktop .listItem-overview.listItemBodyText { height: 5.5em !important; font-size: 1em !important; padding-top: 0em !important; } .layout-desktop #itemDetailPage .listItem { position: relative; height: -webkit-fit-content; height: -moz-fit-content; max-height: 30em; overflow: hidden; margin-bottom: 1.5rem; border-radius: var(--rounding); padding: .5em; } .layout-desktop itemDetailPage .secondary.listItem-overview.listItemBodyText { height: 100%; margin: 0; } .layout-desktop .listItem[data-mediatype="Audio"] { padding: 0 1em; border-radius: var(--rounding) !important; -webkit-border-radius: var(--rounding) !important; -moz-border-radius: var(--rounding) !important; -ms-border-radius: var(--rounding) !important; -o-border-radius: var(--rounding) !important; } .layout-desktop .listItemImageButton { margin: auto; font-size: 1.6em !important; } .layout-desktop .playlistSection .listItemBody.itemAction, .layout-desktop .playlistSection .listItem-bottomoverview.secondary { z-index: 1; min-width: 68vw; } .layout-desktop .listItem-bottomoverview.secondary { text-align: justify; padding: .5em; margin: 0; } .nowPlayingInfoContainer .nowPlayingInfoControls .infoContainer.flex { } .infoContainer, .sliderContainer { -webkit-filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); filter: drop-shadow(0 0 2px rgba(2, 2, 2, 1)); } .layout-desktop .trackSelections .selectContainer .selectLabel, .layout-tv .trackSelections .selectContainer .selectLabel { text-align: center; } .layout-tv .itemDetailPage { padding-top: 38.5em !important; } @media (max-width: 32em) { .layout-mobile .infoWrapper { position: relative; max-height: 10em; min-height: 6em; } } a[href*="imdb.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/WWKKmLcC/imdb.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="imdb.com"] { font-size: 0; } a[href*="trakt.tv"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/G6p74rm/trakt.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="trakt.tv"] { font-size: 0; } a[href*="themoviedb.org"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/Mk9r3tqm/tmdb.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="themoviedb.org"] { font-size: 0; } a[href*="themoviedb.org/collection"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/9kvKdzj9/tmdbcollection.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="thetvdb.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/0jKrJ38d/tvdb.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="thetvdb.com"] { font-size: 0; } a[href*="tvmaze.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/YTqbgfJc/tvmaze.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="tvmaze.com"] { font-size: 0; } a[href*="anidb.net"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/GNzTYhz/anidb.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="anidb.net"] { font-size: 0; } a[href*="anilist.co"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/tM2cNLZm/anilist.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="anilist.co"] { font-size: 0; } a[href*="kitsu.app"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/Ng8RmDFg/kitsu.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="kitsu.app"] { font-size: 0; } a[href*="theaudiodb.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/TMqCZLtp/theaudiodb.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="theaudiodb.com"] { font-size: 0; } a[href*="music.apple.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/wZq3Xw5K/applemusic.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="music.apple.com"] { font-size: 0; } a[href*="musicbrainz.org"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/r2mW8XbQ/musicbrainz.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="musicbrainz.org"] { font-size: 0; } a[href*="myanimelist.net"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/YFbTWhnQ/myanimelist.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="myanimelist.net"] { font-size: 0; } a[href*="kinopoisk.ru"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/N6TZ0yjZ/kinopoisk.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="kinopoisk.ru"] { font-size: 0; } a[href*="shokoanime.com"]::before { content: ""; display: inline-block; width: 50px; height: 25px; background-image: url('https://i.ibb.co/mChjxCk6/shokoanime.png'); background-size: contain; background-repeat: no-repeat; margin-right: 5px; vertical-align: middle; } a[href*="shokoanime.com"] { font-size: 0; } .itemExternalLinks.focuscontainer-x { color: #000a; } .layout-desktop .mainDetailButtons.focuscontainer-x, .layout-tv .mainDetailButtons.focuscontainer-x { position: fixed; left: 4.15em; width: 16.7em; justify-content: space-evenly; top: 14.62em; z-index: -1; background: #0c0515c2; border-top-right-radius: 1em; margin: 1.25em 0; padding-top: 12em; border-top-left-radius: 1em; } .layout-desktop .cardPadder, .layout-tv .cardPadder { border-radius: unset; } .layout-desktop .itemExternalLinks.focuscontainer-x, .layout-tv .itemExternalLinks.focuscontainer-x { color: #000a; position: fixed; width: 21.6em; left: 5.5em; top: 56.5em; } .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat { margin-right: 0em !important; padding: 0 !important; z-index: 5; border-radius: 0.26em !important; padding-top: 0.5em !important; padding-bottom: 0.5em !important; } /* .layout-desktop .mainDetailButtons.focuscontainer-x .button-flat:hover, .layout-tv .mainDetailButtons.focuscontainer-x .button-flat:focus { background: #29264a !important; } */ /* D-E-N-U's title fix */ .layout-desktop .itemName.infoText.parentNameLast, .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle, .layout-tv .itemName.infoText.parentNameLast { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; filter: drop-shadow(-2px 4px 1px #0005); } .layout-desktop .itemName.infoText.originalTitle, .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.originalTitle { position: absolute; top: 5.5em; left: 0em; font-size: 1.1em; width: 29em; } .layout-desktop [dir="ltr"] .selectArrowContainer, .layout-tv [dir="ltr"] .selectArrowContainer { right: 3em; } .layout-desktop #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button, .layout-tv #itemDetailPage .nameContainer .parentName.focuscontainer-x .button-link.itemAction.emby-button { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: transform 0s; } .layout-tv #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1) translateY(-50%); } .layout-desktop #itemDetailPage .detailImageContainer.padded-left .card:hover { transform: scale(1); } .layout-desktop #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata, .layout-tv #itemDetailPage .nextUpItems .card.overflowBackdropCard.card-hoverable.card-withuserdata { width: 28.15em !important; } .alphaPickerButton:hover { color: rgba(255, 255, 255, 0.75); } .mainDrawer.transition.touch-menu-la.drawer-open { min-width: 20em; font-size: 89%; } .layout-desktop .subtitleSync, .layout-tv .subtitleSync { position: absolute; width: 100%; margin-top: 4em; } .layout-mobile .subtitleSync { margin-top: 2em; } .layout-desktop .musicParentName, .layout-tv .musicParentName { position: absolute; top: 4.75em; width: 22em; } /*.dialogContainer .listItem:hover .listItemBody { color: #fff; }*/ .subtitleResults .listItem:hover .listItemBody { color: #fff !important; } .subtitleList .listItem:hover .listItemBody { color: #fff !important; } .subtitleResults .listItem:hover .listItemBodyText { color: #fff; } .subtitleList .listItem:hover .secondary.listItemBodyText, .subtitleList .listItem.listItem-border:hover .secondary.listItemBodyText { color: #fffa !important; } .actionSheetScroller .listItem.listItem-button:hover .listItemBodyText { color: #000; } .layout-desktop .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened, .layout-tv .focuscontainer.dialog.formDialog.dialog-fullscreen-lowres.centeredDialog.opened { min-height: 50vh; max-height: 100vh; } .layout-desktop #songsTab .itemsContainer.vertical-list { max-width: 80vw !important; } .layout-desktop #songsTab .itemsContainer.vertical-list .listItemBody.itemAction { min-width: 38vw; } #nowPlayingPage .remoteControlContent.padded-left.padded-right.padded-bottom.hideVideoButtons::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0F031F91; z-index: 0; } .content-primary { padding-bottom: 5em !important; } .localUsers .cardText-secondary { height: auto; white-space: pre-wrap; } @media (min-width: 70em) { .localUsers .squareCard { width: 15%; } } @media (max-width: 70em) { .localUsers .squareCard { width: 33%; } } @media (min-width: 1000px) { body { } .layout-desktop .detailSectionContent, .layout-tv .detailSectionContent { } .layout-desktop .itemExternalLinks.focuscontainer-x, .layout-tv .itemExternalLinks.focuscontainer-x { } } .layout-mobile .mainDetailButtons { margin-bottom: .5em; margin-top: 2em; } @media (min-width: 2500px) { .cardOverlayButton-hover { } } @media (min-aspect-ratio: 21/9) and (max-aspect-ratio: 30/9) and (min-width: 3000px) and (max-width: 3440px) { body { } } .layout-desktop #homeTab .verticalSection.emby-scroller-container, .layout-tv #homeTab .verticalSection.emby-scroller-container { } .layout-desktop #homeTab .verticalSection.section0.emby-scroller-container, .layout-tv #homeTab .verticalSection.section0.emby-scroller-container { display: initial !important; } .layout-desktop #homeTab .verticalSection.section2 .emby-scroller { } .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section3 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section3 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section4 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section4 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section5 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section5 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section6 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section6 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section7 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section7 .verticalSection.emby-scroller-container, .layout-desktop #homeTab .section8 .verticalSection.emby-scroller-container, .layout-tv #homeTab .section8 .verticalSection.emby-scroller-container { } .layout-desktop .emby-scroller, .layout-tv .emby-scroller { padding-right: 0%; } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { width: 14.7em; } .layout-desktop #homeTab .sectionTitle.sectionTitle-cards, .layout-tv #homeTab .sectionTitle.sectionTitle-cards { margin-left: 0.5em !important; } .sectionTitle.sectionTitle-cards { font-size: 1.25em; } .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards, .layout-tv div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } #itemDetailPage button[data-direction="left"] { right: 3.5em; position: absolute; top: 0em; z-index: 50; font-size: 1.5em; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } #itemDetailPage button[data-direction="right"] { right: 0em; position: absolute; top: 0em; z-index: 50; font-size: 1.5em; color: #fff; height: 2em; border-radius: 0.1em; cursor: pointer; opacity: 0.1; margin: 0; width: 2em; padding: 0; padding-top: 0.5em; } .layout-desktop #itemDetailPage .detailVerticalSection, .layout-tv #itemDetailPage .detailVerticalSection, .layout-desktop #itemDetailPage .itemDetailsGroup, .layout-tv #itemDetailPage .itemDetailsGroup { margin-top: 1.5em; margin-bottom: 1.5em; } .layout-desktop .sections.homeSectionsContainer, .layout-tv .sections.homeSectionsContainer { margin-left: -0.5em; } .layout-desktop #homeTab .verticalSection.section2.emby-scroller-container, .layout-tv #homeTab .verticalSection.section2.emby-scroller-container { margin-left: 0em; } @media (min-width: 1000px) { .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { width: 16.375vw; } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { width: 12.25vw; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { width: 18.38vw; } } @media (max-height: 870px) { .layout-desktop body, .layout-tv body { font-size: 89% !important; } .layout-desktop .card.overflowBackdropCard, .layout-tv .card.overflowBackdropCard { width: 16.375vw; } .layout-desktop .overflowPortraitCard, .layout-tv .overflowPortraitCard, .layout-desktop .overflowSquareCard, .layout-tv .overflowSquareCard { width: 12.25vw; } .layout-desktop .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard, .layout-tv .verticalSection.detailVerticalSection.moreFromSeasonSection .card.overflowBackdropCard { width: 12.255vw; } } @media (max-width: 1400px) and (min-height: 870px) { .layout-desktop .headerTabs, .layout-tv .headerTabs { margin-top: -0.7em; } .layout-desktop .emby-tab-button, .layout-desktop .emby-tab-button { background: transparent; border-radius: 0; box-shadow: none; box-sizing: border-box; cursor: pointer; display: inline-block; -webkit-flex-shrink: 0; flex-shrink: 0; font-family: inherit; font-size: inherit; font-weight: 600; height: auto; line-height: 1.25; margin: 0; min-width: 0; min-width: auto; outline: none; overflow: hidden; padding: 1.5em 1.5em; padding-top: 1.5em; position: relative; vertical-align: middle; width: auto; } } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction.listItemBody-noleftpadding { min-width: 7vw; } .layout-desktop .pageTitleWithLogo, .layout-tv .pageTitleWithLogo { background-position: 0; background-repeat: no-repeat; background-size: contain; width: 6.2em; filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.95)); } .layout-desktop .videoOsdBottom, .layout-tv .videoOsdBottom { background: #0a0418b5; font-size: 80%; padding-bottom: 0.5em; padding-top: 0.5em; border-top-right-radius: 1em; border-top-left-radius: 1em; width: 98vw; margin-left: 1vw; } #itemDetailPage .itemExternalLinks.focuscontainer-x { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: .7em 0; font-size: 0; } .layout-mobile #itemDetailPage .itemExternalLinks.focuscontainer-x { justify-content: space-evenly; font-size: 0 !important; } .layout-desktop .programGuideSection.verticalSection.detailVerticalSection .listItemBody.itemAction.listItemBody-noleftpadding, .layout-tv .programGuideSection.verticalSection.detailVerticalSection .listItemBody.itemAction.listItemBody-noleftpadding { min-width: 30vw; } .layout-desktop #childrenContent .secondary.listItemMediaInfo.listItemBodyText .mediaInfoItem, .layout-tv #childrenContent .secondary.listItemMediaInfo.listItemBodyText .mediaInfoItem { margin-right: 2%; } .layout-desktop #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction, .layout-tv #childrenContent .childrenItemsContainer.itemsContainer.padded-right.vertical-list .listItemBody.itemAction { align-self: baseline; } .mainDrawer-scrollContainer { padding-bottom: 1vh; } .layout-desktop #itemDetailPage .detailPageSecondaryContainer.padded-bottom-page .detailPageContent .detailPagePrimaryContent.padded-right .detailSection .itemDetailsGroup .detailsGroupItem, .layout-tv #itemDetailPage .detailPageSecondaryContainer.padded-bottom-page .detailPageContent .detailPagePrimaryContent.padded-right .detailSection .itemDetailsGroup .detailsGroupItem{ max-width: 50vw !important; } .layout-desktop .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered, .layout-tv .page.libraryPage.noSecondaryNavPage.mainAnimatedPage .vertical-wrap.itemsContainer.centered { max-width: 90%; } @media (min-height: 31.25em) { [dir="ltr"] .padded-right-withalphapicker { padding: 0; padding-bottom: 0px; padding-left: 0px; margin: 0; margin-left: 0em; } } @media (min-width: 900px) { .dashboardDocument .mainAnimatedPage:not(.metadataEditorPage) { left: 14%; width: 84%; } } .layout-desktop .MuiDrawer-paper, .layout-tv .MuiDrawer-paper { width: auto !important; } ================================================ FILE: horizontal-scrolling.css ================================================ .layout-desktop #indexPage .itemsContainer, .layout-tv #indexPage .itemsContainer, .layout-desktop #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-tv #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-desktop #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-tv #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-desktop #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-tv #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-desktop #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX, .layout-tv #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX, .layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX, .layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX {display: flex !important; flex-wrap: nowrap !important; gap: unset;} #indexPage button[data-direction="left"], #indexPage button[data-direction="right"] {opacity: 0.5; padding-right: 1em;} #itemDetailPage button[data-direction="left"], #itemDetailPage button[data-direction="right"] { opacity: 0.5; } .verticalSection[data-type="MusicAlbum"] .itemsContainer.padded-right.vertical-wrap { flex-wrap: wrap! important;} .layout-desktop #itemDetailPage .scrollSlider.itemsContainer, .layout-tv #itemDetailPage .scrollSlider.itemsContainer { flex-wrap: nowrap !important; white-space: normal !important;} ================================================ FILE: libraryCardAriaText.css ================================================ #homeTab .section0 .cardImageContainer::before { content: attr(aria-label); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 3em; font-weight: bold; color: white; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); padding: 0.2em 0.5em; border-radius: 0em; z-index: 10; width: 93%; height: 6em; display: flex; justify-content: center; align-items: flex-end; text-align: center; } .layout-mobile #homeTab .section0 .cardImageContainer::before { font-size: 1.5em; } .verticalSection.section0 .textActionButton { display: none; } ================================================ FILE: no-animation.css ================================================ .itemBackdrop { display: inherit; height: 4em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) #itemBackdrop, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) #itemBackdrop { height: 3.6em !important; } .layout-desktop .detailRibbon, .layout-tv .detailRibbon { height: 5em; margin-top: -5em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .trackSelections, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .trackSelections { top: 37.8em !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .itemName.infoText.originalTitle { top: 4em; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .nameContainer, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .nameContainer { top: 36.5em !important; } .layout-desktop .itemName.infoText.subtitle, .layout-tv .itemName.infoText.subtitle { top: 6em; } .layout-desktop #itemDetailPage .itemExternalLinks, .layout-tv #itemDetailPage .itemExternalLinks, .itemName.infoText.originalTitle, .itemName.infoText.parentNameLast, .layout-desktop .parentName.musicParentName.focuscontainer-x, .layout-desktop .itemDetailPage:has(.itemName.parentNameLast) #itemBackdrop, .layout-desktop .itemDetailPage:has(.button-flat.mediaInfoItem.emby-button) #itemBackdrop, .layout-desktop .trackSelections, .layout-tv .trackSelections, .itemsContainer, .itemDetailsGroup { animation: none !important; opacity: 1 !important; } .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailRibbon, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailRibbon { height: 5em !important; } ================================================ FILE: scrollers-11.css ================================================ .layout-desktop #indexPage .itemsContainer, .layout-tv #indexPage .itemsContainer { display: flex !important; flex-wrap: nowrap !important; gap: unset;} #indexPage button[data-direction="left"], #indexPage button[data-direction="right"] { opacity: 0.5; padding-right: 1em;} ================================================ FILE: theme.css ================================================ /* --- Untouched JF Dark Mode Theme css --- */ * { scrollbar-width: thin; scrollbar-color: #3b3b3b #202020; } .skinHeader, html { color: #ddd; color: rgba(255, 255, 255, 0.8); } .wizardStartForm, .ui-corner-all, .ui-shadow { background-color: #101010; } .emby-collapsible-button { border-color: #383838; border-color: rgba(255, 255, 255, 0.135); } .skinHeader-withBackground { background-color: #202020; } .skinHeader.semiTransparent { backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.4); } .layout-tv .skinHeader.semiTransparent { background: none; } .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } .layout-tv .pageTitleWithDefaultLogo { background-image: url(../../assets/img/icon-transparent.png); } .backgroundContainer, .dialog, .nowPlayingPlaylist, .nowPlayingContextMenu, html { background-color: #101010; } .backgroundContainer.withBackdrop { background-color: rgba(0, 0, 0, 0.86); } @media (hover: hover) and (pointer: fine) { .paper-icon-button-light:hover:not(:disabled) { color: #00a4dc; background-color: rgba(0, 164, 220, 0.2); } } .paper-icon-button-light:active:not(:disabled) { color: #00a4dc; background-color: rgba(0, 164, 220, 0.2); } .paper-icon-button-light.show-focus:focus { color: #00a4dc; } .fab, .raised { background: #303030; color: rgba(255, 255, 255, 0.87); } .fab:focus, .raised:focus { background: #383838; } .button-submit { background: #00a4dc; color: #fff; } .button-submit:focus { background: #0cb0e8; color: #fff; } .button-delete { background: rgb(247, 0, 0); color: rgba(255, 255, 255, 0.87); } .checkboxLabel { color: inherit; } .checkboxListLabel, .inputLabel, .inputLabelUnfocused, .paperListLabel, .textareaLabelUnfocused { color: #bbb; color: rgba(255, 255, 255, 0.7); } .inputLabelFocused, .selectLabelFocused, .textareaLabelFocused { color: #00a4dc; } .checkboxOutline { border-color: currentColor; } .collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox { background-color: #202020; } .layout-tv .formDialogFooter:not(.formDialogFooter-clear) { background-color: transparent; } .defaultCardBackground1 { background-color: #00455c; } .defaultCardBackground2 { background-color: #44bae1; } .defaultCardBackground3 { background-color: #00a4db; } .defaultCardBackground4 { background-color: #1c4c5c; } .defaultCardBackground5 { background-color: #007ea8; } .cardText-secondary, .fieldDescription, .guide-programNameCaret, .listItem .secondary, .nowPlayingBarSecondaryText, .programSecondaryTitle, .secondaryText { color: #999; color: rgba(255, 255, 255, 0.5); } .actionsheetDivider { background: #444; background: rgba(255, 255, 255, 0.14); } .cardFooter-vibrant .cardText-secondary { color: inherit; opacity: 0.5; } .toast { background: #303030; color: #fff; color: rgba(255, 255, 255, 0.87); } .appfooter, .playlistSectionButton { background: #202020; color: #ccc; color: rgba(255, 255, 255, 0.78); } .itemSelectionPanel { border: 1px solid #00a4dc; } .selectionCommandsPanel { background: #00a4dc; color: #fff; } .upNextDialog-countdownText { color: #00a4dc; } .alphaPickerButton { color: #999; color: rgba(255, 255, 255, 0.5); background-color: transparent; } .alphaPickerButton-selected { color: #fff; } .alphaPickerButton-tv:focus { background-color: #00a4dc; color: #fff !important; } .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; background: rgba(30, 30, 30, 0.9); } .detailRibbon { background: rgba(32, 32, 32, 0.8); } .layout-tv .detailRibbon { background: none; } .noBackdropTransparency .detailPageSecondaryContainer { background-color: #101010; } .listItem-border { border-color: rgba(34, 34, 34, 0.9) !important; } .listItem:focus { background: #333; } .listItem:hover { background: #242424; } .progressring-spiner { border-color: #00a4dc; } .button-flat:hover { color: #00a4dc; } .button-link { color: #00a4dc; } .mediaInfoText { color: #ddd; background: rgba(170, 170, 190, 0.2); } .emby-input, .emby-textarea { color: inherit; background: #292929; border: 0.16em solid #292929; border-radius: 0.2em; } .emby-input:focus, .emby-textarea:focus { border-color: #00a4dc; } .emby-select-withcolor { color: inherit; background: #292929; border: 0.07em solid #292929; } .emby-select-withcolor > option { color: inherit; background: #222; } .emby-select-withcolor:focus { border-color: #00a4dc !important; } .emby-select-tv-withcolor:focus { background-color: #00a4dc !important; color: #fff !important; } .emby-checkbox:checked + span + .checkboxOutline { border-color: #00a4dc; } .emby-checkbox:focus + span + .checkboxOutline { border-color: #fff; } .emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc; } .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { border-color: #00a4dc; } .itemProgressBarForeground-recording { background-color: #cb272a; } .countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator { background: #00a4dc; } .fullSyncIndicator { color: #fff; } .mainDrawer, .drawer-open { background-color: #101010; } .navMenuOption:hover { background: #252528; } .navMenuOption-selected { background: #00a4dc !important; color: #fff; } .emby-button.show-focus:focus { background: #00a4dc; color: #fff; } .emby-tab-button { color: #999; } .emby-tab-button-active { color: #fff; } .emby-tab-button.show-focus:focus { color: #00a4dc; } .emby-tab-button:hover { color: #00a4dc; } .channelPrograms, .guide-channelHeaderCell, .programCell { border-color: rgba(255, 255, 255, 0.05); } .programCell-sports { background: #3949ab !important; } .programCell-movie { background: #5e35b1 !important; } .programCell-kids { background: #039be5 !important; } .programCell-news { background: #43a047 !important; } .programCell-active { background: #1e1e1e !important; } .guide-channelHeaderCell:focus, .programCell:focus { background-color: #00a4dc !important; color: #fff !important; } .guide-programTextIcon { color: #1e1e1e; background: #555; } .guide-headerTimeslots { color: inherit; } .guide-date-tab-button { color: #555; color: rgba(255, 255, 255, 0.3); } .guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus { color: #00a4dc; } .guide-date-tab-button.show-focus:focus { background-color: #00a4dc; color: #fff; } .infoBanner { color: #ddd; background: #111; padding: 1em; border-radius: 0.25em; } .ratingbutton-icon-withrating { color: #c33; } .downloadbutton-icon-complete, .downloadbutton-icon-on { color: #4285f4; } .playstatebutton-icon-played { color: #c33; } .buttonActive { color: #00a4dc !important; } .card:focus .cardBox.visualCardBox, .card:focus .cardBox:not(.visualCardBox) .cardScalable { border-color: #00a4dc !important; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-track-piece { background-color: #3b3b3b; } .layout-desktop ::-webkit-scrollbar, .layout-tv ::-webkit-scrollbar { width: 0.4em; height: 0.4em; } ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; background: center no-repeat #888; } .timeslotHeaders-desktop::-webkit-scrollbar { height: 0.7em; } .metadataSidebarIcon { color: #00a4dc; } .emby-button.detailFloatingButton { background-color: #00a4dc; color: #fff; } .layout-tv .emby-button.detailFloatingButton:focus { background-color: #f2f2f2; color: #00a4dc; } #comicsPlayer, #bookPlayer, #pdfPlayer { background: #101010; } #comicsPlayer .swiper-pagination { background: #101010; color: #fff; } #bookPlayer .topButtons { color: #fff; } #comicsPlayer .actionButtonIcon, #pdfPlayer .actionButtonIcon { color: #fff; } #dialogToc { background-color: #101010; } #dialogToc .bookplayerButtonIcon { color: #ccc; } #dialogToc .bookplayerButtonIcon:hover { color: #00a4dc; } #dialogToc .toc li a:link { color: #ccc; } #dialogToc .toc li a:active, #dialogToc .toc li a:hover { color: #00a4dc; }