SNESOverlayMinimalv3.css

/*
https://gamepadviewer.com/?p=1&css=https://ajsnyder.github.io/SNES-Controller-Minimal/SNESOverlayMinimal.css&map={"mapping":[{"targetType":"buttons","target":"0","disabled":false,"choiceType":"buttons","choice":"1"},{"targetType":"buttons","target":"1","disabled":false,"choiceType":"buttons","choice":"0"},{"targetType":"buttons","target":"2","disabled":false,"choiceType":"buttons","choice":"3"},{"targetType":"buttons","target":"3","disabled":false,"choiceType":"buttons","choice":"2"},{"targetType":"buttons","target":"4","disabled":false,"choiceType":"buttons","choice":"4"},{"targetType":"buttons","target":"5","disabled":false,"choiceType":"buttons","choice":"5"},{"targetType":"buttons","target":"6","disabled":false,"choiceType":"buttons","choice":"9"},{"targetType":"buttons","target":"7","disabled":false,"choiceType":"buttons","choice":"8"},{"targetType":"buttons","target":"10","disabled":false,"choiceType":"buttons","choice":"10"},{"targetType":"buttons","target":"11","disabled":false,"choiceType":"buttons","choice":"11"},{"targetType":"axes","target":"0","disabled":false,"choiceType":"","positive":{"choiceType":"buttons","choice":"15"},"negative":{"choiceType":"buttons","choice":"14"}},{"targetType":"axes","target":"1","disabled":false,"choiceType":"","positive":{"choiceType":"buttons","choice":"13"},"negative":{"choiceType":"buttons","choice":"12"}},{"targetType":"axes","target":"2","disabled":false,"choiceType":"","positive":{"choiceOperand":"+","choiceType":"axes","choice":"2"},"negative":{"choiceOperand":"-","choiceType":"axes","choice":"2"}},{"targetType":"axes","target":"3","disabled":false,"choiceType":"","positive":{"choiceOperand":"+","choiceType":"axes","choice":"3"},"negative":{"choiceOperand":"-","choiceType":"axes","choice":"3"}}]}
*/


.controller.custom{
    background: url(SNESOverlayMinimal.svg); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 460px;
    height: 46px;
}
.custom.disconnected {
    background: url(SNESOverlayMinimalDisconnected.svg); 
    background-repeat: no-repeat;
}
.custom.disconnected div {
    display: none;
}
/* CLR browser maps SELECT and START to the triggers.
 * So the following is for the START and SELECT and not
 * for the triggers.*/
.custom .triggers{
    position: absolute;
    width: 460px;
    height: 46px;
    top: 0px;
    left: 0px;
}

.custom .trigger{
    opacity: 0;
}
.custom .trigger.pressed{
    opacity: 1;
}
/* Left trigger is bound to the down arrow, so using assets for down arrow accordingly */
.custom .trigger.left{ 
    position: absolute;
    top: 0px;
    left: 115px;
    width: 46px;
    height: 46px;
    background: url(Assets/SNESOverlayMinimalDown.svg);
    background-position: 0px 0px;
}
/* Right trigger is bound to the Y button, so using assets for Y button accordingly */
.custom .trigger.right{
    position: absolute;
    top: 0px;
    left: 253px;
    width: 46px;
    height: 46px;
    background: url(Assets/SNESOverlayMinimalY.svg);
    background-position: 0px 0px;
}

