spicetify-themes/Dreary/user.css

/* Dreary Theme*/
.main-rootlist-rootlistDividerGradient {
    display: none;
    visibility: hidden !important;
}
.main-rootlist-rootlistDivider{
    background-color: var(--spice-text) !important;
}
input {
    background-color: unset !important;
    border-bottom: solid 1px var(--spice-text) !important;
    border-radius: 0 !important;
    padding: 6px 10px 6px 48px;
    color: var(--spice-text) !important;
}

.x-833-searchInput-searchInputSearchIcon {
    color: var(--spice-text) !important;
}

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

.main-playlistEditDetailsModal-textElement:focus {
    border: 0;
}

.connect-title, .connect-header {
    display: none;
}

/* Topbar visibility bug */

.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
    opacity: unset !important;
}

.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
    opacity: 0 !important;
}

/* Remove Topbar background colour */

.main-topBar-background {
    background-color: unset !important;
}

.main-topBar-overlay {
    background-color: var(--spice-main);
}

.main-entityHeader-shadow {
    box-shadow: 0 04px 20px #21212130;
}

.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-text);
  content-visibility: hidden;
}

span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
    fill: black;
}

/* Hide Banner Ads */

.main-leaderboardComponent-container {
    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;
}

[aria-label="Playing"] {
    color: var(--spice-text);
}

/* Fix design fault */

@media (min-width: 1024px) {
.main-trackList-trackListHeader {
    border-bottom: solid 1px;
    margin: 10px;
}
}

.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
    background: var(--spice-main);
    border: 0;
}

.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8);
}

/* Changing Playback Bar Location */

.progress-bar__bg, .progress-bar__fg_wrapper {
    border-radius: 0;
    z-index:1;
}

.playback-bar__progress-time {
    display: none;
}

.playback-bar {
    width: 100%;
    bottom: 83px;
    position: absolute;
    left: -1px;
    z-index:1;
}

.main-playbackBarRemainingTime-container {
    position: absolute;
    left: 49.68%;
    top: 60%;
    border: solid 1px;
    border-radius: 20px;
    z-index:-1;
    color: var(--spice-subbutton-text) !important;
}

.player-controls__buttons {
    transform: translateY(6px);
}

.main-playPauseButton-button {
    background-color: var(--spice-main);
    box-shadow: var(--spice-shadow) 0 5px 9px 0px;
    --button-size: 50px !important;
    color: var(--spice-text);
    background-color: var(--spice-player) !important;
    cursor: pointer;
}

.player-controls__buttons {
    align-items: center;
    margin-left:250px;
}

.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
    border: 2px var(--spice-text) solid;
    border-radius: 4px;
    width: fit-content;
    display: inline;
    text-align: center;
    padding: 0 5px;
}

.os-theme-spotify.os-host-transition>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle {
    border-radius: 4px;
    background-color: var(--spice-text);
}

/* Hide Profile Options in Nav Bar */

.main-userWidget-displayName, .main-userWidget-notificationIndicator {
    display: none;
}

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

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

/* Improve Sidebar Buttons */

.main-likedSongsButton-likedSongsIcon {
    background: var(--spice-text);
}

.main-likedSongsButton-likedSongsIcon {
    color: var(--spice-sidebar);
}

.main-trackList-trackListHeaderRow {
    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8)

}

.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8);
}

.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
    background-color: rgba(var(--spice-rgb-selected-row), .8) !important;
}

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

.main-duplicateTracksDialog-container {
    background-color: var(--spice-card);
    color: var(--spice-subtext);
}

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

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

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

/* Main Play Button Change */

.main-playButton-PlayButton.main-playButton-primary {
    color: var(--spice-main);
    background-color: var(--spice-playback-bar);
    box-shadow: var(--spice-shadow) 0 5px 4px 0px;
    cursor: pointer !important;
}

.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) {
    display: none;
}

.main-entityHeader-image {
    border-radius: 10%;
}

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

/* Link playback-bar color */

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

:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
    background-color: var(--spice-playback-bar);
}

.main-navBar-navBarLinkActive {
    background-color: var(--spice-main);
}

.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .logo {
    color: var(--spice-button-text) !important;
}

.progress-bar__slider {
    opacity: 1;
    background-color: var(--spice-sidebar);
    height: 16px;
    border: solid 2px var(--spice-subtext);
    width: 16px;
}

a.x-categoryCard-CategoryCard, a.x-heroCategoryCard-HeroCategoryCard {
    color: var(--spice-subtext);
}

.main-heroCard-card a, .collection-collectionEntityHeroCard-descriptionContainer {
    color: var(--spice-subtext) !important;
}

.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);
}

/* Recolor sub-buttons */

.main-moreButton-button {
    color: var(--spice-sub-button);
}

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

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

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

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

.main-duration-container {
    color: var(--spice-sub-button);
}

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

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

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

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

.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
    background-color: var(--spice-selected-row) !important;
}

.view-homeShortcutsGrid-shortcut {
    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
}

.view-homeShortcutsGrid-shortcut:focus-within, .view-homeShortcutsGrid-shortcut:hover, .view-homeShortcutsGrid-shortcut[data-context-menu-open=true] {
    background-color: var(--spice-selected-row) !important;
}

.main-rootlist-textWrapper.main-type-viola {
    cursor: pointer !important;
}

.main-navBar-navBar {
    border-right: 2px solid var(--spice-misc);
}

.cMigZB * {
    color: var(--spice-misc) !important;
}

.main-trackInfo-name a {
    color: var(--spice-misc) !important;
}

.main-trackInfo-artists a:link {
    color: var(--spice-misc) !important;
}

[class*=" spoticon-"]:before {
    color: var(--spice-misc) !important;
}

.main-connectToFacebook-headerTitle {
    color: var(--spice-misc) !important;
}

.main-cardSubHeader-root, .main-cardHeader-text {
    color: var(--spice-shadow) !important;
}

.main-buttons-button {
    color: var(--spice-subbutton-text) !important;
}

.main-repeatButton-button, .main-skipForwardButton-button, .main-skipBackButton-button, .main-shuffleButton-button {
    cursor: pointer !important;
}

#spicetify-playlist-list {
    display: inline;
    height: 10%;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    left: -40px;
    top: 50px;
    overflow: hidden;
    overflow-y: scroll;
}

#spicetify-playlist-list>li {
    margin: 4px 3.2vw;
    width: 90%;
    flex-shrink: 0;
    padding-top: 10%;
    padding-bottom: 10%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 2px solid var(--spice-text);
    display: flex;
    text-align: center;
    flex-direction: column;
    transition: all 500ms;
}

#spicetify-playlist-list>li:hover {
    border-color: var(--spice-button);
}

.main-rootlist-textWrapper {
    overflow: auto !important;
    text-overflow: unset !important;
    white-space: pre !important;
}

.main-connectToFacebook-text, .main-connectToFacebook-disclaimer {
    color: unset !important;
}

.main-type-mesto {
    color: var(--spice-button);
}

svg[Attributes Style] {
    fill: var(--spice-subtext);
}

.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink {
    transition: 500ms;
}

.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink:focus {
    color: var(--spice-text);
}

.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected {
    color: var(--spice-subbutton-text) !important;
}

.main-type-mesto {
    color: var(--spice-subbutton-text);
}
.view-homeShortcutsGrid-shortcut {
    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
    border: solid 3px var(--spice-text);
    border-radius: 10px;
    padding-bottom: 80.7px;
    transition: 500ms;
}

.main-card-card .main-card-cardLink {
    border: solid 3px;
    transition:500ms;
    border-radius:27px;
    
}
.main-card-card{
    border-radius:27px!important;
}
.view-homeShortcutsGrid-shortcut:hover,.main-card-card .main-card-cardLink:hover {
    border-color:var(--spice-button);
}
.main-createPlaylistButton-button {
    padding: 0 16px !important;
    }
.main-trackCreditsModal-closeBtn{
    color: var(--spice-sub-button) !important;
   }
   .main-contextMenu-menu{
        max-height: 400px;
   }
   .main-trackList-trackList {
    border-radius: 30px;
    background-color: var(--spice-player);
    border: 1px solid;
}
.main-buddyFeed-friendsFeedContainer{
    border-left: solid 2px var(--spice-text);
}

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

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

.main-navBar-entryPoints > div:first-of-type {
    margin-top: 20px;
}
.main-nowPlayingBar-left {
    min-width: 200px;
    width: 0%;
    border-radius: 10px;
    background-color: var(--spice-card);
    
}
.cMigZB {
    cursor: pointer;
}
.control-button {
    color:var(--spice-misc);
}