3DS Controller Display CSS

HOW TO USE:
1.) Add a browser source on OBS
2.) Paste this into the "URL" field: https://gamepadviewer.com/?p=1&s=6
3.) Choose the color of your 3DS skin by replacing the first URL in the code below with one of the following

	Red: https://imgur.com/JURTaOu.png
	Blue: https://imgur.com/DFzMLtn.png
	Grey: https://imgur.com/abbTWfw.png

4.) Paste the code below into the "Custom CSS" field:









/*BEGIN FightPad Pro Controller Styling*/
.controller.fpp {
    background: url(https://imgur.com/abbTWfw.png) center;
    height: 755px;
    width: 938px;
}

.fpp.disconnected {
    background: url(https://imgur.com/JURTaOu.png) no-repeat;
}

.fpp.disconnected div {
    display: none;
}

.fpp .triggers {
    width: 684px;
    height: 104px;
    position: absolute;
    left: 145px;
}

.fpp .trigger {
    width: 96px;
    height: 104px;
    background: url(https://imgur.com/aPEYMUJ.png) no-repeat;
    opacity: 0.5;
}

.fpp .trigger.left {
    float: left;
    position: absolute;
    top: 323px;
    left: 66px;
}

.fpp .trigger.right {
    float: left;
    position: absolute;
    top: 323px;
    left: 487px;
}

.fpp .bumpers {
    position: absolute;
    width: 816px;
    height: 76px;
    left: 65px;
    top: 115px;
}

.fpp .bumper {
    width: 221px;
    height: 75px;
    background: url(https://imgur.com/fhzK4RE.png);
    opacity: 0;
}

.fpp .bumper.pressed {
    opacity: 0.6;
}

.fpp .bumper.left {
    float: left;
    position: absolute;
    top: 253px;
    left: 8px;
}

.fpp .bumper.right {
    float: left;
    position: absolute;
    top: 253px;
    left: 579px;
}

.fpp .bumper.right:after {
    content: "";
    position: absolute;
    background: url() no-repeat;
    background-position: -280px 0px;
    width: 70px;
    height: 70px;
    top: 121px;
    right: 41px;
}

.fpp .quadrant {
    position: absolute;
    background: url() no-repeat;
    height: 46px;
    width: 152px;
    top: 365px;
    left: 347px;
}

.fpp .p0 {
    background-position: -6px 0;
}

.fpp .p1 {
    background-position: -160px 0;
}

.fpp .p2 {
    background-position: -317px 0;
}

.fpp .p3 {
    background-position: -474px 0;
}

.fpp .arrows {
    position: absolute;
    width: 175px;
    height: 43px;
    top: 550px;
    left: 480px;
}

.fpp .arrows:before {
    content: "";
    position: absolute;
    width: 55px;
    height: 22px;
    background: url() no-repeat;
    left: -126px;
}

.fpp .back.pressed, .fpp .start.pressed {
    background: url(https://imgur.com/DyfmkC3.png) no-repeat;
    width: 81px;
    height: 43px;
}

.fpp .start.pressed {
    position: absolute;
    bottom: 33px;
    left: 125px;
}

.fpp .back {
    float: left;
    position: absolute;
    bottom: 3px;
    left: 96px;
}
}


.fpp .abxy {
    position: absolute;
    width: 201px;
    height: 205px;
    top: 235px;
    left: 600px;
}

.fpp .trigger-button.right.pressed {
    position: absolute;
    width: 70px;
    height: 70px;
    background: url() no-repeat;
    background-position: -351px 0;
    right: -66px;
    top: 304px;
}

.fpp .button {
    position: absolute;
    width: 70px;
    height: 70px;
    background: url(https://imgur.com/H9fJMqj.png) no-repeat;
    opacity: 0;
}

.fpp .button.pressed {
    opacity: 1;
}

.fpp .a {
    background-position: 0 0;
    top: 224px;
    left: 19px;
}

.fpp .b {
    background-position: -70px 0;
    top: 200px;
    right: 86px;
}

.fpp .x {
    background-position: -140px 0;
    top: 200px;
    left: -6px;
}

.fpp .y {
    background-position: -210px 0;
    left: 19px;
    top: 176px;
}

.fpp .sticks {
    position: absolute;
    width: 114px;
    height: 114px;
    top: 386px;
    left: 215px;
}

.fpp .stick {
    position: absolute;
    background: url(https://imgur.com/JoKZZAJ.png) no-repeat;
    height: 114px;
    width: 114px;
}

.fpp .stick.pressed.left {
    background-position-x: -90px;
}

.fpp .stick.pressed.right {
    background-position-x: -150px;
}

.fpp .stick.left {
    top: 1px;
    left: 12px;
}

.fpp .stick.right {
    display: none;
    top: 0;
    left: 0;
}

.fpp .dpad {
    position: absolute;
    width: 157px;
    height: 156px;
    top: 242px;
    left: 69px;
}

.fpp .face {
    background: url(https://imgur.com/q1TkJwK.png) no-repeat;
    position: absolute;
    opacity: 0;
}

.fpp .face.pressed {
    opacity: 1;
}

.fpp .face.up, .fpp .face.down {
    width: 110px;
    height: 78px;
}

.fpp .face.left, .fpp .face.right {
    width: 78px;
    height: 111px;
}

.fpp .face.up {
    left: 157px;
    top: 189px;
    background-position: 0 0px;
}

.fpp .face.down {
    left: 157px;
    bottom: -207px;
    background-position: -111px 0;
}

.fpp .face.left {
    top: 221px;
    left: 126px;
    background-position: -222px 0;
}

.fpp .face.right {
    top: 221px;
    left: 222px;
    background-position: -303px 0;
}

/*END FightPad Pro Controller Styling*/