1480 lines
40 KiB
CSS
1480 lines
40 KiB
CSS
:root {
|
|
--background-hue: 150;
|
|
--background-saturation: 2.44%;
|
|
--background-lightness: 83.92%;
|
|
--background-alpha: 1;
|
|
--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: 0.87;
|
|
--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: 0;
|
|
--button-background-saturation: 0%;
|
|
--button-background-lightness: 100%;
|
|
--button-background-alpha: 0.5;
|
|
--button-background-blur-lightness: var(--button-background-lightness);
|
|
--button-background-blur-alpha: var(--button-background-alpha);
|
|
--button-blur-backdrop-filter: none;
|
|
--card-background-hue: 0;
|
|
--card-background-saturation: 0%;
|
|
--card-background-lightness: 100%;
|
|
--card-background-alpha: 0.5;
|
|
--input-background-hue: 0;
|
|
--input-background-saturation: 0%;
|
|
--input-background-lightness: 100%;
|
|
--header-background: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
var(--background-lightness)
|
|
);
|
|
--header-blur-background: hsla(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) - 6%),
|
|
0.72
|
|
);
|
|
--footer-background: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 7%)
|
|
);
|
|
--line-background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.14
|
|
);
|
|
--line-size: 0.08em;
|
|
--drawer-background: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 10%)
|
|
);
|
|
--docked-drawer-background: rgba(255, 255, 255, 0.3);
|
|
--header-bottom-border: 0.08em solid var(--line-background);
|
|
--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 {
|
|
--dialog-border-width: var(--line-size);
|
|
}
|
|
}
|
|
.layout-tv:root {
|
|
--header-background: transparent;
|
|
--header-blur-background: transparent;
|
|
--header-bottom-border: 0;
|
|
}
|
|
.dialog {
|
|
--background-lightness: 93.92%;
|
|
--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-hue: 0;
|
|
--background-saturation: 0%;
|
|
--background-lightness: 100%;
|
|
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;
|
|
background-color: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
var(--background-lightness)
|
|
);
|
|
}
|
|
.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) - 6%),
|
|
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);
|
|
}
|
|
.backgroundContainer {
|
|
background-color: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
var(--background-lightness)
|
|
);
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
rgba(197, 216, 226, var(--background-alpha)) 0,
|
|
2.43902%,
|
|
rgba(204, 224, 234, var(--background-alpha)) 4.87805%,
|
|
7.5985%,
|
|
rgba(216, 236, 244, var(--background-alpha)) 10.3189%,
|
|
12.9456%,
|
|
rgba(228, 245, 252, var(--background-alpha)) 15.5722%,
|
|
16.6041%,
|
|
rgba(231, 247, 254, var(--background-alpha)) 17.636%,
|
|
19.3246%,
|
|
rgba(236, 250, 253, var(--background-alpha)) 21.0131%,
|
|
23.4522%,
|
|
rgba(241, 250, 247, var(--background-alpha)) 25.8912%,
|
|
29.1745%,
|
|
rgba(240, 243, 236, var(--background-alpha)) 32.4578%,
|
|
35.272%,
|
|
rgba(233, 234, 227, var(--background-alpha)) 38.0863%,
|
|
41.651%,
|
|
rgba(222, 222, 218, var(--background-alpha)) 45.2158%,
|
|
49.7186%,
|
|
rgba(214, 215, 214, var(--background-alpha)) 54.2214%,
|
|
57.2233%,
|
|
rgba(210, 213, 213, var(--background-alpha)) 60.2251%,
|
|
68.1051%,
|
|
rgba(206, 215, 217, var(--background-alpha)) 75.985%,
|
|
82.364%,
|
|
rgba(196, 210, 216, var(--background-alpha)) 88.743%,
|
|
94.3715%,
|
|
rgba(194, 210, 218, var(--background-alpha)) 100%
|
|
);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.backgroundContainer.withBackdrop {
|
|
--background-alpha: 0.9;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(197, 216, 226, var(--background-alpha)) 0,
|
|
2.43902%,
|
|
rgba(204, 224, 234, var(--background-alpha)) 4.87805%,
|
|
7.5985%,
|
|
rgba(216, 236, 244, var(--background-alpha)) 10.3189%,
|
|
12.9456%,
|
|
rgba(228, 245, 252, var(--background-alpha)) 15.5722%,
|
|
16.6041%,
|
|
rgba(231, 247, 254, var(--background-alpha)) 17.636%,
|
|
19.3246%,
|
|
rgba(236, 250, 253, var(--background-alpha)) 21.0131%,
|
|
23.4522%,
|
|
rgba(241, 250, 247, var(--background-alpha)) 25.8912%,
|
|
29.1745%,
|
|
rgba(240, 243, 236, var(--background-alpha)) 32.4578%,
|
|
35.272%,
|
|
rgba(233, 234, 227, var(--background-alpha)) 38.0863%,
|
|
41.651%,
|
|
rgba(222, 222, 218, var(--background-alpha)) 45.2158%,
|
|
49.7186%,
|
|
rgba(214, 215, 214, var(--background-alpha)) 54.2214%,
|
|
57.2233%,
|
|
rgba(210, 213, 213, var(--background-alpha)) 60.2251%,
|
|
68.1051%,
|
|
rgba(206, 215, 217, var(--background-alpha)) 75.985%,
|
|
82.364%,
|
|
rgba(196, 210, 216, var(--background-alpha)) 88.743%,
|
|
94.3715%,
|
|
rgba(194, 210, 218, var(--background-alpha)) 100%
|
|
);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.itemBackgroundContainer.withBackdrop {
|
|
--background-alpha: 0.85;
|
|
}
|
|
@media not all and (min-width: 50em) {
|
|
.itemBackgroundContainer-preventbackdrop.withBackdrop {
|
|
--background-alpha: 1;
|
|
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: #fff;
|
|
color: #1a1a1a;
|
|
-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-color: hsla(
|
|
var(--card-background-hue),
|
|
var(--card-background-saturation),
|
|
var(--card-background-lightness),
|
|
var(--card-background-alpha)
|
|
);
|
|
}
|
|
.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)
|
|
);
|
|
}
|
|
.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-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) - 62%),
|
|
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;
|
|
}
|
|
.channelCellInner {
|
|
background-color: #aebec3;
|
|
}
|
|
.programCellInner {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.programCellInner-sports {
|
|
background: rgba(10, 79, 95, 0.7);
|
|
color: #fff;
|
|
}
|
|
.programCellInner-movie {
|
|
background: rgba(86, 45, 121, 0.7);
|
|
color: #fff;
|
|
}
|
|
.programCellInner-kids {
|
|
background: rgba(64, 125, 154, 0.7);
|
|
color: #fff;
|
|
}
|
|
.programCellInner-news {
|
|
background: rgba(100, 125, 76, 0.7);
|
|
color: #fff;
|
|
}
|
|
.guide-currentTimeIndicatorDot {
|
|
border-inline-end-color: hsla(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness),
|
|
0.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),
|
|
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: #555;
|
|
}
|
|
.channelCell-tv:focus .guideChannelText {
|
|
color: #fff;
|
|
}
|
|
.channelCell:focus-visible .guideChannelText {
|
|
color: #fff;
|
|
}
|
|
.infoBanner {
|
|
background-color: hsla(
|
|
var(--card-background-hue),
|
|
var(--card-background-saturation),
|
|
var(--card-background-lightness),
|
|
var(--card-background-alpha)
|
|
);
|
|
}
|
|
.warningBanner {
|
|
background: rgba(255, 69, 0, 0.1);
|
|
color: #ff4500;
|
|
}
|
|
.ratingbutton-icon-withrating {
|
|
color: #c33 !important;
|
|
}
|
|
.downloadbutton-icon-on {
|
|
color: #4285f4;
|
|
}
|
|
.downloadbutton-icon-complete {
|
|
color: #4285f4;
|
|
}
|
|
.playstatebutton-icon-played {
|
|
color: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
) !important;
|
|
}
|
|
.toggleButtonIcon-active {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.5
|
|
);
|
|
color: #fff;
|
|
}
|
|
.card:focus .cardBox-sideFooter-f {
|
|
background-color: hsl(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness)
|
|
);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
) !important;
|
|
}
|
|
.card:focus-visible .cardBox-sideFooter {
|
|
background-color: hsl(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness)
|
|
);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
) !important;
|
|
}
|
|
.card:focus .cardContent-bxsborder::before,
|
|
.sideFooterCard:focus .cardBox-sideFooter-f::before {
|
|
border-color: hsla(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness),
|
|
0.8
|
|
) !important;
|
|
}
|
|
.card:focus:focus-visible .cardContent-bxsborder-fv::before {
|
|
border-color: hsla(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness),
|
|
0.8
|
|
) !important;
|
|
}
|
|
.cardContent-button {
|
|
background-color: transparent;
|
|
}
|
|
.cardContent-shadow {
|
|
background-color: hsla(
|
|
var(--card-background-hue),
|
|
var(--card-background-saturation),
|
|
var(--card-background-lightness),
|
|
var(--card-background-alpha)
|
|
);
|
|
box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25);
|
|
}
|
|
.card-focustransform:focus .cardContent-shadow {
|
|
box-shadow: 0 0.278em 0.975em rgba(0, 0, 0, 0.5);
|
|
}
|
|
.defaultCardBackground {
|
|
background-color: hsla(
|
|
var(--card-background-hue),
|
|
var(--card-background-saturation),
|
|
var(--card-background-lightness),
|
|
var(--card-background-alpha)
|
|
);
|
|
}
|
|
.cardImageContainer-sideFooter {
|
|
background-color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.04
|
|
);
|
|
}
|
|
.cardOverlayButtonIcon,
|
|
.listItemOverlayButtonIcon {
|
|
background-color: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
);
|
|
}
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.5
|
|
);
|
|
}
|
|
.emby-slider-background {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.3
|
|
);
|
|
}
|
|
.emby-slider {
|
|
color: inherit;
|
|
}
|
|
.emby-slider-thumb {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
1
|
|
);
|
|
}
|
|
.emby-slider-background-upper {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.35
|
|
);
|
|
}
|
|
.emby-slider-background-upper-accent {
|
|
background: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
);
|
|
}
|
|
.emby-slider-background-lower {
|
|
background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--slider-lower-opacity)
|
|
);
|
|
}
|
|
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
|
|
.emby-slider-background-backdropfilter {
|
|
-webkit-backdrop-filter: saturate(1.8) blur(4em);
|
|
backdrop-filter: saturate(1.8) blur(4em);
|
|
}
|
|
}
|
|
.scrollbuttoncontainer {
|
|
color: white;
|
|
background: hsla(var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),0.35);
|
|
border-radius: 0.7em;
|
|
}
|
|
.recordingIcon-active {
|
|
color: #c33 !important;
|
|
}
|
|
.textActionButton.dragging {
|
|
background: hsla(
|
|
var(--button-background-hue),
|
|
var(--button-background-saturation),
|
|
var(--button-background-lightness),
|
|
var(--button-background-alpha)
|
|
) !important;
|
|
}
|
|
.dragging-over.full-drop-target {
|
|
background: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
) !important;
|
|
color: #fff !important;
|
|
}
|
|
.dragging-over-top::before,
|
|
.dragging-over-bottom::after,
|
|
.dragging-over-left::before,
|
|
.dragging-over-right::after {
|
|
background: hsl(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness)
|
|
);
|
|
}
|
|
.checkboxLabel-lockedfield-embeddedintofield {
|
|
border-inline-start-color: var(--line-background) !important;
|
|
border-top-width: var(--line-size) !important;
|
|
border-bottom-width: var(--line-size) !important;
|
|
}
|
|
.checkboxLabel-lockedfield {
|
|
background: hsla(
|
|
var(--button-background-hue),
|
|
var(--button-background-saturation),
|
|
var(--button-background-lightness),
|
|
var(--button-background-alpha)
|
|
) !important;
|
|
}
|
|
.chkLockedField:checked + span {
|
|
border-color: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
) !important;
|
|
background: hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
) !important;
|
|
}
|
|
.chkLockedField.emby-checkbox-tv:focus {
|
|
box-shadow: 0 0 0 0.12em
|
|
hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
);
|
|
}
|
|
.chkLockedField:focus-visible + span {
|
|
box-shadow: 0 0 0 0.12em
|
|
hsl(
|
|
var(--theme-primary-color-hue),
|
|
var(--theme-primary-color-saturation),
|
|
var(--theme-primary-color-lightness)
|
|
);
|
|
}
|
|
.tabs-viewmenubar-backgroundcontainer {
|
|
background: hsla(
|
|
var(--button-background-hue),
|
|
var(--button-background-saturation),
|
|
var(--button-background-lightness),
|
|
var(--button-background-alpha)
|
|
);
|
|
}
|
|
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
|
|
.tabs-viewmenubar-backgroundcontainer-backdropfilter {
|
|
background: hsla(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) - 20%),
|
|
0.5
|
|
);
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
}
|
|
}
|
|
.tabs-viewmenubar:focus-within .emby-tab-button-active:not(:focus) {
|
|
background: 0 0;
|
|
color: inherit;
|
|
}
|
|
.dockedtabs {
|
|
border-top: var(--line-size) solid var(--line-background);
|
|
}
|
|
.dockedtabs-tab-button {
|
|
background: 0 0 !important;
|
|
}
|
|
.dockedtabs-tab-button.emby-tab-button:focus {
|
|
color: inherit;
|
|
}
|
|
.dockedtabs-tab-button.emby-tab-button-active {
|
|
color: var(--theme-accent-text-color) !important;
|
|
}
|
|
.searchFieldsBottomBorder {
|
|
border-bottom: var(--line-size) solid var(--line-background);
|
|
}
|
|
.activeSession-bottomsection:nth-child(odd) {
|
|
background: hsla(
|
|
var(--card-background-hue),
|
|
var(--card-background-saturation),
|
|
calc(var(--card-background-lightness) - 5%),
|
|
0.5
|
|
);
|
|
}
|
|
.dataGridHeader-content-inner {
|
|
background: #aebec3;
|
|
}
|
|
.dataGridItem:nth-child(2n) {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.dataGridItem-hoverable:hover,
|
|
.dataGridItem-hoverable:hover .chkItemSelectContainer {
|
|
background-color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.2
|
|
);
|
|
}
|
|
}
|
|
.dataGridItem-focusscale:focus {
|
|
background: hsl(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness)
|
|
);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
);
|
|
}
|
|
.dataGridItem-button:focus-visible {
|
|
background: hsl(
|
|
var(--focus-background-hue),
|
|
var(--focus-background-saturation),
|
|
var(--focus-background-lightness)
|
|
);
|
|
--theme-text-color-lightness: var(--focus-text-color-lightness);
|
|
--theme-text-color-alpha: 1;
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
);
|
|
}
|
|
@media all and (min-width: 50em) {
|
|
.itemBackgroundContainer.withBackdrop {
|
|
background: linear-gradient(
|
|
77deg,
|
|
rgba(0, 0, 0, 0.84) 0,
|
|
rgba(0, 0, 0, 0.75) 60%,
|
|
rgba(0, 0, 0, 0.3) 100%
|
|
) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
[dir="rtl"] .itemBackgroundContainer.withBackdrop {
|
|
background: linear-gradient(
|
|
283deg,
|
|
rgba(0, 0, 0, 0.84) 0,
|
|
rgba(0, 0, 0, 0.75) 60%,
|
|
rgba(0, 0, 0, 0.3) 100%
|
|
) !important;
|
|
}
|
|
}
|
|
@media all and (orientation: landscape) {
|
|
.itemBackgroundContainer-brighter.withBackdrop {
|
|
background: 0 0 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
@media all and (min-width: 50em) {
|
|
.darkContentContainer-item {
|
|
--background-hue: 285;
|
|
--background-saturation: 10%;
|
|
--background-lightness: 7.84%;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-blur-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
--theme-text-color-hue: 0;
|
|
--theme-text-color-saturation: 0%;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--theme-accent-text-color: var(--theme-accent-text-color-darkbg);
|
|
--line-background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.14
|
|
);
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
);
|
|
--button-background-hue: 285;
|
|
--button-background-saturation: 4.2%;
|
|
--button-background-lightness: 40%;
|
|
--button-background-alpha: 0.7;
|
|
--button-background-blur-lightness: calc(
|
|
var(--button-background-lightness) + 37%
|
|
);
|
|
--button-background-blur-alpha: 0.3;
|
|
--button-blur-backdrop-filter: saturate(1.8) blur(4em);
|
|
--card-background-hue: 0;
|
|
--card-background-saturation: 0%;
|
|
--card-background-lightness: 17.25%;
|
|
--card-background-alpha: 0.7;
|
|
--input-background-hue: 285;
|
|
--input-background-saturation: 4.2%;
|
|
--input-background-lightness: 40%;
|
|
--drawer-background: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 3.5%)
|
|
);
|
|
--docked-drawer-background: hsla(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 18%),
|
|
0.2
|
|
);
|
|
}
|
|
.detailMainContainer-withbackdrop {
|
|
text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
|
|
}
|
|
.details-additionalContent-withbackdrop {
|
|
--theme-text-color-alpha: 0.85;
|
|
}
|
|
}
|
|
.darkContentContainer {
|
|
--background-hue: 285;
|
|
--background-saturation: 10%;
|
|
--background-lightness: 7.84%;
|
|
--focus-background-hue: 0;
|
|
--focus-background-saturation: 0%;
|
|
--focus-background-lightness: 100%;
|
|
--focus-blur-background-lightness: 100%;
|
|
--focus-text-color-lightness: 0%;
|
|
--theme-text-color-hue: 0;
|
|
--theme-text-color-saturation: 0%;
|
|
--theme-text-color-lightness: 100%;
|
|
--theme-text-color-alpha: 1;
|
|
--theme-accent-text-color: var(--theme-accent-text-color-darkbg);
|
|
--line-background: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
0.14
|
|
);
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
);
|
|
--button-background-hue: 285;
|
|
--button-background-saturation: 4.2%;
|
|
--button-background-lightness: 40%;
|
|
--button-background-alpha: 0.6;
|
|
--button-background-blur-lightness: calc(
|
|
var(--button-background-lightness) + 37%
|
|
);
|
|
--button-background-blur-alpha: 0.3;
|
|
--button-blur-backdrop-filter: saturate(1.8) blur(4em);
|
|
--card-background-hue: 0;
|
|
--card-background-saturation: 0%;
|
|
--card-background-lightness: 17.25%;
|
|
--card-background-alpha: 0.7;
|
|
--input-background-hue: 285;
|
|
--input-background-saturation: 4.2%;
|
|
--input-background-lightness: 40%;
|
|
--drawer-background: hsl(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 3.5%)
|
|
);
|
|
--docked-drawer-background: hsla(
|
|
var(--background-hue),
|
|
var(--background-saturation),
|
|
calc(var(--background-lightness) + 18%),
|
|
0.2
|
|
);
|
|
}
|
|
.darkContentContainer-tv {
|
|
--theme-text-color-alpha: 0.87;
|
|
color: hsla(
|
|
var(--theme-text-color-hue),
|
|
var(--theme-text-color-saturation),
|
|
var(--theme-text-color-lightness),
|
|
var(--theme-text-color-alpha)
|
|
);
|
|
}
|
|
.graphicContentContainer {
|
|
--theme-text-color-alpha: 1;
|
|
--theme-secondary-text-color-alpha: 0.7;
|
|
--button-background-hue: 0;
|
|
--button-background-saturation: 0%;
|
|
--button-background-lightness: 15%;
|
|
--button-background-alpha: 0.6;
|
|
--input-background-hue: 0;
|
|
--input-background-saturation: 0%;
|
|
--input-background-lightness: 15%;
|
|
--slider-lower-opacity: 1;
|
|
}
|
|
.detailTrackSelect {
|
|
border-color: transparent;
|
|
}
|
|
.lyricsScroller {
|
|
--theme-secondary-text-color-alpha: 0.3;
|
|
}
|