diff --git a/finimalism5-2.css b/finimalism5-2.css index da47c44..865e9de 100644 --- a/finimalism5-2.css +++ b/finimalism5-2.css @@ -1,1777 +1,1790 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); - -.headerTop { - padding: 1.1em; -} - -/* Display the new sections */ -.homeLibraryButton { - display: inline-block; - margin-right: 10px; /* Adjust the margin as needed */ -} - -.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) { - display: none; -} - -.emby-itemscontainer { - margin: 0 auto; /* Set left and right margins to auto */ - text-align: center; /* Center the content inside the container */ -} - -body { - font-family: "Nunito", sans-serif; - font-size: 12pt; /* Default font size for the body */ -} - -div.itemMiscInfo.itemMiscInfo-primary { - font-size: 14pt; -} - -p.overview.detail-clamp-text { - font-size: 13pt; /* Font size for the description */ -} - -/* Font for the Movies, TV and Live TV buttons */ -span.homeLibraryText { - font-family: "Nunito", sans-serif; - 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(to right, rgba(163, 95, 198, 1) 0%, rgba(6, 161, 217, 1) 100%); -} - -/*Alternate itempage*/ - -.itemBackdrop { - height: 31vh !important; - display: inherit; -} -.detailLogo { - display: none; -} -.layout-desktop .detailRibbon { - margin-top: 0; - padding-top: 0em; - padding-bottom: 0em; -} - -.layout-desktop .detailImageContainer .card { - top: 18vh; -} - -/* Title Banner Logo */ -#itemDetailPage .detailLogo { - position: static; - margin-left: 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 50%; - margin-top: -18vh; - margin-bottom: 2vh; -} - -.layout-mobile .detailLogo { - display: none !important; -} - -#itemDetailPage .itemName.infoText.parentNameLast { - display: none; -} - -.hide+.detailPageWrapperContainer .itemName { - display: block !important; -} - -.itemName { - margin: .5em 0 !important; -} - -.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { - display: block; -} - -/*This file contains color and style changes for the dark theme type*/ -:root {--selection: 170, 95, 200;} - -.backgroundContainer.withBackdrop { - background-color: rgba(0, 0, 0, 0); -} - -/*Some themeing for the dashboard*/ - -#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(40, 40, 40, 0.8); - border-radius: 0.4em; -} - -/*Colors for title_2*/ -.layout-desktop .detailRibbon { - background: rgba(255,255,255,.1) !important; - height: 6em; -} -.itemBackdrop::after { - background: rgba(0,0,0,.1) !important; -} - -/*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ -.appfooter { - background: rgba(0,0,0,0.9); -} -.button-flat:hover { - background: rgba(0,0,0,0.9); -} - -/*Theme the library scan progress bar*/ -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; -} - -/*Login background*/ -#loginPage { - background: url(https://i.imgur.com/9vL4iNf.png) !important; - background-size: cover !important; -} - -/*Make watched icon, footer on chapter thumbnails (and other things), and count indicator dark and transparent*/ -.innerCardFooter, -.countIndicator, -.playedIndicator { - background: linear-gradient(to right, rgba(163, 95, 198, 0.5) 0%, rgba(6, 161, 217, 0.5) 100%); - box-shadow: none; -} - -.countIndicator { - box-shadow: none; -} - -/*Modify subtitle settings page*/ -.subtitleappearance-preview { - background: linear-gradient(140deg,#444,#111) !important; -} - -/*Affects blurhash to remove the saturated colors to fit overall look*/ -.blurhash-canvas { - filter: opacity(60%) saturate(60%); -} - -/*Dash and general UI styling*/ -.navMenuOption-selected, .selectionCommandsPanel { - background: #101010 !important; -} -.mainDrawer { - background-color: rgba(0, 0, 0, 0.8); -} -.raised, -.fab, -a[data-role="button"] { - background: rgba(40, 40, 40, 0.8) !important; - transition: all 0.2s !important; -} -.raised:hover, -.fab:hover, -.navMenuOption:hover, -.actionSheetMenuItem:hover { - background: rgba(80, 80, 80, 0.8) !important; -} -.paper-icon-button-light:hover { - background-color: rgba(0, 0, 0, 0.4) !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) - } -} - -/*Colors for loading spinner, placeholders, scroll bars*/ -.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(40, 40, 40, 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: #0a0a0a; -} -.defaultCardBackground2 { - background-color: #141414; -} -.defaultCardBackground3 { - background-color: #212121; -} -.defaultCardBackground4 { - background-color: #333333; -} -.defaultCardBackground5 { - background-color: #666666; -} - -.raised:hover, -.fab:hover, -a[data-role="button"]:hover { - background: rgba(var(--accent),0.5) !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: rgba(var(--accent),0.5) !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; -} - -/* Syncplay theming*/ -.syncPlayIconCircle { - color: rgba(var(--accent),1) !important; - text-shadow: none !important; -} - -/*Card indicators style normal*/ -.innerCardFooter { - margin: .5em; -} - -.countIndicator { - background: rgba(var(--indicator),0.8); - box-shadow: none; -} -.playedIndicator, .innerCardFooter { - background: rgba(0,0,0,0.4); - box-shadow: none; -} - -.mediaSourceIndicator { - background: rgba(0,0,0,0.4); - box-shadow: none; - border-radius: var(--rounding); -} - -/*Tweak entry fields, checkmarks, thin borders dark highlight*/ -.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; -} - -/*Theme the library scan progress bar*/ -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; -} - -/*Narrow the login form, size according to display size (bigger on mobile)*/ -#loginPage .readOnlyContent, -#loginPage form { - max-width: 22em; -} - -#loginPage .padded-left.padded-right.padded-bottom-page { - margin-top: 8em -} - -/*Hide "manual" and "forgot" buttons}*/ -#loginPage .raised.cancel.block.btnForgotPassword.emby-button { - display: none -} - -#loginPage .padded-left.padded-right.padded-bottom-page { - margin-left: auto; - margin-right: auto; - background: rgba(0, 0, 0, 0.35); - width: 24em; - border-radius: var(--rounding); -} -#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.imgur.com/9vL4iNf.png) !important; - background-size: cover !important; -} - - -/*Size episode preview images in a more compact way*/ -.listItemImage.listItemImage-large.itemAction.lazy { - transition: filter 0.2s -} -.listItemImageButton-icon { - padding: 0; -} -.secondary.listItem-overview.listItemBodyText { - height: 61px; - margin: 0; -} -.listItemImageButton { - margin: auto; - font-size: 1.6em !important; -} -@media all and (min-width: 100em){ - .listItemImage.listItemImage-large.itemAction.lazy { - height: 110px; - } - .listItem-content { - height: 115px; - } - .secondary.listItem-overview.listItemBodyText { - height: 4em; - margin: 0; - } -} -@media all and (max-width: 100em){ - .listItemImage.listItemImage-large.itemAction.lazy {height: 80px;} - .listItem-content {height: 85px;} - .secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;} -} - -.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, -.innerCardFooter, -.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: 10pt; -} - -.card.show-animation:focus>.cardBox { - -webkit-transform:scale(1.1); - transform:scale(1.1); -} - -/*Theme user setting tab buttons*/ -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; -} - -/*Mobile tweaks*/ -.layout-mobile .detailPagePrimaryContainer { - background: transparent; - padding-top: 0.5em; - padding-bottom: 0.5em; - -} -.layout-mobile .adminDrawerLogo { - border-bottom: none; -} -.layout-mobile .itemBackdrop { - margin-top: 4rem; -} - -/*Stop covers from being scrolled on desktop*/ -.layout-desktop .detailImageContainer .card { - position: fixed !important; - top: 10% !important; -} -.layout-mobile .detailImageContainer .card { - position: absolute !important; -} -/*Top "task bar" enlarge text*/ -.headerTabs.sectionTabs { - text-size-adjust: 110%; - font-size: 110%; -} -.pageTitle { - margin-top: auto; - margin-bottom: auto; -} - -/*Theme process progress ring*/ -.progressring-spiner { - border-color: rgba(var(--accent)); - border-width: .35em; -} -.progressring { - margin: .4em; -} -.progressring-bg { - display: none; -} - -/*Theme link color*/ -#itemDetailPage .button-link {color: inherit !important;} - -/*Accommodate mobile and align buttons and indicators*/ -.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(0, 0, 0, 0); - } -} -/* Play button hovering (for low width windows) */ -@media all and (max-width: 70em){ - .cardOverlayFab-primary { - background-color: #00000000; - } - .cardOverlayButtonIcon { - background-color: #00000000 !important; - } - .cardOverlayContainer { - background-color: rgba(0, 0, 0, 0); - } - .cardOverlayButton { - padding: 0.25em; - } -} - -/*Media player*/ -.nowPlayingPageImage { - border: none; -} - -.upNextDialog-countdownText { - color: white; -} - -/*Shrink the mouseover chapter image when scrobbling, still media player*/ -.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); -} - -/*Narrow margins, theme main page*/ -.cardBox-bottompadded { - margin-bottom: 0.4em !important; -} -.itemsContainer > .card > .cardBox { - margin-right: 0.8em; -} -.raised.homeLibraryButton { - background: rgba(0, 0, 0, 0.3) !important; -} -.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 { - transition: 0.2s; - background: rgba(0, 0, 0, 0.4); -} -.visualCardBox, .cardImageContainer { - box-shadow: none; -} -.backgroundProgress > div { - background: rgba(0, 0, 0, 0); -} -.itemProgressBar { - background: rgba(0, 0, 0, 0.25); - height: .5em; - position: absolute; - bottom: 0em; - left: 0; /* You may adjust the left position if needed */ - width: 100%; /* Ensures it spans the full width of the container */ -} -#divRunningTasks span { - color: rgba(255,255,255,0.75) !important; -} -.itemsContainer > .card > .cardBox { - margin-left: 0.6em !important; -} -.itemsContainer > .card > .cardBox { - margin-right: 0.8em; -} - -/*ANIMATIONS*/ -/*Hover background for section title buttons*/ -.button-flat:hover { - background: rgba(0, 164, 220, 0.2); - 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; -} - -/*Remove background on some icons*/ -.listItemIcon { - background: #0000 !important; -} - -/*Remove divider on list items*/ -.listItem-border { - border-color: rgba(255, 255, 255, 0) !important; -} - -/*Fix footers/headers displaying on small pop-ups*/ -.formDialogFooter-clear, -.formDialogHeader-clear, -.innerCardFooterClear { - background-color: transparent !important; -} - -.emby-button.show-focus:focus { - background: rgba(var(--accent),0.5) !important; -} -.paper-icon-button-light.show-focus:focus { - color: rgba(var(--accent)) !important; -} - -/*Title text buttons*/ -button-flat:hover { - color: rgba(var(--accent)) !important; -} - -.raised:hover, -.fab:hover, -a[data-role="button"]:hover { - background: rgba(var(--accent),0.5) !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)); -} - -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: rgba(var(--accent),0.5) !important; -} - -.emby-checkbox:checked + span + .checkboxOutline, -.emby-textarea:focus, -.emby-select-withcolor:focus, -.emby-input:focus, -.itemSelectionPanel { - border: 0.01em solid rgba(var(--accent),0.5) !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; -} - -/* Syncplay theming*/ -.syncPlayIconCircle { - color: rgba(var(--accent),1) !important; - text-shadow: none !important; -} - -/*Enlarge button row on item page, even more on mobile*/ -.mainDetailButtons { - font-size: 120%; -} - -/*Add fixes, start of file*/ -@media all and (min-width: 100em){ - .button-flat { - margin: .2em !important; - padding: .85em !important; - } -} -@media all and (max-width: 100em){ - .mainDetailButtons { - font-size: 155%; - } - .detailButton { - max-width: 15vw !important; - } -} - -/*Media player*/ -.startTimeText, .endTimeText { - width: 3.4em; - display: block; - text-align: center; -} -.osdTitle { - margin-left: 0.5em; -} - -.videoOsdBottom { - padding-top: 1em; -} - -.skinHeader-withBackground.osdHeader { - height: 5em; -} - -/*Accommodate ultrawide aspect ratios*/ -@media (min-aspect-ratio: 1.98/1) { - .detailImageContainer .card { - width: 21vw !important ; - } - .detailPagePrimaryContainer { - padding-left: 28.45vw !important; - } - .detailPageContent { - padding-left: 28.45vw !important; - } -} -@media (min-aspect-ratio: 2.7/1) { - .detailImageContainer .card { - width: 16vw !important; - } - .detailPagePrimaryContainer { - padding-left: 23.45vw !important; - } - .detailPageContent { - padding-left: 23.45vw !important; - } -} - -/*Tweak entry field padding and alignment/sizes*/ -.emby-input, -.emby-textarea { - padding: .4em .55em; -} -.emby-select { - padding: .35em 1.9em .35em .35em; -} -.selectArrow { - margin-top: 1.05em; -} - -/*Fix weird shevron off centering*/ -.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { - padding-top:0em; -} -.sectionTitle { - margin-left: .4em !important; - margin-top: .2em !important; - margin-bottom: .2em !important; -} -.sectionTitleTextButton > .material-icons { - margin: 0; -} -.layout-mobile .sectionTitleTextButton > .material-icons { - padding-top: .2em; -} - -/*Fix the UI shifting around*/ -.nowPlayingBarCurrentTime { - width: 6em; -} -.osdTextContainer { - margin: 0 !important; - margin-top: 0.2em !important; - padding-left: 0.5em !important; - padding-right: 0.5em !important; -} - -/*Fix top right user icon when using a profile image*/ -.headerUserButtonRound { - border-radius: 50px !important; -} - -/*Improve some menu alignments*/ -.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; -} - -/*Shrink and square (or round) cast thumnails*/ -@media all and (min-width: 131.25em){ - #castContent .card.overflowPortraitCard { - width: 6.3vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 120em) and (max-width: 131.25em){ - #castContent .card.overflowPortraitCard { - width: 6.4vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 100em) and (max-width: 120em){ - #castContent .card.overflowPortraitCard { - width: 7.6vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 87.5em) and (max-width: 100em){ - #castContent .card.overflowPortraitCard { - width: 9.3vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 75em) and (max-width: 87.5em){ - #castContent .card.overflowPortraitCard { - width: 10.5vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 50em) and (max-width: 75em){ - #castContent .card.overflowPortraitCard { - width: 15vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 43.75em) and (max-width: 50em){ - #castContent .card.overflowPortraitCard { - width: 20.1vw !important; - font-size: 90% !important; - } -} -@media all and (min-width: 25em) and (max-width: 43.75em){ - #castContent .card.overflowPortraitCard { - width: 31.2vw !important; - font-size: 90% !important; - } -} -@media all and (max-width: 25em){ - #castContent .card.overflowPortraitCard { - width: 40vw !important; - font-size: 90% !important; - } -} - -.cardPadder { - background-color: #0000 !important; box-shadow: none !important; -} - -/*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/ - -@media all and (min-width: 131.25em){ - #castContent .cardScalable { - width: calc(6.3vw - 0.6em) !important; - height: calc(6.3vw - 0.6em) !important; - } -} -@media all and (min-width: 120em) and (max-width: 131.25em){ - #castContent .cardScalable { - width: calc(6.4vw - 0.6em) !important; - height: calc(6.4vw - 0.6em) !important; - } -} -@media all and (min-width: 100em) and (max-width: 120em){ - #castContent .cardScalable { - width: calc(7.6vw - 0.6em) !important; - height: calc(7.6vw - 0.6em) !important; - } -} -@media all and (min-width: 87.5em) and (max-width: 100em){ - #castContent .cardScalable { - width: calc(9.3vw - 0.6em) !important; - height: calc(9.3vw - 0.6em) !important; - } -} -@media all and (min-width: 75em) and (max-width: 87.5em){ - #castContent .cardScalable { - width: calc(10.5vw - 0.6em) !important; - height: calc(10.5vw - 0.6em) !important; - } -} -@media all and (min-width: 50em) and (max-width: 75em){ - #castContent .cardScalable { - width: calc(15vw - 0.6em) !important; - height: calc(15vw - 0.6em) !important; - } -} -@media all and (min-width: 43.75em) and (max-width: 50em){ - #castContent .cardScalable { - width: calc(20.1vw - 0.6em) !important; - height: calc(20.1vw - 0.6em) !important; - } -} -@media all and (min-width: 25em) and (max-width: 43.75em){ - #castContent .cardScalable { - width: calc(31.2vw - 0.6em) !important; - height: calc(31.2vw - 0.6em) !important; - } -} -@media all and (max-width: 25em){ - #castContent .cardScalable { - width: calc(40vw - 0.6em) !important; - height: calc(40vw - 0.6em) !important; - } -} - -@media (min-width: 120em) { - .portraitCard, .squareCard { - width: 9.1111111111%; - } -} - -.skinHeader-withBackground { - background-color: transparent !important; -} - -/*Pages the have single unit height taskbar*/ -@media all and (min-width: 100em){ - #indexPage, - #moviesPage, - #tvRecommendedPage, - #musicRecommendedPage { - margin-top: 68px; - padding-top: 0px !important; - overflow-y: scroll; - } -} - -/*Pages the have two unit height taskbar*/ -@media all and (max-width: 100em){ - #indexPage, - #moviesPage, - #tvRecommendedPage, - #musicRecommendedPage { - margin-top: 130px; - padding-top: 0.5em !important; - overflow-y: scroll; - } -} - -.force-scroll { - overflow-y: auto; - overflow-x: auto; -} - -/*Glow accent on hover*/ -.raised.homeLibraryButton { - box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; - border: solid 1px rgba(var(--accent),0) !important; -} -.cardOverlayContainer:hover, -.dialog, -.toast, -.raised.homeLibraryButton:hover { - box-shadow: 0px 0px 5px rgb(var(--accent)) !important; - border: solid 1px rgba(var(--accent),0) !important; -} -.cardOverlayContainer { - border: solid 1px rgba(var(--accent),0.0) !important; -} -.drawer-open { - box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; - border-right: solid 1px rgba(var(--accent), 1) !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.35) !important; - } - .cardOverlayButtonIcon { - backdrop-filter: blur(4px); - } - } - .indicator { - backdrop-filter: blur(2px); - } -} - -:root {--accent: 6, 161, 217;} - -:root {--rounding: 12px;} - -/*hover zoom*/ -.homeLibraryButton:hover, -.homeLibraryButton:focus, -.card:hover, -.card:focus { - -webkit-filter: none !important; - box-shadow: 0 0 5px 0, 255, 222; - filter: none !important; - transform: scale(1.05); - transition: transform 1s ease; /* Add a 1-second transition with ease timing function */ -} - -/* Custom CSS to show only the channel name without the channel number */ -.channelsContainer .guide-channelHeaderCell::after { - content: attr(title); - display: block; - text-align: center; - font-size: 16px; - color: #ffffff; /* You can customize the color */ - margin-top: 10px; /* Adjust the spacing as needed */ -} - -.channelsContainer .guide-channelHeaderCell .guideChannelNumber { - display: none; /* Hide the channel number */ -} - -/*Style backdrop*/ -.backdropImage {filter: blur(0px) saturate(120%) contrast(130%) brightness(100%);} - - -/* Center the listItem content */ -.listItem { - text-align: center; - padding: 10px; -} - -/* Hide the listItemIcon */ -.listItemIcon { - display: none; - padding: 10px; -} - -/* Hide Genres and Writers */ -.detailsGroupItem.genresGroup, -.detailsGroupItem.writersGroup { - display: none; -} - -/* Hide Tags */ -.itemTags { - display: none; -} - -/* Extend max width of Video, Audio and Subtitles details */ - -.detailsGroupItem, .trackSelections .selectContainer { - display: -webkit-flex; - display: flex; - margin: 0 0 .5em !important; - max-width: 60em !important; - font-size: 13px; -} - -.trackSelections { - max-width: 60em !important; -} - -/* Hide Upcoming On TV section */ -#seriesScheduleSection { - display: none; -} - -.sectionTitle.sectionTitle-cards { - margin-right: 10px; /* Adjust the margin as needed */ -} - -.itemsContainer.padded-left { - flex: 1; - display: flex; /* Add this line */ - justify-content: center; /* Center the items within the container */ - -} - -.sectionTitle.sectionTitle-cards { - margin-right: 10px; /* Adjust the margin as needed */ -} - -.itemsContainer.padded-left { - flex: 1; -} - -/* Top bar padding 1px */ -.flex.align-items-center.flex-grow.headerTop { - padding-bottom: 20px; - height: 3.2em; -} - -/* Hide specific Live TV buttons */ -a[href="#!/livetv.html?tab=0&serverId=67303d06cb7c4c16b5be3492dafb9cae"], -a[href="#!/livetv.html?tab=1&serverId=67303d06cb7c4c16b5be3492dafb9cae"], -a[href="#!/livetv.html?tab=2&serverId=67303d06cb7c4c16b5be3492dafb9cae"], -a[href="#!/livetv.html?tab=3&serverId=67303d06cb7c4c16b5be3492dafb9cae"], -a[href="#!/livetv.html?tab=4&serverId=67303d06cb7c4c16b5be3492dafb9cae"], -a[href="#!/livetv.html?tab=5&serverId=67303d06cb7c4c16b5be3492dafb9cae"] { - display: none; -} - -.headerTabs .emby-tab-button { - /* Set your desired width */ - width: 160px; /* Adjust this value as needed */ - padding-top: 0.5em; -} - -.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) { - display: none; -} -.verticalSection.section2 .card.overflowBackdropCard { - width: 200px !important; /* Adjust the width as needed */ - font-size: 90% !important; -} - -/* Adjust font size for smaller screens if needed */ -@media all and (max-width: 767px) { - .verticalSection.section2 .card.overflowBackdropCard { - font-size: 80% !important; - } -} - - -/* Add more media queries for other screen sizes as needed */ - -/* Mobile or smaller screens */ -@media all and (max-width: 25em) { - .verticalSection.section2 .card.overflowBackdropCard { - width: 48vw !important; /* Adjust the width as needed */ - font-size: 90% !important; - } -} - -/* Adjust the size of cards in the "Series" section */ -.verticalSection.detailVerticalSection .overflowPortraitCard { - width: 30vw !important; /* Set the desired width for larger screens */ - font-size: 90% !important; /* Adjust the font size if needed */ -} - -/* Larger screens */ -@media all and (min-width: 58em) and (max-width: 64em) { - .verticalSection.detailVerticalSection .overflowPortraitCard { - width: 15vw !important; /* Set a different width for larger screens */ - } -} - -/* Extra-large screens */ -@media all and (min-width: 64em) { - .verticalSection.detailVerticalSection .overflowPortraitCard { - width: 10vw !important; /* Set an even smaller width for extra-large screens */ - } -} - -/* Mobile or smaller screens */ -@media all and (max-width: 48em) { - .verticalSection.detailVerticalSection .overflowPortraitCard { - width: 80vw !important; /* Set a larger width for smaller screens */ - } -} - -/* Gradient for buttons on hover */ -.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, -.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, -button.is-emby-button:hover emby-button { - background: linear-gradient(to right, rgba(163, 95, 198, 1), rgba(6, 161, 217, 1)) !important; - transition: background 0.3s ease; /* Add transition for smooth effect */ -} - -/* Remove default hover background color */ -.mainDrawer-scrollContainer.scrollContainer .navMenuOption, -.mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, -button.is-emby-button emby-button { - background-color: transparent !important; /* Set background color to transparent */ - transition: background 0.3s ease; /* Add transition for smooth effect */ -} - -/* Ensure the text color remains white when hovered */ -.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover .navMenuOptionText, -button.is-emby-button:hover emby-button .navMenuOptionText { - color: white !important; /* Set the text color */ -} - -/* Video Playback Progress Bar */ -.mdl-slider-background-lower, -.mdl-slider-background-upper { - background: linear-gradient(to right, rgba(163, 95, 198, 0.5) 0%, rgba(6, 161, 217, 0.5) 100%); -} - -/* Apply flex display style only to the Continue Watching section in the home page */ -.homePage .section1.verticalSection { - display: flex; - flex-direction: row; - align-items: center; /* Center items vertically */ -} - -/* Push "Continue Watching" header to the left */ -.homePage .section1.verticalSection .sectionTitle-cards { - margin-right: 10px; /* Adjust the margin as needed */ - margin-left: 10px; /* Adjust the margin as needed */ -} - -/* Push scroll buttons to the right */ -.homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { - margin-left: auto; -} - -/* Adjust alignment for the cards within the Continue Watching section */ -.homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { - width: 350px !important; /* Set the width to 300px */ - margin-top: 4em; - font-size: 90% !important; -} - -/* Adjust the card size for smaller screens if needed */ -@media all and (max-width: 767px) { - .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { - width: 250px !important; /* Adjust the width as needed for smaller screens */ - font-size: 80% !important; - } -} - - - -/* Adjust the size of the card image */ -.verticalSection .card img { - width: 100%; /* Make the image fill the card container */ - height: auto; /* Maintain the aspect ratio */ -} - - -/* Adjust the space between Next Up header and card */ -.detailVerticalSection .sectionTitle { - margin-bottom: 5px; /* Adjust the margin to your preference */ -} - -.detailVerticalSection .nextUpItems { - margin-top: -5px; /* Adjust the negative margin to bring the cards closer */ -} - -#txtCustomCss { - height: 400px !important; /* Adjust the height as needed */ - max-height: none !important; - overflow-y: scroll !important; - resize: vertical !important; -} - -.customCssContainer textarea { - height: auto !important; -} - -.sectionTitleContainer.sectionTitleContainer-cards.padded-left > .sectionTitle.sectionTitle-cards { - display: none; -} - -.sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { - margin-bottom: -2.6em; - padding-top: 0.5em; -} - -.mediaInfoItem { - margin-top: 0.6em !important; -} - -.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; -} - -.homePage .section1.verticalSection .sectionTitle-cards { - margin-right: 0.5em; - margin-left: 10px; -} - -.homeLibraryButton { - margin-left: 0.1em !important; - margin-right: 0.1em !important; - min-width: 7em; -} - -.alphaPickerRow { - position: relative; - top: 4em; -} +@import url("https://git.levi.land/Levi/jellyskin-mod-public/raw/branch/main/wll-fonts.css"); + +:root { + --accent1-light: hsla(349, 100%, 80%, 1); + --accent1-dark: hsla(349, 46%, 58%, 1); + --accent1-light-opacity1: hsla(349, 100%, 80%, 0.4); + --accent1-light-opacity0-2: hsla(349, 100%, 80%, 0.2); + --accent2-light: hsla(348, 100%, 71%, 1); + --accent2-dark: hsla(348, 50%, 50%, 1); + --accent2-superdark: hsla(348, 58%, 23%, 1); + --swiper-theme-color: hsla(351, 100%, 70%, 1); +} + + +.headerTop { + padding: 1.1em; +} + +/* Display the new sections */ +.homeLibraryButton { + display: inline-block; + margin-right: 10px; /* Adjust the margin as needed */ +} + +.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) { + display: none; +} + +.emby-itemscontainer { + margin: 0 auto; /* Set left and right margins to auto */ + text-align: center; /* Center the content inside the container */ +} + +body { + font-family: "SickFontBro", sans-serif; + font-size: 12pt; /* Default font size for the body */ +} + +div.itemMiscInfo.itemMiscInfo-primary { + font-size: 14pt; +} + +p.overview.detail-clamp-text { + font-size: 13pt; /* Font size for the description */ +} + +/* Font for the Movies, TV and Live TV buttons */ +span.homeLibraryText { + font-family: "SickFontBro", sans-serif; + 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(to right, var(--accent1-dark) 0%, var(--accent1-light) 100%); +} + +/*Alternate itempage*/ + +.itemBackdrop { + height: 31vh !important; + display: inherit; +} +.detailLogo { + display: none; +} +.layout-desktop .detailRibbon { + margin-top: 0; + padding-top: 0em; + padding-bottom: 0em; +} + +.layout-desktop .detailImageContainer .card { + top: 18vh; +} + +/* Title Banner Logo */ +#itemDetailPage .detailLogo { + position: static; + margin-left: 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 50%; + margin-top: -18vh; + margin-bottom: 2vh; +} + +.layout-mobile .detailLogo { + display: none !important; +} + +#itemDetailPage .itemName.infoText.parentNameLast { + display: none; +} + +.hide+.detailPageWrapperContainer .itemName { + display: block !important; +} + +.itemName { + margin: .5em 0 !important; +} + +.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { + display: block; +} + +/*This file contains color and style changes for the dark theme type*/ +:root {--selection: 170, 95, 200;} + +.backgroundContainer.withBackdrop { + background-color: rgba(0, 0, 0, 0); +} + +/*Some themeing for the dashboard*/ + +#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(40, 40, 40, 0.8); + border-radius: 0.4em; +} + +/*Colors for title_2*/ +.layout-desktop .detailRibbon { + background: rgba(255,255,255,.1) !important; + height: 6em; +} +.itemBackdrop::after { + background: rgba(0,0,0,.1) !important; +} + +/*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ +.appfooter { + background: rgba(0,0,0,0.9); +} +.button-flat:hover { + background: rgba(0,0,0,0.9); +} + +/*Theme the library scan progress bar*/ +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; +} + +/*Login background*/ +#loginPage { + background: url(https://i.imgur.com/9vL4iNf.png) !important; + background-size: cover !important; +} + +/*Make watched icon, footer on chapter thumbnails (and other things), and count indicator dark and transparent*/ +.innerCardFooter, +.countIndicator, +.playedIndicator { + background: linear-gradient(to right, hsla(348, 58%, 23%, 0.5) 0%, hsla(348, 50%, 50%, 0.5) 100%); + box-shadow: none; +} + +.countIndicator { + box-shadow: none; +} + +/*Modify subtitle settings page*/ +.subtitleappearance-preview { + background: linear-gradient(140deg,#444,#111) !important; +} + +/*Affects blurhash to remove the saturated colors to fit overall look*/ +.blurhash-canvas { + filter: opacity(60%) saturate(60%); +} + +/*Dash and general UI styling*/ +.navMenuOption-selected, .selectionCommandsPanel { + background: #101010 !important; +} +.mainDrawer { + background-color: rgba(0, 0, 0, 0.8); +} +.raised, +.fab, +a[data-role="button"] { + background: rgba(40, 40, 40, 0.8) !important; + transition: all 0.2s !important; +} +.raised:hover, +.fab:hover, +.navMenuOption:hover, +.actionSheetMenuItem:hover { + background: rgba(80, 80, 80, 0.8) !important; +} +.paper-icon-button-light:hover { + background-color: rgba(0, 0, 0, 0.4) !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) + } +} + +/*Colors for loading spinner, placeholders, scroll bars*/ +.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(40, 40, 40, 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: #0a0a0a; +} +.defaultCardBackground2 { + background-color: #141414; +} +.defaultCardBackground3 { + background-color: #212121; +} +.defaultCardBackground4 { + background-color: #333333; +} +.defaultCardBackground5 { + background-color: #666666; +} + +.raised:hover, +.fab:hover, +a[data-role="button"]:hover { + background: rgba(var(--accent),0.5) !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: rgba(var(--accent),0.5) !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; +} + +/* Syncplay theming*/ +.syncPlayIconCircle { + color: rgba(var(--accent),1) !important; + text-shadow: none !important; +} + +/*Card indicators style normal*/ +.innerCardFooter { + margin: .5em; +} + +.countIndicator { + background: rgba(var(--indicator),0.8); + box-shadow: none; +} +.playedIndicator, .innerCardFooter { + background: rgba(0,0,0,0.4); + box-shadow: none; +} + +.mediaSourceIndicator { + background: rgba(0,0,0,0.4); + box-shadow: none; + border-radius: var(--rounding); +} + +/*Tweak entry fields, checkmarks, thin borders dark highlight*/ +.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; +} + +/*Theme the library scan progress bar*/ +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; +} + +/*Narrow the login form, size according to display size (bigger on mobile)*/ +#loginPage .readOnlyContent, +#loginPage form { + max-width: 22em; +} + +#loginPage .padded-left.padded-right.padded-bottom-page { + margin-top: 8em +} + +/*Hide "manual" and "forgot" buttons}*/ +#loginPage .raised.cancel.block.btnForgotPassword.emby-button { + display: none +} + +#loginPage .padded-left.padded-right.padded-bottom-page { + margin-left: auto; + margin-right: auto; + background: rgba(0, 0, 0, 0.35); + width: 24em; + border-radius: var(--rounding); +} +#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.imgur.com/9vL4iNf.png) !important; + background-size: cover !important; +} + + +/*Size episode preview images in a more compact way*/ +.listItemImage.listItemImage-large.itemAction.lazy { + transition: filter 0.2s +} +.listItemImageButton-icon { + padding: 0; +} +.secondary.listItem-overview.listItemBodyText { + height: 61px; + margin: 0; +} +.listItemImageButton { + margin: auto; + font-size: 1.6em !important; +} +@media all and (min-width: 100em){ + .listItemImage.listItemImage-large.itemAction.lazy { + height: 110px; + } + .listItem-content { + height: 115px; + } + .secondary.listItem-overview.listItemBodyText { + height: 4em; + margin: 0; + } +} +@media all and (max-width: 100em){ + .listItemImage.listItemImage-large.itemAction.lazy {height: 80px;} + .listItem-content {height: 85px;} + .secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;} +} + +.missingIndicator, .unairedIndicator { + background: #ae6030eb; + 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, +.innerCardFooter, +.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: 10pt; +} + +.card.show-animation:focus>.cardBox { + -webkit-transform:scale(1.1); + transform:scale(1.1); +} + +/*Theme user setting tab buttons*/ +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; +} + +/*Mobile tweaks*/ +.layout-mobile .detailPagePrimaryContainer { + background: transparent; + padding-top: 0.5em; + padding-bottom: 0.5em; + +} +.layout-mobile .adminDrawerLogo { + border-bottom: none; +} +.layout-mobile .itemBackdrop { + margin-top: 4rem; +} + +/*Stop covers from being scrolled on desktop*/ +.layout-desktop .detailImageContainer .card { + position: fixed !important; + top: 10% !important; +} +.layout-mobile .detailImageContainer .card { + position: absolute !important; +} +/*Top "task bar" enlarge text*/ +.headerTabs.sectionTabs { + text-size-adjust: 110%; + font-size: 110%; +} +.pageTitle { + margin-top: auto; + margin-bottom: auto; +} + +/*Theme process progress ring*/ +.progressring-spiner { + border-color: rgba(var(--accent)); + border-width: .35em; +} +.progressring { + margin: .4em; +} +.progressring-bg { + display: none; +} + +/*Theme link color*/ +#itemDetailPage .button-link {color: inherit !important;} + +/*Accommodate mobile and align buttons and indicators*/ +.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(0, 0, 0, 0); + } +} +/* Play button hovering (for low width windows) */ +@media all and (max-width: 70em){ + .cardOverlayFab-primary { + background-color: #00000000; + } + .cardOverlayButtonIcon { + background-color: #00000000 !important; + } + .cardOverlayContainer { + background-color: rgba(0, 0, 0, 0); + } + .cardOverlayButton { + padding: 0.25em; + } +} + +/*Media player*/ +.nowPlayingPageImage { + border: none; +} + +.upNextDialog-countdownText { + color: white; +} + +/*Shrink the mouseover chapter image when scrobbling, still media player*/ +.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); +} + +/*Narrow margins, theme main page*/ +.cardBox-bottompadded { + margin-bottom: 0.4em !important; +} +.itemsContainer > .card > .cardBox { + margin-right: 0.8em; +} +.raised.homeLibraryButton { + background: rgba(0, 0, 0, 0.3) !important; +} +.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 { + transition: 0.2s; + background: rgba(0, 0, 0, 0.4); +} +.visualCardBox, .cardImageContainer { + box-shadow: none; +} +.backgroundProgress > div { + background: rgba(0, 0, 0, 0); +} +.itemProgressBar { + background: rgba(0, 0, 0, 0.25); + height: .5em; + position: absolute; + bottom: 0em; + left: 0; /* You may adjust the left position if needed */ + width: 100%; /* Ensures it spans the full width of the container */ +} +#divRunningTasks span { + color: rgba(255,255,255,0.75) !important; +} +.itemsContainer > .card > .cardBox { + margin-left: 0.6em !important; +} +.itemsContainer > .card > .cardBox { + margin-right: 0.8em; +} + +/*ANIMATIONS*/ +/*Hover background for section title buttons*/ +.button-flat:hover { + background: rgba(0, 164, 220, 0.2); + 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; +} + +/*Remove background on some icons*/ +.listItemIcon { + background: #0000 !important; +} + +/*Remove divider on list items*/ +.listItem-border { + border-color: rgba(255, 255, 255, 0) !important; +} + +/*Fix footers/headers displaying on small pop-ups*/ +.formDialogFooter-clear, +.formDialogHeader-clear, +.innerCardFooterClear { + background-color: transparent !important; +} + +.emby-button.show-focus:focus { + background: rgba(var(--accent),0.5) !important; +} +.paper-icon-button-light.show-focus:focus { + color: rgba(var(--accent)) !important; +} + +/*Title text buttons*/ +button-flat:hover { + color: rgba(var(--accent)) !important; +} + +.raised:hover, +.fab:hover, +a[data-role="button"]:hover { + background: rgba(var(--accent),0.5) !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)); +} + +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: rgba(var(--accent),0.5) !important; +} + +.emby-checkbox:checked + span + .checkboxOutline, +.emby-textarea:focus, +.emby-select-withcolor:focus, +.emby-input:focus, +.itemSelectionPanel { + border: 0.01em solid rgba(var(--accent),0.5) !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; +} + +/* Syncplay theming*/ +.syncPlayIconCircle { + color: rgba(var(--accent),1) !important; + text-shadow: none !important; +} + +/*Enlarge button row on item page, even more on mobile*/ +.mainDetailButtons { + font-size: 120%; +} + +/*Add fixes, start of file*/ +@media all and (min-width: 100em){ + .button-flat { + margin: .2em !important; + padding: .85em !important; + } +} +@media all and (max-width: 100em){ + .mainDetailButtons { + font-size: 155%; + } + .detailButton { + max-width: 15vw !important; + } +} + +/*Media player*/ +.startTimeText, .endTimeText { + width: 3.4em; + display: block; + text-align: center; +} +.osdTitle { + margin-left: 0.5em; +} + +.videoOsdBottom { + padding-top: 1em; +} + +.skinHeader-withBackground.osdHeader { + height: 5em; +} + +/*Accommodate ultrawide aspect ratios*/ +@media (min-aspect-ratio: 1.98/1) { + .detailImageContainer .card { + width: 21vw !important ; + } + .detailPagePrimaryContainer { + padding-left: 28.45vw !important; + } + .detailPageContent { + padding-left: 28.45vw !important; + } +} +@media (min-aspect-ratio: 2.7/1) { + .detailImageContainer .card { + width: 16vw !important; + } + .detailPagePrimaryContainer { + padding-left: 23.45vw !important; + } + .detailPageContent { + padding-left: 23.45vw !important; + } +} + +/*Tweak entry field padding and alignment/sizes*/ +.emby-input, +.emby-textarea { + padding: .4em .55em; +} +.emby-select { + padding: .35em 1.9em .35em .35em; +} +.selectArrow { + margin-top: 1.05em; +} + +/*Fix weird shevron off centering*/ +.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { + padding-top:0em; +} +.sectionTitle { + margin-left: .4em !important; + margin-top: .2em !important; + margin-bottom: .2em !important; +} +.sectionTitleTextButton > .material-icons { + margin: 0; +} +.layout-mobile .sectionTitleTextButton > .material-icons { + padding-top: .2em; +} + +/*Fix the UI shifting around*/ +.nowPlayingBarCurrentTime { + width: 6em; +} +.osdTextContainer { + margin: 0 !important; + margin-top: 0.2em !important; + padding-left: 0.5em !important; + padding-right: 0.5em !important; +} + +/*Fix top right user icon when using a profile image*/ +.headerUserButtonRound { + border-radius: 50px !important; +} + +/*Improve some menu alignments*/ +.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; +} + +/*Shrink and square (or round) cast thumnails*/ +@media all and (min-width: 131.25em){ + #castContent .card.overflowPortraitCard { + width: 6.3vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 120em) and (max-width: 131.25em){ + #castContent .card.overflowPortraitCard { + width: 6.4vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 100em) and (max-width: 120em){ + #castContent .card.overflowPortraitCard { + width: 7.6vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 87.5em) and (max-width: 100em){ + #castContent .card.overflowPortraitCard { + width: 9.3vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 75em) and (max-width: 87.5em){ + #castContent .card.overflowPortraitCard { + width: 10.5vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 50em) and (max-width: 75em){ + #castContent .card.overflowPortraitCard { + width: 15vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 43.75em) and (max-width: 50em){ + #castContent .card.overflowPortraitCard { + width: 20.1vw !important; + font-size: 90% !important; + } +} +@media all and (min-width: 25em) and (max-width: 43.75em){ + #castContent .card.overflowPortraitCard { + width: 31.2vw !important; + font-size: 90% !important; + } +} +@media all and (max-width: 25em){ + #castContent .card.overflowPortraitCard { + width: 40vw !important; + font-size: 90% !important; + } +} + +.cardPadder { + background-color: #0000 !important; box-shadow: none !important; +} + +/*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/ + +@media all and (min-width: 131.25em){ + #castContent .cardScalable { + width: calc(6.3vw - 0.6em) !important; + height: calc(6.3vw - 0.6em) !important; + } +} +@media all and (min-width: 120em) and (max-width: 131.25em){ + #castContent .cardScalable { + width: calc(6.4vw - 0.6em) !important; + height: calc(6.4vw - 0.6em) !important; + } +} +@media all and (min-width: 100em) and (max-width: 120em){ + #castContent .cardScalable { + width: calc(7.6vw - 0.6em) !important; + height: calc(7.6vw - 0.6em) !important; + } +} +@media all and (min-width: 87.5em) and (max-width: 100em){ + #castContent .cardScalable { + width: calc(9.3vw - 0.6em) !important; + height: calc(9.3vw - 0.6em) !important; + } +} +@media all and (min-width: 75em) and (max-width: 87.5em){ + #castContent .cardScalable { + width: calc(10.5vw - 0.6em) !important; + height: calc(10.5vw - 0.6em) !important; + } +} +@media all and (min-width: 50em) and (max-width: 75em){ + #castContent .cardScalable { + width: calc(15vw - 0.6em) !important; + height: calc(15vw - 0.6em) !important; + } +} +@media all and (min-width: 43.75em) and (max-width: 50em){ + #castContent .cardScalable { + width: calc(20.1vw - 0.6em) !important; + height: calc(20.1vw - 0.6em) !important; + } +} +@media all and (min-width: 25em) and (max-width: 43.75em){ + #castContent .cardScalable { + width: calc(31.2vw - 0.6em) !important; + height: calc(31.2vw - 0.6em) !important; + } +} +@media all and (max-width: 25em){ + #castContent .cardScalable { + width: calc(40vw - 0.6em) !important; + height: calc(40vw - 0.6em) !important; + } +} + +@media (min-width: 120em) { + .portraitCard, .squareCard { + width: 9.1111111111%; + } +} + +.skinHeader-withBackground { + background-color: transparent !important; +} + +/*Pages the have single unit height taskbar*/ +@media all and (min-width: 100em){ + #indexPage, + #moviesPage, + #tvRecommendedPage, + #musicRecommendedPage { + margin-top: 68px; + padding-top: 0px !important; + overflow-y: scroll; + } +} + +/*Pages the have two unit height taskbar*/ +@media all and (max-width: 100em){ + #indexPage, + #moviesPage, + #tvRecommendedPage, + #musicRecommendedPage { + margin-top: 130px; + padding-top: 0.5em !important; + overflow-y: scroll; + } +} + +.force-scroll { + overflow-y: auto; + overflow-x: auto; +} + +/*Glow accent on hover*/ +.raised.homeLibraryButton { + box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; + border: solid 1px rgba(var(--accent),0) !important; +} +.cardOverlayContainer:hover, +.dialog, +.toast, +.raised.homeLibraryButton:hover { + box-shadow: 0px 0px 5px rgb(var(--accent)) !important; + border: solid 1px rgba(var(--accent),0) !important; +} +.cardOverlayContainer { + border: solid 1px rgba(var(--accent),0.0) !important; +} +.drawer-open { + box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; + border-right: solid 1px rgba(var(--accent), 1) !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.35) !important; + } + .cardOverlayButtonIcon { + backdrop-filter: blur(4px); + } + } + .indicator { + backdrop-filter: blur(2px); + } +} + + +:root {--accent: 217, 6, 105;} + +:root {--rounding: 12px;} + +/*hover zoom*/ +.homeLibraryButton:hover, +.homeLibraryButton:focus, +.card:hover, +.card:focus { + -webkit-filter: none !important; + box-shadow: 0 0 5px 0, 255, 222; + filter: none !important; + transform: scale(1.05); + transition: transform 1s ease; /* Add a 1-second transition with ease timing function */ +} + +/* Custom CSS to show only the channel name without the channel number */ +.channelsContainer .guide-channelHeaderCell::after { + content: attr(title); + display: block; + text-align: center; + font-size: 16px; + color: #ffffff; /* You can customize the color */ + margin-top: 10px; /* Adjust the spacing as needed */ +} + +.channelsContainer .guide-channelHeaderCell .guideChannelNumber { + display: none; /* Hide the channel number */ +} + +/*Style backdrop*/ +.backdropImage {filter: blur(0px) saturate(120%) contrast(130%) brightness(100%);} + + +/* Center the listItem content */ +.listItem { + text-align: center; + padding: 10px; +} + +/* Hide the listItemIcon */ +.listItemIcon { + display: none; + padding: 10px; +} + +/* Hide Genres and Writers */ +.detailsGroupItem.genresGroup, +.detailsGroupItem.writersGroup { + display: none; +} + +/* Hide Tags */ +.itemTags { + display: none; +} + +/* Extend max width of Video, Audio and Subtitles details */ + +.detailsGroupItem, .trackSelections .selectContainer { + display: -webkit-flex; + display: flex; + margin: 0 0 .5em !important; + max-width: 60em !important; + font-size: 13px; +} + +.trackSelections { + max-width: 60em !important; +} + +/* Hide Upcoming On TV section */ +#seriesScheduleSection { + display: none; +} + +.sectionTitle.sectionTitle-cards { + margin-right: 10px; /* Adjust the margin as needed */ +} + +.itemsContainer.padded-left { + flex: 1; + display: flex; /* Add this line */ + justify-content: center; /* Center the items within the container */ + +} + +.sectionTitle.sectionTitle-cards { + margin-right: 10px; /* Adjust the margin as needed */ +} + +.itemsContainer.padded-left { + flex: 1; +} + +/* Top bar padding 1px */ +.flex.align-items-center.flex-grow.headerTop { + padding-bottom: 20px; + height: 3.2em; +} + +/* Hide specific Live TV buttons */ +a[href="#!/livetv.html?tab=0&serverId=67303d06cb7c4c16b5be3492dafb9cae"], +a[href="#!/livetv.html?tab=1&serverId=67303d06cb7c4c16b5be3492dafb9cae"], +a[href="#!/livetv.html?tab=2&serverId=67303d06cb7c4c16b5be3492dafb9cae"], +a[href="#!/livetv.html?tab=3&serverId=67303d06cb7c4c16b5be3492dafb9cae"], +a[href="#!/livetv.html?tab=4&serverId=67303d06cb7c4c16b5be3492dafb9cae"], +a[href="#!/livetv.html?tab=5&serverId=67303d06cb7c4c16b5be3492dafb9cae"] { + display: none; +} + +.headerTabs .emby-tab-button { + /* Set your desired width */ + width: 160px; /* Adjust this value as needed */ + padding-top: 0.5em; +} + +.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) { + display: none; +} +.verticalSection.section2 .card.overflowBackdropCard { + width: 200px !important; /* Adjust the width as needed */ + font-size: 90% !important; +} + +/* Adjust font size for smaller screens if needed */ +@media all and (max-width: 767px) { + .verticalSection.section2 .card.overflowBackdropCard { + font-size: 80% !important; + } +} + + +/* Add more media queries for other screen sizes as needed */ + +/* Mobile or smaller screens */ +@media all and (max-width: 25em) { + .verticalSection.section2 .card.overflowBackdropCard { + width: 48vw !important; /* Adjust the width as needed */ + font-size: 90% !important; + } +} + +/* Adjust the size of cards in the "Series" section */ +.verticalSection.detailVerticalSection .overflowPortraitCard { + width: 30vw !important; /* Set the desired width for larger screens */ + font-size: 90% !important; /* Adjust the font size if needed */ +} + +/* Larger screens */ +@media all and (min-width: 58em) and (max-width: 64em) { + .verticalSection.detailVerticalSection .overflowPortraitCard { + width: 15vw !important; /* Set a different width for larger screens */ + } +} + +/* Extra-large screens */ +@media all and (min-width: 64em) { + .verticalSection.detailVerticalSection .overflowPortraitCard { + width: 10vw !important; /* Set an even smaller width for extra-large screens */ + } +} + +/* Mobile or smaller screens */ +@media all and (max-width: 48em) { + .verticalSection.detailVerticalSection .overflowPortraitCard { + width: 80vw !important; /* Set a larger width for smaller screens */ + } +} + +/* Gradient for buttons on hover */ +.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover, +.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button, +button.is-emby-button:hover emby-button { + background: linear-gradient(to right, rgba(163, 95, 198, 1), rgba(6, 161, 217, 1)) !important; + transition: background 0.3s ease; /* Add transition for smooth effect */ +} + +/* Remove default hover background color */ +.mainDrawer-scrollContainer.scrollContainer .navMenuOption, +.mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button, +button.is-emby-button emby-button { + background-color: transparent !important; /* Set background color to transparent */ + transition: background 0.3s ease; /* Add transition for smooth effect */ +} + +/* Ensure the text color remains white when hovered */ +.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover .navMenuOptionText, +button.is-emby-button:hover emby-button .navMenuOptionText { + color: white !important; /* Set the text color */ +} + +/* Video Playback Progress Bar */ +.mdl-slider-background-lower, +.mdl-slider-background-upper { + background: linear-gradient(to right, rgba(163, 95, 198, 0.5) 0%, rgba(6, 161, 217, 0.5) 100%); +} + +/* Apply flex display style only to the Continue Watching section in the home page */ +.homePage .section1.verticalSection { + display: flex; + flex-direction: row; + align-items: center; /* Center items vertically */ +} + +/* Push "Continue Watching" header to the left */ +.homePage .section1.verticalSection .sectionTitle-cards { + margin-right: 10px; /* Adjust the margin as needed */ + margin-left: 10px; /* Adjust the margin as needed */ +} + +/* Push scroll buttons to the right */ +.homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons { + margin-left: auto; +} + +/* Adjust alignment for the cards within the Continue Watching section */ +.homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { + width: 350px !important; /* Set the width to 300px */ + margin-top: 4em; + font-size: 90% !important; +} + +/* Adjust the card size for smaller screens if needed */ +@media all and (max-width: 767px) { + .homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard { + width: 250px !important; /* Adjust the width as needed for smaller screens */ + font-size: 80% !important; + } +} + + + +/* Adjust the size of the card image */ +.verticalSection .card img { + width: 100%; /* Make the image fill the card container */ + height: auto; /* Maintain the aspect ratio */ +} + + +/* Adjust the space between Next Up header and card */ +.detailVerticalSection .sectionTitle { + margin-bottom: 5px; /* Adjust the margin to your preference */ +} + +.detailVerticalSection .nextUpItems { + margin-top: -5px; /* Adjust the negative margin to bring the cards closer */ +} + +#txtCustomCss { + height: 400px !important; /* Adjust the height as needed */ + max-height: none !important; + overflow-y: scroll !important; + resize: vertical !important; +} + +.customCssContainer textarea { + height: auto !important; +} + +.sectionTitleContainer.sectionTitleContainer-cards.padded-left > .sectionTitle.sectionTitle-cards { + display: none; +} + +.sectionTitle.sectionTitle-cards.padded-left + .itemsContainer { + margin-bottom: -2.6em; + padding-top: 0.5em; +} + +.mediaInfoItem { + margin-top: 0.6em !important; +} + +.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; +} + +.homePage .section1.verticalSection .sectionTitle-cards { + margin-right: 0.5em; + margin-left: 10px; +} + +.homeLibraryButton { + margin-left: 0.1em !important; + margin-right: 0.1em !important; + min-width: 7em; +} + +.alphaPickerRow { + position: relative; + top: 4em; +}