473 lines
13 KiB
CSS
Executable File
473 lines
13 KiB
CSS
Executable File
/* Borrowed from https://rawgit.com/BenZuser/Emby-Web-Dark-Themes-CSS/master/RED/theme.css */
|
|
/*
|
|
_________________________________________________________________________
|
|
------------------------- COLOR HEX & RGB CODES -------------------------
|
|
|
|
RED : #E81123 & (232, 17, 35)
|
|
DARK COLOR : #94131E
|
|
|
|
ORANGE : #FF8000 & (255, 128, 0)
|
|
DARK COLOR : #BF6000
|
|
|
|
ORANGE PLEX : #CC7B19 & (204, 123, 25)
|
|
DARK COLOR : #B35A00
|
|
|
|
YELLOW : #BDBD00 & (189, 189, 0)
|
|
DARK COLOR : #757500
|
|
|
|
GREEN : #52B54B & (82, 181, 75)
|
|
DARK COLOR : #3E8437
|
|
|
|
BLUE : #4285F4 & (66, 133, 244)
|
|
DARK COLOR : #0C57D6
|
|
|
|
BLUE DARK : #3367d6 & (51,103,214)
|
|
BLUE DARK (DARK) : #1f4698
|
|
|
|
PURPLE : #673AB7 & (103, 58, 183)
|
|
DARK COLOR : #3F2471
|
|
|
|
GRAY : #7F7F7F & (127, 127, 127)
|
|
DARK COLOR : #535353
|
|
|
|
PINK : #F707DF & (247, 7, 223)
|
|
DARK COLOR : #C604B3
|
|
|
|
*/
|
|
/*
|
|
_________________________________________________________________________
|
|
----------------------- EMBY THEME : ACCENT COLORS ----------------------
|
|
|
|
---------- 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
|
|
|
|
*/
|
|
/* ------------------------ 1. ACCENT COLORS ------------------------- */
|
|
/* ----- 1.1 Buttons ----- */
|
|
/* 1.1.1 Checkboxes */
|
|
.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxOutlineTick {
|
|
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; }
|
|
|
|
/* ----- 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; }
|
|
|
|
/* 2.2.2 Logos */
|
|
/* Login Page */
|
|
.imgLogoIcon {
|
|
content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/RED/logo.png) !important; }
|
|
|
|
/* Main Drawer Mobile */
|
|
.adminDrawerLogo img {
|
|
content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/RED/logo.png) !important; }
|
|
|
|
/* Home Page */
|
|
.pageTitleWithLogo {
|
|
background-image: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/RED/logo.png) !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; }
|
|
|
|
/* ----- 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; }
|