Last active
February 6, 2024 13:41
-
-
Save JotaGo/84e9c728a259d4b40e9fe969ae1aec00 to your computer and use it in GitHub Desktop.
8bitdo-pro2-skin-gamepadviewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
theme: jekyll-theme-midnight |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment