drawing.svg

snesskin.css

.controller.custom{
    background: url(drawing.svg); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 970px;
    height: 424px;
    margin-left: -485px;
    margin-top: -212px;
}
.custom.disconnected {
    background: url(drawing.svg); 
    background-position: 0px -424px;
    background-repeat: no-repeat;
}
.custom.disconnected div {
    display: none;
}


.custom .bumpers{
    width: 759px;
    height: 34px;
    position: absolute;
    left: 104px;
}
.custom .bumper{
    width: 211px;
    height: 34px;
    background: url(drawing.svg); 
    background-position: -967px 0px;
    background-repeat: no-repeat;
    opacity: 0;
}
.custom .bumper.pressed{
    opacity: 1;
}
.custom .bumper.left{
    float: left;
}
.custom .bumper.right{
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

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

.custom .arrows{
    position: absolute;
    width: 176px;
    height: 62px;
    top: 214px;
    left: 358px;
}
.custom .back, .custom .start{
    width: 71.5px;
    height: 61.5px;
}
.custom .back.pressed, .custom .start.pressed{
    background: url(drawing.svg);
    background-position: -1177.5px 0px;
}
.custom .back{
    float: left;
}
.custom .start{
    float: right;
}
/* Positioning and size of the container for the face buttons */
.custom .abxy{
    position: absolute;
    width: 259px;
    height: 218px;
    top: 105px;
    left: 633px;
}
/* base class used to simplify the sprite mapping */
.custom .button{
    position: absolute;
    width:75px;
    height:75px;
}
.custom .button.pressed{
    background: url(drawing.svg);
    background-position-x: -1249px;
}
.custom .a{
    top: 71px;
    right: 0px;
}
.custom .b{
    top: 143px;
    left: 92px;
}
.custom .x{
    left: 92px;
}
.custom .y{
    top: 71px;
}
/* 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.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: -212px;
}