DualSense (PS5) Skin for GamepadViewer.com

DualSense Skin.css

/* -- PS5 Skin for GamepadViewer | Created by CrazyGrape -- 
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://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/
*/

I really love this Dualsense Overlay but i want to ask is its possible to add the function that the PS button and the Touchpad show inputs aswell? Besides that i have no complaints

I'm not sure if that is possible. Gamepadviewer has likely changed pretty significantly in the past ~2 years since I made this, and I'm surprised it still works honestly. I'll take a look to see if those buttons can be added easily and, if so, update the files in the main repo for this project. Thanks for reaching out!

I'm not sure if that is possible. Gamepadviewer has likely changed pretty significantly in the past ~2 years since I made this, and I'm surprised it still works honestly. I'll take a look to see if those buttons can be added easily and, if so, update the files in the main repo for this project. Thanks for reaching out!

Hi it's me again I just wanna say I added Touchpad and PS Button support myself and it works perfectly fine, I uploaded the code for it here: https://drive.google.com/file/d/1XqZ02O30NWn6gCBA3eRaQIP5d_H8ebSC/view (I credited myself as the person who added Touchpad and PS Button Support and you can update the main repo to include this version of the project)