user.css

:root,
::before,
::after {
  --primary: var(--spice-primary);
  --secondary: var(--spice-secondary);
  --textColor: var(--spice-text);
  --textSecondary: var(--spice-subtext);
  --textHighlight: var(--spice-texthighlight);
  --background: linear-gradient(
      30deg,
      var(--spice-primary) 0%,
      var(--spice-secondary) 100%
  );
  --buttonColor: var(--spice-button);
  --buttonBackground: linear-gradient(
      215deg,
      var(--spice-primary) 0%,
      var(--spice-secondary) 100%
  );
  --panelColor: var(--spice-rgb-panelcolor);
  --panelTransparency10: 0.125;
  --panelTransparency100: 0.3;
  --panelTransparency150: 0.4;
  --panelTransparency200: 0.6;
  --panelTransparency250: 0.7;
  --panelTransparency300: 0.8;
  --progressBarColor: var(--background);
  --progressBarBackground: var(--spice-progressbg);
  --progressBarRadius: 3px;
  --progressBarHeight: 6px;
}

input,
.main-rootlist-rootlistDividerGradient,
.main-home-homeHeader,
.x-entityHeader-overlay,
.x-actionBarBackground-background,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor,
.main-topBar-background,
.main-rootlist-rootlistDivider,
.playlist-playlist-playlistContent,
.main-navBar-navBarLink,
.main-navBar-navBarLinkActive,
.main-topBar-overlay,
.main-userWidget-box:focus,
.main-userWidget-box:hover,
.main-userWidget-box,
.main-avatar-userIcon,
.main-contextMenu-menu,
.main-createPlaylistButton-createPlaylistIcon,
.cover-art,
.artist-artistOverview-artistOverviewContent,
.artist-artistAbout-container,
.view-viewContainer-contentContainer,
.artist-artistDiscography-headerContainer,
.main-heroCard-card {
  background: transparent;
  background-color: unset !important;
  background-image: unset !important;
}

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

.main-cardImage-imageWrapper {
  background-color: transparent;
}

.main-entityHeader-imagePlaceholder {
  background: var(--background);
  color: var(--textColor);
}

.main-entityHeader-background.main-entityHeader-gradient {
  -webkit-transform: unset !important;
  transform: unset !important;
  opacity: calc(1 - calc(var(--scroll) * 3));
}
.main-entityHeader-background.main-entityHeader-overlay:after {
  background-image: unset !important;
}

[id^=tippy-] {
  backdrop-filter: blur(4px);
}

.main-contextMenu-menu {
  background: rgba(var(--panelColor), var(--panelTransparency250)) !important;
  border-radius: 15px;
}
.main-contextMenu-menu .main-contextMenu-menuItemButton {
  border-radius: 15px;
}
.main-contextMenu-menu .main-contextMenu-menuItemButton:focus, .main-contextMenu-menu .main-contextMenu-menuItemButton:hover {
  background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important;
  color: var(--spice-text) !important;
  text-decoration: none;
  border-radius: 15px;
}

select option {
  color: var(--textColor);
  background: var(--secondary);
}

[class*=-tabBar-dropdownItemLink].queue-tabBar-active, [class*=-tabBar-dropdownItemLink]:focus, [class*=-tabBar-dropdownItemLink]:hover {
  background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important;
  color: var(--spice-text) !important;
  text-decoration: none;
  border-radius: 15px;
}

[class*=-tabBar-headerItemLink],
[class*=-tabBar-moreButton] {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
  border-radius: 20px !important;
}
[class*=-tabBar-headerItemLink][class*=-tabBar-active], [class*=-tabBar-headerItemLink][class*=-tabBar-moreButtonActive],
[class*=-tabBar-moreButton][class*=-tabBar-active],
[class*=-tabBar-moreButton][class*=-tabBar-moreButtonActive] {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
}

.progress-bar__bg,
.progress-bar__fg_wrapper {
  border-radius: var(--progressBarRadius);
  height: var(--progressBarHeight);
  background: var(--progressBarBackground);
}

.progress-bar__fg {
  border-radius: var(--progressBarRadius);
  height: var(--progressBarHeight);
  background: var(--progressBarColor);
}

