Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-25 04:12:29 +01:00
Code Issues Projects Releases Activity

feat(Turntable): add shine effect for the turntable

Browse Source
This commit is contained in:
Grason Chan 2021-11-16 01:07:39 +08:00
parent f2ef742cde
commit 5c0a523e54
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Turntable/rotateTurntable.js
View File

@ -51,7 +51,7 @@ window.addEventListener("load", rotateTurntable = () => {
if (eventType === "load" && !SpicetifyOrigin._state.item) return; if (eventType === "load" && !SpicetifyOrigin._state.item) return;
const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art"); const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art");
const fadArt = document.querySelector("#fad-art-image"); const fadArt = document.querySelector("#fad-art");
if ( if (
eventType === "load" && !SpicetifyOrigin._state.isPaused eventType === "load" && !SpicetifyOrigin._state.isPaused

35
Turntable/user.css
View File

@ -1,7 +1,15 @@
:root { :root {
--spotify-main-color: #1db954; --spotify-main-color: #1db954;
--round-value: 50%; --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 { #fad-art {
width: 300px !important; width: 255px !important;
margin: 60px 80px; margin: 80px 100px;
position: relative; position: relative
transform: scale(.85)
} }
#fad-art-image { #fad-art-image {
@ -223,8 +230,12 @@
} }
#fad-art::before { #fad-art::before {
background: radial-gradient(#333, #000); background:
box-shadow: 0 0 10px #000; var(--shine),
radial-gradient(#333, #000);
box-shadow:
0 0 5px #0a0a0a inset,
0 0 5px #000;
transform: scale(1.5) transform: scale(1.5)
} }
@ -309,13 +320,17 @@
} }
[data-is-blur-fad = "true"] #fad-art::before { [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 { [data-is-blur-fad = "true"] #fad-art::after {
background-color: rgba(100, 100, 100, .1); background-color: rgba(100, 100, 100, .1);
border: 1px solid 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 { [data-is-blur-fad = "true"] #fad-progress {
@ -393,7 +408,7 @@
/* Rotate turntable */ /* Rotate turntable */
.main-nowPlayingWidget-coverArt > .cover-art, .main-nowPlayingWidget-coverArt > .cover-art,
#fad-art-image { #fad-art {
animation: rotate-cover_img 24s linear infinite paused animation: rotate-cover_img 24s linear infinite paused
} }