Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix controllers template style

Browse Source
This commit is contained in:
e7d 2019-05-07 15:22:27 +02:00
parent d14b45a138
commit 27ac451303
2 changed files with 96 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
templates/ds4/template.css
View File

@ -1,63 +1,63 @@
.gamepad { #gamepad {
background-image: url(base.svg); background-image: url(base.svg);
width: 806px; width: 806px;
height: 598px; height: 598px;
} }
.gamepad[data-color="white"] { #gamepad[data-color="white"] {
background-image: url(base-white.svg); background-image: url(base-white.svg);
} }
.gamepad[data-color="red"] { #gamepad[data-color="red"] {
background-image: url(base-red.svg); background-image: url(base-red.svg);
} }
.gamepad[data-color="blue"] { #gamepad[data-color="blue"] {
background-image: url(base-blue.svg); background-image: url(base-blue.svg);
} }
.gamepad.disconnected { #gamepad.disconnected {
background-image: url(disconnected.svg); background-image: url(disconnected.svg);
} }
.gamepad.disconnected div { #gamepad.disconnected div {
display: none; display: none;
} }
.gamepad .triggers { #gamepad .triggers {
width: 588px; width: 588px;
height: 90px; height: 90px;
position: absolute; position: absolute;
left: 109px; left: 109px;
} }
.gamepad .trigger { #gamepad .trigger {
width: 99px; width: 99px;
height: 100%; height: 100%;
background: url(triggers.svg); background: url(triggers.svg);
} }
.gamepad .trigger[data-value="0"] { #gamepad .trigger[data-value="0"] {
opacity: 0; opacity: 0;
} }
.gamepad .trigger.left { #gamepad .trigger.left {
float: left; float: left;
} }
.gamepad .trigger.right { #gamepad .trigger.right {
float: right; float: right;
background-position-x: 99px; background-position-x: 99px;
} }
.gamepad .bumper { #gamepad .bumper {
width: 99px; width: 99px;
height: 23px; height: 23px;
background: url(bumper.svg) no-repeat; background: url(bumper.svg) no-repeat;
opacity: 0; opacity: 0;
} }
.gamepad .bumpers { #gamepad .bumpers {
position: absolute; position: absolute;
width: 588px; width: 588px;
height: 23px; height: 23px;
@ -65,22 +65,22 @@
top: 94px; top: 94px;
} }
.gamepad .bumper[data-pressed="true"] { #gamepad .bumper[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
.gamepad .bumper.left { #gamepad .bumper.left {
/* -webkit-transform: rotateY(180deg); */ /* -webkit-transform: rotateY(180deg); */
/* transform: rotateY(180deg); */ /* transform: rotateY(180deg); */
float: left; float: left;
} }
.gamepad .bumper.right { #gamepad .bumper.right {
float: right; float: right;
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.gamepad .touchpad { #gamepad .touchpad {
width: 262px; width: 262px;
height: 151px; height: 151px;
position: absolute; position: absolute;
@ -88,11 +88,11 @@
top: 122px; top: 122px;
} }
.gamepad .touchpad[data-pressed="true"] { #gamepad .touchpad[data-pressed="true"] {
background: url(touchpad.svg) no-repeat center; background: url(touchpad.svg) no-repeat center;
} }
.gamepad .meta { #gamepad .meta {
width: 42px; width: 42px;
height: 42px; height: 42px;
position: absolute; position: absolute;
@ -100,11 +100,11 @@
bottom: 216px; bottom: 216px;
} }
.gamepad .meta[data-pressed="true"] { #gamepad .meta[data-pressed="true"] {
background: url(meta.svg) no-repeat center; background: url(meta.svg) no-repeat center;
} }
.gamepad .arrows { #gamepad .arrows {
position: absolute; position: absolute;
width: 352px; width: 352px;
height: 46px; height: 46px;
@ -112,29 +112,29 @@
left: 227px; left: 227px;
} }
.gamepad .select, #gamepad .select,
.gamepad .start { #gamepad .start {
background: url(start.svg); background: url(start.svg);
width: 28px; width: 28px;
height: 46px; height: 46px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], #gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] { #gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
.gamepad .select { #gamepad .select {
float: left; float: left;
} }
.gamepad .start { #gamepad .start {
float: right; float: right;
background-position: 28px 0; background-position: 28px 0;
} }
.gamepad .buttons { #gamepad .buttons {
position: absolute; position: absolute;
width: 170px; width: 170px;
height: 170px; height: 170px;
@ -142,40 +142,40 @@
left: 567px; left: 567px;
} }
.gamepad .button { #gamepad .button {
position: absolute; position: absolute;
width: 56px; width: 56px;
height: 56px; height: 56px;
background: url(buttons.svg); background: url(buttons.svg);
} }
.gamepad .button[data-pressed="true"] { #gamepad .button[data-pressed="true"] {
background-position-y: 56px; background-position-y: 56px;
} }
.gamepad .a { #gamepad .a {
background-position: 0 0; background-position: 0 0;
bottom: 0px; bottom: 0px;
left: 56px; left: 56px;
} }
.gamepad .b { #gamepad .b {
background-position: -56px 0; background-position: -56px 0;
top: 56px; top: 56px;
right: 0px; right: 0px;
} }
.gamepad .x { #gamepad .x {
background-position: 112px 0; background-position: 112px 0;
top: 56px; top: 56px;
} }
.gamepad .y { #gamepad .y {
background-position: 56px 0; background-position: 56px 0;
left: 56px; left: 56px;
} }
.gamepad .sticks { #gamepad .sticks {
position: absolute; position: absolute;
width: 361px; width: 361px;
height: 105px; height: 105px;
@ -183,32 +183,32 @@
left: 228px; left: 228px;
} }
.gamepad .stick { #gamepad .stick {
position: absolute; position: absolute;
background: url(sticks.svg); background: url(sticks.svg);
height: 94px; height: 94px;
width: 94px; width: 94px;
} }
.gamepad .stick[data-pressed="true"].left { #gamepad .stick[data-pressed="true"].left {
background-position-x: -96px; background-position-x: -96px;
} }
.gamepad .stick[data-pressed="true"].right { #gamepad .stick[data-pressed="true"].right {
background-position-x: -192px; background-position-x: -192px;
} }
.gamepad .stick.left { #gamepad .stick.left {
top: 0; top: 0;
left: 0; left: 0;
} }
.gamepad .stick.right { #gamepad .stick.right {
top: calc(100% - 105px); top: calc(100% - 105px);
left: calc(100% - 105px); left: calc(100% - 105px);
} }
.gamepad .dpad { #gamepad .dpad {
position: absolute; position: absolute;
width: 125px; width: 125px;
height: 126px; height: 126px;
@ -216,52 +216,52 @@
left: 92px; left: 92px;
} }
.gamepad .face { #gamepad .face {
background: url(dpad.svg); background: url(dpad.svg);
position: absolute; position: absolute;
} }
.gamepad .face.up, #gamepad .face.up,
.gamepad .face.down { #gamepad .face.down {
width: 36px; width: 36px;
height: 52px; height: 52px;
} }
.gamepad .face.left, #gamepad .face.left,
.gamepad .face.right { #gamepad .face.right {
width: 52px; width: 52px;
height: 36px; height: 36px;
} }
.gamepad .face.up { #gamepad .face.up {
left: 44px; left: 44px;
top: 0; top: 0;
background-position: -37px 0px; background-position: -37px 0px;
} }
.gamepad .face.down { #gamepad .face.down {
left: 44px; left: 44px;
bottom: 0; bottom: 0;
background-position: 0px 0; background-position: 0px 0;
} }
.gamepad .face.left { #gamepad .face.left {
top: 44px; top: 44px;
left: 0; left: 0;
background-position: 104px 0; background-position: 104px 0;
} }
.gamepad .face.right { #gamepad .face.right {
top: 44px; top: 44px;
right: 0px; right: 0px;
background-position: 52px 0; background-position: 52px 0;
} }
.gamepad .face[data-pressed="true"] { #gamepad .face[data-pressed="true"] {
/* margin-top: 5px; */ /* margin-top: 5px; */
background-position-y: 52px; background-position-y: 52px;
} }
.gamepad.half { #gamepad.half {
margin-top: -300px; margin-top: -300px;
} }

