.hidingAnimatedTab { visibility: hidden; } /* Fixes the issue of jqm panels altering the page background. */ .ui-panel-content-wrap { background: none !important; } .ui-panel fieldset + fieldset { margin-top: 2em; } .headerArrowImage { height: 20px; margin-left: .5em; } .background-theme-b, .dialog.background-theme-b { background-color: #181818; /*background: radial-gradient(circle, #282828, #141414);*/ } .ui-body-b { /* Need the important tag for paper dialogs with this class */ color: #fff !important; } .pageWithAbsoluteTabs { background-color: transparent !important; } .backdropContainer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .pageBackground { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .withBackdrop .pageBackground { background-color: rgba(6, 6,6, .9); display: block; } .pageWithAbsoluteTabs neon-animatable { z-index: 2; } .libraryPage .header { padding-bottom: 0; } .pageWithAbsoluteTabs .pageTabContent, .libraryPage > .ui-content { padding-top: 10px; } /*.pageWithAbsoluteTabs .pageTabContent { padding-left: .5em !important; padding-right: .5em !important; }*/ .flexPageTabContent.is-active { display: flex !important; } @media all and (max-width: 600px) { .libraryPage > .ui-content { padding-left: .5em !important; padding-right: .5em !important; } } .libraryPage .currentUsername { color: #fff; } .listHeader { margin: .25em 0; padding-left: 2px; line-height: 1.25em; line-height: initial; } @media all and (max-width: 500px) { .listHeader { padding-left: 5px; } } .listHeader + paper-button { margin-left: 2em; } .ehsContent, .ehsContent .pageTabContent { margin: 0 auto; } .homePageSection { margin-top: 20px; } .homePageSection + .homePageSection { margin-top: 30px; } .sectionHeaderButton { vertical-align: middle; margin: 0 0 .25em 1.5em; position: relative; top: 8px; } .viewPanelTabs { margin-bottom: 2em; } @media all and (max-width: 800px) { .hiddenSectionOnMobile { display: none; } } @media all and (min-width: 800px) { .hiddenSectionOnNonMobile { display: none; } } @media all and (min-width: 1200px) { .paddedItemsContainer { padding: 0 .8em; } } @media all and (min-width: 1200px) { .ehsContent:not(.fullWidth), .ehsContent .pageTabContent { width: 96%; } } @media all and (min-width: 2560px) { .ehsContent:not(.fullWidth), .ehsContent .pageTabContent { width: 96%; } } .detailPageContent, .detailPageContent > table { margin: 0 auto; padding: 0; border-spacing: 0; border-collapse: collapse; } .viewSettings { margin: 0 0 .25em; text-align: center; } .listPaging { text-align: center; margin: .5em 0 .5em; } .listPaging paper-fab { width: 40px; height: 40px; vertical-align: middle; } .viewControls + .listTopPaging { margin-left: .5em !important; } .labelPageSize { margin-left: 1em !important; display: inline !important; } .pageSizeContainer { display: inline-block; } @media all and (max-width: 650px) { .pageSizeContainer { display: none !important; } } .criticReview { margin: 1.5em 0; background: #222; padding: .8em .8em .8em 55px; border-radius: 5px; position: relative; } .criticReview:first-child { margin-top: .5em; } .criticReview img { width: 30px; } .criticRating { display: inline-block; margin-left: 1px; position: relative; top: -1px; vertical-align: middle; } .criticRatingScore { margin-bottom: .5em; } .itemTag { display: inline-block; background-color: #181818; border-radius: 4px; padding: 5px 7px; margin: 0 5px 5px 0; color: #fff !important; text-decoration: none; font-weight: normal !important; } a.itemTag:hover { background-color: #2489ce; } .itemLinks { text-align: center; padding: 0; } .itemLinks p { margin: .5em 0; } .reviewerName { color: #ccc; margin-top: .5em; } .reviewLink { margin-top: .5em; } .reviewDate { margin-left: 1em; } .reviewScore { position: absolute; left: .8em; } span.itemCommunityRating:not(:empty) + .userDataIcons { margin-left: 1.25em; } .userDataIcons paper-fab { background: #444; width: 40px; height: 40px; padding: 8px; } .itemBackdrop { background-size: cover; background-position: center 15%; background-repeat: no-repeat; height: 640px; position: relative; } .smallBackdrop { height: 500px; } .noSecondaryNavPage .itemBackdrop { margin-top: -50px; } .noBackdrop { height: 170px; background: #181818; margin-top: 0 !important; } .withBackdrop .noBackdrop { background-color: transparent; } .itemBackdropContent { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.7); min-height: 120px; } .noBackdrop .itemBackdropContent { background-color: transparent; } .detailNameContainer { margin-top: -120px; height: 110px; } .desktopMiscInfoContainer { position: absolute; bottom: 10px; } .lnkSibling { position: absolute; bottom: 0; text-decoration: none; font-weight: normal !important; display: none; background-color: rgba(0,0,0,0.6); color: #ddd !important; background-color: transparent; padding: 0; } .lnkSibling:not(.hide) { display: block; } .detailUserDataIcons { display: inline-block; } @media all and (min-width: 540px) { .detailUserDataIcons { margin-left: 1em; } } @media all and (max-width: 1200px) { .lnkSibling { display: none !important; } } .lnkPreviousItem { left: 10px; } .lnkNextItem { right: 10px; } .detailImageContainer { float: left; margin-top: -140px; } .itemDetailImage { border: solid 1px transparent; } .itemDetailImage.loaded { -moz-box-shadow: 0px 0 20px #000; -webkit-box-shadow: 0px 0 20px #000; box-shadow: 0px 0 20px #000; border: solid 1px #222; } .detailImageContainer img { width: 280px; /* This is just to make sure it always takes up some space */ min-height: 140px; } .portraitDetailImageContainer img { width: 220px; } .squareDetailImageContainer { margin-top: -150px; } .thumbDetailImageContainer { margin-top: -130px; } .itemDetailGalleryLink img:hover { -moz-box-shadow: 0 0 20px 3px #52B54B; -webkit-box-shadow: 0 0 20px 3px #52B54B; box-shadow: 0 0 20px 3px #52B54B; } .primaryDetailsContainer { float: left; padding: .75em 0 0 1.5em; width: 66%; } .portraitDetailImageContainer + .primaryDetailsContainer { width: 74%; } .parentName { display: block; margin-bottom: .5em; } .detailButtonsContainer { font-size: 90%; } .detailFloatingButton { width: 56px; height: 56px; top: -28px; position: absolute; right: 25%; background-color: #52B54B !important; } .btnFloatingRecord { background-color: #cc3333 !important; } .detailFloatingButton iron-icon { width: 40px; height: 40px; } @media all and (max-width: 1000px) { .primaryDetailsContainer { width: 64%; } .portraitDetailImageContainer + .primaryDetailsContainer { width: 72%; } .detailImageContainer img { width: 240px; /* This is just to make sure it always takes up some space */ min-height: 120px; } .portraitDetailImageContainer img { width: 180px; } } @media all and (max-width: 800px) { .parentName { margin-bottom: 1em; } .primaryDetailsContainer { padding-top: 2.5em; padding-left: 1em; } .detailNameContainer { margin-top: auto; height: auto; } .itemBackdropContent { min-height: 0; } } @media all and (max-width: 600px) { .detailFloatingButton { right: 15px; } } @media all and (max-width: 600px) { .primaryDetailsContainer { width: 68%; } .portraitDetailImageContainer + .primaryDetailsContainer { width: 68%; } } @media all and (max-width: 400px) { .primaryDetailsContainer { width: 60%; } .portraitDetailImageContainer + .primaryDetailsContainer { width: 60%; } } @media all and (min-width: 500px) { .mobileDetails { display: none; } } @media all and (max-width: 500px) { .desktopDetails { display: none !important; } } .itemName { font-weight: normal !important; margin: .5em 0; } .empty { margin: 0; } .detailSection { vertical-align: top; margin-bottom: 3em; } .detailCollapsibleSection:not(.hide) + .detailCollapsibleSection { margin-top: -2em; } .detailPageCollabsible { margin-top: 0; } .detailPageCollabsible .ui-collapsible-heading a { background-color: #141414 !important; font-size: 16px; font-weight: 400 !important; border-radius: 4px; padding-top: .75em; padding-bottom: .75em; } .detailSection h1 { margin-bottom: .25em; position: relative; } .detailSectionHeader { background-clip: border-box; padding: 0 0 .25em .25em; background-color: transparent; border-radius: 0; margin-bottom: .5em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; } .detailSectionHeader, .detailSectionHeader h3 { font-size: 17px; font-weight: 400; } .ui-body-a .detailSectionHeader { border: 1px solid #ddd; border-width: 0 0 1px 0; } .ui-body-b .detailSectionHeader { border: 1px solid #444; border-width: 0 0 1px 0; } .detailSectionHeader, .detailSectionHeader h3 { font-size: 20px; } .detailSectionHeader paper-button { font-size: 13px; } .detailSectionHeaderButton { margin-left: 1em; } .lblDetailTab { border-color: #212121 !important; } .editMetadataForm { max-width: 100%; } .libraryPanelHeader { margin: 5px 0 15px 0; font-size: 15px; font-family: Montserrat; } .libraryPanelHeader a { text-decoration: none; } .libraryPanelHeader img { height: 24px; vertical-align: middle; margin-right: 6px; } .libraryPanelHeader span { color: #fff; vertical-align: middle; font-weight: 400; } .detailImageProgressContainer { position: absolute; bottom: 2px; right: 0; left: 0; text-align: center; } .detailImageProgressContainer progress { width: 100%; margin: 0 auto; height: 6px; } .viewControls, .listTopPaging { display: inline-block; } @media all and (min-width: 600px) { .inlineDetailSection:not(.hide) { display: inline-block; margin-bottom: 2em; } .editMetadataForm .ui-field-contain { margin: .25em 0; } } @media all and (max-height: 900px), (max-width: 800px) { .itemBackdrop:not(.noBackdrop) { height: 500px; } .smallBackdrop:not(.noBackdrop) { height: 300px; } } @media all and (max-height: 800px), (max-width: 700px) { .itemBackdrop:not(.noBackdrop) { height: 450px; } .smallBackdrop:not(.noBackdrop) { height: 300px; } } @media all and (max-height: 700px) { .itemBackdrop:not(.noBackdrop) { height: 350px; } .smallBackdrop:not(.noBackdrop) { height: 300px; } } @media all and (max-width: 540px) { .itemBackdrop:not(.noBackdrop) { height: 290px; } .smallBackdrop:not(.noBackdrop) { height: 200px; } } @media all and (max-height: 540px) { .itemBackdrop:not(.noBackdrop) { height: 250px; } .smallBackdrop:not(.noBackdrop) { height: 200px; } } @media all and (max-height: 460px) { .itemBackdrop:not(.noBackdrop) { height: 200px; } .smallBackdrop:not(.noBackdrop) { height: 120px; } } @media all and (max-height: 300px) { .itemBackdrop:not(.noBackdrop) { height: 150px; } .smallBackdrop:not(.noBackdrop) { height: 120px; } } @media all and (max-height: 250px) { .itemBackdrop:not(.noBackdrop) { height: 120px; } } @media all and (max-width: 1000px) { .detailImageContainer { padding-left: 15px; } } @media all and (max-width: 800px) { .editorMenuLink { display: none; } .noBackdrop { height: 80px; } .detailImageContainer { margin-top: -55px; } .squareDetailImageContainer { margin-top: -40px; } .thumbDetailImageContainer { margin-top: -80px; } .portraitDetailImageContainer + .primaryDetailsContainer { width: 70%; } .detailImageContainer img { width: 140px; /* This is just to make sure it always takes up some space */ min-height: 140px; } .primaryDetailPageContent p { margin: 1em 0 !important; } .backdropDetailPageContent { text-align: center; } .thumbDetailImageContainer img { width: 180px; /* This is just to make sure it always takes up some space */ min-height: 60px; } } .itemMiscInfo { text-overflow: ellipsis; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; } .mediaInfoItem { white-space: nowrap; } @media all and (max-width: 600px) { .portraitDetailImageContainer + .primaryDetailsContainer { width: 65%; } } @media all and (max-width: 500px) { .detailImageContainer img { width: 80px; /* This is just to make sure it always takes up some space */ min-height: 60px; } .thumbDetailImageContainer img { width: 180px; /* This is just to make sure it always takes up some space */ min-height: 60px; } .itemMiscInfo { text-align: center; justify-content: center; } .itemMiscInfo .endsAt { display: none; } } @media all and (min-width: 750px) { .detailPageContent { max-width: 950px; } } .detailPageParentLink { text-decoration: none; } .mediaInfoContent { line-height: 1.5em; } .mediaInfoStream { margin: 1em 3em 1em 0; display: inline-block; color: #bbb; vertical-align: top; } .mediaInfoStreamType { display: block; color: #fff; margin-bottom: 1em; font-size: 120%; } .mediaInfoAttribute { color: #fff; display: inline-block; } .mediaInfoLabel { color: #aaa; margin-right: 1em; display: inline-block; } .posterRibbon { display: block; position: absolute; top: 5px; right: 5px; text-align: center; padding: 5px 6px; border-radius: 10px; color: #fff; background: rgb(0, 143, 187); background: rgba(0, 143, 187, .8); line-height: initial; } .offlinePosterRibbon { background: rgba(248, 58, 34, .8); } .unairedPosterRibbon { background: rgba(255, 106, 0, .8); } .missingPosterRibbon { background: rgba(248, 58, 34, .8); } .syncIndicator { display: block; position: absolute; top: 5px; right: 5px; text-align: center; vertical-align: middle; width: 24px; height: 24px; border-radius: 50%; color: #fff; line-height: 19px; background-color: #52B54B; } .seriesTimerIndicator { color: #cc3333; position: absolute; top: 5px; right: 5px; } .playedIndicator + .syncIndicator { top: 32px; } .playedIndicator { display: flex; justify-content: center; align-items: center; position: absolute; top: 5px; right: 5px; text-align: center; vertical-align: middle; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgb(82, 181, 75); background: rgba(82, 181, 75, .95); line-height: 21px; line-height: initial; font-weight: 500; } .mediaSourceIndicator { display: block; position: absolute; top: 5px; left: 5px; text-align: center; vertical-align: middle; width: 22px; height: 19px; padding-top: 3px; border-radius: 50%; color: #fff; background: rgb(51, 136, 204); background: rgba(51, 136, 204, .9); line-height: 1.2; } .itemProgress { vertical-align: top; font-size: 19px; margin-right: 15px; font-weight: bold; } @media all and (min-width: 650px) { .libraryTabs .ui-btn-inner { padding: .5em 15px !important; } } /* All HTML5 progress enabled browsers */ .itemProgressBar { /* Turns off styling - not usually needed, but good to know. */ appearance: none; -moz-appearance: none; -webkit-appearance: none; /* gets rid of default border in Firefox and Opera. */ border: 0; margin: 0; height: 14px; border: 0 solid #222; border-radius: 0; width: 50px; margin-right: 5px; } /* Polyfill */ .itemProgressBar[role]:after { background-image: none; /* removes default background from polyfill */ } /* * Background of the progress bar background */ /* Firefox and Polyfill */ .itemProgressBar { background: #000 !important; /* !important only needed in polyfill */ } /* Chrome */ .itemProgressBar::-webkit-progress-bar { background: #000; } .pare /* * Background of the progress bar value */ /* Firefox */ .itemProgressBar::-moz-progress-bar { border-radius: 0; background-image: none; background-color: #52B54B; } /* Chrome */ .itemProgressBar::-webkit-progress-value { border-radius: 0; background-image: none; background-color: #52B54B; } /* Polyfill */ .itemProgressBar[aria-valuenow]:before { border-radius: 0; background-image: none; background-color: #52B54B; } .recordingProgressBar::-moz-progress-bar { background-color: #cc3333; } .recordingProgressBar::-webkit-progress-value { background-color: #cc3333; } .recordingProgressBar[aria-valuenow]:before { background-color: #cc3333; } .tileItem .itemProgressBar { top: 2px; width: 40px; margin-right: 1em; } .timelineHeader { margin-bottom: .25em; line-height: 1.25em; line-height: initial; } .itemsContainer { margin: 0 auto; line-height: 0; } .alphabetPicker { position: fixed; right: 5px; bottom: 0; z-index: 999; text-align: center; font-size: 90%; display: none; line-height: 1; } .layout-desktop .absolutePageTabContent .alphabetPicker { right: 20px; } .alphabetPicker a { display: block; text-decoration: none; padding: 1px 2px 1px 5px; font-weight: 500; } .alphabetPicker a:not(.selectedCharacter) { color: #bbb !important; } .selectedCharacter { color: #52B54B !important; } .itemOverlayHtml { max-height: 100px; margin-top: 1.5em; overflow: hidden; text-overflow: ellipsis; } .itemSelectionPanel { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background-color: rgba(0, 0, 0, .3); z-index: 999; border: 1px solid #43A047; } .itemSelectionPanel #checkbox { border-radius: 0 !important; } .selectionCommandsPanel { position: fixed; top: 0; left: 0; right: 0; height: 50px; background: #43A047; z-index: 1000; padding: 0 .75em 0 .25em; display: flex; align-items: center; color: #fff; } .itemSelectionCount { font-size: 28px; vertical-align: middle; color: #fff; display: inline-block; padding-top: 1px; } @media all and (min-height: 480px) { .alphabetPicker { display: block; } .itemsContainerWithAlphaPicker { margin-right: 20px; } .absolutePageTabContent .itemsContainerWithAlphaPicker { margin-right: 30px; } } @media all and (min-height: 480px) and (max-width: 800px) { .absolutePageTabContent .itemsContainerWithAlphaPicker iron-list { width: 99.5% !important; } } @media all and (min-height: 500px) { .alphabetPicker { bottom: 5px; } } @media all and (min-width: 1200px) { .itemsContainerWithAlphaPicker, .absolutePageTabContent .itemsContainerWithAlphaPicker { margin-right: 0; } } @media all and (min-height: 600px) { .alphabetPicker a { padding-top: 2px; padding-bottom: 2px; } } @media all and (min-height: 650px) { .alphabetPicker a { padding-top: 3px; padding-bottom: 3px; } } @media all and (min-height: 700px) { .alphabetPicker a { padding-top: 4px; padding-bottom: 4px; } } @media all and (min-height: 750px) { .alphabetPicker a { padding-top: 5px; padding-bottom: 5px; } } @media all and (min-height: 900px) { .alphabetPicker { bottom: 120px; } } @media all and (min-height: 1000px) { .alphabetPicker { bottom: 200px; } } .viewCollageImage { display: inline-block; margin: 0 1px 0 0; width: 32.62%; height: 49%; background-repeat: no-repeat; background-position: center 15%; background-size: cover; } @media all and (min-width: 650px) { .viewCollageImage { width: 32.9%; height: 49.1%; } } @media all and (min-width: 1440px) { .viewCollageImage { width: 32.95%; } } .spotlight { position: absolute; left: 0; right: 0; background-size: cover; background-position: center 25%; background-repeat: no-repeat; } .spotlight, .spotlightPlaceHolder { height: 340px; } .spotlightContainer { min-height: 340px; margin-top: 3em; } .spotlightPlaceHolder { margin-bottom: 3em; } .spotlightTitle { margin: 1em 0 .2em; } .spotlightContent { position: absolute; top: 60px; bottom: 55px; left: 210px; width: 600px; background: rgba(0,0,0,.8); border-radius: 5px; } .rightSpotlightContent { left: initial; width: 400px; right: 100px; } .spotlightPoster { height: 100%; background-size: 150px 100%; background-position: left center; background-repeat: no-repeat; overflow: hidden; } .rightSpotlightContent .spotlightPoster { background-size: 100% 180px; background-position: center top; } .spotlightContentInner { padding: 1em 1em 1em 170px; } .spotlightContentInner p { max-height: 130px; overflow: hidden; text-overflow: ellipsis; } .rightSpotlightContent .spotlightContentInner { padding: 195px 1em 1em 1em; } @media all and (max-height: 1079px) and (max-width: 1400px) { .spotlightContainer { display: none; } } .channelHeader { padding: 1em; text-align: center; border-bottom: 1px solid #333; } .channelHeader a { text-decoration: none; } .itemsListview { margin: 0 auto !important; max-width: 1000px; } .itemsListview { background-color: transparent !important; box-shadow: none !important; } .itemsListview .listItem { border-bottom: 1px solid #303030; padding-left: 0; padding-right: 0; } .itemsListview .listviewMenuButton { margin-right: 0 !important; } .itemsListview .ui-li-count { right: 1em; top: 70%; background: rgba(82, 181, 75, .8); border: 0; } .itemsListview .playedIndicator { left: 55px; top: 2px; } .itemsListview .syncIndicator, .itemsListview .pieIndicator { left: 55px; } .itemsListview .content-icon { width: auto !important; padding-right: .7em; } .itemsListview.paperList { text-align: left; } .itemsListview paper-item-body { min-height: 0 !important; } .itemsListview .mediaItem { padding: 7px 0; } .listviewImage { width: 80px; height: 80px; background-repeat: no-repeat; background-size: contain; background-position: center center; } .listviewImage.small { width: 70px; height: 70px; background-repeat: no-repeat; background-size: contain; background-position: center center; } .listViewUserDataButtons { visibility: hidden; } @media all and (min-width: 1200px) { .listItem:hover .listViewUserDataButtons { visibility: visible !important; } } @media all and (max-width: 1200px) { .listViewUserDataButtons { display: none; } } .userProfileSettingsForm { max-width: 700px; } .userProfileSettingsForm .detailSectionContent { padding: 0 .5em; } @media all and (max-width: 700px) { .userProfileSettingsForm .detailSection { margin-left: .5em; margin-right: .5em; } } @media all and (max-width: 1000px) { .smallDetailImageContainer { padding-left: 1em; } } .studioTabDisabled .tvStudiosTab, .studioTabDisabled .movieStudiosTab { display: none !important; } .tvEpisodesTabDisabled .tvEpisodesTab { display: none !important; } .homeFavoritesDisabled .homeFavoritesTab { display: none !important; } #criticReviewsContent.hiddenScrollX { white-space: nowrap; } #criticReviewsContent.hiddenScrollX .paperList { min-width: 240px; width: 90%; max-width: 500px; display: inline-block; vertical-align: top; margin: 0 4px 0 0; }