NowPlaying JustDance style (Rotating widget) by robert1334

/* ==UserStyle==
@name          NowPlaying JustDance style (Rotating widget)
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://eu1.nowplaying.site/rotating"), url-prefix("https://us1.nowplaying.site/rotating") {
	html,
	body {
		height: 100%;
	}
	
	body {
		font-family: Helvetica Neue LT W1G, Arial;
		margin: 0;
	}

	#app-cover {
		position: absolute;
		right: 0;
		left: 0;
		width: 50px;
		height: 100px;
		margin: -4px auto;
		transition: opacity .4s ease, transform .4s ease, width .4s ease;
		opacity: 0;
		transform: scale(1);
	}

	#app-cover.raise {
		opacity: 1;
		transform: translateY(0);
	}

	#app-cover.active {
		width: 350px;
	}

	#bg-layer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.51;
		z-index: 2;
	}

	#player {
		position: relative;
		height: 100%;
		z-index: 3;
	}

	#player-track {
		position: absolute;
		padding-left: 70px;
		padding-top: 25px;
		top: 0;
		height: 75px;
		width: 100%;
		max-width: 270px;
		overflow: hidden;
		background: linear-gradient(to right, #fff ,  #fff  , #100f3a00 22%  , #3a0f0f00 95%, #fff);
	}

	#player-track .artists-height-fix{
  position:relative;
  top:40px;
  padding-left:2px;
}
	
	#album-name {
		color: hsl(0, 0%, 44%);
		font-weight: 300;
		margin: 0;
		font-size: 20px;
		text-transform: capitalize;
	}

	#track-name { 
 	position:absolute;
	bottom:39px;
	padding-left:2px;
	color: #000;
	margin: 0px 0 0;
	font-size: 32px;
	z-index: -1;
	}

	#player-content {
		position: relative;
		height: 100%;
		background-color: rgb(255, 255, 255);
		border-radius: 15px;
		z-index: 4;
		width: 100%;
		max-width: 350px;
	}

	#album-art {
		position: absolute;
		width: 88px;
		height: 88px;
		margin-left: -30px;
		transform: rotateZ(0);
		transition: 0.3s ease all;
		border-radius: 15%;
		overflow: hidden;
		z-index: 2;
	}

	#album-art.active {
		top: 6px;
		box-shadow: 0 0 0 6px #fff, 0 0px 0px -0px #fff;
	}

	#album-art:before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		width: 20px;
		height: 20px;
		margin: -10px auto 0 auto;
		background-color: #d6dee700;
		border-radius: 50%;
		z-index: 2;
	}

	#album-art img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: -1;
	}

	#album-art img.active {
		opacity: 1;
		z-index: 1;
	}

	#album-art.active img.active {
		z-index: 1;
		animation:
	}

	@keyframes rotateAlbumArt {
		0% {
			transform: rotateZ(0);
		}
		0% {
			transform: rotateZ(0deg);
		}
	}

	#album-art img {
		transition: 0.1s linear all;
	}

	#album-art.buffering img {
		opacity: 0.25;
	}

	#album-art.buffering img.active {
		opacity: 0.8;
		filter: blur(2px);
		-webkit-filter: blur(2px);
	}

	h4,
	h2 {
		opacity: 0;
		white-space: nowrap;
		transform: translateX(-50px);
		transition: opacity .4s ease, transform .4s ease;
		display: inline-block;
	}

	h4.active,
	h2.active {
		opacity: 1;
		transform: translateX(0);
	}

	h4.drop,
	h2.drop {
		transform: translateY(0px);
	}

	.artists-height-fix {
		min-height: 20px;
	}

	h2.scrolling,
	h4.scrolling {
		/* -webkit-animation: slide 20s linear infinite; */
		position: absolute;
		animation: slide 23s linear infinite;
	}

	@keyframes slide {
		50% {
			/* left: 100%; */
			transform: translateX(40px);
		}
		50% {
			/* left: -100%; */
			transform: translateX(-50%);
		}
	}
}