SegaSaturnOverlay.css

/*
-How to use Custom CSS for the Gamepad Viewer-
http://mrmcpowned.com/gamepad

Enabling a custom CSS is as easy as adding &css=[url to css file]
to the end of the url like so:
http://mrmcpowned.com/gamepad?p=1&css=https://gist.github.com/anonymous/526491dc02014099cd14/raw/d7bb0477ba984f794497f3f0f82cb33484dc7889/ps3.css

If you're going to be using custom CSS for the gamepad viewer
to design your own skin, we're assuming you have some sort of
basic knowledge on how CSS works. I'd also suggest uploading
your custom CSS to GitHub's gist as you can easily get the
direct link for the file by copying the link address on the
"Raw" button at the top right of the code.
NOTE: If you're using gist, MAKE SURE TO NAME YOUR CSS FILE!
It doesn't matter what you call it, so long as it ends in .css
else the site won't read it and think it's just a plain text.

Each CSS entry must be preceded by '.custom' since that's the 
hardcoded class for a custom style. It doesn't make sense to 
change this as you can only have one custom skin loaded at a time.

If you're using images, they have to be uploaded to an image host of
your choice. Personally, I'd go with Imgur since it's simple to upload
and get the direct URL of the image. None of the images in this example
will load because they're pointing to a location relative of the css 
files, since this is normally in the main CSS file of the site.

The following is a copy of the code used for displaying the PS3 controller
skin on the Gamepad viewer. You can scroll below and read the comments to
get an understanding of how the styling works and whatnot. Happy skinning!

P.S. If you use this tool often and would like to 'buy me a coffee' you can
do so via my Imraising page: https://imraising.tv/u/mrmcpowned

*/

