: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; }