@-moz-document domain("justdancenow.com") {
:root
{
/*
Check Out #custom-profile to learn how to change your profile settings, if you need it. Credits to Will07498 on jdwiki for the Coach Extraction
*/
--profile-icon: url(https://imgur.com/SreqVGq.png), black /*<----- You Don't Need To Change This For Non-Transparent Images-*/;
--profile-color: linear-gradient( 90deg, #1c9c2d 0%, #06cb8d 100%);
--pictobeat-color: /* Coming Soon */;
}
/*--*/
}
@-moz-document domain("justdancenow.com") {
/* ==UserStyle==
@name JDNU! | Custom Profile >
@namespace Ticpo
@version 0.0.31
@description Pre-Release Build for Just Dance Now Ultimate
@author Ticpo
@include https://justdancenow.com/*
==/UserStyle== */
}
@-moz-document domain("justdancenow.com") {
.state-songselection #just-dance-now:before
{
content: "Pre-Release Build v.0.0.31" !important;
font-family: Just Dance Bold;
position: absolute;
font-size: 10%;
top: 95%;
left: 2%;
letter-spacing: 0.05em
}
@font-face
{font-family: "Just Dance";src: url('https://dl.dropboxusercontent.com/s/30skmmrl971g0ph/Gilroy-ExtraBold.woff?dl=0') format('woff') ;}
@font-face
{font-family: "Just Dance Bold";src: url('https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FGilroy-Bold%20(1).woff') format('woff') ;}
@font-face
{font-family: "Just Dance Medium";src: url('https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FGilroy-Medium%20(1).woff') format('woff') ;}
@font-face
{font-family: "Just Dance Regular";src: url('https://dl.dropboxusercontent.com/s/qcrd9tlgoq05vi6/Gilroy-Light.woff?dl=0') format('woff')}
.song__difficulty, .sprite, .song-action, .state-songselection .song-cover--low-res, .state-afterdance .song-cover--low-res, .caption.artist, .song__decoration:after, .song-grid--duration, .song-grid--description, .room-info__patch, .danceroom__qr-code-wrapper, .player-master, .player-exp, .player-flag, .controller-coins, .state-songselection .player-color, .reward__content, .coach-selection:after, .coach-selection__bgImg, .coach-selection__title, .coach-selection__back, .coach:before, .state-coachselection .song-grid, #players.finding-dancers, #players.removing-dancers, .state-dance #room-info, .platform, .state-dance .avatar, .line.previous, .tutorial, .state-coachselection .player-color, .state-tutorial .player-color, .danceroom__label, .song-details:before, .hud:before, .toggle:after, .toggles:before, .menu__head, .menu__legal, .menu-section__title, .player--controller:before, .player-btn.player-btn--kick, .state-dance .dancercard .avatar-wrapper, .state-dance #settings, .state-tutorial #settings, .state-dance #players:before, .state-tutorial #room-info, .state-tutorial #players, .state-coachselection #room-info, .state-coachselection #players, .state-coachselection #settings,.state-afterdance #players, .state-afterdance #settings, .state-afterdance #room-info, .highScore, #toast, .state-coachselection .song-details, .song-grid--close, .song__cover, .tabs--connect, .playlist-img-container, .playlist, .trainer-icon, .main__text, .main:before, .state-coachselection .highscore-display, .fill, #lyrics
{
display: none !important
}
.maintenance
{
border-radius: 0.3em;
top: 94%;
left: 3%;
transition: none !important
}
.maintenance.expand
{
top: 94%;
left: 15.7%;
transition: none !important
}
.main
{
background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 52.94%, #000000 100%), url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2Fkeyart_1820x1080.png?v=1626683801364);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.timer
{
font-family: Just Dance
}
.maintenance__text, .timer_title, .timer_count .text
{
font-family: Just Dance Bold !important
}
.main__text
{
font-family: Just Dance Regular !important
}
.init-spinner__spinner
{
opacity: 1 !important;
fill: white !important
}
[xlink:href="#icon-global-spinner"], .icon-global-spinner
{
display: none !important;
visibility: hidden !important;
opacity: 0 !important
}
.section-grid-trainer
{
left: 00%;
width: 100%;
height: 70%
}
.grid-img, .grid-img--songlist
{
transform: translateY(15%);
-webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 60%, #f000 90%) !important;
}
.trainer-txt
{
text-align: center;
color: white;
font-family: Just Dance Medium;
width: 100%;
letter-spacing: 0.01em
}
#section-playlist .trainer-txt:after
{
content: " (Smartphone required for playlists)"
}
#section-tabs
{
position: absolute !important;
left: 73%;
height: 20%;
border-radius: 0px !important;
top: .1%;
width: 38%;
background: none !important
}
ul.tabs li[section-id="playlist"]
{
height: 0.5rem !important;
width: 49% !important;
background: #dfeff800;
position: absolute;
border-radius: 0.5em
}
ul.tabs li:before
{
content: "";
position: absolute !important;
background: white;
top: 77% !important;
left: 21% !important;
width: 30% !important;
height: 5% !important;
box-shadow: none !important;
border-radius: 100em !important;
opacity: 1;
transform: scale(0, 1);
transition: .2s all !important;
}
ul.tabs li.selected:after
{
content: "" !important;
position: absolute !important;
background: white;
top: 77% !important;
left: 21% !important;
width: 30%;
height: 5% !important;
box-shadow: none !important;
border-radius: 100em !important;
opacity: 1 !important;
transform: scale(1, 1) !important;
transition: .1s all !important;
}
ul.tabs li:hover:before
{
transform: scale(1.0, 1);
opacity: 1
}
ul.tabs li[section-id="songlist"]
{
height: 0.5rem !important;
min-height: 0% !important;
width: 42% !important;
background: #dfeff800;
top: 0% !important;
position: absolute;
left: 25%;
border-radius: 0.5em
}
.tabs--icon, .tabs--text
{position: absolute !important}
ul.tabs li:hover .tabs--icon
{
transform: scale(0.9)
}
.tabs--icon
{
transform: scale(0.55) !important;
top: 18%;
left: 12%
}
.tabs--text
{
left: 30%;
font-family: Just Dance Bold;
color: #fff !important
}
ul.tabs li[section-id="playlist"] .tabs--icon
{
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FPlaylists.png) !important;
background-size: contain !important
}
ul.tabs li[section-id="songlist"] .tabs--icon
{
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FSonglist.png) !important;
background-size: contain !important
}
.player
{
animation: none !important
}
.connect-phone-info
{
animation: none !important;
font-family: Just Dance Bold;
transform: scale(0.6);
transition: none !important;
left: -27%;
top: -1.8%;
pointer-events: none !important;
opacity: 0;
transition: .2s all !important
}
.connect-phone-info.connect-phone-info--clickable.connect-phone-info--visible
{
opacity: 1 !important
}
.connect-phone-info__text:before
{
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FConnectPhone.png) !important;
content: "" !important;
background-color: #f000 !important;
background-size: contain;
background-position: center;
border-radius: 0 !important;
background-repeat: no-repeat;
position: absolute;
left: -57%;
top: -20% !important;
height: 150% !important;
width: 100% !important
}
#in-game-video
{
background: url(https://imgur.com/ZvTRcHF.png);
background-size: contain;
background: none !important
}
#admin-menu
{
z-index: 9999 !important;
top: 3.1em;
left: -62em;
position: absolute !important;
width: 66em;
height: 33em;
background: #fff0 !important;
transition: opacity 0.2s !important
}
#admin-menu:before
{
top: 4%;
left: 2.3%;
position: absolute;
content: "Settings";
color: white;
font-size: 180%;
font-family: Just Dance;
z-index: 9999 !important
}
.menu-section:nth-child(1)
{
top: 50%;
position: absolute;
width: 96% !important
}
.menu-section:nth-child(2)
{
position: absolute;
width: 96% !important
}
.menu__body
{
background: black !important;
border-radius: 0.6em;
border: solid white;
}
.menu-section__content.players .player
{
height: 8em !important;
top: 3em !important;
position: absolute !important;
background: var(--profile-color);
border-radius: 0.5em !important
}
.menu-section__content.players:before
{
top: 12.5em;
left: 0%;
position: absolute;
width: 100%;
height: 10%;
background: white;
content: "";
border-radius: 100em !important
}
.menu-section__content.players .avatar-wrapper
{
width: 12% !important
}
.menu-section__content.players .player__name
{
font-family: Just Dance Bold !important;
font-size: 250%;
margin-left: 2%
}
.players__title
{
top: 580% !important;
position: absolute;
color: white;
font-family: Just Dance Medium !important
}
.menu-section__content.players .avatar-wrapper:before
{
border: solid white 0.2em
}
.content__title
{
font-family: Just Dance Bold;
color: white;
font-size: 150%;
text-transform: Capitalize
}
.video-quality__item, .language__item, .languagePicker__value
{
font-family: Just Dance Medium !important;
text-align: left;
padding-left: 7% !important;
margin: 0%
}
.video-quality__dropdown
{
background: none !important
}
.menu-section__content.video-quality
{
left: 60% !important;
position: absolute !important;
width: 40%
}
.menu-section__content.language
{
left: 0% !important;
position: absolute !important;
width: 40%
}
.video-quality__item, .language__item, .languagePicker__value
{
background: #1C1C1C !important;
border: none !important
}
.video-quality__dropdown, .language__dropdown, .languagePicker__content, .video-quality__item, .languagePicker__value
{
border: none !important;
text-transform: Capitalize;
}
.video-quality__dropdown, .language__dropdown, .languagePicker__value
{
border-radius: 0.3em !important
}
.video-quality__dropdown:after, .languagePicker__value:after
{
left: 85% !important;
top: 35% !important
}
#settings
{
transform: scale(1);
z-index: 9999999 !important;
top: 1.4%;
transition: none !important
}
#settings:before
{
position: absolute;
height: 65%;
width: 2.5%;
top: 16.5%;
left: -3%;
background: white;
border-radius: 100em;
content: ""
}
.toggle
{
transform: scale(0.7);
transition: none !important
}
.toggle.toggle-fullscreen
{
left: -10% !important
}
.toggle.toggle-fullscreen:before
{
left: 2% !important
}
html:-webkit-full-screen .toggle-fullscreen .exit, .icon.fullscreen, .toggle-fullscreen:hover .icon
{
background-image: url(https://imgur.com/sAfbdP6.png);
background-size: contain;
background-position: center
}
.toggle:before
{
content: "";
position: absolute;
background: white;
top: 106.5%;
left: 8%;
width: 90%;
height: 10%;
border-radius: 100em;
transform: scale(0, 1);
opacity: 1;
transition: .2s all !important
}
.toggle:hover:before
{
transform: scale(1.0, 1);
opacity: 1
}
#just-dance-now
{
background: url(https://imgur.com/9pQQ30b.pn);
background-size: contain;
}
#coverflow
{
padding: 0 !important;
background: #0000
}
.coverflow--container
{
padding: 0 !important;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 0% !important;
background: none !important
}
#section-tabs
{
position: absolute !important
}
.caption, .song__decoration
{
position: absolute !important
}
.song__decoration
{
width: 70% !important
}
.song__cover
{
border: none !important;
padding: 0 !important
}
#preview
{
width: 100% !important;
height: 100% !important;
position: absolute !important;
padding: 0 !important;
left: 0% !important;
z-index: -999 !important
}
.pane.left-pane
{
width: 100% !important;
height: 100% !important;
position: absolute !important;
padding: 0 !important;
left: 0% !important;
margin: 0 !important
}
.song-preview
{
width: 100% !important;
height: 100% !important;
padding: 0 !important;
position: absolute;
left: 0% !important;
top: 0% !important;
}
.song-cover
{
z-index: 9999 !important;
top: 14%;
left: 3%;
border-radius: 0em;
width: 30% !important;
height: 52% !important;
border: none;
transform: scale(1);
background-size: contain !important;
background-position: center !important;
}
.song-cover, .item
{
color: #0000
}
.state-songselection .song-cover
{
background: none !important
}
.state-songselection .pre-beat.odd .song-cover
{
animation: CoverBeat 0.5s !important
}
@keyframes CoverBeat
{
0%
{
transform: scale(0.95)
}
100%
{
transform: scale(1)
}
}
@keyframes CoverBeat2
{
0%
{
transform: scale(1)
}
100%
{
transform: scale(1)
}
}
.song-cover:before
{
width: 100% !important;
height: 100% !important;
content: "" !important;
position: absolute;
top: 0%;
left: 0%;
background-size: contain !important;
background-position: center !important;
image-rendering: high-quality !important;
background-repeat: no-repeat;
color: #0000 !important
}
.highscore-display
{
position: absolute;
left: 88.3%;
top: 130%
}
.highscore-display:before
{
content: "";
top: 70%;
left: 17%;
width: 100%;
height: 5%;
background: white;
position: absolute;
border-radius: 100em
}
.owner-name
{
color: white;
font-family: Just Dance Bold;
letter-spacing: 0.03em;
top: -2.5em;
position: absolute;
left: -2%
}
.score__number
{
color: white;
font-family: Just Dance Regular;
font-size: 80%;
top: 11%
}
.score__stars .star
{
transform: rotate(15deg)
}
#song-details
{
position: absolute !important
}
.video-preview
{
border-radius: 0% !important;
width: 100% !important;
height: 60%;
top: 0%;
transition: 0.3s all !important
}
.video-preview__video
{
filter: blur(0.02em);
opacity: 0.8 !important;
transform: scale(1.66);
top: 15%;
transition: 0.3s all !important
}
.state-coachselection .video-preview
{
height: 100%;
transition: 0.3s all !important
}
.state-coachselection .video-preview__video
{
transform: scale(1);
top: 0%;
transition: 0.3s all !important
}
.video-preview:before
{
content: "" !important;
width: 100% !important;
height: 40% !important;
position: absolute !important;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
z-index: 9999 !important;
top: 60%;
left: 0%;
}
.video-preview:after
{
content: "" !important;
width: 100% !important;
height: 40% !important;
position: absolute !important;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
z-index: 9999 !important;
top: 0%;
left: 0%;
}
.song-grid, .playlist-container, #section-playlist
{
background: none !important
}
.song-grid
{
position: absolute !important;
left: -5%;
width: 113%;
overflow-x: hidden !important;
transform: scale(0.89);
top: 60%;
transition: none !important;
height: 50%;
overflow: visible !important
}
.item:before
{
position: absolute !important;
width: 120%;
height: 80%;
content: "";
background-size: cover !important;
border-radius: 0.4em !important;
background-position: center !important;
z-index: -10;
opacity: 1;
background-repeat: no-repeat !important
}
.item:after
{
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
content: "";
position: absolute;
width: 120%;
height: 80.5%;
top: 0%;
left: 0%;
z-index: -9;
border-radius: 0.4em !important;
opacity: 1;
transition: .2s all !important;
}
.item
{
padding: 0 !important;
height: 80% !important;
transform: scale(0.8);
transition: none !important;
}
.item-selected:after
{
border: solid white !important;
transition: none !important
}
.item-selected:before
{
transform: scale(1);
height: 80%;
transition: .1s
}
.item-selected .caption
{
opacity: 1;
}
.song__cover
{
z-index: -9999 !important;
height: 80% !important;
width: 100% !important;
background-size: cover !important
}
.item-container
{
width: 100000% !important;
height: 100% !important;
transition: none !important;
}
.caption.title
{
font-family: Just Dance Bold;
color: white;
letter-spacing: 0.02em;
top: 63%;
font-size: 130%;
text-align: center;
width: 100%
}
.caption
{
height: 15% !important;
width: 116% !important;
}
.song--details
{
top: 15% !important
}
.song-grid--details
{
height: 5% !important;
width: 96%;
border: none !important;
}
.song-grid--details:before
{
content: "";
top: 10.5em;
left: 92.5%;
width: 10%;
height: 300%;
position: absolute;
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FTooltip.png?v=1626661730422);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: scale(0.7);
image-rendering: high-quality !important;
}
.song-grid--title
{
color: white !important;
text-align: right;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
border: none !important;
font-family: Just Dance !important;
letter-spacing: 0.03em
}
.song-grid--title:before
{
content: "";
top: 1.6em;
left: 90%;
width: 10%;
height: 30%;
position: absolute;
background: white;
border-radius: 100em
}
.song-grid--title em
{
border: solid white !important
}
.song-grid--titleDetails
{
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
border: none !important
}
.state-coachselection .song-details
{
top: 90% !important;
left: 0% !important;
width: 100% !important;
}
.state-coachselection .song-details:before
{
width: 40% !important;
left: 30%;
}
.song-details
{
z-index: 999 !important;
width: 65% !important;
left: 33% !important;
top: 43% !important;
background: none !important;
height: 15%;
border-radius: 0 !important;
}
.song-details:before
{
background: #7e5d5d00;
content: "";
width: 70% !important;
height: 1.5% !important;
position: absolute !important;
border-radius: 100em !important;
top: 33%;
left: 14.5%;
}
.song-detail.song__infos
{
padding: 0 !important;
width: 100% !important;
top: 0em !important;
position: absolute !important;
left: 0 !important
}
.song-detail__title
{
font-family: Just Dance !important;
color: white !important;
text-align: left;
font-size: 32% !important;
height: 1.06em !important;
letter-spacing: 0.01em !important;
top: 50% !important;
-webkit-font-smoothing: antialiased !important;
}
.song-detail__artist
{
font-family: Just Dance Medium !important;
color: #e2e2e2 !important;
text-align: left;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
}
.state-coachselection .song-detail__title, .state-coachselection .song-detail__artist
{
text-align: center
}
#players
{
width: 100%;
left: 5% !important;
display: block !important
}
#players:before
{
width: 100%;
position: absolute;
left: -5%;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
height: 130% !important;
display: block !important;
opacity: 1 !important;
display: none !important
}
#room-info
{
background: none;
width: 12%;
left: -2.5%
}
.danceroom__label
{
color: #fff0;
font-family: Just Dance Regular !important;
text-align: center;
left: 24% !important;
position: absolute !important;
letter-spacing: 0.02em !important;
font-size: 14% !important;
top: 14%
}
.danceroom__label:before
{
content: "Danceroom";
color: white
}
.danceroom__number
{
color: white;
font-family: Just Dance !important;
text-shadow: none !important;
text-align: center;
font-size: 20%;
position: absolute !important;
top: 10%;
width: 100% !important
}
#room-info:before
{
position: absolute !important;
width: 1.5%;
height: 26%;
background: white;
content: "";
left: 90%;
border-radius: 100em !important;
top: 13%;
}
.state-songselection .player-name, .state-coachselection .player-name
{
font-family: Just Dance Bold !important;
left: 10%;
font-size: 55% !important;
letter-spacing: 0.02em !important;
top: -65%;
width: 250% !important;
height: 50% !important
}
.state-songselection .player-name:after, .state-coachselection .player-name:after
{
content: "Welcome,";
top: 0%;
left: 0%;
width: 100%;
height: 10%;
position: absolute !important;
float: left !important;
text-align: left
}
.player-name em
{
width: 100% !important;
text-shadow: none !important;
text-align: left;
left: 16%
}
.dancercard .avatar-wrapper
{
left: -40% !important;
animation: none !important;
transform: scale(0.5);
top: -145% !important;
position: absolute !important
}
.avatar
{
background: non !important;
}
.avatar-wrapper:befor
{
width: 100%;
height: 100%;
position: absolute;
content: "";
background: var(--profile-icon);
top: 0%;
left: 0%;
background-size: contain;
border-radius: 100em !important;
border: solid white 0.1em
}
.coach-selection
{
border-radius: 0 !important;
top: 0%;
left: 0%;
width: 100%;
height: 100%
}
.coach-selection:before
{
content: "Get Ready!";
position: absolute;
width: 100%;
height: 100%;
top: 10%;
left: 0%;
font-family: Just Dance Bold;
text-align: center;
font-size: 17%;
letter-spacing: 0.05em
}
.state-coachselection .coverflow--container
{
display: block !important
}
.coach__names-list
{
width: 150%;
left: 80%;
overflow: visible !important;
}
.coach__player-list.animate
{
animation: animateShowCoach 0.4s !important;
}
@keyframes animateShowCoach
{
0%
{
top: -5%;
opacity: 0;
}
100%
{
top: 0%;
opacity: 1;
}
}
.coach-selection__button:after
{
display: none !important
}
.coach-selection__button
{
color: #0000 !important;
border-radius: 100em !important;
width: 15% !important;
height: 7%;
min-width: 0% !important;
padding: 0 !important;
background: #00000094 !important;
backdrop-filter: blur(0.5em) !important;
border: solid white 0.1em;
background-size: 50% !important;
background-repeat: no-repeat !important;
background-position: 58% center !important;
top: 89%;
left: 82%;
}
.coach-selection__button:before
{
animation: none !important;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
transform: rotate(0deg);
filter: none !important;
background: none;
content: "DANCE!";
font-size: 80%;
color: white;
font-family: Just Dance Bold;
opacity: 1 !important;
align-items: center !important;
padding-top: 4.5%
}
.coach__player-list
{
background: #00000094 !important;
color: #fff;
font-family: Just Dance;
border-radius: 100em;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
height: 30%;
width: 65%;
padding-left: 0% !important;
padding-top:4.85%;
padding-right: 0% !important;
opacity: 1;
border: solid white 0.08em;
letter-spacing: 0.02em !important;
transition: .1s all !important;
text-align: center !important;
backdrop-filter: blur(0.5em) !important
}
.coach__player-list:before
{
content: "";
background: !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: absolute !important;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 100em;
top: 0%;
left: 0%;
filter: blur(0em)
}
.coach__player-list:after
{
content: "";
position: absolute;
width: 25%;
height: 90%;
top: 5%;
left: 2%;
background: var(--profile-icon);
border: solid white 0.08em;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
border-radius: 100em;
z-index: 2;
display: none !important
}
.coach-selection__list
{top: 22%}
.coach-selection__list.coach-selection__list--1 .coach__img
{
transform: scale(1.45)
}
.coach-selection__list.coach-selection__list--2
{
padding-left: 0% !important;
left: -3%
}
.coach-selection__list.coach-selection__list--2 .coach__img
{
transform: scale(1.25)
}
.coach-selection__list.coach-selection__list--2 [data-id="2"]
{
left: 10%
}
.coach-selection__list.coach-selection__list--3
{
padding-left: 0% !important;
left: -6%
}
.coach-selection__list.coach-selection__list--3 [data-id="2"]
{
left: 6%
}
.coach-selection__list.coach-selection__list--3 [data-id="3"]
{
left: 12%
}
.coach-selection__list.coach-selection__list--3 .coach__img
{
transform: scale(1.05)
}
.coach-selection__list [data-id="1"]
{
animation: CoachSlideIn 0.9s !important
}
.coach-selection__list [data-id="2"]
{
animation: CoachSlideIn2 0.9s !important
}
.coach-selection__list [data-id="3"]
{
animation: CoachSlideIn3 0.9s !important
}
.coach-selection__list [data-id="4"]
{
animation: CoachSlideIn4 0.9s !important
}
@keyframes CoachSlideIn
{
0%
{
top: -5%;
opacity: 0
}
100%
{
top: 0%;
opacity: 1
}
}
@keyframes CoachSlideIn2
{
0%
{
top: -5%;
opacity: 0
}
30%
{
top: -5%;
opacity: 0
}
100%
{
top: 0%;
opacity: 1
}
}
@keyframes CoachSlideIn3
{
0%
{
top: -5%;
opacity: 0
}
60%
{
top: -5%;
opacity: 0
}
100%
{
top: 0%;
opacity: 1
}
}
@keyframes CoachSlideIn4
{
0%
{
top: -5%;
opacity: 0
}
90%
{
top: -5%;
opacity: 0
}
100%
{
top: 0%;
opacity: 1
}
}
.coach-selection__details
{
width: 100% !important;
position: absolute !important;
max-width: 100%;
height: 20%;
border-radius: 0;
text-align: left;
background: none !important;
top: 86%;
left: 8%
}
.state-dance .coach-selection__details-song, .state-dance .coach-selection__details-artist
{
opacity: 0
}
.coach-selection__details:before
{
content: "";
position: absolute !important;
top: 0%;
left: 36.4%;
background: white;
width: 30%;
height: 4%;
z-index: 99 !important;
border-radius: 100em;
display: none !important
}
.coach-selection__details-song
{
font-family: Just Dance;
font-size: 22% !important;
color: white !important;
top: 28% ;
position: absolute;
}
.coach-selection__details-artist
{
font-family: Just Dance Medium;
color: white !important;
font-size:13% !important;
top: 13%;
position: absolute;
animation: SongTr2 1s !important
}
.state-coachselection .song-cover--low-res
{
animation: LowResTr1 1s !important
}
.state-coachselection .coach-selection__details-song
{
animation: SongTr1 1s !important
}
.state-coachselection .coach-selection__details-artist
{
animation: SongTr2 1s !important
}
@keyframes LowResTr1
{
0%
{
transform: scale(0.6);
opacity: 0
}
100%
{
transform: scale(1);
opacity: 1
}
}
@keyframes SongTr1
{
0%
{
opacity: 0;
left: 5%;
}
100%
{
opacity: 1;
left: 1%
}
}
@keyframes SongTr2
{
0%
{
opacity: 0;
left: 3%;
}
40%
{
opacity: 0;
left: 3%;
}
100%
{
opacity: 1;
left: 1%
}
}
.state-dance .song-cover--low-res
{
animation: LowResTr2 2.2s !important
}
.state-dance .coach-selection__details-song
{
animation: SongTr3 2.2s !important
}
.state-dance .coach-selection__details-artist
{
animation: SongTr4 2.2s !important
}
@keyframes LowResTr2
{
0%
{
transform: scale(1);
opacity: 1
}
85%
{
transform: scale(1);
opacity: 1
}
100%
{
transform: scale(1);
opacity: 0
}
}
@keyframes SongTr3
{
0%
{
opacity: 1;
left: 1%;
}
85%
{
opacity: 1;
left: 1%;
}
100%
{
opacity: 0;
left: 2%
}
}
@keyframes SongTr4
{
0%
{
opacity: 1;
left: 1%;
}
85%
{
opacity: 1;
left: 1%;
}
100%
{
opacity: 0;
left: 2%
}
}
.song-cover
{
z-index: 999 !important
}
.state-coachselection .video-preview:before
{
content: "" !important;
position: absolute !important;
width: 100% !important;
height: 100% !important;
top: 0%;
left: 0%;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
z-index: 999 !important
}
.state-coachselection .song-cover, .state-tutorial .song-cover
{
z-index: 9999 !important;
}
.state-coachselection .song-cover--hi-res
{
display: none !important
}
.song-cover--low-res
{
height: 9% !important;
width: 5% !important;
border-radius: 0.05em !important;
top: 5.04em !important;
animation: none !important
}
#goldmove .layer.layer-2
{
background-image: url(https://imgur.com/C1onc9k.png);
display: none !important;
opacity: 0 !important
}
#goldmove .layer.layer-3
{
background-image: url(https://imgur.com/bwN3nUB.png);
display: block !important;
}
/*---Dance---*/
.state-dance #just-dance-now
{
background: black !important;
transition: background 0.6s !important
}
.line
{
width: 100% !important;
color: #fff !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(-30%) translateX(0%);
transition: .3s all !important;
text-shadow: none !important;
font-family: Just Dance Bold;
letter-spacing: 0.04em;
font-weight: 0em !important;
font-weight: lighter !important
}
#lyrics .line.previous {
transform: translatey(-30%) translateX(50%) !important;
transition: .3s all !important;
text-shadow: none !important
}
#lyrics .line {
-webkit-animation: nextLineInf 0.2s;
animation: nextLineInf 0.35s;
text-shadow: none !important;
}
.fragment .fill
{
top: -1% !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(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) translatex(0em)
}
100% {
opacity: 1;
-webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
transform: translateY(1em) perspective(0px) rotateX(0deg) translatex(0em)
}
}
#lyrics {
transform: scale(0.85);
left: -5%;
top: 91%;
z-index: 99999999999999999999999999999 !important;
font-family: Just Dance Regular !important;
letter-spacing: 0.03em;
font-size: 19%;
width: 100% !important;
border: none !important;
}
.fragment .fill
{
backdrop-filter: opacity(0) !important
}
.crown {
top: 20% !important;
left: -20% !important;
transform: scale(1.4) rotate(-12deg) !important;
z-index: -99999 !important
}
.crown::before {
background-image: url(https://i.imgur.com/pH3xc9A.png)!important;
}
.crown {
background-image: url(https://i.imgur.com/pH3xc9A.png)!important;
}
#players .crown::before {
-webkit-animation: CrownZoom 1s infinite !important;
animation: Corona 1s infinite alternate;
background-image: url(https://i.imgur.com/pH3xc9A.png)!important;
background-color: transparent!important;
border: none;
}
.hud.beat > #players.animate .crown {
animation: CrownBeat 0.5s !important
}
@keyframes CrownBeat
{
0%
{
transform: scale(1.33) rotate(-12deg);
}
100%
{
transform: scale(1.4) rotate(-12deg);
}
}
.hud.beat > #players.animate .player-stars .star:not(.no-beat)::before {
animation: none !important
}
@keyframes racetrack-star-beat
{
0%
{
transform: scale(1) rotate(13deg);
}
15%
{
transform: scale(0.93) rotate(13deg);
}
80%
{
transform: scale(1) rotate(13deg);
}
100%
{
transform: scale(1) rotate(13deg);
}
}
#beat .particle-system
{
display: none;
opacity: 0
}
#beat {
width: 60% !important;
height: 5% !important;
bottom: -2.9% !important;
left: -64%;
background-color: #ff02fc !important;
background-size: 100% 100% !important;
background-position: center !important;
border-bottom: none;
opacity: 1 !important;
border-radius: 100em;
background-image: none !important;
}
html:not(.ipad) .hud.beat>#pictos>#beat
{
animation-name: BeatCoach !important;
}
#pictos {
width: 18.9% !important;
top: 72% !important
}
#pictos.multi-coach {
width: 26%!important;
}
#pictos.multi-coach #beat {
width: 45% !important;
left: -47%;
}
.picto {
left: -69.3% !important;
margin-bottom: 0.06em !important
}
.multi-coach .picto {
left: -60%!important;
}
@keyframes BeatCoach {
100% {
opacity: 1;
transform: scale(1.0, 1);
}
10% {
opacity: 1;
transform: scale(0.9, 0.9);
}
00% {
opacity: 1;
transform: scale(1.0, 1);
}
}
#racetrack-fill-p1 {
transition: .3s all !important;
}
#racetrack-fill-p2 {
transition: .3s all !important
}
#racetrack-fill-p3 {
transition: .3s all !important
}
#racetrack-fill-p4 {
transition: .3s all !important
}
.racetrack-fill-players
{
border-radius: 3px;
}
#racetrack .progress-bar
{
border-bottom: 1px solid #daf3f000;
border-radius: 0 0 0.05em 0.05em;
}
.progress-background
{
background: #00000040;
background-image: none !important;
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 80%, #f000 100%) !important;
}
#racetrack
{
top: 25% !important;
left: 0% !important;
}
#racetrack .progress-bar {
right: 5%;
width: 35%;
border: none !important
}
#racetrack .star3,
#racetrack .star2,
#racetrack .star1 {
margin-bottom: -2%;
}
#racetrack .star3 {
bottom: 40%;
}
#racetrack .star2 {
bottom: 24%;
}
#racetrack .star1 {
bottom: 8%;
}
#racetrack .star {
left: 15% !important;
width: 0.48rem;
height: 0.48rem;
}
#racetrack {
width: 7.2%;
height: 55.2%;
}
#racetrack .star
{
transform: scale(1) rotate(13deg);
left: 10%
}
.hud.beat #players .feedback-label {
background-repeat: no-repeat;
background-image: url(https://imgur.com/4zwEoqs.png);
}
.feedback
{
width: 55% !important;
left: 10% !important;
height: 140% !important;
top: -60% !important;
overflow: visible !important;
animation: none !important;
opacity: 1 !important
}
.feedback-label
{
opacity: 1 !important;
animation: none !important
}
.feedback-good
{
width: 50% !important;
left: 24% !important;
}
.feedback-ok
{
width: 40% !important;
left: 29.5% !important;
}
.feedback-yeah
{
width: 85.5% !important;
left: 7% !important;
}
.feedback-label.feedlabel-badgold {
top: 20% !important
}
.feedback-label.feedlabel-good {
top: 14%!important;
left: 0.5%
}
.feedback-label.feedlabel-bad {
top: 11% !important;
}
.feedback-label.feedlabel-ok {
top: 28% !important;
left: 0%
}
.feedback-label.feedlabel-yeah
{
top: 20% !important;
left: -1% !important
}
.feedback-label.feedlabel-perfect
{
top: 15% !important;
left: 0%
}
.feedback
{
background: none !important
}
#players .feedback-ok {
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackOk.png) no-repeat top/ 100% 100%;
height: 160%;
}
#players .feedback-yeah {
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackGold.png) no-repeat top/ 100% 100%;
height: 160%;
}
#players .feedback-bad,
#players .feedback-badgold {
background: none !important;
height: 140%;
}
#players .feedback-perfect {
left: 21.5% !important;
}
.feedback-perfect:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 13%;
left: 0%;
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackPerfect.png) no-repeat top/ 100% 100%;
animation: feedback 0.7s;
opacity: 0
}
.feedback-perfect:after
{
content: "";
position: absolute;
width: 280%;
height: 120%;
top: 23%;
left: -95%;
background-image: url(https://imgur.com/FWHzfEj.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: CrossSPerfect2 0.7s !important;
opacity: 0
}
.feedlabel-perfect:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-image: url(https://imgur.com/fPDuvbo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabelp 0.7s !important;
opacity: 0
}
.feedlabel-perfect:after
{
content: "";
position: absolute;
width: 210%;
height: 210%;
top: -50%;
left: -55%;
background-image: url(https://imgur.com/B2bK1gJ.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: CrossSPerfect 0.7s ;
z-index: -1 !important;
opacity: 0
}
@keyframes CrossSPerfect
{
0%
{
filter: brightness(100%);
opacity: 0.5;
transform: scale(0.7);
}
3%
{
filter: brightness(100%);
opacity: 1;
transform: scale(1.5);
}
10%
{
filter: brightness(100%);
opacity: 1;
transform: scale(0.7);
}
23%
{
filter: brightness(100%);
opacity: 1;
transform: scale(1.1);
}
3%
{
filter: brightness(100%);
opacity: 1;
transform: scale(1);
}
100%
{
filter: brightness(100%);
opacity: 0;
}
}
@keyframes CrossSPerfect2
{
0%
{
filter: brightness(100%);
opacity: 0.5;
transform: scale(0.3);
}
3%
{
filter: brightness(180%);
opacity: 1;
transform: scale(1);
}
100%
{
filter: brightness(100%);
opacity: 0;
}
}
@keyframes feedlabelp {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
15% {
opacity: 1;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(1.2, 1.2, 1.2)
}
24% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
opacity: 1;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(1.1, 1.1, 1.1)
}
43% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1);
transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1)
}
}
/*---Good---*/
.feedback-good:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 13%;
left: 0%;
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackGood.png) no-repeat top/ 100% 100%;
animation: feedback 0.7s;
opacity: 0
}
.feedback-good:after
{
content: "";
position: absolute;
width: 70%;
height: 120%;
top: 35%;
left: -45%;
background-image: url(https://imgur.com/iuRo7i0.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: GoodCircle1 0.7s !important;
filter: blur(0.05em);
opacity: 0
}
.feedlabel-good:after
{
content: "";
position: absolute;
width: 50%;
height: 50%;
top: 35%;
left: 50%;
background-image: url(https://imgur.com/iuRo7i0.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: GoodCircle2 0.7s;
z-index: -1 !important;
opacity: 0.6;
filter: blur(0.05em);
opacity: 0
}
.feedlabel-good:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-image: url(https://imgur.com/HD1NFjQ.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabel 0.7s !important;
opacity: 0
}
@keyframes GoodCircle1
{
0%
{
top: 35%;
left: -45%;
opacity: 1
}
75%
{
transform: scale(1.15)
}
76%
{
transform: scale(1.25)
}
100%
{
top: 40%;
left: -60%;
opacity: 0;
}
}
@keyframes GoodCircle2
{
0%
{
top: 35%;
left: 50%;
opacity: 0.6
}
75%
{
transform: scale(1.15)
}
76%
{
transform: scale(1.25)
}
100%
{
top: 45%;
left: 60%;
opacity: 0;
}
}
/*---Ok---*/
.feedback-ok:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 13%;
left: 0%;
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackOk.png) no-repeat top/ 100% 100%;
animation: feedback 0.7s;
opacity: 0
}
.feedlabel-ok:before
{
content: "";
position: absolute;
width: 100%;
height: 70%;
top: 5%;
left: 0%;
background-image: url(https://imgur.com/rwMHMXG.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabel 0.7s !important;
opacity: 0
}
/*---Bad---*/
.feedlabel-bad:before
{
content: "";
position: absolute;
width: 100%;
height: 70%;
top: 30%;
left: 0%;
background-image: url(https://imgur.com/DtBHQLU.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabel 0.7s !important;
opacity: 0
}
.feedlabel-badgold:before
{
content: "";
position: absolute;
width: 100%;
height: 70%;
top: 18%;
left: 0%;
background-image: url(https://imgur.com/dwQKSWE.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabel 0.7s !important;
opacity: 0
}
/*---Yeah---*/
.feedback-yeah:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 13%;
left: 0%;
background: url(https://cdn.glitch.com/71cd8aaa-eb55-4512-a507-47b590506b23%2FFeedbackGold.png) no-repeat top/ 100% 100%;
animation: feedback 0.7s;
opacity: 0
}
.feedback-yeah:after
{
content: "";
position: absolute;
width: 280%;
height: 120%;
top: 23%;
left: -95%;
background-image: url(https://imgur.com/xuZISzK.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: CrossSPerfect2 0.7s !important;
opacity: 0
}
.feedlabel-yeah:before
{
content: "";
position: absolute;
width: 150%;
height: 150%;
top: -20%;
left: -25%;
background-image: url(https://imgur.com/fHhcCOE.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: feedlabely 0.7s !important;
opacity: 0
}
.feedlabel-yeah:after
{
content: "";
position: absolute;
width: 210%;
height: 210%;
top: -50%;
left: -55%;
background-image: url(https://imgur.com/knuJhrE.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: GoldParticleBounce 0.7s;
z-index: -1 !important;
opacity: 0;
filter: blur(0.02em);
transform: scale(1.4)
}
@keyframes GoldParticleBounce
{
0%
{
transform: scale(1);
top: -50%
}
20%
{
top: -50%;
transform: scale(1.4);
opacity: 0.4
}
60%
{
opacity: 0.4
}
100%
{
top: -45%;
opacity: 0
}
}
/*---End---*/
.feedback-label
{
background: none !important;
overflow: visible !important
}
@keyframes feedback {
0% {
opacity: 0;
transform: scale3d(0.2, 1, 0.96)
}
10% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1.2, 1, 1)
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 0.96)
}
}
@keyframes feedlabel {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
10% {
opacity: 1;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(1.1, 1.1, 1.1)
}
36% {
opacity: 1
}
43% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1);
transform: translate3d(0, 0, 0) scale3d(0.97, 0.97, 1)
}
}
@keyframes feedlabely {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(0.9, 0.9, 0.9)
}
15% {
opacity: 1;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(1.2, 1.2, 1.2)
}
36% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1);
transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1.2)
}
}
.player-special
{
top: 35% !important
}
#goldmove
{
z-index: -1 !important;
}
#goldmove .layer.layer-1
{
background-image: url(https://imgur.com/Upg3MJ6.png);
filter: brightness(110%);
}
#goldmove .layer.layer-2
{
background-image: none !important;
display: none !important;
opacity: 0 !important
}
#goldmove .layer.layer-3
{
background-image: url(https://imgur.com/bwN3nUB.png);
display: block !important;
filter: brightness(110%);
}
.state-dance #players
{
left: 1% !important;
width: 100% !important;
overflow: visible !important;
top: 2%
}
.player
{
overflow: visible !important
}
.state-dance .player-color
{
width: 81.6% !important;
height: 25% !important;
left: 9%;
}
.state-dance .dancercard
{
margin-right: 150% !important
}
.state-dance .dancercard .player-name
{
top: -1.05em;
left: -10% !important;
width: 120% !important;
height: 110% !important;
text-align: center !important;
text-shadow: none !important;
font-family: Just Dance;
letter-spacing: .01em;
font-size: 100%;
text-overflow: ellipsis !important;
}
.state-dance .player-name em
{
text-align: center !important;
width: 100% !important;
max-width: 10000% !important;
left: 0% !important
}
.state-dance .dancercard .player-name em {
text-shadow: 0.03em 0.03em 0.01em rgba(0, 0, 0, 0.3)!important;
width: 150%;
text-align: center !important;
padding: 0%;
}
.state-dance #players .player:nth-child(2)
{
left: 32%
}
.state-dance #players .player:nth-child(3)
{
left: 55%
}
.state-dance #players .player:nth-child(4)
{
left: 79%
}
html:not(.ipad) .hud.beat > #players.animate .player-color
{
animation: none !important;
}
#players .stars {
top: 42% !important;
transform: scale(0.75);
left: -26%;
}
#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(13deg)
}
#racetrack .star
{background-image: none !important;}
#racetrack .star[data-visible="true"], #players .star, .score .stars .star, .state-songselection .star
{
background-image: url(https://imgur.com/RWSBKQA.png) !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://imgur.com/tPwLnHi.png) !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://imgur.com/owvcf0W.png) !important
}
/*---- Paste anywhere on this box here-------*/
#dance-transition:before
{
background: #000;
}
.state-tutorial #dance-transition:before
{
background: #0000
}
#dance-transition
{
z-index: 9999 !important;
animation: none !important;
}
.state-tutorial #dance-transition
{
display: block !important;
z-index: 9999 !important
}
.state-tutorial #dance-transition.animate.in
{
display: block !important;
z-index: 9999 !important
}
.dt-row
{
display: block !important;
opacity: 1;
visibility: visible !important;
background: #60606000;
animation: none;
transform: rotate(0deg) !important;
padding: 0 !important;
margin: 0 !important;
background-image: none !important;
position: absolute;
height: 20% !important
}
.dt-row.dt1
{
height: 100% !important;
background: #0000;
transition: none !important;
}
.dt-row.dt3
{
background: linear-gradient(225deg, #FF740F 0%, #FF00E5 100%) !important;
border-radius: 0.09em;
left: 33%;
position: absolute !important;
top: 28%;
animation: SlideInT 1.3s !important;
opacity: 1 !important;
width: 12.5% !important;
height: 23% !important;
transform: scale(1)
}
.dt-row.dt4
{
background: linear-gradient(225deg, #00FFC2 0%, #AEFF02 100%) !important;
border-radius: 0.09em;
left: 53%;
position: absolute !important;
top: 55%;
opacity: 1 !important;
width: 11% !important;
transform: rotate(0deg) scale(1)
}
.dt-row.dt5
{
left: 38%;
position: absolute !important;
top: 36%;
opacity: 1 !important;
width: 22% !important;
height: 40% !important;
transform: rotate(0deg) scale(1);
background: url(https://imgur.com/oyjV4tl.png) !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
.animate.out .dt-row.dt3, .animate.out .dt-row.dt4, .animate.out .dt-row.dt5
{
opacity: 0 !important
}
.state-tutorial .animate.out .dt-row.dt3, .state-tutorial .animate.out .dt-row.dt4, .state-tutorial .animate.out .dt-row.dt5
{
opacity: 1 !important
}
#dance-transition.animate.in .dt-row.dt3
{
animation: PopInTransition2 1.4s infinite !important;
transition: none !important
}
#dance-transition.animate.in .dt-row.dt4
{
animation: PopInTransition 1.4s !important;
transition: none !important
}
#dance-transition.animate.in .dt-row.dt5
{
animation: PopInTransition3 1.4s !important;
transition: none !important;
}
#dance-transition.animate.out .dt-row.dt3
{
animation: PopOutTransition2 1.4s !important;
transition: none !important
}
#dance-transition.animate.out .dt-row.dt4
{
animation: PopOutTransition 1.4s !important;
transition: none !important
}
#dance-transition.animate.out .dt-row.dt5
{
animation: PopOutTransition3 1.4s !important;
transition: none !important;
}
@keyframes PopInTransition
{
0%
{
transform: scale(0.5);
opacity: 0
}
50%
{
transform: scale(1)
}
100%
{
transform: scale(1)
}
}
@keyframes PopInTransition2
{
0%
{
transform: scale(0.5);
opacity: 0
}
20%
{
transform: scale(0.5);
opacity: 0
}
60%
{
transform: scale(1)
}
100%
{
transform: scale(1)
}
}
@keyframes PopInTransition3
{
0%
{
transform: scale(0.5);
opacity: 0
}
20%
{
transform: scale(0.5);
opacity: 0
}
40%
{
transform: scale(0.5);
opacity: 0
}
80%
{
transform: scale(1)
}
100%
{
transform: scale(1)
}
}
@keyframes PopOutTransition
{
0%
{
transform: scale(1);
opacity: 1
}
40%
{
transform: scale(1.2);
opacity: 1
}
100%
{
transform: scale(0.5);
opacity: 0
}
}
@keyframes PopOutTransition2
{
0%
{
transform: scale(1);
opacity: 1
}
40%
{
transform: scale(1);
opacity: 1
}
60%
{
transform: scale(1.2);
opacity: 1
}
100%
{
transform: scale(0.5);
opacity: 0
}
}
@keyframes PopOutTransition3
{
0%
{
transform: scale(1);
opacity: 1
}
40%
{
transform: scale(1);
opacity: 1
}
60%
{
transform: scale(1);
opacity: 1
}
80%
{
transform: scale(1.2);
opacity: 1
}
100%
{
transform: scale(0.5);
opacity: 0
}
}
.state-tutorial #dance-transition .dt-row.dt3, .state-tutorial #dance-transition.animate.in .dt-row.dt3, .state-tutorial #dance-transition.animate.out .dt-row.dt3, .state-tutorial #dance-transition.animate .dt-row.dt3
{
animation: PopInTransition2 1.4s !important;
transition: none !important;
}
.state-tutorial #dance-transition .dt-row.dt4, .state-tutorial #dance-transition.animate.in .dt-row.dt4, .state-tutorial #dance-transition.animate.out .dt-row.dt4, .state-tutorial #dance-transition.animate .dt-row.dt4
{
animation: PopInTransition 1.4s !important;
transition: none !important
}
.state-tutorial #dance-transition .dt-row.dt5, .state-tutorial #dance-transition.animate.in .dt-row.dt5, .state-tutorial #dance-transition.animate.out .dt-row.dt5, .state-tutorial #dance-transition.animate .dt-row.dt5
{
animation: PopInTransition3 1.4s !important;
transition: none !important;
}
.state-tutorial #coverflow, .state-tutorial .coach-selection, .state-dance #coverflow, .state-dance .coach-selection, .state-dance .coverflow--container, .state-tutorial .coverflow--container, .state-dance .song-preview, .state-tutorial .song-preview
{
opacity: 1 !important;
display: block !important;
visibility: visible !important;
z-index: 99 !important
}
.state-tutorial .song-grid, .state-tutorial #section-tabs, .state-tutorial .item-container, .state-tutorial .song-cover--hi-res, .state-tutorial .coach-selection:before, .state-tutorial .coach-selection__button, .state-dance .coach-selection__button, .state-dance .coach-selection:before, .state-dance .song-grid, .state-dance .song-cover--hi-res, .state-tutorial .song-cover--hi-res, .state-tutorial .highscore-display, .state-dance .highscore-display, .state-coachselection .highscore-display
{
display: none !important
}
.state-dance .song-cover--low-res
{
opacity: 0
}
.hud:before
{
backdrop-filter: blur(10em);
background: black !important;
z-index: 99999999 !important
}
.playlist-img-container
{
left: 0%
}
@keyframes newStar{0%{opacity:0;-webkit-transform:scale(3) rotate(45deg);transform:scale(3) rotate(45deg)}35%{opacity:1;-webkit-transform:scale(2) rotate(110deg);transform:scale(2) rotate(110deg)}50%{opacity:1;-webkit-transform:scale(1.85) rotate(110deg);transform:scale(1.85) rotate(110deg)}73%{opacity:1;-webkit-transform:scale(1.6) rotate(13deg);transform:scale(1.6) rotate(13deg)}92%{opacity:1;-webkit-transform:scale(0.85) rotate(13deg);transform:scale(0.85) rotate(13deg)}100%{opacity:1;-webkit-transform:scale(1) rotate(13deg);transform:scale(1) rotate(13deg)}}
.exit-btn.exit-btn--play-again.exit-btn--animate, .exit-btn:before, #afterdance:before, #afterdance:after, .state-afterdance .section-grid-trainer, .state-afterdance .song-cover:before, .state-afterdance .item-container, .state-afterdance .connect-phone-info, .flag, .state-afterdance #crown-container, .superstar:after, .megastar:after, .state-afterdance .song-grid, .state-afterdance .highscore-display, #afterdance .crown, .score:before
{
display: none !important
}
.state-afterdance #coverflow, .state-afterdance .coverflow--container, .state-afterdance #preview, .state-afterdance .song-preview
{
display: block !important;
opacity: 1 !important;
position: absolute !important
}
.state-afterdance #coverflow
{
z-index: -1 !important
}
.state-afterdance .song-cover
{
left: 0%;
top: 0%;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
}
.state-afterdance .song-cover:after
{
position: absolute;
content: "" !important;
color: #fff0;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
display: block !important;
width: 100%;
height: 100%
}
.song-info .title, .song-info .artist
{
color: white !important;
opacity: 1 !important;
position: absolute
}
.song-info
{
position: absolute;
top: 140%;
left: 26%;
width: 230% !important
}
.song-info .title
{
font-family: Just Dance;
letter-spacing: 0.015em !important;
top: 2.5em !important;
font-size: 80%
}
.song-info .artist
{
font-family: Just Dance Medium;
letter-spacing: 0.01em !important;
font-size: 45% !important;
top: 40%
}
#afterdance .coach
{
top: 150%;
left: 6%;
position: absolute;
width: 18% !important;
height: 19.9% !important;
border-radius: 0.07em !important
}
#afterdance
{
padding: 0 !important;
margin: 0 !important;
height: 100%;
width: 100% !important;
position: absolute;
background: #80808000 !important
}
#afterdance:after
{
width: 100%;
height: 100%;
content: "Still In Progress :)";
position: absolute;
z-index: 6;
font-family: Just Dance;
font-size: 40%;
text-align: center;
top: 50%
}
.exit-btn
{
color: white;
z-index: 999 !important;
font-family: Just Dance Bold;
letter-spacing: 0.003em !important;
border: solid white 0.1em;
padding-top: 0.7em;
height: 8%;
width: 17%;
border-radius: 100em;
transition: .1s all !important;
left: 80%
}
.exit-btn:hover
{
color: black;
background: white
}
.results
{
border: solid #fff0;
margin: 0 !important;
width: 100% !important;
height: 85% !important;
margin-left: 8% !important
}
.results.solo
{
margin-top: 13% !important
}
#afterdance .players
{
width: 100% !important;
height: 100% !important;
max-height: 150% !important
}
.scrollArea
{
height: 100%
}
#afterdance .name
{
font-family: Just Dance;
text-shadow: none !important;
color: white !important;
position: absolute !important;
left: 12%;
letter-spacing: 0.02em !important;
top: 14%
}
.player-content
{
background: #000000ab !important;
height: 100% !important;
top: 0%;
position: absolute !important;
left: 6%;
padding: 0% !important;
border-radius: 0.1em !important;
overflow: hidden !important;
border: solid #fff 0.02em;
backdrop-filter: blur(0.08em) !important
}
.state-afterdance .player
{
height: 0.8rem !important;
top: 0%;
}
.state-afterdance .avatar-wrapper
{
width: 100%;
height: 100%;
}
.state-afterdance .avatarFlag
{
position: absolute !important;
z-index: 1 !important;
top: 27%;
left: 4.5%
}
.state-afterdance .color
{
position: absolute !important;
z-index: 1 !important;
left: 14.67%;
toP: 69%;
color: #fff0;
height: 20% !important;
border-radius: 0.07em !important
}
#afterdance .player:nth-child(1) .color
{
width: 30% !important
}
#afterdance .player:nth-child(2) .color
{
width: 20% !important
}
#afterdance .player:nth-child(3) .color
{
width: 10% !important
}
#afterdance .player:nth-child(4) .color
{
width: 2% !important
}
#afterdance.transition-in .player:nth-child(1)
{
animation: FadeSlideInScores 0.5s !important;
animation-delay: 0s !important
}
#afterdance.transition-in .player:nth-child(2)
{
animation: FadeSlideInScores2 0.6s !important;
animation-delay: 0s !important
}
#afterdance.transition-in .player:nth-child(3)
{
animation: FadeSlideInScores3 0.7s !important;
animation-delay: 0s !important
}
#afterdance.transition-in .player:nth-child(4)
{
animation: FadeSlideInScores4 0.8s !important;
animation-delay: 0s !important
}
@keyframes FadeSlideInScores
{
0%
{
left: 5%;
opacity: 0
}
10%
{
left: 5%;
opacity: 0
}
100%
{
left: 0%;
opacity: 1
}
}
@keyframes FadeSlideInScores2
{
0%
{
left: 5%;
opacity: 0
}
30%
{
left: 5%;
opacity: 0
}
100%
{
left: 0%;
opacity: 1
}
}
@keyframes FadeSlideInScores3
{
0%
{
left: 5%;
opacity: 0
}
60%
{
left: 5%;
opacity: 0
}
100%
{
left: 0%;
opacity: 1
}
}
@keyframes FadeSlideInScores4
{
0%
{
left: 5%;
opacity: 0
}
80%
{
left: 5%;
opacity: 0
}
100%
{
left: 0%;
opacity: 1
}
}
#afterdance.transition-out .player
{
animation: FadeSlideOutScores 0.3s !important;
opacity: 0
}
@keyframes FadeSlideOutScores
{
0%
{
left: 0%;
opacity: 1
}
100%
{
left: 10%;
opacity: 0
}
}
#afterdance .score-text
{
color: white !important;
position: absolute !important;
left: 69%;
font-size: 80%;
top: 4%
}
.players.player-solo .score-text
{
top: -100% !important;
left: 75.5% !important;
text-align: right !important
}
#afterdance .stars
{
position: absolute !important;
top: 42%;
width: 100%;
left: 56%
}
.players.player-solo .stars
{
top: -23% !important;
left: 70% !important
}
#afterdance .stars .star
{
transform: rotate(15deg) scale(1.3)
}
/* Main Page */
#explore, #catalog, #features, #how-it-works, #download, .footer, .dr-landing__icon.qr-code, .landing__video, .landing-patch, .side-nav, .landing-arrow.scroll_down, .dr-landing:before, .dr-landing__label, .logo, .landing-text__title, .landing-text__subtitle, .landing-button__txt, .landing-circle, .landing-button, .landing__content
{
display: none
}
#play, .structural
{
position: fixed
}
.main-header
{
background: none !important
}
#play
{
background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 52.94%, #000000 100%), url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2Fkeyart_1820x1080.png?v=1626683801364);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.dr-landing__caption
{
color: white;
font-size: 9vw;
letter-spacing: 0.02em
}
.dr-landing__caption:before
{
top: -0vh;
left: -5vw;
width: 5vw;
height: 10vh;
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FConnectPhone.png);
content: "";
position: absolute;
background-size: contain;
background-position: center;
image-rendering: high-quality !important;
background-repeat: no-repeat
}
.main-header
{
position: fixed !important;
bottom: 0%;
height: 100%;
}
.dr-landing
{
margin-left: 10%;
margin-top: 80vh
}
.landing-button__play:before
{
background-image: none !important;
background-color: black;
content: "Continue without phone" !important;
font-size: 180%;
font-family: Just Dance Bold;
color: white;
width: 100%;
height: 100%;
padding-top: 0.9em;
border: solid white 0.2em;
border-radius: 100em;
text-align: center;
transition: .1s all !important;
}
.landing-button
{
margin-top: 0rem !important;
margin-left: 0rem !important;
justify-content: flex-start !important
}
.landing-button__play
{
width: 20rem !important;
height: 5rem;
border-radius: 100em;
top: 0em;
position: absolute;
display: block !important;
justify-content: flex-start !important
}
.landing-button__play:hover:before
{
color: black;
background: white;
transition: .1s all !important;
}
.landing__content
{
position: fixed !important
}
.init-spinner--splash:before
{
background-image: url(https://imgur.com/TXlKSac.png) !important;
background-position: center
}
.init-spinner.init-spinner--splash
{
background: black !important
}
.main-header:before
{
background-image: url(https://cdn.glitch.com/eb89c972-d30a-4348-b4c8-b772f634da00%2FLogo.png?v=1627603085895);
top: 0%;
left: 0%;
width: 28vw;
height: 24vh;
position: absolute;
content: "";
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 4vw;
margin-top: 2vh
}
.main-header:after
{
top: 0%;
left: 0%;
width: 47vw;
height: 5vh;
position: absolute;
content: "Style is NOT finalized, things will change! | Pre-Release Build v.0.0.1";
margin-left: 50vw;
margin-top: 4vh;
font-family: Just Dance Bold;
font-size: 2vh;
letter-spacing: 0.03em;
text-align: right;
}
}
@-moz-document domain("justdancenow.com") {
.item:before
{background-image: url(https://imgur.com/fXVov08.png)}
}
