8bitdo-pro2-skin-gamepadviewer

8bitdopro2.css

.controller.custom{
    background-image: url(base.svg);
    height: 692px;
    width: 758px;
}

.custom.disconnected {
    background-image: url(disconnected.svg);
}

.custom.disconnected div {
    display: none;
}

.custom .triggers{ /* The triggers are housed inside a div, so this sizes the div properly and positions it */
    width: 556px;
    height: 119px;
    position: absolute;
    left: 101px;
}

.custom .trigger {
    width:118px;
    height:119px;
    background: url(trigger.svg);
    opacity: 1;
}

.custom .trigger[data-value="0"] {
    opacity: 0;
}

.custom .trigger.left {
    float: left;
    background-position: 0 0;
}

.custom .trigger.right {
    float: right;
    transform: rotateY(180deg);
}

.custom .bumpers {
    width: 542px;
    height: 53px;
    left: 108px;
    position: absolute;
	top: 111px;
}

.custom .bumper {
    width: 124px;
    height: 53px;
    background: url(bumper.svg);
    opacity: 0;
}

.custom .bumper.pressed {
    opacity: 1;
}

.custom .bumper.left {
    float: left;
}

.custom .bumper.right {
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.custom .p0 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.custom .p1 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.custom .p2 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.custom .p3 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.custom .arrows {
    position: absolute;
    width: 216px;
    height: 36px;
    top: 437px;
    left: 276px;
}

.custom .back {
    background: url(start-select.svg);
    width: 77px;
    height: 36px;
    opacity: 0;
}
.custom .start {
    background: url(start-select.svg);
    width: 62px;
    height: 36px;
    opacity: 0;
}
.custom .back.pressed, .start.pressed {
    opacity: 1;
}

.custom .back {
    float: left;
	margin-right: -5px;
}

.custom .start {
    background-position: -77px 0px;
    float: left;
}

.custom .abxy {
    position: absolute;
    width: 130px;
    height: 150px;
	top: 181px;
    left: 516px;
}

.custom .button {
    position: absolute;
    background: url(buttons.svg);
    width: 50px;
    height: 50px;
    /* display: none; */
}

.custom .button.pressed {
    background-position-y: -50px;
    opacity: 1;
}

.custom .a {
    background-position: 0 0;
    top: 100px;
    left: 50px;
}

.custom .b {
    background-position: -50px 0;
    top: 50px;
    right: -20px;
}

.custom .x {
    background-position: -100px 0;
    top: 50px;
    left: 0px;
}

.custom .y {
    background-position: -150px 0;
    top: 0px;
    left: 50px;
}

.custom .sticks {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 331px;
    left: 221px;
}

.custom .stick {
    position: absolute;
    background: url(stick.svg);
    background-position: 0px 0;
    height: 84px;
    width: 84px;
}

.custom .stick.pressed {
    background-position: -84px 0px;
}

.custom .stick.left {
    top: 0;
    left: 0;
}

.custom .stick.right {
    top: 0px;
    left: 232px;
}

.custom .dpad {
    position: absolute;
    width: 114px;
    height: 113px;
    top: 199px;
    left: 114px;
}

.custom .face {
    background: url(dpad.svg);
    position: absolute;
    opacity: 0;
}

.custom .face.pressed {
    opacity: 1;
}

.custom .face.up {
    background-position: 0px 0px;
    left: 35px;
    top: 0px;
    width: 44px;
    height: 57px;
}

.custom .face.down {
    background-position: -44px 0px;
	left: 35px;
    bottom: 0;
    width: 44px;
    height: 57px;
}

.custom .face.left {
    background-position: -88px 0px;
    width: 56px;
    height: 55px;
    top: 22px;
    left: 0;
}

.custom .face.right {
    background-position: -146px 0px;
    width: 56px;
    height: 55px;
    top: 22px;
    right: 0;
}

README.md

8bitdo-pro-2-gamepad-viewer-skin

_config.yml

theme: jekyll-theme-midnight

base.png

base.svg

bumper.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="24.9711mm"
   height="5.3468108mm"
   viewBox="0 0 24.9711 5.3468108"
   version="1.1"
   id="svg195484"
   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
   sodipodi:docname="bumper.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview195486"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="6.2232063"
     inkscape:cx="41.698762"
     inkscape:cy="45.073228"
     inkscape:window-width="2560"
     inkscape:window-height="1395"
     inkscape:window-x="0"
     inkscape:window-y="23"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs195481" />
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-56.497761,-113.81338)">
    <g
       id="g6135-6"
       style="fill:#fafafa;fill-opacity:0.956863;stroke:#d9d9d9;stroke-opacity:1"
       transform="translate(-0.41188889,26.175113)">
      <path
         style="fill:#fafafa;fill-opacity:0.956863;stroke:#d9d9d9;stroke-width:0.26612px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         d="m 81.712604,89.108384 c -4.494678,0.01754 -8.990625,0.0017 -13.484499,0.04012 -3.873064,0.41611 -7.737946,1.55731 -11.192605,3.704001 0.149289,-0.01279 -0.145013,-1.361161 0.131137,-1.533906 4.15471,-2.598981 7.192688,-3.222016 11.065584,-3.547259 4.360784,0.0091 8.721557,0.01819 13.08234,0.02728 0.549831,0.154979 0.413883,0.704609 0.424576,1.138181 -0.01994,0.03325 0.03819,0.20572 -0.02658,0.171579 z"
         id="path4512-4-2"
         sodipodi:nodetypes="cccsccccc" />
      <path
         style="fill:#fafafa;fill-opacity:0.956863;stroke:#d9d9d9;stroke-width:0.26612px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         d="m 81.739137,88.936806 c -0.03759,0.0345 0.006,0.08361 -0.006,0.121756 -0.006,0.01751 -0.01418,0.03276 -0.02023,0.04982"
         id="path5039-2-8" />
    </g>
  </g>
</svg>

buttons.svg

disconnected.svg

dpad.svg

nvidiashield.css

.controller.custom{
    background-image: url(base.svg);
    height: 692px;
    width: 758px;
}

.custom.disconnected {
    background-image: url(disconnected.svg);
}

.custom.disconnected div {
    display: none;
}

.custom .triggers{ /* The triggers are housed inside a div, so this sizes the div properly and positions it */
    width: 556px;
    height: 119px;
    position: absolute;
    left: 101px;
}

.custom .trigger {
    width:118px;
    height:119px;
    background: url(trigger.svg);
    opacity: 1;
}

.custom .trigger[data-value="0"] {
    opacity: 0;
}

.custom .trigger.left {
    float: left;
    background-position: 0 0;
}

.custom .trigger.right {
    float: right;
    transform: rotateY(180deg);
}

.custom .bumpers {
    width: 542px;
    height: 53px;
    left: 108px;
    position: absolute;
	top: 111px;
}

.custom .bumper {
    width: 124px;
    height: 53px;
    background: url(bumper.svg);
    opacity: 0;
}

.custom .bumper.pressed {
    opacity: 1;
}

.custom .bumper.left {
    float: left;
}

.custom .bumper.right {
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.custom .p0 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.custom .p1 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.custom .p2 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.custom .p3 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.custom .arrows {
    position: absolute;
    width: 216px;
    height: 36px;
    top: 437px;
    left: 276px;
}

.custom .back {
    background: url(start-select.svg);
    width: 77px;
    height: 36px;
    opacity: 0;
}
.custom .start {
    background: url(start-select.svg);
    width: 62px;
    height: 36px;
    opacity: 0;
}
.custom .back.pressed, .start.pressed {
    opacity: 1;
}

.custom .back {
    float: left;
	margin-right: -5px;
}

.custom .start {
    background-position: -77px 0px;
    float: left;
}

.custom .abxy {
    position: absolute;
    width: 130px;
    height: 150px;
	top: 181px;
    left: 516px;
}

.custom .button {
    position: absolute;
    background: url(buttons.svg);
    width: 50px;
    height: 50px;
    /* display: none; */
}

.custom .button.pressed {
    background-position-y: -50px;
    opacity: 1;
}

.custom .a {
    background-position: 0 0;
    top: 100px;
    left: 50px;
}

.custom .b {
    background-position: -50px 0;
    top: 50px;
    right: -20px;
}

.custom .x {
    background-position: -100px 0;
    top: 50px;
    left: 0px;
}

.custom .y {
    background-position: -150px 0;
    top: 0px;
    left: 50px;
}

.custom .sticks {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 331px;
    left: 221px;
}

.custom .stick {
    position: absolute;
    background: url(stick.svg);
    background-position: 0px 0;
    height: 84px;
    width: 84px;
}

.custom .stick.pressed {
    background-position: -84px 0px;
}

.custom .stick.left {
    top: 0;
    left: 0;
}

.custom .stick.right {
    top: 0px;
    left: 232px;
}

.custom .dpad {
    position: absolute;
    width: 114px;
    height: 113px;
    top: 199px;
    left: 114px;
}

.custom .face {
    background: url(dpad.svg);
    position: absolute;
    opacity: 0;
}

.custom .face.pressed {
    opacity: 1;
}

.custom .face.up {
    background-position: 0px 0px;
    left: 35px;
    top: 0px;
    width: 44px;
    height: 57px;
}

.custom .face.down {
    background-position: -44px 0px;
	left: 35px;
    bottom: 0;
    width: 44px;
    height: 57px;
}

.custom .face.left {
    background-position: -88px 0px;
    width: 56px;
    height: 55px;
    top: 22px;
    left: 0;
}

.custom .face.right {
    background-position: -146px 0px;
    width: 56px;
    height: 55px;
    top: 22px;
    right: 0;
}

start-select.svg

stick.svg

trigger.svg