mrmcpowned

.controller.edit {
    background: url(http://i.imgur.com/tffA4dP.png);
    height: 544px;
    width: 668px;
}
.edit .stick {
    position: absolute;
    background: url(http://i.imgur.com/LpLOf3G.png);
    height: 86px;
    width: 86px;

mrmcpowned

/*BEGIN Xbox One Controller Styling*/
.controller.custom{
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/base.svgz);
    height: 630px;
    width: 750px;
    margin-left: -375px;
    margin-top: -285px;
}
.custom.white{
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/base-white.svgz);

mrmcpowned

/*BEGIN Xbox One Controller Styling*/
.controller.custom{
    /* background: url(http://mrmcpowned.com/gamepad/xbox-assets/base.svgz); */
    height: 630px;
    width: 750px;
    margin-left: -375px;
    margin-top: -285px;
}
.custom.white{
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/base-white.svgz);

mrmcpowned

/*
-How to use Custom CSS for the GamePad Viewer-
https://gamepadviewer.com/

Enabling a custom CSS is as easy as adding &css=[url to css file]
to the end of the url like so:
https://gamepadviewer.com/?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

mrmcpowned

@keyframes colorhue{
    from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
    to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg);}
}

.edit {
    animation: colorhue 1s linear infinite;
}

mrmcpowned

/*BEGIN Fight Stick Controller Styling*/
.controller.fight-stick {
    background: url(stick-assets/base.svgz) center no-repeat;
    height: 534px;
    width: 1122px;
}

.fight-stick.disconnected {
    background: url(stick-assets/disconnected.svgz) no-repeat;
}