: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); }