braceoverlay.css

/*
The purpose of this stylesheet is to make a racing game-oriented gamepad overlay for streaming and video recording.
To use in streaming, you will need Open Broadcaster Software and the CLR Browser Source plugin for it.
Usage instructions:
1. Open OBS
2. Right-click on Sources and add CLR Browser
3. Enter the following as a URL: http://mrmcpowned.com/gamepad/?p=1&s=1&nosurvey=1&css=https://gist.github.com/greatjoe/210c46dfb64950a12677/raw/76ad45c8658adbaea937f8d95fc65557bafb1544/RacingOverlay.css
4. Set Width to: 522
5. Set Height to: 162
...and you're good to go. Refer to your preferred streaming service for other settings. You can also record a
regular browser window using your preferred recording method, if you want to record in higher quality.
Make sure to check out MrMcPowned's Gamepad Viewer if you want to see what else
you can do with it: https://obsproject.com/forum/resources/gamepad-display.3/
Based on a stylesheet and the Gamepad Viewer by MrMcPowned
Stylesheet tweaked by Great Joe
*/

/*BEGIN Xbox One Controller Styling*/
.controller.custom{
    height: 630px;
    width: 750px;
    margin-left: -386px;
    margin-top: -317px;
    background: #000000;
}
.custom.disconnected {
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/disconnected.svgz);
}
.custom.disconnected div {
    display: none;
}
.custom .triggers{
    width: 520px;
    height: 121px;
    position: absolute;
    left: 126px;
    top: 255px;
    background: url(http://i.imgur.com/GaV5RBy.png);
    /* background-position: -152px 0px; */
    -webkit-clip-path: 50%;
    transform: scale(1,1.25);
}
.custom .trigger{
    width: 88px;
    height: 121px;
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/trigger.svgz);
    opacity: 0;
}
.custom .trigger.left{
    float: left;
    background-position:0 0;
}
.custom .trigger.right{
    float: right;
    transform: rotateY(180deg);
}
.custom .bumper{
    width: 170px;
    height: 61px;
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/bumper.svgz);
    opacity: 0;
    transform: scale(0.7, 0.7);
}
.custom .bumpers{
    position: absolute;
    width: 536px;
    height: 61px;
    left: 368px;
    top: 230px;
}
.custom .bumper.pressed{
    opacity: 1;
}
.custom .bumper.left{
    float: left;
}
.custom .abxy{
    position: absolute;
    width: 157px;
    height: 164px;
    top: 236px;
    left: 388px;
    background: url(http://i.imgur.com/tE4M2o4.png); 
    transform: scale(0.74, 0.74);
    /* background-size: contain; */
}
.custom .button{
    position: absolute;
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/abxy.svgz);
    width: 48px;
    height: 48px;
}
.custom .button.pressed{
    background-position-y: -48px;
    margin-top: 5px;
    opacity: 1;
}
.custom .a{
    background-position: 0 0;
    top: 108px;
    left: 55px;
}
.custom .b{
    background-position: -49px 0;
    top: 57px;
    right: 3px;
}
.custom .x{
    background-position: -98px 0;
    top: 57px;
    left: 4px;
}
.custom .y{
    background-position: 48px 0;
    left: 55px;
    top: 5px;
}
.custom .sticks{
    position: absolute;
    width: 137px;
    height: 139px;
    top: 252px;
    left: 244px;
    /*background: url(http://mrmcpowned.com/gamepad/xbox-assets/base.svgz);*/;
    background-position: -117px -214px;
    -webkit-clip-path: circle(50% at center);
    clip-path: circle(50% at center);
    transform: scale(1.3, 1.3);
}
.custom .stick{
    position: absolute;
    background: url(http://mrmcpowned.com/gamepad/xbox-assets/stick.svgz);
    background-position: -85px 0;
    height: 83px;
    width: 83px;
}
.custom .stick.pressed{
    background-position: 0 0;
}
.custom .stick.left{
    top: 24px;
    left: 27px;
}
.custom .stick.right{
    top: 113px;
    left: 288px;
    display: none;
}
/*END Xbox One Controller Styling*/