diff --git a/assets/background_blue.jpg b/assets/background_blue.jpg new file mode 100644 index 0000000..7be63a6 Binary files /dev/null and b/assets/background_blue.jpg differ diff --git a/assets/background_green.jpg b/assets/background_green.jpg new file mode 100644 index 0000000..63607bd Binary files /dev/null and b/assets/background_green.jpg differ diff --git a/assets/background_red.jpg b/assets/background_red.jpg new file mode 100644 index 0000000..385b379 Binary files /dev/null and b/assets/background_red.jpg differ diff --git a/assets/background_yellow.jpg b/assets/background_yellow.jpg new file mode 100644 index 0000000..a7b48cc Binary files /dev/null and b/assets/background_yellow.jpg differ diff --git a/color.ini b/color.ini index e9f054f..320181b 100644 --- a/color.ini +++ b/color.ini @@ -8,7 +8,7 @@ ; button-disabled = volume & seekbar background, scrollbar handle, borders ; everything else = self-explanatory -[purple-dark] +[purple] text = ffffff subtext = f70bff main = 0c0e14 @@ -25,24 +25,7 @@ notification = 1a181e notification-error = fb7c7c misc = 0c0e14 -[purple-light] -text = 402b4d -subtext = 9d91a3 -main = f9f7f9 -sidebar = f9f7f9 -player = f9f7f9 -card = ffffff -shadow = ffffff -selected-row = 9f74e7 -button = 9f74e7 -button-active = 9f74e7 -button-disabled = ffffff -tab-active = 9f74e7 -notification = ffffff -notification-error = fb7c7c -misc = f9f7f9 - -[red-dark] +[red] text = ffffff subtext = ff0105 main = 0c0e14 @@ -59,157 +42,53 @@ notification = 1a181e notification-error = fb7c7c misc = 0c0e14 -[red-light] -text = 572920 -subtext = a9908b -main = faf7f6 -sidebar = faf7f6 -player = faf7f6 -card = ffffff -shadow = ffffff -selected-row = ff5966 -button = ff5966 -button-active = ff5966 -button-disabled = ffffff -tab-active = ff5966 -notification = ffffff -notification-error = fb7c7c -misc = faf7f6 - -[blue-dark] -text = bde6fb -subtext = 6d8692 -main = 1e2529 -sidebar = 1e2529 -player = 1e2529 -card = 171d20 -shadow = 171d20 -selected-row = bde6fb -button = bde6fb -button-active = bde6fb -button-disabled = 2a3439 -tab-active = bde6fb -notification = 171d20 -notification-error = fb7c7c -misc = 1e2529 - -[blue-light] -text = 123354 -subtext = 8495a7 -main = f5f7fa -sidebar = f5f7fa -player = f5f7fa -card = ffffff -shadow = ffffff -selected-row = 22c5fd -button = 22c5fd -button-active = 22c5fd -button-disabled = ffffff -tab-active = 22c5fd -notification = ffffff -notification-error = fb7c7c -misc = f5f7fa - -[gray-dark] +[green] text = ffffff -subtext = 909090 -main = 202020 -sidebar = 202020 -player = 202020 -card = 191919 -shadow = 191919 -selected-row = ffffff -button = ffffff -button-active = ffffff -button-disabled = 313131 -tab-active = ffffff -notification = 191919 +subtext = 00bd00 +main = 0c0e14 +sidebar = 0c0e14 +player = 0c0e14 +card = 1a181e +shadow = 1a181e +selected-row = 00aa00 +button = 00aa00 +button-active = 00aa00 +button-disabled = 302b36 +tab-active = 00aa00 +notification = 1a181e notification-error = fb7c7c -misc = 202020 +misc = 0c0e14 -[gray-light] -text = 29292a -subtext = 909091 -main = f7f7f7 -sidebar = f7f7f7 -player = f7f7f7 -card = ffffff -shadow = ffffff -selected-row = 61717c -button = 61717c -button-active = 61717c -button-disabled = ffffff -tab-active = 61717c -notification = ffffff +[yellow] +text = ffffff +subtext = 918500 +main = 0c0e14 +sidebar = 0c0e14 +player = 0c0e14 +card = 1a181e +shadow = 1a181e +selected-row = c8b700 +button = c8b700 +button-active = c8b700 +button-disabled = 302b36 +tab-active = c8b700 +notification = 1a181e notification-error = fb7c7c -misc = f7f7f7 +misc = 0c0e14 -[green-dark] -text = bbf1dd -subtext = 6b8a7f -main = 1b2421 -sidebar = 1b2421 -player = 1b2421 -card = 151c19 -shadow = 151c19 -selected-row = bbf1dd -button = bbf1dd -button-active = bbf1dd -button-disabled = 27332f -tab-active = bbf1dd -notification = 151c19 +[blue] +text = ffffff +subtext = 0000aa +main = 0c0e14 +sidebar = 0c0e14 +player = 0c0e14 +card = 1a181e +shadow = 1a181e +selected-row = 0055ff +button = 0055ff +button-active = 0055ff +button-disabled = 302b36 +tab-active = 0055ff +notification = 1a181e notification-error = fb7c7c -misc = 1b2421 - -[green-light] -text = 19483e -subtext = 88a19c -main = f6f9f9 -sidebar = f6f9f9 -player = f6f9f9 -card = e5eceb -shadow = ffffff -selected-row = 2ae18e -button = 2ae18e -button-active = 2ae18e -button-disabled = e5eceb -tab-active = 2ae18e -notification = e5eceb -notification-error = fb7c7c -misc = f6f9f9 - -[orange-dark] -text = fcc8b4 -subtext = 927367 -main = 271e1b -sidebar = 271e1b -player = 271e1b -card = 1e1715 -shadow = 1e1715 -selected-row = fcc8b4 -button = fcc8b4 -button-active = fcc8b4 -button-disabled = 372b26 -tab-active = fcc8b4 -notification = 1e1715 -notification-error = fb7c7c -misc = 271e1b - -[orange-light] -text = 563b25 -subtext = a89a8e -main = faf8f7 -sidebar = faf8f7 -player = faf8f7 -card = ffffff -shadow = ffffff -selected-row = ff8265 -button = ff8265 -button-active = ff8265 -button-disabled = ffffff -tab-active = ff8265 -notification = ffffff -notification-error = fb7c7c -misc = faf8f7 - - +misc = 0c0e14 diff --git a/user.css b/user.css index 331cfd6..2bef26d 100644 --- a/user.css +++ b/user.css @@ -6,14 +6,66 @@ --green: #1db954; --spice-main: transparent; --spice-misc: rgba(30, 30, 30, 0.8); - --spice-player: rgba(30, 30, 30, 0.8); + --spice-player: rgba(30, 30, 30, 0.4); + --spice-bg: "https://i.imgur.com/Y36v2Bm.jpg"; } -/* Source: https://wallpapercave.com/wp/wp5003466.jpg */ -body, .root { - background-image: url("https://i.imgur.com/Y36v2Bm.png") !important; +/* 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%; } +.Root__now-playing-bar { + backdrop-filter: blur(14px) !important; +} +@keyframes fadingGlow { + from {} to { filter: drop-shadow(0 0 6px var(--spice-button)); } +} +@keyframes fadingGlowWhite { + from {} to { filter: drop-shadow(0 0 6px var(--spice-text)); } +} +.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 { + animation: fadingGlow 1s ease 0.5 forwards !important; +} +a:hover, .control-button-heart:hover, .main-trackList-rowPlayPauseButton: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 } +} +#spicetify-show-list > div:nth-child(8) > a > div.main-rootlist-statusIcons > button > svg > path:nth-child(1), +#spicetify-playlist-list > div > div:nth-child(2) > li:nth-child(1) > div > div > button > svg > path:nth-child(1) { + animation: speaker 2s steps(2,start) infinite; +} +#spicetify-show-list > div:nth-child(8) > a > div.main-rootlist-statusIcons > button > svg > path:nth-child(2), +#spicetify-playlist-list > div > div:nth-child(2) > li:nth-child(1) > div > div > button > svg > path:nth-child(2) { + animation: speaker2 2s steps(2,start) infinite; +} +.main-rootlist-statusIcons > button:hover { + animation: initial !important; +} +div.GlueDropTarget.personal-library { + padding: 0 0px !important; +} +.playback-bar .progress-bar__slider { + filter: drop-shadow(0 0 6px var(--spice-button)); +} +._ZB2JcJdiG6rpEgCd3sR { + filter: drop-shadow(0 0 10px var(--spice-shadow)); +} .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; @@ -21,11 +73,8 @@ body, .root { } .Root__nav-bar { background-color: rgba(30, 30, 30, 0.4); - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; } -a:hover { - text-shadow: 0 0 5px var(--spice-text); - } /* scrollbars */ .os-scrollbar { display: var(--scrollbars); @@ -55,7 +104,7 @@ a:hover { .main-trackList-trackListHeaderRow, .main-trackCreditsModal-header { border-bottom: none; background-color: rgba(30, 30, 30, 0.4); -backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; } .now-playing-bar-container, ._6e96ad0ba78d75ffb2a0156aa1834a21-scss { border-top: none; @@ -72,7 +121,7 @@ backdrop-filter: blur(14px); } .main-card-card, .view-homeShortcutsGrid-shortcut { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; } /* transitions */ .main-card-card { @@ -235,7 +284,7 @@ button.switch { 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); + backdrop-filter: blur(14px) !important; } .main-trackList-indexable { border-bottom: 16px solid rgba(30, 30, 30, 0.4) !important; @@ -334,7 +383,7 @@ button.switch { } .show-trailer-container, .show-show-episodes > :last-child { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; } /* top bar */ .main-topBar-button, .main-userWidget-box { @@ -357,7 +406,7 @@ a[class*='-tabBar-headerItemLink']:active { /* search */ .x-searchInput-searchInputInput { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; color: var(--spice-text) !important; border-radius: var(--border-radius-2) !important; } @@ -369,7 +418,7 @@ a[class*='-tabBar-headerItemLink']:active { } .main-heroCard-card, .x-searchResultsTracks-root .main-gridContainer-gridContainer { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; border-radius: var(--border-radius-1); } /* error */ @@ -383,7 +432,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 } .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); + backdrop-filter: blur(14px) !important; } .profile-userEditDetails-nameInput, .profile-userEditDetails-textElement:focus { background: var(--spice-card) !important; @@ -406,7 +455,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 /* dialogs */ .main-deletePlaylistDialog-container, .main-deleteFolderDialog-container { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; color: var(--spice-text); border-radius: var(--border-radius-1); } @@ -425,7 +474,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 } .main-buddyFeed-friendActivity { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; border-radius: var(--border-radius-1); margin: 8px; padding: 8px 8px 8px 12px; @@ -442,14 +491,14 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 /* settings */ .main-dropDown-dropDown, option { background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + 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); + backdrop-filter: blur(14px) !important; } .x-settings-facebookButton, .main-connectToFacebook-facebookButton { color: var(--spice-shadow); @@ -460,7 +509,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { .x-proxySettings-proxyInput { border-radius: var(--border-radius-2) !important; background-color: rgba(30, 30, 30, 0.4) !important; - backdrop-filter: blur(14px); + backdrop-filter: blur(14px) !important; } .x-proxySettings-proxyInput::placeholder { color: var(--spice-subtext); @@ -499,7 +548,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { .now-playing-bar .cover-art-image { border-radius: var(--border-radius-2); } -.playback-bar__progress-time, .main-playbackBarRemainingTime-container { +.playback-bar__progress-time, .playback-bar__progress-time-elapsed, .main-playbackBarRemainingTime-container { position: absolute; bottom: -48px; right: 250px; @@ -508,7 +557,10 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { .playback-bar__progress-time:first-child { margin-right: 30px; } -.playback-bar__progress-time:first-child::after { +.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 { @@ -586,7 +638,6 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { height: 6px; } - /* Lyrics */ .lyrics-lyricsContainer-LyricsContainer { height: calc(100vh - 116px) !important; @@ -611,11 +662,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { } @keyframes glow { - from { - text-shadow: 0 0 10px var(--spice-button); - } - to { - } + from { text-shadow: 0 0 10px var(--spice-button); } to {} } /* Based on https://cssdeck.com/blog/pure-css-bouncing-ball/ */ @keyframes moveX {