.custom .bumpers{
    width: 460px;
    height: 46px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.custom .bumper{
    opacity: 0;
}
.custom .bumper.pressed{
    opacity: 1;
}
.custom .bumper.left{
    background: url(Assets/SNESOverlayMinimalLeftBumper.svg);
    background-position: 0px 0px;
    width: 23px;
    height: 46px;  
    float: left;
}
.custom .bumper.right{
    background: url(Assets/SNESOverlayMinimalRightBumper.svg);
    background-position: 0px 0px;
    width: 23px;
    height: 46px;
    float: right;

}

/* This bit of code is for the player indicator, which is represented in
quandrants on the xbox controller. That's note what it's called on the
PS3 controller but it'd be pointless for me to change the HTML for 
something as pedantic as a name. */
.custom .quadrant{
    position: absolute;
    height: 17px;
    width: 111px;
    top: 140px;
    left: 240px;
}
/* Since the player indicator is just a CSS sprite, we change the 
position of the background to match the player number.
NOTE: Player orderin starts at 0, so p0 = Player 1 */
.custom .p0{
    background-position: 0 -6px;
}
.custom .p1{
    background-position: 0 -28px;
}
.custom .p2{
    background-position: 0 -49px;
}
.custom .p3{
    background-position: 0 -70px;
}


/*  This is the div that contains the Start and Select buttons */
.custom .arrows{
    position: absolute;
    width: 460px;
    height: 46px;
    top: 0px;
    left: 0px;
}

.custom .back{
    position: absolute;
    width:46px;
    height:23px;
    top: 0px;
    left: 207px;
}

.custom .back.pressed{
    background: url(Assets/SNESOverlayMinimalSelect.svg);
    background-position: 0px 0px;
    opacity: 1;
}

.custom .start{
    position: absolute;
    width:46px;
    height:23px;
    top: 23px;
    left: 207px;
}

.custom .start.pressed{
    background: url(Assets/SNESOverlayMinimalStart.svg);
    background-position: 0px 0px;
    opacity: 1;
}

/* Positioning and size of the container for the abxy buttons */
.custom .abxy{
    position: absolute;
    width: 184px;
    height: 46px;
    top: 0px;
    left: 253px;
}
/* base class used to simplify the sprite mapping */
.custom .button{
    position: absolute;
    width:46px;
    height:46px;
}

/*
.custom .button.pressed{
    background: url(drawing/drawing.svg);
    background-position-x: -1249px;
}
*/
.custom .a{
    position: absolute;
    top: 0px;
    left: 138px;
}
.custom .a.pressed{
    position: absolute;
    top: 0px;
    left: 138px;
    background: url(Assets/SNESOverlayMinimalA.svg);
    background-position: 0px 0px;
}
.custom .b{
    position: absolute;
    top: 0px;
    left: 92px;
}
.custom .b.pressed{
    position: absolute;
    top: 0px;
    left: 92px;
    background: url(Assets/SNESOverlayMinimalB.svg);
    background-position: 0px 0px;
}
.custom .x{
    position: absolute;
    top: 0px;
    left: 46px;
}
.custom .x.pressed{
    position: absolute;
    top: 0px;
    left: 46px;
    background: url(Assets/SNESOverlayMinimalX.svg);
    background-position: 0px 0px;
}
.custom .y{
    position: absolute;
    top: 0px;
    left: 0px;
}
.custom .y.pressed{
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(Assets/SNESOverlayMinimalY.svg);
    background-position: 0px 0px;
}

/* Positioning and size of the container for the dpad buttons */
.custom .dpad{
    position: absolute;
    width: 184px;
    height: 46px;
    top: 0px;
    left: 23px;
}
/* base class used to simplify the sprite mapping */
.custom .face{
    position: absolute;
    width:46px;
    height:46px;
}

/* Directional buttons */
.custom .left{
    position: absolute;
    top: 0px;
    left: 0px;
}
.custom .left.pressed{
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(Assets/SNESOverlayMinimalLeft.svg);
    background-position: 0px 0px;
}
.custom .up{
    position: absolute;
    top: 0px;
    left: 46px;
}
.custom .up.pressed{
    position: absolute;
    top: 0px;
    left: 46px;
    background: url(Assets/SNESOverlayMinimalUp.svg);
    background-position: 0px 0px;
}
.custom .down{
    position: absolute;
    top: 0px;
    left: 92px;
}
.custom .down.pressed{
    position: absolute;
    top: 0px;
    left: 92px;
    background: url(Assets/SNESOverlayMinimalDown.svg);
    background-position: 0px 0px;
}
.custom .right{
    position: absolute;
    top: 0px;
    left: 138px;
}
.custom .right.pressed{
    position: absolute;
    top: 0px;
    left: 138px;
    background: url(Assets/SNESOverlayMinimalRight.svg);
    background-position: 0px 0px;
}



/* Analog sticks follow the same principles as the triggers in terms of positioning
Note that the rotation of the sticks in hard coded with javascript, so it applies 
the CSS inline. */
.custom .sticks{
    position: absolute;
    width: 231px;
    height: 231px;
    top: 100px;
    left: 90.5px;
}
.custom .sticks::after{
    content: '';
    position: absolute;
    width: 231px;
    height: 231px;
    background: url(drawing/drawing.svg);
    background-position-x: -1357px;
}
.custom .stick{
    position: absolute;
    background-color: white;
    width: 82px;
    height: 82px;
    transform: rotateX(0deg) !important;
    transform: rotateY(0deg) !important;
}
.custom .stick.left{
    top: 74px;
    left: 75px;
}
.custom .stick.right{
    display: none;
}
/* NOTE: You NEED to set this to exactly half the height of what is listed 
for '.controller.custom' so when your skin is activated via player selection
parameters (e.g. http://mrmcpowned.com/gamepad?p=1) it will be correctly
centered on screen. */
.custom.half{
    margin-top: -23px;
}