☰

Just Dance 2021aw Style

Miwdamicks the ui of JwdD2021 for JDN

/* ==UserStyle==
@name         Just Dance 2021aw Style
@namespace    Ticpo
@version      1.0.0
@description  Miwdamicks the ui of JwdD2021 for JDN
@author       Ticpo
@include      https://justdancenow.com/*
==/UserStyle== */

@-moz-document domain("justdancenow.com") {
@font-face
{
    font-family: "Mojangle";
    src: url('https://dl.dropboxusercontent.com/s/ea1uzrgu1w7myau/1_Minecraft-Regular.woff?dl=0') format('woff') ;
}

#players, .fragment .fill
{
    opacity: 0 
}

.state-dance #players
{
    opacity: 1
}

.players .score .stars .star
{
    background-image: url(https://imgur.com/xEjVyK0.png) !important;
    background-size: 80% !important
}

.score.superstar .stars .star, #players .player.superstar .star
{
    background-image: url(https://imgur.com/WdN9FQJ.png) !important
}

.score.megastar .stars .star, #players .player.megastar .star
{
    background-image: url(https://imgur.com/xBEJDlU.png) !important
}


h2, h1, p, div, h3, span, button, .song-action__button
{
    font-family: Mojangle !important
}

.spinner
{
    animation: PanoramaMove 145s !important;
    background-image: url(https://imgur.com/2eqv3K3.png) !important;
    width: 30% !important;
    background-size: cover;
    fill: #f000 !important;
    transform: scale(0.4)
}

.init-spinner--splash:before
{
    content:'';
    height:100%;
    width:100vw;
    position:absolute;
    top:-5vh;
    left:2vw;
    background-image:url(https://imgur.com/OyO2Ieq.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center !important;
    transform: scale(0.7);
    z-index: 99999999 !important
}

.fullscreen-spinne
{
    display: block !important;
    visibility: visible !important;
    z-index: 9999999999999999999 !important;
    opacity: 1 !important;
    background: black
}

#toast
{
    transform: translatey(-30.2em) translatex(-31em) !important;
    z-index: 9999999;
    position: absolute !important;
    width: 90%;
    background: #18171a;
    border: solid #434343 0.2em
}

.toast__content
{
    color: white !important;
    text-align: left !important;
    font-size: 140%;
    padding-top: 0.2%;
    width: 150% !important
}

.toast__image
{
    transform: scale(0.2);
    top: -95%;
}

#balloons
{
    position: absolute !important
}

.connect-phone-info, .video-preview__video, .song-detail__artist, .song__reward, .sprite, .highscore-display, .song-action__button:before, .song-action__button:after, .toggles, .tabs--connect, .song__difficulty--level, .tabs--icon, .selected:before, .landing__video, #explore, #catalog, #features, #how-it-works, #download, .footer, .main-header, .landing-arrow, .landing-circle, .landing-button__play:before, .side-nav, .section-grid-trainer, .room-info__patch, .danceroom__qr-code-wrapper, .coach-selection:after, .coach-selection__bgImg, .state-dance #just-dance-now:before, .state-dance #just-dance-now:after, .state-dance #room-info, .platform, .coach:before, .coach-selection__title, .playlist-img-container, .song-grid--close, .song-grid--description, .song-grid--duration, .state-coachselection .song-grid, .song__decoration:after, .state-loadingdance #room-info, .state-tutorial #room-info, .tutorial #room-info, .state-afterdance #room-info, .tabs:after, .coach-selection__button, .toast__color, .modal, #dance-transition, #afterdance:before, .exit-btn:before, .avatarFlag, #afterdance .crown, #racetrack .star[data-visible="true"]:after, #racetrack .star[data-visible="true"]:before, #players:before, .feedback, .highScore.highScore__show.show, #players .star:before, #players .star:after, .tutorial::before, .tutorial::after, .tutorial, .score:after, .player-special, #players.finding-dancers, #players.removing-dancers
{display: none !important}

.landing-text__title
{
    color: #ff2f2f00;
    background-image: url(https://imgur.com/a3o9kP8.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 15%;
    transform: scale(1.1);
    position: absolute;
    top: 18%
}

.landing-text__subtitle
{
    color: yellow;
    transform: rotate(-21deg);
    animation: SubZoom 0.5s infinite !important;
    top: 25% !important;
    position: absolute !important;
    left: 60%;
    width: 25% !important
}

@keyframes SubZoom
{
    0%
    {
        transform: rotate(-21deg) scale(1);
    }
    
    50%
    {
        transform: rotate(-21deg) scale(1.05);
    }
    
    100%
    {
        transform: rotate(-21deg) scale(1);
    }
}

.landing-button
{
    width: 25%;
    background: #c6c6c6;
    height: 9%;
    background-image: none !important;
    position: absolute;
    top: 55%;
    transition: none !important
}

.landing-button:active
{
    background: #218306!important;
    border: solid white 0.3em;
    color: white !important
}

.landing-button:active .landing-button__txt
{
    color: white 
}

.landing-button__txt
{
    color: #414141;
    top: 47%;
    transition: none !important;
    position: absolute
}

.landing__content
{
    position: fixed;
    background: none !important
}

.main, #play, .init-spinner
{
    background: none !important
}

#coverflow
{
    background: none !important;
    top: -18%;
    height: 120% !important;
    background-size: cover;
    animation: PanoramaMove 900s linear infinite;;
    background-repeat: repeat
}

.dr-landing
{
    top: 10em !important
}

body
{
    background-image: url(https://imgur.com/rLPgjYg.png) !important;
    background-size: cover !important;
    animation: PanoramaMove 100s linear infinite !important;
    background-repeat: repeat !important;
    height: 100% !important;
    position: fixed;
}

.state-songselection body, .state-coachselection body, .tutorial body, .state-loadingdance body, .state-tutorial body, .state-afterdance body
{
    animation: PanoramaMove 900s linear infinite !important;
}

.state-loadingdance body, .state-tutorial body, .tutorial body, .state-dance body
{
    animation-play-state: paused !important;
}

.state-dance body
{
    background: black !important
}

@keyframes PanoramaMove {
    100% {
        background-position: -100em 70%, center
    }
    0% {
        background-position: 0 70%, center
    }
}

#room-info
{
    top: 77%;
    transition: none;
    background: none;
    width: 40%;
}


.danceroom__number
{
    text-shadow: none;
    background: #c6c6c6;
    color: #414141;
    width: 18.5em;
    height: 2em;
    font-size: 21%;
    text-align: center;
    padding-top: 0.3em;
    border: solid #1a1a1a 0.1em;
}

.danceroom__label
{
    color: white;
    font-size: 19% !important;
    transform: translatex(-2%) translatey(-15%)
}

.state-songselection #just-dance-now:before, .state-coachselection #just-dance-now:before, .state-afterdance #just-dance-now:before
{
    content: "";
    width: 10.5em;
    height: 0.28em;
    display: block;
    position: absolute;
    background: #c6c6c6;
    left: 0%;
    z-index: 9999 !important;
    box-shadow: 0px -0.23em 0px 0.27em #525153;
}

.state-songselection #just-dance-now:after, .state-coachselection #just-dance-now:after
{
    content: "Choose Song";
    width: 10.5em;
    height: 0.22em;
    display: block;
    position: absolute;
    left: 1%;
    z-index: 9999 !important;
    top: 1%;
    font-size: 18%;
    color: #242424
}

.state-tutorial #just-dance-now:before
{
    content: "";
    background-image: url(https://imgur.com/a3o9kP8.png) !important;
    top: 15%;
    box-shadow: none;
    background: #fff0;
    height: 15%;
    width: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    left: 25%;
    position: absolute
}


.state-afterdance #just-dance-now:after
{
    content: "Results";
    width: 10.5em;
    height: 0.22em;
    display: block;
    position: absolute;
    left: 1%;
    z-index: 9999 !important;
    top: 1%;
    font-size: 18%;
    color: #242424
}

#just-dance-now
{
    background: none !important
}

#preview
{
    display: block !important;
    visibility: visible !important;
    
}

#preview:before
{
    content: "";
    width: 10%;
    height: 100em;
    display: block;
    position: absolute;
    border-left: #525153 solid 0.035em;
    left: -35.5%
}

.coverflow--container:before
{
    content: "";
    height: 100em !important;
    width: 100em !important;
    top: 0%;
    background: #000000c7;
    display: block;
    position: absolute;
    left: -5%;
    z-index: -2 !important
    
}

.coverflow--container
{
    top: -102% !important;
    left: 0%;
    width: 100%;
    height: 130%;
    background: #fff0;
    background-size: contain;
    background-repeat: no-repeat;
}

.song-cover
{
    left: -5.73em;
    top: -15.8%;
    border: none;
    width: 177.5%;
    height: 102%;
    background-size: cover !important;
    border-radius: 0px;
    background-position: center 0%
}

.song-details
{
    background: #5e5e5e !important;
    top: 24% !important;
    left: -46% !important;
    width: 165.5% !important;
    border-radius: 0px !important;
    height: 10%
}

.pane.left-pane:before
{
    content:"Map Name";
    display: block;
    position: absolute;
    top: 1%;
    color: white;
    width: 150%;
    transform: scale(0.18);
    left: -3.79em
}

.song__infos
{
    width: 100%
}

.song-detail__title
{
    color: #ffffffe0 !important;
    transform: translatey(35%) translatex(0%)!important;
    font-size: 18% !important
}

.song-action
{
    left: -109.4%;
    top: -22%;
    transition: none !important;
    display: block !important;
    visibility: visible !important
}

.song-action__button
{
    width: 196.8%;
    height: 86%;
    border-radius: 0px;
    font-size: 20%;
    background: #c6c6c6 !important;
    color: #414141;
    transition: none !important;
    border: solid #1a1a1a 0.1em !important
}

.song-action__button:active
{
    background: #218306!important;
    color: white !important;
    border: solid white 0.1em !important
}

.song-preview:before
{
    content:"Difficulty";
    display: block;
    position: absolute;
    top: 1%;
    color: white;
    width: 150%;
    transform: scale(0.18);
    left: -2.98em
}

.video-preview
{
    border: none;
    left: -1.58em;
    height: 20%;
    border-radius: 0px;
    width: 261% !important;;
    background: #5e5e5e;
    top: .7em;
    display: block !important;
    transition: none !important;
    visibility: visible !important;
    opacity: 1 !important
}

.song__difficulty:after
{
    font-size: 19% !important;
    top: 0%;
    height: 100% !important;
    text-align: left
}
.song__difficulty
{
    width: 20% !important;
    text-align: left;
    background: none;
    left: 0%
}

#section-tabs
{
    top: 3.4em !important;
    left: .8%;
    width: 34.3%;
    display: block !important;
    z-index: 999 !important
}

#section-tabs:before
{
    content:"Categories";
    display: block;
    position: absolute;
    top: -11.5%;
    color: white;
    width: 150%;
    transform: scale(0.18);
    left: -62%
}

ul.tabs li
{
    box-shadow: none !important;
    border: solid #1a1a1a 0.2em;
    background: #c6c6c6 !important;
    height: 3.5em !important;
    width: 112% !important
}

ul.tabs li.selected
{
    background: #8b8b8b !important;
}

ul.tabs li.selected .tabs--text
{
    color: black !important
}

ul.tabs li:active
{
    background: #218306!important;
    border: solid white 0.15em;
    color: white !important
}

ul.tabs li:active .tabs--text
{
    color: white !important
}

.tabs--text
{
    width: 21.3em !important;
    font-size: 140%;
    color: #414141 !important;
    transform: translatey(-30%) !important
}

.section-grid-trainer
{
    top: 10%
}

#section-playlist, #section-songlist
{
    z-index: 99999999999 !important;
    width: 60%;
    left: 40.3%
}

.song-grid
{
    transform: translatey(26%);
    width: 150%
}

.song-grid--titleDetails
{
    height: 40% !important;
    border: none !important;
    left: -10% !important
}

.song-grid--title
{
    color: white !important;
}

.song--details
{
    top: 3%;
    left: 7%;
    z-index: 99999999 !important;
    height: 49% !important;
    padding-right: 0% !important
}

.item-container
{
    padding-right: 0% !important;
}

.playlist-grid
{
    height: 19.5em !important;
    left: 0.2%;
    top: 26%;
    z-index: 999999 !important
}

.playlist
{
    width: 150% !important;
    top: 10%
}

.playlist--title
{
    color: white !important
}

.song-grid--title:before
{
    content:"Playlist - ";
}

.state-coachselection .coverflow--container
{
    display: block !important;
    visibility: visible !important;
    z-index: 10 !important;
    opacity: 1 !important;
    left: 0%;
    top: -102% !important;
    height: 123.4%;
    width: 100%;
    border-radius: 0px !important
}

.coach-selection
{
    background: none !important;
    top: 0%;
    left: 40%;
    height: 100%;
    width: 100%;
    border-radius: 0em !important;
    z-index: 10 !important;
}

.coach-selection__list:before
{
    content:"On your phone, choose which dancer to follow.";
    display: block;
    position: absolute;
    top: -11.5%;
    color: white;
    width: 200%;
    transform: scale(0.4);
    left: -60.2%
}

.coach-selection__list
{
    width: 58%;
    left: 1%;
    top: 48%;
    height: 50%
}

.coach
{
    transform: scale(1);
    top: 3%;
    height: 40%;
    left: 6%
}

.coach__img
{
    left: 0%;
    top: 0%
}

.coach__names-list
{
    left: 5em !important
}

.coach__player-list
{
    opacity: 1 !important;
    background: #5e5e5e !important;
    color: #ffffffd6 !important;
}







#lyrics .line.previous {
    -webkit-transform: perspective(0px) translateY(0em) rotateX(0deg);
    transform: perspective(0px) translateY(0em) rotateX(0deg);
}

#lyrics .line.current {
    transform: translatey(-18.5%);
    transition: none !important
}

#lyrics .line.previous {
    transform: translatey(-18.5%) !important;
    transition: .4s all !important
}

#lyrics .line {
    -webkit-animation: nextLineInf 0.2s;
    animation: none 0.35s;
    color: #8f8c89;
}

@-webkit-keyframes nextLineInf {
    0%,
    20% {
        opacity: 0;
        -webkit-transform: perspective(0px) translateY(2.5em) rotateX(0deg);
        transform: perspective(0px) translateY(2.5em) rotateX(0deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
        transform: translateY(1em) perspective(0px) rotateX(0deg);
    }
}
@keyframes nextLineInf {
    0%,
    20% {
        opacity: 0;
        -webkit-transform: perspective(0px) translateY(2.5em) rotateX(0deg);
        transform: perspective(0px) translateY(2.5em) rotateX(0deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
        transform: translateY(1em) perspective(0px) rotateX(0deg);
    }
}

#lyrics {
    transform: scale(0.85);
    left: -3%;
    top: 15%;
    z-index: 99999999999999999999999999999 !important;
    font-family: helveticaneue-medium !important;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3)!important;
    letter-spacing: 0.02em;
    font-size: 22%
}

.line
{
    background: #00000070;
    padding-left: 1%;
    width: 120%
}

#racetrack .star
{
    background-image: url(https://imgur.com/XHzVt3S.png);
    animation: none !important;
    transform: scale(0.8) rotate(-15deg);
    background-size: 90%
}

#racetrack .star[data-visible="true"]
{
    background-image: url(https://imgur.com/nQNKURa.png) !important;
}

#racetrack-fill-p1, #racetrack-fill-p2, #racetrack-fill-p3, #racetrack-fill-p4 
{transition: .3s all !important}

.multi-coach .picto {
    left: -2%!important;
}

.score:before
{
    display: none !important
}

#afterdance
{
    top: -16%;
    height: 100%;
    background-size: contain;
    background: #000000c7;
}

.exit-btn
{
    background: #c6c6c6 !important;
    color: #414141;
    top: 7.8%;
    left: 69%;
    width: 28%;
    height: 5%;
    padding: .5%;
    border: solid #1a1a1a 0.1em;
}

.exit-btn:active
{
    background: #218306!important;
    border: solid white 0.1em;
    color: white !important
}



#players
{
    top: 30%;
    width: 100%;
    transform: scale(0.75);
    left: -12% !important;
}

#players .player:nth-of-type(1) {
    left: 0%;
    top: 0em
}
#players .player:nth-of-type(2) {
    left: 0%;
    top: 3em
}
#players .player:nth-of-type(3) {
    left: 0%;
    top: 6em
}
#players .player:nth-of-type(4) {
    left: 0%;
    top: 9em
}


#players .stars {
    top: 35% !important;
    transform: scale(0.75);
    left: 15%
}

#players .star.star-1,
#players .star.star-2,
#players .star.star-3,
#players .star.star-4,
#players .star.star-5 {
    width: .4rem;
    height: .4rem;
    margin: 0 -.09rem;
    transform: rotate(0deg);
    background-image: url(https://imgur.com/xEjVyK0.png)
}

.player-color
{
    background: #00000070 !important;
    border-radius: 0.2em !important;
    height: 170% !important;
    top: -80% !important;
    width: 140% !important;
    animation: none !important
}

.avatar-wrapper
{
    animation: none !important;
    transform: scale(0.8);
    left: -1% !important
}

.player-name
{
    text-align: left !important;
    left: 4em;
    top: -1.3em;
    text-shadow: none !important
}

.player-master, .controller-coins, .player-flag, .player-exp, .state-afterdance #players, .exit-btn.exit-btn--play-again.exit-btn--animate
{
    display: none !important
}

.hud.beat #players .feedback-label {
        background-repeat: no-repeat;
        background-image: url(https://imgur.com/68sBWkE.png);
    }

.feedback-label
{
    top: 0%;
    height: 100% !important;
    left: 38% !important
}

.state-tutorial:after
{
    content: "Loading Resources" !important;
    color: white !important;
    width: 50% !important;
    height: 40% !important;
    top: 43% !important;
    left: 25%;
    position: absolute !important;
    background: #f000;
    font-family: Mojangle;
    z-index: 3;
    font-size: 19%;
    text-align: center;
    transform: scale(0.9)
}

.state-tutorial:before
{
    content: "" !important;
    width: 50% !important;
    height: 35% !important;
    top: 35% !important;
    left: 25%;
    position: absolute !important;
    background: #000000c7;
    font-family: Mojangle;
    z-index: 2 !important;
    border-radius: 0.4em;
    border: solid #c6c6c6 0.4em;
    color: #414141;
    font-size: 23%;
    text-align: center !important;
    border-top: solid #c6c6c6 1.5em;
    transform: scale(0.9)
}

#racetrack-fill-p1
{
    left: 170% !important
}

#racetrack .star
{
    display: none !important
}

#racetrack
{
    transform: rotate(90deg);
    left: 20%;
    height: 10%;
    display: none !important
}




.score-text
{color: white !important}

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址