-
-
Save Cubio300/e9ff30dff9a96081086f534b22bf05fd to your computer and use it in GitHub Desktop.
DualSense (PS5) Skin for GamepadViewer.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -- PS5 Skin for GamepadViewer | Created by CrazyGrape, Touchpad and PS Button support added by Cubio300 | |
HOW TO USE IN OBS: | |
1. Go to GamepadViewer.com and generate a URL (make sure to USE THE XBOX SKIN or leave the skin blank) | |
2. Generate your URL once the settings are correct and copy it to your clipboard | |
3. In OBS, create a new browser source | |
4. In the URL Screen, paste the link copied from GamepadViewer.com | |
5. Set the width to 807 and the height to 651 | |
6. Paste the contents of this CSS file into the Custom CSS field | |
7. Click Done. | |
8. Enjoy the skin! */ | |
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://imgur.com/jJhnjvL.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 .touchpad { | |
width: 333px; | |
height: 177px; | |
position: absolute; | |
left: 237px; | |
top: 118px; | |
} .xbox .touchpad.pressed { | |
background: url(https://imgur.com/78UZdwp.png) no-repeat center; | |
}.xbox .meta { | |
width: 51px; | |
height: 40px; | |
position: absolute; | |
left: 378px; | |
bottom: 255px; | |
}.xbox .meta.pressed { | |
background: url(https://imgur.com/vJ4YyEZ.png) no-repeat center; | |
} .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/ | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment