diff --git a/item/item.css b/item/item.css index 42e44b9..fd25d61 100644 --- a/item/item.css +++ b/item/item.css @@ -223,6 +223,15 @@ -webkit-margin-end: 0.5em; margin-inline-end: 0.5em; } +.item-tag-button:hover { + color: black; + background-color: #a5a5a5b8; +} +.item-tag-button:active { + color: white; + background-color: black; + box-shadow: none; +} .itemBackdropContainer { height: 40vh; position: relative; diff --git a/modules/appheader/appheader.css b/modules/appheader/appheader.css index 11bfcc1..a111075 100644 --- a/modules/appheader/appheader.css +++ b/modules/appheader/appheader.css @@ -284,6 +284,7 @@ } .tabs-viewmenubar-slider { padding: 0.25em; + background-color: black; } .main-tab-button { padding: 0.25em 1.76ch !important; diff --git a/modules/emby-elements/emby-button/emby-button.css b/modules/emby-elements/emby-button/emby-button.css index cab6568..8b2074f 100644 --- a/modules/emby-elements/emby-button/emby-button.css +++ b/modules/emby-elements/emby-button/emby-button.css @@ -1 +1,314 @@ -.emby-button{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;box-sizing:border-box;margin:0 .29em;font-size:inherit;font-family:inherit;color:inherit;z-index:0;padding:.66em 2ch;vertical-align:middle;border:0;vertical-align:middle;border-radius:.6em;position:relative;font-weight:600;-webkit-tap-highlight-color:transparent;text-decoration:none;line-height:inherit;outline:0!important;letter-spacing:inherit}.emby-button:not([disabled]){cursor:pointer}.emby-button[disabled]{opacity:.4}.emby-button::-moz-focus-inner{border:0}.button-link{background:0 0;margin:0;padding:0;border:0;vertical-align:initial;outline:0!important;text-shadow:inherit;-webkit-user-select:inherit;user-select:inherit;position:relative}.button-link:focus{text-shadow:none}.button-link:not([disabled]){cursor:pointer}.button-inherit-color{color:inherit!important}.button-link.button-link-no-focus-bg:focus::before{background:0 0!important;box-shadow:none!important}.raised,.fab{-webkit-user-select:none;user-select:none}.raised{text-align:center}.raised-mini{padding-top:.6em;padding-bottom:.6em;border-radius:100em}.raised>span{-webkit-flex-shrink:0;flex-shrink:0}@media (hover:hover) and (pointer:fine){.button-link:not([disabled]):hover{text-decoration:underline}}.button-link:not(.emby-button-tv):not([disabled]):active{text-decoration:underline}.emby-button-focusscale{transition:-webkit-transform .2s ease-out!important;transition:transform .2s ease-out!important;-webkit-transform-origin:center center;transform-origin:center center}.button-link:focus-visible::before{position:absolute;top:0;left:-.35em;right:-.35em;bottom:0;content:" ";z-index:-1;border-radius:inherit;box-shadow:0 .25em .4375em rgba(0,0,0,.25);contain:strict}.button-link.emby-button-tv:focus::before{position:absolute;top:0;left:-.35em;right:-.35em;bottom:0;content:" ";z-index:-1;border-radius:inherit;box-shadow:0 .25em .4375em rgba(0,0,0,.25);contain:strict}.emby-button-focusscale:focus{-webkit-transform:scale(1.1);transform:scale(1.1);z-index:1}.button-icon,.fab>i{font-size:1.59em}.button-icon-left{-webkit-margin-end:.25em;margin-inline-end:.25em;-webkit-margin-start:-.1em;margin-inline-start:-.1em}.button-icon-right{-webkit-margin-start:.25em;margin-inline-start:.25em;-webkit-margin-end:-.1em;margin-inline-end:-.1em}.fab{display:-webkit-inline-flex;display:inline-flex;border-radius:50%;padding:.66em;box-sizing:border-box;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:center}.emby-button.block{display:block;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;margin:.25em 0;width:100%}.paper-icon-button-light{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;box-sizing:border-box;margin:0 .29em;background:0 0;text-align:center;font-size:inherit;font-family:inherit;color:inherit;-webkit-user-select:none;user-select:none;z-index:0;min-width:initial;min-height:initial;width:auto;height:auto;padding:.556em;vertical-align:middle;border:0;vertical-align:middle;position:relative;overflow:hidden;border-radius:50%;-webkit-tap-highlight-color:transparent;-webkit-justify-content:center;justify-content:center;outline:0!important;text-shadow:inherit}.paper-icon-button-light:enabled{cursor:pointer}.paper-icon-button-light::-moz-focus-inner{border:0}.paper-icon-button-light[disabled]{opacity:.3}.paper-icon-button-light>i{font-size:1.66956521739130434em;position:relative;z-index:1;vertical-align:middle}.paper-icon-button-light.md-icon{font-size:1.66956521739130434em;margin:0 .17em;padding:.333em}.paper-icon-button-light:focus{text-shadow:none}.paper-icon-button-img{width:1.72em;height:1.72em;object-fit:cover;object-position:center;max-height:100%;position:relative;z-index:1;vertical-align:middle}.icon-button-focusscale{transition:-webkit-transform .2s ease-out!important;transition:transform .2s ease-out!important;-webkit-transform-origin:center center;transform-origin:center center}.icon-button-focusscale:focus{-webkit-transform:scale(1.14);transform:scale(1.14);z-index:1}.btnFilterWithBubble{position:relative}.nobackdropfilter{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.toggleButtonIcon{border-radius:.3em}.toggleButtonIcon-backdropfilter.toggleButtonIcon-active{-webkit-backdrop-filter:saturate(1.8) blur(1.5em);backdrop-filter:saturate(1.8) blur(1.5em)}@property --angle{syntax:'';inherits:false;initial-value:0deg}@-webkit-keyframes focusbordergradient{0%{--angle:0deg}100%{--angle:360deg}}@keyframes focusbordergradient{0%{--angle:0deg}100%{--angle:360deg}}@supports (-webkit-mask-composite:xor){.emby-button-outline:focus{overflow:visible}.emby-button-outline:focus::after{content:" ";position:absolute;top:-.22em;bottom:-.22em;left:-.22em;right:-.22em;border:.1em solid transparent!important;border-radius:inherit;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.emby-button-outline.paper-icon-button-light:focus::after{top:-.18rem;left:-.18rem;right:-.18rem;bottom:-.18rem;border:.1rem solid transparent!important}.emby-button-outline.button-link:focus::after{top:-.2em;bottom:-.2em;left:-.54em;right:-.54em;border-radius:.8em}.emby-button-outline.raised:focus::after,.emby-button-outline.emby-tab-button:focus::after{border-radius:.8em}.emby-button-outline.raised-mini:focus::after{border-radius:inherit}} \ No newline at end of file +.emby-button { + position: relative; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + box-sizing: border-box; + margin: 0 0.29em; + font-size: inherit; + font-family: inherit; + color: inherit; + z-index: 0; + padding: 0.66em 2ch; + vertical-align: middle; + border: 0; + vertical-align: middle; + border-radius: 0.6em; + position: relative; + font-weight: 600 !important; + -webkit-tap-highlight-color: transparent; + text-decoration: none; + line-height: inherit; + outline: 0 !important; + letter-spacing: inherit; +} +.emby-button:not([disabled]) { + cursor: pointer; +} +.emby-button[disabled] { + opacity: 0.4; +} +.emby-button::-moz-focus-inner { + border: 0; +} +.emby-button:hover { + background-color: #FFFFFF33; +} +.emby-button:active { + background-color: hsla(var(--theme-primary-color-hue), + var(--theme-primary-color-saturation), + var(--theme-primary-color-lightness),0.5); +} +.button-link { + background: 0 0; + margin: 0; + padding: 0; + border: 0; + vertical-align: initial; + outline: 0 !important; + text-shadow: inherit; + -webkit-user-select: inherit; + user-select: inherit; + position: relative; +} +.button-link:focus { + text-shadow: none; +} +.button-link:not([disabled]) { + cursor: pointer; +} +.button-inherit-color { + color: inherit !important; +} +.button-link.button-link-no-focus-bg:focus::before { + background: 0 0 !important; + box-shadow: none !important; +} +.raised, +.fab { + -webkit-user-select: none; + user-select: none; +} +.raised { + text-align: center; +} +.raised-mini { + padding-top: 0.6em; + padding-bottom: 0.6em; + border-radius: 100em; +} +.raised > span { + -webkit-flex-shrink: 0; + flex-shrink: 0; +} +@media (hover: hover) and (pointer: fine) { +} +.button-link:not(.emby-button-tv):not([disabled]):active { + text-decoration: underline; +} +.emby-button-focusscale { + transition: -webkit-transform 0.2s ease-out !important; + transition: transform 0.2s ease-out !important; + -webkit-transform-origin: center center; + transform-origin: center center; +} +.button-link:focus-visible::before { + position: absolute; + top: 0; + left: -0.35em; + right: -0.35em; + bottom: 0; + content: " "; + z-index: -1; + border-radius: inherit; + box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25); + contain: strict; +} +.button-link.emby-button-tv:focus::before { + position: absolute; + top: 0; + left: -0.35em; + right: -0.35em; + bottom: 0; + content: " "; + z-index: -1; + border-radius: inherit; + box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25); + contain: strict; +} +.emby-button-focusscale:focus { + -webkit-transform: scale(1.1); + transform: scale(1.1); + z-index: 1; +} +.button-icon, +.fab > i { + font-size: 1.59em; +} +.button-icon-left { + -webkit-margin-end: 0.25em; + margin-inline-end: 0.25em; + -webkit-margin-start: -0.1em; + margin-inline-start: -0.1em; +} +.button-icon-right { + -webkit-margin-start: 0.25em; + margin-inline-start: 0.25em; + -webkit-margin-end: -0.1em; + margin-inline-end: -0.1em; +} +.fab { + display: -webkit-inline-flex; + display: inline-flex; + border-radius: 50%; + padding: 0.66em; + box-sizing: border-box; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} +.emby-button.block { + display: block; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + margin: 0.25em 0; + width: 100%; +} +.paper-icon-button-light { + position: relative; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + box-sizing: border-box; + margin: 0 0.29em; + background: 0 0; + text-align: center; + font-size: inherit; + font-family: inherit; + color: inherit; + -webkit-user-select: none; + user-select: none; + z-index: 0; + min-width: initial; + min-height: initial; + width: auto; + height: auto; + padding: 0.556em; + vertical-align: middle; + border: 0; + vertical-align: middle; + position: relative; + overflow: hidden; + border-radius: 50%; + -webkit-tap-highlight-color: transparent; + -webkit-justify-content: center; + justify-content: center; + outline: 0 !important; + text-shadow: inherit; +} +.paper-icon-button-light:enabled { + cursor: pointer; +} +.paper-icon-button-light::-moz-focus-inner { + border: 0; +} +.paper-icon-button-light[disabled] { + opacity: 0.3; +} +.paper-icon-button-light > i { + font-size: 1.66956521739130434em; + position: relative; + z-index: 1; + vertical-align: middle; +} +.paper-icon-button-light.md-icon { + font-size: 1.66956521739130434em; + margin: 0 0.17em; + padding: 0.333em; +} +.paper-icon-button-light:focus { + text-shadow: none; +} +.paper-icon-button-img { + width: 1.72em; + height: 1.72em; + object-fit: cover; + object-position: center; + max-height: 100%; + position: relative; + z-index: 1; + vertical-align: middle; +} +.icon-button-focusscale { + transition: -webkit-transform 0.2s ease-out !important; + transition: transform 0.2s ease-out !important; + -webkit-transform-origin: center center; + transform-origin: center center; +} +.icon-button-focusscale:focus { + -webkit-transform: scale(1.14); + transform: scale(1.14); + z-index: 1; +} +.btnFilterWithBubble { + position: relative; +} +.nobackdropfilter { + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; +} +.toggleButtonIcon { + border-radius: 0.3em; +} +.toggleButtonIcon-backdropfilter.toggleButtonIcon-active { + -webkit-backdrop-filter: saturate(1.8) blur(1.5em); + backdrop-filter: saturate(1.8) blur(1.5em); +} +@property --angle { + syntax: ""; + inherits: false; + initial-value: 0deg; +} +@-webkit-keyframes focusbordergradient { + 0% { + --angle: 0deg; + } + 100% { + --angle: 360deg; + } +} +@keyframes focusbordergradient { + 0% { + --angle: 0deg; + } + 100% { + --angle: 360deg; + } +} +@supports (-webkit-mask-composite: xor) { + .emby-button-outline:focus { + overflow: visible; + } + .emby-button-outline:focus::after { + content: " "; + position: absolute; + top: -0.22em; + bottom: -0.22em; + left: -0.22em; + right: -0.22em; + border: 0.1em solid transparent !important; + border-radius: inherit; + -webkit-mask: + linear-gradient(#fff 0 0) padding-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + } + .emby-button-outline.paper-icon-button-light:focus::after { + top: -0.18rem; + left: -0.18rem; + right: -0.18rem; + bottom: -0.18rem; + border: 0.1rem solid transparent !important; + } + .emby-button-outline.button-link:focus::after { + top: -0.2em; + bottom: -0.2em; + left: -0.54em; + right: -0.54em; + border-radius: 0.8em; + } + .emby-button-outline.raised:focus::after, + .emby-button-outline.emby-tab-button:focus::after { + border-radius: 0.8em; + } + .emby-button-outline.raised-mini:focus::after { + border-radius: inherit; + } +} diff --git a/modules/navdrawer/navdrawer.css b/modules/navdrawer/navdrawer.css index c289562..5e6300a 100644 --- a/modules/navdrawer/navdrawer.css +++ b/modules/navdrawer/navdrawer.css @@ -1 +1,422 @@ -:root{--main-drawer-transform:translateX(-100%)}[dir=rtl]:root{--main-drawer-transform:translateX(100%)}.mainDrawer{padding-top:calc(1em + env(safe-area-inset-top,0));-webkit-padding-start:1.8ch;padding-inline-start:1.8ch;-webkit-padding-start:calc(1.8ch + env(safe-area-inset-left,0));padding-inline-start:calc(1.8ch + env(safe-area-inset-left,0));-webkit-padding-end:1.8ch;padding-inline-end:1.8ch;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;overscroll-behavior-y:contain;position:fixed;top:0;left:0;inset-inline-start:0;inset-inline-end:initial;bottom:0;contain:strict;z-index:1099;width:33.15ch;width:clamp(33.15ch,30%,45.5ch);-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:var(--main-drawer-transform);transform:var(--main-drawer-transform);box-sizing:border-box;will-change:transform,width;scrollbar-gutter:stable;transition:width 340ms ease-out,-webkit-transform 340ms ease-out;transition:width 340ms ease-out,transform 340ms ease-out}[dir=rtl]:root .mainDrawer{-webkit-padding-start:calc(1.8ch + env(safe-area-inset-right,0));padding-inline-start:calc(1.8ch + env(safe-area-inset-right,0))}.mainDrawer.scrollY{overflow-y:overlay}@media all and (pointer:fine){.mainDrawer{width:32ch;width:calc(32ch + env(safe-area-inset-left,0))}[dir=rtl]:root .mainDrawer{width:calc(32ch + env(safe-area-inset-right,0))}.mainDrawerScrollSlider-autofont{font-size:96%}}@media not all and (pointer:fine){.mainDrawer:not(.drawer-docked){width:min(80%,35.5ch)}}.mainDrawer-tv{width:20%;transition:width .4s ease-out,-webkit-transform .4s ease-out;transition:width .4s ease-out,transform .4s ease-out}.drawer-open{box-shadow:.14em 0 .84em rgba(0,0,0,.4);-webkit-transform:none;transform:none}.drawer-opening{-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:var(--main-drawer-transform);transform:var(--main-drawer-transform)}.drawer-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;inset-inline-start:0;inset-inline-end:0;background-color:#000;opacity:0;z-index:1098;will-change:opacity;contain:strict;-webkit-animation:drawer-backdrop-fadein .38s ease-out normal both;animation:drawer-backdrop-fadein .38s ease-out normal both;overflow:hidden;overscroll-behavior:contain}.drawer-backdrop-fadeout{-webkit-animation:drawer-backdrop-fadeout .38s ease-out normal both;animation:drawer-backdrop-fadeout .38s ease-out normal both}@-webkit-keyframes drawer-backdrop-fadein{from{opacity:0}to{opacity:.5}}@keyframes drawer-backdrop-fadein{from{opacity:0}to{opacity:.5}}@-webkit-keyframes drawer-backdrop-fadeout{from{opacity:.5}to{opacity:0}}@keyframes drawer-backdrop-fadeout{from{opacity:.5}to{opacity:0}}.navDrawerCollapseSection{margin:0 0 .25em!important}.navDrawerCollapseButton{margin:0!important;border:0!important;padding:.25em 0!important}.navDrawerCollapseButton.emby-collapsible-button-collapsed::after{display:none}.navDrawerCollapseContent{border:0!important;padding:0 1em!important;margin:0 -1em!important}.navMenuOption{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;text-decoration:none;color:inherit;vertical-align:middle;-webkit-flex-shrink:0;flex-shrink:0;font-weight:400!important;margin:0!important}.navMenuOption .listItem-content{-webkit-padding-start:.7em!important;padding-inline-start:.7em!important}.navMenuOption.emby-button-focusscale:focus{-webkit-transform:scale(1.025);transform:scale(1.025)}.navMenuOption-selected .listItemBodyText{font-weight:700!important}.navMenuOption-selected .listItem-content::before{position:absolute;content:" ";top:0;left:0;right:0;bottom:0;border-radius:.6em}.navMenuOption:hover .listItem-content::before{left:0;right:0}.navDrawerLogo{width:100%;background-size:contain;margin-top:0!important;margin-bottom:0!important;-webkit-margin-start:.2em!important;margin-inline-start:.2em!important;-webkit-margin-end:0!important;margin-inline-end:0!important;-webkit-flex-grow:0;flex-grow:0}.navDrawerLogo-tv{-webkit-margin-start:.5em!important;margin-inline-start:.5em!important}.navDrawerHeader{margin:.75em 0;position:relative}.navDrawerHeader-tv{margin-top:.5em}.btnNavDrawerLogo{margin:0!important;padding:0!important}.btnPinNavDrawer{font-size:84%!important;margin:0 -.35em 0 0!important}.btnPinNavDrawer-iconpin{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.navMenuOptionIcon{-webkit-margin-end:.7em;margin-inline-end:.7em;-webkit-flex-shrink:0;flex-shrink:0;font-size:1.7em}.navMenuOptionText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navMenuHeader{-webkit-padding-start:.3em!important;padding-inline-start:.3em!important;margin:.75em 0 .15em;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-shrink:0;flex-shrink:0;-webkit-flex-wrap:wrap;flex-wrap:wrap}.navDrawerCollapseIcon{inset-inline-end:0!important}.navDrawerListItemImageContainer{width:1.9em!important;height:1.9em!important}.navDrawerListItemImageContainer-tv{border-radius:100em;background-color:transparent!important}.navDrawerListItemImageContainer-transparent{background-color:transparent!important}.navDrawerListItemBody{padding:.19em .65em!important}@media all and (pointer:fine){.navDrawerListItemIcon{font-size:150%}}.navDrawerListItemIcon-tv{font-size:120%}@media all and (pointer:fine){.mainDrawer .navDrawerListItemBody{min-height:2.3em}}.mainDrawer:not(.drawer-docked) .navDrawerItemsSection{display:none!important}@media all and (min-width:60em){.mainDrawer-mini{-webkit-padding-start:1.2ch;padding-inline-start:1.2ch;-webkit-padding-end:1.2ch;padding-inline-end:1.2ch;padding-top:5em;-webkit-border-end:0!important;border-inline-end:0!important;--theme-text-color-alpha:.85!important}.mainDrawer-mini.darkContentContainer{--theme-text-color-alpha:.85}.mainDrawer-mini,[dir=rtl]:root .mainDrawer-mini{width:10ch}.mainDrawer-mini .navDrawerHeader{margin:0!important;padding:.75em 0;height:4em;box-sizing:border-box}.mainDrawer-mini .navDrawerListItemBody{padding:0!important;visibility:hidden}.mainDrawer-mini .navMenuHeader,.mainDrawer-mini .navDrawerCollapseButton,.mainDrawer-mini .navDrawerItemsSection{display:none!important}.mainDrawer-mini .navDrawerHeader,.mainDrawer-mini .navDrawerListItemBody,.mainDrawer-mini .navDrawerItemsSection{display:none!important}.mainDrawer-mini .navDrawerListItemImageContainer{width:6.39ch!important;height:2.8em!important}.mainDrawer-mini .navDrawerListItemImageContainer-padded{box-sizing:border-box;padding:0 .8em}.mainDrawer-mini .navDrawerListItemImageContainer-padded .listItemImage{border-radius:100em}.mainDrawer-mini .listItem{box-sizing:border-box;width:100%}.mainDrawer-mini .listItem-content{padding:0 .42em!important;box-sizing:border-box;min-width:100%;width:auto}.mainDrawer-mini .listItemBody{-webkit-flex-grow:0;flex-grow:0}.listItem[data-id=btnExpandMiniDrawer]{margin-top:-3.5em!important}.mainDrawer:not(.mainDrawer-mini) .listItem[data-id=btnExpandMiniDrawer]{display:none!important}}@media not all and (min-width:60em){.btnPinNavDrawer{display:none!important}.listItem[data-id=btnExpandMiniDrawer]{display:none!important}}.navDrawerItemsContainer{container-name:initial!important;container-type:initial!important}@media not all and (min-width:50em){.drawer-search{display:none!important}}.navDrawerSearchFieldContainer{margin:.5em 0;position:relative;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.navDrawerSearchFieldContainer label{display:none}.navDrawerSearchIcon{position:absolute;font-size:160%;left:.35em;right:0;inset-inline-start:.25em;inset-inline-end:0;width:1.25em}.txtNavDrawerSearch{border-radius:.6em;-webkit-padding-start:2em;padding-inline-start:2em}@media all and (pointer:fine){.drawer-docked:not(.mainDrawer-mini) .drawer-search{display:none!important}.mainDrawer-mini .navDrawerSearchFieldContainer,.mainDrawer:not(.drawer-docked) .navDrawerSearchFieldContainer{display:none!important}.drawer-docked:not(.mainDrawer-mini)~.page .searchFields{margin-bottom:0!important;padding-bottom:0!important}@media all and (min-width:60em){.drawer-docked:not(.mainDrawer-mini)~.page .searchInputContainer{display:none!important}}}@media not all and (pointer:fine){.navDrawerSearchFieldContainer{display:none!important}} \ No newline at end of file +:root { + --main-drawer-transform: translateX(-100%); +} +[dir="rtl"]:root { + --main-drawer-transform: translateX(100%); +} +.mainDrawer { + padding-top: calc(1em + env(safe-area-inset-top, 0)); + -webkit-padding-start: 1.8ch; + padding-inline-start: 1.8ch; + -webkit-padding-start: calc(1.8ch + env(safe-area-inset-left, 0)); + padding-inline-start: calc(1.8ch + env(safe-area-inset-left, 0)); + -webkit-padding-end: 1.8ch; + padding-inline-end: 1.8ch; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + overscroll-behavior-y: contain; + position: fixed; + top: 0; + left: 0; + inset-inline-start: 0; + inset-inline-end: initial; + bottom: 0; + contain: strict; + z-index: 1099; + width: 33.15ch; + width: clamp(33.15ch, 30%, 45.5ch); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transform: var(--main-drawer-transform); + transform: var(--main-drawer-transform); + box-sizing: border-box; + will-change: transform, width; + scrollbar-gutter: stable; + transition: + width 340ms ease-out, + -webkit-transform 340ms ease-out; + transition: + width 340ms ease-out, + transform 340ms ease-out; +} +[dir="rtl"]:root .mainDrawer { + -webkit-padding-start: calc(1.8ch + env(safe-area-inset-right, 0)); + padding-inline-start: calc(1.8ch + env(safe-area-inset-right, 0)); +} +.mainDrawer.scrollY { + overflow-y: overlay; +} +@media all and (pointer: fine) { + .mainDrawer { + width: 32ch; + width: calc(32ch + env(safe-area-inset-left, 0)); + } + [dir="rtl"]:root .mainDrawer { + width: calc(32ch + env(safe-area-inset-right, 0)); + } + .mainDrawerScrollSlider-autofont { + font-size: 96%; + } +} +@media not all and (pointer: fine) { + .mainDrawer:not(.drawer-docked) { + width: min(80%, 35.5ch); + } +} +.mainDrawer-tv { + width: 20%; + transition: + width 0.4s ease-out, + -webkit-transform 0.4s ease-out; + transition: + width 0.4s ease-out, + transform 0.4s ease-out; +} +.drawer-open { + box-shadow: 0.14em 0 0.84em rgba(0, 0, 0, 0.4); + -webkit-transform: none; + transform: none; +} +.drawer-opening { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transform: var(--main-drawer-transform); + transform: var(--main-drawer-transform); +} +.drawer-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: #000; + opacity: 0; + z-index: 1098; + will-change: opacity; + contain: strict; + -webkit-animation: drawer-backdrop-fadein 0.38s ease-out normal both; + animation: drawer-backdrop-fadein 0.38s ease-out normal both; + overflow: hidden; + overscroll-behavior: contain; +} +.drawer-backdrop-fadeout { + -webkit-animation: drawer-backdrop-fadeout 0.38s ease-out normal both; + animation: drawer-backdrop-fadeout 0.38s ease-out normal both; +} +@-webkit-keyframes drawer-backdrop-fadein { + from { + opacity: 0; + } + to { + opacity: 0.5; + } +} +@keyframes drawer-backdrop-fadein { + from { + opacity: 0; + } + to { + opacity: 0.5; + } +} +@-webkit-keyframes drawer-backdrop-fadeout { + from { + opacity: 0.5; + } + to { + opacity: 0; + } +} +@keyframes drawer-backdrop-fadeout { + from { + opacity: 0.5; + } + to { + opacity: 0; + } +} +.navDrawerCollapseSection { + margin: 0 0 0.25em !important; +} +.navDrawerCollapseButton { + margin: 0 !important; + border: 0 !important; + padding: 0.25em 0 !important; +} +.navDrawerCollapseButton.emby-collapsible-button-collapsed::after { + display: none; +} +.navDrawerCollapseContent { + border: 0 !important; + padding: 0 1em !important; + margin: 0 -1em !important; +} +.navMenuOption { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + text-decoration: none; + color: inherit; + vertical-align: middle; + -webkit-flex-shrink: 0; + flex-shrink: 0; + font-weight: 400 !important; + margin: 0 !important; +} +.navMenuOption .listItem-content { + -webkit-padding-start: 0.7em !important; + padding-inline-start: 0.7em !important; +} +.navMenuOption.emby-button-focusscale:focus { + -webkit-transform: scale(1.025); + transform: scale(1.025); +} +.navMenuOption-selected .listItemBodyText { + font-weight: 700 !important; +} +.navMenuOption-selected .listItem-content::before { + position: absolute; + content: " "; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 0.6em; +} +.navMenuOption:hover .listItem-content::before { + left: 0; + right: 0; +} +.navDrawerLogo { + width: 100%; + background-size: contain; + margin-top: 0 !important; + margin-bottom: 0 !important; + -webkit-margin-start: 0.2em !important; + margin-inline-start: 0.2em !important; + -webkit-margin-end: 0 !important; + margin-inline-end: 0 !important; + -webkit-flex-grow: 0; + flex-grow: 0; +} +.navDrawerLogo-tv { + -webkit-margin-start: 0.5em !important; + margin-inline-start: 0.5em !important; +} +.navDrawerHeader { + margin: 0.75em 0; + position: relative; +} +.navDrawerHeader-tv { + margin-top: 0.5em; +} +.btnNavDrawerLogo { + margin: 0 !important; + padding: 0 !important; +} +.btnPinNavDrawer { + font-size: 84% !important; + margin: 0 -0.35em 0 0 !important; +} +.btnPinNavDrawer-iconpin { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.navMenuOptionIcon { + -webkit-margin-end: 0.7em; + margin-inline-end: 0.7em; + -webkit-flex-shrink: 0; + flex-shrink: 0; + font-size: 1.7em; +} +.navMenuOptionText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.navMenuHeader { + -webkit-padding-start: 0.3em !important; + padding-inline-start: 0.3em !important; + margin: 0.25em 0.25em 0.25em; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.navDrawerCollapseIcon { + inset-inline-end: 0 !important; +} +.navDrawerListItemImageContainer { + width: 1.9em !important; + height: 1.9em !important; +} +.navDrawerListItemImageContainer-tv { + border-radius: 100em; + background-color: transparent !important; +} +.navDrawerListItemImageContainer-transparent { + background-color: transparent !important; +} +.navDrawerListItemBody { + padding: 0.19em 0.65em !important; +} +@media all and (pointer: fine) { + .navDrawerListItemIcon { + font-size: 150%; + } +} +.navDrawerListItemIcon-tv { + font-size: 120%; +} +@media all and (pointer: fine) { + .mainDrawer .navDrawerListItemBody { + min-height: 2.3em; + } +} +.mainDrawer:not(.drawer-docked) .navDrawerItemsSection { + display: none !important; +} +@media all and (min-width: 60em) { + .mainDrawer-mini { + -webkit-padding-start: 1.2ch; + padding-inline-start: 1.2ch; + -webkit-padding-end: 1.2ch; + padding-inline-end: 1.2ch; + padding-top: 5em; + -webkit-border-end: 0 !important; + border-inline-end: 0 !important; + --theme-text-color-alpha: 0.85 !important; + } + .mainDrawer-mini.darkContentContainer { + --theme-text-color-alpha: 0.85; + } + .mainDrawer-mini, + [dir="rtl"]:root .mainDrawer-mini { + width: 10ch; + } + .mainDrawer-mini .navDrawerHeader { + margin: 0 !important; + padding: 0.75em 0; + height: 4em; + box-sizing: border-box; + } + .mainDrawer-mini .navDrawerListItemBody { + padding: 0 !important; + visibility: hidden; + } + .mainDrawer-mini .navMenuHeader, + .mainDrawer-mini .navDrawerCollapseButton, + .mainDrawer-mini .navDrawerItemsSection { + display: none !important; + } + .mainDrawer-mini .navDrawerHeader, + .mainDrawer-mini .navDrawerListItemBody, + .mainDrawer-mini .navDrawerItemsSection { + display: none !important; + } + .mainDrawer-mini .navDrawerListItemImageContainer { + width: 6.39ch !important; + height: 2.8em !important; + } + .mainDrawer-mini .navDrawerListItemImageContainer-padded { + box-sizing: border-box; + padding: 0 0.8em; + } + .mainDrawer-mini .navDrawerListItemImageContainer-padded .listItemImage { + border-radius: 100em; + } + .mainDrawer-mini .listItem { + box-sizing: border-box; + width: 100%; + } + .mainDrawer-mini .listItem-content { + padding: 0 0.42em !important; + box-sizing: border-box; + min-width: 100%; + width: auto; + } + .mainDrawer-mini .listItemBody { + -webkit-flex-grow: 0; + flex-grow: 0; + } + .listItem[data-id="btnExpandMiniDrawer"] { + margin-top: -3.5em !important; + } + .mainDrawer:not(.mainDrawer-mini) .listItem[data-id="btnExpandMiniDrawer"] { + display: none !important; + } +} +@media not all and (min-width: 60em) { + .btnPinNavDrawer { + display: none !important; + } + .listItem[data-id="btnExpandMiniDrawer"] { + display: none !important; + } +} +.navDrawerItemsContainer { + container-name: initial !important; + container-type: initial !important; +} +@media not all and (min-width: 50em) { + .drawer-search { + display: none !important; + } +} +.navDrawerSearchFieldContainer { + margin: 0.5em 0; + position: relative; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; +} +.navDrawerSearchFieldContainer label { + display: none; +} +.navDrawerSearchIcon { + position: absolute; + font-size: 160%; + left: 0.35em; + right: 0; + inset-inline-start: 0.25em; + inset-inline-end: 0; + width: 1.25em; +} +.txtNavDrawerSearch { + border-radius: 0.6em; + -webkit-padding-start: 2em; + padding-inline-start: 2em; +} +@media all and (pointer: fine) { + .drawer-docked:not(.mainDrawer-mini) .drawer-search { + display: none !important; + } + .mainDrawer-mini .navDrawerSearchFieldContainer, + .mainDrawer:not(.drawer-docked) .navDrawerSearchFieldContainer { + display: none !important; + } + .drawer-docked:not(.mainDrawer-mini) ~ .page .searchFields { + margin-bottom: 0 !important; + padding-bottom: 0 !important; + } + @media all and (min-width: 60em) { + .drawer-docked:not(.mainDrawer-mini) ~ .page .searchInputContainer { + display: none !important; + } + } +} +@media not all and (pointer: fine) { + .navDrawerSearchFieldContainer { + display: none !important; + } +} diff --git a/modules/themes/appletv/theme.css b/modules/themes/appletv/theme.css index e29e0cb..77f5280 100644 --- a/modules/themes/appletv/theme.css +++ b/modules/themes/appletv/theme.css @@ -141,9 +141,6 @@ html { .emby-collapsible-button-collapsed::after { background: var(--line-background); } -.skinHeader-withBackground.headroom-scrolling { - background: var(--header-background); -} .appfooter { background: var(--footer-background); } diff --git a/modules/themes/black/theme.css b/modules/themes/black/theme.css index 34e104f..b13ce20 100644 --- a/modules/themes/black/theme.css +++ b/modules/themes/black/theme.css @@ -149,9 +149,6 @@ html { .emby-collapsible-button-collapsed::after { background: var(--line-background); } -.skinHeader-withBackground.headroom-scrolling { - background: var(--header-background); -} .appfooter { background: var(--footer-background); } diff --git a/modules/themes/dark/theme.css b/modules/themes/dark/theme.css index 64cc54c..b31a68a 100644 --- a/modules/themes/dark/theme.css +++ b/modules/themes/dark/theme.css @@ -173,9 +173,6 @@ html { .emby-collapsible-button-collapsed::after { background: var(--line-background); } -.skinHeader-withBackground.headroom-scrolling { - background: var(--header-background); -} .appfooter { background: var(--footer-background); } diff --git a/modules/themes/darkgradient/theme.css b/modules/themes/darkgradient/theme.css index 65728d2..ab63ca1 100644 --- a/modules/themes/darkgradient/theme.css +++ b/modules/themes/darkgradient/theme.css @@ -277,9 +277,6 @@ html { .emby-collapsible-button-collapsed::after { background: var(--line-background); } -.skinHeader-withBackground.headroom-scrolling { - background: var(--header-background); -} .appfooter { background: var(--footer-background); } diff --git a/modules/themes/light/theme.css b/modules/themes/light/theme.css index f8411ee..6bbb7ce 100644 --- a/modules/themes/light/theme.css +++ b/modules/themes/light/theme.css @@ -1 +1,1444 @@ -: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:.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:.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:.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%), .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), .15);--line-size:.08em;--drawer-background:#f2f2f7;--docked-drawer-background:hsla(0, 0%, 56%, .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:.7}@media (pointer:fine){:not(.layout-tv):root{--theme-text-color-alpha:.87;--dialog-border-width:var(--line-size)}}.layout-tv:root{--theme-text-color-alpha:.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 .07em rgba(255,255,255,.2),0 .56em 2.8em rgba(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),.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),.4) transparent}.emby-collapsible-button-collapsed::after{background:var(--line-background)}.skinHeader-withBackground.headroom-scrolling{background:var(--header-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%),.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%),.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:.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 .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));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,.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),.2)}.paper-icon-button-light-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);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),.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 .06933em .06933em 0 rgb(0 0 0 / 14%),0 .13866em .06933em -.06933em rgb(0 0 0 / 12%),0 .06933em .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),.9)!important}.emby-select-tv:focus{border-color:hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9)!important;background:hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.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:.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),.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),.2)}}.listItem-tv:focus .listItem-content-bg{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),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),.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),.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,.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),.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),.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),.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))}.emby-tab-button-active{background:hsla(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) - 82%),.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),.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),.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 .25em .4375em rgba(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),.9)}.button-link.emby-button-tv:focus::before{background:hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.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),.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%),.5)}.channelCellInner{background-color:hsla(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) - 9%),1)}.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))}.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%),.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,.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:#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),.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),.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 .25em .4375em rgba(0,0,0,.25)}.card-focustransform:focus .cardContent-shadow{box-shadow:0 .278em .975em rgba(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),.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: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%),.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%),.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),.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,.84) 0,rgba(0,0,0,.75) 60%,rgba(0,0,0,.3) 100%)!important;opacity:1!important}[dir=rtl] .itemBackgroundContainer.withBackdrop{background:linear-gradient(283deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.75) 60%,rgba(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), .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;--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%), .2)}.detailMainContainer-withbackdrop{text-shadow:.14em .14em .28em rgba(0,0,0,.45)}.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:.6;--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;--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%), .2)}.darkContentContainer-tv{--theme-text-color-alpha:.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:.7;--button-background-hue:0;--button-background-saturation:0%;--button-background-lightness:15%;--button-background-alpha:.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:.3} \ No newline at end of file +: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: #fff; + background: rgba(20, 20, 20, 0.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 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.14em 0.14em 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; +}