I Hate How Ubi lazy to update in hud UI
Better New Just Dance Now by ibratabian17
Details
Authoribratabian17
LicenseNo License
Categoryjustdancenow
Created
Updated
Size8.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Source code
/* ==UserStyle==
@name Proper JDUI
@namespace github.com/ibratabian17/pjdn
@version 1.0.0
@description A new userstyle
@author ibratabian17
==/UserStyle== */
@-moz-document domain("justdancenow.com") {
#racetrack {
top: 20% !important;
transform-origin: bottom;
}
#racetrack.superstar,
#racetrack.megastar {
animation: bounceP .7s !important;
}
#racetrack.megastar {
animation: bounceP .71s !important;
}
#racetrack .progress-bar {
left: 79%;
width: 48%;
top: -0.3%;
border-bottom: 1px solid #daf3f03b;
border-radius: 0 0 0.039em 0.039em;
}
#racetrack .star {
margin-bottom: -25% !important;
margin-left: -0.8%;
}
#racetrack .progress-bar:has(#racetrack-fill-p4.racetrack-empty) {
width: 40.5%;
}
#racetrack .progress-bar:has(#racetrack-fill-p3.racetrack-empty) {
width: 27%;
}
#racetrack .progress-bar:has(#racetrack-fill-p2.racetrack-empty) {
width: 27%;
}
.racetrack-fill-players {
transition: .4s all !important;
border-radius: 0.038rem;
background-image: linear-gradient(to right, #0000, #0000008c);
background-blend-mode: luminosity;
}
.anucore-rcplus .racetrack-fill-players {
height: var(--ReducedPst) !important;
transform: none !important;
bottom: 0.001rem !important;
}
.anucore-rcplus .racetrack-fill-players.racetrack-empty {
height: 0 !important;
}
.progress-background {
background: #0000009c;
background-size: 104% 320% !important;
background-position: center;
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .6) 74%, #f000 87%) !important;
}
#racetrack.animate .platform {
display: none;
}
#racetrack .star {
left: 23%;
width: 0.65rem;
height: 0.65rem;
}
.hud.beat > #racetrack.animate .star:not(.no-beat) {
-webkit-animation: racetrack-star-beat1 .3s;
animation: racetrack-star-beat1 .3s;
}
.anucore-rcplus .hud.beat > #racetrack.animate .star:not(.no-beat) {
-webkit-animation: none;
animation: none;
}
#racetrack .star {
transform: scale(0.8) rotate(11deg);
}
.hud.beat.odd[oddiseven="1"] > #racetrack.animate .star1:not(.no-beat),
.hud.beat.even[oddiseven="1"] > #racetrack.animate .star2:not(.no-beat),
.hud.beat.odd[oddiseven="2"] > #racetrack.animate .star3:not(.no-beat),
.hud.beat.even[oddiseven="2"] > #racetrack.animate .star4:not(.no-beat),
.hud.beat.odd[oddiseven="1"] > #racetrack.animate .star5:not(.no-beat) {
animation: racetrack-star-beat1 0.5s;
}
#racetrack {
top: 18.3%;
left: 0%;
width: 7.0%;
height: 58.2%;
}
@keyframes racetrack-star-beat1 {
0% {
transform: scale(0.8) rotate(11deg)
}
5% {
transform: scale(1) rotate(11deg)
}
100% {
transform: scale(0.8) rotate(11deg)
}
}
@keyframes newStar {
0% {
opacity: 0;
transform: scale(0.8) rotate(15deg);
}
32% {
opacity: 1;
transform: scale(1.25) rotate(15deg);
}
79% {
opacity: 1;
transform: scale(1.25) rotate(375deg);
}
100% {
opacity: 1;
transform: scale(0.8) rotate(375deg);
}
}
#lyrics {
width: 100%;
font-size: 0.18rem;
left: 5.1%;
bottom: 30.28em;
font-weight: bolder !important;
}
#lyrics .fragment {
font-weight: bold !important;
}
#lyrics .fragment .fill {
transition-timing-function: linear !important;
backdrop-filter: opacity(0%) !important;
position: absolute;
z-index: 99 !important;
}
#lyrics .line.current,
#lyrics .line.previous {
transform: translatey(-35%) !important;
color: #d9d9d9fa;
opacity: 1;
}
#lyrics .line {
color: #888;
margin-top: 0.13% !important;
opacity: 1.0;
-webkit-animation: nextLineInf 0.26s;
animation: nextLineInf 0.26s !important;
will-change: transform;
}
#lyrics .line.current {
transition: .2s all, .1s color !important;
opacity: 1;
}
#lyrics .line.previous {
transition: .05s opacity !important;
transition-delay: .001s !important;
opacity: .0;
}
@keyframes nextLineInf {
0%,
20% {
opacity: 0;
-webkit-transform: perspective(0px) translateY(2.5em) rotateX(0deg);
transform: perspective(0px) translateY(2.5em) rotateX(0deg);
}
40% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
transform: translateY(1em) perspective(0px) rotateX(0deg);
}
}
#beat .particle-system {
display: none;
}
#beat {
width: 0.86rem !important;
height: 0.053em !important;
bottom: -0.042em !important;
left: -.96rem;
background: #fff;
background-image: linear-gradient(45deg, #0000, #0000);
border-radius: 200rem;
-webkit-mask-position: center !important;
border-bottom: none;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
html:not(.ipad) .hud.beat > #pictos > #beat {
-webkit-animation-name: BeatCoach !important;
animation-name: BeatCoach !important;
}
.hud:not(.beat) #beat {
opacity: 0 !important;
transition: .03s all;
}
.hud.beat #beat {
opacity: 1 !important;
transition: .1s all;
}
.hud.beat #pictos {
transition: .2s all !important;
}
html.androidApp #beat {
display: none !important;
}
.picto {
will-change: transform;
}
#pictos {
width: 24% !important;
top: 69.6% !important;
font-size: 1.1rem;
}
.hud.even #pictos .picto .texture {
animation: BeatPictos .3s !important;
transform-origin: bottom;
will-change: transform;
}
@keyframes BeatPictos {
0% {
transform: scale(1);
}
15% {
transform: scale(0.975);
}
100% {
transform: scale(1.);
}
}
#pictos {
width: 30% !important;
right: -1.05em;
}
#pictos.multi-coach {
width: 30% !important;
right: 0.03em;
}
.picto {
left: -1.21rem !important;
}
.picto.hiding {
transition: .14s ease-out opacity, .39s ease-out transform !important;
}
.weak-platform .picto {
filter: none;
}
.multi-coach .picto {
left: -1.492rem !important;
}
@keyframes BeatCoach {
100% {
opacity: 1 !important;
transform: scale3d(1., 1, 1);
}
10% {
opacity: 1 !important;
transform: scale3d(1.12, 1, 1);
}
0% {
opacity: 1 !important;
transform: scale3d(1., 1, 1);
}
}
@keyframes BeatCoach2 {
100% {
opacity: 1 !important;
transform: scale3d(1., 1, 1);
}
10% {
opacity: 1 !important;
transform: scale3d(1.12, 1, 1);
}
0% {
opacity: 1 !important;
transform: scale3d(1., 1, 1);
}
}
@keyframes pictosa {
0%,
0% {
bottom: .1%
}
22% {
bottom: -3%
}
100% {
bottom: -.1%
}
}
.player-color {
background-image: linear-gradient(to right, #0000 20%, #0000008c 80%);
background-blend-mode: luminosity;
}
}