Game pad viewer Nintendo 64 Game Pad Skin

gamepadviewer-n64.css

/*https://gamepadviewer.com/?p=1&css=https%3A%2F%2Fgistcdn.githack.com%2FMakarovCode%2F252a177ccf619fb8fee5777ca89ec413%2Fraw%2Fa9d7fdb329f7cc82c8c954e428983dcf037f14df%2Fgamepadviewer-n64.css&map=%7B%22mapping%22%3A%5B%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%229%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%220%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%228%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%222%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%2216%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%229%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%220%22%2C%22disabled%22%3Afalse%2C%22choiceOperand%22%3A%22-%22%2C%22choiceType%22%3A%22axes%22%2C%22choice%22%3A%223%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%223%22%2C%22disabled%22%3Afalse%2C%22choiceOperand%22%3A%22%2B%22%2C%22choiceType%22%3A%22axes%22%2C%22choice%22%3A%222%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%222%22%2C%22disabled%22%3Afalse%2C%22choiceOperand%22%3A%22-%22%2C%22choiceType%22%3A%22axes%22%2C%22choice%22%3A%222%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%221%22%2C%22disabled%22%3Afalse%2C%22choiceOperand%22%3A%22%2B%22%2C%22choiceType%22%3A%22axes%22%2C%22choice%22%3A%223%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%224%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%226%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%226%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%224%22%7D%2C%7B%22targetType%22%3A%22buttons%22%2C%22target%22%3A%225%22%2C%22disabled%22%3Afalse%2C%22choiceType%22%3A%22buttons%22%2C%22choice%22%3A%225%22%7D%5D%7D*/
html, body {
    font-family: 'Source Sans Pro', sans-serif;
    background: green !important;
    overflow-y: hidden;
}
.controller.custom {
    background: url(https://gamepadviewer.com/n64-assets/base.svg);
    height: 851px;
    width: 810px;
}

.custom .bumpers{
    position: absolute;
    height: 100px;
    width: 664px;
    top: 140px;
    left: 73px
}

.custom .bumper{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svgg);
    height: 68px;
    width: 174px;
    display: block;
    position: absolute;
}

.custom .bumper.right{
    right: 0;
    transform: rotateY(180deg);
}

.custom .triggers{
    position: absolute;
    left: 379px;
}

.custom .trigger.left{
    width: 52px;
    height: 88px;
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    display: block;
    background-position-y: -72px;
}

.custom .dpad{
    width: 150px;
    height: 150px;
    /*     background: #FF00008F; */
    position: absolute;
    top: 281px;
    left: 106px;
}

.custom .dpad .face{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    height: 64px;
    width: 44px;
    background-position-y: -164px;
    display: block;
    position: absolute
}

.custom .dpad .face.up{
    left: 32px
}


.custom .dpad .face.down{
    transform: rotate(180deg);
    left: 32px;
    top: 65px
}

.custom .dpad .face.left{
    transform: rotate(-90deg);
    top: 33px
}

.custom .dpad .face.right{
    transform: rotate(90deg);
    top: 33px;
    left: 64px;
}

/* We're using the node used for a controller's system button here */
.custom .meta{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    width: 55px;
    height: 55px;
    background-position-y: -282px;
    position: absolute;
    left: 377px;
    top: 344px
}

.custom .abxy{
    position: absolute;
    top: 245px;
    left: 609px
}

.custom .abxy .button{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    width: 47px;
    height: 47px;
    background-position-y: -231px;
    display: block;
    position: absolute;
}

.custom .abxy .button.a{
    left: 45px
}

.custom .abxy .button.b{
    left: 44px;
    top: 92px;
    transform: rotate(180deg);
}

.custom .abxy .button.x{
    top: 45px;
    left: -2px;
    transform: rotate(-90deg)
}

.custom .abxy .button.y{
    left: 91px;
    top: 46px;
    transform: rotate(90deg);
}

.custom .arrows{
    position: absolute;
    top: 335px;
    left: 529px
}

.custom .back, .custom .start{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    width: 61px;
    height: 61px;
    background-position-y: -341px;
    display: block;
    position: relative;
}

.custom .start{
    background-position-y: -405px;
    top: -5px;
    left: 56px
}

.custom .sticks{
    position: absolute;
    top: 493px;
    left: 369px;
}

.custom .stick.left{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svg);
    width: 73px;
    height: 73px;
    display: block;
    background-position-y: 73px
}

.custom .button,
.custom .face,
.custom .meta,
.custom .bumper,
.custom .trigger,
.custom .arrows *{
    opacity: 0
}

.custom .pressed{
    opacity: 1
}