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

*/

* {
  box-sizing: border-box;
}

/*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-color: #000000;
  width: 418px;
  height: 258px;
}
.custom.disconnected {
  /* This class shows an image when the controller is disconnected */
  background-color: #000000;
  width: 418px;
  height: 258px;
}

.custom .triggers {
  position: absolute;
  width: 41px;
  height: 41px;
}
.custom .trigger-button{
  /* These are the actual triggers themselves */
  position: absolute;
  width: 41px;
  height: 41px;
  background: url(button_unused.png)
}
/* 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-button.left {
  position: absolute;
  top: 135px;
  left: 366px;
}
.custom .trigger-button.right {
  position: absolute;
  top: 135px;
  left: 319px;
}

.custom .trigger-button.pressed {
  background: url(button_used.png);
}

/* The bumpers follow the same methodology as the triggers in terms of
placement */
.custom .bumper {
  position: absolute;
  width: 41px;
  height: 41px;
  background: url(button_unused.png);
}
.custom .bumpers {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.custom .bumper.left {
  position: absolute;
  top: 84px;
  left: 366px;
}
.custom .bumper.right {
  position: absolute;
  top: 84px;
  left: 319px;
}

.custom .bumper.pressed {
  background: url(button_used.png);
}

/* This is to size and position the containing div for the
start and select buttons. */
.custom .arrows {
  position: absolute;
  left: 0;
  right: 0;
  top: 124px;
}
/* Setting the size and CSS sprite for the start adn select buttons */
.custom .back,
.custom .start {
  width: 32px;
  height: 32px;
  background-size: contain !important;
}

.custom .back {
  background: url(button_unused.png);
  position: absolute;
  left: 120px;
}
.custom .start {
  background: url(button_unused.png);
  position: absolute;
  left: 158px;
}

.custom .back.pressed {
  background: url(button_used.png);
}
.custom .start.pressed {
  background: url(button_used.png);
}

/* Positioning and size of the container for the face buttons */
.custom .abxy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* base class used to simplify the sprite mapping */
.custom .button {
  position: absolute;
  width: 41px;
  height: 41px;
  background: url(button_unused.png)
}

.custom .button.pressed {
  background: url(button_used.png);
}

.custom .b {
  top: 135px;
  left: 272px;
}
.custom .a {
  top: 144px;
  left: 225px;
}
.custom .x {
  top: 92px;
  left: 225px;
}
.custom .y {
  top: 84px;
  left: 272px;
}

/* 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;
  top: 110px;
  left: 0;
  right: 0;
}
.custom .stick {
  position: absolute;
  background: url(left_stick_unused.png);
  width: 63px;
  height: 66px;
  transform: none !important;
}
.custom .stick.pressed.left {
  background: url(left_stick_used.png);
}
.custom .stick.pressed.right {
  background: url(left_stick_used.png);
}
.custom .stick.left {
  left: 24px;
}
.custom .stick.right {
  left: 234px;
  display: none;
}
/* Dpad possitioning and sizing */
.custom .dpad {
  display: none;
  position: absolute;
  left: 13px;
  top: 100px;
  width: 109px;
  height: 106px;
  background: url(dpad.png);
}
.custom .face {
  position: absolute;
}
.custom .face.up,
.custom .face.down
{
  width: 24px;
  height: 21px;
}

.custom .face.left,
.custom .face.right {
  width: 21px;
  height: 24px;
}

.custom .face.up {
  background: url(up_unused.png);
  left: 42px;
  top: 6px;
}
.custom .face.down {
  background: url(down_unused.png);
  left: 42px;
  bottom: 6px;
}
.custom .face.left {
  background: url(left_unused.png);
  right: 84px;
  top: 41px;
}
.custom .face.right {
  background: url(right_unused.png);
  left: 84px;
  top: 41px;
}

.custom .face.up.pressed {
  background: url(up_used.png);
}
.custom .face.down.pressed {
  background: url(down_used.png);
}
.custom .face.left.pressed {
  background: url(left_used.png);
}
.custom .face.right.pressed {
  background: url(right_used.png);
}