spicetify-themes/Sleek/user.css

/* Version 14/10/21 */

.encore-dark-theme .encore-bright-accent-set {
  --background-highlight: var(--spice-play-button);
  --background-press: var(--spice-play-button);
  --background-base: var(--spice-play-button);
}

/* TOPBAR */

/* fix topbar bug */
.main-entityHeader-topbarContent.main-entityHeader-topbarContentFadeIn > * {
  opacity: unset !important;
}

/* unset colors of history buttons */
.main-topBar-historyButtons .main-topBar-button {
  background-color: unset;
}

/* change appearance of search icon on 'search' tab */
.x-searchInput-searchInputSearchIcon svg {
  color: var(--spice-text);
  height: 17px !important;
  stroke: var(--spice-text);
}

/* change appearance of x icon on 'search' tab */
.x-searchInput-searchInputClearButton {
  color: var(--spice-text);
}

[role='searchbox']::placeholder {
  color: rgba(var(--spice-rgb-text), 0.5);
}

/* add topbar transition */
.queue-tabBar-headerItemLink {
  transition-duration: 0.15s;
}

/* remove topbar background colour */
.main-topBar-background {
  background-color: unset !important;
}

/* resize play-button on topbar */
.main-topBar-overlay {
  background-color: var(--spice-player);
}


.main-topBar-topbarContent .main-playButton-primary {
  --size: 35px !important;
}

/* simplify profile menu */
.main-userWidget-displayName,
.main-userWidget-notificationIndicator {
  display: none;
}

.main-avatar-userIcon {
  color: white;
}

.main-userWidget-box {
  color: var(--spice-subtext);
  background-color: transparent !important;
}

.main-userWidget-chevron {
  display: none;
}

/* NAVBAR */

/* navbar bug fix */
ul.main-navBar-entryPoints > div.GlueDropTarget{
  padding: 0 8px;
}
ul.main-navBar-entryPoints > div.GlueDropTarget >* {
  padding: 0 16px;
  height: 40px;
  border-radius: 4px;
}
ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
  background: var(--spice-card);
}

/* remove divider gradient */
.main-rootlist-rootlistDividerGradient {
  display: none;
}

/* change color of divider */
.main-rootlist-rootlistDivider {
  background-color: rgba(var(--spice-rgb-button-disabled), 0.8);
}

/* add gradient to navbar */
.Root__nav-bar {
  background-image: linear-gradient(
    to bottom left,
    var(--spice-sidebar) 0%,
    var(--spice-player) 100%
  ) !important;
}

/* change color of navbar playing icon */
[aria-label='Playing'] {
  color: var(--spice-text);
}

/* change color of navbar icons */
.main-likedSongsButton-likedSongsIcon {
  background: var(--spice-text);
  color: var(--spice-sidebar);
}

.main-yourEpisodesButton-yourEpisodesIcon {
  background: var(--spice-text);
}

.main-yourEpisodesButton-yourEpisodesIcon path {
  fill: var(--spice-sidebar);
}

/* remove opacity of navbar buttons */
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, .main-createPlaylistButton-button {
  opacity: unset;
}

/* change top margin of navbar options */
.main-navBar-entryPoints > div:first-of-type {
  margin-top: 20px;
}
/* change colors of active tab */
.main-navBar-navBarLinkActive {
  background-color: var(--spice-nav-active);
}

.main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus,
.main-navBar-navBarLinkActive:hover {
  color: var(--spice-nav-active-text) !important;
  transition: none;
}


/* PLAYBACK-BAR */

/* shift bar up when connect bar is visible */
.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar {
  bottom: 107px;
}

/* revert playback bar position when in full-screen mode */
._U2P19b627vsKWCNNffn .playback-bar {
  bottom: auto;
}

/* round cover art when collapsed */
.main-coverSlotCollapsed-container .cover-art-image {
  border-radius: 10%;
  transition-duration: 0.15s;
}

.main-coverSlotExpandedCollapseButton-collapseButton {
  right: 10px !important;
  top: 10px !important;
}

/* hide and move progress time location */
.playback-bar__progress-time-elapsed {
  opacity: 0;
  position: absolute;
  bottom: 13px;
  left: 0;
  transition-duration: 0.15s;
}

.main-playbackBarRemainingTime-container {
  opacity: 0;
  position: absolute;
  bottom: 13px;
  right: 0;
  transition-duration: 0.15s;
}

/* show time on hover */
.playback-bar:hover .playback-bar__progress-time-elapsed,
.playback-bar:hover .main-playbackBarRemainingTime-container {
  opacity: 1;
}

