.item-fixed-side { width: 28em; max-width: 32vw; } .detailImageContainer-side { position: relative; } .reduce-font-size { font-size: 92%; } .topDetailsMain { overflow: hidden; margin-top: 11em; } .topDetailsMain.padded-left { -webkit-padding-start: 2.5%; padding-inline-start: 2.5%; } @media all and (orientation: landscape) { .topDetailsMain-graphic { min-height: 50vh; min-height: calc(40vh - 9.5em - env(safe-area-inset-top, 0)); -webkit-justify-content: flex-end; justify-content: flex-end; } .topDetailsMain-graphic-tv { min-height: 70vh; min-height: calc(100vh - 9.5em - env(safe-area-inset-top, 0)); } } .detailImage-transparent { background-color: transparent !important; } .detailImageContainerCard { contain: layout style !important; } .detailImage { box-shadow: 0 0.278em 1.39em rgb(0 0 0 / 20%) !important; } .detailImageContainerCard:not(.imageWidthTest) { width: 100% !important; } .detailImageContainerCard .cardBox { -webkit-margin-end: 0 !important; margin-inline-end: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .detailImage-nomarginleft .cardBox { -webkit-margin-start: 0 !important; margin-inline-start: 0 !important; } .detailImageContainerCard-side { max-width: 40vh; } .detailImageContainerCard-side .cardBox { margin: 0 !important; } .detailImageContainerCard .cardImageIcon { font-size: 600% !important; } .detailImageContainer-main { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; width: 14vw; margin-bottom: 1em; } .detailImageContainer-main.detailImageContainer-portrait { width: clamp(6vw, 23.5em, min(25vw, calc(70vh * (2 / 3)))); } .detailImageContainer-main-tv.detailImageContainer-portrait { width: clamp(6vw, 23.5em, 14vw); } .detailImageContainer-main.detailImageContainer-square { width: clamp(6vw, 20.5em, min(40vw, 40vh)); } .detailImageContainer-main-tv.detailImageContainer-square { width: clamp(6vw, 20.5em, 14vw); } .detailImageContainer-main.detailImageContainer-backdrop { width: 28vw; width: clamp(20vw, 49.5em, 28vw); top: 5em; } .detailImageContainer-main.detailImageContainer-banner { width: 28vw; width: clamp(20vw, 49.5em, 28vw); } .detailImageContainer-main.detailImageContainer-fourThree { width: 28vw; width: clamp(20vw, 49.5em, 28vw); } .detailImageContainer-main.detailImageContainer-small { max-width: 20vw; } @media all and (orientation: landscape) { .detailImageContainer-main.detailImageContainer-small { max-width: 14vw; } } .itemName-primary { margin: 0; overflow: hidden; font-size: 2.5em; } .itemName-secondary { margin: 0; font-size: 2em; } .btnDetailEdit { font-size: 72%; margin-top: 0; margin-bottom: 0; -webkit-margin-start: 1.25em; margin-inline-start: 1.25em; -webkit-margin-end: 0; margin-inline-end: 0; } .btnDetailEdit + .btnDetailEdit { -webkit-margin-start: 0.5em; margin-inline-start: 0.5em; } @media not all and (min-width: 60em) { .btnDetailEdit { display: none !important; } } .trackSelectionFieldContainer { -webkit-margin-end: 1.25em !important; margin-inline-end: 1.25em !important; margin-top: 0.25em !important; margin-bottom: 0.25em !important; max-width: 100%; } @supports selector(:hover) and (display: revert) and (column-gap: 1em) { .trackSelections { -webkit-column-gap: 2.25ch; column-gap: 2.25ch; } .trackSelectionFieldContainer { -webkit-margin-end: 0 !important; margin-inline-end: 0 !important; } } .detailMediaStreamsItemsContainer { font-size: 92%; } .mediaStreamTypeIcon { width: 1em; height: 1em; -webkit-margin-end: 0.5em; margin-inline-end: 0.5em; font-size: 130%; } .mediaStreamPadder { padding-bottom: 32em; aspect-ratio: 16/29.5; } .mediaStreamPadder-tv { padding-bottom: 190%; aspect-ratio: 16/29.5; } .mediaStreamInnerCardFooter { right: 0; top: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 0.5em 0.75em; color: inherit; font-size: 92%; text-shadow: none !important; } .mediaStreamInnerCardFooter .cardText { padding-top: 0.1em; padding-bottom: 0.1em; } .mediaInfoStream { -webkit-margin-end: 2em; margin-inline-end: 2em; } .mediaInfoAttributeLabel { -webkit-margin-end: 1.25em; margin-inline-end: 1.25em; font-weight: 600; } .mediaInfoAttributeValue { white-space: normal; } .itemName-primary-logo { height: 2.4em; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; } .itemLogoAsTitle { margin: 0 !important; border: 0 !important; max-height: 100%; max-width: 80%; object-fit: contain; object-position: left center; object-position: var(--logo-object-position); } @supports (object-fit: contain) { .itemLogoAsTitle { max-width: 18em; max-height: initial; height: 100%; width: 100%; } } .itemName-primary-logo-tv { height: 2em; } .item-tag-button { padding: 0.5em 0.9em; margin-top: 0.25em; margin-bottom: 0.25em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0.5em; margin-inline-end: 0.5em; } .itemBackdropContainer { height: 40vh; position: relative; } .itemBackdropContainer-small { height: 20vh; } .itemBackdrop { background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; } .itemBackdrop-contain { background-size: contain; } @media not all and (min-width: 60em) { .detail-mediaInfoPrimary { font-size: 92%; } } .overview-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-weight: 400; } .btnOverviewText.emby-button-focusscale:focus { -webkit-transform: scale(1.04); transform: scale(1.04); } .detailButton { margin-top: 0.75em !important; margin-bottom: 0.75em !important; -webkit-marg0in-start: 0 !important; margin-inline-start: 0 !important; -webkit-margin-end: 0.5em !important; margin-inline-end: 0.5em !important; -webkit-flex-shrink: 0; flex-shrink: 0; box-shadow: 0px 3px 15px rgba(0,0,0,0.4); !important; opacity 0.2s ease-out; color: #cecbcb; } .detailButton:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity ease-in-out; border-radius: 10px; } .detailButton:active { color: #000; } .detailButton:active:after { background: transparent; } .detailButton:hover:before { opacity: 1; } .detailButton:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 10px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .detailButton.raised { -webkit-justify-content: center; justify-content: center; } @supports selector(:hover) and (display: revert) and (column-gap: 1em) { .detailButtons, .detailRecordSeriesContainer { -webkit-column-gap: 0.5em; column-gap: 0.5em; } .detailButton { -webkit-margin-end: 0 !important; margin-inline-end: 0 !important; } } .detail-mediaInfoPrimary { margin: 0.25em 0; } .detailResumeInfo { position: relative; -webkit-flex-basis: 100%; flex-basis: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-order: 2; order: 2; margin: 0.25em 0; } .resumeName { font-weight: 600; text-align: start; } .resumeTimeRemaining { -webkit-margin-start: 1em; margin-inline-start: 1em; white-space: nowrap; font-size: 94%; } .itemPrimaryNameContainer { margin-bottom: 0.25em; } .itemPrimaryNameContainer-logo { margin-bottom: 0.25em; } @media all and (min-width: 50em) { .itemSecondaryNameContainer { margin-bottom: 0.25em; } .detailButton-lowres { display: none !important; } .resumeName { white-space: nowrap; } .resumeInfoDetail { -webkit-padding-start: 0.15em; padding-inline-start: 0.15em; } .itemBackdropContainer { display: none; background-image: none !important; } .itemBackdrop { background-image: none !important; } .tracklist-topmargin { padding-top: 1em; } .detailImageContainer-main { -webkit-margin-end: 3ch; margin-inline-end: 3ch; margin-bottom: 1em; } .detailImageContainer-main-extrabottommargin { margin-bottom: 2em; } } .tracklist-sidemargin { padding-left: 0.5em; padding-right: 0.5em; } .detailTextContainer { margin: 0 0; padding: 5em 1em; padding-bottom: 20em; } .detailTextContainer-extrapadding { padding: 0 1.6em; } .tagline { margin: 0.5em 0; } .directors { margin: 0.5em 0; } @media not all and (min-width: 50em) { .overview-twoline { -webkit-line-clamp: 2; } .detailButton { -webkit-order: 3; order: 3; } .detailButton-autotext { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 0 0.7em !important; background: 0 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-weight: 400 !important; margin-top: 1em !important; margin-bottom: 1em !important; border-radius: 0 !important; box-shadow: none !important; } .detailButton-autotext-icon { padding: 0.05em !important; margin-top: 0; margin-bottom: 0.1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; border: 0 !important; font-size: 2.1em !important; border-radius: 100%; } .detailButton-autotext-text { font-size: 84%; } .btnResume, .btnMainPlay { -webkit-order: 0; order: 0; } .btnPlayTrailer { -webkit-order: 1; order: 1; } .reduce-font-size-mobile { font-size: 92%; } .detail-mediaInfoPrimary.mediaInfo-centered { margin: 0.1em 0 0.25em; } .itemPrimaryNameContainer { margin-bottom: 0.1em; } .itemPrimaryNameContainer-logo { margin-bottom: 0.3em; } .itemSecondaryNameContainer { margin-bottom: 0.25em; } .resumeInfoProgressBar { -webkit-flex-grow: 1; flex-grow: 1; } .resumeInfoDetail { -webkit-justify-content: center; justify-content: center; } .resumeSpacer1, .resumeSpacer2 { display: none; } .detailButton-highres { display: none !important; } .itemMainScrollSlider-nopaddingtop { padding-top: 0 !important; } .detailImageContainer-hidemobile, .item-fixed-side, .backdropContainer-preventbackdrop { display: none !important; } .detailImageContainer-hidemobile .detailImage { background-image: none !important; } .detailMainContainer { position: relative; } .detailMainContainer-withitembackdrop { margin-top: -3em; } .detailMainContainer-vertical { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .overview-text-tracklist { -webkit-line-clamp: 1; } .detailButtons, .detailRecordSeriesContainer { -webkit-justify-content: center; justify-content: center; } .detailButton.raised { -webkit-flex-basis: 100%; flex-basis: 100%; } .detailButton-stacked { -webkit-flex-basis: calc(50% - 0.6em) !important; flex-basis: calc(50% - 0.6em) !important; -webkit-flex-grow: 1; flex-grow: 1; } .detailButton.raised:not(.detailButton-stacked) { margin-top: 0.25em !important; margin-bottom: 0.25em !important; } .detailRecordSeriesContainer { text-align: center; width: 100%; } .detailResumeInfo { text-align: center; } .detailTextContainer { width: 100%; } .mediaInfo-centered, .detailTextContainerInner-centered, .itemPrimaryNameContainer-centered { -webkit-justify-content: center; justify-content: center; } .detailTextContainerInner-centered { margin-bottom: 0.25em; } .nameContainer-centered { text-align: center; } .itemPrimaryNameContainer-centered h1 { font-size: 1.5em; } .detailImageContainer-main { width: 60vw !important; max-width: initial !important; } } @media all and (orientation: landscape) { .detailMainContainerParent-fade { position: relative; } .detailMainContainerParent-fade::before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0, 0, 0, 0.2); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 50%, transparent 100% ); } .itemMainScrollSlider-fade { position: relative; } .itemMainScrollSlider-fade::before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0, 0, 0, 0.6); } @supports (height: calc(3.125em + 2 * max(3em, 4em))) { .itemMainScrollSlider-fade::before { background: rgba(0, 0, 0, 0.86); -webkit-mask-image: linear-gradient( to bottom, transparent -10vh, black 90vh ); } } } @media all and (min-width: 60em) { .detailButton-lowres2 { display: none !important; } } @media not all and (min-width: 60em) { .detailButton-highres2 { display: none !important; } } @media all and (min-width: 80em) { .detailButton-lowres3 { display: none !important; } } @media not all and (min-width: 80em) { .detailButton-highres3 { display: none !important; } } .detailMainContainer-marginleft { -webkit-margin-start: 0.2em; margin-inline-start: 0.2em; } .overview-container { margin: 0.5em 0; } @media all and (min-width: 50em) { .resumeInfoProgressBar { width: 15em; } .details-additionalContent-fadein { -webkit-animation: backdrop-fadein 0.4s ease-out normal both; animation: backdrop-fadein 0.4s ease-out normal both; } .detailButton-autotext-text { display: none; } .detailButton-autotext-icon { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; display: inline-block; box-sizing: initial; padding: 0; } .detailButton-autotext-icon:not(.playstatebutton-icon-played) { background: 0 0 !important; } } @media all and (min-width: 70em) { .details-largefont .detailButtons, .details-largefont .overview-container { font-size: 108%; } .details-largefont .detailResumeInfo { font-size: 93%; margin: 0.35em 0; } } @media all and (min-width: 85em) { .details-largefont .detailButtons, .details-largefont .overview-container { font-size: 120%; } .details-largefont .detailResumeInfo { font-size: 83.5%; margin: 0.4em 0; } } .mediainfo-forcehide { display: none !important; } .detailSelectSeasonContainer .selectLabelText { display: none !important; } .detailSeasonSelect-actionsheet { width: 70ch; } .detailSeasonSelect-actionsheet .listItem-content { padding: 0 0.75em; } .seasonTabs { margin-top: 0.5em; } .seasonTabs-emby-tabs { margin-top: -0.5em; padding-top: 0.5em; margin-bottom: -0.5em; padding-bottom: 0.5em; } .detailSeasonTab { padding: 0.35em 1em; border-radius: 0.6em; } .detailSeasonTab.emby-tab-button-active:not(:focus) { background: 0 0; } @media (orientation: portrait) and (max-width: 35em) { .allEpisodesItemsContainer { --backdrop-cards: 1.4; } } @media (orientation: portrait) { .detailEndsAt { display: none !important; } } .detailHeader-noIcons .headerSearchButton, .detailHeader-noIcons .headerUserButton { display: none !important; }