diff --git a/user.css b/user.css index e417b59..fab12ef 100644 --- a/user.css +++ b/user.css @@ -1,757 +1,757 @@ -:root { - --sidebar-y-offset: 10px; - --border-radius-1: 10px; - --border-radius-2: 8px; - --border-radius-3: 4px; - --scrollbars: unset; - --green: #1db954; - --spice-main: transparent; - --spice-misc: rgba(30, 30, 30, 0.8); - --spice-player: rgba(30, 30, 30, 0.4); - --spice-bg: "https://i.imgur.com/Y36v2Bm.jpg"; -} -/* Set the wallpaper to the one matching your color scheme - Source: https://wallpapercave.com/wp/wp5003466.jpg - Purple: https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true - Red: https://github.com/Motschen/Retroblur/blob/main/assets/background_red.jpg?raw=true - Green: https://github.com/Motschen/Retroblur/blob/main/assets/background_green.jpg?raw=true - Yellow: https://github.com/Motschen/Retroblur/blob/main/assets/background_yellow.jpg?raw=true - Blue: https://github.com/Motschen/Retroblur/blob/main/assets/background_blue.jpg?raw=true */ -body { - background-image: url("https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true") !important; - background-repeat: no-repeat; - background-size: 100%; -} -.main-repeatButton-button, .main-shuffleButton-button { - color: var(--spice-subtext); - opacity: 70%; -} -.X1lXSiVj0pzhQCUo_72A, .X1lXSiVj0pzhQCUo_72A:hover { - color: var(--spice-button); -} -.encore-dark-theme { - --background-base: var(--spice-button); -} -.gHYQaG, .iaAUvZ { - /*Fix playlist play button when downloaded from Spicetify Marketplace*/ - background-color: var(--spice-button) !important; -} -.eSMjmiD29Ox35O95waw6:after, .eSMjmiD29Ox35O95waw6:before { - background: transparent !important; -} -.McwcCfBLSuXa5UDU1IMw { - display: none; -} -.n87ifzfQlmGX8vkeYGDL { - visibility: hidden; -} -.hW9km7ku6_iggdWDR_Lg { - --lyrics-color-background: transparent !important; - --lyrics-color-active: var(--spice-text) !important; - --lyrics-color-inactive: var(--spice-subtext) !important; - --lyrics-color-messaging: var(--spice-subtext) !important; -} -.lEsg6gi7HowFgzWl_634 { - --lyrics-color-background: rgba(30, 30, 30, 0.4) !important; -} -.main-connectBar-connectBar, .iUSAh1wdhXLk9hHSbkCA.hsrxlVHxK0zZrgarkxuA:after { - filter: drop-shadow(0 0 6px var(--spice-button)) brightness(50%) !important; -} -.yaVzc4bseRnztmfRv_u3, .volume-bar .progress-bar__slider { - filter: drop-shadow(0 0 6px var(--spice-button)) !important; -} -.main-view-container, .Root__main-view, .os-host-overflow, .os-resize-observer, .os-resize-observer-host, .os-host-overflow>.os-padding { - overflow: hidden !important; -} -.spotify__container--is-desktop:not(.fullscreen) .main-navBar-entryPoints, .main-navBar-navBar, .main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button { - padding-top: var(--sidebar-y-offset); -} -.Root__now-playing-bar { - backdrop-filter: blur(14px) !important; - background-color: rgba(30, 30, 30, 0.6) !important; -} -@keyframes fadingGlow { - from {} to { filter: drop-shadow(0 0 6px var(--spice-button)); } -} -@keyframes fadingGlowWhite { - from {} to { filter: drop-shadow(0 0 6px); } -} -.gSLhUO:hover, .main-playButton-PlayButton.main-playButton-primary:hover, .main-pageErrorTemplate-errorButton:hover, div.GlueDropTarget.personal-library >*.active:hover, .main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive:hover, .main-navBar-navBarLinkActive:hover, .control-button-heart:hover, .gHYQaG:hover, .iaAUvZ:hover { - animation: fadingGlow 1s ease 0.5 forwards !important; -} -a:hover, .main-trackList-rowPlayPauseButton:hover, svg:hover { - animation: fadingGlowWhite 1s ease 0.5 forwards; -} -@keyframes speaker { - 0% { clip-path: inset(0% 50% 0% 0%) } - 50% { clip-path: inset(0% 0% 0% 0%) } - 51% { clip-path: inset(0% 0% 0% 0%) } -} -@keyframes speaker2 { - 0% { visibility: visible } - 1% { visibility: hidden } - 51% { visibility: hidden } -} -#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.LKgm9fCDTO7wqig_5U1q > div > div:nth-child(2) > a > div.gtuJjD43VjwtP8ii3H3P > button > svg > path:nth-child(1) { - animation: speaker 2s steps(2,start) infinite; -} -#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.LKgm9fCDTO7wqig_5U1q > div > div:nth-child(2) > a > div.gtuJjD43VjwtP8ii3H3P > button > svg > path:nth-child(2) { - animation: speaker2 2s steps(2,start) infinite; -} -.main-rootlist-statusIcons > button:hover { - animation: initial !important; -} -._BR2wjXQJR1Enau4faXC { - padding: 4px 0 0 13px; -} -#main > div > div.Root__top-container > div.Root__now-playing-bar > footer > div > div.main-nowPlayingBar-right > div > div.GlueDropTarget.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes > div > button > span > svg { - fill: var(--spice-button); -} -div.GlueDropTarget.personal-library { - padding: 0 0px !important; -} -.playback-bar .progress-bar__slider { - filter: drop-shadow(0 0 6px var(--spice-button)); -} -.main-coverSlotExpanded-container { - -webkit-box-reflect: below; -} -.main-home-content, .main-entityHeader-backgroundColor, .main-actionBar-ActionBar, .content-spacing, :root, .main-navBar-navBar, .D_XKXBZDhgpM1KrmKy3O, .spotify__container--is-desktop:not(.fullscreen) .main-navBar-entryPoints { - background-color: transparent !important; - color: transparent !important; - background-clip: content-box; -} -.Root__nav-bar { - background-color: rgba(30, 30, 30, 0.4); - backdrop-filter: blur(14px) !important; -} -/* scrollbars */ -.os-scrollbar { - display: var(--scrollbars); -} -.os-scrollbar-handle { - border-radius: 50px; - background: var(--spice-button-disabled) !important; -} -/* remove shadows */ -* { - box-shadow: none !important; -} -/* remove gradients */ -.main-home-homeHeader, .main-actionBarBackground-background, .We1fExPHxLIRmV0rZGNo { - background-image: none; -} -.main-actionBarBackground-background, .main-home-homeHeader, .euOnte9wvOF0D_SGxEZ9, .main-topBar-background, .main-topBar-overlay, .x-entityHeader-overlay, .x-actionBarBackground-background, .We1fExPHxLIRmV0rZGNo { - background-color: transparent !important; -} -.x-actionBarBackground-background, .x-entityHeader-overlay, .euOnte9wvOF0D_SGxEZ9 { - background-image: none !important; -} -.main-entityHeader-backgroundColor { - background: transparent; -} -/* remove dividers */ -.main-trackList-trackListHeaderRow, .main-trackCreditsModal-header { - border-bottom: none; - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -.now-playing-bar-container, ._6e96ad0ba78d75ffb2a0156aa1834a21-scss { - border-top: none; -} -.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider, .main-rootlist-rootlistDividerContainer { - display: none; -} -/* cards */ -.main-cardImage-image, .main-cardImage-imageWrapper { - border-radius: var(--border-radius-2); -} -.main-card-card, .x-heroCategoryCard-HeroCategoryCard, .x-categoryCard-CategoryCard, .main-heroCard-card, .view-homeShortcutsGrid-shortcut, .view-homeShortcutsGrid-image { - border-radius: var(--border-radius-1) !important; -} -.main-card-card, .view-homeShortcutsGrid-shortcut { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -/* transitions */ -.main-card-card { - transition: background-color 150ms ease; -} -.link-subtle { - transition-duration: 150ms; -} -/* headers */ -.main-entityHeader-withBackgroundImage { - padding: 0 64px 24px; - margin-top: 48px; -} -.main-entityHeader-title { - font-size: unset; -} -/* menus */ -.main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton { - border-radius: var(--border-radius-2); - color: var(--spice-text); - height: 32px; - padding-left: 8px; -} -.main-contextMenu-menuItem, ._60cb742e518d084c3c959007b9463b51-scss > li { - margin: 2px 6px; -} -.main-contextMenu-menuItem:first-child, ._60cb742e518d084c3c959007b9463b51-scss > :first-child { - margin: 6px 6px 2px; -} -.main-contextMenu-menuItem:last-child { - margin: 2px 6px 6px; -} -._60cb742e518d084c3c959007b9463b51-scss > :last-child { - margin: 2px 6px 8px; -} -.main-contextMenu-menu, ._60cb742e518d084c3c959007b9463b51-scss { - border-radius: var(--border-radius-1); - border: 1px solid var(--spice-button-disabled); -} -/* buttons */ -.main-playButton-PlayButton.main-playButton-primary, .main-pageErrorTemplate-errorButton { - color: var(--spice-shadow) !important; -} -.main-skipBackButton-button, .main-skipForwardButton-button, .control-button { - color: var(--spice-button) !important; -} -button.switch { - background-color: transparent !important; -} -#spicetify-home-config button, #spicetify-sidebar-config button { - background-color: var(--spice-button) !important; - color: var(--spice-shadow) !important; - border: none !important; -} -#spicetify-home-config button { - border-radius: var(--border-radius-2) !important; -} -#spicetify-sidebar-config button { - border-radius: var(--border-radius-3) !important; -} -#spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled { - background-color: var(--spice-button-disabled) !important; - color: var(--spice-text) !important; -} -/* category sidebar */ -.main-navBar-navBarLink { - border-radius: var(--border-radius-2); - color: var(--spice-text); -} -.main-navBar-navBarLink:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05); -} -.main-navBar-navBarLink:active { - background-color: rgba(var(--spice-rgb-selected-row),.1); -} -.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:hover, .main-navBar-navBarLinkActive:active, .main-navBar-navBarLinkActive:focus { - background-color: var(--spice-selected-row); - color: var(--spice-shadow); -} -/* playlist sidebar */ -.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss, .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkText { - opacity: 1 !important; -} -._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss, .main-collectionLinkButton-collectionLinkButton { - border-radius: var(--border-radius-2) !important; -} -.main-createPlaylistButton-createPlaylistIcon, .main-likedSongsButton-likedSongsIcon, .main-yourEpisodesButton-yourEpisodesIcon { - border-radius: var(--border-radius-3); -} -.main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistPlaylistHeader { - color: var(--spice-text); -} -.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button, .main-collectionLinkButton-collectionLinkButton { - padding: 8px 16px !important; - margin: 0 8px; -} -.main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button { - margin-top: 24px; -} -.main-createPlaylistButton-button { - width: -webkit-fill-available; -} -.main-rootlist-rootlistItem { - padding-left: calc(8px + var(--indentation)*16px); - padding-right: 8px; -} -.main-rootlist-rootlistItem { - height: 32px; -} -.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:focus, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:hover, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow { - color: var(--spice-shadow); -} -.main-rootlist-expandArrow { - color: var(--spice-text); -} -.main-rootlist-rootlistItemLink { - height: 32px; - border-radius: var(--border-radius-2); - padding: 0 12px; -} -.main-rootlist-expandArrow { - margin-inline-start: -32px; - padding: 8px; -} -.main-rootlist-statusIcons { - margin-inline-start: -24px; - position: relative; - right: 8px; -} -.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover, .main-collectionLinkButton-collectionLinkButton:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05); -} -.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active, .main-collectionLinkButton-collectionLinkButton:active { - background-color: rgba(var(--spice-rgb-selected-row),.1); -} -.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover { - background-color: var(--spice-selected-row); -} -.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected, .main-collectionLinkButton-collectionLinkButton.active { - background: var(--spice-selected-row) !important; - color: var(--spice-shadow); -} -.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper, .main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover { - color: var(--spice-shadow) !important; -} -.main-rootlist-statusIcons > button { - color: var(--spice-text); -} -.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-statusIcons > button { - color: var(--spice-shadow); -} -.main-rootlist-rootlistPlaylistHeader { - display: none; -} -.u7oC25XjY_zFHiqpit_W { - margin-top: 0; -} -/* tracklist */ - .main-trackList-trackList .main-virtualScrollList-wrapper, .main-trackList-trackList .main-rootlist-wrapper, .main-trackList-trackList .vB_gmMwzmB3GcEliiiys, .main-trackList-trackList .JUa6JJNj7R_Y3i4P8YUX { - background-color: rgba(30, 30, 30, 0.4); - border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; - padding: 8px; - backdrop-filter: blur(14px) !important; -} -.main-trackList-indexable { - border-bottom: 16px solid rgba(30, 30, 30, 0.4) !important; - border-radius: 0 0 var(--border-radius-1) var(--border-radius-1); -} -.main-trackList-trackListRow { - border-radius: var(--border-radius-2); -} -.main-trackList-trackListRow:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05); -} -.main-trackList-trackListRow:active { - background-color: rgba(var(--spice-rgb-selected-row),.1); -} -.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover { - background-color: var(--spice-selected-row); -} -.main-trackList-trackListRow.main-trackList-selected .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:hover .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:active .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:focus .main-tag-container { - color: var(--spice-selected-row) !important; - background-color: var(--spice-shadow); -} -.main-tag-container, .main-trackList-rowImage { - border-radius: var(--border-radius-3); -} -.main-trackList-trackListRow.main-trackList-selected span, .main-trackList-trackListRow.main-trackList-selected:hover span, .main-trackList-trackListRow.main-trackList-selected:active span, .main-trackList-trackListRow.main-trackList-selected:focus span, .main-trackList-trackListRow.main-trackList-selected a, .main-trackList-trackListRow.main-trackList-selected:hover a, .main-trackList-trackListRow.main-trackList-selected:active a, .main-trackList-trackListRow.main-trackList-selected:focus a, .main-trackList-trackListRow.main-trackList-selected button, .main-trackList-trackListRow.main-trackList-selected:hover button, .main-trackList-trackListRow.main-trackList-selected:active button, .main-trackList-trackListRow.main-trackList-selected:focus button, .main-trackList-trackListRow.main-trackList-selected div, .main-trackList-trackListRow.main-trackList-selected:hover div, .main-trackList-trackListRow.main-trackList-selected:active div, .main-trackList-trackListRow.main-trackList-selected:focus div { - color: var(--spice-shadow) !important; -} -.main-trackList-trackListHeader { - margin-bottom: 6px; - background-color: transparent !important; -} -._110dbc41d89af63f97cdd8b7cd7fea47-scss { - border: 1px solid var(--spice-text); -} -.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected .main-button-outlined { - border: 1px solid var(--spice-shadow); -} -.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { - border-bottom: none; -} -.main-trackList-statusChangeUp { - color: var(--green); -} -/* big thanks to CharlieS and harbassan for providing the svg */ -.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-selected .main-trackList-playingIcon { - background: var(--spice-shadow); -} -/* headers */ -.main-entityHeader-image:not(.main-entityHeader-circle) { - border-radius: var(--border-radius-1); -} -.x-sortBox-sortDropdown, .x-filterBox-filterInput, .x-filterBox-expandButton:focus, .x-filterBox-expandButton:hover { - border-radius: var(--border-radius-2) !important; -} -.main-actionBar-ActionBarRow > button:not(:first-child), .x-actionBar-ActionButtonsRow > div > button { - color: var(--spice-button); -} -/* artist page */ -.artist-artistPick-pinnedImage, .artist-artistOffers-item { - border-radius: var(--border-radius-2) !important; -} -.artist-artistAbout-container, .main-entityHeader-background, .main-entityHeader-background.main-entityHeader-overlay { - border-radius: var(--border-radius-1); -} -.main-entityHeader-background.main-entityHeader-overlay { - --bgColor: transparent !important; - background: none; -} -.artist-artistOffers-item:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05) !important; -} -.artist-artistOffers-item:active { - background-color: rgba(var(--spice-rgb-selected-row),.1) !important; -} -.main-entityHeader-background { - transform: scale(0.95) !important; - margin-top: 48px; -} -/* podcasts */ -.show-trailer-container, .show-episodeBlock-episodeBlock, .show-show-episodes > :last-child { - border-radius: var(--border-radius-1) !important; -} -.show-episodeBlock-episodeBlock:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05); -} -.show-episodeBlock-episodeBlock:active { - background-color: rgba(var(--spice-rgb-selected-row),.1); -} -.show-show-episodes > :last-child { - padding: 8px 24px; -} -.show-trailer-container, .show-show-episodes > :last-child { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -/* top bar */ -.main-topBar-button, .main-userWidget-box { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); -} -/* tab bars */ -a[class*='-tabBar-headerItemLink'] { - border-radius: var(--border-radius-2) !important; -} -a[class*='-tabBar-active'] { - background-color: rgba(var(--spice-rgb-selected-row),.2) !important; -} -a[class*='-tabBar-headerItemLink']:hover { - background-color: rgba(var(--spice-rgb-selected-row),.05); -} -a[class*='-tabBar-headerItemLink']:active { - background-color: rgba(var(--spice-rgb-selected-row),.1); -} -/* search */ -.x-searchInput-searchInputInput { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; - color: var(--spice-text) !important; - border-radius: var(--border-radius-2) !important; -} -.x-searchInput-searchInputSearchIcon, .x-searchInput-searchInputInput::placeholder, .x-searchInput-searchInputClearButton { - color: var(--spice-text) !important; -} -.x-searchResultsTracks-root .main-gridContainer-gridContainer { - padding: 8px; -} -.main-heroCard-card, .x-searchResultsTracks-root .main-gridContainer-gridContainer { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; - border-radius: var(--border-radius-1); -} -/* error */ -path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 23-23C46 10.297 35.703 0 23 0zm0 44C11.421 44 2 34.579 2 23S11.42 2 23 2c11.579 0 21 9.42 21 21 0 11.579-9.42 21-21 21zm1.872-32.065l-.8 16.192h-2.144l-.832-16.192h3.776zm-3.968 20.768c0-.576.203-1.072.608-1.488a1.979 1.979 0 011.472-.624c.576 0 1.072.208 1.488.624.416.416.624.912.624 1.488s-.208 1.067-.624 1.472a2.056 2.056 0 01-1.488.608 2.006 2.006 0 01-1.472-.608 2.002 2.002 0 01-.608-1.472z"], .spoticon-warning-64::before { - color: var(--spice-notification-error); -} -/* modals */ -.main-trackCreditsModal-container, .main-aboutRecsModal-container, .main-playlistEditDetailsModal-container, .profile-userEditDetails-container, .artist-artistAbout-modal { - - border-radius: var(--border-radius-1) !important; -} -.main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .playlist-inlineSearchBox-filterInput { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -.profile-userEditDetails-nameInput, .profile-userEditDetails-textElement:focus { - background: var(--spice-card) !important; -} -.main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .profile-userEditDetails-textElement:focus, .playlist-inlineSearchBox-filterInput:focus { - border: 1px solid var(--spice-button-active) !important; -} -.playlist-inlineSearchBox-filterInput { - border: 1px solid var(--spice-card); -} -.main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .profile-userEditDetails-nameInput, .playlist-inlineSearchBox-filterInput { - border-radius: var(--border-radius-2) !important; -} -.profile-userEditDetails-labelText:before { - bottom: 8px !important; -} -.main-playlistEditDetailsModal-titleInput::placeholder, .main-playlistEditDetailsModal-descriptionTextarea::placeholder { - color: var(--spice-text); -} -/* dialogs */ -.main-deletePlaylistDialog-container, .main-deleteFolderDialog-container { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; - color: var(--spice-text); - border-radius: var(--border-radius-1); -} -.main-deletePlaylistDialog-secondaryButton, .main-deleteFolderDialog-secondaryButton { - color: var(--spice-button); -} -.main-deletePlaylistDialog-buttonContainer>:last-child, .main-deleteFolderDialog-buttonContainer>:last-child { - background-color: var(--spice-notification-error); -} -/* friend activity */ -.main-buddyFeed-username a { - color: var(--spice-text) !important; -} -.main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata, .main-buddyFeed-playbackContextLink { - color: var(--spice-subtext) !important; -} -.main-buddyFeed-friendActivity, .ythYrlFSBm1P_ltHc8e1 { - background-color: rgba(30, 30, 30, 0.4) !important; - - backdrop-filter: blur(14px) !important; - border-radius: var(--border-radius-1); -} -/* settings */ -.main-dropDown-dropDown, option { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -.main-dropDown-dropDown { - border-radius: var(--border-radius-2) !important; -} -.x-toggle-indicator { - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -.x-settings-facebookButton, .main-connectToFacebook-facebookButton { - color: var(--spice-shadow); -} -input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { - background-color: rgba(var(--spice-rgb-subtext),.3) !important; -} -.x-proxySettings-proxyInput { - border-radius: var(--border-radius-2) !important; - background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px) !important; -} -.x-proxySettings-proxyInput::placeholder { - color: var(--spice-subtext); -} -.x-proxySettings-proxyInput:focus { - border-color: var(--spice-button-active); -} -/* device menu */ -._9eb5acf729a98d62135ca21777fef244-scss, .connect-device-button { - color: var(--spice-shadow); -} -.connect-device-list-container { - border-radius: var(--border-radius-1); - border: 1px solid var(--spice-button-disabled); -} -.connect-device-list-item { - margin: 0 8px; - border-radius: var(--border-radius-2); - width: -webkit-fill-available; -} -.connect-device-list-item:last-child { - margin: 0 8px 8px; -} -.connect-device-list-item:focus, .connect-device-list-item:hover { - background-color: rgba(var(--spice-rgb-selected-row),0.05); -} -.connect-header { - background-color: var(--spice-shadow); - margin: 8px; - border-radius: var(--border-radius-1); -} -/* player */ -.progress-bar { - --fg-color: var(--spice-button-active); -} -.now-playing-bar .cover-art-image { - border-radius: var(--border-radius-2); -} -.playback-bar__progress-time, .playback-bar__progress-time-elapsed, .main-playbackBarRemainingTime-container { - position: absolute; - bottom: -48px; - right: 250px; - color: var(--spice-text) !important; - filter: drop-shadow(0 0 6px var(--spice-text)) !important; -} -.playback-bar__progress-time:first-child { - margin-right: 30px; -} -.playback-bar__progress-time-elapsed { - margin-right: 43px; -} -.playback-bar__progress-time:first-child::after, .playback-bar__progress-time-elapsed::after { - content: " /"; -} -.progress-bar__slider { - opacity: 1; - background-color: var(--spice-card); - border: 2px solid var(--spice-button) -} -.playback-bar .progress-bar__slider { - width: 20px; - height: 20px; -} -.volume-bar .progress-bar__slider { - width: 16px; - height: 16px; - margin-left: -8px; -} -.volume-bar { - margin-right: 8px; -} -.main-playPauseButton-button, .player-controls__buttons button:not(.main-playPauseButton-button) { - --button-size: 48px !important; -} -.main-shuffleButton-button.main-shuffleButton-on:after, .main-repeatButton-button.main-repeatButton-on:after { - bottom: 4px; -} -.main-seekBack15sButton-button, .main-seekForward15sButton-button, .main-speedControlsButton-button { - width: 48px; - min-width: 48px; - height: 48px; - color: var(--spice-button); -} -.main-playPauseButton-button svg { - height: 24px; - width: 24px; -} -.progress-bar--is-active .progress-bar__slider:focus { - background-color: var(--spice-button); -} -.playback-bar { - width: 100%; - bottom: 83px; - position: absolute; -} -.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar { - bottom: 107px; -} -.playback-bar .progress-bar__bg, .playback-bar .progress-bar__fg_wrapper, .playback-bar .progress-bar__fg { - border-radius: 0; - height: 6px; -} -.player-controls__buttons { - margin-bottom: 0; -} -/* ads */ -.desktoproutes-homepage-takeover-ad-hptoHtml-slot { - border-radius: var(--border-radius-1) !important; -} -.desktoproutes-homepage-takeover-ad-floatingTagOrButton-hideButton:focus, .desktoproutes-homepage-takeover-ad-floatingTagOrButton-hideButton:hover { - background-color: var(--spice-button-disabled) !important; -} -/* fullscreen */ -.npv-up-next { - border-radius: var(--border-radius-1); -} -.npv-cover-art img { - border-radius: calc(var(--border-radius-1)*4); -} -.npv-up-next__image { - border-radius: var(--border-radius-2); -} -.npv-up-next { - border: none !important; -} -.npv-progress-bar__rail { - height: 6px; -} -/* Lyrics */ -.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active { - color: var(--lyrics-color-active) !important; - opacity: 1 !important; - text-shadow: 0 0 15px var(--spice-button-disabled) !important; -} - -@keyframes glow { - from { text-shadow: 0 0 10px var(--spice-button); } to {} -} -/* Based on https://cssdeck.com/blog/pure-css-bouncing-ball/ */ -@keyframes moveX { - from { left: 0px; } to { left: 65vw; } -} -@keyframes moveY { - from { top: 0px; } to { top: 80vh; } -} -.lyrics-lyricsContainer-LyricsUnavailablePage { - padding: 10px !important; - white-space: nowrap; - height: 13%; - width: 20%; - position: absolute; - animation: glow 3s ease infinite alternate, - moveX 4.05s linear 0s infinite alternate, - moveY 4.4s linear 0s infinite alternate-reverse; -} -.lyrics-lyricsContainer-LyricsBackground { - opacity: 0.5 !important; -} -/* Change text of the container - -.lyrics-lyricsContainer-LyricsUnavailablePage > span { - visibility: hidden; -} -.lyrics-lyricsContainer-LyricsUnavailablePage > span:after { - content: '...' !important; - visibility: visible; - display: block; -} -*/ - -/* -CANVAS!!! -*/ -/* Fill and center canvas, put it between background and title. Hide when not active */ -#CanvasWrapper { - display: none; - z-index: 1; - position: absolute; - top: 0; - bottom: 0; - height: 100%; - width: 100%; - align-items: center; - justify-content: center; - flex-direction: column; - background: transparent; -} - -/* Show the canvas! */ -.canvas-show #CanvasWrapper { - display: flex; -} - -/* Border and shadow the video so it looks nice */ -#CanvasDisplay { - height: 100%; - width: auto; - background: none; - margin: 0; - text-align: center; - border: 1px solid #00000055; - border-top-width: 0; - border-bottom-width: 0; - box-shadow: 1px 0px 20px 20px #00000055; -} +:root { + --sidebar-y-offset: 10px; + --border-radius-1: 10px; + --border-radius-2: 8px; + --border-radius-3: 4px; + --scrollbars: unset; + --green: #1db954; + --spice-main: transparent; + --spice-misc: rgba(30, 30, 30, 0.8); + --spice-player: rgba(30, 30, 30, 0.4); + --spice-bg: "https://i.imgur.com/Y36v2Bm.jpg"; +} +/* Set the wallpaper to the one matching your color scheme + Source: https://wallpapercave.com/wp/wp5003466.jpg + Purple: https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true + Red: https://github.com/Motschen/Retroblur/blob/main/assets/background_red.jpg?raw=true + Green: https://github.com/Motschen/Retroblur/blob/main/assets/background_green.jpg?raw=true + Yellow: https://github.com/Motschen/Retroblur/blob/main/assets/background_yellow.jpg?raw=true + Blue: https://github.com/Motschen/Retroblur/blob/main/assets/background_blue.jpg?raw=true */ +body { + background-image: url("https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true") !important; + background-repeat: no-repeat; + background-size: 100%; +} +.main-repeatButton-button, .main-shuffleButton-button { + color: var(--spice-subtext); + opacity: 70%; +} +.X1lXSiVj0pzhQCUo_72A, .X1lXSiVj0pzhQCUo_72A:hover { + color: var(--spice-button); +} +.encore-dark-theme { + --background-base: var(--spice-main); +} +.gHYQaG, .iaAUvZ { + /*Fix playlist play button when downloaded from Spicetify Marketplace*/ + background-color: var(--spice-button) !important; +} +.eSMjmiD29Ox35O95waw6:after, .eSMjmiD29Ox35O95waw6:before { + background: transparent !important; +} +.McwcCfBLSuXa5UDU1IMw { + display: none; +} +.n87ifzfQlmGX8vkeYGDL { + visibility: hidden; +} +.hW9km7ku6_iggdWDR_Lg { + --lyrics-color-background: transparent !important; + --lyrics-color-active: var(--spice-text) !important; + --lyrics-color-inactive: var(--spice-subtext) !important; + --lyrics-color-messaging: var(--spice-subtext) !important; +} +.lEsg6gi7HowFgzWl_634 { + --lyrics-color-background: rgba(30, 30, 30, 0.4) !important; +} +.main-connectBar-connectBar, .iUSAh1wdhXLk9hHSbkCA.hsrxlVHxK0zZrgarkxuA:after { + filter: drop-shadow(0 0 6px var(--spice-button)) brightness(50%) !important; +} +.yaVzc4bseRnztmfRv_u3, .volume-bar .progress-bar__slider { + filter: drop-shadow(0 0 6px var(--spice-button)) !important; +} +.main-view-container, .Root__main-view, .os-host-overflow, .os-resize-observer, .os-resize-observer-host, .os-host-overflow>.os-padding { + overflow: hidden !important; +} +.spotify__container--is-desktop:not(.fullscreen) .main-navBar-entryPoints, .main-navBar-navBar, .main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button { + padding-top: var(--sidebar-y-offset); +} +.Root__now-playing-bar { + backdrop-filter: blur(14px) !important; + background-color: rgba(30, 30, 30, 0.6) !important; +} +@keyframes fadingGlow { + from {} to { filter: drop-shadow(0 0 6px var(--spice-button)); } +} +@keyframes fadingGlowWhite { + from {} to { filter: drop-shadow(0 0 6px); } +} +.gSLhUO:hover, .main-playButton-PlayButton.main-playButton-primary:hover, .main-pageErrorTemplate-errorButton:hover, div.GlueDropTarget.personal-library >*.active:hover, .main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive:hover, .main-navBar-navBarLinkActive:hover, .control-button-heart:hover, .gHYQaG:hover, .iaAUvZ:hover { + animation: fadingGlow 1s ease 0.5 forwards !important; +} +a:hover, .main-trackList-rowPlayPauseButton:hover, svg:hover { + animation: fadingGlowWhite 1s ease 0.5 forwards; +} +@keyframes speaker { + 0% { clip-path: inset(0% 50% 0% 0%) } + 50% { clip-path: inset(0% 0% 0% 0%) } + 51% { clip-path: inset(0% 0% 0% 0%) } +} +@keyframes speaker2 { + 0% { visibility: visible } + 1% { visibility: hidden } + 51% { visibility: hidden } +} +#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.LKgm9fCDTO7wqig_5U1q > div > div:nth-child(2) > a > div.gtuJjD43VjwtP8ii3H3P > button > svg > path:nth-child(1) { + animation: speaker 2s steps(2,start) infinite; +} +#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.LKgm9fCDTO7wqig_5U1q > div > div:nth-child(2) > a > div.gtuJjD43VjwtP8ii3H3P > button > svg > path:nth-child(2) { + animation: speaker2 2s steps(2,start) infinite; +} +.main-rootlist-statusIcons > button:hover { + animation: initial !important; +} +._BR2wjXQJR1Enau4faXC { + padding: 4px 0 0 13px; +} +#main > div > div.Root__top-container > div.Root__now-playing-bar > footer > div > div.main-nowPlayingBar-right > div > div.GlueDropTarget.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes > div > button > span > svg { + fill: var(--spice-button); +} +div.GlueDropTarget.personal-library { + padding: 0 0px !important; +} +.playback-bar .progress-bar__slider { + filter: drop-shadow(0 0 6px var(--spice-button)); +} +.main-coverSlotExpanded-container { + -webkit-box-reflect: below; +} +.main-home-content, .main-entityHeader-backgroundColor, .main-actionBar-ActionBar, .content-spacing, :root, .main-navBar-navBar, .D_XKXBZDhgpM1KrmKy3O, .spotify__container--is-desktop:not(.fullscreen) .main-navBar-entryPoints { + background-color: transparent !important; + color: transparent !important; + background-clip: content-box; +} +.Root__nav-bar { + background-color: rgba(30, 30, 30, 0.4); + backdrop-filter: blur(14px) !important; +} +/* scrollbars */ +.os-scrollbar { + display: var(--scrollbars); +} +.os-scrollbar-handle { + border-radius: 50px; + background: var(--spice-button-disabled) !important; +} +/* remove shadows */ +* { + box-shadow: none !important; +} +/* remove gradients */ +.main-home-homeHeader, .main-actionBarBackground-background, .We1fExPHxLIRmV0rZGNo { + background-image: none; +} +.main-actionBarBackground-background, .main-home-homeHeader, .euOnte9wvOF0D_SGxEZ9, .main-topBar-background, .main-topBar-overlay, .x-entityHeader-overlay, .x-actionBarBackground-background, .We1fExPHxLIRmV0rZGNo { + background-color: transparent !important; +} +.x-actionBarBackground-background, .x-entityHeader-overlay, .euOnte9wvOF0D_SGxEZ9 { + background-image: none !important; +} +.main-entityHeader-backgroundColor { + background: transparent; +} +/* remove dividers */ +.main-trackList-trackListHeaderRow, .main-trackCreditsModal-header { + border-bottom: none; + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +.now-playing-bar-container, ._6e96ad0ba78d75ffb2a0156aa1834a21-scss { + border-top: none; +} +.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider, .main-rootlist-rootlistDividerContainer { + display: none; +} +/* cards */ +.main-cardImage-image, .main-cardImage-imageWrapper { + border-radius: var(--border-radius-2); +} +.main-card-card, .x-heroCategoryCard-HeroCategoryCard, .x-categoryCard-CategoryCard, .main-heroCard-card, .view-homeShortcutsGrid-shortcut, .view-homeShortcutsGrid-image { + border-radius: var(--border-radius-1) !important; +} +.main-card-card, .view-homeShortcutsGrid-shortcut { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +/* transitions */ +.main-card-card { + transition: background-color 150ms ease; +} +.link-subtle { + transition-duration: 150ms; +} +/* headers */ +.main-entityHeader-withBackgroundImage { + padding: 0 64px 24px; + margin-top: 48px; +} +.main-entityHeader-title { + font-size: unset; +} +/* menus */ +.main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton { + border-radius: var(--border-radius-2); + color: var(--spice-text); + height: 32px; + padding-left: 8px; +} +.main-contextMenu-menuItem, ._60cb742e518d084c3c959007b9463b51-scss > li { + margin: 2px 6px; +} +.main-contextMenu-menuItem:first-child, ._60cb742e518d084c3c959007b9463b51-scss > :first-child { + margin: 6px 6px 2px; +} +.main-contextMenu-menuItem:last-child { + margin: 2px 6px 6px; +} +._60cb742e518d084c3c959007b9463b51-scss > :last-child { + margin: 2px 6px 8px; +} +.main-contextMenu-menu, ._60cb742e518d084c3c959007b9463b51-scss { + border-radius: var(--border-radius-1); + border: 1px solid var(--spice-button-disabled); +} +/* buttons */ +.main-playButton-PlayButton.main-playButton-primary, .main-pageErrorTemplate-errorButton { + color: var(--spice-shadow) !important; +} +.main-skipBackButton-button, .main-skipForwardButton-button, .control-button { + color: var(--spice-button) !important; +} +button.switch { + background-color: transparent !important; +} +#spicetify-home-config button, #spicetify-sidebar-config button { + background-color: var(--spice-button) !important; + color: var(--spice-shadow) !important; + border: none !important; +} +#spicetify-home-config button { + border-radius: var(--border-radius-2) !important; +} +#spicetify-sidebar-config button { + border-radius: var(--border-radius-3) !important; +} +#spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled { + background-color: var(--spice-button-disabled) !important; + color: var(--spice-text) !important; +} +/* category sidebar */ +.main-navBar-navBarLink { + border-radius: var(--border-radius-2); + color: var(--spice-text); +} +.main-navBar-navBarLink:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05); +} +.main-navBar-navBarLink:active { + background-color: rgba(var(--spice-rgb-selected-row),.1); +} +.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:hover, .main-navBar-navBarLinkActive:active, .main-navBar-navBarLinkActive:focus { + background-color: var(--spice-selected-row); + color: var(--spice-shadow); +} +/* playlist sidebar */ +.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss, .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkText { + opacity: 1 !important; +} +._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss, .main-collectionLinkButton-collectionLinkButton { + border-radius: var(--border-radius-2) !important; +} +.main-createPlaylistButton-createPlaylistIcon, .main-likedSongsButton-likedSongsIcon, .main-yourEpisodesButton-yourEpisodesIcon { + border-radius: var(--border-radius-3); +} +.main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistPlaylistHeader { + color: var(--spice-text); +} +.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button, .main-collectionLinkButton-collectionLinkButton { + padding: 8px 16px !important; + margin: 0 8px; +} +.main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button { + margin-top: 24px; +} +.main-createPlaylistButton-button { + width: -webkit-fill-available; +} +.main-rootlist-rootlistItem { + padding-left: calc(8px + var(--indentation)*16px); + padding-right: 8px; +} +.main-rootlist-rootlistItem { + height: 32px; +} +.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:focus, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:hover, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow { + color: var(--spice-shadow); +} +.main-rootlist-expandArrow { + color: var(--spice-text); +} +.main-rootlist-rootlistItemLink { + height: 32px; + border-radius: var(--border-radius-2); + padding: 0 12px; +} +.main-rootlist-expandArrow { + margin-inline-start: -32px; + padding: 8px; +} +.main-rootlist-statusIcons { + margin-inline-start: -24px; + position: relative; + right: 8px; +} +.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover, .main-collectionLinkButton-collectionLinkButton:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05); +} +.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active, .main-collectionLinkButton-collectionLinkButton:active { + background-color: rgba(var(--spice-rgb-selected-row),.1); +} +.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover { + background-color: var(--spice-selected-row); +} +.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected, .main-collectionLinkButton-collectionLinkButton.active { + background: var(--spice-selected-row) !important; + color: var(--spice-shadow); +} +.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper, .main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover { + color: var(--spice-shadow) !important; +} +.main-rootlist-statusIcons > button { + color: var(--spice-text); +} +.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-statusIcons > button { + color: var(--spice-shadow); +} +.main-rootlist-rootlistPlaylistHeader { + display: none; +} +.u7oC25XjY_zFHiqpit_W { + margin-top: 0; +} +/* tracklist */ + .main-trackList-trackList .main-virtualScrollList-wrapper, .main-trackList-trackList .main-rootlist-wrapper, .main-trackList-trackList .vB_gmMwzmB3GcEliiiys, .main-trackList-trackList .JUa6JJNj7R_Y3i4P8YUX { + background-color: rgba(30, 30, 30, 0.4); + border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; + padding: 8px; + backdrop-filter: blur(14px) !important; +} +.main-trackList-indexable { + border-bottom: 16px solid rgba(30, 30, 30, 0.4) !important; + border-radius: 0 0 var(--border-radius-1) var(--border-radius-1); +} +.main-trackList-trackListRow { + border-radius: var(--border-radius-2); +} +.main-trackList-trackListRow:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05); +} +.main-trackList-trackListRow:active { + background-color: rgba(var(--spice-rgb-selected-row),.1); +} +.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover { + background-color: var(--spice-selected-row); +} +.main-trackList-trackListRow.main-trackList-selected .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:hover .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:active .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:focus .main-tag-container { + color: var(--spice-selected-row) !important; + background-color: var(--spice-shadow); +} +.main-tag-container, .main-trackList-rowImage { + border-radius: var(--border-radius-3); +} +.main-trackList-trackListRow.main-trackList-selected span, .main-trackList-trackListRow.main-trackList-selected:hover span, .main-trackList-trackListRow.main-trackList-selected:active span, .main-trackList-trackListRow.main-trackList-selected:focus span, .main-trackList-trackListRow.main-trackList-selected a, .main-trackList-trackListRow.main-trackList-selected:hover a, .main-trackList-trackListRow.main-trackList-selected:active a, .main-trackList-trackListRow.main-trackList-selected:focus a, .main-trackList-trackListRow.main-trackList-selected button, .main-trackList-trackListRow.main-trackList-selected:hover button, .main-trackList-trackListRow.main-trackList-selected:active button, .main-trackList-trackListRow.main-trackList-selected:focus button, .main-trackList-trackListRow.main-trackList-selected div, .main-trackList-trackListRow.main-trackList-selected:hover div, .main-trackList-trackListRow.main-trackList-selected:active div, .main-trackList-trackListRow.main-trackList-selected:focus div { + color: var(--spice-shadow) !important; +} +.main-trackList-trackListHeader { + margin-bottom: 6px; + background-color: transparent !important; +} +._110dbc41d89af63f97cdd8b7cd7fea47-scss { + border: 1px solid var(--spice-text); +} +.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected .main-button-outlined { + border: 1px solid var(--spice-shadow); +} +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { + border-bottom: none; +} +.main-trackList-statusChangeUp { + color: var(--green); +} +/* big thanks to CharlieS and harbassan for providing the svg */ +.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-selected .main-trackList-playingIcon { + background: var(--spice-shadow); +} +/* headers */ +.main-entityHeader-image:not(.main-entityHeader-circle) { + border-radius: var(--border-radius-1); +} +.x-sortBox-sortDropdown, .x-filterBox-filterInput, .x-filterBox-expandButton:focus, .x-filterBox-expandButton:hover { + border-radius: var(--border-radius-2) !important; +} +.main-actionBar-ActionBarRow > button:not(:first-child), .x-actionBar-ActionButtonsRow > div > button { + color: var(--spice-button); +} +/* artist page */ +.artist-artistPick-pinnedImage, .artist-artistOffers-item { + border-radius: var(--border-radius-2) !important; +} +.artist-artistAbout-container, .main-entityHeader-background, .main-entityHeader-background.main-entityHeader-overlay { + border-radius: var(--border-radius-1); +} +.main-entityHeader-background.main-entityHeader-overlay { + --bgColor: transparent !important; + background: none; +} +.artist-artistOffers-item:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05) !important; +} +.artist-artistOffers-item:active { + background-color: rgba(var(--spice-rgb-selected-row),.1) !important; +} +.main-entityHeader-background { + transform: scale(0.95) !important; + margin-top: 48px; +} +/* podcasts */ +.show-trailer-container, .show-episodeBlock-episodeBlock, .show-show-episodes > :last-child { + border-radius: var(--border-radius-1) !important; +} +.show-episodeBlock-episodeBlock:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05); +} +.show-episodeBlock-episodeBlock:active { + background-color: rgba(var(--spice-rgb-selected-row),.1); +} +.show-show-episodes > :last-child { + padding: 8px 24px; +} +.show-trailer-container, .show-show-episodes > :last-child { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +/* top bar */ +.main-topBar-button, .main-userWidget-box { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px); +} +/* tab bars */ +a[class*='-tabBar-headerItemLink'] { + border-radius: var(--border-radius-2) !important; +} +a[class*='-tabBar-active'] { + background-color: rgba(var(--spice-rgb-selected-row),.2) !important; +} +a[class*='-tabBar-headerItemLink']:hover { + background-color: rgba(var(--spice-rgb-selected-row),.05); +} +a[class*='-tabBar-headerItemLink']:active { + background-color: rgba(var(--spice-rgb-selected-row),.1); +} +/* search */ +.x-searchInput-searchInputInput { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; + color: var(--spice-text) !important; + border-radius: var(--border-radius-2) !important; +} +.x-searchInput-searchInputSearchIcon, .x-searchInput-searchInputInput::placeholder, .x-searchInput-searchInputClearButton { + color: var(--spice-text) !important; +} +.x-searchResultsTracks-root .main-gridContainer-gridContainer { + padding: 8px; +} +.main-heroCard-card, .x-searchResultsTracks-root .main-gridContainer-gridContainer { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; + border-radius: var(--border-radius-1); +} +/* error */ +path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 23-23C46 10.297 35.703 0 23 0zm0 44C11.421 44 2 34.579 2 23S11.42 2 23 2c11.579 0 21 9.42 21 21 0 11.579-9.42 21-21 21zm1.872-32.065l-.8 16.192h-2.144l-.832-16.192h3.776zm-3.968 20.768c0-.576.203-1.072.608-1.488a1.979 1.979 0 011.472-.624c.576 0 1.072.208 1.488.624.416.416.624.912.624 1.488s-.208 1.067-.624 1.472a2.056 2.056 0 01-1.488.608 2.006 2.006 0 01-1.472-.608 2.002 2.002 0 01-.608-1.472z"], .spoticon-warning-64::before { + color: var(--spice-notification-error); +} +/* modals */ +.main-trackCreditsModal-container, .main-aboutRecsModal-container, .main-playlistEditDetailsModal-container, .profile-userEditDetails-container, .artist-artistAbout-modal { + + border-radius: var(--border-radius-1) !important; +} +.main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .playlist-inlineSearchBox-filterInput { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +.profile-userEditDetails-nameInput, .profile-userEditDetails-textElement:focus { + background: var(--spice-card) !important; +} +.main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .profile-userEditDetails-textElement:focus, .playlist-inlineSearchBox-filterInput:focus { + border: 1px solid var(--spice-button-active) !important; +} +.playlist-inlineSearchBox-filterInput { + border: 1px solid var(--spice-card); +} +.main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .profile-userEditDetails-nameInput, .playlist-inlineSearchBox-filterInput { + border-radius: var(--border-radius-2) !important; +} +.profile-userEditDetails-labelText:before { + bottom: 8px !important; +} +.main-playlistEditDetailsModal-titleInput::placeholder, .main-playlistEditDetailsModal-descriptionTextarea::placeholder { + color: var(--spice-text); +} +/* dialogs */ +.main-deletePlaylistDialog-container, .main-deleteFolderDialog-container { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; + color: var(--spice-text); + border-radius: var(--border-radius-1); +} +.main-deletePlaylistDialog-secondaryButton, .main-deleteFolderDialog-secondaryButton { + color: var(--spice-button); +} +.main-deletePlaylistDialog-buttonContainer>:last-child, .main-deleteFolderDialog-buttonContainer>:last-child { + background-color: var(--spice-notification-error); +} +/* friend activity */ +.main-buddyFeed-username a { + color: var(--spice-text) !important; +} +.main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata, .main-buddyFeed-playbackContextLink { + color: var(--spice-subtext) !important; +} +.main-buddyFeed-friendActivity, .ythYrlFSBm1P_ltHc8e1 { + background-color: rgba(30, 30, 30, 0.4) !important; + + backdrop-filter: blur(14px) !important; + border-radius: var(--border-radius-1); +} +/* settings */ +.main-dropDown-dropDown, option { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +.main-dropDown-dropDown { + border-radius: var(--border-radius-2) !important; +} +.x-toggle-indicator { + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +.x-settings-facebookButton, .main-connectToFacebook-facebookButton { + color: var(--spice-shadow); +} +input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { + background-color: rgba(var(--spice-rgb-subtext),.3) !important; +} +.x-proxySettings-proxyInput { + border-radius: var(--border-radius-2) !important; + background-color: rgba(30, 30, 30, 0.4) !important; + backdrop-filter: blur(14px) !important; +} +.x-proxySettings-proxyInput::placeholder { + color: var(--spice-subtext); +} +.x-proxySettings-proxyInput:focus { + border-color: var(--spice-button-active); +} +/* device menu */ +._9eb5acf729a98d62135ca21777fef244-scss, .connect-device-button { + color: var(--spice-shadow); +} +.connect-device-list-container { + border-radius: var(--border-radius-1); + border: 1px solid var(--spice-button-disabled); +} +.connect-device-list-item { + margin: 0 8px; + border-radius: var(--border-radius-2); + width: -webkit-fill-available; +} +.connect-device-list-item:last-child { + margin: 0 8px 8px; +} +.connect-device-list-item:focus, .connect-device-list-item:hover { + background-color: rgba(var(--spice-rgb-selected-row),0.05); +} +.connect-header { + background-color: var(--spice-shadow); + margin: 8px; + border-radius: var(--border-radius-1); +} +/* player */ +.progress-bar { + --fg-color: var(--spice-button-active); +} +.now-playing-bar .cover-art-image { + border-radius: var(--border-radius-2); +} +.playback-bar__progress-time, .playback-bar__progress-time-elapsed, .main-playbackBarRemainingTime-container { + position: absolute; + bottom: -48px; + right: 250px; + color: var(--spice-text) !important; + filter: drop-shadow(0 0 6px var(--spice-text)) !important; +} +.playback-bar__progress-time:first-child { + margin-right: 30px; +} +.playback-bar__progress-time-elapsed { + margin-right: 43px; +} +.playback-bar__progress-time:first-child::after, .playback-bar__progress-time-elapsed::after { + content: " /"; +} +.progress-bar__slider { + opacity: 1; + background-color: var(--spice-card); + border: 2px solid var(--spice-button) +} +.playback-bar .progress-bar__slider { + width: 20px; + height: 20px; +} +.volume-bar .progress-bar__slider { + width: 16px; + height: 16px; + margin-left: -8px; +} +.volume-bar { + margin-right: 8px; +} +.main-playPauseButton-button, .player-controls__buttons button:not(.main-playPauseButton-button) { + --button-size: 48px !important; +} +.main-shuffleButton-button.main-shuffleButton-on:after, .main-repeatButton-button.main-repeatButton-on:after { + bottom: 4px; +} +.main-seekBack15sButton-button, .main-seekForward15sButton-button, .main-speedControlsButton-button { + width: 48px; + min-width: 48px; + height: 48px; + color: var(--spice-button); +} +.main-playPauseButton-button svg { + height: 24px; + width: 24px; +} +.progress-bar--is-active .progress-bar__slider:focus { + background-color: var(--spice-button); +} +.playback-bar { + width: 100%; + bottom: 83px; + position: absolute; +} +.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar { + bottom: 107px; +} +.playback-bar .progress-bar__bg, .playback-bar .progress-bar__fg_wrapper, .playback-bar .progress-bar__fg { + border-radius: 0; + height: 6px; +} +.player-controls__buttons { + margin-bottom: 0; +} +/* ads */ +.desktoproutes-homepage-takeover-ad-hptoHtml-slot { + border-radius: var(--border-radius-1) !important; +} +.desktoproutes-homepage-takeover-ad-floatingTagOrButton-hideButton:focus, .desktoproutes-homepage-takeover-ad-floatingTagOrButton-hideButton:hover { + background-color: var(--spice-button-disabled) !important; +} +/* fullscreen */ +.npv-up-next { + border-radius: var(--border-radius-1); +} +.npv-cover-art img { + border-radius: calc(var(--border-radius-1)*4); +} +.npv-up-next__image { + border-radius: var(--border-radius-2); +} +.npv-up-next { + border: none !important; +} +.npv-progress-bar__rail { + height: 6px; +} +/* Lyrics */ +.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active { + color: var(--lyrics-color-active) !important; + opacity: 1 !important; + text-shadow: 0 0 15px var(--spice-button-disabled) !important; +} + +@keyframes glow { + from { text-shadow: 0 0 10px var(--spice-button); } to {} +} +/* Based on https://cssdeck.com/blog/pure-css-bouncing-ball/ */ +@keyframes moveX { + from { left: 0px; } to { left: 65vw; } +} +@keyframes moveY { + from { top: 0px; } to { top: 80vh; } +} +.lyrics-lyricsContainer-LyricsUnavailablePage { + padding: 10px !important; + white-space: nowrap; + height: 13%; + width: 20%; + position: absolute; + animation: glow 3s ease infinite alternate, + moveX 4.05s linear 0s infinite alternate, + moveY 4.4s linear 0s infinite alternate-reverse; +} +.lyrics-lyricsContainer-LyricsBackground { + opacity: 0.5 !important; +} +/* Change text of the container + +.lyrics-lyricsContainer-LyricsUnavailablePage > span { + visibility: hidden; +} +.lyrics-lyricsContainer-LyricsUnavailablePage > span:after { + content: '...' !important; + visibility: visible; + display: block; +} +*/ + +/* +CANVAS!!! +*/ +/* Fill and center canvas, put it between background and title. Hide when not active */ +#CanvasWrapper { + display: none; + z-index: 1; + position: absolute; + top: 0; + bottom: 0; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + flex-direction: column; + background: transparent; +} + +/* Show the canvas! */ +.canvas-show #CanvasWrapper { + display: flex; +} + +/* Border and shadow the video so it looks nice */ +#CanvasDisplay { + height: 100%; + width: auto; + background: none; + margin: 0; + text-align: center; + border: 1px solid #00000055; + border-top-width: 0; + border-bottom-width: 0; + box-shadow: 1px 0px 20px 20px #00000055; +}