/* move progress bar */
.playback-bar {
  width: 100%;
  bottom: 83px;
  position: absolute;
}

.player-controls__buttons {
  transform: translateY(3px);
  align-items: center;
}

/* change progress bar color */
.playback-bar .progress-bar__fg {
  background-color: var(--spice-playback-bar);
}

/* change appearance of play-button */
.main-playPauseButton-button {
  background-color: inherit;
  color: var(--spice-text);
  transition-duration: 0.15s !important;
}

.main-playPauseButton-button svg {
  height: 19px;
  width: 19px;
}

.main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
}

/* change progress bar slider color */
.progress-bar__slider {
  background-color: var(--spice-subtext);
}

/* BUDDY FEED */

/* change text color */
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
p.main-buddyFeed-timestamp.main-type-finale,
.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
  color: var(--spice-subtext);
}

/* add gradient */
.main-buddyFeed-buddyFeed {
  background-image: linear-gradient(
    to bottom left,
    var(--spice-sidebar) 0%,
    var(--spice-player) 100%
  ) !important;
}

/* hide buddyfeed scrollbar */
.main-buddyFeed-scrollableArea > .os-scrollbar {
  display: none;
}

/* MAIN */


/* hide banner ads */
.main-leaderboardComponent-container {
  display: none;
}

.WiPggcPDzbwGxoxwLWFf.contentSpacing {
  display: none;
}

.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
  display: none !important;
}

/* hide upgrade button */
.main-topBar-UpgradeButton {
  display: none;
}

/* change input box appearance */
input {
  background-color: var(--spice-main-secondary) !important;
  border-bottom: solid 1px var(--spice-text) !important;
  border-radius: 0 !important;
  padding: 6px 10px 6px 48px;
  color: var(--spice-text) !important;
}

/* remove background color from main headers */
.main-home-homeHeader,
.x-441-entityHeader-overlay,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
  background-color: unset !important;
  background-image: unset !important;
}

/* change playlist image shadow */
.main-entityHeader-shadow {
  box-shadow: 0 5px 10px rgba(var(--spice-rgb-shadow), 0.5) !important;
}

/* change playlist image border-radius */
.main-entityHeader-image {
  border-radius: 10%;
}

/* change playing icon from gif to svg */
.main-trackList-playingIcon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
  background: var(--spice-button);
  content-visibility: hidden;
  -webkit-mask-repeat: no-repeat;
}

/* change appearance of 'playlist' tag  */
.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
  border: 2px var(--spice-text) solid;
  border-radius: 3px;
  width: fit-content;
  display: inline;
  text-align: center;
  padding: 0 5px;
}

/* change scrollbar appearance */
.os-theme-spotify.os-host-transition
  > .os-scrollbar-vertical
  > .os-scrollbar-track
  > .os-scrollbar-handle {
  border-radius: 4px;
  width: 6px;
  background-color: var(--spice-button-disabled)
}

.os-theme-spotify.os-host-transition
  > .os-scrollbar-vertical
  > .os-scrollbar-track {
  width: 6px;
}

/* add border under header row */
.main-trackList-trackListHeaderRow {
  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}

/* change appearance of main/topbar play-button */
.main-playButton-PlayButton.main-playButton-primary {
  color: var(--spice-main);
  background-color: var(--spice-play-button);
  box-shadow: var(--spice-shadow) 0 5px 4px 0px;
  transition-duration: 0.15s !important;
}

/* change appearance of download button */
.x-downloadButton-button {
  box-shadow: var(--spice-shadow) 0 5px 4px 0px;
  background: var(--spice-player);
  border-radius: 50%;
}

/* change text color on category cards in 'search' tab */
a.x-categoryCard-CategoryCard, 
a.x-heroCategoryCard-HeroCategoryCard {
  color: var(--spice-subtext);
}

/* recolor sub-buttons */
.main-moreButton-button {
  color: var(--spice-button-secondary);
}

.x-downloadButton-button {
  color: var(--spice-button-secondary) !important;
}

.x-downloadButton-button:hover {
  color: var(--spice-text) !important;
}

.main-addButton-button {
  color: var(--spice-button-secondary);
}

.main-entityHeader-metaDataText {
  color: var(--spice-button-secondary);
}

.x-sortBox-sortDropdown {
  background-color: var(--spice-main-secondary) !important;
}

.x-filterBox-searchIconContainer {
  color: var(--spice-button-secondary) !important;
}

