Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*BEGIN PS4 Controller Styling*/
- .controller.ds4 {
- background: url(https://imgur.com/S7kcihO);
- height: 598px;
- width: 806px;
- /* margin-left: -403px;
- margin-top: -280px;*/
- }
- .ds4.disconnected {
- background: url(https://imgur.com/5nwqTas);
- }
- .ds4.disconnected div {
- display: none;
- }
- .ds4 .triggers {
- width: 588px;
- height: 90px;
- position: absolute;
- left: 109px;
- }
- .ds4 .trigger {
- width: 99px;
- height: 100%;
- background: url(https://imgur.com/w4KCnPU);
- opacity: 0;
- }
- .ds4 .trigger.left {
- float: left;
- }
- .ds4 .trigger.right {
- float: right;
- background-position-x: 99px;
- }
- .ds4 .bumper {
- width: 99px;
- height: 23px;
- background: url(https://imgur.com/WtfGkgZ) no-repeat;
- opacity: 0;
- }
- .ds4 .bumpers {
- position: absolute;
- width: 588px;
- height: 23px;
- left: 109px;
- top: 94px;
- }
- .ds4 .bumper.pressed {
- opacity: 1;
- }
- .ds4 .bumper.left {
- /* -webkit-transform: rotateY(180deg); */
- /* transform: rotateY(180deg); */
- float: left;
- }
- .ds4 .bumper.right {
- float: right;
- transform: rotateY(180deg);
- }
- .ds4 .touchpad {
- width: 262px;
- height: 151px;
- position: absolute;
- left: 272px;
- top: 122px;
- }
- .ds4 .touchpad.pressed {
- background: url(https://imgur.com/GyiQds8)) no-repeat center;
- }
- .ds4 .meta {
- width: 42px;
- height: 42px;
- position: absolute;
- left: 382px;
- bottom: 216px;
- }
- .ds4 .meta.pressed {
- background: url(https://imgur.com/EtpsGzE) no-repeat center;
- }
- /*Not needed, but I like keeping them here for posterity*/
- /*.ds4 .quadrant{
- position: absolute;
- background: url(ps4-assets/player-n.svgz);
- height: 17px;
- width: 111px;
- top: 140px;
- left: 240px;
- }
- .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(https://imgur.com/ZvZZJIk));
- width: 28px;
- height: 46px;
- opacity: 0;
- }
- .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: 28px 0;
- }
- .ds4 .abxy {
- position: absolute;
- width: 170px;
- height: 171px;
- top: 159px;
- left: 567px;
- }
- .ds4 .button {
- position: absolute;
- width: 55px;
- height: 55px;
- background: url(https://imgur.com/HlPr1Md);
- }
- .ds4 .button.pressed {
- background-position-y: 55px;
- /* margin-top: 5px; */
- }
- .ds4 .a {
- background-position: 0 0;
- bottom: 0;
- left: 58px;
- }
- .ds4 .b {
- background-position: -57px 0;
- top: 58px;
- right: 0px;
- }
- .ds4 .x {
- background-position: -113px 0;
- top: 58px;
- }
- .ds4 .y {
- background-position: 55px 0;
- left: 58px;
- }
- .ds4 .sticks {
- position: absolute;
- width: 361px;
- height: 105px;
- top: 308px;
- left: 228px;
- }
- .ds4 .stick {
- position: absolute;
- background: url(https://imgur.com/fGrcx6w);
- 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: 181px;
- left: 92px;
- }
- .ds4 .face {
- background: url(https://imgur.com/4fLVqsR);
- position: absolute;
- }
- .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*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement