Just Dance Now Wii Style (Menu Assets Style Required) by ticpo

Just Dance Now Wii Style (Menu Assets Style Required) screenshot
Install Get Stylus Write a review

Details

Authorticpo

LicenseNo License

Created

Updated

Categoryjust dance, just dance now

Statistics

Learn how we calculate statistics in the FAQ.

Total views186

Total installs346

Weekly installs51

Description

A recreation of the wii menu for Just Dance Now

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           JDN Wii Style
@namespace      justdancenow.com
@version        1.0.0
@description    Recreation of the wii menu for JDN
@author         Ticpo
==/UserStyle== */

@-moz-document domain("justdancenow.com") {
#settings, .sprite, .connect-phone-info, #section-tabs, .song-grid--duration, .song-grid--description, .caption.artist, .song__difficulty, .video-preview, .info-panel, .item:after, .song__reward, .playlist-img-container, .coach-selection:after, .coach-selection__bgImg, .controller-coins, .player-master, .player-exp, .state-songselection .player-flag, .state-songselection .player-color, .song-grid--title, .room-info__patch, .danceroom__qr-code-wrapper, .danceroom__label, .coach-selection__title, .state-coachselection #room-info, .state-coachselection #players, .player-flag, .progress-background, .state-coachselection #players, .state-dance #room-info, .star:before, .star:after, .score__number, .score__owner, #toast, .tutorial, .state-tutorial #players
{
    display: none !important;
}

#just-dance-now
{
    background: linear-gradient(180deg, #0075FF 0%, #47FFA7 100%);
}

.highscore-display
{
    left: 13%;
    top: 86%;
    height: 11%;
    width: 75%
}

.score__stars
{
    position: absolute !important;
    left: 0%;
    top: 10%
}

#racetrack .star
{
    transform: scale(0.9) rotate(-13deg)
}

@keyframes racetrack-star-beat
{
  0%
  {
    transform: scale(0.9) rotate(-13deg);
  }

  15%
  {
    transform: scale(0.98) rotate(-18deg);
  }

  80%
  {
    transform: scale(0.9) rotate(-13deg);
  }

  100%
  {
    transform: scale(0.9) rotate(-13deg);
  }
}

#racetrack .star
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/d/de/Star-unfilled.png/revision/latest?cb=20171022151707) !important}

