deezer-dark-comfort.user.css

/* ==UserStyle==
@name           Deezer dark comfort
@namespace      github.com/locness3/userstyles
@version        0.3.0
@description    Dark theme for Deezer
@author         Locness
==/UserStyle== */

@-moz-document domain("deezer.com") {
  
  /* Variables */
  
  :root {
    
    /* Style colors */
    
    --bg-color: #212431;
    --border-color: #3a3e4f;
    --depth-color: #191b25;
    --shadow-color: #0e1016;
    --text-color: #eee;
    --secondary-color: #ffffffbf;
    
    /* Below variables are Deezer's internal variables, which we overrride with the style colors defined above */
    
    /* Backgrounds */
    
    --main-background-color: var(--bg-color);
    --default-background-color: var(--bg-color);
    --sidebar-background-color: var(--bg-color);
    --player-background-color: var(--bg-color);
    --lyrics-gradient-color: var(--bg-color);
    
    /* Hover colors */
    
    --default-hover-color: var(--border-color);
    --main-hover-color: var(--border-color);
    --datagrid-row-hover-color: var(--border-color);
    
    /* Border colors */
    
    --default-border-color: var(--border-color);
    --main-border-color: var(--border-color);
    --secondary-border-color: var(--border-color);
    --sidebar-border-color: var(--border-color);
    --slide-border-color: var(--border-color);
    --datagrid-border-color: var(--border-color);
    --slider-track-default-color: var(--border-color);
    
    /* Main text colors */
    
    --main-text-color: var(--text-color);
    --lyrics-active-color: var(--text-color);
    
    /* Defualt and secondary text colors */
    
    --default-text-color: var(--secondary-color);
    --lyrics-color: var(--secondary-color);
    --secondary-text-color: var(--secondary-color)
  }
  
  /* Sidebar */
  
  .logo-deezer-black {
	  background-image: url("https://e-cdns-files.dzcdn.net/cache/slash/images/common/logos/deezer_white.d183117d35d9c9e3717604422ac09c95.png");
	  height: 24px;
	  width: 117px;
  }
  
  /* Topbar */
  
  .page-topbar .topbar-search-clear {
    color: var(--text-color);
    background-color: transparent;
  }
  
  .topbar-search-clear:hover {
    background-color: var(--border-color) !important;
  }
  
  /* Player */
  
  .page-player .popper-player-settings .setting-info, .page-player .popper-player-settings .setting-notice {
    color: var(--secondary-color);
  }
  
  /* Player windows (lyrics, queue...) */
  
  .page-player .lyrics-line.is-oneline {
    color: var(--text-color);
  }
  
  .page-player .lyrics-gradient.is-top {
    background-image: linear-gradient(0deg,hsla(0, 0%, 100%, 0),#212431) !important;
  }
  
  .page-player .lyrics-gradient.is-bottom {
    background-image: linear-gradient(0deg,#212431,hsla(0,0%,100%,0));
  }
  
  /* Headings and Sub-Headings */
  
  .thumbnail-grid-title {
    color: var(--text-color) !important;
  }
  
  /* Poppers */
  
  .popper-content {
    color: var(--text-color);
  }
  
  .page-topbar .popper-search .nano-card-item {
    background-color: inherit;
  }
  
  .page-topbar .popper-search .nano-card-item:hover {
    background-color: var(--depth-color);
  }
  
  .page-topbar .popper-account .account-menu, .page-topbar .popper-account .account-item.is-divider {
    border-color: var(--border-color);
  }
  
  .page-contextmenu .menu-item, .page-contextmenu .menu-item:hover {
    color: var(--secondary-color);
  }
  
  .page-contextmenu .menu-item:hover > .icon {
    color: var(--secondary-color);
  }
  
  .page-contextmenu .menu-item.link:hover {
    background-color: var(--depth-color);
  }
  
  /* Buttons */
  
  .create-assistant-container:hover {
    background-color: var(--depth-color);
  }
  
  .c0110,.c01213:not(.c01221){
    background-color: var(--depth-color);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  
  .c0110:not(.c0124):hover, .c01213:not(.c01221):hover, .c01235:not(.c01221) {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color);
  }
  
  .c0110:not(.c0124):active {
    background-color: var(--depth-color);
  }
  
  .btn-view-more {
    background-color: var(--border-color);
  }
  
  .btn-view-more:hover {
    background-color: var(--depth-color);
  }
  
  .btn-view-more .label, .btn-view-more::after {
    color: var(--secondary-color);
  }
  
  .thumbnail .action-item-btn {
    background-color: var(--bg-color);
    color: white;
  }
  
  /* Text inputs */
  
  .form-control {
    background-color: var(--bg-color);
    border-color: var(--border-color) !important;
  }
  
  /* Channels/Home slides */
  
  .slide:not(.is-bg-full-img), .slide-cut {
    color: var(--text-color);
  }
  
  .slide.slide-cut .slide-covers::after {
    background-color: var(--bg-color);
    border-color: var(--border-color);
  }
  
  /* Profile */
  
  #page_profile .profile-header-container {
    border-bottom: 1px solid var(--border-color);
  }
  
  #page_profile .placeholders-container .placeholders-title {
    color: var(--heading-color);
  }
  
  /* Search results (looks like we don't need those anymore) */
  
  /* .page-naboo-search .suggest-column .nano-card-item, .page-naboo-search .suggest-column .nano-card-item:hover {
    background-color: var(--bg-color);
  }
  
  .page-naboo-search .suggest-column .nano-card-item {
    box-shadow: 0 1px 7px var(--shadow-color);
  }
  
  .page-naboo-search .suggest-column .nano-card-item:hover {
    box-shadow: 0 3px 7px var(--shadow-color);
  } */
  
}