.main-type-finale {
  color: var(--textColor) !important;
  z-index: 1;
}

.main-card-card {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
  border-radius: 15px;
}
.main-card-card:hover {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
}

.x-searchResults-topResult {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
  border-radius: 15px !important;
}

.main-cardImage-imageWrapper img {
  border-radius: 15px;
}

.x-heroCategoryCard-HeroCategoryCard::after,
.x-categoryCard-CategoryCard::after {
  content: "";
  background: linear-gradient(45deg, black, transparent);
  opacity: var(--panelTransparency200);
  z-index: 1;
}
.x-heroCategoryCard-HeroCategoryCard .x-heroCategoryCard-heroTitle,
.x-heroCategoryCard-HeroCategoryCard .x-heroCategoryCard-heroImage,
.x-heroCategoryCard-HeroCategoryCard .x-categoryCard-title,
.x-heroCategoryCard-HeroCategoryCard .x-categoryCard-image,
.x-categoryCard-CategoryCard .x-heroCategoryCard-heroTitle,
.x-categoryCard-CategoryCard .x-heroCategoryCard-heroImage,
.x-categoryCard-CategoryCard .x-categoryCard-title,
.x-categoryCard-CategoryCard .x-categoryCard-image {
  z-index: 2;
}

.x-heroCategoryCard-HeroCategoryCard::after {
  position: absolute;
  inset: 0;
}
.x-heroCategoryCard-HeroCategoryCard .x-heroCategoryCard-heroTitle,
.x-heroCategoryCard-HeroCategoryCard .x-heroCategoryCard-heroImage {
  z-index: 2;
}

.x-carousel-carousel {
  width: 100%;
}

.link-subtle {
  color: var(--textSecondary) !important;
}

.GenericModal > div {
  background: rgba(var(--panelColor), var(--panelTransparency150)) !important;
}

* {
  color: var(--textColor);
}

input {
  color: var(--textColor) !important;
}

.main-playButton-PlayButton {
  background: var(--buttonBackground);
}

.player-controls__buttons {
  align-items: center;
}
.player-controls__buttons button {
  color: var(--buttonColor) !important;
}
.player-controls__buttons button.main-playPauseButton-button {
  background: var(--buttonBackground);
  width: 42px;
  height: 42px;
}
.player-controls__buttons button.main-playPauseButton-button svg {
  height: 20px;
  width: 20px;
}
.player-controls__buttons button::before {
  border-radius: 50%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--buttonBackground);
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
}
.player-controls__buttons button::after {
  display: none !important;
}
.player-controls__buttons button:not([disabled]):hover, .player-controls__buttons button:not([disabled])[class$=-on] {
  color: var(--buttonColor) !important;
  background: var(--buttonBackground);
  border-radius: 50%;
}
.player-controls__buttons button:not([disabled]):hover::before, .player-controls__buttons button:not([disabled])[class$=-on]::before {
  opacity: 1;
}
.player-controls__buttons button:not([disabled]):hover {
  transform: scale(1.08);
}

.main-topBar-button {
  background: transparent;
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
  border-radius: 50%;
}

.x-settings-facebookButton,
.x-settings-facebookButton:active,
.x-settings-facebookButton:focus,
.x-settings-facebookButton:hover,
.main-buttons-button:not(.main-entityHeader-titleButton) {
  background: var(--background) !important;
  border: none;
  margin: 0 0.5em;
}

.main-trackList-trackListRow:focus-within .main-trackList-addToPlaylistButton, .main-trackList-trackListRow:focus .main-trackList-addToPlaylistButton, .main-trackList-trackListRow:hover .main-trackList-addToPlaylistButton {
  border: none !important;
}

.main-createPlaylistButton-createPlaylistIcon {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
  color: var(--textColor);
  border-radius: 50%;
}

.main-deletePlaylistDialog-secondaryButton {
  color: var(--textColor);
}

.main-topBar-background {
  background: linear-gradient(rgba(var(--panelColor), var(--panelTransparency200)), rgba(var(--panelColor), var(--panelTransparency200))), var(--background) !important;
}

.main-trackList-trackListHeader {
  color: var(--textColor);
}

