From 5c0a523e54b35333ed8d10ac94dd5a97a5a26908 Mon Sep 17 00:00:00 2001
From: Grason Chan <grasonchan@gmail.com>
Date: Tue, 16 Nov 2021 01:07:39 +0800
Subject: [PATCH] feat(Turntable): add shine effect for the turntable

---
 Turntable/rotateTurntable.js |  2 +-
 Turntable/user.css           | 35 +++++++++++++++++++++++++----------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/Turntable/rotateTurntable.js b/Turntable/rotateTurntable.js
index 0525c26..71ff948 100644
--- a/Turntable/rotateTurntable.js
+++ b/Turntable/rotateTurntable.js
@@ -51,7 +51,7 @@ window.addEventListener("load", rotateTurntable = () => {
     if (eventType === "load" && !SpicetifyOrigin._state.item) return;
 
     const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art");
-    const fadArt = document.querySelector("#fad-art-image");
+    const fadArt = document.querySelector("#fad-art");
 
     if (
       eventType === "load" && !SpicetifyOrigin._state.isPaused
diff --git a/Turntable/user.css b/Turntable/user.css
index 80ed548..dd87623 100644
--- a/Turntable/user.css
+++ b/Turntable/user.css
@@ -1,7 +1,15 @@
 :root {
   --spotify-main-color: #1db954;
   --round-value: 50%;
-  --main-blur-backdrop: blur(20px) saturate(180%)
+  --main-blur-backdrop: blur(20px) saturate(180%);
+  --shine:
+    conic-gradient(
+      from 15deg,
+      transparent, #222 45deg, transparent 90deg,
+      transparent 90deg 180deg,
+      transparent 180deg, #222 225deg, transparent 270deg,
+      transparent 270deg 360deg
+    )
 }
 
 
@@ -198,10 +206,9 @@
 }
 
 #fad-art {
-  width: 300px !important;
-  margin: 60px 80px;
-  position: relative;
-  transform: scale(.85)
+  width: 255px !important;
+  margin: 80px 100px;
+  position: relative
 }
 
 #fad-art-image {
@@ -223,8 +230,12 @@
 }
 
 #fad-art::before {
-  background: radial-gradient(#333, #000);
-  box-shadow: 0 0 10px #000;
+  background:
+    var(--shine),
+    radial-gradient(#333, #000);
+  box-shadow:
+    0 0 5px #0a0a0a inset,
+    0 0 5px #000;
   transform: scale(1.5)
 }
 
@@ -309,13 +320,17 @@
 }
 
 [data-is-blur-fad = "true"] #fad-art::before {
-  background: radial-gradient(#242424, #000)
+  background:
+    var(--shine),
+    radial-gradient(#242424, #000)
 }
 
 [data-is-blur-fad = "true"] #fad-art::after {
   background-color: rgba(100, 100, 100, .1);
   border: 1px solid rgba(100, 100, 100, .1);
-  box-shadow: 0 0 1px rgba(40, 40, 40, .2) inset, 0 0 1px rgba(200, 200, 200, .2)
+  box-shadow:
+    0 0 1px rgba(40, 40, 40, .2) inset,
+    0 0 1px rgba(200, 200, 200, .2)
 }
 
 [data-is-blur-fad = "true"] #fad-progress {
@@ -393,7 +408,7 @@
 
 /* Rotate turntable */
 .main-nowPlayingWidget-coverArt > .cover-art,
-#fad-art-image {
+#fad-art {
   animation: rotate-cover_img 24s linear infinite paused
 }