.x-filterBox-expandButton:focus,
.x-filterBox-expandButton:hover {
  background-color: var(--spice-main-secondary) !important;
}

.x-sortBox-sortDropdown,
.x-filterBox-expandButton {
  color: var(--spice-text) !important;
}

/* change background color of 'home' tab shortcut items */
.view-homeShortcutsGrid-shortcut {
  background-color: rgba(var(--spice-rgb-main-secondary), .3) !important;
}

.view-homeShortcutsGrid-shortcut:focus-within,
.view-homeShortcutsGrid-shortcut:hover,
.view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
  background-color: rgba(var(--spice-rgb-main-secondary), .5) !important;
}

/* 'see more' button fix */

.artist-popularTrackList-seeMore {
  color: rgba(var(--spice-rgb-text), 0.7);
}

/* card background color for editing playlist details */
.main-playlistEditDetailsModal-descriptionTextarea {
  background: var(--spice-main-secondary);
}

.main-playlistEditDetailsModal-textElementLabel {
  display: none;
}

/* change color of search icon for new playlists */
.playlist-inlineSearchBox-searchIcon {
  fill: var(--spice-text) !important;
}

/* change appearance of verified artist badge */
.artist-artistVerifiedBadge-badge {
  border: 2px solid var(--spice-text);
  border-radius: 3px;
  width: fit-content;
  text-align: center;
  padding: 0 5px;
}

span.artist-artistVerifiedBadge-badge path:nth-child(1) {
  display: none;
}

span.artist-artistVerifiedBadge-badge path:last-child {
  fill: var(--spice-text) !important;
  stroke: var(--spice-text);
}

.artist-artistVerifiedBadge-badge span {
  font-weight: bold;
}

/* change text color of hero card on 'library' tab */
.main-heroCard-card a,
.collection-collectionEntityHeroCard-descriptionContainer {
  color: var(--spice-subtext) !important;
}

/* CONTEXT MENU */


/* change hover color when selecting in context menu */
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
  background-color: rgba(0,0,0,.2) !important;
}

.main-contextMenu-menuItemButton[aria-expanded=true] {
  background-color: rgba(0,0,0,.2) !important;
}

/* disabled options */
.main-contextMenu-disabled > span {
  color: rgba(var(--spice-rgb-text), 0.5);
}

/* dividers between option subgroups */
.main-contextMenu-menuItem:not(:first-child)
  > .main-contextMenu-dividerBefore:before {
  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.5);
}

/* confirmation box appearance fixes */
.main-deleteFolderDialog-buttonContainer,
.main-deletePlaylistDialog-buttonContainer {
  justify-content: space-between !important;
}

.main-deletePlaylistDialog-container {
  background-color: var(--spice-player);
}

.main-deletePlaylistDialog-container > *:not(div) {
  color: var(--spice-text);
}

.main-deletePlaylistDialog-buttonContainer > *:not(div) {
  color: var(--spice-text);
}

.main-button-primary:hover {
  background-color: var(--spice-button);
}

.main-button-primary {
  color: white !important;
}

/* change colors on 'duplicate track' dialog */
.main-duplicateTracksDialog-container {
  background-color: var(--spice-card);
  color: var(--spice-subtext);
}

.main-duplicateTracksDialog-secondaryButton {
  color: var(--spice-text);
}

/* TRACKS GRID */


/* change color of track titles */
.main-trackList-rowTitle {
  color: var(--spice-subtext);
}

/* change color of 'explicit' badge */
.main-tag-container {
  background-color: var(--spice-subtext);
}

/* change background color of selected row */
.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
  background-color: rgba(var(--spice-rgb-main-secondary), 0.6) !important;
}

.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
  background-color: rgba(var(--spice-rgb-main-secondary), 0.4);
}

/* When song is currently playing */
.main-trackList-active .main-type-mesto,
.main-trackList-active .main-trackList-rowSubTitle,
.main-trackList-active .main-trackList-rowSubTitle a,
.main-trackList-active .main-trackList-rowMarker,
.main-trackList-active .main-trackList-rowSectionVariable,
.main-trackList-active .main-trackList-rowSectionVariable a,
.main-trackList-active .main-trackList-rowSectionVariable span,
.main-trackList-active .main-trackList-rowMarker,
.main-trackList-active .main-trackList-rowDuration {
  color: var(--spice-button) !important;
}

.main-trackList-active .main-tag-container {
  background-color: var(--spice-button);
}

/* When song is hovered/selected */
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active) 
  .main-tag-container,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active) 
  .main-tag-container {
  background-color: var(--spice-text);
}

