My Spicetify extension

CustomCSS.js

(() => {
	let cssStyle = `
	.spicy-dynamic-bg:is(.lowqmode) {
	  opacity: 0.1 !important;
	}
	.BeautifulLyricsBackground-Container img,
	.spicy-dynamic-bg img {
	  display: none;
	}
	.Root__right-sidebar:has(.main-nowPlayingView-section, canvas)
	  .BeautifulLyricsBackground
	  div:has(> video)
	  video {
	  filter: none !important;
	  height: calc(100vh - 140px);
	  mask: linear-gradient(
		180deg,
		transparent,
		transparent 0,
		#000 0,
		#000 95%,
		transparent 100%,
		transparent
	  ) !important;
	}

	.Root__right-sidebar:has(video) {
	  --background-tint: color-mix(
		in srgb,
		var(--spice-shadow) 25%,
		transparent
	  ) !important;
	}
	body:has(.BeautifulLyricsPage.Fullscreen.BeautifulLyricsBackground)
	  #Desktop_LeftSidebar_Id,
	body:has(.BeautifulLyricsPage.Fullscreen.BeautifulLyricsBackground)
	  .Root__now-playing-bar,
	body:has(.BeautifulLyricsPage.Fullscreen.BeautifulLyricsBackground)
	  .Root__main-view,
	body:has(.BeautifulLyricsPage.Fullscreen.BeautifulLyricsBackground)
	  .Root__right-sidebar,
	body:has(.BeautifulLyricsPage.Fullscreen.BeautifulLyricsBackground)
	  .main-topBar-container {
	  display: none;
	}

	.player-controls {
	  flex-direction: row;
	  padding-left: 20px;
	}
	.player-controls:has(canvas) {
	  padding-right: 20px;
	}
	.player-controls__buttons {
	  flex-basis: 0;
	}
	.main-nowPlayingBar-left {
	  max-width: 300px;
	}
	.main-nowPlayingBar-right {
	  max-width: 450px;
	  margin-right: 20px;
	  min-width: unset !important;
	}
	.main-nowPlayingBar-center {
	  max-width: none !important;
	  width: 80%;
	}
	.main-nowPlayingView-coverArt {
	  border-radius: 50%;
	}
	.main-nowPlayingBar-nowPlayingBar {
	  height: min-content;
	}
	.canvasVideoContainerNPV {
	  -webkit-mask: none !important;
	  mask: none !important;
	  mask-image: none !important;
	  -webkit-mask-image: none !important;
	}
	#BeautifulLyrics-CardView {
	  position: relative;
	}
	.Root__right-sidebar:has(video) .main-nowPlayingView-contextItemInfo {
	  background-color: var(--background-tint);
	  padding: 10px;
	  border-radius: 8px;
	  backdrop-filter: blur(4px);
	  border-style: solid;
	  border-color: black;
	  border-width: 1px;
	}
	.Root__right-sidebar:has(video) #BeautifulLyrics-CardView,
	.Root__right-sidebar:has(video) .main-nowPlayingView-section {
	  backdrop-filter: blur(4px);
	  border-style: solid;
	  border-color: black;
	  border-width: 1px;
	}
	.main-nowPlayingView-section button > div {
	  display: flex;
	  flex-direction: row;
	  align-items: stretch;
	}
	.main-nowPlayingView-section button > div > div:first-child {
	  width: 40%;
	  padding-bottom: 31%;
	}
	.main-nowPlayingView-section:has(figure) button > div > div:first-child {
	  display: flex;
	  flex-direction: column;
	  margin-top: 8px;
	  gap: 10px;
	  align-items: center;
	  text-align: center;
	  padding-bottom: 0px;
	}
	.main-nowPlayingView-sectionHeaderText {
	  -webkit-line-clamp: none !important;
	  line-clamp: none !important;
	}
	.main-nowPlayingView-aboutArtistV2Listeners {
	  flex-direction: column;
	  align-items: normal;
	}
	`;
	let cssElem = document.createElement('style');
	cssElem.innerHTML = cssStyle;
	document.body.appendChild(cssElem);
	cssStyle = `
	.main-nowPlayingView-coverArt .cover-art,
	.main-nowPlayingWidget-coverArt .cover-art {
	  animation: rotating 30s linear infinite;
	  transition: filter 0.1s linear;
	}
	
	@keyframes rotating {
	  from {
		transform: rotate(0deg);
	  }
	  to {
		transform: rotate(360deg);
	  }
	}

	.cover-art {
	  clip-path: circle(50% at 50% 50%);
	}

	.main-nowPlayingView-coverArt .cover-art::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 22%;
	  height: 22%;
	  background: radial-gradient(
		  circle at center,
		  rgba(24, 22, 35, 0.9) 0%,
		  rgba(24, 22, 35, 0.9) 38%,
		  rgba(255, 255, 255, 0.1) 38%,
		  rgba(255, 255, 255, 0.1) 40%,
		  rgba(24, 22, 35, 0.9) 40%,
		  rgba(24, 22, 35, 0.9) 100%
		),
		repeating-radial-gradient(
		  circle at center,
		  rgba(255, 255, 255, 0.1) 0,
		  rgba(255, 255, 255, 0.1) 1px,
		  transparent 1px,
		  transparent 4px
		);
	  border-radius: 50%;
	  pointer-events: none;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset,
		0 0 20px rgba(255, 255, 255, 0.1);
	}

	.main-nowPlayingView-coverArt .cover-art::before {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 6%;
	  height: 6%;
	  background: rgba(24, 22, 35, 1);
	  border-radius: 50%;
	  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
	  z-index: 1;
	}
	
	.main-nowPlayingView-coverArt .cover-art:hover::after {
		opacity: 0.5;
	}

	.main-nowPlayingView-coverArt .cover-art:hover::before {
		opacity: 0.5;
	}

	.main-nowPlayingBar-left button {
	  background: transparent;
	}
	`;
	cssElem = document.createElement('style');
	cssElem.innerHTML = cssStyle;
	document.body.appendChild(cssElem);
	let interval = setInterval(() => {
		if (!Spicetify?.Player) 
			return;
		if (Spicetify.Player.isPlaying()) {
			cssElem.sheet.rules[0].style.animationPlayState = 'running';
			cssElem.sheet.rules[0].style.filter = 'none';
		}
		else {
			cssElem.sheet.rules[0].style.animationPlayState = 'paused';
			cssElem.sheet.rules[0].style.filter = 'grayscale(75%)';
		}
		clearInterval(interval);
	}, 250);
	  
	Spicetify.Player.addEventListener("songchange", (e) => {
		cssElem.sheet.rules[0].style.animationPlayState = 'running';
		cssElem.sheet.rules[0].style.filter = 'none';
	});
	Spicetify.Player.addEventListener("onplaypause", (e) => {	
		if (e.data.isPaused) {			
			cssElem.sheet.rules[0].style.animationPlayState = 'paused';
			cssElem.sheet.rules[0].style.filter = 'grayscale(75%)';
		}
		else {
			cssElem.sheet.rules[0].style.animationPlayState = 'running';
			cssElem.sheet.rules[0].style.filter = 'none';
		}
	});
})();