first commit
This commit is contained in:
Khyretos
commit
2f3d181471
19 changed files with 1128 additions and 0 deletions
BIN
Black_SkinNo_Buttons.png
Normal file
BIN
Black_SkinNo_Buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
Bumper.png
Normal file
BIN
Bumper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
Dpad.png
Normal file
BIN
Dpad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
FaceButtons.png
Normal file
BIN
FaceButtons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Home.png
Normal file
BIN
Home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
287
PS5_Black.css
Normal file
287
PS5_Black.css
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
/*BEGIN PS4 Controller Styling*/
|
||||
.controller.ds4 {
|
||||
background: url(Black_SkinNo_Buttons.png);
|
||||
height: 700px;
|
||||
width: 1200px;
|
||||
/* margin-left: -403px;
|
||||
margin-top: -280px;*/
|
||||
}
|
||||
|
||||
.ds4.disconnected div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ds4 .triggers {
|
||||
width: 598px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
left: 299px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
.ds4 .trigger {
|
||||
width: 99px;
|
||||
height: 100%;
|
||||
background: url(Trigger_Pressed.png);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .trigger.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .trigger.right {
|
||||
float: right;
|
||||
background-position-x: 99px;
|
||||
}
|
||||
|
||||
.ds4 .bumper {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
background: url(Bumper.png) no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .bumpers {
|
||||
position: absolute;
|
||||
width: 672px;
|
||||
height: 23px;
|
||||
left: 263px;
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.ds4 .bumper.pressed {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ds4 .bumper.left {
|
||||
/* -webkit-transform: rotateY(180deg); */
|
||||
/* transform: rotateY(180deg); */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .bumper.right {
|
||||
float: right;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.ds4 .touchpad {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 422px;
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.ds4 .touchpad.pressed {
|
||||
background: url(Touchpad.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .meta {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: 264px;
|
||||
}
|
||||
|
||||
.ds4 .meta.pressed {
|
||||
background: url(Home.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .p0{
|
||||
background-position: 0 -6px;
|
||||
}
|
||||
.ds4 .p1{
|
||||
background-position: 0 -28px;
|
||||
}
|
||||
.ds4 .p2{
|
||||
background-position: 0 -49px;
|
||||
}
|
||||
.ds4 .p3{
|
||||
background-position: 0 -70px;
|
||||
}*/
|
||||
.ds4 .arrows {
|
||||
position: absolute;
|
||||
width: 352px;
|
||||
height: 46px;
|
||||
top: 142px;
|
||||
left: 227px;
|
||||
}
|
||||
|
||||
.ds4 .back, .ds4 .start {
|
||||
background: url(Select.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
opacity: 0;
|
||||
}
|
||||
.ds4 .start {
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: -30px;
|
||||
}
|
||||
.ds4 .back {
|
||||
position: absolute;
|
||||
left: 170px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
|
||||
.ds4 .back.pressed, .ds4 .start.pressed {
|
||||
/* background-position-y: -21px; */
|
||||
/* margin-top: 2px; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ds4 .back {
|
||||
float: left;
|
||||
/* width: 28px; */
|
||||
}
|
||||
|
||||
.ds4 .start {
|
||||
float: right;
|
||||
/* width: 28px; */
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .abxy {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 171px;
|
||||
top: 200px;
|
||||
left: 762px;
|
||||
}
|
||||
|
||||
.ds4 .button {
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
background: url(FaceButtons.png);
|
||||
}
|
||||
|
||||
.ds4 .button.pressed {
|
||||
background-position-y: 55px;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.ds4 .a {
|
||||
background-position: 0 0;
|
||||
bottom: 0px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.ds4 .b {
|
||||
background-position: -57px 0;
|
||||
top: 57px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.ds4 .x {
|
||||
background-position: -113px 0;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
.ds4 .y {
|
||||
background-position: 55px 0;
|
||||
left: 58px;
|
||||
bottom: 119px;
|
||||
}
|
||||
|
||||
.ds4 .sticks {
|
||||
position: absolute;
|
||||
width: 364px;
|
||||
height: 105px;
|
||||
top: 348px;
|
||||
left: 422px;
|
||||
}
|
||||
|
||||
.ds4 .stick {
|
||||
position: absolute;
|
||||
background: url(Sticks.png);
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.left {
|
||||
background-position-x: -96px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.right {
|
||||
background-position-x: -192px;
|
||||
}
|
||||
|
||||
.ds4 .stick.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ds4 .stick.right {
|
||||
top: calc(100% - 105px);
|
||||
left: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.ds4 .dpad {
|
||||
position: absolute;
|
||||
width: 125px;
|
||||
height: 126px;
|
||||
top: 220px;
|
||||
left: 286px;
|
||||
}
|
||||
|
||||
.ds4 .face {
|
||||
background: url(Dpad.png);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ds4 .face.up, .ds4 .face.down {
|
||||
width: 37px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.ds4 .face.left, .ds4 .face.right {
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ds4 .face.up {
|
||||
left: 44px;
|
||||
top: 0;
|
||||
background-position: -37px 0px;
|
||||
}
|
||||
|
||||
.ds4 .face.down {
|
||||
left: 44px;
|
||||
bottom: 0;
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.left {
|
||||
top: 45px;
|
||||
left: 0;
|
||||
background-position: 104px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.right {
|
||||
top: 45px;
|
||||
right: 0px;
|
||||
background-position: 52px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.pressed {
|
||||
/* margin-top: 5px; */
|
||||
background-position-y: 52px;
|
||||
}
|
||||
|
||||
.ds4.half {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
/*END PS4 Controller Styling*/
|
||||
|
||||
.ds4.white .back, .ds4 .start {
|
||||
background-image: url(Start.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
/*END PS4 White Controller Styling*/
|
||||
277
PS5_Classic.css
Normal file
277
PS5_Classic.css
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
/*BEGIN PS4 Controller Styling*/
|
||||
.controller.ds4 {
|
||||
background: url(White_Skin.png);
|
||||
height: 700px;
|
||||
width: 1200px;
|
||||
/* margin-left: -403px;
|
||||
margin-top: -280px;*/
|
||||
}
|
||||
|
||||
.ds4.disconnected div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ds4 .triggers {
|
||||
width: 598px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
left: 299px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
.ds4 .trigger {
|
||||
width: 99px;
|
||||
height: 100%;
|
||||
background: url(Trigger_Pressed.png);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .trigger.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .trigger.right {
|
||||
float: right;
|
||||
background-position-x: 99px;
|
||||
}
|
||||
|
||||
.ds4 .bumper {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
background: url(Bumper.png) no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .bumpers {
|
||||
position: absolute;
|
||||
width: 672px;
|
||||
height: 23px;
|
||||
left: 263px;
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.ds4 .bumper.pressed {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ds4 .bumper.left {
|
||||
/* -webkit-transform: rotateY(180deg); */
|
||||
/* transform: rotateY(180deg); */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .bumper.right {
|
||||
float: right;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.ds4 .touchpad {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 422px;
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.ds4 .touchpad.pressed {
|
||||
background: url(Touchpad.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .meta {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: 264px;
|
||||
}
|
||||
|
||||
.ds4 .meta.pressed {
|
||||
background: url(Home.png) no-repeat center;
|
||||
}
|
||||
|
||||
/*Not needed, but I like keeping them here for posterity*/
|
||||
.ds4 .p0{
|
||||
background-position: 0 -6px;
|
||||
}
|
||||
.ds4 .p1{
|
||||
background-position: 0 -28px;
|
||||
}
|
||||
.ds4 .p2{
|
||||
background-position: 0 -49px;
|
||||
}
|
||||
.ds4 .p3{
|
||||
background-position: 0 -70px;
|
||||
}*/
|
||||
.ds4 .arrows {
|
||||
position: absolute;
|
||||
width: 352px;
|
||||
height: 46px;
|
||||
top: 142px;
|
||||
left: 227px;
|
||||
}
|
||||
|
||||
.ds4 .back, .ds4 .start {
|
||||
background: url(Select.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
opacity: 0;
|
||||
}
|
||||
.ds4 .start {
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: -30px;
|
||||
}
|
||||
.ds4 .back {
|
||||
position: absolute;
|
||||
left: 170px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
|
||||
.ds4 .back.pressed, .ds4 .start.pressed {
|
||||
/* background-position-y: -21px; */
|
||||
/* margin-top: 2px; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ds4 .back {
|
||||
float: left;
|
||||
/* width: 28px; */
|
||||
}
|
||||
|
||||
.ds4 .start {
|
||||
float: right;
|
||||
/* width: 28px; */
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .abxy {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 171px;
|
||||
top: 200px;
|
||||
left: 762px;
|
||||
}
|
||||
|
||||
.ds4 .button.pressed {
|
||||
background-position-y: 55px;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.ds4 .a {
|
||||
background-position: 0 0;
|
||||
bottom: 0px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.ds4 .b {
|
||||
background-position: -57px 0;
|
||||
top: 57px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.ds4 .x {
|
||||
background-position: -113px 0;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
.ds4 .y {
|
||||
background-position: 55px 0;
|
||||
left: 58px;
|
||||
bottom: 119px;
|
||||
}
|
||||
|
||||
.ds4 .sticks {
|
||||
position: absolute;
|
||||
width: 364px;
|
||||
height: 105px;
|
||||
top: 348px;
|
||||
left: 422px;
|
||||
}
|
||||
|
||||
.ds4 .stick {
|
||||
position: absolute;
|
||||
background: url(Sticks.png);
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.left {
|
||||
background-position-x: -96px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.right {
|
||||
background-position-x: -192px;
|
||||
}
|
||||
|
||||
.ds4 .stick.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ds4 .stick.right {
|
||||
top: calc(100% - 105px);
|
||||
left: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.ds4 .dpad {
|
||||
position: absolute;
|
||||
width: 125px;
|
||||
height: 126px;
|
||||
top: 220px;
|
||||
left: 286px;
|
||||
}
|
||||
|
||||
.ds4 .face.up, .ds4 .face.down {
|
||||
width: 36px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.ds4 .face.left, .ds4 .face.right {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.ds4 .face.up {
|
||||
left: 44px;
|
||||
top: 0;
|
||||
background-position: -37px 0px;
|
||||
}
|
||||
|
||||
.ds4 .face.down {
|
||||
left: 44px;
|
||||
bottom: 0;
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.left {
|
||||
top: 45px;
|
||||
left: 0;
|
||||
background-position: 104px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.right {
|
||||
top: 45px;
|
||||
right: 0px;
|
||||
background-position: 52px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.pressed {
|
||||
/* margin-top: 5px; */
|
||||
background-position-y: 52px;
|
||||
}
|
||||
|
||||
.ds4.half {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
/*END PS4 Controller Styling*/
|
||||
|
||||
/*BEGIN PS4 White Controller Styling*/
|
||||
.ds4.white .back, .ds4 .start {
|
||||
background-image: url(Start.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
/*END PS4 White Controller Styling*/
|
||||
277
PS5_Classic_Black.css
Normal file
277
PS5_Classic_Black.css
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
/*BEGIN PS4 Controller Styling*/
|
||||
.controller.ds4 {
|
||||
background: url(Black_SkinNo_Buttons.png);
|
||||
height: 700px;
|
||||
width: 1200px;
|
||||
/* margin-left: -403px;
|
||||
margin-top: -280px;*/
|
||||
}
|
||||
-
|
||||
.ds4.disconnected div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ds4 .triggers {
|
||||
width: 598px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
left: 299px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
.ds4 .trigger {
|
||||
width: 99px;
|
||||
height: 100%;
|
||||
background: url(Trigger_Pressed.png);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .trigger.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .trigger.right {
|
||||
float: right;
|
||||
background-position-x: 99px;
|
||||
}
|
||||
|
||||
.ds4 .bumper {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
background: url(Bumper.png) no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .bumpers {
|
||||
position: absolute;
|
||||
width: 672px;
|
||||
height: 23px;
|
||||
left: 263px;
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.ds4 .bumper.pressed {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ds4 .bumper.left {
|
||||
/* -webkit-transform: rotateY(180deg); */
|
||||
/* transform: rotateY(180deg); */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .bumper.right {
|
||||
float: right;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.ds4 .touchpad {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 422px;
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.ds4 .touchpad.pressed {
|
||||
background: url(Touchpad.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .meta {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: 264px;
|
||||
}
|
||||
|
||||
.ds4 .meta.pressed {
|
||||
background: url(Home.png) no-repeat center;
|
||||
}
|
||||
|
||||
/*Not needed, but I like keeping them here for posterity*/
|
||||
.ds4 .p0{
|
||||
background-position: 0 -6px;
|
||||
}
|
||||
.ds4 .p1{
|
||||
background-position: 0 -28px;
|
||||
}
|
||||
.ds4 .p2{
|
||||
background-position: 0 -49px;
|
||||
}
|
||||
.ds4 .p3{
|
||||
background-position: 0 -70px;
|
||||
}*/
|
||||
.ds4 .arrows {
|
||||
position: absolute;
|
||||
width: 352px;
|
||||
height: 46px;
|
||||
top: 142px;
|
||||
left: 227px;
|
||||
}
|
||||
|
||||
.ds4 .back, .ds4 .start {
|
||||
background: url(Select.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
opacity: 0;
|
||||
}
|
||||
.ds4 .start {
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: -30px;
|
||||
}
|
||||
.ds4 .back {
|
||||
position: absolute;
|
||||
left: 170px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
|
||||
.ds4 .back.pressed, .ds4 .start.pressed {
|
||||
/* background-position-y: -21px; */
|
||||
/* margin-top: 2px; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ds4 .back {
|
||||
float: left;
|
||||
/* width: 28px; */
|
||||
}
|
||||
|
||||
.ds4 .start {
|
||||
float: right;
|
||||
/* width: 28px; */
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .abxy {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 171px;
|
||||
top: 200px;
|
||||
left: 762px;
|
||||
}
|
||||
|
||||
.ds4 .button.pressed {
|
||||
background-position-y: 55px;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.ds4 .a {
|
||||
background-position: 0 0;
|
||||
bottom: 0px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.ds4 .b {
|
||||
background-position: -57px 0;
|
||||
top: 57px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.ds4 .x {
|
||||
background-position: -113px 0;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
.ds4 .y {
|
||||
background-position: 55px 0;
|
||||
left: 58px;
|
||||
bottom: 119px;
|
||||
}
|
||||
|
||||
.ds4 .sticks {
|
||||
position: absolute;
|
||||
width: 364px;
|
||||
height: 105px;
|
||||
top: 348px;
|
||||
left: 422px;
|
||||
}
|
||||
|
||||
.ds4 .stick {
|
||||
position: absolute;
|
||||
background: url(Sticks.png);
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.left {
|
||||
background-position-x: -96px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.right {
|
||||
background-position-x: -192px;
|
||||
}
|
||||
|
||||
.ds4 .stick.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ds4 .stick.right {
|
||||
top: calc(100% - 105px);
|
||||
left: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.ds4 .dpad {
|
||||
position: absolute;
|
||||
width: 125px;
|
||||
height: 126px;
|
||||
top: 220px;
|
||||
left: 286px;
|
||||
}
|
||||
|
||||
.ds4 .face.up, .ds4 .face.down {
|
||||
width: 36px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.ds4 .face.left, .ds4 .face.right {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.ds4 .face.up {
|
||||
left: 44px;
|
||||
top: 0;
|
||||
background-position: -37px 0px;
|
||||
}
|
||||
|
||||
.ds4 .face.down {
|
||||
left: 44px;
|
||||
bottom: 0;
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.left {
|
||||
top: 45px;
|
||||
left: 0;
|
||||
background-position: 104px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.right {
|
||||
top: 45px;
|
||||
right: 0px;
|
||||
background-position: 52px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.pressed {
|
||||
/* margin-top: 5px; */
|
||||
background-position-y: 52px;
|
||||
}
|
||||
|
||||
.ds4.half {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
/*END PS4 Controller Styling*/
|
||||
|
||||
/*BEGIN PS4 White Controller Styling*/
|
||||
.ds4.white .back, .ds4 .start {
|
||||
background-image: url(Start.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
/*END PS4 White Controller Styling*/
|
||||
287
PS5_White.css
Normal file
287
PS5_White.css
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
/*BEGIN PS4 Controller Styling*/
|
||||
.controller.ds4 {
|
||||
background: url(White_SkinNo_Buttons.png);
|
||||
height: 700px;
|
||||
width: 1200px;
|
||||
/* margin-left: -403px;
|
||||
margin-top: -280px;*/
|
||||
}
|
||||
|
||||
.ds4.disconnected div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ds4 .triggers {
|
||||
width: 598px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
left: 299px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
.ds4 .trigger {
|
||||
width: 99px;
|
||||
height: 100%;
|
||||
background: url(Trigger_Pressed.png);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .trigger.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .trigger.right {
|
||||
float: right;
|
||||
background-position-x: 99px;
|
||||
}
|
||||
|
||||
.ds4 .bumper {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
background: url(Bumper.png) no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ds4 .bumpers {
|
||||
position: absolute;
|
||||
width: 672px;
|
||||
height: 23px;
|
||||
left: 263px;
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.ds4 .bumper.pressed {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ds4 .bumper.left {
|
||||
/* -webkit-transform: rotateY(180deg); */
|
||||
/* transform: rotateY(180deg); */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ds4 .bumper.right {
|
||||
float: right;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.ds4 .touchpad {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 422px;
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.ds4 .touchpad.pressed {
|
||||
background: url(Touchpad.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .meta {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: 264px;
|
||||
}
|
||||
|
||||
.ds4 .meta.pressed {
|
||||
background: url(Home.png) no-repeat center;
|
||||
}
|
||||
|
||||
.ds4 .p0{
|
||||
background-position: 0 -6px;
|
||||
}
|
||||
.ds4 .p1{
|
||||
background-position: 0 -28px;
|
||||
}
|
||||
.ds4 .p2{
|
||||
background-position: 0 -49px;
|
||||
}
|
||||
.ds4 .p3{
|
||||
background-position: 0 -70px;
|
||||
}*/
|
||||
.ds4 .arrows {
|
||||
position: absolute;
|
||||
width: 352px;
|
||||
height: 46px;
|
||||
top: 142px;
|
||||
left: 227px;
|
||||
}
|
||||
|
||||
.ds4 .back, .ds4 .start {
|
||||
background: url(Select.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
opacity: 0;
|
||||
}
|
||||
.ds4 .start {
|
||||
position: absolute;
|
||||
left: 546px;
|
||||
bottom: -30px;
|
||||
}
|
||||
.ds4 .back {
|
||||
position: absolute;
|
||||
left: 170px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
|
||||
.ds4 .back.pressed, .ds4 .start.pressed {
|
||||
/* background-position-y: -21px; */
|
||||
/* margin-top: 2px; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ds4 .back {
|
||||
float: left;
|
||||
/* width: 28px; */
|
||||
}
|
||||
|
||||
.ds4 .start {
|
||||
float: right;
|
||||
/* width: 28px; */
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .abxy {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 171px;
|
||||
top: 200px;
|
||||
left: 762px;
|
||||
}
|
||||
|
||||
.ds4 .button {
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
background: url(FaceButtons.png);
|
||||
}
|
||||
|
||||
.ds4 .button.pressed {
|
||||
background-position-y: 55px;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.ds4 .a {
|
||||
background-position: 0 0;
|
||||
bottom: 0px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.ds4 .b {
|
||||
background-position: -57px 0;
|
||||
top: 57px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.ds4 .x {
|
||||
background-position: -113px 0;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
.ds4 .y {
|
||||
background-position: 55px 0;
|
||||
left: 58px;
|
||||
bottom: 119px;
|
||||
}
|
||||
|
||||
.ds4 .sticks {
|
||||
position: absolute;
|
||||
width: 364px;
|
||||
height: 105px;
|
||||
top: 348px;
|
||||
left: 422px;
|
||||
}
|
||||
|
||||
.ds4 .stick {
|
||||
position: absolute;
|
||||
background: url(Sticks.png);
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.left {
|
||||
background-position-x: -96px;
|
||||
}
|
||||
|
||||
.ds4 .stick.pressed.right {
|
||||
background-position-x: -192px;
|
||||
}
|
||||
|
||||
.ds4 .stick.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ds4 .stick.right {
|
||||
top: calc(100% - 105px);
|
||||
left: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.ds4 .dpad {
|
||||
position: absolute;
|
||||
width: 125px;
|
||||
height: 126px;
|
||||
top: 220px;
|
||||
left: 286px;
|
||||
}
|
||||
|
||||
.ds4 .face {
|
||||
background: url(Dpad.png);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ds4 .face.up, .ds4 .face.down {
|
||||
width: 37px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.ds4 .face.left, .ds4 .face.right {
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ds4 .face.up {
|
||||
left: 44px;
|
||||
top: 0;
|
||||
background-position: -37px 0px;
|
||||
}
|
||||
|
||||
.ds4 .face.down {
|
||||
left: 44px;
|
||||
bottom: 0;
|
||||
background-position: 0px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.left {
|
||||
top: 45px;
|
||||
left: 0;
|
||||
background-position: 104px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.right {
|
||||
top: 45px;
|
||||
right: 0px;
|
||||
background-position: 52px 0;
|
||||
}
|
||||
|
||||
.ds4 .face.pressed {
|
||||
/* margin-top: 5px; */
|
||||
background-position-y: 52px;
|
||||
}
|
||||
|
||||
.ds4.half {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
/*END PS4 Controller Styling*/
|
||||
|
||||
.ds4.white .back, .ds4 .start {
|
||||
background-image: url(Start.png);
|
||||
width: 26px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
/*END PS4 White Controller Styling*/
|
||||
0
README.md
Normal file
0
README.md
Normal file
BIN
Select.png
Normal file
BIN
Select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
Start.png
Normal file
BIN
Start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
Sticks.png
Normal file
BIN
Sticks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
Touchpad-Black.png
Normal file
BIN
Touchpad-Black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Touchpad.png
Normal file
BIN
Touchpad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Trigger_Pressed.png
Normal file
BIN
Trigger_Pressed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
White_Skin.png
Normal file
BIN
White_Skin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
White_SkinNo-Buttons.png
Normal file
BIN
White_SkinNo-Buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
White_SkinNo_Buttons.png
Normal file
BIN
White_SkinNo_Buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Loading…
Reference in a new issue