|
|
:root {
|
|
|
--theme-primary-color: #2196f3;
|
|
|
--theme-text-color: rgba(0, 0, 0, 0.87);
|
|
|
--theme-text-color-opaque: #000;
|
|
|
--theme-accent-text-color: #2196f3;
|
|
|
--theme-primary-color-lightened: #2da2ff;
|
|
|
--theme-icon-focus-background: rgba(33, 150, 243, 0.2);
|
|
|
--theme-background: #fff;
|
|
|
--button-background: #eeeef0;
|
|
|
--card-background: #f7f7f9;
|
|
|
--header-background: var(--theme-background);
|
|
|
--header-blur-background: rgba(255, 255, 255, 0.72);
|
|
|
--footer-background: #fff;
|
|
|
--footer-blur-background: var(--header-blur-background);
|
|
|
--theme-body-secondary-text-color: rgba(0, 0, 0, 0.6);
|
|
|
--line-background: rgba(0, 0, 0, 0.08);
|
|
|
--line-size: 0.12em;
|
|
|
--scrollbar-thumb-background: rgba(0, 0, 0, 0.3);
|
|
|
--drawer-background: #f3f2f8;
|
|
|
--docked-drawer-background: #f3f2f8;
|
|
|
--logo-url: /modules/themes/logodark.png;
|
|
|
}
|
|
|
html {
|
|
|
color: var(--theme-text-color);
|
|
|
scrollbar-color: var(--scrollbar-thumb-background) transparent;
|
|
|
}
|
|
|
.emby-collapsible-button {
|
|
|
border-color: var(--line-background) !important;
|
|
|
}
|
|
|
.skinHeader-withBackground {
|
|
|
background: var(--theme-primary-color);
|
|
|
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
|
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.appfooter {
|
|
|
border-top: var(--line-size) solid var(--line-background);
|
|
|
bottom: -0.24em !important;
|
|
|
}
|
|
|
.appfooter,
|
|
|
.formDialogFooter:not(.formDialogFooter-clear),
|
|
|
.formDialogHeader:not(.formDialogHeader-clear) {
|
|
|
background: var(--footer-background);
|
|
|
}
|
|
|
.formDialogHeader:not(.formDialogHeader-clear) {
|
|
|
border-bottom: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
|
|
border-top: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
|
|
|
.appfooter-withbackdropfilter {
|
|
|
background: var(--footer-blur-background);
|
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
|
}
|
|
|
}
|
|
|
.skinHeader.semiTransparent {
|
|
|
-webkit-backdrop-filter: none !important;
|
|
|
backdrop-filter: none !important;
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
|
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
|
|
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
|
|
-webkit-box-shadow: none !important;
|
|
|
box-shadow: none !important;
|
|
|
border-bottom: 0;
|
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
}
|
|
|
.pageTitleWithDefaultLogo {
|
|
|
background-image: url(../logowhite.png);
|
|
|
}
|
|
|
.navDrawerLogo {
|
|
|
background-image: url(../logodark.png);
|
|
|
}
|
|
|
.backgroundContainer,
|
|
|
.dialog,
|
|
|
html {
|
|
|
background-color: var(--theme-background);
|
|
|
}
|
|
|
.backgroundContainer.withBackdrop {
|
|
|
background-color: rgba(255, 255, 255, 0.88);
|
|
|
}
|
|
|
@media not all and (min-width: 50em) {
|
|
|
.itemBackgroundContainer.withBackdrop {
|
|
|
background-color: var(--theme-background);
|
|
|
}
|
|
|
}
|
|
|
.paper-icon-button-light-tv:focus,
|
|
|
.paper-icon-button-light:active {
|
|
|
color: var(--theme-primary-color);
|
|
|
background-color: var(--theme-icon-focus-background);
|
|
|
}
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
.paper-icon-button-light:focus {
|
|
|
color: var(--theme-primary-color);
|
|
|
background-color: var(--theme-icon-focus-background);
|
|
|
}
|
|
|
}
|
|
|
.skinHeader-withBackground .paper-icon-button-light-tv:focus,
|
|
|
.skinHeader-withBackground .paper-icon-button-light:active {
|
|
|
color: #fff;
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
.skinHeader-withBackground .paper-icon-button-light:focus {
|
|
|
color: #fff;
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
}
|
|
|
.detailButton-icon,
|
|
|
.fab,
|
|
|
.raised {
|
|
|
background: var(--button-background);
|
|
|
color: var(--theme-text-color);
|
|
|
}
|
|
|
.detailButton-icon {
|
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
.emby-select-withcolor {
|
|
|
color: inherit;
|
|
|
background: #fff;
|
|
|
border: var(--line-size) solid rgba(0, 0, 0, 0.158);
|
|
|
}
|
|
|
.toast {
|
|
|
background: var(--button-background);
|
|
|
color: var(--theme-text-color);
|
|
|
}
|
|
|
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
|
|
|
.detailButton-icon,
|
|
|
.emby-select-withcolor.detailTrackSelect,
|
|
|
.fab,
|
|
|
.raised:not(.nobackdropfilter, .headerHelpButton) {
|
|
|
background: rgba(140, 140, 140, 0.3);
|
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
|
|
backdrop-filter: saturate(1.8) blur(1.5em);
|
|
|
}
|
|
|
.emby-select-withcolor.detailTrackSelect {
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
.dialog-blur,
|
|
|
.toast {
|
|
|
color: #000;
|
|
|
background: rgba(240, 240, 240, 0.76);
|
|
|
-webkit-backdrop-filter: blur(2.5em) saturate(1.8);
|
|
|
backdrop-filter: blur(2.5em) saturate(1.8);
|
|
|
-webkit-box-shadow: none !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
.fab:focus,
|
|
|
.raised:focus {
|
|
|
background: #ccc;
|
|
|
}
|
|
|
.button-submit:not(.emby-button-tv) {
|
|
|
background: var(--theme-primary-color);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.button-submit:not(.emby-button-tv):focus {
|
|
|
background: var(--theme-primary-color-lightened);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.emby-select-withcolor > option {
|
|
|
color: inherit;
|
|
|
background: var(--button-background);
|
|
|
}
|
|
|
.emby-select-withcolor:focus {
|
|
|
border-color: var(--theme-primary-color) !important;
|
|
|
}
|
|
|
.emby-select-tv-withcolor:focus {
|
|
|
background-color: var(--theme-primary-color) !important;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.checkboxLabel {
|
|
|
color: inherit;
|
|
|
}
|
|
|
.emby-checkbox-focusring:focus:before {
|
|
|
background-color: var(--theme-icon-focus-background);
|
|
|
}
|
|
|
.inputLabelFocused,
|
|
|
.selectLabelFocused,
|
|
|
.textareaLabelFocused {
|
|
|
color: var(--theme-accent-text-color);
|
|
|
}
|
|
|
.button-link {
|
|
|
color: var(--theme-accent-text-color);
|
|
|
}
|
|
|
.button-flat-accent {
|
|
|
color: var(--theme-accent-text-color);
|
|
|
}
|
|
|
.paperList,
|
|
|
.visualCardBox {
|
|
|
background-color: var(--card-background);
|
|
|
}
|
|
|
.paperList {
|
|
|
border: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
.collapseContent {
|
|
|
border: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
.cardText-secondary,
|
|
|
.fieldDescription,
|
|
|
.listItemBodyText-secondary,
|
|
|
.secondaryText {
|
|
|
color: var(--theme-body-secondary-text-color);
|
|
|
}
|
|
|
.cardText-first {
|
|
|
color: var(--theme-text-color-opaque);
|
|
|
}
|
|
|
.actionsheetDivider {
|
|
|
background: var(--line-background);
|
|
|
}
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
.actionSheetMenuItem:hover {
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
}
|
|
|
.selectionCommandsPanel {
|
|
|
background: var(--theme-primary-color);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.upNextDialog-countdownText {
|
|
|
color: var(--theme-primary-color);
|
|
|
}
|
|
|
.alphaPickerButton {
|
|
|
color: var(--theme-body-secondary-text-color);
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
.alphaPickerButton-selected {
|
|
|
color: var(--theme-text-color-opaque);
|
|
|
}
|
|
|
.alphaPickerButton-tv:focus {
|
|
|
background-color: var(--theme-primary-color);
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.detailTableBodyRow-shaded:nth-child(even) {
|
|
|
background: #f8f8f8;
|
|
|
}
|
|
|
.listItem-border {
|
|
|
border-color: var(--line-background) !important;
|
|
|
}
|
|
|
.listItem-focusscale:focus {
|
|
|
background: #ddd;
|
|
|
}
|
|
|
.progressring-spiner {
|
|
|
border-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.mediaInfoText {
|
|
|
background: var(--button-background);
|
|
|
}
|
|
|
.starIcon {
|
|
|
color: #cb272a;
|
|
|
}
|
|
|
.mediaInfoTimerIcon {
|
|
|
color: #cb272a;
|
|
|
}
|
|
|
.emby-input,
|
|
|
.emby-textarea {
|
|
|
color: inherit;
|
|
|
background: #fff;
|
|
|
border: var(--line-size) solid rgba(0, 0, 0, 0.158);
|
|
|
}
|
|
|
.emby-input:focus,
|
|
|
.emby-textarea:focus {
|
|
|
border-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-checkbox:checked + span:before {
|
|
|
border-color: currentColor;
|
|
|
}
|
|
|
.emby-checkbox:checked + span:before {
|
|
|
border-color: var(--theme-primary-color);
|
|
|
background-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.itemProgressBarForeground {
|
|
|
background-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.itemProgressBarForeground-recording {
|
|
|
background-color: #cb272a;
|
|
|
}
|
|
|
.countIndicator {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.playedIndicator {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.mainDrawer {
|
|
|
background: var(--drawer-background);
|
|
|
}
|
|
|
.drawer-docked {
|
|
|
background: var(--docked-drawer-background);
|
|
|
border-right: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
.navMenuOption:hover {
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
.navMenuOption-selected {
|
|
|
background-color: var(--theme-icon-focus-background) !important;
|
|
|
color: var(--theme-accent-text-color);
|
|
|
}
|
|
|
.emby-button-focusscale:focus,
|
|
|
.emby-button-focusscale:focus .detailButton-icon {
|
|
|
background: var(--theme-primary-color);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.emby-tab-button {
|
|
|
color: #fff;
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
.emby-tab-button-active {
|
|
|
color: #fff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.emby-tab-button-active.emby-button-tv {
|
|
|
color: #fff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.emby-tab-button.emby-button-tv:focus {
|
|
|
color: #fff;
|
|
|
color: #fff;
|
|
|
background: 0 0;
|
|
|
}
|
|
|
.emby-button {
|
|
|
outline-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.dockedtabs-tab-button {
|
|
|
color: #000;
|
|
|
color: rgba(000, 000, 000, 0.5);
|
|
|
}
|
|
|
.dockedtabs-tab-button.emby-tab-button-active {
|
|
|
color: var(--theme-primary-color);
|
|
|
}
|
|
|
.channelCell,
|
|
|
.guide-headerTimeslots,
|
|
|
.timeslotHeaders {
|
|
|
background: var(--theme-background);
|
|
|
}
|
|
|
@media (pointer: coarse) {
|
|
|
.channelCell-mobilefocus {
|
|
|
background: var(--theme-background) !important;
|
|
|
}
|
|
|
}
|
|
|
.channelCell-mobilefocus:not(:focus-visible) {
|
|
|
background: var(--theme-background) !important;
|
|
|
}
|
|
|
.channelCell-mobilefocus:not(:-moz-focusring) {
|
|
|
background: var(--theme-background) !important;
|
|
|
}
|
|
|
.channelCell,
|
|
|
.epgRow,
|
|
|
.programCell {
|
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
.guide-currentTimeIndicatorDot {
|
|
|
border-right-color: var(--theme-icon-focus-background);
|
|
|
}
|
|
|
.guide-currentTimeIndicatorDot:after {
|
|
|
border-top-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.firstChannelCell {
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
.programCell-sports {
|
|
|
background: #3949ab !important;
|
|
|
}
|
|
|
.programCell-movie {
|
|
|
background: #5e35b1 !important;
|
|
|
}
|
|
|
.programCell-kids {
|
|
|
background: #039be5 !important;
|
|
|
}
|
|
|
.programCell-news {
|
|
|
background: #43a047 !important;
|
|
|
}
|
|
|
.channelCell:focus,
|
|
|
.programCell:focus {
|
|
|
background-color: var(--theme-primary-color);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.guide-programTextIcon {
|
|
|
color: #1e1e1e;
|
|
|
background: #555;
|
|
|
}
|
|
|
.infoBanner {
|
|
|
background: var(--card-background);
|
|
|
border: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
.ratingbutton-icon-withrating {
|
|
|
color: #c33 !important;
|
|
|
}
|
|
|
.downloadbutton-icon-on {
|
|
|
color: #4285f4;
|
|
|
}
|
|
|
.downloadbutton-icon-complete {
|
|
|
color: #4285f4;
|
|
|
}
|
|
|
.playstatebutton-icon-played {
|
|
|
color: #c33 !important;
|
|
|
}
|
|
|
.repeatButton-active {
|
|
|
color: #4285f4;
|
|
|
}
|
|
|
.card:focus .card-focuscontent {
|
|
|
border-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.cardContent-button {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
.cardContent-shadow {
|
|
|
background-color: var(--card-background);
|
|
|
-webkit-box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.1);
|
|
|
box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.defaultCardBackground0 {
|
|
|
background-color: var(--card-background);
|
|
|
}
|
|
|
.defaultCardBackground1 {
|
|
|
background-color: #009688;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.defaultCardBackground2 {
|
|
|
background-color: #d32f2f;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.defaultCardBackground3 {
|
|
|
background-color: #0288d1;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.defaultCardBackground4 {
|
|
|
background-color: #388e3c;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.defaultCardBackground5 {
|
|
|
background-color: #f57f17;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.cardOverlayButtonIcon {
|
|
|
background-color: var(--theme-primary-color);
|
|
|
}
|
|
|
::-webkit-scrollbar-track-piece {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background: var(--scrollbar-thumb-background);
|
|
|
}
|
|
|
.emby-slider-background {
|
|
|
background: var(--scrollbar-thumb-background);
|
|
|
}
|
|
|
.emby-slider {
|
|
|
color: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-slider::-moz-range-track {
|
|
|
background: #444;
|
|
|
}
|
|
|
.emby-slider::-moz-range-progress {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-slider::-webkit-slider-thumb {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-slider::-moz-range-thumb {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-slider::-ms-thumb {
|
|
|
background: var(--theme-primary-color);
|
|
|
}
|
|
|
.emby-slider-background-lower {
|
|
|
background-color: var(--theme-primary-color);
|
|
|
}
|
|
|
.scrollbuttoncontainer {
|
|
|
color: #fff;
|
|
|
background: rgba(20, 20, 20, 0.5);
|
|
|
}
|
|
|
.recordingIcon-active {
|
|
|
color: #c33 !important;
|
|
|
}
|
|
|
.drawerLogo {
|
|
|
background-image: url(../logodark.png);
|
|
|
border-bottom-color: var(--line-background);
|
|
|
}
|
|
|
.searchTabsContainer {
|
|
|
border-bottom: var(--line-size) solid var(--line-background);
|
|
|
}
|
|
|
.emby-search-tab-button.emby-tab-button-active {
|
|
|
background: var(--theme-accent-text-color) !important;
|
|
|
}
|
|
|
.textActionButton.dragging {
|
|
|
background: var(--button-background) !important;
|
|
|
}
|
|
|
.dragging-over.full-drop-target {
|
|
|
background: var(--theme-primary-color) !important;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
.dragging-over-top:before {
|
|
|
background: var(--theme-accent-text-color);
|
|
|
}
|
|
|
.dragging-over-bottom:after {
|
|
|
background: var(--theme-accent-text-color);
|
|
|
}
|
|
|
|
