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
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
dpad.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="39.760868mm"
height="18.928755mm"
viewBox="0 0 39.760868 18.928755"
version="1.1"
id="svg980"
sodipodi:docname="dpad.svg"
inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
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="namedview982"
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.4548477"
inkscape:cx="64.989914"
inkscape:cy="71.806496"
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="defs977">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1818">
<path
sodipodi:type="star"
style="fill:#235179;fill-opacity:0;fill-rule:evenodd;stroke:#00ff01;stroke-opacity:1"
id="path1820"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="399.0799"
sodipodi:cy="571.35352"
sodipodi:r1="30.59157"
sodipodi:r2="15.295785"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 399.0799,601.94509 -26.49308,-45.88736 52.98615,0 z"
transform="matrix(0.43809658,0,0,0.26458333,-61.246591,4.508885)"
inkscape:transform-center-x="3.1061748e-06"
inkscape:transform-center-y="2.0235029" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1818-8">
<path
sodipodi:type="star"
style="fill:#235179;fill-opacity:0;fill-rule:evenodd;stroke:#00ff01;stroke-opacity:1"
id="path1820-3"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="399.0799"
sodipodi:cy="571.35352"
sodipodi:r1="30.59157"
sodipodi:r2="15.295785"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.43809658,0,0,0.26458333,-61.246591,4.508885)"
inkscape:transform-center-x="3.1061748e-06"
inkscape:transform-center-y="2.0235029"
d="m 399.0799,601.94509 -26.49308,-45.88736 52.98615,0 z" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1818-8-4">
<path
sodipodi:type="star"
style="fill:#235179;fill-opacity:0;fill-rule:evenodd;stroke:#00ff01;stroke-opacity:1"
id="path1820-3-8"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="399.0799"
sodipodi:cy="571.35352"
sodipodi:r1="30.59157"
sodipodi:r2="15.295785"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.43809658,0,0,0.26458333,-61.246591,4.508885)"
inkscape:transform-center-x="3.1061748e-06"
inkscape:transform-center-y="2.0235029"
d="m 399.0799,601.94509 -26.49308,-45.88736 52.98615,0 z" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1818-8-4-5">
<path
sodipodi:type="star"
style="fill:#235179;fill-opacity:0;fill-rule:evenodd;stroke:#00ff01;stroke-opacity:1"
id="path1820-3-8-5"
inkscape:flatsided="true"
sodipodi:sides="3"
sodipodi:cx="399.0799"
sodipodi:cy="571.35352"
sodipodi:r1="30.59157"
sodipodi:r2="15.295785"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:rounded="0"
inkscape:randomized="0"
transform="matrix(0.43809658,0,0,0.26458333,-61.246591,4.508885)"
inkscape:transform-center-x="3.1061748e-06"
inkscape:transform-center-y="2.0235029"
d="m 399.0799,601.94509 -26.49308,-45.88736 52.98615,0 z" />
</clipPath>
</defs>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-104.1309,-149.224)">
<g
id="g1816"
clip-path="url(#clipPath1818)"
transform="translate(-2.6458334)">
<path
style="fill:#fdfdfd;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.770161"
d="m 111.17773,154.19226 h 4.68493 c 0,0 0.73468,-0.0426 0.73468,0.73469 0,0.77727 0,5.015 0,5.015 0,0 0.0106,0.59626 0.62821,0.59626 0.61756,0 4.834,0 4.834,0 0,0 0.86245,-0.0213 0.86245,0.86246 0,0.88375 0,4.41874 0,4.41874 0,0 0.10648,0.65483 -0.65482,0.65483 -0.7613,0 -4.99904,0 -4.99904,0 0,0 -0.72669,0.29813 -0.72669,0.72669 0,0.42857 0,5.0922 0,5.0922 0,0 0.0639,0.66947 -0.66947,0.66947 -0.73335,0 -4.56648,0 -4.56648,0 0,0 -0.77128,-0.21295 -0.77128,-0.77128 0,-0.55834 0,-5.07291 0,-5.07291 0,0 0.0639,-0.60458 -0.60458,-0.60458 -0.66847,0 -5.11916,0 -5.11916,0 0,0 -0.54729,0.0763 -0.54729,-0.94794 0,-1.02419 0,-4.30364 0,-4.30364 0,0 0.0639,-0.81667 0.81667,-0.81667 0.75279,0 4.82016,0 4.82016,0 0,0 0.688,0.0925 0.688,-0.39722 0,-0.48972 0,-5.23854 0,-5.23854 0,0 0.22769,-0.61756 0.58971,-0.61756 z"
id="path20560" />
<ellipse
style="fill:#fdfdfd;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.251382;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20683"
cx="113.60538"
cy="163.55147"
rx="2.2202992"
ry="2.2309468" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;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,44.648701,57.834339)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;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,44.598629,268.98138)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;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,218.96512,94.483054)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;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,8.099919,232.49683)"
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" />
</g>
<g
id="g1816-6"
clip-path="url(#clipPath1818-8)"
transform="matrix(1,0,0,-1,4.352268,317.83252)">
<path
style="fill:#fdfdfd;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.770161"
d="m 111.17773,154.19226 h 4.68493 c 0,0 0.73468,-0.0426 0.73468,0.73469 0,0.77727 0,5.015 0,5.015 0,0 0.0106,0.59626 0.62821,0.59626 0.61756,0 4.834,0 4.834,0 0,0 0.86245,-0.0213 0.86245,0.86246 0,0.88375 0,4.41874 0,4.41874 0,0 0.10648,0.65483 -0.65482,0.65483 -0.7613,0 -4.99904,0 -4.99904,0 0,0 -0.72669,0.29813 -0.72669,0.72669 0,0.42857 0,5.0922 0,5.0922 0,0 0.0639,0.66947 -0.66947,0.66947 -0.73335,0 -4.56648,0 -4.56648,0 0,0 -0.77128,-0.21295 -0.77128,-0.77128 0,-0.55834 0,-5.07291 0,-5.07291 0,0 0.0639,-0.60458 -0.60458,-0.60458 -0.66847,0 -5.11916,0 -5.11916,0 0,0 -0.54729,0.0763 -0.54729,-0.94794 0,-1.02419 0,-4.30364 0,-4.30364 0,0 0.0639,-0.81667 0.81667,-0.81667 0.75279,0 4.82016,0 4.82016,0 0,0 0.688,0.0925 0.688,-0.39722 0,-0.48972 0,-5.23854 0,-5.23854 0,0 0.22769,-0.61756 0.58971,-0.61756 z"
id="path20560-8" />
<ellipse
style="fill:#fdfdfd;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.251382;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20683-8"
cx="113.60538"
cy="163.55147"
rx="2.2202992"
ry="2.2309468" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-3"
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,44.648701,57.834339)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-8-9"
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,44.598629,268.98138)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-1-4"
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,218.96512,94.483054)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-80-2"
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,8.099919,232.49683)"
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" />
</g>
<g
id="g1816-6-7"
clip-path="url(#clipPath1818-8-4)"
transform="matrix(0,1,1,0,-32.527319,45.093101)">
<path
style="fill:#fdfdfd;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.770161"
d="m 111.17773,154.19226 h 4.68493 c 0,0 0.73468,-0.0426 0.73468,0.73469 0,0.77727 0,5.015 0,5.015 0,0 0.0106,0.59626 0.62821,0.59626 0.61756,0 4.834,0 4.834,0 0,0 0.86245,-0.0213 0.86245,0.86246 0,0.88375 0,4.41874 0,4.41874 0,0 0.10648,0.65483 -0.65482,0.65483 -0.7613,0 -4.99904,0 -4.99904,0 0,0 -0.72669,0.29813 -0.72669,0.72669 0,0.42857 0,5.0922 0,5.0922 0,0 0.0639,0.66947 -0.66947,0.66947 -0.73335,0 -4.56648,0 -4.56648,0 0,0 -0.77128,-0.21295 -0.77128,-0.77128 0,-0.55834 0,-5.07291 0,-5.07291 0,0 0.0639,-0.60458 -0.60458,-0.60458 -0.66847,0 -5.11916,0 -5.11916,0 0,0 -0.54729,0.0763 -0.54729,-0.94794 0,-1.02419 0,-4.30364 0,-4.30364 0,0 0.0639,-0.81667 0.81667,-0.81667 0.75279,0 4.82016,0 4.82016,0 0,0 0.688,0.0925 0.688,-0.39722 0,-0.48972 0,-5.23854 0,-5.23854 0,0 0.22769,-0.61756 0.58971,-0.61756 z"
id="path20560-8-4" />
<ellipse
style="fill:#fdfdfd;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.251382;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20683-8-3"
cx="113.60538"
cy="163.55147"
rx="2.2202992"
ry="2.2309468" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-3-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,44.648701,57.834339)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-8-9-3"
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,44.598629,268.98138)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-1-4-6"
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,218.96512,94.483054)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-80-2-7"
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,8.099919,232.49683)"
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" />
</g>
<g
id="g1816-6-7-8"
clip-path="url(#clipPath1818-8-4-5)"
transform="rotate(90,125.10617,170.19928)">
<path
style="fill:#fdfdfd;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.770161"
d="m 111.17773,154.19226 h 4.68493 c 0,0 0.73468,-0.0426 0.73468,0.73469 0,0.77727 0,5.015 0,5.015 0,0 0.0106,0.59626 0.62821,0.59626 0.61756,0 4.834,0 4.834,0 0,0 0.86245,-0.0213 0.86245,0.86246 0,0.88375 0,4.41874 0,4.41874 0,0 0.10648,0.65483 -0.65482,0.65483 -0.7613,0 -4.99904,0 -4.99904,0 0,0 -0.72669,0.29813 -0.72669,0.72669 0,0.42857 0,5.0922 0,5.0922 0,0 0.0639,0.66947 -0.66947,0.66947 -0.73335,0 -4.56648,0 -4.56648,0 0,0 -0.77128,-0.21295 -0.77128,-0.77128 0,-0.55834 0,-5.07291 0,-5.07291 0,0 0.0639,-0.60458 -0.60458,-0.60458 -0.66847,0 -5.11916,0 -5.11916,0 0,0 -0.54729,0.0763 -0.54729,-0.94794 0,-1.02419 0,-4.30364 0,-4.30364 0,0 0.0639,-0.81667 0.81667,-0.81667 0.75279,0 4.82016,0 4.82016,0 0,0 0.688,0.0925 0.688,-0.39722 0,-0.48972 0,-5.23854 0,-5.23854 0,0 0.22769,-0.61756 0.58971,-0.61756 z"
id="path20560-8-4-8" />
<ellipse
style="fill:#fdfdfd;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.251382;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path20683-8-3-3"
cx="113.60538"
cy="163.55147"
rx="2.2202992"
ry="2.2309468" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-3-8-9"
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,44.648701,57.834339)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-8-9-3-3"
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,44.598629,268.98138)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-1-4-6-4"
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,218.96512,94.483054)"
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:#9c9b96;fill-opacity:1;fill-rule:evenodd;stroke:#b4b0ad;stroke-width:0.831496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path22618-80-2-7-5"
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,8.099919,232.49683)"
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" />
</g>
</g>
</svg>
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