✨ feat: improve equalizer styles

sanoojes · Dec 22, 2024 · 4f10f7f · 4f10f7f
1 parent 8a7f5fd
commit 4f10f7f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/user.css b/src/user.css
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -83,4 +83,4 @@ $under-main-view-height: calc(
 $box-shadow-to-bottom: 0 0.5rem 1rem rgba(var(--spice-rgb-shadow), 0.25);
 
 // equilizer svg
-$equalizer-svg: 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: %23000000; %7D@keyframes play %7B 0%25, 100%25 %7B transform: scaleY(1); %7D 20%25, 80%25 %7B transform: scaleY(0.5); %7D 40%25, 60%25 %7B transform: scaleY(0.2); %7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s 0s infinite ease-out; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s 0.15s infinite ease-out; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s 0.3s infinite ease-out; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s 0.45s infinite ease-out; %7D %23bar5 %7B transform-origin: bottom; animation: play 0.9s 0.6s infinite ease-out; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3EPlaying Icon%3C/title%3E%3Crect id='bar1' width='2' height='24' /%3E%3Crect id='bar2' x='4' width='2' height='24' /%3E%3Crect id='bar3' x='8' width='2' height='24' /%3E%3Crect id='bar4' x='12' width='2' height='24' /%3E%3Crect id='bar5' x='16' width='2' height='24' /%3E%3C/svg%3E");
+$equalizer-svg: 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: %23000000; %7D@keyframes play %7B 0%25, 100%25 %7B transform: scaleY(1); %7D 20%25, 80%25 %7B transform: scaleY(0.5); %7D 40%25, 60%25 %7B transform: scaleY(0.2); %7D %7D %23bar1 %7B transform-origin: bottom; animation: play 1.5s 0s infinite ease-out; %7D %23bar2 %7B transform-origin: bottom; animation: play 1.5s 0.3s infinite ease-out; %7D %23bar3 %7B transform-origin: bottom; animation: play 1.5s 0.15s infinite ease-out; %7D %23bar4 %7B transform-origin: bottom; animation: play 1.5s 0.5s infinite ease-out; %7D %23bar5 %7B transform-origin: bottom; animation: play 1.5s 0.25s infinite ease-out; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3EPlaying Icon%3C/title%3E%3Crect id='bar1' width='2' height='24' /%3E%3Crect id='bar2' x='4' width='2' height='24' /%3E%3Crect id='bar3' x='8' width='2' height='24' /%3E%3Crect id='bar4' x='12' width='2' height='24' /%3E%3Crect id='bar5' x='16' width='2' height='24' /%3E%3C/svg%3E");
diff --git a/styles/default/root.scss b/styles/default/root.scss
@@ -108,18 +108,25 @@ section[data-testid*="playlist"] {
 .x-filterBox-expandButton:hover {
   border-radius: $border-radius-avatar;
 }
+.view-homeShortcutsGrid-PlayButtonContainer {
+  border: none;
+  border-radius: 0px;
+  height: 16px;
+  width: 16px;
+}
+
+.Root__right-sidebar .KYkSwfV1FCtD15TMChbH {
+  height: 24px;
+  width: 24px;
+}
 
 .view-homeShortcutsGrid-PlayButtonContainer:has(
-    .view-homeShortcutsGrid-equaliser
+    .view-homeShortcutsGrid-equaliser[src*="gif"]
   ),
 .Root__right-sidebar .KYkSwfV1FCtD15TMChbH {
   background-color: var(--spice-accent);
   -webkit-mask-image: $equalizer-svg;
   mask-image: $equalizer-svg;
-  height: 24px;
-  width: 24px;
-  border: none;
-  border-radius: 0px;
 
   img,
   svg {