:root { --background-hue: 0; --background-saturation: 0%; --background-lightness: 15.69%; --background-position: center center; --background-alpha: 1; --background-opacity: initial; --theme-primary-color-hue: 116; --theme-primary-color-saturation: 41.7%; --theme-primary-color-lightness: 50.2%; --theme-text-color-hue: 0; --theme-text-color-saturation: 0%; --theme-text-color-lightness: 100%; --theme-text-color-alpha: 0.87; --theme-secondary-text-color-alpha: 0.6; --theme-accent-text-color-lightbg: green; --theme-accent-text-color-darkbg: #6ccf65; --theme-accent-text-color: var(--theme-accent-text-color-darkbg); --button-background-hue: 0; --button-background-saturation: 0%; --button-background-lightness: 100%; --button-background-alpha: 0.2; --button-background-blur-lightness: var(--button-background-lightness); --button-background-blur-alpha: var(--button-background-alpha); --button-blur-backdrop-filter: none; --card-background-hue: var(--button-background-hue); --card-background-saturation: var(--button-background-saturation); --card-background-lightness: 100%; --card-background-alpha: 0.16; --input-background-hue: 0; --input-background-saturation: 0%; --input-background-lightness: 100%; --header-background: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); --header-blur-background: hsla( var(--background-hue), var(--background-saturation), var(--background-lightness), 0.66 ); --footer-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 7%) ); --line-background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.15 ); --line-size: 0.08em; --drawer-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 5%) ); --docked-drawer-background: rgba(0, 0, 0, 0.2); --dialog-border-width: 0; --focus-background-hue: 0; --focus-background-saturation: 0%; --focus-background-lightness: 100%; --focus-blur-background-lightness: 100%; --focus-text-color-lightness: 0%; --slider-lower-opacity: 0.7; } .theme-brickred:root { --background-gradient: linear-gradient( to right, rgb(142, 14, 0), rgb(31, 28, 24) ); } .theme-brickred[dir="rtl"]:root { --background-gradient: linear-gradient( to left, rgb(142, 14, 0), rgb(31, 28, 24) ); } .theme-superman:root { --background-gradient: linear-gradient( to right, rgba(120, 2, 6, var(--background-alpha)), rgba(6, 17, 97, var(--background-alpha)) ); } .theme-superman[dir="rtl"]:root { --background-gradient: linear-gradient( to left, rgba(120, 2, 6, var(--background-alpha)), rgba(6, 17, 97, var(--background-alpha)) ); } .theme-caracara:root { --background-gradient: linear-gradient( to top, rgba(211, 131, 18, var(--background-alpha)), rgba(168, 50, 121, var(--background-alpha)) ); } .theme-slateblue:root { --background-gradient: linear-gradient( to right, rgb(82, 82, 82), rgb(61, 114, 180) ); } .theme-slateblue[dir="rtl"]:root { --background-gradient: linear-gradient( to left, rgb(82, 82, 82), rgb(61, 114, 180) ); } .theme-purplebliss:root { --background-gradient: linear-gradient( to right, rgb(54, 0, 51), rgb(11, 135, 147) ); } .theme-purplebliss[dir="rtl"]:root { --background-gradient: linear-gradient( to left, rgb(54, 0, 51), rgb(11, 135, 147) ); } .theme-purpleflow:root { --background-gradient: linear-gradient( to right, rgb(123, 67, 151), rgb(220, 36, 48) ); } .theme-purpleflow[dir="rtl"]:root { --background-gradient: linear-gradient( to left, rgb(123, 67, 151), rgb(220, 36, 48) ); } .theme-blueradiance:root { --background-gradient: url(blueradiance.jpg); --background-opacity: var(--background-alpha); --background-position: center top; } .theme-wmc:root { --background-gradient: linear-gradient( to bottom, rgba(7, 25, 66, var(--background-alpha)) 0%, 7.04057%, rgba(4, 27, 75, var(--background-alpha)) 14.0811%, 21.3604%, rgba(5, 32, 79, var(--background-alpha)) 28.6396%, 29.9523%, rgba(5, 33, 82, var(--background-alpha)) 31.2649%, 32.1002%, rgba(5, 35, 83, var(--background-alpha)) 32.9356%, 33.7709%, rgba(6, 36, 86, var(--background-alpha)) 34.6062%, 36.9928%, rgba(6, 43, 94, var(--background-alpha)) 39.3795%, 43.1981%, rgba(8, 54, 110, var(--background-alpha)) 47.0167%, 52.9833%, rgba(8, 70, 134, var(--background-alpha)) 58.9499%, 62.7685%, rgba(8, 86, 151, var(--background-alpha)) 66.5871%, 67.7804%, rgba(8, 88, 155, var(--background-alpha)) 68.9737%, 75.0597%, rgba(14, 90, 156, var(--background-alpha)) 81.1456%, 84.4869%, rgba(12, 78, 147, var(--background-alpha)) 87.8282%, 90.3341%, rgba(12, 69, 138, var(--background-alpha)) 92.8401%, 96.42%, rgba(9, 53, 123, var(--background-alpha)) 100% ); } @media (pointer: fine) { :not(.layout-tv):root { --dialog-border-width: var(--line-size); } } .layout-tv:root { --header-background: transparent; --header-blur-background: transparent; } .dialog { --background-hue: 240; --background-saturation: 3.4%; --background-lightness: 16.4%; --theme-background: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); --header-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%) ); --footer-background: var(--header-background); --button-background-hue: var(--background-hue); --button-background-saturation: var(--background-saturation); --button-background-lightness: calc(var(--background-lightness) + 10%); --button-background-alpha: 0.7; --button-background-blur-lightness: var(--button-background-lightness); --button-background-blur-alpha: var(--button-background-alpha); --input-background-hue: var(--background-hue); --input-background-saturation: var(--background-saturation); --input-background-lightness: calc(var(--background-lightness) + 10%); --card-background-hue: var(--background-hue); --card-background-saturation: var(--background-saturation); --card-background-lightness: calc(var(--background-lightness) + 10%); --card-background-alpha: 0.7; border: var(--dialog-border-width) solid var(--line-background); box-shadow: inset 0 0 0 0.07em rgba(0, 0, 0, 0.2), 0 0.56em 2.8em rgba(0, 0, 0, 0.55); } .mainDrawer { background: var(--drawer-background); } .drawer-docked { background: var(--docked-drawer-background); -webkit-border-end: var(--line-size) solid var(--line-background); border-inline-end: var(--line-size) solid var(--line-background); } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .dialog-blur, .drawer-open-backdropfilter:not(.drawer-docked) { --background-hue: 0; --background-saturation: 0%; --background-lightness: 21.96%; background-color: hsla( var(--background-hue), var(--background-saturation), var(--background-lightness), 0.76 ); -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); } } html { color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); scrollbar-color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.4 ) transparent; background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); } .emby-collapsible-button-collapsed::after { background: var(--line-background); } .appfooter { background: var(--footer-background); } .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear) { background: var(--header-background); } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .skinHeader-withBackground.skinHeader-withbackdropfilter.headroom-scrolling:not( .semiTransparent ) { background: var(--header-blur-background); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); } .appfooter-withbackdropfilter { background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 10.5%), 0.66 ); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); } } .headerNowPlaying { background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%), 0.7 ); } .skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: transparent; background: 0 0; box-shadow: none !important; border-bottom: 0; --theme-text-color-lightness: 100%; --theme-text-color-alpha: 1; --focus-background-hue: 0; --focus-background-saturation: 0%; --focus-background-lightness: 100%; --focus-text-color-lightness: 0%; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .appHeader-tv.semiTransparent { --theme-text-color-alpha: 0.87; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .skinHeader.semiTransparent::before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset-inline-start: 0; inset-inline-end: 0; transition: opacity 0.3s ease-out; content: " "; opacity: 0; background-color: rgba(0, 0, 0, 0.3); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); z-index: -1; } .semiTransparent.headroom-scrolling { text-shadow: none; } .semiTransparent.headroom-scrolling::before { opacity: 1; } .pageTitleWithDefaultLogo { background-image: url(../logowhite.png); } .backgroundContainer { background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); background-image: var(--background-gradient); background-position: var(--background-position); background-repeat: no-repeat; background-size: cover; opacity: var(--background-opacity); } .theme-blueradiance .backgroundContainer { background-image: url(blueradiance.jpg); } .backgroundContainer.withBackdrop { --background-alpha: 0.9; --background-opacity: var(--background-alpha); background: var(--background-gradient); background-position: var(--background-position); background-repeat: no-repeat; background-size: cover; } .theme-blueradiance .backgroundContainer.withBackdrop { background: url(blueradiance.jpg); background-position: var(--background-position); background-repeat: no-repeat; background-size: cover; } .backgroundContainer-withfocuspreview.withBackdrop { --background-alpha: 1; --background-opacity: var(--background-alpha); background-image: linear-gradient( to right, #000, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 0), transparent ) !important; background-color: transparent; } [dir="rtl"] .backgroundContainer-withfocuspreview.withBackdrop { background-image: linear-gradient( to left, #000, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 0), transparent ) !important; } .itemBackgroundContainer.withBackdrop { --background-alpha: 0.85; --background-opacity: var(--background-alpha); } @media not all and (min-width: 50em) { .itemBackgroundContainer-preventbackdrop.withBackdrop { --background-alpha: 1; --background-opacity: var(--background-alpha); background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); } } .paper-icon-button-light:active { background-color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.2 ); } .paper-icon-button-light-tv:focus { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); --theme-text-color-lightness: var(--focus-text-color-lightness); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .paper-icon-button-light:focus-visible { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); --theme-text-color-lightness: var(--focus-text-color-lightness); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .raised, .fab { background: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), var(--button-background-alpha) ); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25); } .raised:active, .fab:active { background: hsla( var(--button-background-hue), var(--button-background-saturation), calc(var(--button-background-lightness) + 15%), var(--button-background-alpha) ); } .emby-select, .emby-multilineselect { color: inherit; background: hsla( var(--input-background-hue), var(--input-background-saturation), var(--input-background-lightness), var(--button-background-alpha) ); border: var(--line-size) solid transparent; } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .raised-backdropfilter, .fab-backdropfilter, .emby-select-backdropfilter.detailTrackSelect { background: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-blur-lightness), var(--button-background-blur-alpha) ); -webkit-backdrop-filter: var(--button-blur-backdrop-filter); backdrop-filter: var(--button-blur-backdrop-filter); } .toast-large { --theme-text-color-lightness: 100%; --theme-text-color-alpha: 0.85; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } } .filter-active { background: #03a9f4 !important; color: #fff !important; } .button-submit { background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); color: #fff; } @media not all and (min-width: 50em) { .detailButton-primary { background: #fff; color: #1a1a1a; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } .emby-select > option { --theme-text-color-alpha: 1; --theme-text-color-lightness: 0%; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); background: hsl( var(--card-background-hue), var(--card-background-saturation), var(--card-background-lightness) ); } .emby-select:focus-visible { border-color: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ) !important; } .emby-select-tv:focus { border-color: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ) !important; background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ) !important; --theme-text-color-lightness: var(--focus-text-color-lightness) !important; --theme-text-color-alpha: 1 !important; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ) !important; } .emby-select-tv:focus ~ .emby-select-selectedNameContainer { color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ) !important; } .emby-select-tv:focus ~ .selectArrowContainer { color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ) !important; } .emby-textarea-label:focus-within > .emby-textarea-labeltext, .selectLabel:focus-within > .selectLabelText, .inputLabelFocused { color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); } .sliderLabel:focus-within > .sliderLabelText { color: var(--theme-accent-text-color); } .emby-collapse-expandIcon, .accentText { color: var(--theme-accent-text-color); } .button-link { color: var(--theme-accent-text-color); } .button-link-color-inherit { color: inherit; } .paperList, .visualCardBox { background-color: hsla( var(--card-background-hue), var(--card-background-saturation), var(--card-background-lightness), var(--card-background-alpha) ); } .listItems-border { border: var(--line-size) solid var(--line-background); } .collapseContent { border: var(--line-size) solid var(--line-background); } .secondaryText, .fieldDescription, .cardText-secondary { --theme-text-color-alpha: var(--theme-secondary-text-color-alpha); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .actionsheetDivider { background: var(--line-background); } .selectionCommandsPanel { background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 15%) ); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .upNextDialog-countdownText { color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .navMenuOption-selected .listItem-content { color: var(--theme-accent-text-color); } .navMenuOption-selected .listItem-content::before { background-color: hsla( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness), 0.2 ); } .listItem-border::after { background: var(--line-background); } @media (hover: hover) and (pointer: fine) { .listItem-hoverable:hover .listItem-content-bg { background-color: transparent; } .listItem-hoverable:hover .listItem-content-bg::before { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.2 ); } } .listItem-tv:focus .listItem-content-bg { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .listItem-button:focus-visible .listItem-content-bg { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } @supports (color: var(--fake-var)) { .listItem-tv:focus .listItem-content-bg { color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .listItem-button:focus-visible .listItem-content-bg { color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } } .listItem-tv:focus .listItem-content-fb::before { border-color: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.7 ); } .progressring-spiner { border-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .mediaInfoText { background: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), var(--button-background-alpha) ); } .starIcon { color: #cb272a; } .mediaInfoTimerIcon { color: #cb272a; } .emby-input, .emby-textarea { color: inherit; background: hsla( var(--input-background-hue), var(--input-background-saturation), var(--input-background-lightness), var(--button-background-alpha) ); border: var(--line-size) solid transparent; } .emby-input:focus-visible, .emby-textarea:focus-visible { border-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); } .emby-input-tv:focus, .emby-textarea-tv:focus { border-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); } .emby-checkbox + .checkboxLabel::before { border-color: currentcolor; } .chkCardSelect + .checkboxLabel::before { border-color: transparent; background: rgba(255, 255, 255, 0.4); } .chkItemSelect-selecthint + .checkboxLabel::before { border-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), calc(var(--theme-primary-color-lightness) - 5%) ); background-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), calc(var(--theme-primary-color-lightness) - 5%) ); } .emby-checkbox-focusoutline { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.2 ); } .emby-checkbox:checked + .checkboxLabel + .emby-checkbox-focusoutline { background: hsla( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness), 0.2 ); } .mdl-radio__inner-circle { background-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .emby-radio:focus-visible + .radioButtonLabel { background-color: hsla( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness), 0.2 ); color: var(--theme-accent-text-color); } .itemProgressBar { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.3 ); } .itemProgressBarForeground { background-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .itemProgressBarForeground-recording { background-color: #cb272a; } .countIndicator { background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .playedIndicator { background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .emby-tab-button-active { background: hsla( var(--button-background-hue), var(--button-background-saturation), calc(var(--button-background-lightness) + 50%), 0.5 ); --theme-text-color-lightness: 100%; --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .emby-tab-button-active.videoosd-tab-button { background: 0 0; } .emby-tab-button-active.videoosd-tab-button::before { background: #666; } /* .emby-button:focus-visible { */ /* background: hsla( */ /* var(--focus-background-hue), */ /* var(--focus-background-saturation), */ /* var(--focus-background-lightness), */ /* 0.9 */ /* ); */ /* --theme-text-color-lightness: var(--focus-text-color-lightness); */ /* --theme-text-color-alpha: 1; */ /* color: hsla( */ /* var(--theme-text-color-hue), */ /* var(--theme-text-color-saturation), */ /* 0%, */ /* var(--theme-text-color-alpha) */ /* ); */ /* } */ .emby-button-tv:focus { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25); } .button-link:focus-visible { background: 0 0; } .button-link.emby-button-tv:focus { background: 0 0; box-shadow: none; } .button-link:focus-visible::before { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); } .button-link.emby-button-tv:focus::before { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.9 ); } @supports (-webkit-mask-composite: xor) { .emby-button-outline:focus::after, .emby-button-outline.fab:focus::after, .emby-button-outline.paper-icon-button-light:focus::after { background: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.4 ); } } .firstChannelCell-withscroll { background: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ) !important; } .channelCellInner { background-color: rgba(0, 0, 0, 0.5); } .programCellInner { background: rgba(0, 0, 0, 0.3); } .programCellInner-sports { background: rgba(10, 79, 95, 0.7); color: #fff; } .programCellInner-movie { background: rgba(86, 45, 121, 0.7); color: #fff; } .programCellInner-kids { background: rgba(64, 125, 154, 0.7); color: #fff; } .programCellInner-news { background: rgba(100, 125, 76, 0.7); color: #fff; } .guide-currentTimeIndicatorDot { border-inline-end-color: hsla( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness), 0.2 ); color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .epgRow-tv:focus-within .epgCellInner { --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 60%), 0.5 ); } .channelCell-tv:focus > .channelCellInner, .programCell-tv:focus > .programCellInner { background-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .channelCell:focus-visible > .channelCellInner, .programCell:focus-visible > .programCellInner { background-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .guide-programTextIcon { color: #1e1e1e; background: #555; } .infoBanner { background: hsla( var(--card-background-hue), var(--card-background-saturation), var(--card-background-lightness), var(--card-background-alpha) ); } .warningBanner { background: rgba(255, 69, 0, 0.1); color: #ff4500; } .ratingbutton-icon-withrating { color: #c33 !important; } .downloadbutton-icon-on { color: #4285f4; } .downloadbutton-icon-complete { color: #4285f4; } .playstatebutton-icon-played { color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ) !important; } .toggleButtonIcon-active { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.5 ); color: #000; } .card:focus .cardBox-sideFooter-f { background-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .card:focus-visible .cardBox-sideFooter { background-color: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .card:focus .cardContent-bxsborder::before, .sideFooterCard:focus .cardBox-sideFooter-f::before { border-color: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.8 ) !important; } .card:focus:focus-visible .cardContent-bxsborder-fv::before { border-color: hsla( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), 0.8 ) !important; } .cardContent-button { background-color: transparent; } .cardContent-shadow { background-color: hsla( var(--card-background-hue), var(--card-background-saturation), var(--card-background-lightness), var(--card-background-alpha) ); box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25); } .card-focustransform:focus .cardContent-shadow { box-shadow: 0 0.278em 0.975em rgba(0, 0, 0, 0.7); } .defaultCardBackground { background-color: hsla( var(--card-background-hue), var(--card-background-saturation), var(--card-background-lightness), var(--card-background-alpha) ); } .cardImageContainer-sideFooter { background-color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.04 ); } .cardOverlayButtonIcon, .listItemOverlayButtonIcon { background-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } ::-webkit-scrollbar-track-piece { background-color: transparent; } ::-webkit-scrollbar-thumb { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.5 ); } .emby-slider-background { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.3 ); } .emby-slider { color: inherit; } .emby-slider-thumb { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 1 ); } .emby-slider-background-upper { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.35 ); } .emby-slider-background-upper-accent { background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .emby-slider-background-lower { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--slider-lower-opacity) ); } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .emby-slider-background-backdropfilter { -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); } } .scrollbuttoncontainer { color: white; background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness),0.35); border-radius: 0.7em; } .recordingIcon-active { color: #c33 !important; } .textActionButton.dragging { background: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), var(--button-background-alpha) ) !important; } .dragging-over.full-drop-target { background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ) !important; color: #fff !important; } .dragging-over-top::before, .dragging-over-bottom::after, .dragging-over-left::before, .dragging-over-right::after { background: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); } .checkboxLabel-lockedfield-embeddedintofield { border-inline-start-color: var(--line-background) !important; border-top-width: var(--line-size) !important; border-bottom-width: var(--line-size) !important; } .checkboxLabel-lockedfield { background: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), var(--button-background-alpha) ) !important; } .chkLockedField:checked + span { border-color: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ) !important; background: hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ) !important; } .chkLockedField.emby-checkbox-tv:focus { box-shadow: 0 0 0 0.12em hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .chkLockedField:focus-visible + span { box-shadow: 0 0 0 0.12em hsl( var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness) ); } .tabs-viewmenubar-backgroundcontainer { background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 5%) ); } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .tabs-viewmenubar-backgroundcontainer-backdropfilter { background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 20%), 0.5 ); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); } } .tabs-viewmenubar:focus-within .emby-tab-button-active:not(:focus) { background: 0 0; } .dockedtabs { border-top: var(--line-size) solid var(--line-background); } .dockedtabs-tab-button { background: 0 0 !important; } .dockedtabs-tab-button.emby-tab-button:focus { color: inherit; } .dockedtabs-tab-button.emby-tab-button-active { color: var(--theme-accent-text-color) !important; } .searchFieldsBottomBorder { border-bottom: var(--line-size) solid var(--line-background); } .activeSession-bottomsection:nth-child(odd) { background: hsla( var(--card-background-hue), var(--card-background-saturation), calc(var(--card-background-lightness) + 3%), 0.2 ); } .dataGridHeader-content-inner { background: rgba(0, 0, 0, 0.5); } .dataGridItem:nth-child(2n) { background: rgba(0, 0, 0, 0.2); } @media (hover: hover) and (pointer: fine) { .dataGridItem-hoverable:hover, .dataGridItem-hoverable:hover .chkItemSelectContainer { background-color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.2 ); } } .dataGridItem-focusscale:focus { background: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } .dataGridItem-button:focus-visible { background: hsl( var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness) ); --theme-text-color-lightness: var(--focus-text-color-lightness); --theme-text-color-alpha: 1; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), 0%, var(--theme-text-color-alpha) ); } @media all and (min-width: 50em) { .itemBackgroundContainer.withBackdrop { background: linear-gradient( 77deg, rgba(0, 0, 0, 0.84) 0, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.3) 100% ) !important; opacity: 1 !important; } [dir="rtl"] .itemBackgroundContainer.withBackdrop { background: linear-gradient( 283deg, rgba(0, 0, 0, 0.84) 0, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.3) 100% ) !important; } } @media all and (orientation: landscape) { .itemBackgroundContainer-brighter.withBackdrop { background: 0 0 !important; opacity: 1 !important; } } @media all and (min-width: 50em) { .darkContentContainer-item { --background-hue: 285; --background-saturation: 10%; --background-lightness: 7.84%; --focus-background-hue: 0; --focus-background-saturation: 0%; --focus-background-lightness: 100%; --focus-blur-background-lightness: 100%; --focus-text-color-lightness: 0%; --theme-text-color-hue: 0; --theme-text-color-saturation: 0%; --theme-text-color-lightness: 100%; --theme-text-color-alpha: 1; --theme-accent-text-color: var(--theme-accent-text-color-darkbg); --line-background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.14 ); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); --button-background-hue: 285; --button-background-saturation: 4.2%; --button-background-lightness: 40%; --button-background-alpha: 0.7; --button-background-blur-lightness: calc( var(--button-background-lightness) + 37% ); --button-background-blur-alpha: 0.3; --button-blur-backdrop-filter: saturate(1.8) blur(4em); --card-background-hue: 0; --card-background-saturation: 0%; --card-background-lightness: 17.25%; --card-background-alpha: 0.7; --input-background-hue: 285; --input-background-saturation: 4.2%; --input-background-lightness: 40%; --drawer-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 3.5%) ); --docked-drawer-background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 18%), 0.2 ); } .detailMainContainer-withbackdrop { text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45); padding-bottom: 11em; } .details-additionalContent-withbackdrop { --theme-text-color-alpha: 0.85; } } .darkContentContainer { --background-hue: 285; --background-saturation: 10%; --background-lightness: 7.84%; --focus-background-hue: 0; --focus-background-saturation: 0%; --focus-background-lightness: 100%; --focus-blur-background-lightness: 100%; --focus-text-color-lightness: 0%; --theme-text-color-hue: 0; --theme-text-color-saturation: 0%; --theme-text-color-lightness: 100%; --theme-text-color-alpha: 1; --theme-accent-text-color: var(--theme-accent-text-color-darkbg); --line-background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.14 ); color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); --button-background-hue: 285; --button-background-saturation: 4.2%; --button-background-lightness: 40%; --button-background-alpha: 0.6; --button-background-blur-lightness: calc( var(--button-background-lightness) + 37% ); --button-background-blur-alpha: 0.3; --button-blur-backdrop-filter: saturate(1.8) blur(4em); --card-background-hue: 0; --card-background-saturation: 0%; --card-background-lightness: 17.25%; --card-background-alpha: 0.7; --input-background-hue: 285; --input-background-saturation: 4.2%; --input-background-lightness: 40%; --drawer-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 3.5%) ); --docked-drawer-background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 18%), 0.2 ); } .darkContentContainer-tv { --theme-text-color-alpha: 0.87; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ); } .graphicContentContainer { --theme-text-color-alpha: 1; --theme-secondary-text-color-alpha: 0.7; --button-background-hue: 0; --button-background-saturation: 0%; --button-background-lightness: 15%; --button-background-alpha: 0.6; --input-background-hue: 0; --input-background-saturation: 0%; --input-background-lightness: 15%; --slider-lower-opacity: 1; } .detailTrackSelect { border-color: transparent; } .lyricsScroller { --theme-secondary-text-color-alpha: 0.3; }