#racetrack .star[data-visible="true"], #players .star, .score .stars .star, .state-songselection .star
{
    background-image: url(https://vignette.wikia.nocookie.net/justdance/images/7/73/Star_glow.png/revision/latest?cb=20181124172344) !important
}

.highscore-display.megastar .score__stars .star, .score.megastar .stars .star, #racetrack.megastar .star[data-visible="true"], #players .player.megastar .star
{
    background-image: url(https://vignette.wikia.nocookie.net/justdance/images/1/18/Star_glow_plus_more.png/revision/latest?cb=20181124172356) !important
}

.highscore-display.superstar .score__stars .star, .score.superstar .stars .star, #racetrack.superstar .star[data-visible="true"], #players .player.superstar .star
{
    background-image: url(https://vignette.wikia.nocookie.net/justdance/images/c/cd/Star_glow_plus.png/revision/latest?cb=20181124172350) !important
}

.state-coachselection .coverflow--container, .state-coachselection #coverflow
{
    display: block !important
}

.state-songselection .coverflow--container
{
    animation: CoverEntranceAnimation .2s;
    transform: scale(1);
    opacity: 1
}

.state-coachselection .coverflow--container
{
    animation: CoverAnimation .2s;
    transform: scale(1.3);
    opacity: 0
}

@keyframes CoverAnimation
{
    0%
    {
        transform: scale(1);
        opacity: 1
    }
    
    100%
    {
        transform: scale(1.3);
        opacity: 0
    }
}

@keyframes CoverEntranceAnimation
{
    0%
    {
        transform: scale(1.3);
        opacity: 0
    }
    
    100%
    {
        transform: scale(1);
        opacity: 1
    }
}

.coach-selection
{
    animation: CoachAnimation1 .2s !important
}

@keyframes CoachAnimation
{
    0%
    {
        transform: scale(1);
        opacity: 1
    }
    
    100%
    {
        transform: scale(0.7);
        opacity: 0
    }
}

@keyframes CoachAnimation1
{
    0%
    {
        transform: scale(0.7);
        opacity: 0
    }
    
    100%
    {
        transform: scale(1);
        opacity: 1
    }
}


.title-container
{
    pointer-events: none !important
}

#just-dance-now:hover, .song-cover:hover, .tabs, #song-selection:hover, .song:hover, .song__cover:hover, #preview:hover, .song-action__button:hover, .item:hover, .song-grid:hover, .song-grid--close:hover, #room-info:hover, .song--details:hover, #coverflow:hover, .coverflow--container:hover, .coach-selection__back:hover, .state-songselection:hover
{
    cursor: url(https://imgur.com/O15uZ3n.png), auto !important;
}

.state-dance
{
    cursor: none !important
}

#room-info
{
    text-align: right !important;
    width: 15%;
    background: none !important;
    top: 90%;
    left: 84.4%
}

.danceroom__number
{
    width: 100% !important;
    height: 100% !important;
    text-shadow: none;
    font-size: 40%;
    color: #ffffff38
}

.danceroom__caption
{
    width: 100% !important;
    height: 100% !important;
}

.song-grid--details
{
    position: absolute !important;
    top: -20%;
    border: none !important
}

.song-grid--titleDetails
{
    border: none !important
}

.song-grid--close
{
    width: 50% !important;
    position: absolute !important;
    border-radius: 0 !important;
    height: 130% !important;
    top: -95% !important;
    left: -6%;
    background-image: none !important;
    background-color: #fff0 !important;
    background-size: contain !important;
    transform: rotate(0deg)
}

.song-grid--close:before
{
    content: "Back";
    position: absolute !important;
    top: 85%;
    left: 63%;
    color: #ffffffc7;
    font-family: Just Dance Regular
}

.song-grid--close:after
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/BackWII.png?v=1656539323434);
    content: "";
    position: absolute;
    top: 70%;
    left: 0%;
    width: 60%;
    height: 25%;
    background-size: contain;
    background-repeat: no-repeat;
    border-bottom: solid #fff 0.07em;
    background-position-x: right
}

.song-grid--close:hover
{
    transform: scale(1.2) rotate(0deg) !important;
}

.state-songselection #players
{
    width: 25%;
    height: 20%;
    position: absolute !important;
    left: 86%;
    opacity: 1;
    top: -1%
}

.state-songselection .player
{
    opacity: 0
}

.state-songselection .player.controller
{
    opacity: 1 !important
}

.state-songselection .player.controller
{
    top: 24% !important;
    transform: scale(0.85) !important;
    left: -48% !important
}

.state-songselection .player-name
{
    font-family: Just Dance;
    text-shadow: none !important;
    letter-spacing: 0.02em;
    left: 45% !important;
    top: -40% !important;
    font-size: 100%;
    overflow: visible !important;
    text-align: right !important;
}

.state-songselection .avatar-wrapper
{
    left: 140% !important
}

.state-songselection .player-name em
{
    overflow: visible !important;
}

.state-songselection .avatar-wrapper
{
    animation: none !important
}

.state-songselection #players:before
{
    background-image: none !important;
    position: absolute !important;
    height: 200%;
    width: 100%;
    top: -150%;
    left: 43%;
    transform: rotate(0deg);
    border-bottom: solid 0.015em
}

:after
{
    color: #fff0 !important
}

#section-tabs
{
    position: absolute
}

#coverflow
{
   background: none;
}

.coverflow--container
{
    position: absolute !important;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 0em !important;
    padding: 0;
    background: none
}

.coach__names-list
{
    left: 13%;
    top: 35%;
}

.coach__player-list 
{
    background: #fff0;
    border-radius: 0;
    opacity: 1 !important;
    color: #fff;
    font-family: Just Dance;
    padding-left: 4%;;
}

.coach__player-list:before
{
    content: "";
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: #0000006e;
    display: block;
    position: absolute;
    -webkit-mask-image: linear-gradient(90deg, #000000 0%, rgba(217, 217, 217, 0) 70%);
    z-index: -1;
    border: solid white 0.1em
}

.coach:before
{
    display: none
}

.coach-selection__list.coach-selection__list--1 .coach-selection__item.coach
{
    transform: scale(1.3);
    left: -5%
}

.coach-selection__list.coach-selection__list--1 .coach__names-list
{
    left: 100%;
    top: 15%
}

.coach-selection__button
{
    width: 35% !important;
    height: 30%;
    background-repeat: no-repeat !important;
    border: solid;
    border-radius: 0;
    transform: rotate(0deg);
    font-family: Just Dance Regular !important;
    text-transform: uppercase;
    top: 86%;
    color: #fff0;
    transition: .1s all;
    left: 61%;
    position: absolute !important;
    background: none;
    overflow: visible
}

.coach-selection__button:before
{
    content: "DANCE NOW";
    animation: none !important;
    width: 60% !important;
    filter: none !important;
    background: none !important;
    color: white !important;
    transform: none !important;
    top: 10%;
    left: 19%;
    height: 18% !important;
    position: absolute !important;
    text-align: right;
    font-family: Just Dance;
    font-size: 180%
}

.coach-selection__button:after
{
    background-image: url(https://imgur.com/8r6TtqV.png);
    content: "" !important;
    position: absolute;
    top: 10%;
    left: 78%;
    width: 100%;
    height: 25%;
    background-size: contain;
    background-repeat: no-repeat;
    border-bottom: solid #fff 0.16em;
    background-position-x: left;
    animation: none !important;
    filter: none !important;
    background-color: transparent;
    opacity: 1 !important;
    transform: scale(0.9) rotate(0deg)
}

.coach-selection__button:hover
{
    transform: scale(1.15) rotate(0deg)
}

.item-container
{
    width: 1000000000000000% !important;
    height: 63% !important;
}

.song-grid:before
{
    content: "" !important;
    position: absolute !important;
    display: block !important;
    height: 0.3%;
    width: 110%;
    top: 38.7%;
    left: 0%;
    background: white
}

.item:nth-child(1)
{
    margin-left: 24em !important
}

.song-grid
{
    height: 100% !important;
    width: 100%;
    position: absolute !important;
    top: 25% !important;
    left: -2%;
    overflow: visible !important;
}

.item
{
    margin-right: 4em !important;
    height: 75% !important;
    margin-top: 1.5em !important;
    transition: none !important;
}

.item-selected
{
    opacity: 0 !important
}

#section-songlist .caption
{
    top: 90% !important
}

.caption
{
    position: absolute;
    color: #fff;
    font-family: Just Dance;
    text-align: left;
    transform: rotate(-0deg);
    letter-spacing: 0.01em;
    top: 89% !important;
    font-size: 140% !important;
    left: 0%;
    height: 14% !important;
    padding-left: 0% !important
}

.song__cover
{
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    padding: 0 !important;
    border-radius: 0 !important;
    image-rendering: highest !important;
}

.item:hove .song__decoration:before
{
    content: "." !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    position: absolute;
    z-index: 1 !important;
    top: 0%;
    left: 0%;
    -webkit-mask-image: url(https://i.imgur.com/lwZJN9r.pg);
    -webkit-mask-size: 100%;
    -webkit-mask-position: contain;
    -webkit-mask-repeat: no-repeat;
    opacity: 1 !important;;
    filter: blur(10em)
}
.item .song__decoration:before
{
    content: "." !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff0 !important;
    position: absolute;
    z-index: 1 !important;
    top: 0%;
    left: 0%;
    -webkit-mask-image: url(https://i.imgur.com/AoCZHFc.png);
    -webkit-mask-size: 100%;
    -webkit-mask-position: contain;
    -webkit-mask-repeat: no-repeat;
    opacity: 0;
    transition: .1s all !important
}

.song__decoration
{
    width: 100% !important;
    height: 88% !important;
    border-radius: 0 !important;
}

.item .song__decoration:after
{
    content: "." !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: 1 !important;
    top: 0%;
    left: 0%;
    -webkit-mask-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/MaskCoverShine5.png?v=1656538906346);
    -webkit-mask-size: 100%;
    -webkit-mask-position: contain;
    -webkit-mask-repeat: no-repeat;
    opacity: 1;
    transition: none !important;
    transform: rotate(0deg);
    background-image: url(https://i.imgur.com/tSqok1w.png);
    animation: ShineGlossMovement 2.8s infinite !important;
    background-repeat: no-repeat;
    filter: blur(1em);
}

@keyframes ShineGlossMovement
{
    100%
    {
        background-position-y: -200%;
        background-position-x: 50%
    }
    
    0%
    {
        background-position-y: 200%;
        background-position-x: 50%
    }
    
}

#preview
{
    position: absolute;
    left: 35%;
    width: 29%;
    top: -2.5%
}

.song-preview
{
    top:10%;
    left: 12%;
}

.song-cover
{
    border:  none;
    border-radius: 0 !important;
    border-bottom: none !important;
    transition: background 0.5s !important;
    background-repeat: no-repeat !important
}

.song-cover--hi-res:after
{
    content: "";
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
    background-size: contain;
    -webkit-mask-size: 100%;
    -webkit-mask-position: contain;
    -webkit-mask-repeat: no-repeat;
    box-shadow: inset 0px 0px 50px #ffffffab;
    background-color: #000;
    border: none !important;
    transition: background 0.1s !important;
    background-repeat: no-repeat;
    border: solid white 0.02em !important
}

.song-cover--hi-res:before
{
    content: "" !important;
    width: 145%;
    height: 123.4%;
    top: -24%;
    left: -23%;
    background-size: cover;
    z-index: 1;
    background-repeat: no-repeat;
    position: absolute;
    border: none !important;
    background-position-x: center !important;
    transition: background 0.1s !important
}

.pre-beat .song-cover:before
{
    animation: SongBounceS .3s !important
}

.pre-beat .song-cover:before
{
    animation: SongBounceV .7s !important
}

.pre-beat .song-cover--low-res
{
    animation: SongBounceL .7s !important
}

.song-cover--low-res
{
    background-image: url(https://i.imgur.com/qEs92j1.pg) !important;
    border-radius: 0;
    transform: scale(1.46);
    z-index: -1 !important;
    top: 15%;
    left: 2.5%;
    border: none !important
}

.left-pane
{
    width: 100% !important;
    top: 23%;
    left: -4%
}

.left-pane:before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    transform: scale(1.4);
    opacity: 0.4;
    pointer-events: none !important;
    filter: blur(50%) !important
}

.pre-beat.even .left-pane:before
{
    animation: GlowSong .5s 
}

@keyframes SongBounceV
{
    0%
    {
        transform: scale(0.98);
        transform-origin: bottom
    }
    
    100%
    {
        transform: scale(1);
        transform-origin: bottom
    }
}

@keyframes SongBounce
{
    0%
    {
        filter: drop-shadow(0px -0em 0.08em #fff6);
    }
    
    93%
    {
        filter: drop-shadow(0px -0.1em 0.08em #fff6);
    }
    
    100%
    {
        filter: drop-shadow(0px -0em 0em #fff);
    }
}


@keyframes SongBounceL
{
    0%
    {
        transform: scale(1.43)
    }
    
    100%
    {
        transform: scale(1.46)
    }
}


@keyframes GlowSong
{
    0%
    {
        transform: scale(1.78);
        opacity: 1
    }
    
    100%
    {
        transform: scale(1.4);
        opacity: 0.4
    }
}

.song-details
{
    transform: rotate(0deg);
    background: none !important;
    background-size: contain !important;
    border-radius: 0 !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    z-index: 1;
    width: 74.5% !important;
    height: 31% !important;
    padding: 0% !important;
    top: 89% !important;
    left: 12% !important;
    border-top: solid white 0.3em;
    border-bottom: solid white 0.02em
}

.song-detail__artist
{
    font-family: Just Dance Regular!important;
    text-shadow: none !important;
    color: #fff !important;
    letter-spacing: 0.004em !important;
    position: absolute !important;
    font-size: 18% !important;
    top: 50%;
    text-align: center
}

.song-detail__title
{
    font-family: Just Dance !important;
    text-shadow: none !important;
    color: #fff !important;
    position: absolute !important;
    top: 0%;
    font-size: 30% !important;
    width: 100% !important;
    height: 60% !important;
    letter-spacing: 0.01em !important;
    text-align: center
}

.song__infos
{
    width: 100% !important;
    height: 100%
}

.song-detail
{
    width: 100% !important
}

.item-container, .song--details
{scroll-snap-type: x mandatory !important}
 
.item-selected
{scroll-snap-align: center !important;}

.item:hover .song__cover
{
    transform: scale(1.1);
}
.song__cover
{
    transition: .2s all !important
}

.song-action
{
    position: absolute !important;
    left: 0%;
    width: 100% !important;
    height: 100% !important
}

.song-action__button
{
    left: 0% !important;
    border-radius: 0;
    background: none !important;
    width: 100%;
    height: 100%;
    opacity: 0
}

.right-pane
{
    width: 100% !important;
    left: -5%;
    top: -30%;
    height: 50% !important
}

.coach-selection
{
    background: none;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%
}

.coach-selection__details:before
{
    content: "";
    position: absolute;
    display: block;
    top: 0.3em;
    left: 41.2%;
    width: 20%;
    height: 30%;
    background: white
}

.coach-selection__details
{
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    text-align: center;
    overflow: visible !important;
    border-radius: 0;
    left: 0%
}

.coach-selection__details-song
{
    font-family: Just Dance;
    font-size: 30% !important;
    overflow: visible !important;
    position: absolute;
    top: 1.2em;
    letter-spacing: 0.001em;
}

.coach-selection__details-artist
{
    font-family: Just Dance Regular;
    font-size: 20% !important;
    overflow: visible !important;
    position: absolute;
    letter-spacing: 0.01em;
}

.coach-selection__back
{
    width: 20% !important;
    position: absolute !important;
    border-radius: 0 !important;
    height: 20% !important;
    top: -6% !important;
    left: -3%;
    background-image: none !important;
    background-color: #fff0 !important;
    transform: rotate(0deg)
}

.coach-selection__back:before
{
    content: "Back";
    position: absolute !important;
    top: 69%;
    left: 70%;
    color: #ffffffc7;
    font-family: Just Dance Regular;
    font-size: 20%
}

.coach-selection__back:after
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/BackWII.png?v=1656539323434);
    content: "";
    position: absolute;
    top: 55%;
    left: 0%;
    width: 60%;
    height: 25%;
    background-size: contain;
    background-repeat: no-repeat;
    border-bottom: solid #fff 0.02em;
    background-position-x: right
}

.coach-selection__back:hover
{
    transform: scale(1.2) rotate(0deg) !important;
}


#lyrics .line.previous {
    -webkit-transform: perspective(0px) translateY(0em) rotateX(0deg);
    transform: perspective(0px) translateY(0em) rotateX(0deg) translateX(0%);
    text-shadow: none !important;
    opacity: 0;
    transition: .2s all !important
}

#lyrics .line.current {
    transform: translatey(-0.1em) translateX(0%);
    transition: .3s all !important;
    text-shadow: none !important;
    color: white !important
}

#lyrics .line.previous {
    transform: translatey(-0.1em) translateX(00%) !important;
    transition: .2s all !important;
    text-shadow: none !important
}

#lyrics .line {
    -webkit-animation: nextLineInf 0.2s;
    animation: nextLineInf 0.35s;
    text-shadow: none !important;
}

@-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(0em) perspective(0px) rotateX(0deg);
        transform: translateY(0em) perspective(0px) rotateX(0deg);
    }
}
@keyframes nextLineInf {
    0%,
    20% {
        opacity: 0;
        -webkit-transform: perspective(0px) translateY(1em) rotateX(0deg);
        transform: perspective(0px) translateY(21m) rotateX(0deg) translatex(0em)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
        transform: translateY(1em) perspective(0px) rotateX(0deg) translatex(0em)
    }
}

.state-dance #players
{
    left: 0% !important;
    width: 100% !important
}

.state-dance .player
{
    margin-left: 2.5em;
}

.state-dance .player-name
{
    width: 100% !important;
    font-family: Just Dance !important;
    font-size: 70% !important;
    text-shadow: none !important;
    top: 60%
}

.state-dance .player-name em
{
    text-shadow: 0.06em 0.06em 0em rgba(0, 0, 0, .85)!important;
    letter-spacing: 0.01em;
    overflow: visible !important
}

.state-dance #players .stars
{
    transform: scale(0.8);
    top: 75%;
    left: -23.5%
}

.hud.beat  #players .stars
{
    animation: PlayerStarBeat 0.4s !important
}

@keyframes PlayerStarBeat
{
    100%
    {
        transform: scale(0.83)
    }
    0%
    {
        transform: scale(0.8)
    }
}

.state-dance #players .crown
{
    left: -17% !important;
    top: 19% !important
}

/*----5-Stars----*/

.state-dance [data-stars="5"] .star.star-5
{
    width: 30% !important;
    height: 2.2em !important;
    z-index: 9 !important
}

.state-dance [data-stars="5"] .star.star-4
{
    width: 20% !important;
    height: 2em !important;
    left: -5%;
    z-index: 8 !important
}

.state-dance [data-stars="5"] .star.star-3
{
    width: 20% !important;
    height: 2em !important;
    left: 5%;
    z-index: 7 !important
}

.state-dance [data-stars="5"] .star.star-2
{
    width: 18% !important;
    height: 1.4em !important;
    left: -9%
}

.state-dance [data-stars="5"] .star.star-1
{
    width: 18% !important;
    height: 1.4em !important;
    left: 9%
}

/*----4-Stars----*/

.state-dance [data-stars="4"] .star.star-4
{
    width: 20% !important;
    height: 2em !important;
    left: -1%;
    z-index: 8 !important
}

.state-dance [data-stars="4"] .star.star-3
{
    width: 20% !important;
    height: 2em !important;
    left: 1%;
    z-index: 7 !important
}

.state-dance [data-stars="4"] .star.star-2
{
    width: 18% !important;
    height: 1.4em !important;
    left: -5%
}

.state-dance [data-stars="4"] .star.star-1
{
    width: 18% !important;
    height: 1.4em !important;
    left: 5%
}

/*----3-Stars----*/

.state-dance [data-stars="3"] .star.star-3
{
    width: 20% !important;
    height: 2em !important;
    left: 0%;
    z-index: 7 !important
}

.state-dance [data-stars="3"] .star.star-2
{
    width: 18% !important;
    height: 1.4em !important;
    left: -3.2%
}

.state-dance [data-stars="3"] .star.star-1
{
    width: 18% !important;
    height: 1.4em !important;
    left: 3%
}

/*----2-Stars----*/

.state-dance [data-stars="2"] .star.star-2
{
    width: 18% !important;
    height: 1.4em !important;
    left: -2%
}

.state-dance [data-stars="2"] .star.star-1
{
    width: 18% !important;
    height: 1.4em !important;
    left: 2%
}

/*----1-Stars----*/

.state-dance [data-stars="1"] .star.star-1
{
    width: 18% !important;
    height: 1.4em !important;
    left: 0%
}

.player-color
{
    border-radius: 0.1em !important;
    left: 45% !important;
    top: -39% !important;
    width: 40% !important
}

.state-dance .avatar-wrapper
{
    left: 5% !important;
    position: absolute !important;
    transform: scale(0.9);
    top: -110% !important
}

.feedback-label
{
    width: 70% !important;
    height: 50% !important;
    left: 14% !important;
    top: 90%
}

.feedback
{
    height: 120% !important
}

#racetrack-fill-p1, #racetrack-fill-p2, #racetrack-fill-p3, #racetrack-fill-p4
{
    border-top: solid white 0.016em!important;
}

@keyframes feedback {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.92, 1, 1);
        transform: scale3d(0.92, 1)
    }
    20% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}