88
templates/xbox-one/template.css
View File

@ -1,57 +1,57 @@
.gamepad { #gamepad {
background-image: url(base.svg); background-image: url(base.svg);
height: 630px; height: 630px;
width: 750px; width: 750px;
} }
.gamepad[data-color="white"] { #gamepad[data-color="white"] {
background-image: url(base-white.svg); background-image: url(base-white.svg);
} }
.gamepad.disconnected { #gamepad.disconnected {
background-image: url(disconnected.svg); background-image: url(disconnected.svg);
} }
.gamepad.disconnected div { #gamepad.disconnected div {
display: none; display: none;
} }
.gamepad .triggers { #gamepad .triggers {
width: 448px; width: 448px;
height: 122px; height: 122px;
position: absolute; position: absolute;
left: 151px; left: 151px;
} }
.gamepad .trigger { #gamepad .trigger {
width: 89px; width: 89px;
height: 122px; height: 122px;
background: url(trigger.svg); background: url(trigger.svg);
opacity: 1; opacity: 1;
} }
.gamepad .trigger[data-value="0"] { #gamepad .trigger[data-value="0"] {
opacity: 0; opacity: 0;
} }
.gamepad .trigger.left { #gamepad .trigger.left {
float: left; float: left;
background-position: 0 0; background-position: 0 0;
} }
.gamepad .trigger.right { #gamepad .trigger.right {
float: right; float: right;
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.gamepad .bumper { #gamepad .bumper {
width: 170px; width: 170px;
height: 61px; height: 61px;
background: url(bumper.svg); background: url(bumper.svg);
opacity: 0; opacity: 0;
} }
.gamepad .bumpers { #gamepad .bumpers {
position: absolute; position: absolute;
width: 536px; width: 536px;
height: 61px; height: 61px;
@ -59,41 +59,41 @@
top: 129px; top: 129px;
} }
.gamepad .bumper[data-pressed="true"] { #gamepad .bumper[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
.gamepad .bumper.left { #gamepad .bumper.left {
float: left; float: left;
} }
.gamepad .bumper.right { #gamepad .bumper.right {
float: right; float: right;
-webkit-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.gamepad .p0 { #gamepad .p0 {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
.gamepad .p1 { #gamepad .p1 {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
} }
.gamepad .p2 { #gamepad .p2 {
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
transform: rotate(270deg); transform: rotate(270deg);
} }
.gamepad .p3 { #gamepad .p3 {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
} }
.gamepad .arrows { #gamepad .arrows {
position: absolute; position: absolute;
width: 141px; width: 141px;
height: 33px; height: 33px;
@ -101,29 +101,29 @@
left: 306px; left: 306px;
} }
.gamepad .select, #gamepad .select,
.gamepad .start { #gamepad .start {
background: url(start-select.svg); background: url(start-select.svg);
width: 33px; width: 33px;
height: 33px; height: 33px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], #gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] { #gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
.gamepad .select { #gamepad .select {
float: left; float: left;
} }
.gamepad .start { #gamepad .start {
background-position: 33px 0px; background-position: 33px 0px;
float: right; float: right;
} }
.gamepad .buttons { #gamepad .buttons {
position: absolute; position: absolute;
width: 155px; width: 155px;
height: 156px; height: 156px;
@ -131,7 +131,7 @@
left: 489px; left: 489px;
} }
.gamepad .button { #gamepad .button {
position: absolute; position: absolute;
background: url(buttons.svg); background: url(buttons.svg);
width: 53px; width: 53px;
@ -139,36 +139,36 @@
/* display: none; */ /* display: none; */
} }
.gamepad .button[data-pressed="true"] { #gamepad .button[data-pressed="true"] {
background-position-y: -53px; background-position-y: -53px;
opacity: 1; opacity: 1;
} }
.gamepad .a { #gamepad .a {
background-position: 0 0; background-position: 0 0;
top: 102px; top: 102px;
left: 51px; left: 51px;
} }
.gamepad .b { #gamepad .b {
background-position: -53px 0; background-position: -53px 0;
top: 52px; top: 52px;
right: 1px; right: 1px;
} }
.gamepad .x { #gamepad .x {
background-position: -106px 0; background-position: -106px 0;
top: 52px; top: 52px;
left: 1px; left: 1px;
} }
.gamepad .y { #gamepad .y {
background-position: -159px 0; background-position: -159px 0;
top: 1px; top: 1px;
left: 51px; left: 51px;
} }
.gamepad .sticks { #gamepad .sticks {
position: absolute; position: absolute;
width: 371px; width: 371px;
height: 196px; height: 196px;
@ -176,7 +176,7 @@
left: 144px; left: 144px;
} }
.gamepad .stick { #gamepad .stick {
position: absolute; position: absolute;
background: url(stick.svg); background: url(stick.svg);
background-position: -85px 0; background-position: -85px 0;
@ -184,21 +184,21 @@
width: 83px; width: 83px;
} }
.gamepad .stick[data-pressed="true"] { #gamepad .stick[data-pressed="true"] {
background-position: 0 0; background-position: 0 0;
} }
.gamepad .stick.left { #gamepad .stick.left {
top: 0; top: 0;
left: 0; left: 0;
} }
.gamepad .stick.right { #gamepad .stick.right {
top: 113px; top: 113px;
left: 288px; left: 288px;
} }
.gamepad .dpad { #gamepad .dpad {
position: absolute; position: absolute;
width: 110px; width: 110px;
height: 111px; height: 111px;
@ -206,17 +206,17 @@
left: 223px; left: 223px;
} }
.gamepad .face { #gamepad .face {
background: url(dpad.svg); background: url(dpad.svg);
position: absolute; position: absolute;
opacity: 0; opacity: 0;
} }
.gamepad .face[data-pressed="true"] { #gamepad .face[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
.gamepad .face.up { #gamepad .face.up {
background-position: 35px 0; background-position: 35px 0;
left: 38px; left: 38px;
top: 1px; top: 1px;
@ -224,14 +224,14 @@
height: 56px; height: 56px;
} }
.gamepad .face.down { #gamepad .face.down {
left: 38px; left: 38px;
bottom: 0; bottom: 0;
width: 34px; width: 34px;
height: 56px; height: 56px;
} }
.gamepad .face.left { #gamepad .face.left {
background-position: 0 -93px; background-position: 0 -93px;
width: 56px; width: 56px;
height: 34px; height: 34px;
@ -239,7 +239,7 @@
left: 0; left: 0;
} }
.gamepad .face.right { #gamepad .face.right {
background-position: 0 -57px; background-position: 0 -57px;
width: 56px; width: 56px;
height: 34px; height: 34px;