[ { "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; }" } ]