confs

.config/spicetify/Themes/Turntable/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Grason Chan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

.config/spicetify/Themes/Turntable/README.md

@@ -0,0 +1,88 @@
+# Turntable
+
+Based on Spotify original theme.
+
+**Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate!
+
+View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md).
+
+## Screenshots
+
+<div align="center">
+  <img src="screenshots/turntable.png" alt="turntable">
+</div>
+<div align="center">
+  <img src="screenshots/fad.png" alt="full app display">
+</div>
+<div align="center">
+  <img src="screenshots/fad_vertical.png" alt="full app display - vertical mode">
+</div>
+
+## More
+
+### About Turntable
+
+Use CSS to achieve, not picture. This means it can be scaled to any size, but make sure the album cover is not blurry.
+
+Actually, the rotation of the turntable was created at spicetify v1, but in some cases, animation is affected by other factors. I think "fullAppDisplay.js high GPU usage" is the reason. Fortunately, it's normal now!
+
+### Info
+
+Designed and developed by [Grason Chan](https://github.com/grasonchan).
+
+The turntable inspired by [Netease Music](https://music.163.com) and [Smartisan OS build-in Music Player](https://www.smartisan.com/os/#/beauty) (not include code).
+
+Develop and test on macOS. If there's any problem, please open issue or PR.
+
+### Installation
+
+1. add extension - [Full App Display](https://spicetify.app/docs/getting-started/extensions#full-app-display)
+
+```shell
+spicetify config extensions fullAppDisplay.js
+spicetify apply
+```
+
+2. put **Turntable** and **turntable.js** into the **.config/spicetify**
+
+```shell
+cd spicetify-themes
+cp -r Turntable ~/.config/spicetify/Themes
+cp Turntable/turntable.js ~/.config/spicetify/Extensions
+```
+
+3. select the theme and extension, then apply
+
+```shell
+spicetify config current_theme Turntable
+spicetify config extensions turntable.js
+spicetify apply
+```
+
+### How to Uninstall
+
+1. remove **Turntable** and **rotateTurntable.js**
+
+```shell
+rm -r ~/.config/spicetify/Themes/Turntable
+rm ~/.config/spicetify/Extensions/turntable.js
+```
+
+2. config to spicetify default theme
+
+```shell
+spicetify config current_theme SpicetifyDefault
+```
+
+3. remove extension - Full App Display and Turntable(optional)
+
+```shell
+spicetify config extensions fullAppDisplay.js-
+spicetify config extensions turntable.js-
+```
+
+4. apply
+
+```shell
+spicetify apply
+```

.config/spicetify/Themes/Turntable/color.ini

@@ -0,0 +1,3 @@
+; empty config to fix `spicetify apply` error ouput
+
+[turntable]

.config/spicetify/Themes/Turntable/turntable.js

@@ -0,0 +1,315 @@
+window.addEventListener("load", rotateTurntable = () => {
+  const SpicetifyOrigin = Spicetify.Player.origin;
+  const fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']");
+
+  if (!SpicetifyOrigin?._state || !fadBtn) {
+    setTimeout(rotateTurntable, 250);
+    return;
+  }
+
+  const adModalStyle = document.createElement("style");
+  const STYLE_FOR_AD_MODAL = `
+.ReactModalPortal {
+  display: none
+}
+`;
+  adModalStyle.innerHTML = STYLE_FOR_AD_MODAL;
+
+  const fadHeartContainer = document.createElement("div");
+  const fadHeart = document.createElement("button");
+  const fadHeartSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadHeartContainer.classList.add("fad-heart-container");
+  fadHeart.classList.add("fad-heart");
+  fadHeartSvg.setAttribute("width", "16");
+  fadHeartSvg.setAttribute("height", "16");
+  fadHeartSvg.setAttribute("viewBox", "0 0 16 16");
+  fadHeart.appendChild(fadHeartSvg);
+  fadHeartContainer.appendChild(fadHeart);
+
+  const songPreviewContainer = document.createElement("div");
+  const previousSong = document.createElement("button");
+  const nextSong = document.createElement("button");
+  songPreviewContainer.classList.add("song-preview");
+  songPreviewContainer.append(previousSong, nextSong);
+
+  const fadArtistSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadArtistSvg.setAttribute("width", "16");
+  fadArtistSvg.setAttribute("height", "16");
+  fadArtistSvg.setAttribute("viewBox", "0 0 16 16");
+  fadArtistSvg.setAttribute("fill", "currentColor");
+  fadArtistSvg.innerHTML = Spicetify.SVGIcons.artist;
+  const fadAlbumSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadAlbumSvg.setAttribute("width", "16");
+  fadAlbumSvg.setAttribute("height", "16");
+  fadAlbumSvg.setAttribute("viewBox", "0 0 16 16");
+  fadAlbumSvg.setAttribute("fill", "currentColor");
+  fadAlbumSvg.innerHTML = Spicetify.SVGIcons.album;
+
+  let isPlaying, clickedFadBtn;
+
+  function handleRotate(eventType) {
+    if (eventType === "load" && !SpicetifyOrigin._state.item) return;
+
+    const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art");
+    const fadArt = document.querySelector("#fad-art");
+
+    if (
+      eventType === "load" && !SpicetifyOrigin._state.isPaused
+      ||
+      eventType === "playpause" && !isPlaying
+      ||
+      !eventType && isPlaying
+    ) {
+      coverArt?.style.setProperty("animation-play-state", "running");
+      fadArt?.style.setProperty("animation-play-state", "running");
+      if (eventType) isPlaying = true;
+    } else {
+      coverArt?.style.setProperty("animation-play-state", "paused");
+      fadArt?.style.setProperty("animation-play-state", "paused");
+      if (eventType) isPlaying = false;
+    }
+  }
+
+  function handleFadBtn(event) {
+    event.stopPropagation();
+  }
+
+  function handleFadControl() {
+    const fadControlsBtns = document.querySelectorAll("#fad-controls button");
+
+    for (const fadControl of fadControlsBtns) {
+      fadControl.addEventListener("dblclick", handleFadBtn);
+    }
+  }
+
+  function handleFadHeart() {
+    const isFadHeartContainer = document.querySelector(".fad-heart-container");
+
+    const stateItem = SpicetifyOrigin._state.item;
+
+    if (stateItem.isLocal || stateItem.type === "ad") {
+      isFadHeartContainer?.remove();
+      return;
+    }
+
+    if (!isFadHeartContainer) document.querySelector("#fad-foreground")?.appendChild(fadHeartContainer);
+
+    if (Spicetify.Player.getHeart()) {
+      fadHeartSvg.innerHTML = Spicetify.SVGIcons["heart-active"];
+      fadHeart.classList.add("checked");
+    } else {
+      fadHeartSvg.innerHTML = Spicetify.SVGIcons.heart;
+      fadHeart.classList.remove("checked");
+    }
+  }
+
+  function handleTracksNamePreview() {
+    const prevTracks = Spicetify.Queue.prevTracks;
+    const currentTrack = Spicetify.Queue.track;
+    const nextTracks = Spicetify.Queue.nextTracks;
+
+    trackCondition = element => !element.contextTrack.metadata.hidden && element.provider !== "ad";
+
+    const prevTrack = prevTracks.slice().reverse().find(trackCondition);
+    const nextTrack = nextTracks.find(trackCondition);
+
+    const prevTrackTitle = prevTrack.contextTrack.metadata.title;
+    const currentTrackTitle = currentTrack.contextTrack.metadata.title;
+    const nextTrackTitle = nextTrack.contextTrack.metadata.title;
+
+    if (currentTrackTitle === prevTrackTitle && currentTrackTitle === nextTrackTitle) {
+      previousSong.innerHTML = "";
+      nextSong.innerHTML = "";
+    } else {
+      previousSong.innerHTML = `< ${prevTrackTitle}`;
+      nextSong.innerHTML = `${nextTrackTitle} >`;
+    }
+  }
+
+  function handleConfigSwitch() {
+    const fullAppDisplay = document.querySelector("#full-app-display");
+    const fadFg = document.querySelector("#fad-foreground");
+    const genericModal = document.querySelector("generic-modal");
+
+    const stateItem = SpicetifyOrigin._state.item;
+
+    if (!stateItem.isLocal && stateItem.type !== "ad") fadFg.appendChild(fadHeartContainer);
+    fullAppDisplay.appendChild(songPreviewContainer);
+
+    genericModal.remove();
+
+    handleIcons();
+    handleRotate();
+    handleFadControl();
+  }
+
+  function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) {
+    if (!+localStorage.getItem("enableBlurFad")) {
+      fullAppDisplay.dataset.isBlurFad = "true";
+      setBlurBackdropBtn.classList.remove("disabled");
+
+      localStorage.setItem("enableBlurFad", "1");
+    } else {
+      fullAppDisplay.dataset.isBlurFad = "false";
+      setBlurBackdropBtn.classList.add("disabled");
+
+      localStorage.setItem("enableBlurFad", "0");
+    }
+  }
+
+  function handleIcons() {
+    const iconsConfig = JSON.parse(localStorage.getItem("full-app-display-config")).icons;
+
+    if (!iconsConfig) return;
+
+    const isFadArtistSvg = document.querySelector("#fad-artist svg");
+    const isFadAlbumSvg = document.querySelector("#fad-album svg");
+
+    if (SpicetifyOrigin._state.item.type === "ad") {
+      isFadArtistSvg?.remove();
+      isFadAlbumSvg?.remove();
+
+      return;
+    }
+
+    if (!isFadArtistSvg) {
+      const fadArtist = document.querySelector("#fad-artist");
+      const fadArtistTitle = document.querySelector("#fad-artist span");
+
+      fadArtist?.insertBefore(fadArtistSvg, fadArtistTitle);
+    }
+
+    if (!isFadAlbumSvg) {
+      const fadAlbum = document.querySelector("#fad-album");
+      const fadAlbumTitle = document.querySelector("#fad-album span");
+
+      fadAlbum?.insertBefore(fadAlbumSvg, fadAlbumTitle);
+    }
+  }
+
+  function handleContextMenu(fullAppDisplay) {
+    const configContainer = document.querySelector("#popup-config-container");
+    const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0];
+
+    const settingRowContainer = document.createElement("div");
+    const settingRow = `
+<div class="setting-row">
+  <label class="col description">Enable blur backdrop</label>
+  <div class="col action">
+    <button class="${+localStorage.getItem("enableBlurFad") ? "switch" : "switch disabled"}" data-blur-fad>
+      <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z"></path>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+    settingRowContainer.innerHTML = settingRow;
+    configContainer.insertBefore(settingRowContainer, settingRowReferenceNode);
+
+    const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
+    const setBlurBackdropBtn = document.querySelector("[data-blur-fad]");
+
+    for (const configSwitch of configSwitchBtns) {
+      configSwitch.addEventListener("click", handleConfigSwitch);
+    }
+
+    setBlurBackdropBtn.addEventListener("click", () => handleBackdrop(fullAppDisplay, setBlurBackdropBtn));
+  }
+
+  // Todo
+  function handleToggleFad(isActive) {
+    if (isActive) {
+      document.body.append(adModalStyle);
+      return;
+    }
+    
+    const billboard = document.querySelector("#view-billboard-ad");
+
+    billboard?.closest(".ReactModalPortal").remove();
+    adModalStyle.remove();
+  }
+
+  handleRotate("load");
+
+  const nowPlayingBarLeft = document.querySelector(".main-nowPlayingBar-left");
+  const heartHiddenObserver = new MutationObserver(mutationsList => {
+    mutationsLoop:
+    for (const mutation of mutationsList) {
+      for (const addedNode of mutation.addedNodes) {
+        if (
+          addedNode.matches('svg[class]')
+          ||
+          addedNode.matches('button[class^="main-addButton-button"]')
+        ) {
+          handleFadHeart();
+
+          break mutationsLoop;
+        }
+      }
+
+      for (const removedNode of mutation.removedNodes) {
+        if (
+          removedNode.matches('button[class^="main-addButton-button"]')
+        ) {
+          handleFadHeart();
+
+          break mutationsLoop;
+        }
+      }
+    }
+  });
+  heartHiddenObserver.observe(nowPlayingBarLeft, {
+    childList: true,
+    subtree: true,
+  });
+
+  const shuffleBtn = document.querySelector(".main-shuffleButton-button");
+  const shuffleObserver = new MutationObserver(() => {
+    setTimeout(handleTracksNamePreview, 500);
+  });
+  shuffleObserver.observe(shuffleBtn, {
+    attributes: true,
+  });
+
+  Spicetify.Player.addEventListener("onplaypause", () => handleRotate("playpause"));
+  Spicetify.Player.addEventListener("songchange", () => {
+    setTimeout(() => {
+      handleIcons();
+      handleRotate();
+      handleTracksNamePreview();
+    }, 500);
+  });
+
+  fadHeart.addEventListener("click", Spicetify.Player.toggleHeart);
+  previousSong.addEventListener("click", () => SpicetifyOrigin.skipToPrevious());
+  nextSong.addEventListener("click", () => SpicetifyOrigin.skipToNext());
+
+  fadHeart.addEventListener("dblclick", handleFadBtn);
+  previousSong.addEventListener("dblclick", handleFadBtn);
+  nextSong.addEventListener("dblclick", handleFadBtn);
+
+  fadBtn.addEventListener("click", () => {
+    const fullAppDisplay = document.querySelector("#full-app-display");
+
+    fullAppDisplay.appendChild(songPreviewContainer);
+
+    if (!clickedFadBtn) {
+      if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.dataset.isBlurFad = "true";
+
+      handleFadControl();
+
+      fullAppDisplay.addEventListener("contextmenu", () => handleContextMenu(fullAppDisplay), { once: true });
+
+      // fullAppDisplay.addEventListener("dblclick", () => handleToggleFad());
+
+      clickedFadBtn = true;
+    }
+
+    // handleToggleFad(true);
+    handleIcons();
+    handleFadHeart();
+    handleTracksNamePreview();
+    handleRotate();
+  });
+});

.config/spicetify/Themes/Turntable/user.css

@@ -0,0 +1,427 @@
+:root {
+  --spotify-main-color: #1db954;
+  --round-value: 50%;
+  --main-blur-backdrop: blur(20px) saturate(180%);
+  --shine: conic-gradient(
+    from 15deg,
+    transparent,
+    #222 45deg,
+    transparent 90deg 180deg,
+    #222 225deg,
+    transparent 270deg 360deg
+  )
+}
+
+
+/* Remove Upgrade Button, User Name */
+.main-topBar-UpgradeButton,
+.main-userWidget-displayName {
+  display: none
+}
+
+
+/* Notification Dot */
+.main-userWidget-notificationDot {
+  color: #f00
+}
+
+
+/* Navbar */
+.Root__nav-bar {
+  background-color: #0f0f0f
+}
+
+.main-rootlist-rootlistDividerGradient {
+  display: none
+}
+
+
+/* Search Input */
+.x-searchInput-searchInputInput {
+  background-color: #2a2a2a
+}
+
+.x-searchInput-searchInputInput,
+.x-searchInput-searchInputSearchIcon,
+.x-searchInput-searchInputClearButton {
+  color: #c0c0c0 !important
+}
+
+.x-searchInput-searchInputInput::placeholder {
+  color: #888
+}
+
+
+/* Playlist */
+.main-entityHeader-backgroundColor,
+.main-actionBarBackground-background,
+.main-topBar-overlay {
+  background-color: unset !important
+}
+
+.main-entityHeader-overlay {
+  background: unset
+}
+
+.main-actionBarBackground-background {
+  background-image: unset
+}
+
+.main-entityHeader-shadow {
+  box-shadow: unset
+}
+
+.main-topBar-background {
+  background-color: #181818 !important
+}
+
+.main-rootlist-wrapper [role="row"]:nth-child(odd) {
+  background: linear-gradient(to right, #121212, #191919, #121212)
+}
+
+
+/* Cover Image */
+.main-nowPlayingWidget-coverExpanded{
+  transform: translateX(-78px)
+}
+
+.main-coverSlotCollapsed-container {
+  margin-right: 5px
+}
+
+.main-nowPlayingWidget-coverArt .cover-art.shadow,
+.main-nowPlayingWidget-coverArt .cover-art-image {
+  border-radius: var(--round-value)
+}
+
+.main-nowPlayingWidget-coverArt .cover-art.shadow {
+  width: 62px !important;
+  height: 62px !important;
+  box-shadow: unset
+}
+
+.main-nowPlayingWidget-coverArt .cover-art-image {
+  border: 2px solid #aaa;
+  box-shadow: 0 0 5px rgba(200, 200, 200, .4)
+}
+
+/* Expand & Collapse Button */
+.main-coverSlotCollapsed-expandButton {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important
+}
+
+.main-coverSlotCollapsed-expandButton,
+.main-coverSlotExpandedCollapseButton-collapseButton {
+  backdrop-filter: var(--main-blur-backdrop);
+  background: unset;
+  background-color: rgba(9, 9, 9, .2);
+  transition: background-color .5s, opacity .5s;
+  border-radius: var(--round-value)
+}
+
+.main-coverSlotCollapsed-expandButton:hover,
+.main-coverSlotExpandedCollapseButton-collapseButton:hover {
+  background: unset;
+  background-color: rgba(9, 9, 9, .3);
+  transform: unset
+}
+
+.main-coverSlotCollapsed-chevron,
+.main-coverSlotExpandedCollapseButton-chevron {
+  padding: 5px;
+  fill: #fff;
+  transition: fill .5s
+}
+
+.main-coverSlotCollapsed-expandButton:hover .main-coverSlotCollapsed-chevron,
+.main-coverSlotExpandedCollapseButton-collapseButton:hover .main-coverSlotExpandedCollapseButton-chevron {
+  fill: #ddd
+}
+
+
+/* Progress Bar */
+.Root__now-playing-bar {
+  position: relative
+}
+
+.playback-bar {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+.playback-progressbar {
+  height: 4px
+}
+
+.x-progressBar-progressBarBg > div > div {
+  background-color: var(--spotify-main-color)
+}
+
+.playback-bar__progress-time-elapsed,
+.main-playbackBarRemainingTime-container {
+  position: absolute;
+  top: 12px;
+  left: 50%
+}
+
+.playback-bar__progress-time-elapsed {
+  transform: translateX(calc(-100% - 10px))
+}
+
+.playback-bar__progress-time-elapsed::after {
+  position: absolute;
+  left: calc(100% + 10px);
+  font-weight: bold;
+  color: var(--spotify-main-color);
+  content: "/";
+  transform: translateX(-50%)
+}
+
+.main-playbackBarRemainingTime-container {
+  transform: translateX(10px)
+}
+
+.player-controls {
+  margin-top: 38px
+}
+
+
+/* Full App Display */
+#full-app-display {
+  background: radial-gradient(#242424, #1f1f1f)
+}
+
+#fad-background {
+  display: none
+}
+
+#fad-art,
+#fad-art-image,
+#fad-art-inner {
+  border-radius: var(--round-value) !important
+}
+
+#fad-art {
+  width: 268px !important;
+  margin: 80px 100px;
+  position: relative
+}
+
+#fad-art-image {
+  box-shadow: 0 0 10px rgba(3, 3, 3, .5) inset
+}
+
+#fad-art-inner {
+  display: none
+}
+
+#fad-art::before, #fad-art::after {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  content: ''
+}
+
+#fad-art::before {
+  background:
+    var(--shine),
+    radial-gradient(#333, #000);
+  box-shadow:
+    0 0 5px #0a0a0a inset,
+    0 0 5px #000;
+  transform: scale(1.5)
+}
+
+#fad-art::after {
+  background-color: rgba(60, 60, 60, .1);
+  transform: scale(1.65);
+  z-index: -1
+}
+
+#fad-details {
+  max-width: 520px !important
+}
+
+#fad-details #fad-title {
+  font-size: 32px
+}
+
+#fad-details #fad-artist {
+  margin-top: 10px;
+  font-size: 24px
+}
+
+#fad-details #fad-album {
+  margin-top: 6px;
+  font-size: 16px
+}
+
+#fad-details #fad-artist > *,
+#fad-details #fad-album > *,
+#fad-details #fad-status > #fad-controls > * > svg {
+  vertical-align: middle
+}
+
+#fad-details #fad-artist > svg {
+  width: 24px;
+  height: 24px
+}
+
+#fad-details #fad-album > svg {
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  margin-right: 9px
+}
+
+#fad-play > svg {
+  width: 24px;
+  height: 24px
+}
+
+#fad-controls > button > svg {
+  fill: #ccc
+}
+
+#fad-controls > button:hover > svg {
+  fill: #fff
+}
+
+#fad-progress-container {
+  font-size: 12px
+}
+
+#fad-elapsed,
+#fad-duration {
+  min-width: 32px !important
+}
+
+#fad-progress {
+  height: 2px !important;
+  background-color: rgba(100, 100, 100, .5) !important
+}
+
+#fad-progress-inner {
+  background-color: var(--spotify-main-color) !important;
+  box-shadow: unset !important
+}
+
+
+/* Blur the Full App Display */
+[data-is-blur-fad = "true"] #fad-background {
+  display: unset
+}
+
+[data-is-blur-fad = "true"] #fad-art::before {
+  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)
+}
+
+[data-is-blur-fad = "true"] #fad-progress {
+  background-color: rgba(200, 200, 200, .3) !important
+}
+
+
+/* Full App Display - heart */
+.fad-heart-container {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.fad-heart {
+  width: 16px;
+  height: 16px;
+  padding: unset !important;
+  background-color: unset;
+  border: unset
+}
+
+.fad-heart svg {
+  fill: #ccc
+}
+
+.fad-heart svg:hover,
+.fad-heart.checked svg {
+  fill: var(--spotify-main-color)
+}
+
+
+/* Full App Display - song preview */
+.song-preview {
+  width: 100%;
+  padding: 0 10%;
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.song-preview > button {
+  font-size: 14px;
+  color: #ccc !important;
+  background-color: unset;
+  border: unset
+}
+
+.song-preview > button:hover {
+  color: #fff !important
+}
+
+
+/* Responsive */
+@media (max-width: 908px) {
+  #fad-foreground {
+    flex-wrap: wrap;
+    align-content: center
+  }
+
+  #fad-details {
+    padding-top: 50px
+  }
+}
+
+@media (min-width: 1460px) and (min-height: 960px) {
+  #fad-foreground,
+  .main-trackCreditsModal-container {
+    transform: scale(1.2) !important
+  }
+
+  .song-preview > button {
+    font-size: 16px
+  }
+}
+
+
+/* Rotate turntable */
+.main-nowPlayingWidget-coverArt > .cover-art,
+#fad-art {
+  animation: rotate-cover_img 24s linear infinite paused
+}
+
+@keyframes rotate-cover_img {
+  from {
+    transform: rotate(0)
+  }
+  to {
+    transform: rotate(360deg)
+  }
+}