Skip to content

Instantly share code, notes, and snippets.

@Tortus-exe

Tortus-exe/ProCon.css

Last active July 1, 2020 18:24
Show Gist options
  • Save Tortus-exe/0e4f9bc65b0e54674191490c9fca7cc4 to your computer and use it in GitHub Desktop.
Save Tortus-exe/0e4f9bc65b0e54674191490c9fca7cc4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tortus-exe revised this gist Jul 1, 2020. 1 changed file with 0 additions and 326 deletions.
    326 changes: 0 additions & 326 deletions ProCon.css
    View file
    Original file line number Diff line number Diff line change
    @@ -226,329 +226,3 @@
    opacity: 1
    }
    /*END Minimal GC Styling*/
    /*
    /*
    -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 Pro 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://vectr.com/hextil/akI3z5hbH.png?width=506.667&height=418.667&select=akI3z5hbHpage0);
    height: 419px;
    width: 507px;
    }
    .custom.disconnected { /* This class shows an image when the controller is disconnected */
    background: url(https://vectr.com/hextil/akI3z5hbH.png?width=506.667&height=418.667&select=akI3z5hbHpage0);
    }
    /* 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 */
    width: 586px;
    height: 65px;
    position: absolute;
    left: 99px;
    }
    .custom .trigger{/* These are the actual triggers themselves */
    width:86px;
    height:65px;
    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: 89px;
    height: 28px;
    background: url(ps3-assets/bumpers.png);
    opacity: 0;
    }
    .custom .bumpers{
    position: absolute;
    width: 586px;
    height: 28px;
    left: 99px;
    top: 72px;
    }
    .custom .bumper.pressed{ /* The '.pressed' class is used for most buttons to signify they've been pressed */
    opacity: 1;
    }
    .custom .bumper.left{
    /* Call me lazy or smart, but why should I make 2 bumpers when they're symmetrical
    and I can just rotate them in the browser? Also, note that you most likely won't need
    to use a browser speficic prefix unless it's something that is indeed browser specific.
    NOTE: CLR Browser is basically chrome, so you use '-webkit-' as the browser prefix. */
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    float: left;
    }
    .custom .bumper.right{
    float: right;
    }
    /* 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: absolute;
    width: 205px;
    height: 19px;
    top: 250px;
    left: 291px;
    }
    /* Setting the size and CSS sprite for the start adn select buttons */
    .custom .back, .custom .start{
    background: url(ps3-assets/menus.png);
    width: 34px;
    height: 19px;
    }
    .custom .back.pressed, .custom .start.pressed{
    background-position-y: -21px;
    margin-top: 2px;
    }
    .custom .back{
    float: left;
    width: 38px;
    }
    .custom .start{
    float: right;
    width: 36px;
    background-position: 37px 0;
    }
    /* Positioning and size of the container for the face buttons */
    .custom .abxy{
    position: absolute;
    width: 204px;
    height: 205px;
    top: 156px;
    left: 538px;
    }
    /* base class used to simplify the sprite mapping */
    .custom .button{
    position: absolute;
    width:62px;
    height:62px;
    background: url(ps3-assets/face-buttons.png);
    }
    .custom .button.pressed{
    background-position-y: -64px;
    margin-top: 5px;
    }
    .custom .a{
    background-position: 62px 0;
    top: 142px;
    left: 71px;
    }
    .custom .b{
    background-position: 125px 0;
    top: 71px;
    right: 0px;
    }
    .custom .x{
    background-position: 0 0;
    top: 71px;
    }
    .custom .y{
    background-position: -63px 0;
    left: 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: 364px;
    height: 105px;
    top: 328px;
    left: 210px;
    }
    .custom .stick{
    position: absolute;
    background: url(ps3-assets/thumbs.png);
    height:105px;
    width: 105px;
    }
    .custom .stick.pressed.left{
    background-position-x: -106px;
    }
    .custom .stick.pressed.right{
    background-position-x: -211px;
    }
    .custom .stick.left{
    top: 0;
    left: 0;
    }
    .custom .stick.right{
    top: calc(100% - 105px);
    left: calc(100% - 105px);
    }
    /* Dpad possitioning and sizing */
    .custom .dpad{
    position: absolute;
    width: 140px;
    height: 132px;
    top: 192px;
    left: 74px;
    }
    .custom .face{
    background: url(ps3-assets/dpad.png);
    position: absolute;
    }
    .custom .face.up, .custom .face.down{
    width: 38px;
    height: 52px;
    }
    .custom .face.left, .custom .face.right{
    width: 52px;
    height: 38px;
    }
    .custom .face.up{
    left: 50px;
    top: 0;
    background-position: 92px 0px;
    }
    .custom .face.down{
    left: 50px;
    top: 79px;
    background-position: 131px 0;
    }
    .custom .face.left{
    top: 47px;
    left: 0;
    background-position: 0px 0;
    }
    .custom .face.right{
    top: 47px;
    right: 0px;
    background-position: 53px 0;
    }
    .custom .face.pressed{
    margin-top: 5px;
    background-position-y: 52px;
    }
    /* 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 Pro Controller Styling*/

    */
  2. Tortus-exe revised this gist Jul 1, 2020. 1 changed file with 233 additions and 1 deletion.
    234 changes: 233 additions & 1 deletion ProCon.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,233 @@
    /*Start Minimal GC Styling*/
    .controller.custom {
    background: url(https://imgur.com/CdyFFZZ.png);
    height: 441px;
    width: 981px;
    }

    .custom .bumpers{
    position: absolute;
    height: 100px;
    width: 664px;
    top: 30px;
    left: 284px;
    }

    .custom .bumper.left{
    background: url(https://imgur.com/Wd6VBny.png)no-repeat;
    height: 27px;
    width: 341px;
    display: block;
    position: absolute;
    top: 0px;
    left: -251px;
    }

    .custom .bumper.right{
    background: url(https://imgur.com/Wd6VBny.png)no-repeat;
    height: 27px;
    width: 341px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    }

    .custom .triggers{
    position: absolute;
    left: 825px;
    top: 70px;
    }

    .custom .trigger.left{
    width: 103px;
    height: 87px;
    background: url(https://i.imgur.com/jfqnqtV.png)no-repeat;
    display: block;
    /* top: 4px; */
    }

    .custom .dpad{
    width: 150px;
    height: 150px;
    /* background: #FF00008F; */
    position: absolute;
    background-size: 164px;
    top: 259px;
    left: 327px;
    }

    .custom .dpad .face{
    background: url(https://imgur.com/prOPSDe.png);
    height: 77px;
    width: 47px;
    /* background-position-y: -164px; */
    display: block;
    position: absolute;
    }

    .custom .dpad .face.up{
    left: 31px;
    top: -9px;
    /* background-size: 100px; */
    }


    .custom .dpad .face.down{
    transform: rotate(180deg);
    left: 31px;
    top: 75px;
    }

    .custom .dpad .face.left{
    transform: rotate(-90deg);
    top: 32px;
    left: -11px;
    }

    .custom .dpad .face.right{
    transform: rotate(90deg);
    top: 33px;
    left: 73px;
    }

    /* We're using the node used for a controller's system button here */
    .custom .meta{
    background: url(https://gamepadviewer.com/n64-assets/buttons.svgz);
    width: 55px;
    height: 55px;
    background-position-y: -282px;
    position: absolute;
    left: 377px;
    top: 344px
    }

    .custom .abxy{
    position: absolute;
    top: 245px;
    left: 609px
    }

    .custom .abxy .button{
    background: url(https://gamepadviewer.com/gc-assets/buttons.svgz);
    width: 73px;
    height: 73px;
    /* background-position-x: -116px; */
    display: block;
    position: absolute;
    }

    .custom .abxy .button.a{
    left: 114px;
    top: -76px;
    background-size: 640px;
    width: 143px;
    height: 141px;
    transform: scale;
    }

    .custom .abxy .button.b{
    left: 260px;
    top: -73px;
    height: 144px;
    width: 92px;
    background-size: 720px;
    background-position-x: 312px;
    transform: rotate(11deg);
    }

    .custom .abxy .button.x{
    top: 62px;
    left: 73px;
    height: 77px;
    width: 78px;
    background-size: 555px;
    /* transform: rotate(-90deg) */
    background-position-x: 430px;
    }

    .custom .abxy .button.y{
    left: 65px;
    top: -165px;
    width: 144px;
    height: 92px;
    background-position-x: 457px;
    background-size: 720px;
    /* transform: rotate(-1deg); */
    }

    .custom .arrows{
    position: absolute;
    top: 335px;
    left: 529px
    }

    .custom .start{
    background: url(https://imgur.com/RuHF1J5.png);
    width: 71px;
    height: 71px;
    /* background-position-y: -341px; */
    display: block;
    position: relative;
    }

    .custom .start{
    /* background-position-y: -405px; */
    top: -225px;
    left: -75px;
    }

    .custom .sticks{
    /* position: absolute; */
    top: 493px;
    left: 369px;
    }

    .custom .stick.left{
    background: url(https://gamepadviewer.com/gc-assets/left-stick.svgz);
    width: 180px;
    height: 180px;
    display: block;
    top: 111px;
    left: 93px;
    background-size: 180px;
    /* transform: scale(2); */
    /* background-position-y: 73px; */
    }

    .custom .stick {
    position: absolute;
    }

    .custom .stick.right{
    background: url(https://gamepadviewer.com/gc-assets/cstick.svgz)no-repeat;
    width: 100px;
    height: 100px;
    top: 279px;
    left: 530px;
    background-size: 100px;
    display: block;
    }

    .custom .stick {
    position: absolute;
    }

    .custom .button,
    .custom .face,
    .custom .meta,
    .custom .bumper,
    .custom .trigger,
    .custom .arrows *{
    opacity: 0;
    }

    .custom .pressed{
    opacity: 1
    }
    /*END Minimal GC Styling*/
    /*
    /*
    -How to use Custom CSS for the Gamepad Viewer-
    http://mrmcpowned.com/gamepad
    @@ -319,4 +549,6 @@ themselves are fairly self explanatory. */

    }

    /*END Pro Controller Styling*/
    /*END Pro Controller Styling*/

    */
  3. Tortus-exe created this gist Jul 1, 2020.
    322 changes: 322 additions & 0 deletions ProCon.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,322 @@
    /*
    -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 Pro 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://vectr.com/hextil/akI3z5hbH.png?width=506.667&height=418.667&select=akI3z5hbHpage0);
    height: 419px;
    width: 507px;
    }
    .custom.disconnected { /* This class shows an image when the controller is disconnected */
    background: url(https://vectr.com/hextil/akI3z5hbH.png?width=506.667&height=418.667&select=akI3z5hbHpage0);
    }
    /* 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 */
    width: 586px;
    height: 65px;
    position: absolute;
    left: 99px;
    }
    .custom .trigger{/* These are the actual triggers themselves */
    width:86px;
    height:65px;
    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: 89px;
    height: 28px;
    background: url(ps3-assets/bumpers.png);
    opacity: 0;
    }
    .custom .bumpers{
    position: absolute;
    width: 586px;
    height: 28px;
    left: 99px;
    top: 72px;
    }
    .custom .bumper.pressed{ /* The '.pressed' class is used for most buttons to signify they've been pressed */
    opacity: 1;
    }
    .custom .bumper.left{
    /* Call me lazy or smart, but why should I make 2 bumpers when they're symmetrical
    and I can just rotate them in the browser? Also, note that you most likely won't need
    to use a browser speficic prefix unless it's something that is indeed browser specific.
    NOTE: CLR Browser is basically chrome, so you use '-webkit-' as the browser prefix. */
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    float: left;
    }
    .custom .bumper.right{
    float: right;
    }
    /* 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: absolute;
    width: 205px;
    height: 19px;
    top: 250px;
    left: 291px;
    }
    /* Setting the size and CSS sprite for the start adn select buttons */
    .custom .back, .custom .start{
    background: url(ps3-assets/menus.png);
    width: 34px;
    height: 19px;
    }
    .custom .back.pressed, .custom .start.pressed{
    background-position-y: -21px;
    margin-top: 2px;
    }
    .custom .back{
    float: left;
    width: 38px;
    }
    .custom .start{
    float: right;
    width: 36px;
    background-position: 37px 0;
    }
    /* Positioning and size of the container for the face buttons */
    .custom .abxy{
    position: absolute;
    width: 204px;
    height: 205px;
    top: 156px;
    left: 538px;
    }
    /* base class used to simplify the sprite mapping */
    .custom .button{
    position: absolute;
    width:62px;
    height:62px;
    background: url(ps3-assets/face-buttons.png);
    }
    .custom .button.pressed{
    background-position-y: -64px;
    margin-top: 5px;
    }
    .custom .a{
    background-position: 62px 0;
    top: 142px;
    left: 71px;
    }
    .custom .b{
    background-position: 125px 0;
    top: 71px;
    right: 0px;
    }
    .custom .x{
    background-position: 0 0;
    top: 71px;
    }
    .custom .y{
    background-position: -63px 0;
    left: 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: 364px;
    height: 105px;
    top: 328px;
    left: 210px;
    }
    .custom .stick{
    position: absolute;
    background: url(ps3-assets/thumbs.png);
    height:105px;
    width: 105px;
    }
    .custom .stick.pressed.left{
    background-position-x: -106px;
    }
    .custom .stick.pressed.right{
    background-position-x: -211px;
    }
    .custom .stick.left{
    top: 0;
    left: 0;
    }
    .custom .stick.right{
    top: calc(100% - 105px);
    left: calc(100% - 105px);
    }
    /* Dpad possitioning and sizing */
    .custom .dpad{
    position: absolute;
    width: 140px;
    height: 132px;
    top: 192px;
    left: 74px;
    }
    .custom .face{
    background: url(ps3-assets/dpad.png);
    position: absolute;
    }
    .custom .face.up, .custom .face.down{
    width: 38px;
    height: 52px;
    }
    .custom .face.left, .custom .face.right{
    width: 52px;
    height: 38px;
    }
    .custom .face.up{
    left: 50px;
    top: 0;
    background-position: 92px 0px;
    }
    .custom .face.down{
    left: 50px;
    top: 79px;
    background-position: 131px 0;
    }
    .custom .face.left{
    top: 47px;
    left: 0;
    background-position: 0px 0;
    }
    .custom .face.right{
    top: 47px;
    right: 0px;
    background-position: 53px 0;
    }
    .custom .face.pressed{
    margin-top: 5px;
    background-position-y: 52px;
    }
    /* 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 Pro Controller Styling*/