dotfiles/dot_config/spicetify/CustomApps/spicetify-marketplace/snippets.json

[
  {
    "title": "Fix 'Episodes' Icon",
    "description": "Fix the color of the Episodes icon",
    "code": ".main-yourEpisodesButton-yourEpisodesIcon { background: var(--spice-text); } .main-yourEpisodesButton-yourEpisodesIcon path { fill: var(--spice-player); opacity: 0.7; }"
  },
  {
    "title": "Fix 'Liked' Icon",
    "description": "Fix the colours of the Liked icon in sidebar",
    "code": ".main-likedSongsButton-likedSongsIcon { color: var(--spice-sidebar); background: var(--spice-text); }"
  },
  {
    "title": "Fix 'Made For You' Icon",
    "description": "Fix the colours of the Made For You icon",
    "code": ".utp540VMXpC3bYIxo9wy { color: var(--spice-sidebar); background: var(--spice-text); opacity: 1; } .t6d9Hf7maqFPHp1Y02VR { color: var(--spice-text); }"
  },
  {
    "title": "Hide Upgrade Button",
    "description": "Makes the upgrade button hidden",
    "code": ".main-topBar-UpgradeButton { display: none; }"
  },
  {
    "title": "Auto-hide Friends",
    "description": "Collapse the friends activity sidebar on small screens",
    "code": ".main-buddyFeed-buddyFeedRoot { transition: width 0.3s; } @media screen and (max-width: 1200px) { .main-buddyFeed-buddyFeedRoot { width: 0; } }"
  },
  {
    "title": "Smooth Reveal Playlist Gradient",
    "description": "Reveals the playlist gradient header gradient with a fade in effect",
    "code": ".main-entityHeader-overlay, .main-actionBarBackground-background, .main-entityHeader-overlay, .main-entityHeader-backgroundColor { -webkit-transition: 3s; }"
  },
  {
    "title": "Fix progress bar displacement",
    "description": "Fix the progress bar displacement when listening on different devices",
    "code": ".main-connectBar-connectBar { overflow: visible !important; --triangle-position: 147px !important; align-items: unset !important; height: 0px !important; position: absolute !important; left: 80% !important; display: flex !important; bottom: 2% !important; padding: unset !important; }"
  },
  {
    "title": "Fix playlist arrows",
    "description": "Fixes the opened and closed orientation of the playlist folder arrows",
    "code": ".main-rootlist-expandArrow { -webkit-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important; } .main-rootlist-expandArrow:hover { -webkit-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important; } .qAAhQw9dXNB7DbPgDDxy { -webkit-transform: rotate(0deg) !important; transform: rotate(0deg) !important; } .qAAhQw9dXNB7DbPgDDxy:hover { -webkit-transform: rotate(0deg) !important; transform: rotate(0deg) !important; }"
  },
  {
    "title": "Fix main view width",
    "description": "Makes main view fill up all available space",
    "code": ".contentSpacing { max-width: 100% !important; }"
  },
  {
    "title": "Left aligned heart icons",
    "description": "Moves the heart icon to the left side of the track title in track views",
    "code": ".main-trackList-rowSectionStart { margin-left: 38px !important; } .main-addButton-button.main-trackList-rowHeartButton, .main-addButton-button.main-trackList-rowHeartButton { position: absolute !important; left: 48px !important; }"
  },
  {
    "title": "Disable Hover Panels [comfy-shadow]",
    "description": "For comfy shadow this disables the hovering of panels and bars.",
    "code": "nav.Root__nav-bar { position: inherit !important; width: calc(var(--nav-bar-width) + 9px) !important; opacity: 1 !important; transition: none !important; } nav.Root__nav-bar:hover { position: inherit !important; width: calc(var(--nav-bar-width) + 9px) !important; opacity: 1 !important; transition: none !important; } .LayoutResizer__resize-bar { cursor: col-resize !important; } .Root__top-bar{ opacity: 1 !important; transition: none !important; } .Root__top-bar:hover { transition-delay: none !important; opacity: 1 !important; transition: none !important; } .main-topBar-container { padding-left: 32px !important; } aside.main-buddyFeed-buddyFeedRoot:hover { position: relative !important; width: var(--buddy-feed-width) !important; opacity: 1 !important; bottom: 0 !important; left: 0 !important; top: 0 !important; z-index: 1 !important; } aside.main-buddyFeed-buddyFeedRoot { position: relative !important; width: var(--buddy-feed-width) !important; opacity: 1 !important; bottom: 0 !important; left: 0 !important; top: 0 !important; z-index: 1 !important; }"
  }
]