156 lines
2.8 KiB
CSS
156 lines
2.8 KiB
CSS
body {
|
|
background-color: #000000;
|
|
background-color: RGBA(0, 0, 0, 0);
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
.controller.xbox {
|
|
background: url(https://i.imgur.com/fJIyBwn.png);
|
|
width: 807px;
|
|
height: 651px;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
.xbox .sticks {
|
|
width: 367px;
|
|
height: 100px;
|
|
left: 220px;
|
|
top: 333px;
|
|
}
|
|
.xbox .stick {
|
|
background: url(https://i.imgur.com/nXaGdI2.png);
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.xbox .stick.pressed {
|
|
background-position: -102px 0;
|
|
}
|
|
.xbox .stick.right {
|
|
top: 0;
|
|
left: 267px;
|
|
}
|
|
.xbox .abxy {
|
|
width: 181px;
|
|
height: 181px;
|
|
left: 573px;
|
|
top: 178px;
|
|
}
|
|
.xbox .button {
|
|
background: url(https://i.imgur.com/DVqDSsJ.png);
|
|
width: 58px;
|
|
height: 58px;
|
|
}
|
|
.xbox .button.pressed {
|
|
background-position-y: -59px;
|
|
margin-top: 0;
|
|
}
|
|
.xbox .a {
|
|
background-position: 0 0;
|
|
left: 61px;
|
|
top: 123px;
|
|
}
|
|
.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;
|
|
}
|
|
.xbox .start {
|
|
background-position: 27px 0;
|
|
float: right;
|
|
}
|
|
.xbox .dpad {
|
|
width: 144px;
|
|
height: 144px;
|
|
left: 71px;
|
|
top: 196px;
|
|
}
|
|
.xbox .face {
|
|
background: url(https://i.imgur.com/hCmzXWK.png);
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
.xbox .face.up {
|
|
background-position: 0 -68px;
|
|
width: 52px;
|
|
height: 63px;
|
|
left: 46px;
|
|
}
|
|
.xbox .face.down {
|
|
background-position: -54px 63px;
|
|
width: 52px;
|
|
height: 63px;
|
|
left: 46px;
|
|
top: 81px;
|
|
}
|
|
.xbox .face.left {
|
|
background-position: -108px -68px;
|
|
width: 64px;
|
|
height: 52px;
|
|
left: -1px;
|
|
top: 47px;
|
|
}
|
|
.xbox .face.right {
|
|
background-position: -175px -68px;
|
|
width: 63px;
|
|
height: 52px;
|
|
left: 81px;
|
|
top: 46px;
|
|
}
|
|
.xbox .bumpers {
|
|
width: 620px;
|
|
height: 35px;
|
|
left: 93px;
|
|
top: 114px;
|
|
}
|
|
.xbox .bumper {
|
|
background: url(https://i.imgur.com/2YssqRT.png);
|
|
width: 110px;
|
|
height: 35px;
|
|
opacity: 0;
|
|
}
|
|
.xbox .triggers {
|
|
width: 619px;
|
|
height: 108px;
|
|
left: 94px;
|
|
}
|
|
.xbox .trigger {
|
|
background: url(https://i.imgur.com/LsxmGBD.png);
|
|
width: 111px;
|
|
height: 108px;
|
|
opacity: 0;
|
|
}
|
|
.xbox .trigger.right {
|
|
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/
|
|
*/
|