BASE - Dark Theme.scss

/* 
_________________________________________________________________________
------------------------- 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: $accent-color !important; }
	
.emby-checkbox:checked+span+span+.checkboxOutline,
.progressring-spiner {
    border-color: $accent-color !important; }

.emby-checkbox:focus+span+.emby-checkbox-focushelper {
    background-color: $accent-color !important;
    opacity: 0.26 !important; }

/* 1.1.2 Rectangles */	
.raised {
    background: #404040 !important;
    color: #fff !important; }

.button-submit, .button-accent {
    background: $accent-color !important;
    color: #fff; }
	
.raised-mini.emby-button {
  background: $accent-color !important;
  color: #ffffff !important; }
  
/* Restart */
.btnRestartContainer.emby-button {
    background: $accent-color !important;
    color: #fff; }

/* Play & Resume */
.btnPlaySimple.emby-button {
    background: $accent-color !important;
    color: #fff; }
	
.btnResume.emby-button {
    background: $accent-color-dark !important;
    color: #fff; }

/* 1.1.3 Links & Text buttons */
.button-link, .button-flat-accent, .button-accent-flat, 
.textlink {
    color: $accent-color !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: $accent-color-dark !important; }	
	
/* Top Header */
.emby-tab-button-active {
    color: $accent-color !important; }
	
/* 1.1.4 Others */
/* Alpha Picker */
.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
    background-color: $accent-color !important;
    color: #fff !important; }
	
/* Radio Buttons */	
.mdl-radio__inner-circle {
    background: $accent-color !important; }
	
.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
    border: 2px solid $accent-color !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($red,$green,$blue,.26) !important;
    box-shadow: 0 0 0 10px rgba($red,$green,$blue,.26) !important; }

/* Control Group Buttons */
div[data-role="controlgroup"] a.ui-btn-active[data-role='button'] {
    background: $accent-color !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: $accent-color !important; }

.scheduledTaskPaperIconItem[data-status="Running"] i.listItemIcon.md-icon {
    background-color: $accent-color-dark !important; }

/* Focus Helper circles */
.paper-icon-button-light:focus {
    color: $accent-color !important; }
	
/* 1.2.2 Indicators */
.countIndicator, .playedIndicator {
    background: $accent-color !important; }

.levelNormal {
    background-color: $accent-color !important; }
	
.fullSyncIndicator {
    background: $accent-color !important;
    color: #fff; }

.playstatebutton-played i, .ratingbutton-withrating i {
    color: $accent-color !important; }
	
p#pUpToDate i.md-icon {
	background-color: $accent-color !important; }
	
/* Loading Spinners */
.mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3,
.mdl-spinner__layer-4 {
	border-color: $accent-color !important; }
	
.progressring-spiner {
     border: .25em solid $accent-color !important; }
	 
/* 1.2.3 Fonts */
.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
    color: $accent-color !important; }
	
.secondary.listItemBodyText span, div#divRunningTasks span {
    color: $accent-color !important; }
	
/* 1.2.4 Icons */
.starIcon, .mediaInfoTimerIcon {
    color: $accent-color !important; }

/* Top Header */
.btnActiveCast {
    color: $accent-color !important; }

/* Now Playing Bar & Now Playing Page */
.repeatActive, 
button.btnCommand.repeatToggleButton.autoSize.nowPlayingPageRepeatActive {
    color: $accent-color !important; }
	
/* 1.2.5 Dialogs & Action Sheets */
/* 1.2.6 Others */
/* General Accent Color Modifications */
:focus {
	outline: $accent-color auto 5px; }
	
select:focus {
    border-color: $accent-color !important; }
	
::selection {
	background-color: $accent-color-dark !important; }

.emby-input:focus, .emby-textarea:focus {
	border-color: $accent-color !important; }
	
/* Google Now Playing Bar & Now Playing Page */
.iconOsdProgressInner, .mdl-slider__background-lower, .sliderBubble, 
.mdl-slider::-webkit-slider-thumb {
	background: $accent-color !important; }

.mdl-slider:focus::-webkit-slider-thumb {
   -webkit-box-shadow: 0 0 0 10px rgba($red,$green,$blue,.26);
   box-shadow:0 0 0 10px rgba($red,$green,$blue,.26) !important; }
   
/* Firefox Now Playing Bar & Now Playing Page */
.mdl-slider::-moz-range-thumb, .mdl-slider::-moz-range-progress {
    background: $accent-color !important; }	

.mdl-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 10px rgba($red,$green,$blue,.26) !important; }
	
/* Progress Bars */
.itemProgressBarForeground {
    background-color: $accent-color !important; }
	
.taskProgressInner {
  background: $accent-color !important; }

/* Google Progress Bars */
progress::-webkit-progress-value {
  background: $accent-color !important; }

/* Firefox Progress Bars */
progress::-moz-progress-bar {
  background: $accent-color !important; }
  
/* Edge Progress Bars */
 progress {
  background: $accent-color !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: $accent-color !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: $accent-color !important; }

/* Multi-select */
.itemSelectionPanel {
    border: 1px solid $accent-color !important; }

.selectionCommandsPanel {
    background: $accent-color !important;
    color: #fff; }

/* upNextDialog */
.upNextDialog-countdownText {
    color: $accent-color !important; }
	
/* Selection Bars */
.emby-select-selectionbar, .emby-textarea-selectionbar,
.emby-input-selectionbar {
    background-color: $accent-color !important; }

/* Media Info Detail Image */
.itemDetailImage.loaded:hover {
    border: 1px solid $accent-color !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($logo) !important; }
	
/* Main Drawer Mobile */
.adminDrawerLogo img {
	content: url($logo) !important; }

/* Home Page */
.pageTitleWithLogo {
    background-image: url($logo) !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,.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,.4) !important;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,rgba(0,0,0,.7)),color-stop(10%,rgba(0,0,0,0))) !important;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7) 10%,rgba(0,0,0,0)) !important;
    background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 10%,rgba(0,0,0,0)) !important;
    background-image: -o-linear-gradient(top,rgba(0,0,0,.7) 10%,rgba(0,0,0,0)) !important;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.7) 10%,rgba(0,0,0,0)) !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,.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: $accent-color !important; }
	
.searchSuggestionsList a:hover, .noItemsMessage a:hover,
a.lnkPremiere:hover {
    color: #9b9b9b !important; }
	
.searchSuggestionsList a:active, .noItemsMessage a:active,
a.lnkPremiere:active {
    color: $accent-color-dark !important; }