Skip to content

Instantly share code, notes, and snippets.

@JotaGo

JotaGo/8bitdopro2.css

Last active October 8, 2025 05:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JotaGo/84e9c728a259d4b40e9fe969ae1aec00 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JotaGo/84e9c728a259d4b40e9fe969ae1aec00 to your computer and use it in GitHub Desktop.
Download ZIP
8bitdo-pro2-skin-gamepadviewer
Raw
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;
}
Raw
README.md

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

Raw
_config.yml
theme: jekyll-theme-midnight
Display the source blob
Display the rendered blob
Raw
base.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
bumper.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
buttons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
disconnected.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120.82255mm"
height="100.80645mm"
viewBox="0 0 120.82255 100.80645"
version="1.1"
id="svg1304"
inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
sodipodi:docname="disconnected.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="namedview1306"
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="2.2328246"
inkscape:cx="129.20854"
inkscape:cy="175.78631"
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="defs1301" />
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.836292,-116.89163)">
<path
style="fill:none;stroke:#6f7374;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 93.156977,187.19452 c -0.514132,-0.83081 -1.06092,-1.63985 -1.925667,-2.23691 v 0"
id="path3308"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;stroke:#6f7374;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 137.76162,186.92144 c 0.433,-0.86197 0.95534,-1.45589 1.50635,-1.96383"
id="path3343"
sodipodi:nodetypes="cc" />
<path
style="fill:#cbcfd2;fill-opacity:1;stroke:#6f7374;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 122.37914,182.96978 c 1.00548,-0.38082 0.42781,-1.66052 0.42781,-1.66052 -2.60597,-6.21089 1.94336,-11.37434 1.94336,-11.37434 7.5573,-6.56845 13.60558,-1.2646 13.60558,-1.2646 9.33805,8.64312 0.91208,16.28729 0.91208,16.28729 8.12194,3.77865 15.98327,0.2606 15.98327,0.2606 16.46103,-6.73208 14.15909,-22.97595 14.15909,-22.97595 -2.12821,-20.36997 -21.82709,-20.51105 -21.82709,-20.51105 H 84.081393 c 0,0 -16.564385,-1.20534 -22.25408,16.16777 0,0 -3.25746,9.16432 2.823131,18.71954 6.080591,9.55521 15.852969,9.9461 15.852969,9.9461 0,0 7.209843,0.86866 10.727899,-1.60701 0,0 -5.255368,-4.08268 -2.562535,-12.11775 0,0 2.95343,-6.81895 10.684467,-6.03715 7.731036,0.78179 8.947156,8.20879 8.947156,8.20879 0,0 0.99895,2.7797 -0.56463,6.81895 0,0 -0.40812,0.7712 0.37495,1.13933 z"
id="path2307"
sodipodi:nodetypes="ccccccccccscccscccc" />
<ellipse
style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.22;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20891"
cx="113.18481"
cy="171.56973"
rx="0.45927599"
ry="0.45271492" />
<ellipse
style="display:inline;fill:#1c1c1c;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.22;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20891-7"
cx="115.23843"
cy="171.56973"
rx="0.45927599"
ry="0.45271492" />
<ellipse
style="display:inline;fill:#1c1c1c;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.22;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20891-4"
cx="117.42327"
cy="171.56926"
rx="0.45927599"
ry="0.45271492" />
<ellipse
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.218628;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182"
cx="138.98424"
cy="158.72241"
rx="4.0707183"
ry="4.0180697" />
<ellipse
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.218628;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-0"
cx="157.82829"
cy="158.79871"
rx="4.0707183"
ry="4.0180697" />
<ellipse
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.218628;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-08"
cx="148.39023"
cy="167.0444"
rx="4.0707183"
ry="4.0180697" />
<ellipse
style="display:inline;fill:#484b4a;fill-opacity:1;fill-rule:evenodd;stroke:#484b4a;stroke-width:0.184673;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-9"
cx="148.32326"
cy="178.48001"
rx="3.4559097"
ry="3.3769372" />
<ellipse
style="display:inline;fill:#bfc7c9;fill-opacity:1;fill-rule:evenodd;stroke:#484b4a;stroke-width:0.137573;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-9-2"
cx="148.32631"
cy="178.51836"
rx="2.5581062"
ry="2.5317822" />
<ellipse
style="display:inline;fill:#dfdfdf;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.137573;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-9-2-7"
cx="82.166077"
cy="178.3326"
rx="2.5581062"
ry="2.5317822" />
<ellipse
style="display:inline;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.218628;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path6182-3"
cx="148.39023"
cy="150.5504"
rx="4.0707183"
ry="4.0180697" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.14821px;line-height:1.25;font-family:sans-serif;fill:#45a2f1;fill-opacity:1;stroke:none;stroke-width:0.103706"
x="144.16313"
y="153.20639"
id="text9949"
transform="scale(0.95548821,1.0465854)"><tspan
sodipodi:role="line"
id="tspan9947"
style="fill:#45a2f1;fill-opacity:1;stroke-width:0.103706"
x="144.16313"
y="153.20639">Y</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.11002px;line-height:1.25;font-family:sans-serif;display:inline;fill:#ef7ded;fill-opacity:1;stroke:none;stroke-width:0.102751"
x="155.35037"
y="143.99234"
id="text13027"
transform="scale(0.94669294,1.0563087)"><tspan
sodipodi:role="line"
id="tspan13025"
style="fill:#ef7ded;fill-opacity:1;stroke-width:0.102751"
x="155.35037"
y="143.99234">X</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.77679px;line-height:1.25;font-family:sans-serif;fill:#20b58c;fill-opacity:1;stroke:none;stroke-width:0.0944201"
x="176.31938"
y="142.47649"
id="text14953"
transform="scale(0.88844854,1.1255576)"><tspan
sodipodi:role="line"
id="tspan14951"
style="fill:#20b58c;fill-opacity:1;stroke-width:0.0944201"
x="176.31938"
y="142.47649">A</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.96792px;line-height:1.25;font-family:sans-serif;fill:#fa5f58;fill-opacity:1;stroke:none;stroke-width:0.0991993"
x="160.88606"
y="154.12218"
id="text16761"
transform="scale(0.91396326,1.0941359)"><tspan
sodipodi:role="line"
id="tspan16759"
style="fill:#fa5f58;fill-opacity:1;stroke-width:0.0991993"
x="160.88606"
y="154.12218">B</tspan></text>
<path
style="fill:#020202;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.770161"
d="m 79.777553,149.52053 h 4.684932 c 0,0 0.734682,-0.0426 0.734682,0.73469 0,0.77727 0,5.015 0,5.015 0,0 0.01064,0.59626 0.628208,0.59626 0.617559,0 4.833999,0 4.833999,0 0,0 0.862451,-0.0213 0.862451,0.86246 0,0.88375 0,4.41874 0,4.41874 0,0 0.106476,0.65483 -0.654825,0.65483 -0.761301,0 -4.999035,0 -4.999035,0 0,0 -0.726696,0.29813 -0.726696,0.72669 0,0.42857 0,5.0922 0,5.0922 0,0 0.06389,0.66947 -0.669468,0.66947 -0.733351,0 -4.566475,0 -4.566475,0 0,0 -0.771284,-0.21295 -0.771284,-0.77128 0,-0.55834 0,-5.07291 0,-5.07291 0,0 0.06389,-0.60458 -0.604584,-0.60458 -0.668467,0 -5.119153,0 -5.119153,0 0,0 -0.547293,0.0763 -0.547293,-0.94794 0,-1.02419 0,-4.30364 0,-4.30364 0,0 0.06389,-0.81667 0.816673,-0.81667 0.752788,0 4.820161,0 4.820161,0 0,0 0.687996,0.0925 0.687996,-0.39722 0,-0.48972 0,-5.23854 0,-5.23854 0,0 0.227695,-0.61755 0.589711,-0.61756 z"
id="path20560" />
<ellipse
style="fill:#020202;fill-opacity:1;fill-rule:evenodd;stroke:#4b4f52;stroke-width:0.251382;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20683"
cx="82.2052"
cy="158.87973"
rx="2.2202992"
ry="2.2309468" />
<path
style="display:inline;fill:#b0b2b1;fill-opacity:1;stroke:#5d5f5e;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 113.73738,174.86893 h 2.8931 c 0,0 1.04341,0 1.22522,1.22522 0.18181,1.22522 -0.57713,1.5812 -0.92315,1.59894 -1.42889,0.0733 -2.491,0.17735 -3.21098,0 -0.51752,-0.12748 -1.05922,-0.40534 -1.04341,-1.21161 0.0158,-0.80628 0.30272,-1.40985 1.05922,-1.61255 z"
id="path21320"
sodipodi:nodetypes="ccssssc" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#636469;fill-opacity:1;fill-rule:evenodd;stroke:#4b4f52;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="260.81345"
sodipodi:cy="376.8736"
sodipodi:r1="8.0762043"
sodipodi:r2="4.0381021"
sodipodi:arg1="2.6167969"
sodipodi:arg2="3.6639944"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.26458333,0,0,0.26458333,13.248524,53.16261)"
inkscape:transform-center-x="-0.0012780182"
inkscape:transform-center-y="-0.53310056"
d="m 253.82409,380.92007 6.97969,-12.12267 7.00869,12.10592 z" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#636469;fill-opacity:1;fill-rule:evenodd;stroke:#4b4f52;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-8"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="260.81345"
sodipodi:cy="376.8736"
sodipodi:r1="8.0762043"
sodipodi:r2="4.0381021"
sodipodi:arg1="2.6167969"
sodipodi:arg2="3.6639944"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.26458333,0,0,-0.26458333,13.198452,264.30965)"
inkscape:transform-center-x="-0.0012780182"
inkscape:transform-center-y="0.53309596"
d="m 253.82409,380.92007 6.97969,-12.12267 7.00869,12.10592 z" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#636469;fill-opacity:1;fill-rule:evenodd;stroke:#4b4f52;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-1"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="260.81345"
sodipodi:cy="376.8736"
sodipodi:r1="8.0762043"
sodipodi:r2="4.0381021"
sodipodi:arg1="2.6167969"
sodipodi:arg2="3.6639944"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0,0.26458333,-0.26458333,0,187.56494,89.811325)"
inkscape:transform-center-x="-0.53309971"
inkscape:transform-center-y="0.001278444"
d="m 253.82409,380.92007 6.97969,-12.12267 7.00869,12.10592 z" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#636469;fill-opacity:1;fill-rule:evenodd;stroke:#4b4f52;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-80"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="260.81345"
sodipodi:cy="376.8736"
sodipodi:r1="8.0762043"
sodipodi:r2="4.0381021"
sodipodi:arg1="2.6167969"
sodipodi:arg2="3.6639944"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0,-0.26458333,0.26458333,0,-23.300258,227.8251)"
inkscape:transform-center-x="0.53310059"
inkscape:transform-center-y="-0.0012781194"
d="m 253.82409,380.92007 6.97969,-12.12267 7.00869,12.10592 z" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#c0c0c0;fill-opacity:1;fill-rule:evenodd;stroke:#878787;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20787"
inkscape:flatsided="false"
sodipodi:sides="5"
sodipodi:cx="253.53586"
sodipodi:cy="475.7128"
sodipodi:r1="6.5382366"
sodipodi:r2="3.2691183"
sodipodi:arg1="0.92625029"
sodipodi:arg2="1.5545688"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.25913575,0,0,0.26554446,16.457789,52.133726)"
inkscape:transform-center-x="0.0084975131"
inkscape:transform-center-y="-0.15749145"
d="m 257.46426,480.93929 -3.87535,-1.9578 -3.80979,2.08252 0.66442,-4.29068 -3.15788,-2.97979 4.286,-0.69398 1.8581,-3.92414 1.98447,3.86177 4.30626,0.55455 -3.05953,3.08069 z" />
<ellipse
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.321894;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22763-7-9"
cx="132.28929"
cy="176.2995"
rx="7.5017037"
ry="7.5529699" />
<ellipse
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.321894;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22763-7-9-3"
cx="98.275833"
cy="176.26273"
rx="7.5017037"
ry="7.5529699" />
<ellipse
style="fill:#2b2d2c;fill-opacity:1;fill-rule:evenodd;stroke:#494b4a;stroke-width:0.196709;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22763"
cx="98.186554"
cy="176.11659"
rx="4.5743561"
ry="4.6256218" />
<ellipse
style="fill:#2b2d2c;fill-opacity:1;fill-rule:evenodd;stroke:#494b4a;stroke-width:0.196709;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22763-7"
cx="132.3669"
cy="176.10999"
rx="4.5743561"
ry="4.6256218" />
<path
style="fill:#dee2e3;fill-opacity:1;stroke:#808485;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 106.49281,154.37963 h 17.1419 c 0,0 3.37915,-0.0671 3.78196,4.0505 0,0 -0.0895,3.58056 -3.67007,3.78196 0,0 -12.27824,0.17436 -17.3433,0 -1.61858,-0.0557 -3.08232,-0.80934 -3.37915,-3.49104 -0.0334,-0.30162 0.10737,-4.34142 3.46866,-4.34142 z"
id="path3952"
sodipodi:nodetypes="scccsss" />
<path
style="fill:#c7cdce;fill-opacity:1;stroke:#585a5c;stroke-width:0.230252px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 107.28182,154.99819 h 15.6903 c 0,0 3.09303,-0.0559 3.46173,3.3514 0,0 -0.0811,2.96249 -3.3593,3.12912 0,0 -11.23852,0.14425 -15.87467,0 -1.48151,-0.0459 -2.82131,-0.66965 -3.093,-2.88841 -0.0305,-0.24954 0.0983,-3.59211 3.17494,-3.59211 z"
id="path3952-5"
sodipodi:nodetypes="scccsss" />
<path
style="fill:#1c1c1c;fill-opacity:1;stroke:#000000;stroke-width:0.098103px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 106.65877,156.83709 h 6.15531 c 0,0 1.21338,-0.0256 1.35799,1.55082 0,0 -0.0318,1.37095 -1.3178,1.44806 h -6.22765 c 0,0 -1.00537,-0.0597 -1.21338,-1.33665 -7.3e-4,-0.005 0.0711,-1.66223 1.24553,-1.66223 z"
id="path3952-0"
sodipodi:nodetypes="sccccss" />
<path
style="fill:#1c1c1c;fill-opacity:1;stroke:#000000;stroke-width:0.098103px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 117.59877,156.87909 h 6.15534 c 0,0 1.21338,-0.0256 1.35799,1.55082 0,0 -0.0318,1.37095 -1.31781,1.44806 h -6.22766 c 0,0 -1.00538,-0.0597 -1.21339,-1.33665 -7.3e-4,-0.005 0.0711,-1.66223 1.24553,-1.66223 z"
id="path3952-0-9"
sodipodi:nodetypes="sccccss" />
<g
id="g9249"
style="display:inline"
transform="translate(13.443184,50.924023)">
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3-1"
width="0.62813497"
height="0.61520404"
x="133.0062"
y="127.10019" />
<rect
style="display:inline;fill:#000500;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-5"
width="0.62813497"
height="0.61520404"
x="135.43619"
y="126.30318" />
<rect
style="opacity:1;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444"
width="0.62813497"
height="0.61520404"
x="133.81619"
y="126.30305" />
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3"
width="0.62813497"
height="0.61520404"
x="134.62619"
y="127.10046" />
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3-8"
width="0.62813497"
height="0.61520404"
x="133.81619"
y="127.89919" />
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3-8-7"
width="0.62813497"
height="0.61520404"
x="135.43619"
y="127.89919" />
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3-8-7-1"
width="0.62813497"
height="0.61520404"
x="134.62569"
y="128.69618" />
<rect
style="display:inline;fill:#000000;fill-opacity:0.995951;fill-rule:evenodd;stroke:#000000;stroke-width:0.182376;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect6444-3-3"
width="0.62813497"
height="0.61520404"
x="136.24619"
y="127.10019" />
</g>
<g
id="g6077"
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-opacity:1"
transform="translate(13.443184,50.924023)">
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 121.88822,89.088626 c 4.53146,0.0172 9.0642,0.0017 13.59485,0.03934 3.90476,0.407978 7.80127,1.526875 11.2842,3.631613 -0.15051,-0.01254 0.1462,-1.334559 -0.13221,-1.503928 -4.18871,-2.548189 -7.25155,-3.159048 -11.15614,-3.477935 -4.39647,0.0089 -8.79293,0.01783 -13.1894,0.02675 -0.55433,0.15195 -0.41727,0.690839 -0.42805,1.115937 0.0201,0.0326 -0.0385,0.2017 0.0268,0.168226 z"
id="path4512"
sodipodi:nodetypes="cccsccccc" />
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 121.86147,88.920401 c 0.0379,0.03383 -0.006,0.08198 0.006,0.119377 0.006,0.01717 0.0143,0.03212 0.0204,0.04885"
id="path5039" />
</g>
<g
id="g6135"
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-opacity:1"
transform="translate(13.443184,50.924023)">
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;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"
sodipodi:nodetypes="cccsccccc" />
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;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" />
</g>
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 72.66044,135.11033 h 20.018404 c 0,0 0.943414,-0.29505 0.943414,-1.63404 0,-1.33899 -2.727232,-16.55099 -10.060707,-16.45189 -7.333474,0.0991 -11.396614,9.76144 -11.396614,9.76144 0,0 -4.156679,8.7413 0.495503,8.32449 z"
id="path23787"
sodipodi:nodetypes="ccsscc" />
<path
style="display:inline;fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 157.93008,135.11073 h -20.01841 c 0,0 -0.94341,-0.29505 -0.94341,-1.63404 0,-1.33899 2.72723,-16.551 10.06071,-16.45189 7.33347,0.0991 11.39661,9.76144 11.39661,9.76144 0,0 4.15668,8.7413 -0.4955,8.32449 z"
id="path23787-7"
sodipodi:nodetypes="ccsscc" />
<path
style="fill:#9146ff;fill-opacity:1;stroke:#6441a5;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 137.76162,186.92144 c 8.97641,3.57126 11.96854,14.092 11.96854,14.092 0.72399,0.36055 2.44349,19.29149 15.44329,16.21545 13.12051,-3.1046 10.03805,-23.93724 10.03813,-23.93709 0,0 -0.28956,-12.83724 -3.95734,-32.9135 -3.66778,-20.07627 -23.06841,-20.36583 -23.06841,-20.36583 l -66.623207,0.13269 c 0,0 -16.526533,1.28756 -21.145327,15.73357 -4.618793,14.44601 -5.341792,39.42972 -5.341792,39.42972 0,0 -2.263696,22.93222 14.074283,22.04643 0,0 7.399792,1.64038 11.436902,-15.51733 0,0 1.752955,-6.95871 7.118061,-11.79261 0,0 3.044694,-2.60874 4.629016,-3.19473 0,0 5.209655,2.98182 10.091914,0.6728 4.9917,-2.36078 5.68504,-4.7212 5.68504,-4.55323 h 14.26842 c 0,0 2.40802,3.84565 7.15218,5.03169 4.74415,1.18603 8.2303,-1.08003 8.2303,-1.08003 z"
id="path903"
sodipodi:nodetypes="ccscsccscccccsccsc" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="71.668724"
y="166.12009"
id="text3331"><tspan
sodipodi:role="line"
id="tspan3329"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
x="71.668724"
y="166.12009">DISCONNECTED</tspan></text>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
dpad.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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;
}
Display the source blob
Display the rendered blob
Raw
start-select.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
stick.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
trigger.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment