spicetify-themes/Ziro/user.css

:root {
  --br-1: 10px;
  --br-2: 8px;
  --scrollbar: unset;

  --spice-main-elevated: var(--spice-main);
  --spice-highlight: var(--spice-button-disabled);
  --spice-highlight-elevated: var(--spice-card);
}
.encore-dark-theme, .encore-dark-theme .encore-base-set {
  --text-subdued: var(--spice-subtext);
}
/* background */
.main-home-homeHeader,
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background {
  display: none;
}
.main-topBar-overlay, .main-view-container, .Root__nav-bar{
  background-color: var(--spice-main);
}
.main-topBar-background {
  opacity: 1 !important;
  background-color: var(--spice-main) !important;
}
* {
  box-shadow: none !important;
}
/* dividers */
.Y_WW1akjiQKXSzCBalCD {
  display: none;
}
/* navbar */
.main-rootlist-rootlist {
  --left-sidebar-padding-left: 24px !important;
  --left-sidebar-padding-right: 24px !important;
}
.main-rootlist-rootlistDividerContainer {
  display: none;
}
.main-navBar-navBarLinkActive,
.main-collectionLinkButton-selected,
.main-rootlist-rootlistItemLinkActive {
  color: var(--spice-shadow) !important;
  background: var(--spice-selected-row) !important;
}
.main-navBar-navBarLink,
.main-collectionLinkButton-collectionLinkButton,
.main-rootlist-rootlistItemLink,
.main-createPlaylistButton-button {
  border-radius: var(--br-1) !important;
}
.main-navBar-navBarLink:hover,
.main-collectionLinkButton-collectionLinkButton:hover,
.main-rootlist-rootlistItemLink:hover,
.main-createPlaylistButton-button:hover {
  background: var(--spice-button-disabled);
}
.main-rootlist-rootlistItem {
  padding: 0 8px 0 calc(8px + var(--indentation) * 8px);
}
.main-rootlist-rootlistItemLink {
  padding: 0 16px;
}
.main-rootlist-statusIcons,
.main-rootlist-expandArrow {
  position: absolute;
  right: 24px;
}
.main-rootlist-expandArrow {
  top: 8px;
  color: var(--spice-subtext);
}
.main-rootlist-rootlistItemLinkActive + .main-rootlist-statusIcons .main-rootlist-playButton,
.main-rootlist-rootlistItemLinkActive + .main-rootlist-expandArrow {
  color: var(--spice-shadow) !important;
}
.main-navBar-navBarLink {
  color: var(--spice-text);
}
.main-collectionLinkButton-collectionLinkButton > *,
.main-createPlaylistButton-button {
  opacity: 1 !important;
}
.main-rootlist-rootlist .os-scrollbar {
  padding: 0 0 0 8px;
}
.main-rootlist-rootlistItemLinkActive .main-rootlist-expandArrow:focus,
.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:focus,
.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover {
  color: var(--spice-main);
}
/* player */
.main-nowPlayingBar-center .playback-progressbar {
  position: absolute;
  left: 0;
  bottom: 82px;
}
.main-nowPlayingBar-nowPlayingBar:not(:only-child) .playback-progressbar:not(.volume-bar__slider-container > .playback-progressbar) {
  bottom: 108px;
}
.playback-bar {
  --bar: var(--spice-button);
}
.volume-bar {
  --bar: var(--spice-subtext);
  margin-right: 8px;
}
.playback-bar .progress-bar {
  --progress-bar-radius: 0;
}
.playback-bar:hover .progress-bar,
.playback-bar .DuvrswZugGajIFNXObAr {
  --progress-bar-height: 8px;
}
.x-progressBar-progressBarBg {
  background-color: var(--spice-button-disabled);
}
.DuvrswZugGajIFNXObAr .progress-bar__slider,
.epWhU7hHGktzlO_dop6z {
  background-color: var(--bar) !important;
}
.progress-bar__slider {
  display: block;
  background-color: var(--spice-shadow);
  border: 2px solid var(--bar);
  height: 16px;
  width: 16px;
}
.playback-bar .progress-bar__slider {
  height: 20px;
  width: 20px;
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
  color: var(--spice-text);
  position: absolute;
  margin-bottom: 33px;
  right: 0;
}
.playback-bar__progress-time-elapsed {
  right: 43px;
}
.playback-bar__progress-time-elapsed::after {
  content: '  /';
}
.main-nowPlayingBar-extraControls {
  margin-right: 75px;
}
.player-controls__buttons {
  margin: 0;
}
.player-controls__buttons button:not(.main-playPauseButton-button) {
  color: var(--spice-button) !important;
}
.main-genericButton-button {
  color: var(--spice-button) !important;
}
.connect-device-list-content {
  border-radius: var(--br-1);
  border: 1px solid var(--spice-button-disabled);
  padding: 12px;
}
.connect-device-list-item:hover {
  background-color: var(--spice-button-disabled);
  border-radius: var(--br-2);
}
.cover-art-image {
  border-radius: calc(var(--br-2) / 2);
}
.main-coverSlotCollapsed-container[aria-hidden='true'] .cover-art-image {
  border-radius: var(--br-1);
}
/* friends */
.main-buddyFeed-addFriendsContainer {
  background-color: var(--spice-sidebar);
}
.main-buddyFeed-friendActivity {
  padding: 8px;
  margin: 8px;
  background: var(--spice-card);
  border-radius: var(--br-1);
}
.HdRGC,
.eEsqRZ,
.main-buddyFeed-usernameAndTimestamp a {
  color: var(--spice-text) !important;
}
.main-buddyFeed-activityMetadata > :not(:first-child) a,
.main-buddyFeed-timestamp {
  color: var(--spice-subtext) !important;
}
.main-avatar-avatar.vreGJrlRqoFkzlSQwvsJ:after {
  background: var(--spice-text);
  box-shadow: none;
}
/* cards */
.main-card-card,
.Z35BWOA10YGn5uc9YgAp,
.main-heroCard-card,
.a2ruVaZt_DdrdHz3GqgU,
.x-categoryCard-CategoryCard {
  background-color: var(--spice-card);
  border-radius: var(--br-1);
}
.Z35BWOA10YGn5uc9YgAp:hover {
  background: var(--spice-button-disabled);
}
.main-cardImage-imageWrapper:not(.main-cardImage-circular) {
  border-radius: var(--br-2);
}
.Z35BWOA10YGn5uc9YgAp .main-image-image {
  border-radius: var(--br-2) 0 0 var(--br-2);
}
.zXwER4Lsqq_e7fVVaPkZ {
  background-color: transparent !important;
}
.cSeieV {
  background-color: var(--spice-button-active);
}