/*BEGIN PS3 Controller Styling*/
/*This class defines the base attributes of the skin*/
.controller.custom{
    /* The background image is basically the base for the controller's skin. The 
    PS3 controller's skin can be found at http://mrmcpowned.com/gamepad/ps3-assets/base.png
    and you can observe it as an example. The sticks, buttons, and directional arrows are missing
    because their appropriate elements will be incorperated when their styling is defined below.
    The entirity of the skin's visual styling is done via background images and CSS sprites. */ 
    background: url(https://i.imgur.com/7Fmpqh8.png); 
    height: 600px;
    width: 512px;
}
.custom.disconnected { /* This class shows an image when the controller is disconnected */
    background: url(ps3-assets/base-disconnect.png);
}
/* This hides the controller's button when disconnected so only the background image remains */ 
.custom.disconnected div {
    display: none;
}
.custom .triggers{ /* The triggers are housed inside a div, so this sizes the div properly and positions it */
    display: none;
    width: 586px;
    height: 65px;
    position: absolute;
    left: 99px;
}
.custom .trigger{/* These are the actual triggers themselves */
    width:39px;
    height:39px;
    background: url(ps3-assets/triggers.png);
    opacity: 0;
}
/* The left and right classes below are used to position the triggers
within the div they're contained in. Since their positions is realtive
to the size of the parent element, we simply resize the parent element 
above to achieve the desired position. */
.custom .trigger.left{ 
    float: left;
}
.custom .trigger.right{
    float: right;
}

/* The bumpers follow the same methodology as the triggers in terms of
placement */
.custom .bumper{
    width: 39px;
    height: 39px;
    background: url(http://i.imgur.com/LLE8kxs.png);
    opacity: 0;
}
.custom .bumpers{
    position: relative;
    width: 123px;
    height: 69px;
    left: 286px;
    top: 257px;
}
.custom .bumper.pressed{ /* The '.pressed' class is used for most buttons to signify they've been pressed */
    opacity: 0.8;
}
.custom .bumper.left{  
    position: absolute;
    left: 0;
    bottom: 0;
}
.custom .bumper.right{
    position: absolute;
    right: 0;
}
/* 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;
    background: url(ps3-assets/player-n.png);
    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 to size and position the containing div for the 
start and select buttons. */
.custom .arrows{
    position: relative;
    width: 39px;
    height: 133px;
    top: 250px;
    left: 239px;
}
/* Setting the size and CSS sprite for the start adn select buttons */
.custom .back, .custom .start{
    background: url(http://i.imgur.com/nShJbt7.png);
    width: 39px;
    height: 39px;
}
.custom .back.pressed, .custom .start.pressed{
    background-position-y: -39px;
    margin-top: 0px;
}
.custom .back{
    background-position: 0px 0;
    position: absolute;
    top: 0;
}
.custom .start{
    background-position: 39px 0;
    position: absolute;
    bottom: 0;
}
/* Positioning and size of the container for the face buttons */
.custom .abxy{
    position: absolute;
    width: 234px;
    height: 78px;
    top: 256px;
    left: 256px;
}
/* base class used to simplify the sprite mapping */
.custom .button{
    position: absolute;
    width:39px;
    height:39px;
    background: url(http://i.imgur.com/qjvRFm2.png);
}
.custom .button.pressed{
    background-position-y: -39px;
    margin-top: 0px;
}
.custom .a{
    background-position: 0px 0;
    top: 84px;
    left: 40px;
}
.custom .b{
    background-position: 195px 0;
    top: 60px;
    left: 85px;
}
.custom .x{
    background-position: 156px 0;
    top: 45px;
    left: 130px;
}
.custom .y{
    background-position: 78px 0;
    top: 12px;
    left: 70px;
}
/* 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: 77px;
    height: 77px;
    top: 228px;
    left: 88px;
}
.custom .stick{
    position: absolute;
    background: url(http://i.imgur.com/oePGkye.png);
    height:77px;
    width: 77px;
}
.custom .stick.pressed.left{
    background-position-x: -106px;
}
.custom .stick.pressed.right{
    background-position-x: -211px;
    display: none;
}
.custom .stick.left{
    top: 0;
    left: 0;
}
.custom .stick.right{
    display: none;
    top: 0;
    left: 0;
}
/* Dpad possitioning and sizing */
.custom .dpad{
    position: absolute;
    width: 140px;
    height: 132px;
    top: 332px;
    left: 115px;
}
.custom .face{
    background: url(http://i.imgur.com/g69SI6U.png);
    position: absolute;
}
.custom .face.up, .custom .face.down{
    width: 16px;
    height: 16px;
}
.custom .face.left, .custom .face.right{
    width: 16px;
    height: 16px;
}
.custom .face.up{
    left: 42px;
    top: 18px;
    background-position: 0px 0px;
}
.custom .face.down{
    left: 42px;
    top: 73px;
    background-position: 32px 0px;
}
.custom .face.left{
    top: 46px;
    left: 14px;
    background-position: 16px 0px;
}
.custom .face.right{
    top: 46px;
    left: 70px;
    background-position: 48px 0px;
}
.custom .face.pressed{
    margin-top: 0px;
    background-position-y: 16px;
}
/* The following entries are empty because I haven't used them yet, but they
exist for the purpose of displaying a fightstick. Since fightsticks have 
the left and right triggers and digital buttons, there are separate 
html items that allow the triggers to be shown as button presses isntead of
an opacity setting */
.custom .trigger-button.left{
    
}
.custom .trigger-button.right{
    
}
.custom .trigger-button.left.pressed{
    
}
.custom .trigger-button.right.pressed{
    
}
/* This is where the fight stick CSS would go. The ideal way of 
showing the input would be to use an image sprite of a fight stick in
all 8 positions, and change it according to the inputs. The classes 
themselves are fairly self explanatory. */
.fstick{
    position: absolute;
    width: 140px;
    height: 132px;
    top: 192px;
    left: 74px;
}
.fstick.up{
  
}
.fstick.down{
  
}
.fstick.left{
  
}
.fstick.right{
  
}
.fstick.up.right{
  
}
.fstick.up.left{
  
}
.fstick.down.right{
  
}
.fstick.down.left{
  
}

/*END PS3 Controller Styling*/