.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
  .main-trackList-rowTitle,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
  .main-trackList-rowTitle {
  color: var(--spice-text);
}

.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
  .main-trackList-rowSubTitle,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
  .main-trackList-rowSubTitle {
  color: var(--spice-text) !important;
}

.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
  .main-trackList-rowSubTitle a,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
  .main-trackList-rowSubTitle a {
  color: unset !important;
}

.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
  .main-trackList-rowSectionVariable a,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
  .main-trackList-rowSectionVariable a {
    color: var(--spice-text) !important;
}


/* NOTIFICATION */


._9eb5acf729a98d62135ca21777fef244-scss {
  color: var(--spice-card);
}



/* TEMPORARY */

/* change delete playlist dialog box colors */
.K8PtC1Way9XetxDGwCGx {
  background-color: var(--spice-card);
}

.K8PtC1Way9XetxDGwCGx > *:not(div) {
  color: var(--spice-text);
}

.awGNDbf1c8TGBAFR0pv8 > *:not(div) {
  color: white;
}

.main-deleteFolderDialog-buttonContainer,
.reDC8RlgDXoQ_bz0umLz {
  justify-content: space-between !important;
}

/* change appearance of verified artist badge */
.Ov0avbbVFKCQwhi1UwYi {
  border: 2px solid var(--spice-text);
  border-radius: 3px;
  width: fit-content;
  text-align: center;
  padding: 0 5px;
}

span.Ov0avbbVFKCQwhi1UwYi path:nth-child(1) {
  display: none;
}

span.Ov0avbbVFKCQwhi1UwYi path:last-child {
  fill: var(--spice-text) !important;
  stroke: var(--spice-text);
}

.Ov0avbbVFKCQwhi1UwYi span {
  font-weight: bold;
}

/* change progress bar color */
.epWhU7hHGktzlO_dop6z {
  background-color: var(--spice-playback-bar) !important;
}

.player-controls__buttons.player-controls__buttons--new-icons div svg{
  width: 14px;
  height: 14px;
}

.fGLwlk:active .ButtonInner-sc-14ud5tc-0,
.fGLwlk:hover .ButtonInner-sc-14ud5tc-0  {
  background-color: var(--spice-play-button);
}

span.ellipsis-one-line.main-type-mestoBold {
  font-weight: 700;
  font-size: 0.875rem;
}

.UyzJidwrGk3awngSGIwv {
  color: inherit;
}

.fcehhQ {
  color: inherit;
}

.icon.collection-icon svg {
  stroke: var(--spice-subtext);
  stroke-width: 10px;
}

:hover > .icon.collection-icon svg {
  stroke: var(--spice-button-secondary);
  stroke-width: 10px;
}

.wCl7pMTEE68v1xuZeZiB,
._bjbHn5TABOW2s5LsEGX,
.HbKLiGoYM4dpuK8L4TMX,
.w6j_vX6SF5IxSXrrkYw5  {
  color: var(--spice-button-secondary);
}

.bRkxrs {
  color: var(--spice-subtext);
}

.x-sortBox-sortDropdown {
  background-color: var(--spice-main-secondary) !important;
}

.Z35BWOA10YGn5uc9YgAp:focus-within,
.Z35BWOA10YGn5uc9YgAp:hover,
.Z35BWOA10YGn5uc9YgAp[data-context-menu-open='true'] {
  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}

.Z35BWOA10YGn5uc9YgAp {
  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
}

.main-card-card:hover, .main-card-card[data-context-menu-open=true] {
  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}

.main-card-card {
  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
}

.CbHJjxYxldG7uUPMYMaP {
  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}

.Z35BWOA10YGn5uc9YgAp {
  transition: none;
}

.main-card-card {
  transition: none;
}

img.main-image-image.CmkY1Ag0tJDfnFXbGgju.main-entityHeader-shadow {
  border-radius: 7%;
}

/* change appearance of 'playlist' tag  */
.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
  border: 2px var(--spice-text) solid;
  border-radius: 3px;
  width: fit-content;
  display: inline;
  text-align: center;
  padding: 3px 7px;
}

.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW {
  top: 9px;
  left: 9px;
}

.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW svg {
  height: 20px;
  width: 20px;
}

.main-topBar-topbarContent .ButtonInner-sc-14ud5tc-0.cSeieV.encore-bright-accent-set {
  width: 38px;
  height: 38px;
}

.x-progressBar-progressBarBg, .w699O0LgQRghXyl3bs9u {
  border-radius: 0;
}