/* menus */
.main-contextMenu-menu {
  border: 1px solid var(--spice-button-disabled);
  border-radius: var(--br-1);
  padding: 8px;
}
.main-contextMenu-menuItemButton:hover {
  background-color: var(--spice-button-disabled);
}
.main-contextMenu-menuItemButton {
  border-radius: var(--br-2);
}
.main-contextMenu-menuItemButton::before,
.main-contextMenu-menuItemButton::after {
  display: none;
}
.main-contextMenu-menuItemButton {
  color: var(--spice-text) !important;
}
/* input */
.x-searchInput-searchInputInput,
.x-proxySettings-proxyInput,
.main-dropDown-dropDown,
.QZhV0hWVKlExlKr266jo,
.amTaUy6eMlbKh0wzrOnb {
  background: var(--spice-card);
  border-radius: var(--br-2);
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputInput,
.x-searchInput-searchInputClearButton {
  color: var(--spice-text) !important;
}
/* buttons */
.wCl7pMTEE68v1xuZeZiB:hover,
.w6j_vX6SF5IxSXrrkYw5:hover,
.w6j_vX6SF5IxSXrrkYw5[data-context-menu-open='true'],
.fLS8v3_EfBadEerbGVoR:hover,
.aAr9nYtPsG7P2LRzciXc {
  background: var(--spice-button-disabled);
  border-radius: var(--br-2);
}
.w6j_vX6SF5IxSXrrkYw5 {
  background-color: transparent;
}
.main-actionBar-ActionBarRow button:not(.bqeOGM),
.QhF9ZR7YOiJeFiEnfkOr button,
.CpQBQL6M4D3bquNOpKd9,
.player-controls__buttons button,
.DbMYFmOEEz9PH1h1zK9n button,
.main-moreButton-button,
.w6j_vX6SF5IxSXrrkYw5,
.gIobRDHAxkAvUaF4_OOL button {
  color: var(--spice-button);
}
.bqeOGM:hover .ButtonInner-sc-14ud5tc-0,
.dkGAhA:hover .ButtonInner-sc-14ud5tc-0,
.jEaMNl:hover .ButtonInner-sc-14ud5tc-0,
.fBTYgGyvIbHizHIj7AAX,
.main-playPauseButton-button {
  background-color: var(--spice-button);
}
.kxBVag {
  color: var(--spice-subtext);
}
.main-button-primary,
.fBTYgGyvIbHizHIj7AAX,
.main-playPauseButton-button {
  color: var(--spice-shadow) !important;
}
.aAr9nYtPsG7P2LRzciXc {
  border: none;
}
.main-button-outlined {
  border-color: var(--spice-button);
}
.rEx3EYgBzS8SoY7dmC6x rect {
  fill: var(--spice-button);
}
/* scrollbar */
.os-scrollbar {
  display: var(--scrollbar);
}
.os-scrollbar-handle {
  border-radius: var(--br-2);
  background: var(--spice-button-disabled) !important;
}
/* tab bar */
.oaNVBli46GtVjaQKB15g,
.marketplace-tabBar-active,
.lyrics-tabBar-active,
.queue-tabBar-active {
  color: var(--spice-shadow) !important;
  background: var(--spice-tab-active) !important;
}
.JdlKTdpMquftpMwwegZo,
.marketplace-tabBar-headerItemLink,
.lyrics-tabBar-headerItemLink {
  border-radius: var(--br-2);
}
.JdlKTdpMquftpMwwegZo:hover,
.marketplace-tabBar-headerItemLink:hover {
  background: var(--spice-button-disabled);
}
/* marketplace */
.main-navBar-navBarItem[data-id='/spicetify-marketplace'] svg {
  vertical-align: middle;
}
.main-type-mestoBold {
  font-weight: 700;
  font-size: 0.875rem;
}
.marketplace-card-desc {
  font-size: 0.875rem;
  line-height: 1rem;
}
.main-cardHeader-text {
  font-weight: 700;
}
.marketplace-header {
  height: 36px;
}
.marketplace-header__right {
  position: fixed;
}
.marketplace-settings-button {
  padding: 12px 12px 8px;
  border-radius: var(--br-2);
}
.marketplace-settings-button:hover {
  background-color: var(--spice-button-disabled);
}
.GenericModal > * {
  background-color: var(--spice-main) !important;
  color: var(--spice-text);
}
.GenericModal,
.GenericModal > * {
  border-radius: var(--br-1);
}
.main-playButton-PlayButton {
  color: var(--spice-shadow) !important;
}
.marketplace-card--installed {
  border: none;
}
/* headers */
.CmkY1Ag0tJDfnFXbGgju:not(.hNTPwmaxPotdJ14dx2W9 *) {
  border-radius: var(--br-1);
}
.main-entityHeader-gray,
.main-entityHeader-metaData,
.UyzJidwrGk3awngSGIwv,
.main-entityHeader-divider {
  color: var(--spice-text) !important;
}
.main-entityHeader-background {
  transform: none !important;
  margin-top: 64px;
  border-radius: var(--br-1);
}
.main-entityHeader-overlay {
  background: none;
}
.main-entityHeader-withBackgroundImage,
.main-entityHeader-withBackgroundImage + div {
  transform: translateY(64px);
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
  background-image: linear-gradient(50deg, rgba(var(--spice-rgb-card), 1) 30%, rgba(var(--spice-rgb-card), 0.7) 60%, transparent 90%);
  border-radius: var(--br-1);
}
/* tracklist */
.main-trackList-trackList .main-rootlist-wrapper {
  background: var(--spice-card);
  border-radius: 10px 10px 0px 0px;
  padding: 8px;
}
.main-trackList-trackListHeaderRow {
  border: none;
}
.main-trackList-trackListRow:hover,
.jtZMR8Hj94od6BQce98P:hover {
  background-color: var(--spice-button-disabled);
}
.main-trackList-trackListRow.main-trackList-selected,
.jtZMR8Hj94od6BQce98P:active {
  background-color: var(--spice-tab-active) !important;
}
.main-trackList-selected * {
  color: var(--spice-shadow) !important;
}
.main-trackList-selected .main-trackList-playingIcon,
.main-trackList-selected .main-tag-container {
  background-color: var(--spice-shadow);
  color: var(--spice-text) !important;
}
.main-trackList-trackListRow,
.jtZMR8Hj94od6BQce98P {
  border-radius: var(--br-2);
}
.main-trackList-trackList {
  border-radius: var(--br-1);
  border-bottom: 16px solid var(--spice-card);
}
.fcehhQ {
  color: var(--spice-subtext);
}
.main-tag-container {
  background-color: var(--spice-subtext);
}
.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 24 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;
}
.main-trackList-filterHighlight {
  background-color: var(--spice-button);
  color: var(--spice-shadow);
}
/* podcasts */
.main-yourEpisodes-coverContainer,
.SpVoh9vvBN0kIwzfCiBh,
.ltjunXlP2FwPEVF992n9 {
  border-radius: var(--br-1);
}
.TT1tIewS2iI8Uz8kLuQB {
  border-radius: var(--br-2);
  margin: 0 8px;
}
.TT1tIewS2iI8Uz8kLuQB:hover {
  background-color: var(--spice-button-disabled);
}
.Ng3dPPA2_1CFYkzPukjM {
  background: var(--spice-text);
}
.Q3wDjXPNY4lACLUxARrd + div {
  background-color: var(--spice-card);
  padding: 8px 0;
  border-radius: var(--br-1);
}
.knWBkA {
  color: var(--spice-subtext);
}
.qfYkuLpETFW3axnfMntO,
.poz9gZKE7xqFwgk231J4,
.UyzJidwrGk3awngSGIwv,
.xWm_uA0Co4SXVxaO7wlB {
  color: var(--spice-text) !important;
}
path[fill='#1ed760'] {
  fill: var(--spice-button) !important;
}
.E4I5I7G2CfW32hLWZaqE,
.SpVoh9vvBN0kIwzfCiBh {
  background-color: var(--spice-card);
}
.rFwxt8s8DYY8p1O7tYZW {
  background: none;
}
/* settings */
.x-toggle-indicator {
  height: 18px;
  width: 18px;
  top: 3px;
  left: 3px;
  background: var(--spice-shadow) !important;
}
input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
  right: 3px;
}
.cOFYck {
  color: var(--spice-subtext);
}
.main-playlistEditDetailsModal-textElement {
  border-radius: var(--br-1);
}
.main-playlistEditDetailsModal-textElement:focus {
  background: rgba(var(--spice-rgb-selected-row),.1) !important;
}
/* fullscreen */
.npv-main-container .npv-cross-fade-image {
  border-radius: calc(var(--br-1) * 3);
}
.npv-main-container .playback-bar__progress-time-elapsed,
.npv-main-container .main-playbackBarRemainingTime-container {
  margin-bottom: -125px;
  margin-right: -86px;
}
.npv-up-next {
  background: var(--spice-card) !important;
  border: none !important;
  border-radius: var(--br-1);
}
.npv-up-next__image {
  border-radius: var(--br-2);
}
.npv-header__metadata {
  color: var(--spice-text);
}
/* misc */
.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
  --lyrics-color-active: var(--spice-text) !important;
  --lyrics-color-inactive: var(--spice-subtext) !important;
  --lyrics-color-passed: var(--spice-subtext) !important;
  --lyrics-color-messaging: var(--spice-text) !important;
}
.lyrics-lyricsContainer-LyricsBackground {
  background-image: none;
}
.lyrics-lyrics-background {
  background-color: var(--spice-main);
}
.jixVGx,
.euRuBv {
  color: var(--spice-text);
}
.XmR5VFpqXOcxRvhuf6OB {
  border-radius: var(--br-1);
}
.main-rootlist-rootlistDividerContainer {
  display: none;
}
.main-home-homeHeader {
  display: none;
}
.main-rootlist-rootlistItemOverlay {
  display: none;
}
.main-rootlist-rootlist {
  --left-sidebar-padding-left: 8px;
  --left-sidebar-padding-right: 8px;
}
label.Type__TypeElement-goli3j-0.gCwing.main-playlistEditDetailsModal-textElementLabel {
  padding-bottom: 12px;
}
/*navbar icon*/
.collection-active-icon, .collection-icon, .home-active-icon, .home-icon, .premiumSpotifyIcon, .search-active-icon, .search-icon {
  color: var(--spice-text);
}
/*navbar active icon*/
.main-navBar-navBarItem .collection-active-icon, .main-navBar-navBarItem .home-active-icon, .main-navBar-navBarItem .make-music-active-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .collection-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .home-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .make-music-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .search-icon, .main-navBar-navBarItem .search-active-icon {
  color: var(--spice-main);
}
/*playing status icon - Playlist*/
.CCeu9OfWSwIAJqA49n84.ZcKzjCkYGeMizcSAP8UX {
  color: var(--spice-subtext);
  top: 10px;
}
.main-rootlist-rootlistItemLinkActive + .main-rootlist-statusIcons .CCeu9OfWSwIAJqA49n84.ZcKzjCkYGeMizcSAP8UX {
  color: var(--spice-main);
  top: 10px;
}
/* download icon - Playlist */
.hcxPtZcvjM07S6ydT685 {
  top: 10px;
  position: relative;
}
/*playing status icon - Liked Songs*/
.CCeu9OfWSwIAJqA49n84.Frn4juLXf6zInWBEFFzr {
  color: var(--spice-text);
}
.main-collectionLinkButton-selected .main-rootlist-statusIcons .CCeu9OfWSwIAJqA49n84.Frn4juLXf6zInWBEFFzr {
  color: var(--spice-main);
}
/*about artist card text*/
.artist-artistAbout-container.artist-artistAbout-backgroundImage .artist-artistAbout-content > div {
  color: #fff;
}