.main-trackList-trackListHeaderStuck {
  background: linear-gradient(rgba(var(--panelColor), var(--panelTransparency150)), rgba(var(--panelColor), var(--panelTransparency150))), var(--background) !important;
}

.main-trackList-trackList {
  border: none !important;
}

.x-searchInput-searchInputInput {
  background: rgba(var(--panelColor), var(--panelTransparency150)) !important;
}

.main-userWidget-box,
.main-avatar-userIcon {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
}
.main-userWidget-box:hover,
.main-avatar-userIcon:hover {
  background: rgba(var(--panelColor), var(--panelTransparency150)) !important;
}

.x-searchInput-searchInputInput,
.x-searchInput-searchInputInput::placeholder,
.x-searchInput-searchInputSearchIcon {
  color: var(--textColor) !important;
}

.main-nowPlayingBar-container {
  border-top: none;
}
.main-nowPlayingBar-container::before {
  content: "";
  width: 100%;
  height: 5px;
  background: var(--progressBarColor);
}

.main-nowPlayingBar-nowPlayingBar {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
}

.main-coverSlotExpanded-container {
  margin-bottom: 8px;
}

.main-nowPlayingWidget-coverArt .cover-art {
  background: rgba(var(--panelColor), var(--panelTransparency10)) !important;
}
.main-nowPlayingWidget-coverArt .cover-art img {
  border-radius: 5px;
}

.main-navBar-navBarLink.main-navBar-navBarLinkActive {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
  border-radius: 20px;
}

.main-coverSlotExpanded-container .cover-art {
  background: rgba(var(--panelColor), var(--panelTransparency10)) !important;
}
.main-coverSlotExpanded-container .cover-art img {
  border-radius: 0px 30px 0px 0px;
}

.main-view-container__scroll-node-child {
  display: flex;
  justify-content: center;
}

.artist-artistOverview-overview .main-entityHeader-headerText::before {
  content: "";
  background: linear-gradient(45deg, var(--spice-primary), var(--spice-secondary), transparent 60%);
  width: 50%;
  height: 45%;
  margin-bottom: -0.5%;
  margin-left: -1.5%;
  position: absolute;
  z-index: -1;
  border-radius: 25px;
  opacity: var(--panelTransparency250);
}

.artist-artistAbout-container {
  background: rgba(var(--panelColor), var(--panelTransparency200)) !important;
  border-radius: 15px;
}

.artist-artistAbout-modal {
  background: rgba(var(--panelColor), var(--panelTransparency300)) !important;
  backdrop-filter: blur(5px);
}

.x-carousel-carousel {
  width: 100% !important;
}

.x-carousel-buttonContainer {
  z-index: 3 !important;
}

.x-toggle-indicatorWrapper {
  background: var(--background);
  transition: 0.3s;
}
.x-toggle-indicatorWrapper:hover {
  transform: scale(1.05);
}

.main-dropDown-dropDown {
  background: var(--background);
  border-radius: 32px;
  color: var(--textColor);
}

#main,
.main-nowPlayingBar-container {
  background: var(--background);
}

.Root {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
}

.main-buddyFeed-buddyFeed,
.Root__nav-bar {
  background: rgba(var(--panelColor), var(--panelTransparency100)) !important;
}

.main-trackList-trackListRow.main-trackList-active:hover .main-trackList-rowMarker,
.main-trackList-trackListRow.main-trackList-active:hover .main-trackList-rowTitle, .main-trackList-trackListRow.main-trackList-active:focus .main-trackList-rowMarker,
.main-trackList-trackListRow.main-trackList-active:focus .main-trackList-rowTitle, .main-trackList-trackListRow.main-trackList-active:focus-within .main-trackList-rowMarker,
.main-trackList-trackListRow.main-trackList-active:focus-within .main-trackList-rowTitle {
  color: var(--textHighlight);
}

.main-trackList-playingIcon {
  filter: brightness(10) grayscale(1);
}

.main-view-container__scroll-node-child section,
.main-view-container__scroll-node-child .contentSpacing {
  width: 100%;
}

.main-actionBarBackground-background {
  left: 0;
  right: 0;
}

/*# sourceMappingURL=user.css.map */