@keyframes feedlabel {
    0% {
        opacity: 1;
        top: 60%
    }

    40% {
        opacity: 1
    }

    100% {
        opacity: 0 !important;
        top: 70%
    }
}

#beat {
    width: 38% !important
}

.pre-beat .player-color
{
    animation: none !important
}

.state-songselection #just-dance-now:before, .state-afterdance #just-dance-now:before, .state-coachselection #just-dance-now:before, .state-tutorial #just-dance-now:before
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/Squares2.png);
    content: "";
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute !important;
    opacity: 0.3;
    background-size: contain;
    z-index: -1 !important
}

.results:before
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/Squares2.png);
    content: "";
    width: 200%;
    height: 100%;
    top: 0%;
    left: -50%;
    position: absolute !important;
    opacity: 0.2;
    background-size: contain;
    z-index: 1 !important
}

.state-songselection #just-dance-now:after, .state-afterdance #just-dance-now:after, .state-coachselection #just-dance-now:after, .state-tutorial #just-dance-now:after
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/Squares1.png);
    content: "";
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute !important;
    opacity: 0.2;
    background-size: contain;
    z-index: -1;
}

.results:after
{
    background-image: url(https://cdn.glitch.global/eb89c972-d30a-4348-b4c8-b772f634da00/Squares1.png);
    content: "";
    width: 200%;
    height: 100%;
    top: 0%;
    left: -50%;
    position: absolute !important;
    opacity: 0.1;
    background-size: contain;
    z-index: 1;
}

#just-dance-now:before, .results:before
{
    animation: WiiParticles 1000s linear infinite !important;
}
#just-dance-now:after, .results:after
{
    animation: WiiParticles 600s linear infinite !important;
}

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

@keyframes NotiPopUp
{
    0%
    {
        background-size: 0%, 220% 200%;
        opacity: 0
    }
    
    1%
    {
        background-size: 14%, 220% 200%;
        opacity: 1
    }
    
    2%
    {
        background-size: 13%, 220% 200%;
        opacity: 1
    }
    
    18%
    {
        background-size: 13%, 220% 200%;
        opacity: 1
    }
    
    19%
    {
        background-size: 14%, 220% 200%;
        opacity: 1
    }
    
    20%
    {
        background-size: 0%, 220% 200%;
        opacity: 0
    }
    
    100%
    {
        background-size: 0%, 220% 200%;
        opacity: 0
    }
}

@keyframes NotiTextPopUp
{
    0%
    {
        transform: scale(0.8);
        opacity: 0
    }
    
    1%
    {
        transform: scale(1.1);
        opacity: 1
    }
    
    2%
    {
        transform: scale(1);
        opacity: 1
    }
    
    18%
    {
        transform: scale(1);
        opacity: 1
    }
    
    19%
    {
        transform: scale(1.1);
        opacity: 1
    }
    
    20%
    {
        transform: scale(0.8);
        opacity: 0
    }
    
    100%
    {
        transform: scale(0.8);
        opacity: 0
    }
}

.state-tutorial #dance-transition
{
    display: block !important;
    opacity: 1 !important
}

.state-afterdance #players, #afterdance:before, .exit-btn, .flag, .highScore, .state-afterdance .crown, .score:after
{
    display: none !important;
}

#afterdance
{
    background: #00000047 !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0% !important;
    height: 100% !important;
    position: absolute;
    background-size: contain !important
}

.song-info, .img--afterDance 
{
    opacity: 0;
    position: absolute !important
}

.results
{
    background: linear-gradient(180deg, #0075FF 0%, #47FFA7 100%);
    margin: 0 !important;
    padding: 0 !important;
    width: 50% !important;
    left: 25%;
    height: 100% !important;
    overflow: visible !important;
    top: 0% !important
}

.scrollArea, .scrollContainer, .players
{
    overflow: visible !important
}

 .color, .avatarFlag, .player-content
{
    position: absolute !important;
}

.player-content
{
    width: 100% !important;
    border-radius: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 99 !important
}

.state-afterdance .player:nth-child(1)
{
    height: 0.9em !important;
    top: 0.8em !important
}

.avatarFlag
{
    left: -20%
}

.state-afterdance .player
{
    width: 100%;
    top: 0.94em;
    height: 0.65em !important;
    margin-bottom: 0.3em !important
}

.color
{
    height: 100% !important;
    border-radius: 0 !important;
    width: 100% !important;
    color: transparent
}

.name
{
    color: white !important;
    text-shadow: none !important;
    font-family: Just Dance;
    letter-spacing: 0.01em;
    font-size: 28% !important;
    overflow: visible !important;
}

.state-afterdance .player:nth-child(1) .name
{
    font-size: 45% !important;
    padding-top: 1%
    
}

.score
{
    position: absolute !important;
    left: 0%
}

.score-text
{
    position: absolute !important;
    text-align: left !important;
    color: white !important;
    top: 43%;
    left: 4.5%
}

.stars .star
{
    transform: rotate(-15deg) scale(1.3)
}

.player:nth-child(1) .stars .star
{
    transform: rotate(-15deg) scale(1.3)
}

.player:nth-child(1) .stars
{
    position: absolute;
    left: 35%;
    top: 60%;
    transform: scale(1.3)
}

.player:nth-child(1) .score-text
{
    position: absolute !important;
    text-align: left !important;
    color: white !important;
    top: 45%;
    left: 4.5%;
    font-size: 130%
}

.stars
{
    position: absolute;
    left: 25%;
    top: 44%
}

#racetrack-fill-p1, #racetrack-fill-p2, #racetrack-fill-p3, #racetrack-fill-p4
{
    transition: .2s;
}

#racetrack-fill-p2:before, #racetrack-fill-p1:before, #racetrack-fill-p3:before, #racetrack-fill-p4:before
{
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00000059 0%, rgba(217, 217, 217, 0) 100%, rgba(0, 0, 0, 0) 100%);
}

.color
{
    -webkit-mask-image: linear-gradient(90deg, #000000 20%, rgba(217, 217, 217, 0) 70%);
}

.state-afterdance .avatar
{
    transform: scale(1.4);
}

.state-afterdance .player:nth-child(1) .avatar
{
    transform: scale(2);
}

.player:nth-child(1) .avatarFlag
{
    left: -18%;
    top: 30%
}

.avatarFlag
{
    left: -16.7%;
    top: 9%
}

.state-afterdance #coverflow, .state-afterdance .coverflow--container, .state-afterdance .song-preview
{
    display: block !important;
    position: absolute !important;
    visibility: visible !important;
    z-index: -1 !important;
    opacity: 1 !important
}

.state-afterdance .song-grid
{
    display: none
}

.state-afterdance .song-cover:after
{
    display: none !important
}

.state-afterdance .song-cover
{
    background: none;
    border: none !important
}

.state-afterdance .song-cover:before
{
    border: solid white !important;
    height: 5.9em;
    top: -70%;
    left: -4.1em;
    width: 10.5em !important;
    background-size: 56%;
    background-repeat: repeat;
    background-position-x: -20% !important;
    opacity: 0.4
}

.score:before
{
    display: none
}


.player-solo .score
{
    top:25% !important
}

.crown
{
    background-image: url(https://imgur.com/SHdEmCH.png)!important;
    top: 45% !important;
    left: -20% !important;
    width: 35% !important;
    height: 45% !important;
    transform: scale(1.15) rotate(-13deg) !important
}

.crown::before {
        -webkit-mask-image: url(https://i.imgur.com/iLiweoi.png)!important;
    border: none !important;
    -webkit-mask-size: contain !important;
    background-image: none !important;
    z-index: -99999999 !important;
    left: 1.5% !important
    }
.hud.beat > #players.animate .crown {
    animation: CrownBeat 0.5s !important
}

@keyframes CrownBeat
{
    0%
    {
        transform: scale(1) rotate(-13deg);
    }
    
    100%
    {
        transform: scale(1.15) rotate(-13deg);
    }
}

#players .blue .crown:before {
    background: #3784f9
}

#players .red .crown:before {
    background: #ec2443
}

#players .green .crown:before {
    background: #7de400
}

