Retroblur 1.2.0 - Animations & Colors

- Animate the speaker icons visible next to the currently playing playlist
- Overhaul color schemes
- Prepare for the upcoming 2021 Spotify icon update
- Add Spicetify marketplace integration

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]
+[red]
-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]
 text               = ffffff
 subtext            = ff0105
 main               = 0c0e14
@@ -59,157 +42,53 @@ notification       = 1a181e
 notification-error = fb7c7c
 misc               = 0c0e14
 
-[red-light]
+[green]
-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]
 text               = ffffff
-subtext            = 909090
+subtext            = 00bd00
-main               = 202020
+main               = 0c0e14
-sidebar            = 202020
+sidebar            = 0c0e14
-player             = 202020
+player             = 0c0e14
-card               = 191919
+card               = 1a181e
-shadow             = 191919
+shadow             = 1a181e
-selected-row       = ffffff
+selected-row       = 00aa00
-button             = ffffff
+button             = 00aa00
-button-active      = ffffff
+button-active      = 00aa00
-button-disabled    = 313131
+button-disabled    = 302b36
-tab-active         = ffffff
+tab-active         = 00aa00
-notification       = 191919
+notification       = 1a181e
 notification-error = fb7c7c
-misc               = 202020
+misc               = 0c0e14
 
-[gray-light]
+[yellow]
-text               = 29292a
+text               = ffffff
-subtext            = 909091
+subtext            = 918500
-main               = f7f7f7
+main               = 0c0e14
-sidebar            = f7f7f7
+sidebar            = 0c0e14
-player             = f7f7f7
+player             = 0c0e14
-card               = ffffff
+card               = 1a181e
-shadow             = ffffff
+shadow             = 1a181e
-selected-row       = 61717c
+selected-row       = c8b700
-button             = 61717c
+button             = c8b700
-button-active      = 61717c
+button-active      = c8b700
-button-disabled    = ffffff
+button-disabled    = 302b36
-tab-active         = 61717c
+tab-active         = c8b700
-notification       = ffffff
+notification       = 1a181e
 notification-error = fb7c7c
-misc               = f7f7f7
+misc               = 0c0e14
 
-[green-dark]
+[blue]
-text               = bbf1dd
+text               = ffffff
-subtext            = 6b8a7f
+subtext            = 0000aa
-main               = 1b2421
+main               = 0c0e14
-sidebar            = 1b2421
+sidebar            = 0c0e14
-player             = 1b2421
+player             = 0c0e14
-card               = 151c19
+card               = 1a181e
-shadow             = 151c19
+shadow             = 1a181e
-selected-row       = bbf1dd
+selected-row       = 0055ff
-button             = bbf1dd
+button             = 0055ff
-button-active      = bbf1dd
+button-active      = 0055ff
-button-disabled    = 27332f
+button-disabled    = 302b36
-tab-active         = bbf1dd
+tab-active         = 0055ff
-notification       = 151c19
+notification       = 1a181e
 notification-error = fb7c7c
-misc               = 1b2421
+misc               = 0c0e14
-
-[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
-
-

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 */
+/* Set the wallpaper to the one matching your color scheme
-body, .root {
+ Source: https://wallpapercave.com/wp/wp5003466.jpg
-    background-image: url("https://i.imgur.com/Y36v2Bm.png") !important;
+ 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 {
+  from { text-shadow: 0 0 10px var(--spice-button); } to {}
-      text-shadow: 0 0 10px var(--spice-button);
-    }
-  to {
-    }
 }
 /* Based on https://cssdeck.com/blog/pure-css-bouncing-ball/ */
 @keyframes moveX {