990 lines
37 KiB
CSS
990 lines
37 KiB
CSS
:root {
|
|
--background-hue: 285;
|
|
--background-saturation: 10%;
|
|
--background-lightness: 7.84%;
|
|
--theme-primary-color-hue: 116;
|
|
--theme-primary-color-saturation: 41.7%;
|
|
--theme-primary-color-lightness: 50.2%;
|
|
--theme-text-color-hue: 0;
|
|
--theme-text-color-saturation: 0%;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--theme-secondary-text-color-alpha: .6;
|
|
--theme-accent-text-color-lightbg: green;
|
|
--theme-accent-text-color-darkbg: #6ccf65;
|
|
--theme-accent-text-color: var(--theme-accent-text-color-darkbg);
|
|
--theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness));
|
|
--button-background-hue: var(--background-hue);
|
|
--button-background-saturation: var(--background-saturation);
|
|
--button-background-lightness: calc(var(--background-lightness) + 14%);
|
|
--button-background-alpha: .7;
|
|
--button-background-blur-lightness: var(--button-background-lightness);
|
|
--button-background-blur-alpha: var(--button-background-alpha);
|
|
--button-blur-backdrop-filter: none;
|
|
--card-background-hue: var(--background-hue);
|
|
--card-background-saturation: var(--background-saturation);
|
|
--card-background-lightness: calc(var(--background-lightness) + 14%);
|
|
--card-background-alpha: .7;
|
|
--header-background: var(--theme-background);
|
|
--header-blur-background: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), .66);
|
|
--footer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 2.8%));
|
|
--line-background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), .14);
|
|
--line-size: .08em;
|
|
--drawer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 3.5%));
|
|
--docked-drawer-background: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 18%), .2);
|
|
--epg-channel-color: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%), 1);
|
|
--epg-program-color: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 15%), .5);
|
|
--dialog-border-width: 0;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-blur-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
--slider-lower-opacity: .7;
|
|
}
|
|
|
|
@media (pointer:fine) {
|
|
:not(.layout-tv):root {
|
|
--background-hue: 264;
|
|
--background-saturation: 14.71%;
|
|
--background-lightness: 13.33%;
|
|
--theme-text-color-alpha: .95;
|
|
--button-background-hue: 267;
|
|
--button-background-saturation: 8.11%;
|
|
--button-background-lightness: 25.76%;
|
|
--card-background-hue: 267;
|
|
--card-background-saturation: 8.11%;
|
|
--card-background-lightness: 25.76%;
|
|
--dialog-border-width: var(--line-size);
|
|
}
|
|
}
|
|
|
|
.layout-tv:root {
|
|
--background-hue: 260;
|
|
--background-saturation: 4.35%;
|
|
--background-lightness: 13.53%;
|
|
--theme-text-color-alpha: .85;
|
|
--header-background: transparent;
|
|
--header-blur-background: transparent;
|
|
--button-background-hue: var(--background-hue);
|
|
--button-background-saturation: var(--background-saturation);
|
|
--button-background-lightness: calc(var(--background-lightness) + 11%);
|
|
--card-background-hue: var(--background-hue);
|
|
--card-background-saturation: var(--background-saturation);
|
|
--card-background-lightness: calc(var(--background-lightness) + 11%);
|
|
}
|
|
|
|
.dialog {
|
|
--background-hue: 240;
|
|
--background-saturation: 3.4%;
|
|
--background-lightness: 11.4%;
|
|
--theme-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 5%));
|
|
--header-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 10%));
|
|
--footer-background: var(--header-background);
|
|
--button-background-hue: var(--background-hue);
|
|
--button-background-saturation: var(--background-saturation);
|
|
--button-background-lightness: calc(var(--background-lightness) + 15%);
|
|
--button-background-blur-lightness: var(--button-background-lightness);
|
|
--button-background-blur-alpha: var(--button-background-alpha);
|
|
--card-background-hue: var(--background-hue);
|
|
--card-background-saturation: var(--background-saturation);
|
|
--card-background-lightness: calc(var(--background-lightness) + 15%);
|
|
border: var(--dialog-border-width) solid var(--line-background);
|
|
box-shadow: inset 0 0 0 .07em rgba(0,0,0,.2),0 .56em 2.8em rgba(0,0,0,.55);
|
|
}
|
|
|
|
@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
|
|
.dialog-blur {
|
|
--background-hue: 0;
|
|
--background-saturation: 0%;
|
|
--background-lightness: 21.96%;
|
|
--theme-background: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), .76);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(4em);
|
|
backdrop-filter: saturate(1.8) blur(4em);
|
|
box-shadow: none!important;
|
|
}
|
|
}
|
|
|
|
html {
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
scrollbar-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.4) transparent;
|
|
}
|
|
|
|
.emby-collapsible-button {
|
|
border-color: var(--line-background)!important;
|
|
}
|
|
|
|
/* .skinHeader-withBackground.headroom-scrolling { */
|
|
/* background: var(--header-background); */
|
|
/* } */
|
|
|
|
.appfooter {
|
|
background: var(--footer-background);
|
|
border-top: var(--line-size) solid var(--line-background);
|
|
bottom: calc(-1 * var(--line-size))!important;
|
|
}
|
|
|
|
.formDialogHeader:not(.formDialogHeader-clear),.formDialogFooter:not(.formDialogFooter-clear) {
|
|
background: var(--header-background);
|
|
}
|
|
|
|
@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
|
|
.skinHeader-withBackground.skinHeader-withbackdropfilter.headroom-scrolling:not(.semiTransparent) {
|
|
background: var(--header-blur-background);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
}
|
|
|
|
.appfooter-withbackdropfilter {
|
|
background: hsla(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 4.6%),.66);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
}
|
|
}
|
|
|
|
.headerNowPlaying {
|
|
background: hsla(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 5%),.7);
|
|
}
|
|
|
|
.skinHeader.semiTransparent {
|
|
-webkit-backdrop-filter: none!important;
|
|
backdrop-filter: none!important;
|
|
background-color: transparent;
|
|
background: 0 0;
|
|
box-shadow: none!important;
|
|
border-bottom: 0;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
padding-bottom: 10em;
|
|
}
|
|
|
|
.skinHeader.semiTransparent::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
transition: opacity .3s ease-out;
|
|
content: " ";
|
|
opacity: 0;
|
|
background-color: rgba(0,0,0,.3);
|
|
background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));
|
|
}
|
|
|
|
.semiTransparent.headroom-scrolling {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.semiTransparent.headroom-scrolling::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pageTitleWithDefaultLogo {
|
|
background-image: url(../logowhite.png);
|
|
}
|
|
|
|
html,.dialog,.backgroundContainer {
|
|
background-color: var(--theme-background);
|
|
}
|
|
|
|
.backgroundContainer.withBackdrop {
|
|
background-color: rgba(0,0,0,.8);
|
|
}
|
|
|
|
.backgroundContainer-withfocuspreview.withBackdrop {
|
|
background-image: linear-gradient(to right,#000,rgba(0,0,0,.9) 34%,rgba(0,0,0,0),transparent);
|
|
background-color: transparent;
|
|
}
|
|
|
|
[dir=rtl] .backgroundContainer-withfocuspreview.withBackdrop {
|
|
background-image: linear-gradient(to left,#000,rgba(0,0,0,.9) 34%,rgba(0,0,0,0),transparent);
|
|
}
|
|
|
|
@media not all and (min-width:50em) {
|
|
.itemBackgroundContainer-preventbackdrop.withBackdrop {
|
|
background-color: var(--theme-background);
|
|
}
|
|
}
|
|
|
|
.paper-icon-button-light:active {
|
|
background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.2);
|
|
}
|
|
|
|
.icon-button-focusscale:focus {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.paper-icon-button-light:focus-visible {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.raised,.fab {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha));
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.raised:active,.fab:active {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 10%),var(--button-background-alpha));
|
|
}
|
|
|
|
.emby-select,.emby-multilineselect {
|
|
color: inherit;
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha));
|
|
border: var(--line-size) solid transparent;
|
|
}
|
|
|
|
/* @supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { */
|
|
/* .raised-backdropfilter,.fab-backdropfilter,.emby-select-backdropfilter.detailTrackSelect { */
|
|
/* background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-blur-lightness),var(--button-background-blur-alpha)); */
|
|
/* -webkit-backdrop-filter: var(--button-blur-backdrop-filter); */
|
|
/* backdrop-filter: var(--button-blur-backdrop-filter); */
|
|
/* } */
|
|
/**/
|
|
/* .toast-large { */
|
|
/* --theme-text-color-lightness: 100%; */
|
|
/* --theme-text-color-alpha: .85; */
|
|
/* color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha)); */
|
|
/* } */
|
|
/* } */
|
|
|
|
.filter-active {
|
|
background: #03a9f4!important;
|
|
color: #fff!important;
|
|
}
|
|
|
|
.button-submit {
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
color: #fff;
|
|
}
|
|
|
|
@media not all and (min-width:50em) {
|
|
.detailButton-primary {
|
|
background: #fff;
|
|
color: #1a1a1a;
|
|
-webkit-backdrop-filter: none!important;
|
|
backdrop-filter: none!important;
|
|
}
|
|
}
|
|
|
|
.emby-select>option {
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
background: hsl(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness));
|
|
}
|
|
|
|
.emby-select:focus {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
}
|
|
|
|
.emby-select-tv:focus {
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha))!important;
|
|
}
|
|
|
|
.selectLabelFocused,.inputLabelFocused {
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.emby-textarea-label:focus-within>.emby-textarea-labeltext,.sliderLabel:focus-within>.sliderLabelText {
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.button-link {
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.button-link-color-inherit {
|
|
color: inherit;
|
|
}
|
|
|
|
.paperList,.visualCardBox {
|
|
background-color: hsla(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness),var(--card-background-alpha));
|
|
}
|
|
|
|
.listItems-border {
|
|
border: var(--line-size) solid var(--line-background);
|
|
}
|
|
|
|
.collapseContent {
|
|
border: var(--line-size) solid var(--line-background);
|
|
}
|
|
|
|
.listItemBodyText-secondary,.secondaryText,.fieldDescription,.cardText-secondary {
|
|
--theme-text-color-alpha: var(--theme-secondary-text-color-alpha);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
@supports (color:var(--fake-var)) {
|
|
.cardText-first {
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
}
|
|
|
|
.actionsheetDivider {
|
|
background: var(--line-background);
|
|
}
|
|
|
|
.selectionCommandsPanel {
|
|
background: hsl(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 10%));
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.upNextDialog-countdownText {
|
|
color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.alphaPickerButton {
|
|
--theme-text-color-alpha: var(--theme-secondary-text-color-alpha);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
background-color: transparent;
|
|
}
|
|
|
|
.alphaPickerButton-tv:focus {
|
|
background-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha))!important;
|
|
}
|
|
|
|
.listItem-border {
|
|
border-color: var(--line-background)!important;
|
|
}
|
|
|
|
@media (hover:hover) and (pointer:fine) {
|
|
.listItem-hoverable:hover,.listItem-hoverable:hover .chkListItemSelectContainer {
|
|
background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.2);
|
|
}
|
|
}
|
|
|
|
.listItem-tv:focus {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.nocssvars .listItem-tv:focus .listItemBodyText-secondary {
|
|
color: inherit;
|
|
}
|
|
|
|
.listItem-button:focus-visible {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
@supports (color:var(--fake-var)) {
|
|
.listItem-tv:focus {
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.listItem-button:focus-visible {
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
}
|
|
|
|
@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
|
|
.listItem-tv-bf:focus {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-blur-background-lightness),.7);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(4em);
|
|
backdrop-filter: saturate(1.8) blur(4em);
|
|
}
|
|
|
|
.listItem-button-bf:focus-visible {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-blur-background-lightness),.7);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(4em);
|
|
backdrop-filter: saturate(1.8) blur(4em);
|
|
}
|
|
}
|
|
|
|
.progressring-spiner {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.mediaInfoText {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha));
|
|
}
|
|
|
|
.starIcon {
|
|
color: #cb272a;
|
|
}
|
|
|
|
.mediaInfoTimerIcon {
|
|
color: #cb272a;
|
|
}
|
|
|
|
.emby-input,.emby-textarea {
|
|
color: inherit;
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha));
|
|
border: var(--line-size) solid hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha));
|
|
}
|
|
|
|
.emby-input:focus,.emby-textarea:focus {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.emby-checkbox+.checkboxLabel::before {
|
|
border-color: currentcolor;
|
|
}
|
|
|
|
.chkCardSelect+.checkboxLabel::before {
|
|
border-color: transparent;
|
|
background: rgba(255,255,255,.4);
|
|
}
|
|
|
|
.chkItemSelect-selecthint+.checkboxLabel::before {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),calc(var(--theme-primary-color-lightness) - 5%));
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),calc(var(--theme-primary-color-lightness) - 5%));
|
|
}
|
|
|
|
.emby-checkbox:checked+.checkboxLabel::before {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.emby-checkbox-tv:focus+.checkboxLabel {
|
|
background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2);
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.emby-checkbox:focus-visible+.checkboxLabel {
|
|
background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2);
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.mdl-radio__inner-circle {
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.emby-radio:focus-visible+.radioButtonLabel {
|
|
background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2);
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.itemProgressBar {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.3);
|
|
}
|
|
|
|
.itemProgressBarForeground {
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.itemProgressBarForeground-recording {
|
|
background-color: #cb272a;
|
|
}
|
|
|
|
.countIndicator {
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.playedIndicator {
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.mainDrawer {
|
|
background: var(--drawer-background);
|
|
}
|
|
|
|
.drawer-docked {
|
|
background: var(--docked-drawer-background);
|
|
-webkit-border-end: var(--line-size) solid var(--line-background);
|
|
border-inline-end: var(--line-size) solid var(--line-background);
|
|
}
|
|
|
|
.navMenuOption-selected {
|
|
background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2)!important;
|
|
color: var(--theme-accent-text-color);
|
|
}
|
|
|
|
.emby-button-tv:focus {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.emby-button:focus-visible {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.button-link:focus-visible {
|
|
background: 0 0;
|
|
}
|
|
|
|
.button-link.emby-button-focusscale:focus {
|
|
background: 0 0;
|
|
}
|
|
|
|
.button-link:focus-visible::before {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9);
|
|
}
|
|
|
|
.button-link.emby-button-focusscale:focus::before {
|
|
background: hsla(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness),.9);
|
|
}
|
|
|
|
.firstChannelCell-withscroll {
|
|
background: var(--theme-background)!important;
|
|
}
|
|
|
|
.channelCell {
|
|
border-color: var(--theme-background);
|
|
}
|
|
|
|
.channelCellInner {
|
|
background-color: var(--epg-channel-color);
|
|
}
|
|
|
|
.programCellInner {
|
|
background: var(--epg-program-color);
|
|
}
|
|
|
|
.programCellInner-sports {
|
|
background: rgba(61,130,146,.5);
|
|
}
|
|
|
|
.programCellInner-movie {
|
|
background: rgba(137,96,172,.5);
|
|
}
|
|
|
|
.programCellInner-kids {
|
|
background: rgba(115,176,205,.5);
|
|
}
|
|
|
|
.programCellInner-news {
|
|
background: rgba(151,176,127,.5);
|
|
}
|
|
|
|
.guide-currentTimeIndicatorDot {
|
|
border-inline-end-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2);
|
|
color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.channelCell-tv:focus>.channelCellInner,.programCell-tv:focus>.programCellInner {
|
|
background-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.channelCell:focus-visible>.channelCellInner,.programCell:focus-visible>.programCellInner {
|
|
background-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.guide-programTextIcon {
|
|
color: #1e1e1e;
|
|
background: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 23.5%));
|
|
}
|
|
|
|
.infoBanner {
|
|
background: hsl(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness));
|
|
}
|
|
|
|
.warningBanner {
|
|
background: rgba(255,69,0,.1);
|
|
color: #ff4500;
|
|
}
|
|
|
|
.ratingbutton-icon-withrating {
|
|
color: #c33;
|
|
}
|
|
|
|
.downloadbutton-icon-on {
|
|
color: #4285f4;
|
|
}
|
|
|
|
.downloadbutton-icon-complete {
|
|
color: #4285f4;
|
|
}
|
|
|
|
.playstatebutton-icon-played {
|
|
color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
}
|
|
|
|
.toggleButtonIcon-active {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.5);
|
|
color: #000;
|
|
}
|
|
|
|
.cardContent-outlinefocus {
|
|
outline-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
}
|
|
|
|
.card:focus .cardContent-bxsborder {
|
|
box-shadow: 0 0 0 .27em hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness))!important;
|
|
}
|
|
|
|
.card:focus-visible .cardContent-bxsborder-fv {
|
|
box-shadow: 0 0 0 .27em hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness))!important;
|
|
}
|
|
|
|
.card:focus .cardBox-sideFooter-f {
|
|
background-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.card:focus-visible .cardBox-sideFooter {
|
|
background-color: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.cardContent-button {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.cardContent-shadow {
|
|
background-color: hsla(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness),var(--card-background-alpha));
|
|
}
|
|
|
|
.card-focustransform:focus .cardContent-shadow {
|
|
box-shadow: 0 .278em .975em rgba(0,0,0,.5);
|
|
}
|
|
|
|
.defaultCardBackground0 {
|
|
background-color: hsla(var(--card-background-hue),var(--card-background-saturation),var(--card-background-lightness),var(--card-background-alpha));
|
|
}
|
|
|
|
.cardImageContainer-sideFooter {
|
|
background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.04);
|
|
}
|
|
|
|
.cardOverlayButtonIcon,.listItemOverlayButtonIcon {
|
|
background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.5);
|
|
}
|
|
|
|
.emby-slider-background {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.3);
|
|
}
|
|
|
|
.emby-slider {
|
|
color: inherit;
|
|
}
|
|
|
|
.emby-slider-thumb {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),1);
|
|
}
|
|
|
|
.emby-slider-background-upper {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.35);
|
|
}
|
|
|
|
.emby-slider-background-upper-accent {
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.emby-slider-background-lower {
|
|
background: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--slider-lower-opacity));
|
|
}
|
|
|
|
@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
|
|
.emby-slider-background-backdropfilter {
|
|
-webkit-backdrop-filter: saturate(1.8) blur(4em);
|
|
backdrop-filter: saturate(1.8) blur(4em);
|
|
}
|
|
}
|
|
|
|
.scrollbuttoncontainer {
|
|
color: #fff;
|
|
background: rgba(20,20,20,.5);
|
|
}
|
|
|
|
.recordingIcon-active {
|
|
color: #c33!important;
|
|
}
|
|
|
|
.textActionButton.dragging {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha))!important;
|
|
}
|
|
|
|
.dragging-over.full-drop-target {
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
color: #fff!important;
|
|
}
|
|
|
|
.dragging-over-top::before,.dragging-over-bottom::after,.dragging-over-left::before,.dragging-over-right::after {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
}
|
|
|
|
.checkboxLabel-lockedfield-embeddedintofield {
|
|
border-inline-start-color: var(--line-background)!important;
|
|
border-top-width: var(--line-size)!important;
|
|
border-bottom-width: var(--line-size)!important;
|
|
}
|
|
|
|
.checkboxLabel-lockedfield {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),var(--button-background-lightness),var(--button-background-alpha))!important;
|
|
}
|
|
|
|
.chkLockedField:checked+span {
|
|
border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
background: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness))!important;
|
|
}
|
|
|
|
.chkLockedField.emby-checkbox-tv:focus {
|
|
box-shadow: 0 0 0 .12em hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.chkLockedField:focus-visible+span {
|
|
box-shadow: 0 0 0 .12em hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
|
|
}
|
|
|
|
.tabs-viewmenubar-backgroundcontainer {
|
|
background: hsl(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 9.75%));
|
|
}
|
|
|
|
@supports (backdrop-filter:blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
|
|
.tabs-viewmenubar-backgroundcontainer-backdropfilter {
|
|
background: hsla(var(--background-hue),var(--background-saturation),calc(var(--background-lightness) + 15%),.5);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
}
|
|
}
|
|
|
|
.emby-tab-button {
|
|
--theme-text-color-alpha: var(--theme-secondary-text-color-alpha);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.emby-tab-button-active {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 50%),.5);
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.tabs-viewmenubar:focus-within .emby-tab-button-active:not(:focus) {
|
|
background: 0 0;
|
|
}
|
|
|
|
.emby-tab-button:focus {
|
|
background: hsla(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) + 50%),.5);
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.emby-tab-button:focus-visible {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,1);
|
|
}
|
|
|
|
.emby-tab-button.emby-button-tv:focus {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,1);
|
|
}
|
|
|
|
.dockedtabs-tab-button {
|
|
background: 0 0!important;
|
|
}
|
|
|
|
.dockedtabs-tab-button.emby-tab-button:focus {
|
|
color: inherit;
|
|
}
|
|
|
|
.dockedtabs-tab-button.emby-tab-button-active {
|
|
color: var(--theme-accent-text-color)!important;
|
|
}
|
|
|
|
.searchTabsContainer {
|
|
border-bottom: var(--line-size) solid var(--line-background);
|
|
}
|
|
|
|
@supports (color:var(--fake-var)) {
|
|
.emby-tab-button:focus-visible {
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.emby-tab-button.emby-button-tv:focus {
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
}
|
|
}
|
|
|
|
.activeSession-bottomsection:nth-child(odd) {
|
|
background: hsla(var(--card-background-hue),var(--card-background-saturation),calc(var(--card-background-lightness) - 10%),.5);
|
|
}
|
|
|
|
.dataGridHeader-content-inner {
|
|
background: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) - 2%));
|
|
}
|
|
|
|
.dataGridItem:nth-child(even) {
|
|
background: hsl(var(--button-background-hue),var(--button-background-saturation),calc(var(--button-background-lightness) - 5%));
|
|
}
|
|
|
|
@media (hover:hover) and (pointer:fine) {
|
|
.dataGridItem-hoverable:hover,.dataGridItem-hoverable:hover .chkItemSelectContainer {
|
|
background-color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),.2);
|
|
}
|
|
}
|
|
|
|
.dataGridItem-focusscale:focus {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
.dataGridItem-button:focus-visible {
|
|
background: hsl(var(--focus-background-hue),var(--focus-background-saturation),var(--focus-background-lightness));
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),0%,var(--theme-text-color-alpha));
|
|
}
|
|
|
|
@media all and (min-width:50em) {
|
|
.itemBackgroundContainer.withBackdrop {
|
|
background: linear-gradient(77deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,.4) 100%)!important;
|
|
opacity: 1!important;
|
|
}
|
|
|
|
[dir=rtl] .itemBackgroundContainer.withBackdrop {
|
|
background: linear-gradient(283deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,.4) 100%)!important;
|
|
}
|
|
}
|
|
|
|
@media all and (orientation:landscape) {
|
|
.itemBackgroundContainer-brighter.withBackdrop {
|
|
background: linear-gradient(77deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%)!important;
|
|
opacity: 1!important;
|
|
}
|
|
|
|
[dir=rtl] .itemBackgroundContainer-brighter.withBackdrop {
|
|
background: linear-gradient(283deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%)!important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width:50em) {
|
|
.darkContentContainer-item {
|
|
--background-hue: 285;
|
|
--background-saturation: 10%;
|
|
--background-lightness: 7.84%;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-blur-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
--theme-text-color-hue: 0;
|
|
--theme-text-color-saturation: 0%;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--theme-accent-text-color: var(--theme-accent-text-color-darkbg);
|
|
--line-background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), .14);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
--button-background-hue: 285;
|
|
--button-background-saturation: 4.2%;
|
|
--button-background-lightness: 40%;
|
|
--button-background-alpha: .7;
|
|
--button-background-blur-lightness: calc(var(--button-background-lightness) + 37%);
|
|
--button-background-blur-alpha: .3;
|
|
--button-blur-backdrop-filter: saturate(1.8) blur(4em);
|
|
--card-background-hue: 0;
|
|
--card-background-saturation: 0%;
|
|
--card-background-lightness: 17.25%;
|
|
--card-background-alpha: .7;
|
|
--theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness));
|
|
--drawer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 3.5%));
|
|
--docked-drawer-background: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 18%), .2);
|
|
}
|
|
|
|
.detailMainContainer-withbackdrop {
|
|
text-shadow: .14em .14em .28em rgba(0,0,0,.45);
|
|
}
|
|
|
|
.detailMainContainer-withbackdrop .listItem-tv:focus {
|
|
--theme-text-color-lightness: 0%;
|
|
}
|
|
|
|
.detailMainContainer-withbackdrop .listItem-button:focus-visible {
|
|
--theme-text-color-lightness: 0%;
|
|
}
|
|
|
|
.details-additionalContent-withbackdrop {
|
|
--theme-text-color-alpha: .85;
|
|
}
|
|
}
|
|
|
|
.darkContentContainer {
|
|
--background-hue: 285;
|
|
--background-saturation: 10%;
|
|
--background-lightness: 7.84%;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-blur-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
--theme-text-color-hue: 0;
|
|
--theme-text-color-saturation: 0%;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--theme-accent-text-color: var(--theme-accent-text-color-darkbg);
|
|
--line-background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), .14);
|
|
color: hsla(var(--theme-text-color-hue),var(--theme-text-color-saturation),var(--theme-text-color-lightness),var(--theme-text-color-alpha));
|
|
--button-background-hue: 285;
|
|
--button-background-saturation: 4.2%;
|
|
--button-background-lightness: 40%;
|
|
--button-background-alpha: .7;
|
|
--button-background-blur-lightness: calc(var(--button-background-lightness) + 37%);
|
|
--button-background-blur-alpha: .3;
|
|
--button-blur-backdrop-filter: saturate(1.8) blur(4em);
|
|
--card-background-hue: 0;
|
|
--card-background-saturation: 0%;
|
|
--card-background-lightness: 17.25%;
|
|
--card-background-alpha: .7;
|
|
--theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness));
|
|
--drawer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 3.5%));
|
|
--docked-drawer-background: hsla(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 18%), .2);
|
|
}
|
|
|
|
.graphicContentContainer {
|
|
--theme-secondary-text-color-alpha: .7;
|
|
--button-background-hue: 0;
|
|
--button-background-saturation: 0%;
|
|
--button-background-lightness: 15%;
|
|
--button-background-alpha: .7;
|
|
--slider-lower-opacity: 1;
|
|
}
|
|
|
|
.detailTrackSelect {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.lyricsScroller {
|
|
--theme-secondary-text-color-alpha: .3;
|
|
}
|