Skip to content

Instantly share code, notes, and snippets.

@Crimsonize
Created May 29, 2020 18:03
Show Gist options
  • Save Crimsonize/4196bd3b27ca7e5ccd1ca12a644221d4 to your computer and use it in GitHub Desktop.
Save Crimsonize/4196bd3b27ca7e5ccd1ca12a644221d4 to your computer and use it in GitHub Desktop.
Custom CSS for Gamepad Viewer
/*BEGIN PS4 Controller Styling*/
.controller.ds4 {
background: url(https://i.imgur.com/akvD48z.png);
height: 598px;
width: 806px;
/* margin-left: -403px;
margin-top: -280px;*/
}
.ds4.disconnected {
background: url(https://i.imgur.com/QB62Der.png);
}
.ds4.disconnected div {
display: none;
}
.ds4 .triggers {
width: 588px;
height: 90px;
position: absolute;
left: 109px;
}
.ds4 .trigger {
width: 99px;
height: 100%;
background: url(ps4-assets/triggers.svgz);
opacity: 0;
}
.ds4 .trigger.left {
float: left;
}
.ds4 .trigger.right {
float: right;
background-position-x: 99px;
}
.ds4 .bumper {
width: 99px;
height: 23px;
background: url(ps4-assets/bumper.svgz) 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://i.imgur.com/dBlxOcD.png) no-repeat center;
}
.ds4 .meta {
width: 42px;
height: 42px;
position: absolute;
left: 382px;
bottom: 216px;
}
.ds4 .meta.pressed {
background: url(ps4-assets/meta.svgz) 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(ps4-assets/start.svgz);
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://i.imgur.com/AqthJDs.png);
}
.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://i.imgur.com/87PhxvO.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: 181px;
left: 92px;
}
.ds4 .face {
background: url(https://i.imgur.com/99XlVFv.png);
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*/
/*BEGIN PS4 White Controller Styling*/
.controller.ds4.white {
background-image: url(ps4-white-assets/base.svgz);
}
.ds4.white.disconnected {
background: url(ps4-assets/disconnected.svgz);
}
.ds4.white .trigger {
background-image: url(ps4-white-assets/triggers.svgz);
}
.ds4.white .bumper {
background-image: url(ps4-white-assets/bumper.svgz);
}
.ds4.white .touchpad.pressed {
background-image: url(ps4-white-assets/touchpad.svgz);
}
.ds4.white .back, .ds4 .start {
background-image: url(ps4-white-assets/start.svgz);
}
.ds4.white .button {
background-image: url(ps4-white-assets/face.svgz);
}
.ds4.white .stick {
background-image: url(ps4-white-assets/sticks.svgz);
}
.ds4.white .face {
background-image: url(ps4-white-assets/dpad.svgz);
}
/*END PS4 White Controller Styling*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment