:root { --background-hue: 285; --background-saturation: 10%; --background-lightness: 7.84%; --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: 1; --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: var(--background-hue); --button-background-saturation: var(--background-saturation); --button-background-lightness: calc(var(--background-lightness) + 14%); --button-background-alpha: .7; --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(--background-hue); --card-background-saturation: var(--background-saturation); --card-background-lightness: calc(var(--background-lightness) + 14%); --card-background-alpha: .7; --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) + 2.8%)); --line-background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), .14); --line-size: .08em; --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); --epg-channel-color: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%), 1); --epg-program-color: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 15%), .5); --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; } @media (pointer:fine) { :not(.layout-tv):root { --background-hue: 264; --background-saturation: 14.71%; --background-lightness: 13.33%; --theme-text-color-alpha: .95; --button-background-hue: 267; --button-background-saturation: 8.11%; --button-background-lightness: 25.76%; --card-background-hue: 267; --card-background-saturation: 8.11%; --card-background-lightness: 25.76%; --dialog-border-width: var(--line-size); } } .layout-tv:root { --background-hue: 260; --background-saturation: 4.35%; --background-lightness: 13.53%; --theme-text-color-alpha: .85; --header-background: transparent; --header-blur-background: transparent; --button-background-hue: var(--background-hue); --button-background-saturation: var(--background-saturation); --button-background-lightness: calc(var(--background-lightness) + 11%); --card-background-hue: var(--background-hue); --card-background-saturation: var(--background-saturation); --card-background-lightness: calc(var(--background-lightness) + 11%); } .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-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%); 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) + 4.6%),.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)); padding-bottom: 10em; } .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,.backgroundContainer { background-color: var(--theme-background); } .backgroundContainer.withBackdrop { background-color: rgba(0,0,0,.8); } .backgroundContainer-withfocuspreview.withBackdrop { background-image: linear-gradient(to right,#000,rgba(0,0,0,.9) 34%,rgba(0,0,0,0),transparent); 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); } @media not all and (min-width:50em) { .itemBackgroundContainer-preventbackdrop.withBackdrop { 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) + 10%),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 { --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: hsl(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness)); } .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 hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha)); } .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: var(--theme-background); } .channelCellInner { background-color: var(--epg-channel-color); } .programCellInner { background: var(--epg-program-color); } .programCellInner-sports { background: rgba(61,130,146,.5); } .programCellInner-movie { background: rgba(137,96,172,.5); } .programCellInner-kids { background: rgba(115,176,205,.5); } .programCellInner-news { background: rgba(151,176,127,.5); } .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: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 23.5%)); } .infoBanner { background: hsl(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness)); } .warningBanner { background: rgba(255,69,0,.1); color: #ff4500; } .ratingbutton-icon-withrating { color: #c33; } .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)); } .card-focustransform:focus .cardContent-shadow { box-shadow: 0 .278em .975em rgba(0,0,0,.5); } .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) + 9.75%)); } @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) + 15%),.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) + 50%),.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)); } .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) + 50%),.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: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) - 10%),.5); } .dataGridHeader-content-inner { background: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) - 2%)); } .dataGridItem:nth-child(even) { background: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) - 5%)); } @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; }