Just Dance Now 2017+ by alxs

/* ==UserStyle==
@name         Just Dance Now 2017+
@version      20240708.00.57
@namespace    https://userstyles.world/user/alxs
@description  Turn JDN in the JD17 Menu!v0.5 pre-release!
@author       alxs
@license      No License
==/UserStyle== */

@-moz-document domain("justdancenow.com") {
#coverflow
{background-image: none!important}
.coverflow--container
{background: none}
.state-songselection #just-dance-now
{background: url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/whitout%20menu.png?v=1670530218331);background-size: 100%;}
.state-coachselection #just-dance-now
{background: url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/whitout%20menu.png?v=1670530218331);background-size: 300%;background-position-x: 100%;}




#section-tabs,.state-songselection #players::before,  .controller-coins, .player-master, .state-songselection .player-color, .danceroom__qr-code-wrapper, .danceroom__label, .room-info__patch, #players.finding-dancers, #players.removing-dancers, .sprite,.state-coachselection .song-action, .tutorial::before, .tutorial::after, .state-coachselection .highscore-display, .state-dance .avatar-wrapper, .state-dance .player-exp, .state-dance .player-flag, .caption.artist, .song-action__button::before, .song-action__button::after, .playlist-action__button, .line::after, .article::before, .exit-btn.exit-btn--play-again.exit-btn--animate, .account, .modal__link.openIframe, .item .song__difficulty, .state-songselection .feedback, .account, .side-nav, .tabs--connect, .song__reward, .state-tutorial #players, .state-dance .player-logo--vip,.state-afterdance #players,#afterdance::before,#afterdance .song-info,.trainer-icon, .dr-landing__icon-wrapper, .dr-landing__label, .landing-patch, .dr-landing::before, .landing__video, .landing-arrow.scroll_down, .landing-text__subtitle, .landing-text__title, .landing-circle, .landing-button__txt, .logo, .toggle::after, .toggles::before, #afterdance .player-solo .player .score::before, .player-logo.player-logo--vip, .songlist-container .song-grid--description, .item-selected .song__decoration:after,.grid-img,.section-grid-trainer,.playlist--banner__selected,.tabs, .state-coachselection #preview:after, .item:after, .video-preview, .sprites-container,.info-panel, .song-grid--description , .song-grid--duration,.connect-phone-info--clickable .connect-phone-info__text::before, .modal__container::after, #admin-menu .menu__head,#admin-menu .legal__list, #admin-menu .player--controller::before, .state-coachselection #preview:before,.connect-phone-info--visible, .item-selected .song__decoration:after, .item-selected .title-container ,.state-coachselection #players,#settings,.player-megastar,#afterdance .flag,.exit-btn:before,.dancerOfWeek-container, .state-coachselection .song-grid--details
{display: none !important}

.coverflow--container {
    float: left;
    width: calc(105% - 0rem);
    height: 110%;
    position: absolute;
    padding: 0.2rem 0.15rem 0.1rem 0.25rem;
    margin: 0 0.15rem 0 0;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px 6px 12px #908f8f;
    font-family: "Just Dance Regular";
	top: -0%;
	left: -2.45%;
	z-index: 99999;
}

#room-info
{
    background: #0000;
    left: 91%;
    width: 10%;
    border-radius: 15px;
    height:9.85% !important;
    min-height: 0% !important;
    top: 0%;
    opacity: 1;  
	text-align: end !important;
}

#room-info:after
{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	border-bottom: 2px #fff6 solid;
	top: -55%; left: 73%;
}

.ThatPower
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/e/e5/Thatpower_jd2017_menu.png/revision/latest/scale-to-width-down/1000?cb=20210105170607)}

.danceroom__number
{
    text-shadow: none;
    color: #fff6;
    font-size: 30%;
    text-align: left !important;
}	

#preview
{background-color: #00000017;
 width: 95.7%;left:2%;height: 20%;will-change: contents !important;}

