Last active
April 26, 2025 19:40
-
-
Save Kautenja/83504bc0e7d90f66ba0351c31a6b9786 to your computer and use it in GitHub Desktop.
styles to make emby look like netflix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
EMBY THEME : piflix | |
# Table of Contents | |
1. ACCENT COLORS | |
1.1 Buttons | |
1.1.1 Checkboxes | |
1.1.2 Rectangles | |
1.1.3 Links & Text buttons | |
1.1.4 Others | |
1.2 Details | |
1.2.1 Circles | |
1.2.2 Indicators | |
1.2.3 Fonts | |
1.2.4 Icons | |
1.2.5 Dialogs & Action Sheets | |
1.2.6 Others | |
1.3 Fixes | |
2. MISCELLANEOUS MODIFICATIONS | |
2.1 Buttons | |
2.2 Details | |
2.2.1 Scrollbars | |
2.2.2 Logos | |
2.2.3 Others | |
2.3 Fixes | |
2.3.1 Dark Colors | |
*/ | |
/* make the background transparent */ | |
body { | |
background-color: rgba(0,0,0,0) !important; | |
} | |
/* remove the home screen row with "get emby premiere" stuff */ | |
.appInfoSection { | |
display: none; | |
} | |
/* ------------------------ 1. ACCENT COLORS ------------------------- */ | |
/* ----- 1.1 Buttons ----- */ | |
/* 1.1.1 Checkboxes */ | |
.emby-checkbox:checked+span+span+.checkboxOutline { | |
background-color: #E81123 !important; | |
} | |
.checkboxIcon-checked { | |
background-color: #E81123 !important; | |
} | |
.emby-checkbox:checked+span+span+.checkboxOutline, | |
.progressring-spiner { | |
border-color: #E81123 !important; | |
} | |
.emby-checkbox:focus+span+.emby-checkbox-focushelper { | |
background-color: #E81123 !important; | |
opacity: 0.26 !important; | |
} | |
/* 1.1.2 Rectangles */ | |
.raised { | |
background: #404040 !important; | |
color: #fff !important; | |
} | |
.button-submit, | |
.button-accent { | |
background: #E81123 !important; | |
color: #fff; | |
} | |
.raised-mini.emby-button { | |
background: #E81123 !important; | |
color: #ffffff !important; | |
} | |
/* Restart */ | |
.btnRestartContainer.emby-button { | |
background: #E81123 !important; | |
color: #fff; | |
} | |
/* Play & Resume */ | |
.btnPlaySimple.emby-button { | |
background: #E81123 !important; | |
color: #fff; | |
} | |
.btnResume.emby-button { | |
background: #94131E !important; | |
color: #fff; | |
} | |
/* 1.1.3 Links & Text buttons */ | |
.button-link, | |
.button-flat-accent, | |
.button-accent-flat, | |
.textlink { | |
color: #E81123 !important; | |
} | |
.button-link:hover, | |
.button-flat-accent:hover, | |
.button-accent-flat:hover, | |
.textlink:hover { | |
color: #9b9b9b !important; | |
} | |
.button-link:active, | |
.button-flat-accent:active, | |
.button-accent-flat:active, | |
.textlink:active { | |
color: #94131E !important; | |
} | |
/* Top Header */ | |
.emby-tab-button-active { | |
color: #E81123 !important; | |
} | |
/* 1.1.4 Others */ | |
/* Alpha Picker */ | |
.alphaPickerButton-selected, | |
.alphaPickerButton-tv:focus { | |
background-color: #E81123 !important; | |
color: #fff !important; | |
} | |
/* Radio Buttons */ | |
.mdl-radio__inner-circle { | |
background: #E81123 !important; | |
} | |
.mdl-radio__button:checked+.mdl-radio__label+.mdl-radio__outer-circle { | |
border: 2px solid #E81123 !important; | |
} | |
.mdl-radio__button:checked:focus+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle { | |
-webkit-box-shadow: 0 0 0 10px rgba(232, 17, 35, 0.26) !important; | |
box-shadow: 0 0 0 10px rgba(232, 17, 35, 0.26) !important; | |
} | |
/* Control Group Buttons */ | |
div[data-role="controlgroup"] a.ui-btn-active[data-role='button'] { | |
background: #E81123 !important; | |
color: #ffffff !important; | |
} | |
/* play & shuffle buttons */ | |
/* disable the "play all" button */ | |
.btnPlay { | |
display: none; | |
} | |
/* disable the shuffle button */ | |
.btnShuffle { | |
display: none; | |
} | |
.mainDetailButtons>.btnShuffle { | |
display: none; | |
} | |
.mainDetailButtons>.btnDeleteItem { | |
display: none; | |
} | |
.mainDetailButtons>.detailButton { | |
background-color: rgba(0,0,0,0) !important; | |
} | |
.mainDetailButtons>.detailButton>.detailButton-content { | |
background-color: rgba(0,0,0,0) !important; | |
} | |
.mainDetailButtons>.detailButton>.detailButton-content>.detailButton-icon { | |
background-color: rgba(0,0,0,0) !important; | |
} | |
.mainDetailButtons>.detailButton>.detailButton-content>.detailButton-text { | |
background-color: rgba(0,0,0,0) !important; | |
} | |
/* ----- 1.2 Details ----- */ | |
/* 1.2.1 Circles */ | |
/*.listItemIcon:not(.listItemIcon-transparent) { | |
background-color: $accent-color !important; }*/ | |
.dashboardSection i.listItemIcon.md-icon { | |
background-color: #E81123 !important; | |
} | |
.scheduledTaskPaperIconItem[data-status="Running"] i.listItemIcon.md-icon { | |
background-color: #94131E !important; | |
} | |
/* Focus Helper circles */ | |
.paper-icon-button-light:focus { | |
color: #E81123 !important; | |
} | |
/* 1.2.2 Indicators */ | |
.countIndicator, | |
.playedIndicator { | |
background: #E81123 !important; | |
} | |
.levelNormal { | |
background-color: #E81123 !important; | |
} | |
.fullSyncIndicator { | |
background: #E81123 !important; | |
color: #fff; | |
} | |
.playstatebutton-played i, | |
.ratingbutton-withrating i { | |
color: #E81123 !important; | |
} | |
p#pUpToDate i.md-icon { | |
background-color: #E81123 !important; | |
} | |
/* Loading Spinners */ | |
.mdl-spinner__layer-1, | |
.mdl-spinner__layer-2, | |
.mdl-spinner__layer-3, | |
.mdl-spinner__layer-4 { | |
border-color: #E81123 !important; | |
} | |
.progressring-spiner { | |
border: 0.25em solid #E81123 !important; | |
} | |
/* 1.2.3 Fonts */ | |
.selectLabelFocused, | |
.textareaLabelFocused, | |
.inputLabelFocused { | |
color: #E81123 !important; | |
} | |
.secondary.listItemBodyText span, | |
div#divRunningTasks span { | |
color: #E81123 !important; | |
} | |
/* 1.2.4 Icons */ | |
.starIcon, | |
.mediaInfoTimerIcon { | |
color: #E81123 !important; | |
} | |
/* Top Header */ | |
.btnActiveCast { | |
color: #E81123 !important; | |
} | |
/* Now Playing Bar & Now Playing Page */ | |
.repeatActive, | |
button.btnCommand.repeatToggleButton.autoSize.nowPlayingPageRepeatActive { | |
color: #E81123 !important; | |
} | |
/* 1.2.5 Dialogs & Action Sheets */ | |
/* 1.2.6 Others */ | |
/* General Accent Color Modifications */ | |
:focus { | |
outline: #E81123 auto 5px; | |
} | |
select:focus { | |
border-color: #E81123 !important; | |
} | |
::selection { | |
background-color: #94131E !important; | |
} | |
.emby-input:focus, | |
.emby-textarea:focus { | |
border-color: #E81123 !important; | |
} | |
/* Google Now Playing Bar & Now Playing Page */ | |
.iconOsdProgressInner, | |
.mdl-slider__background-lower, | |
.sliderBubble, | |
.mdl-slider::-webkit-slider-thumb { | |
background: #E81123 !important; | |
} | |
.mdl-slider:focus::-webkit-slider-thumb { | |
-webkit-box-shadow: 0 0 0 10px rgba(232, 17, 35, 0.26); | |
box-shadow: 0 0 0 10px rgba(232, 17, 35, 0.26) !important; | |
} | |
/* Firefox Now Playing Bar & Now Playing Page */ | |
.mdl-slider::-moz-range-thumb, | |
.mdl-slider::-moz-range-progress { | |
background: #E81123 !important; | |
} | |
.mdl-slider:focus::-moz-range-thumb { | |
box-shadow: 0 0 0 10px rgba(232, 17, 35, 0.26) !important; | |
} | |
/* Progress Bars */ | |
.itemProgressBarForeground { | |
background-color: #E81123 !important; | |
} | |
.taskProgressInner { | |
background: #E81123 !important; | |
} | |
/* Google Progress Bars */ | |
progress::-webkit-progress-value { | |
background: #E81123 !important; | |
} | |
/* Firefox Progress Bars */ | |
progress::-moz-progress-bar { | |
background: #E81123 !important; | |
} | |
/* Edge Progress Bars */ | |
progress { | |
background: #E81123 !important; | |
} | |
/* Main Drawers */ | |
.navMenuDivider { | |
background: #262626 !important; | |
} | |
.adminDrawerLogo { | |
border-bottom: 1px solid #262626 !important; | |
} | |
.mainDrawer { | |
background: #181818 !important; | |
} | |
.sidebarHeader { | |
color: #bbbbbb !important; | |
} | |
.navMenuOption { | |
color: #ffffff !important; | |
} | |
.navMenuOption.navMenuOption-selected { | |
background: #252528 !important; | |
color: #E81123 !important; | |
} | |
.navMenuOption:hover { | |
background: #252528 !important; | |
color: #9b9b9b !important; | |
} | |
/* Metadata Editor */ | |
div.jstree-wholerow.jstree-wholerow-clicked:hover, | |
div.jstree-wholerow.jstree-wholerow-clicked, | |
div.jstree-wholerow.jstree-wholerow-hovered { | |
background: #252528 !important; | |
} | |
.jstree-anchor.jstree-clicked, | |
.jstree-anchor.jstree-clicked.jstree-hovered { | |
background: #252528 !important; | |
color: #E81123 !important; | |
} | |
/* Multi-select */ | |
.itemSelectionPanel { | |
border: 1px solid #E81123 !important; | |
} | |
.selectionCommandsPanel { | |
background: #E81123 !important; | |
color: #fff; | |
} | |
/* upNextDialog */ | |
.upNextDialog-countdownText { | |
color: #E81123 !important; | |
} | |
/* Selection Bars */ | |
.emby-select-selectionbar, | |
.emby-textarea-selectionbar, | |
.emby-input-selectionbar { | |
background-color: #E81123 !important; | |
} | |
/* Media Info Detail Image */ | |
.itemDetailImage.loaded:hover { | |
border: 1px solid #E81123 !important; | |
} | |
/* 1.3 Fixes */ | |
/* ------------------ 2. MISCELLANEOUS MODIFICATIONS ----------------- */ | |
/* ----- 2.1 Buttons ----- */ | |
/* Circles */ | |
.fab { | |
background-color: transparent !important; | |
-webkit-box-shadow: none !important; | |
box-shadow: none !important; | |
-webkit-transition: none !important; | |
-o-transition: none !important; | |
transition: none !important; | |
} | |
/* ----- 2.2 Details ----- */ | |
/* 2.2.1 Scrollbars */ | |
/* Google Chrome */ | |
::-webkit-scrollbar-corner { | |
background-color: #3B3B3B; | |
} | |
::-webkit-scrollbar { | |
width: 10px; | |
height: 10px; | |
background-color: #3B3B3B; | |
} | |
::-webkit-scrollbar-thumb { | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
background: #888888; | |
} | |
/* Google Chrome - Dashboard Drawer */ | |
div.scrollContainer.smoothScrollY::-webkit-scrollbar-corner { | |
background-color: transparent !important; | |
} | |
div.scrollContainer.smoothScrollY::-webkit-scrollbar { | |
width: 2px; | |
height: 2px; | |
background-color: transparent !important; | |
} | |
div.scrollContainer.smoothScrollY::-webkit-scrollbar-thumb { | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
background: #888888; | |
} | |
/* Google Chrome - Filter Dialog */ | |
.dynamicFilterDialog::-webkit-scrollbar-corner { | |
background-color: transparent !important; | |
} | |
.dynamicFilterDialog::-webkit-scrollbar { | |
width: 2px; | |
height: 2px; | |
background-color: transparent !important; | |
} | |
.dynamicFilterDialog::-webkit-scrollbar-thumb { | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
background: #888888; | |
} | |
/* remove ugly box around the scroll buttons */ | |
.scrollbuttoncontainer>button>.md-icon { | |
color: rgb(238,238,238); | |
visibility: visible; | |
border-radius: 50%; | |
} | |
.scrollbuttoncontainer>button>.md-icon:hover { | |
background-color: rgba(0, 0, 0, 0.5); | |
} | |
.scrollbuttoncontainer>button { | |
visibility: hidden; | |
} | |
.scrollbuttoncontainer { | |
visibility: hidden; | |
} | |
/* 2.2.2 Logos */ | |
/* Login Page */ | |
.imgLogoIcon { | |
content: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2294px%22%20height%3D%2243px%22%20viewBox%3D%220%200%2094%2043%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2058%20%2884663%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Epiflix%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cg%20id%3D%22piflix%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5.744%2C4.4%20L5.744%2C38%20L9.488%2C38%20L9.488%2C24.752%20L12.8%2C24.752%20C18.128%2C24.752%2020.624%2C21.968%2020.624%2C16.64%20L20.624%2C12.608%20C20.624%2C7.52%2018.368%2C4.4%2013.088%2C4.4%20L5.744%2C4.4%20Z%20M9.488%2C21.392%20L9.488%2C7.808%20L13.088%2C7.808%20C15.824%2C7.808%2016.928%2C9.344%2016.928%2C12.416%20L16.928%2C16.88%20C16.928%2C20.096%2015.584%2C21.392%2012.8%2C21.392%20L9.488%2C21.392%20Z%20M23.552%2C4.4%20L23.552%2C38%20L27.296%2C38%20L27.296%2C4.4%20L23.552%2C4.4%20Z%20M34.88%2C20.048%20L34.88%2C7.808%20L44.48%2C7.808%20L44.48%2C4.4%20L31.136%2C4.4%20L31.136%2C38%20L34.88%2C38%20L34.88%2C23.456%20L42.608%2C23.456%20L42.608%2C20.048%20L34.88%2C20.048%20Z%20M60.8%2C38%20L60.8%2C34.592%20L51.2%2C34.592%20L51.2%2C4.4%20L47.456%2C4.4%20L47.456%2C38%20L60.8%2C38%20Z%20M63.632%2C4.4%20L63.632%2C38%20L67.376%2C38%20L67.376%2C4.4%20L63.632%2C4.4%20Z%20M85.136%2C38%20L79.568%2C23.504%20L73.952%2C38%20L70.4%2C38%20L77.168%2C20.672%20L70.832%2C4.4%20L74.72%2C4.4%20L79.904%2C17.84%20L85.136%2C4.4%20L88.64%2C4.4%20L82.352%2C20.672%20L89.072%2C38%20L85.136%2C38%20Z%22%20fill%3D%22%23E50914%22%20fill-rule%3D%22nonzero%22%3E%3C/path%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E') !important; | |
} | |
/* Main Drawer Mobile */ | |
.adminDrawerLogo img { | |
content: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2294px%22%20height%3D%2243px%22%20viewBox%3D%220%200%2094%2043%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2058%20%2884663%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Epiflix%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cg%20id%3D%22piflix%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5.744%2C4.4%20L5.744%2C38%20L9.488%2C38%20L9.488%2C24.752%20L12.8%2C24.752%20C18.128%2C24.752%2020.624%2C21.968%2020.624%2C16.64%20L20.624%2C12.608%20C20.624%2C7.52%2018.368%2C4.4%2013.088%2C4.4%20L5.744%2C4.4%20Z%20M9.488%2C21.392%20L9.488%2C7.808%20L13.088%2C7.808%20C15.824%2C7.808%2016.928%2C9.344%2016.928%2C12.416%20L16.928%2C16.88%20C16.928%2C20.096%2015.584%2C21.392%2012.8%2C21.392%20L9.488%2C21.392%20Z%20M23.552%2C4.4%20L23.552%2C38%20L27.296%2C38%20L27.296%2C4.4%20L23.552%2C4.4%20Z%20M34.88%2C20.048%20L34.88%2C7.808%20L44.48%2C7.808%20L44.48%2C4.4%20L31.136%2C4.4%20L31.136%2C38%20L34.88%2C38%20L34.88%2C23.456%20L42.608%2C23.456%20L42.608%2C20.048%20L34.88%2C20.048%20Z%20M60.8%2C38%20L60.8%2C34.592%20L51.2%2C34.592%20L51.2%2C4.4%20L47.456%2C4.4%20L47.456%2C38%20L60.8%2C38%20Z%20M63.632%2C4.4%20L63.632%2C38%20L67.376%2C38%20L67.376%2C4.4%20L63.632%2C4.4%20Z%20M85.136%2C38%20L79.568%2C23.504%20L73.952%2C38%20L70.4%2C38%20L77.168%2C20.672%20L70.832%2C4.4%20L74.72%2C4.4%20L79.904%2C17.84%20L85.136%2C4.4%20L88.64%2C4.4%20L82.352%2C20.672%20L89.072%2C38%20L85.136%2C38%20Z%22%20fill%3D%22%23E50914%22%20fill-rule%3D%22nonzero%22%3E%3C/path%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E') !important; | |
} | |
/* Home Page */ | |
.pageTitleWithLogo { | |
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2294px%22%20height%3D%2243px%22%20viewBox%3D%220%200%2094%2043%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2058%20%2884663%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Epiflix%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cg%20id%3D%22piflix%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5.744%2C4.4%20L5.744%2C38%20L9.488%2C38%20L9.488%2C24.752%20L12.8%2C24.752%20C18.128%2C24.752%2020.624%2C21.968%2020.624%2C16.64%20L20.624%2C12.608%20C20.624%2C7.52%2018.368%2C4.4%2013.088%2C4.4%20L5.744%2C4.4%20Z%20M9.488%2C21.392%20L9.488%2C7.808%20L13.088%2C7.808%20C15.824%2C7.808%2016.928%2C9.344%2016.928%2C12.416%20L16.928%2C16.88%20C16.928%2C20.096%2015.584%2C21.392%2012.8%2C21.392%20L9.488%2C21.392%20Z%20M23.552%2C4.4%20L23.552%2C38%20L27.296%2C38%20L27.296%2C4.4%20L23.552%2C4.4%20Z%20M34.88%2C20.048%20L34.88%2C7.808%20L44.48%2C7.808%20L44.48%2C4.4%20L31.136%2C4.4%20L31.136%2C38%20L34.88%2C38%20L34.88%2C23.456%20L42.608%2C23.456%20L42.608%2C20.048%20L34.88%2C20.048%20Z%20M60.8%2C38%20L60.8%2C34.592%20L51.2%2C34.592%20L51.2%2C4.4%20L47.456%2C4.4%20L47.456%2C38%20L60.8%2C38%20Z%20M63.632%2C4.4%20L63.632%2C38%20L67.376%2C38%20L67.376%2C4.4%20L63.632%2C4.4%20Z%20M85.136%2C38%20L79.568%2C23.504%20L73.952%2C38%20L70.4%2C38%20L77.168%2C20.672%20L70.832%2C4.4%20L74.72%2C4.4%20L79.904%2C17.84%20L85.136%2C4.4%20L88.64%2C4.4%20L82.352%2C20.672%20L89.072%2C38%20L85.136%2C38%20Z%22%20fill%3D%22%23E50914%22%20fill-rule%3D%22nonzero%22%3E%3C/path%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E') !important; | |
} | |
/* Drawer */ | |
.drawerLogo { | |
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2294px%22%20height%3D%2243px%22%20viewBox%3D%220%200%2094%2043%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2058%20%2884663%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Epiflix%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cg%20id%3D%22piflix%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5.744%2C4.4%20L5.744%2C38%20L9.488%2C38%20L9.488%2C24.752%20L12.8%2C24.752%20C18.128%2C24.752%2020.624%2C21.968%2020.624%2C16.64%20L20.624%2C12.608%20C20.624%2C7.52%2018.368%2C4.4%2013.088%2C4.4%20L5.744%2C4.4%20Z%20M9.488%2C21.392%20L9.488%2C7.808%20L13.088%2C7.808%20C15.824%2C7.808%2016.928%2C9.344%2016.928%2C12.416%20L16.928%2C16.88%20C16.928%2C20.096%2015.584%2C21.392%2012.8%2C21.392%20L9.488%2C21.392%20Z%20M23.552%2C4.4%20L23.552%2C38%20L27.296%2C38%20L27.296%2C4.4%20L23.552%2C4.4%20Z%20M34.88%2C20.048%20L34.88%2C7.808%20L44.48%2C7.808%20L44.48%2C4.4%20L31.136%2C4.4%20L31.136%2C38%20L34.88%2C38%20L34.88%2C23.456%20L42.608%2C23.456%20L42.608%2C20.048%20L34.88%2C20.048%20Z%20M60.8%2C38%20L60.8%2C34.592%20L51.2%2C34.592%20L51.2%2C4.4%20L47.456%2C4.4%20L47.456%2C38%20L60.8%2C38%20Z%20M63.632%2C4.4%20L63.632%2C38%20L67.376%2C38%20L67.376%2C4.4%20L63.632%2C4.4%20Z%20M85.136%2C38%20L79.568%2C23.504%20L73.952%2C38%20L70.4%2C38%20L77.168%2C20.672%20L70.832%2C4.4%20L74.72%2C4.4%20L79.904%2C17.84%20L85.136%2C4.4%20L88.64%2C4.4%20L82.352%2C20.672%20L89.072%2C38%20L85.136%2C38%20Z%22%20fill%3D%22%23E50914%22%20fill-rule%3D%22nonzero%22%3E%3C/path%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E') !important; | |
} | |
/* 2.2.3 Others */ | |
/* CSS Box */ | |
#txtCustomCss { | |
height: 300px !important; | |
overflow-y: scroll !important; | |
} | |
/* Select Box */ | |
select option { | |
background-color: #2b2b2b !important; | |
color: #ffffff !important; | |
} | |
/* Dialogs */ | |
.formDialogHeader:not(.formDialogHeader-clear), | |
.formDialogFooter:not(.formDialogFooter-clear) { | |
background-color: #121212 !important; | |
color: #fff; | |
} | |
/* Headers */ | |
.skinHeader { | |
background-color: #080808 !important; | |
color: #fff !important; | |
} | |
.skinHeader-withBackground { | |
background-color: #080808 !important; | |
} | |
@supports (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) { | |
.skinHeader-blurred { | |
background: rgba(20, 20, 20, 0.7) !important; | |
-webkit-backdrop-filter: blur(1.5em) !important; | |
backdrop-filter: blur(1.5em) !important; | |
} | |
} | |
.skinHeader.semiTransparent { | |
-webkit-backdrop-filter: none !important; | |
backdrop-filter: none !important; | |
background-color: rgba(0, 0, 0, 0.4) !important; | |
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.7)), color-stop(10%, transparent)) !important; | |
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; | |
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; | |
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; | |
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 10%, transparent) !important; | |
} | |
.appfooter { | |
background: #080808 !important; | |
color: #fff !important; | |
} | |
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { | |
.appfooter-blurred { | |
background: rgba(24, 24, 24, 0.7) !important; | |
-webkit-backdrop-filter: blur(20px) !important; | |
backdrop-filter: blur(20px) !important; | |
} | |
} | |
/* TV Global Modifications */ | |
.emby-tab-button-active.emby-button-tv { | |
color: #fff !important; | |
} | |
.guide-channelHeaderCell, | |
.guide-channelTimeslotHeader { | |
background: #2e2e2e !important; | |
} | |
.guide-programTextIcon { | |
color: #1e1e1e !important; | |
background: #555 !important; | |
} | |
.guide-headerTimeslots { | |
color: #ccc !important; | |
} | |
/* Header Bar Style */ | |
.skinHeader-withBackground { | |
background-color: rgba(0, 0, 0, .90) !important; | |
border-bottom: transparent !important; | |
} | |
.skinHeader.semiTransparent { | |
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, 0.3))) !important; | |
background: -webkit-linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0.3)) !important; | |
background: -o-linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0.3)) !important; | |
background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0.3)) !important; | |
border-bottom: none !important; | |
} | |
/* remove the "get premiere" button */ | |
.btnHeaderPremiere { | |
display: none; | |
} | |
/* make cards more boxy */ | |
.cardBox { | |
margin: 2px; | |
border-radius: 0%; | |
} | |
.cardContent { | |
/*border: 1px solid rgba(40,40,40,.5);*/ | |
border: none; | |
border-radius: 0%; | |
} | |
/* fix the stupid ripple effect */ | |
.paper-icon-button-light>.md-icon { | |
visibility: visible; | |
} | |
.paper-icon-button-light { | |
visibility: hidden; | |
} | |
.headerUserButton { | |
display: none; | |
} | |
.headerManageServerButton { | |
display: none; | |
} | |
/* give the buttons a hover effect */ | |
.emby-button>i:hover, | |
.detailButton-content:hover { | |
-webkit-transition: all 0.1s ease-out; | |
-moz-transition: all 0.1s ease-out; | |
-ms-transition: all 0.1s ease-out; | |
-o-transition: all 0.1s ease-out; | |
transition: all .1s ease-in-out; | |
transform: scale(1.2); | |
-moz-text-shadow: 0 0 5px #222326; | |
-webkit-text-shadow: 0 0 5px #222326; | |
text-shadow: 0px 0px 5px #222326; | |
} | |
.paper-icon-button-light:focus { | |
color: #222326 !important; | |
background-color: rgba(34, 35, 38, .3) !important; | |
} | |
.paper-icon-button-light:hover { | |
-webkit-transition: all 0.1s ease-out; | |
-moz-transition: all 0.1s ease-out; | |
-ms-transition: all 0.1s ease-out; | |
-o-transition: all 0.1s ease-out; | |
transition: all 0.1s ease-in-out; | |
transform: scale(1.2); | |
-moz-text-shadow: 0 0 5px #222326; | |
-webkit-text-shadow: 0 0 5px #222326; | |
text-shadow: 0px 0px 5px #222326; | |
} | |
/* ----- 2.3 Fixes ----- */ | |
/* 2.3.1 Dark Colors */ | |
.autoorganizetable tbody tr:nth-child(odd) td, | |
.autoorganizetable tbody tr:nth-child(odd) th { | |
background-color: #222326 !important; | |
} | |
.autoorganizetable>.table>tbody>tr { | |
border: 1px solid #222326 !important; | |
} | |
/* | |
_____________________________________________________________________ | |
Emby Dark Themes is maintained by Ben Z (BenZuser) | |
with the contribution of Happy2Play. | |
_____________________________________________________________________ | |
*/ | |
/* TEMPORARY FIXES */ | |
/* Links */ | |
.searchSuggestionsList a, | |
.noItemsMessage a, | |
a.lnkPremiere { | |
color: #E81123 !important; | |
} | |
.searchSuggestionsList a:hover, | |
.noItemsMessage a:hover, | |
a.lnkPremiere:hover { | |
color: #9b9b9b !important; | |
} | |
.searchSuggestionsList a:active, | |
.noItemsMessage a:active, | |
a.lnkPremiere:active { | |
color: #94131E !important; | |
} | |
/* change the progress bar and ball color */ | |
.emby-slider-background-lower, | |
.sliderBubble, | |
.emby-slider::-webkit-slider-thumb { | |
background: #E81123 !important; | |
} | |
/*Chrome*/ | |
.emby-slider::-moz-range-thumb, | |
.mdl-slider:active::-moz-range-thumb, | |
.emby-slider::-moz-range-progress, | |
.sliderBubble { | |
background: #E81123 !important; | |
} | |
/*FireFox*/ | |
/* ? */ | |
.subtitleappearance-preview { | |
background: #E81123 !important; | |
} | |
/* Add checkbox color in parameters Menu */ | |
.emby-checkbox:checked+span+span+.checkboxOutline, | |
.itemProgressBarForeground { | |
background-color: #E81123 !important; | |
} | |
/* Add color to icon in home page parameters */ | |
.listItemIcon:not(.listItemIcon-transparent) { | |
background-color: #E81123 !important; | |
} | |
/*Library Show Advanced setting switch*/ | |
.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track { | |
background: rgba(232, 17, 35, .5) !important; | |
} | |
.mdl-switch__input:checked:focus+.mdl-switch__label+.mdl-switch__trackContainer .mdl-switch__focus-helper { | |
-webkit-box-shadow: 0 0 0 1.39em rgba(232, 17, 35, .26) !important; | |
box-shadow: 0 0 0 1.39em rgba(232, 17, 35, .26) !important; | |
background-color: rgba(232, 17, 35, .26) !important; | |
} | |
.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb { | |
background: #E81123 !important; | |
} |
Be very careful installing this CSS. Once you apply it, you'll lose the ability to access your settings page from Emby. Make a copy of the URL to go to your settings.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
.pageTitleWithLogo {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg') !important;
}
You need to remove the existing code