/* ==UserStyle==
@name           NG2012 Audio Player
@namespace      https://discord.gg/fAnRm8gs5h
@version        1.0.0
@description    Make newgrounds audio player look good || Tom Fulp Approved
@author         NG2012
@var select visualization 'Audio Player Background settings' {
'None':  'none',
'Custom Image/Gif': 'bgi',
'Custom Background Color': 'bg',
}
@var checkbox cd 'Show CD if background settings have no "visualizer"' 0
@var          checkbox  watermark 'Show NG2012 Player Watermark' 1
@var          select    watermarkp 'Watermark Position' {
1: '1',
2: '2'
}
@var text wm1 "Watermark line 1 (INCLUDE THE 'QUOTES')" "'NG12 Audio Player'"
@var text wm2 "Watermark line 2 (INCLUDE THE 'QUOTES')" " 'Beta 1' "
@var          color    bgc "Audio Player custom background color"    #444
@var          text     bgi  "Custom image/gif link (INCLUDE THE 'QUOTES')" "'https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/ngimg.gif'"
@var          text     bgz   "Background Size" 'auto'
@var          text     bgp  "Background Positions" '590px 290px'
@var          select advanced 'coming in beta 2' {
' ': 'a'
}
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("newgrounds.com") {
    /* Audio Player */
    /* im feeling lazy today */
    @font-face {
        font-family: "FFFBusinessBold";
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/FFFBusinessBold.tff") format("ttf");
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/FFFBusinessBold.woff") format("woff");
        font-weight: bold;
        font-style: normal;
    }
    @font-face {
        font-family: "Spacedust";
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/FFF_Spacedust.ttf") format("ttf");
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/FFF_Spacedust.woff") format("woff");
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/FFF_Spacedust.woff2") format("woff2");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "HalogenBlack";
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/Halogen_Black.ttf") format("ttf");
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/Halogen_Black") format("woff");
        src: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fonts/Halogen_Black.woff2") format("woff2");
        font-weight: bold;
        font-style: normal;
    }
    /* start userstyle now pls */
    #audio_player_embed {
        max-height: 300px!important;
        & > .audio-listen-player {
            height: 290px;
            margin: 0;
            width: 590px;
            background: transparent!important;
            border: none !important;
            left: 5px;
            top: -1px;
            position: relative;
            & .audio-listen-wrapper {
                height: 290px!important;
                width: 590px;
                if watermark==1 {
                    &:before {
                        content: wm2;
                        font-family: "FFFBusinessBold";
                        font-size: 8px;
                        color: /*#cbc0c0;*/
                        rgb(213, 204, 203);
                        left: 238px;
                        position: absolute;
                        -webkit-text-stroke: 1px rgba(0, 0, 0, .41);
                        top: 207px;
                        text-shadow: rgb(0, 0, 0) 2px 2px;
                        z-index: 9999999;
                        width: 114px;
                        text-align: center;
                        if watermarkp==2 {
                            top: 225px;
                            left: 18px;
                            text-align: left;
                        }
                    }
                }
                & .outer-frame {
                    background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/frame.png);
                    box-shadow: none;
                    border-radius: 0;
                    z-index: auto!important;
                    &:before {
                        content: url('https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/whitebar30.png');
                        opacity: 7%;
                        z-index: 99!important;
                        position: relative;
                    }
                    &:after {
                        content: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/shadow.png");
                        display: block;
                        position: absolute;
                        width: 574px;
                        height: 100px;
                        top: 182px;
                        left: 8px;
                    }
                }
                if visualization==bgi {
                    background: url(bgi);
                    background-size: bgz;
                    background-position: bgp;
                }
                if visualization==none {
                    background: #252525 !important;
                }
                if visualization==bg {
                    background: bgc !important;
                }

                & > .audio-listen-container {
                    filter: none;
                    width: 310px;
                    height: 290px!important;
                    background: none!important;
                    position: relative;
                    z-index: auto;
                    if watermark==1 {
                        &:before {
                            content: wm1;
                            font-family: "Spacedust";
                            font-size: 8px;
                            color: #fff;
                            left: 238px;
                            position: absolute;
                            -webkit-text-stroke: 1px rgba(0, 0, 0, .41);
                            top: 184px;
                            text-shadow: rgb(0, 0, 0) 1px 2px;
                            z-index: 9999999;
                            width: 350px;
                            if watermarkp==2 {
                                top: 203px;
                                left: 18px;
                            }
                        }
                    }
                    if visualization==none and cd==1 {
                        &:after {
                            content: '';
                            background: url(http://img.ngfiles.com/defaults/icon-audio.png);
                            display: block;
                            width: 135px;
                            height: 135px;
                            background-size: 135px;
                            top: /*30px;*/
                            37px;
                            left: 140px;
                            position: relative;
                            margin: auto;
                            animation: rotate 1.1s linear infinite;
                            animation-delay: 0s;
                            animation-iteration-count: infinite;
                        }
                    }

                    /* self note the element above is #waveform */
                    & > div {
                        height: 11px !important;
                        width: 310px !important;
                        border-radius: 0;
                        background: none !important;
                        top: 259px;

                        left: 157px;
                        border: none !important;
                        & img:nth-child(1) {
                            width: 310px;
                            opacity: 0;
                        }
                    }
                    & .overlay {
                        filter: none !important;
                        height: 11px !important;
                        background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/thebar.gif) !important;
                        left: -1px!important;
                        & > div {
                            display: none;
                        }
                    }
                    & .ui-state-default,
                    .ui-slider-handle {
                        margin-left: 0;
                        left: 0px!important;
                        top: 0!important;
                        width: 310px!important;
                        opacity: 0.5;
                        border-radius: 0;
                        background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/thebar.gif) !important;
                        pointer-events: none;
                    }
                }
            }
            & .audio-listen-controls {
                display: flex;
                padding: 0;
                top: -43px;
                left: -7px;
                position: relative;
                margin: auto;
                width: 560px;
                background: rgba(0, 0, 0, 0);
                z-index: auto;
                & .play-controls {
                    height: 36px;
                    & button#audio-listen-play.audio-listen-btn {
                        border-radius: 5px 0px 0px 5px;
                        width: 50px;
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/play.png);
                        height: 35px;
                        line-height: 35px;
                        font-size: 0;
                        margin-top: 0;
                        margin-bottom: 0;
                        display: block;
                        &:hover {
                            background-position: -102px 0;
                        }
                        &:active {
                            background-position: -204px 0;
                        }
                    }
                    & #audio-listen-pause {
                        border-radius: 5px 0px 0px 5px;
                        width: 50px;
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/play.png);
                        background-position: -50px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 0;
                        margin-top: 0;
                        margin-bottom: 0;
                        display: block;
                        &:hover {
                            background-position: -153px;
                        }
                        &:active {
                            background-position: -306px;
                        }
                    }
                }
                & div.playback-info {
                    background: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/timeleftbg.png");
                    max-width: 91px;
                    height: 36px;
                    margin: 0;
                    left: 1px;
                    position: relative;
                    color: transparent;
                    font-size: 0px;
                    line-height: 33px;
                    &:after {
                        content: '';
                        background: url("https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/bgBAR.png");
                        display: block;
                        height: 36px !important;
                        width: 433px !important;
                        filter: none !important;
                        top: -35px;
                        position: relative;
                        left: 91px;
                    }
                    & span {
                        font-family: "FFFBusinessBold";
                        text-shadow: 2px 2px 0px #000;
                        -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
                        font-size: 8px;
                        margin: 5px;
                    }
                    & #audio-listen-progress {
                        position: relative;
                        left: -2px;
                    }
                    & #audio-listen-duration {
                        color: #ba7210;
                    }
                }
                & .sound-controls {
                    display: flex!important;
                    left: 326px;
                    position: relative;
                    border-radius: 0px 0px 5px 0px;
                    & #audio-listen-volumeToggle {
                        order: 1;
                        width: 36px;
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/audio.png);
                        height: 26px;
                        top: 5px;
                        position: relative;
                        font-size: 0;
                        margin-top: 0;
                        margin-bottom: 0;
                        display: block;
                        border-radius: 0;
                        &:hover {
                            background-position: -72px;
                        }
                        &:active {
                            background-position: -144px;
                        }
                    }
                    & #audio-listen-volumeToggle:has(.fa-volume-off) {
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/audio.png);
                        background-position: -36px;
                        &:hover {
                            background-position: -108px;
                        }
                        &:active {
                            background-position: -180px;
                        }
                    }
                    & #audio-listen-volumeToggle:hover ~ #audio-listen-volume {
                        display: block;
                        height: 84px;
                        margin: -84px 0 0 0px;
                        background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/audiobar.png)!important;
                        top: 5px;
                        & .ui-slider-range-min {
                            display: block;
                            max-height: 55px;
                            background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/audioslider.png);
                            rotate: 180deg;
                            margin-bottom: 7px;
                            filter: drop-shadow(0px 0px 0.45px #fff);
                        }
                    }
                    & #audio-listen-volume {
                        display: block;
                        width: 35px;
                        margin: 0;
                        height: 5px;
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/rollout/volume/1.png) bottom left!important;
                        border: none!important;
                        border-radius: 0px;
                        & .ui-slider-range-min {
                            display: none;
                        }
                        & .ui-state-focus,
                        .ui-widget-content .ui-state-focus {
                            display: none;
                        }
                        & span {
                            display: none;
                        }
                        &:hover {
                            display: block;
                            height: 84px;
                            margin: -84px 0 0 0px;
                            background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/audiobar.png)!important;
                            top: 5px;
                            & .ui-slider-range-min {
                                display: block;
                                max-height: 55px;
                                background: url(https://raw.githubusercontent.com/hmajora/ng12-image-repository/refs/heads/ngaudio/audioslider.png);
                                rotate: 180deg;
                                margin-bottom: 7px;
                                filter: drop-shadow(0px 0px 0.45px #fff);
                            }
                        }
                    }
                    & #audio-listen-repeat {
                        order: 2;
                        left: 0px;
                        position: relative;
                        width: 36px;
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/loop.png);
                        background-position: -36px;
                        height: 26px;
                        top: 5px;
                        font-size: 0;
                        margin-top: 0;
                        margin-bottom: 0;
                        display: block;
                        border-radius: 0;
                        &:before {
                            content: '';
                            background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/rollout/volume/1.png) bottom;
                            display: block;
                            height: 19px;
                            width: 35px;
                            position: absolute;
                            top: -19px;
                            left: 0px;
                        }
                        &:hover {
                            background-position: -108px;
                            &:before {
                                background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/rollout/loop/5.png)!important;
                            }
                        }
                        &:active {
                            background-position: -180px;
                        }
                    }
                    & .repeat-once.active.audio-listen-btn {
                        background-position: 0!important;
                        &:hover {
                            background-position: -72px!important;
                        }
                        &:active {
                            background-position: -144px!important;
                        }
                    }
                    &:after {
                        content: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/fullscreen.png)!important;
                        height: 26px;
                        order: 3;
                        position: relative;
                        left: 0px;
                        top: 5px;
                        display: block;
                    }
                    &:before {
                        order: 4;
                        content: '';
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/rollout/volume/1.png) bottom;
                        display: block;
                        height: 19px;
                        width: 35px;
                        position: absolute;
                        top: -14px;
                        left: 72px;
                    }
                    &:after:hover ~ .sound-controls:before {
                        background: url(https://raw.githubusercontent.com/syxxed/newgrounds-2012/refs/heads/main/misc/flash/audio/rollout/loop/5.png)!important;
                    }
                }
            }
        }
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(720deg);
        }
    }
}