: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: .87; --theme-secondary-text-color-alpha: .6; --theme-accent-text-color-lightbg: green; --theme-accent-text-color-darkbg: #6ccf65; --theme-accent-text-color: var(--theme-accent-text-color-darkbg); --theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness)); --button-background-hue: 0; --button-background-saturation: 0%; --button-background-lightness: 100%; --button-background-alpha: .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: .16; --header-background: var(--theme-background); --header-blur-background: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), .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), .15); --line-size: .08em; --drawer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 5%)); --docked-drawer-background: rgba(0, 0, 0, .2); --epg-channel-color: rgba(0, 0, 0, .6); --epg-program-color: rgba(0, 0, 0, .3); --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: .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(radiance.png); --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: 11.4%; --theme-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%)); --header-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 10%)); --footer-background: var(--header-background); --button-background-hue: var(--background-hue); --button-background-saturation: var(--background-saturation); --button-background-lightness: calc(var(--background-lightness) + 15%); --button-background-alpha: .7; --button-background-blur-lightness: var(--button-background-lightness); --button-background-blur-alpha: var(--button-background-alpha); --card-background-hue: var(--background-hue); --card-background-saturation: var(--background-saturation); --card-background-lightness: calc(var(--background-lightness) + 15%); --card-background-alpha: .7; border: var(--dialog-border-width) solid var(--line-background); box-shadow: inset 0 0 0 .07em rgba(0,0,0,.2),0 .56em 2.8em rgba(0,0,0,.55); } @supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { .dialog-blur { --background-hue: 0; --background-saturation: 0%; --background-lightness: 21.96%; --theme-background: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), .76); -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); box-shadow: none!important; } } 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),.4) transparent; } .emby-collapsible-button { border-color: var(--line-background)!important; } /* .skinHeader-withBackground.headroom-scrolling { */ /* background: var(--header-background); */ /* } */ .appfooter { background: var(--footer-background); border-top: var(--line-size) solid var(--line-background); bottom: calc(-1 * var(--line-size))!important; } .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%),.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%),.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)); } .skinHeader.semiTransparent::before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset-inline-start: 0; inset-inline-end: 0; transition: opacity .3s ease-out; content: " "; opacity: 0; background-color: rgba(0,0,0,.3); background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); } .semiTransparent.headroom-scrolling { text-shadow: none; } .semiTransparent.headroom-scrolling::before { opacity: 1; } .pageTitleWithDefaultLogo { background-image: url(../logowhite.png); } html,.dialog { background-color: var(--theme-background); } .backgroundContainer { background-color: var(--theme-background); 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(radiance.png); } .backgroundContainer.withBackdrop { --background-alpha: .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(radiance.png); 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,.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,.9) 34%,rgba(0,0,0,0),transparent)!important; } .itemBackgroundContainer.withBackdrop { --background-alpha: .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: var(--theme-background); } } .paper-icon-button-light:active { background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.2); } .icon-button-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); 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: 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)); } .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)); } .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(--button-background-hue),var(--button-background-saturation),var(--button-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: .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 { color: #000; background: #fff; } .emby-select:focus { border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important; } .emby-select-tv:focus { background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important; --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))!important; } .selectLabelFocused,.inputLabelFocused { color: var(--theme-accent-text-color); } .emby-textarea-label:focus-within>.emby-textarea-labeltext,.sliderLabel:focus-within>.sliderLabelText { 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); } .listItemBodyText-secondary,.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)); } @supports (color:var(--fake-var)) { .cardText-first { --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)); } } .actionsheetDivider { background: var(--line-background); } .selectionCommandsPanel { background: hsl(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 10%)); --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)); } .alphaPickerButton { --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)); background-color: transparent; } .alphaPickerButton-tv:focus { 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))!important; } .listItem-border { border-color: var(--line-background)!important; } @media (hover:hover) and (pointer:fine) { .listItem-hoverable:hover,.listItem-hoverable:hover .chkListItemSelectContainer { background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.2); } } .listItem-tv:focus { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.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)); } .nocssvars .listItem-tv:focus .listItemBodyText-secondary { color: inherit; } .listItem-button:focus-visible { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.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 { 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 { color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha)); } } @supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { .listItem-tv-bf:focus { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-blur-background-lightness),.7); -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); } .listItem-button-bf:focus-visible { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-blur-background-lightness),.7); -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); } } .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(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha)); border: var(--line-size) solid transparent; } .emby-input:focus,.emby-textarea:focus { border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness)); } .emby-checkbox+.checkboxLabel::before { border-color: currentcolor; } .chkCardSelect+.checkboxLabel::before { border-color: transparent; background: rgba(255,255,255,.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:checked+.checkboxLabel::before { border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness)); background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness)); } .emby-checkbox-tv:focus+.checkboxLabel { background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2); color: var(--theme-accent-text-color); } .emby-checkbox:focus-visible+.checkboxLabel { background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2); color: var(--theme-accent-text-color); } .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),.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),.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)); } .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); } .navMenuOption-selected { background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2)!important; color: var(--theme-accent-text-color); } .emby-button-tv: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)); } .emby-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)); } .button-link:focus-visible { background: 0 0; } .button-link.emby-button-focusscale:focus { background: 0 0; } .button-link:focus-visible::before { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9); } .button-link.emby-button-focusscale:focus::before { background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9); } .firstChannelCell-withscroll { background: var(--theme-background)!important; } .channelCell { border-color: transparent; } .channelCellInner { background-color: var(--epg-channel-color); } .programCellInner { background: var(--epg-program-color); } .programCellInner-sports { background: rgba(10,79,95,.7); color: #fff; } .programCellInner-movie { background: rgba(86,45,121,.7); color: #fff; } .programCellInner-kids { background: rgba(64,125,154,.7); color: #fff; } .programCellInner-news { background: rgba(100,125,76,.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),.2); color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness)); } .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,.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),.5); color: #000; } .cardContent-outlinefocus { outline-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness)); } .card:focus .cardContent-bxsborder { box-shadow: 0 0 0 .27em hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness))!important; } .card:focus-visible .cardContent-bxsborder-fv { box-shadow: 0 0 0 .27em hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness))!important; } .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)); } .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 .278em .975em rgba(0,0,0,.1); } .cardContent-shadow::after { display: block; content: ""; width: 100%; height: 0; max-width: 100%; max-height: 100%; position: absolute; top: 0; min-width: 100%; min-height: 100%; z-index: 2; box-shadow: inset 0 0 0 .0695em rgb(128 128 128 / 10%); } .card-focustransform:focus .cardContent-shadow { box-shadow: 0 .278em .975em rgba(0,0,0,.7); } .defaultCardBackground0 { 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),.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),.5); } .emby-slider-background { background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.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),.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: #fff; background: rgba(20,20,20,.5); } .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 .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 .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%),.5); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); } } .emby-tab-button { --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)); } .emby-tab-button-active { background: hsla(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 30%),.3); --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)); } .tabs-viewmenubar:focus-within .emby-tab-button-active:not(:focus) { background: 0 0; } .emby-tab-button:focus { background: hsla(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 30%),.3); --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: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%,1); } .emby-tab-button.emby-button-tv: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%,1); } .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; } .searchTabsContainer { border-bottom: var(--line-size) solid var(--line-background); } @supports (color:var(--fake-var)) { .emby-tab-button:focus-visible { 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.emby-button-tv:focus { color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha)); } } .activeSession-bottomsection:nth-child(odd) { background: hsla(var(--card-background-hue),var(--card-background-saturation),calc(var(--card-background-lightness) + 3%),.2); } .dataGridHeader-content-inner { background: rgba(0,0,0,.5); } .dataGridItem:nth-child(even) { background: rgba(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),.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,.84) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,.4) 100%)!important; opacity: 1!important; } [dir=rtl] .itemBackgroundContainer.withBackdrop { background: linear-gradient(283deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,.4) 100%)!important; } } @media all and (orientation:landscape) { .itemBackgroundContainer-brighter.withBackdrop { background: linear-gradient(77deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%)!important; opacity: 1!important; } [dir=rtl] .itemBackgroundContainer-brighter.withBackdrop { background: linear-gradient(283deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%)!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), .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: .7; --button-background-blur-lightness: calc(var(--button-background-lightness) + 37%); --button-background-blur-alpha: .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: .7; --theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness)); --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%), .2); } .detailMainContainer-withbackdrop { text-shadow: .14em .14em .28em rgba(0,0,0,.45); } .detailMainContainer-withbackdrop .listItem-tv:focus { --theme-text-color-lightness: 0%; } .detailMainContainer-withbackdrop .listItem-button:focus-visible { --theme-text-color-lightness: 0%; } .details-additionalContent-withbackdrop { --theme-text-color-alpha: .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), .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: .7; --button-background-blur-lightness: calc(var(--button-background-lightness) + 37%); --button-background-blur-alpha: .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: .7; --theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness)); --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%), .2); } .graphicContentContainer { --theme-secondary-text-color-alpha: .7; --button-background-hue: 0; --button-background-saturation: 0%; --button-background-lightness: 15%; --button-background-alpha: .7; --slider-lower-opacity: 1; } .detailTrackSelect { border-color: transparent; } .lyricsScroller { --theme-secondary-text-color-alpha: .3; }