A Vitality School-based style for Just Dance Now!
[Style] Just Dance: Vitality School by wodsonkun
Details
Authorwodsonkun
LicenseNo License
Categoryjust-dance-now
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
NOTE: This style is in a W.I.P. state, it's far from finished and i'll take a long time to finish it properly
If you use this code as base for another style, PLEASE, don't forget to credit Ticpo, Raindux and Alxs Designs
The base code for the style was made by them, I made some tweaks and included some stuff of my own
Any suggestions or comments are welcome! :)
v0.1.6a:
- Songlist section is almost done, just a few tweaks and fixes
Things to be done:
- Landing page
- Tabs
- Coach selection
- Transitions
- In-game HUD
- Players section
- Admin panel
- Afterdance
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Just Dance: Vitality School
@namespace https://github.com/WodsonKun
@version 1.0.0
@description A Vitality School-based UI for Just Dance Now
@author WodsonKun
==/UserStyle== */
@-moz-document domain("justdancenow.com") {
/* Disables unusued stuff*/
.sprite, .section-grid-trainer, .tabs, .connect-phone-info, .connect-phone-info--clickable, .connect-phone-info--visible, .song-action__button::before, .song-action__button::after, .player-color, .player-flag, .player-master, .player-exp {
display: none !important;
}
#just-dance-now, #section-playlist {
background-size: contain !important;
background: url(https://cdn.discordapp.com/attachments/444314886718095371/989745972345192458/bg_star.png);
}
.playlist-container {
background-size: contain !important;
background: url(https://cdn.discordapp.com/attachments/444314886718095371/990080048612638720/bg_star_edit.png);
}
/* Room Info */
#room-info {
text-align: left !important;
width: 15%;
background: none !important;
top: -1.7%;
left: 84.6%;
}
#room-info:before {
content: "";
width: 25% !important;
height: 25% !important;
top: 18.5% !important;
left: -15% !important;
background-image: url(https://cdn.discordapp.com/attachments/444314886718095371/989803297646997514/button_house.png);
position: absolute;
background-position: center;
background-repeat: no-repeat;
background-size: contain
}
#just-dance-now {
background: none;
opacity: 0;
}
#just-dance-now .room-info__patch,
.danceroom__qr-code-wrapper,
.danceroom__label {
display: none;
}
#players::before {
display: none;
height: 0%;
background-image: none;
z-index: 0 !important;
}
#just-dance-now .room-info__content {
width: 100%;
height: 100%;
padding: 0.15rem;
overflow: hidden;
}
#just-dance-now .danceroom__number {
text-shadow: 1px 1px transparent, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
color: white;
font-size: 35%;
}
/* Players */
.state-songselection #players {
transform: scale(.75);
top: .4em;
left: -13%;
animation: none;
}
.state-songselection .player-name {
font-family: Just Dance !important;
font-size: 80%;
letter-spacing: 0.7px;
color: white !important;
text-shadow: 1px 1px #00000015, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
top: -25%;
left: 58%
}
.state-songselection .player .controller-coins {
letter-spacing: 0.7px;
color: white !important;
text-shadow: 1px 1px #00000015, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
top: 1%;
left: 35% !important;
}
/* High-score (maybe DOTW after released) */
.score__stars {
top: -330%;
left: 413%;
transform: scale(1.3);
}
#preview .score__number {
top: -458.5%;
left: 392%;
font-family: Just Dance !important;
letter-spacing: 0.3px;
font-size: 94%;
opacity: 0.45;
color: white !important;
text-shadow: 1px 1px #00000015, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
}
#preview .score__owner {
top: -325% !important;
left: 187%;
font-family: Just Dance !important;
letter-spacing: 0.3px;
font-size: 72%;
color: white !important;
text-shadow: 1px 1px #00000015, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
}
/* Song Grid / Carousel */
.state-songselection #coverflow {
/* Handles the size of the carousel / song grid */
padding: 0 !important;
}
.state-songselection .coverflow--container {
/* Handles the size of the carousel / song grid */
padding: 0 !important;
position: absolute !important;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 0em !important;
background-size: contain !important;
background-image: url(https://cdn.discordapp.com/attachments/444314886718095371/990080048612638720/bg_star_edit.png) !important;
}
.song-grid {
/* Makes the song grid look like a list */
position: absolute !important;
left: -10%;
width: 119%;
overflow-x: hidden !important;
transform: scale(0.90);
top: 60%;
transition: none !important;
height: 50%;
overflow: visible !important border:white solid 0px;
z-index: 100 !important
}
.item-container {
/* Sets */
overflow: visible !important;
width: 100000000000000000em !important;
height: 100% !important;
transition: none !important;
z-index: 9999 !important;
}
.song-grid--title {
background: linear-gradient(to right, white, transparent), url(https://cdn.discordapp.com/attachments/444314886718095371/989798486612537354/button_mosaic_middle.png), linear-gradient(to right, white, transparent);
color: #498EAB !important;
padding: 0 !important;
margin-left: 13.44em !important;
margin-bottom: 0em !important;
width: 162.9% !important;
top: 2%;
height: 0.24rem !important;
z-index: 0 !important;
font-size: 1.15em !important;
vertical-align: middle;
font-family: Just Dance Regular !important;
}
.song-grid--description, .song-grid--duration {
display: none;
}
.song--details {
z-index: 1000 !important;
display: block
}
.item-selected {
z-index: 9999 !important;
scroll-snap-align: start !important;
top: 20% !important;
}
.item.item-selected.song__decoration.song__cover:before{
background: blue;
}
.item
{
top: 30%
}
.song-grid--details .song-grid--titleDetails {
border: none !important;
}
.song--details {
top: -13.5% !important;
bottom: 100%;
overflow: hidden
}
.item-container,
.song--details {
scroll-snap-type: x mandatory !important;
scroll-padding-left: 11.2% !important;
}
.item-selected {
transform: scale(1.30);
margin-left: 10.5em !important;
scroll-snap-align: start !important;
opacity: 1;
pointer-events: none;
position: absolute;
animation: enterslctdsong 0.78s !important;
}
.song--focused .song__cover,
.grid-container .item-container .item.item-selected .song__cover,
.song--focused .song__cover {
scroll-snap-align: start !important;border: white solid 4px;
}
.grid-container .item-container .song__cover,
.song--focused .song__cover,
.grid-container .item-container .item.item-selected .song__cover,
.song__cover,
.song--focused .song__cover {
scroll-snap-align: start !important;
position: absolute;
z-index: 999999;
-webkit-mask-image: linear-gradient(0deg, rgba(255, 255, 255, 255) 100%, #ffffffff 100%);
left: -0.35%;
}
.grid-container .item-container .song__decoration {
border-radius: 0px;
border: none;
}
.grid-container .item-container .item.item-selected .song__difficulty{
z-index: 99999999999999999 !important;
background: linear-gradient(0deg, rgba(255, 255, 255, 255) 6%, #00000000 32%) !important;
}
.item {
margin-left: -6.10em !important;
left: 25em !important;
border-radius: 0px !important;
z-index: 9999;
transition: none !important;
}
.item-selected
{
margin-left: -4.50em !important
}
.grid-container .item-container .title-container {
font-size: 100%;
line-height: inherit;
color: #ffffff3f;
z-index: 9999999999 !important;
position: absolute;
margin-top: 6% !important;
margin-left: -2.04%;
float: none;
padding: 0.05rem 0 0 0.04rem;
}
.item .song__decoration .song__cover {
border-radius: 0px !important;
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, #000000b3 80%);
background: white;
opacity: 1;
}
.item .song__difficulty--level, .item .song__difficulty {
display: none;
}
.item.item-selected .song__difficulty {
display: inline-block !important;
top: -34.%;
height: 125% !important;
opacity: 1;
border-radius: 0px !important;
/*background: linear-gradient(0deg, rgba(255, 255, 255, 255) 0%, #00000000 0%) !important;*/
width: 96%;
transition: none;
animation: none;
}
.song--focused .title,
.grid-container .item-container .item.item-selected .title,
.song--focused .title {
/* Song title (Ex.: #thatPOWER - ALTERNATE)*/
font-family: "Just Dance";
font-size: 100%;
letter-spacing: 0.3px;
margin-left: 0.392%;
z-index: 999999 !important;
margin-top: 86% !important;
color: #4E4183ff !important;
text-shadow: 1px 1px transparent, -1px 1px transparent, 1px -1px transparent, 1px -1px transparent;
background: white;
width: 104%;
height: 20%;
border: none !important;
}
.title-container .title {
/* Song title (Ex.: #thatPOWER - ALTERNATE)*/
font-family: "Just Dance";
font-size: 100%;
letter-spaci...