#players .purple .crown:before {
    background: #8802c9
}

#players .aqua .crown:before{
    background: #03ded6
}

#players .pink .crown:before {
    background: #d820c9
}

.multi-coach .picto
{
    left: -5.5%
}
}

@-moz-document domain("justdancenow.com") {
/*- WiiAssets -*/

.KissMeMore:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/f/f6/Kissmemore_cover_albumbkg.png/revision/latest?cb=20220324151045)}

.MONTERO:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/4/4e/Montero_cover_albumbkg.png/revision/latest?cb=20220317154800)}

.Good4U:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/6/6b/Good4u_cover_albumbkg.png/revision/latest?cb=20211104003317)}

.BlackWidow:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/c/cd/Blackwidow_cover_albumbkg.png/revision/latest?cb=20180721230010)}

.HappierThanEver:after
{background-image: url(https://i.imgur.com/2Y3WCsn.png)}

.Chacarron:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/b/b8/Chacarron_cover_albumbkg.png/revision/latest?cb=20211103233601)}

.Positions:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/0/00/Positions_cover_albumbkg.png/revision/latest?cb=20220217150634)}

.TurnUpTheLove:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/6/6e/Turnupthelove_cover_albumbkg.png/revision/latest?cb=20200624222414)}

.FollowTheWhiteRabbit:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/8/84/Followthewhiterabbit_cover_albumbkg.png/revision/latest?cb=20220331142403)}

