:root { --background-hue: 0; --background-saturation: 0%; --background-lightness: 100%; --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: 0%; --theme-text-color-alpha: 1; --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-lightbg); --button-background-hue: 240; --button-background-saturation: 23.81%; --button-background-lightness: 93.88%; --button-background-alpha: 0.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: 240; --card-background-saturation: 14.29%; --card-background-lightness: 96.25%; --card-background-alpha: 0.7; --input-background-hue: 0; --input-background-saturation: 0%; --input-background-lightness: 100%; --header-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 3%) ); --header-blur-background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 4.2%), 0.72 ); --footer-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 3%) ); --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: #f2f2f7; --docked-drawer-background: hsla(0, 0%, 56%, 0.2); --dialog-border-width: 0; --focus-background-hue: 0; --focus-background-saturation: 0%; --focus-background-lightness: 13.33%; --focus-blur-background-lightness: 13.33%; --focus-text-color-lightness: 100%; --slider-lower-opacity: 0.7; } @media (pointer: fine) { :not(.layout-tv):root { --theme-text-color-alpha: 0.87; --dialog-border-width: var(--line-size); } } .layout-tv:root { --theme-text-color-alpha: 0.87; --header-background: transparent; --header-blur-background: transparent; } .dialog { --header-background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 10%) ); --footer-background: var(--header-background); background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); border: var(--dialog-border-width) solid var(--line-background); box-shadow: inset 0 0 0 0.07em rgba(255, 255, 255, 0.2), 0 0.56em 2.8em rgba(0, 0, 0, 0.25); } .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-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; } .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) - 4.2%), 0.72 ); -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(../logodark.png); } html, .backgroundContainer { background-color: hsl( var(--background-hue), var(--background-saturation), var(--background-lightness) ); } .backgroundContainer.withBackdrop { background-color: rgba(255, 255, 255, 0.8); } @media not all and (min-width: 50em) { .itemBackgroundContainer-preventbackdrop.withBackdrop { 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), var(--theme-text-color-lightness), 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), var(--theme-text-color-lightness), 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.06933em 0.06933em 0 rgb(0 0 0 / 14%), 0 0.13866em 0.06933em -0.06933em rgb(0 0 0 / 12%), 0 0.06933em 0.208em 0 rgb(0 0 0 / 20%); } .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(--input-background-hue), var(--input-background-saturation), var(--input-background-lightness), var(--button-background-alpha) ); border: var(--line-size) solid var(--line-background); } @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); } } .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: #2c2c2c; color: #fff; -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), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ) !important; } .emby-select-tv:focus ~ .emby-select-selectedNameContainer { --theme-text-color-lightness: var(--focus-text-color-lightness) !important; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ) !important; } .emby-select-tv:focus ~ .selectArrowContainer { --theme-text-color-lightness: var(--focus-text-color-lightness) !important; color: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 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) ); } .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) ); } .layout-tv .cardText-first { --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) ); } .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), var(--theme-text-color-lightness), 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), var(--theme-text-color-lightness), 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 var(--line-background); } .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: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-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(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 82%), 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), var(--theme-text-color-lightness), 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), var(--theme-text-color-lightness), 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; } .epgCellInner { background: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 18%), 0.5 ); } .channelCellInner { background-color: hsla( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 9%), 1 ); } .programCellInner-sports { background: rgba(61, 130, 146, 0.5); } .programCellInner-movie { background: rgba(137, 96, 172, 0.5); } .programCellInner-kids { background: rgba(115, 176, 205, 0.5); } .programCellInner-news { background: rgba(151, 176, 127, 0.5); } .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), var(--theme-text-color-lightness), 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), var(--theme-text-color-lightness), 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, 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), 0.5 ); color: #fff; } .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), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ) !important; } .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), var(--theme-text-color-lightness), var(--theme-text-color-alpha) ) !important; } .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.5); } .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: hsla( var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), var(--button-background-alpha) ); } @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; color: inherit; } .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) - 5%), 0.5 ); } .dataGridHeader-content-inner { background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 7%) ); } .dataGridItem:nth-child(2n) { background: hsl( var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 7%) ); } @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), var(--theme-text-color-lightness), 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), var(--theme-text-color-lightness), 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); } .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; }