Skip to content

Better New Just Dance Now by ibratabian17

Screenshot of Better New Just Dance Now

Details

Authoribratabian17

LicenseNo License

Categoryjustdancenow

Created

Updated

Size8.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

I Hate How Ubi lazy to update in hud UI

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;
    }
}

Reviews

No reviews yet.