.song-cover
{
	width: 462%;
	height:260%;
	border: black 0px solid;
	top:-36%;
	left:-7%;
	background-image:url(https://imgur.com/59lHwA5.png);
	background-size: cover;
	border-radius: 0px;
	pointer-events: none !important;
	transition: none !important;
	will-change: contents !important;
}

.song-cover:after
{
	width:100%;
	height:100%;
	content:"";
	position: absolute;
	background-size: contain;
	border: #ffffff94 0.01em solid;
	background-repeat: no-repeat;
	will-change: contents !important;
}

.song-cover:before
{
	width:100%;
	height:100%;
	content:"";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 999;
	will-change: contents !important;
}

.state-songselection .song-cover:before
{
	width:33%;
	height:59%;
	content:"";
	background-color: #fff0;
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	left: 60%;
	top:5%;
	z-index: 999;
	-webkit-mask-image: linear-gradient(hsl(0, 0%, 0%)90%,#00001000 94%) !important;
    transform-origin: center bottom;
	transform: scale3d(1.0, 1, 1);
}

.state-songselection .song-cover--low-res
{top: 0; left: 0; background: none !important; z-index: 9 !important; opacity: 0;}

.state-songselection .song-cover:after
{
	width:48%;
	background-color: #ffffff7d;
	height:42.5%;
	content:"";
	position: absolute;
	background-size: 101%;
	background-repeat: no-repeat;
	background-position: center;
	top:14.3%;
	left:54%;
	box-shadow: 0px 0px 50px black;
}

@keyframes beatafter
{
	0%
	{background-size:105%}
    100%
	{background-size:101%}
}

.state-songselection .pre-beat.even[oddiseven="false"] .song-cover:before
{animation: beatbefore2 0.6s, CoachAlbumAni 0.5s !important}

.state-songselection .pre-beat.even[oddiseven="true"] .song-cover:before
{animation: beatbefore 0.6s, CoachAlbumAni 0.5s !important}


/*after*/

.state-songselection .pre-beat.even[oddiseven="true"] .song-cover:after
{animation: beatafter 0.6s}



@keyframes beatbefore
{
        0%{
		filter: brightness(150%);
            transform: scale3d(.98, .98, .96);
        }
        100%{
            transform: scale3d(1, 1, 1);
	}
}

@keyframes beatbefore2
{
	0%{
		filter: brightness(110%);
            transform: scale3d(.99, .99, -1.99);
        }
        100%{
            transform: scale3d(1, 1, 1);
}
}

.state-songselection #preview:before
{
	content: "";
	position: absolute;
	z-index: 999;
	background:url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/sinus%20wave1.png?v=1682805031542);
	background-size: 50%;
	height: 80%;
	width: 5.56em;
	top: 180%;
	opacity:0.5;
	background-repeat: repeat-x;
	background-position-x: 750%;
	background-position-y: 70%;
	background-color: #0000;
	-webkit-mask: url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/sinus%20wave1.png?v=1682805031542) !important;
	-webkit-mask-size: 55% !important;
	-webkit-mask-position: center !important;
	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, .74) 40%,black 70%,rgba(0, 0, 0, .65));
	animation: waveeffect 1800s infinite linear; 
	mix-blend-mode: overlay;
}

@keyframes waveeffect
{
	0%
	{background-position-x: -900em }
	100%
	{background-position-x: 0em}
}

.pre-beat.even[oddiseven="true"]:after
{animation: wavebeat 0.5s,waveeffect2 1800s infinite linear !important}

@keyframes wavebeat
{
	0%
	{opacity:1}
}

.state-songselection .left-pane:before
{
	content: "";
	z-index: 1;
	position: absolute;
	background-image: url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/flechas.png?v=1682803890038);
	background-size: 34%;
	background-position-y: center;
	background-position-x: 0%;
	top: 126%; left: 250%;
	width: 25%;
	height: 8%;
	mix-blend-mode: overlay;
	-webkit-mask-image: linear-gradient(to right,transparent,black,transparent);
	animation: paneleft 180s infinite linear;
	opacity: 0.8
}

@keyframes paneleft
{
	0%
	{
		background-position-x: 0;
	}
	100%
	{
		background-position-x: 9000%;
	}
}

.state-songselection #preview:after
{
	content: "";
	position: absolute;
	z-index: 999;
	background:url(https://cdn.glitch.global/313a4e89-327b-42df-a282-87503104767a/sinus%20wave%202.png?v=1682805030805);
	background-size: 80%;
	height: 90%;
	width: 5.56em;
	top: 170%;
	opacity:0.5;
	background-repeat: repeat-x;
	background-position-x: 750%;
	background-position-y: 70%;
	background-color: #0000;
	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, .74) 40%,black 70%,rgba(0, 0, 0, .65));
	animation: waveeffect2 1800s infinite linear; 
	mix-blend-mode: overlay;
}

@keyframes waveeffect2
{
	0%
	{background-position-x: 900em }
	100%
	{background-position-x: 0em}
}

.item-container
{
    width: 100000% !important;
    height: 9% !important;
}

.playlist:hover .playlist--img, .playlist-selected:hover .playlist--img
{
    padding: 0 !important
}	
	
.playlist--img
	{
		transform: scale(1.05);
	}

.playlist-grid .playlist--title {
    display: block;
    font-size: 0.185rem;
    line-height: 0.23rem;
    color: #fff;
    font-family: "Just Dance Regular";
    letter-spacing: -1px;
}

.playlist-grid-container
{
    width: 100% !important;
    position: absolute;
	top: 53%;
	height: 20% !important;
    display: flex;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 3.36%;
    padding-left: 1%;
}

.playlist-grid .playlist--description {
    font-size: 0.138rem;
    line-height: 0.168rem;
    color: #46464600;
    display: block;
}

.playlist--title
{
    color: #fff !important;
    font-family: Just Dance Regular !important;
    font-size: 93% !important;
    letter-spacing: 0.01em !important;
    padding-left: 1% !important
}

.playlist-img-container .playlist--banner__selected {
    width: 4rem;
    height: 2.2rem;
    margin:...