.BadRomanceALT:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/a/a0/Badromancealt_cover_albumbkg.png/revision/latest?cb=20220325035459)}

.Louie:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/c/c3/Louie_cover_albumbkg.png/revision/latest?cb=20220331184708)}

.LevelUp:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/2/27/Levelup_cover_albumbkg.png/revision/latest?cb=20211103235722)}

.BlackMam:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/7/7f/Blackmam_cover_albumbkg.png/revision/latest?cb=20211103232845)}

.LevitatingALT:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/2/22/Levitatingalt_cover_albumbkg.png/revision/latest?cb=20211103235900)}

.ConAltura:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/e/ec/Conaltura_cover_albumbkg.png/revision/latest?cb=20191114190857)}

.OMG:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/a/af/Omg_cover_albumbkg.png/revision/latest?cb=20191120184925)}

.Medicina:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/d/d1/Medicina_Cover_AlbumBkg.png/revision/latest?cb=20190307150336)}

.BarbraStreisand:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/5/59/Barbrastreisand_cover_albumbkg.png/revision/latest?cb=20200723104805)}

.Macarena:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/4/40/Macarena_cover_albumbkg.png/revision/latest?cb=20200223201608)}

.Bailando1997:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/f/fe/Bailando1997_Cover_AlbumBkg.jpg/revision/latest?cb=20201105134053)}

.ILoveIt:after
{background-image: url(https://vignette.wikia.nocookie.net/justdance/images/e/eb/Iloveit_cover_albumbkg.png/revision/latest?cb=20220224161521)}
}

Reviews

No reviews yet.