new PS5 controller skin
This commit is contained in:
Khyretos
parent
2f3d181471
commit
cfbe8a150d
1 changed files with 128 additions and 259 deletions
391
PS5_White.css
391
PS5_White.css
|
|
@ -1,287 +1,156 @@
|
||||||
/*BEGIN PS4 Controller Styling*/
|
body {
|
||||||
.controller.ds4 {
|
background-color: #000000;
|
||||||
background: url(White_SkinNo_Buttons.png);
|
background-color: RGBA(0, 0, 0, 0);
|
||||||
height: 700px;
|
margin: 0 auto;
|
||||||
width: 1200px;
|
overflow: hidden;
|
||||||
/* margin-left: -403px;
|
|
||||||
margin-top: -280px;*/
|
|
||||||
}
|
}
|
||||||
|
.controller.xbox {
|
||||||
.ds4.disconnected div {
|
background: url(https://i.imgur.com/fJIyBwn.png);
|
||||||
display: none;
|
width: 807px;
|
||||||
|
height: 651px;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
.xbox .sticks {
|
||||||
.ds4 .triggers {
|
width: 367px;
|
||||||
width: 598px;
|
height: 100px;
|
||||||
height: 90px;
|
left: 220px;
|
||||||
position: absolute;
|
top: 333px;
|
||||||
left: 299px;
|
|
||||||
top: 38px;
|
|
||||||
}
|
}
|
||||||
|
.xbox .stick {
|
||||||
.ds4 .trigger {
|
background: url(https://i.imgur.com/nXaGdI2.png);
|
||||||
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;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
position: absolute;
|
|
||||||
left: 546px;
|
|
||||||
bottom: 264px;
|
|
||||||
}
|
}
|
||||||
|
.xbox .stick.pressed {
|
||||||
.ds4 .meta.pressed {
|
background-position: -102px 0;
|
||||||
background: url(Home.png) no-repeat center;
|
|
||||||
}
|
}
|
||||||
|
.xbox .stick.right {
|
||||||
.ds4 .p0{
|
top: 0;
|
||||||
background-position: 0 -6px;
|
left: 267px;
|
||||||
}
|
}
|
||||||
.ds4 .p1{
|
.xbox .abxy {
|
||||||
background-position: 0 -28px;
|
width: 181px;
|
||||||
|
height: 181px;
|
||||||
|
left: 573px;
|
||||||
|
top: 178px;
|
||||||
}
|
}
|
||||||
.ds4 .p2{
|
.xbox .button {
|
||||||
background-position: 0 -49px;
|
background: url(https://i.imgur.com/DVqDSsJ.png);
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
}
|
}
|
||||||
.ds4 .p3{
|
.xbox .button.pressed {
|
||||||
background-position: 0 -70px;
|
background-position-y: -59px;
|
||||||
}*/
|
margin-top: 0;
|
||||||
.ds4 .arrows {
|
|
||||||
position: absolute;
|
|
||||||
width: 352px;
|
|
||||||
height: 46px;
|
|
||||||
top: 142px;
|
|
||||||
left: 227px;
|
|
||||||
}
|
}
|
||||||
|
.xbox .a {
|
||||||
.ds4 .back, .ds4 .start {
|
background-position: 0 0;
|
||||||
background: url(Select.png);
|
left: 61px;
|
||||||
width: 26px;
|
top: 123px;
|
||||||
height: 43px;
|
}
|
||||||
|
.xbox .b {
|
||||||
|
background-position: -59px 0;
|
||||||
|
left: 123px;
|
||||||
|
top: 62px;
|
||||||
|
}
|
||||||
|
.xbox .x {
|
||||||
|
background-position: -118px 0;
|
||||||
|
left: 0px;
|
||||||
|
top: 61px;
|
||||||
|
}
|
||||||
|
.xbox .y {
|
||||||
|
background-position: -177px 0;
|
||||||
|
left: 61px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.xbox .arrows {
|
||||||
|
left: 195px;
|
||||||
|
top: 140px;
|
||||||
|
width: 416px;
|
||||||
|
height: 57px;
|
||||||
|
}
|
||||||
|
.xbox .quadrant {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.xbox .back,
|
||||||
|
.xbox .start {
|
||||||
|
background: url(https://i.imgur.com/YJRVQxC.png);
|
||||||
|
width: 27px;
|
||||||
|
height: 57px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.ds4 .start {
|
.xbox .start {
|
||||||
position: absolute;
|
background-position: 27px 0;
|
||||||
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;
|
float: right;
|
||||||
/* width: 28px; */
|
|
||||||
background-position: 0px 0;
|
|
||||||
}
|
}
|
||||||
|
.xbox .dpad {
|
||||||
.ds4 .abxy {
|
width: 144px;
|
||||||
|
height: 144px;
|
||||||
|
left: 71px;
|
||||||
|
top: 196px;
|
||||||
|
}
|
||||||
|
.xbox .face {
|
||||||
|
background: url(https://i.imgur.com/hCmzXWK.png);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 170px;
|
opacity: 0;
|
||||||
height: 171px;
|
|
||||||
top: 200px;
|
|
||||||
left: 762px;
|
|
||||||
}
|
}
|
||||||
|
.xbox .face.up {
|
||||||
.ds4 .button {
|
background-position: 0 -68px;
|
||||||
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;
|
width: 52px;
|
||||||
height: 40px;
|
height: 63px;
|
||||||
|
left: 46px;
|
||||||
}
|
}
|
||||||
|
.xbox .face.down {
|
||||||
.ds4 .face.up {
|
background-position: -54px 63px;
|
||||||
left: 44px;
|
width: 52px;
|
||||||
top: 0;
|
height: 63px;
|
||||||
background-position: -37px 0px;
|
left: 46px;
|
||||||
|
top: 81px;
|
||||||
}
|
}
|
||||||
|
.xbox .face.left {
|
||||||
.ds4 .face.down {
|
background-position: -108px -68px;
|
||||||
left: 44px;
|
width: 64px;
|
||||||
bottom: 0;
|
height: 52px;
|
||||||
background-position: 0px 0;
|
left: -1px;
|
||||||
|
top: 47px;
|
||||||
}
|
}
|
||||||
|
.xbox .face.right {
|
||||||
.ds4 .face.left {
|
background-position: -175px -68px;
|
||||||
top: 45px;
|
width: 63px;
|
||||||
left: 0;
|
height: 52px;
|
||||||
background-position: 104px 0;
|
left: 81px;
|
||||||
|
top: 46px;
|
||||||
}
|
}
|
||||||
|
.xbox .bumpers {
|
||||||
.ds4 .face.right {
|
width: 620px;
|
||||||
top: 45px;
|
height: 35px;
|
||||||
right: 0px;
|
left: 93px;
|
||||||
background-position: 52px 0;
|
top: 114px;
|
||||||
}
|
}
|
||||||
|
.xbox .bumper {
|
||||||
.ds4 .face.pressed {
|
background: url(https://i.imgur.com/2YssqRT.png);
|
||||||
/* margin-top: 5px; */
|
width: 110px;
|
||||||
background-position-y: 52px;
|
height: 35px;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
.xbox .triggers {
|
||||||
.ds4.half {
|
width: 619px;
|
||||||
margin-top: -300px;
|
height: 108px;
|
||||||
|
left: 94px;
|
||||||
}
|
}
|
||||||
|
.xbox .trigger {
|
||||||
/*END PS4 Controller Styling*/
|
background: url(https://i.imgur.com/LsxmGBD.png);
|
||||||
|
width: 111px;
|
||||||
.ds4.white .back, .ds4 .start {
|
height: 108px;
|
||||||
background-image: url(Start.png);
|
opacity: 0;
|
||||||
width: 26px;
|
|
||||||
height: 43px;
|
|
||||||
}
|
}
|
||||||
|
.xbox .trigger.right {
|
||||||
/*END PS4 White Controller Styling*/
|
background-position: -113px 0;
|
||||||
|
transform: rotateY(0);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
The general design of the DualSense (tm) controller, as well as the PlayStation (tm) logo, are the intellectual property of Sony.
|
||||||
|
Vectorized design referenced in the images linked above: copyright (c) CrazyGrape 2021
|
||||||
|
This work is licensed under a Creative Commons Attribution 3.0 United States License. The terms of this license are available at https://creativecommons.org/licenses/by/3.0/us/
|
||||||
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue