gamepad-viewer/templates/ds4/template.css

.controller {
    width: 806px;
    height: 598px;
}

#gamepad[data-color="black"] .controller {
    background-image: url(base-black.svg);
}

#gamepad[data-color="white"] .controller {
    background-image: url(base-white.svg);
}

#gamepad[data-color="red"] .controller {
    background-image: url(base-red.svg);
}

#gamepad[data-color="blue"] .controller {
    background-image: url(base-blue.svg);
}

#gamepad.disconnected .controller {
    background-image: url(disconnected.svg);
}

#gamepad.disconnected .controller div {
    display: none;
}

.controller .triggers {
    width: 588px;
    height: 90px;
    position: absolute;
    left: 109px;
}

.controller .trigger {
    width: 99px;
    height: 100%;
    background: url(triggers.svg);
    clip-path: inset(100% 0px 0px 0pc);
}

.controller .trigger[data-value="0"] {
    opacity: 0;
}

.controller .trigger.left {
    float: left;
}

.controller .trigger.right {
    float: right;
    background-position-x: 99px;
}

.controller .bumper {
    width: 99px;
    height: 23px;
    background: url(bumper.svg) no-repeat;
    opacity: 0;
}

.controller .bumpers {
    position: absolute;
    width: 588px;
    height: 23px;
    left: 109px;
    top: 94px;
}

.controller .bumper[data-pressed="true"] {
    opacity: 1;
}

.controller .bumper.left {
    /* -webkit-transform: rotateY(180deg); */
    /* transform: rotateY(180deg); */
    float: left;
}

.controller .bumper.right {
    float: right;
    transform: rotateY(180deg);
}

.controller .touchpad {
    width: 262px;
    height: 151px;
    position: absolute;
    left: 272px;
    top: 122px;
}

.controller .touchpad[data-pressed="true"] {
    background: url(touchpad.svg) no-repeat center;
}

.controller .meta {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 382px;
    bottom: 216px;
}

.controller .meta[data-pressed="true"] {
    background: url(meta.svg) no-repeat center;
}

.controller .arrows {
    position: absolute;
    width: 352px;
    height: 46px;
    top: 142px;
    left: 227px;
}

.controller .select,
.controller .start {
    background: url(start.svg);
    width: 28px;
    height: 46px;
    opacity: 0;
}

.controller .select[data-pressed="true"],
.controller .start[data-pressed="true"] {
    opacity: 1;
}

.controller .select {
    float: left;
}

.controller .start {
    float: right;
    background-position: 28px 0;
}

.controller .buttons {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 159px;
    left: 567px;
}

.controller .button {
    position: absolute;
    width: 56px;
    height: 56px;
    background: url(buttons.svg);
}

.controller .button[data-pressed="true"] {
    background-position-y: 56px;
}

.controller .a {
    background-position: 0 0;
    bottom: 0px;
    left: 56px;
}

.controller .b {
    background-position: -56px 0;
    top: 56px;
    right: 0px;
}

.controller .x {
    background-position: 112px 0;
    top: 56px;
}

.controller .y {
    background-position: 56px 0;
    left: 56px;
}

.controller .sticks {
    position: absolute;
    width: 361px;
    height: 105px;
    top: 308px;
    left: 228px;
}

.controller .stick {
    position: absolute;
    background: url(sticks.svg);
    height: 94px;
    width: 94px;
}

.controller .stick[data-pressed="true"].left {
    background-position-x: -96px;
}

.controller .stick[data-pressed="true"].right {
    background-position-x: -192px;
}

.controller .stick.left {
    top: 0;
    left: 0;
}

.controller .stick.right {
    top: calc(100% - 105px);
    left: calc(100% - 105px);
}

.controller .dpad {
    position: absolute;
    width: 125px;
    height: 126px;
    top: 181px;
    left: 92px;
}

.controller .face {
    background: url(dpad.svg);
    position: absolute;
}

.controller .face.up,
.controller .face.down {
    width: 36px;
    height: 52px;
}

.controller .face.left,
.controller .face.right {
    width: 52px;
    height: 36px;
}

.controller .face.up {
    left: 44px;
    top: 0;
    background-position: -37px 0px;
}

.controller .face.down {
    left: 44px;
    bottom: 0;
    background-position: 0px 0;
}

.controller .face.left {
    top: 44px;
    left: 0;
    background-position: 104px 0;
}

.controller .face.right {
    top: 44px;
    right: 0px;
    background-position: 52px 0;
}

.controller .face[data-pressed="true"] {
    /* margin-top: 5px; */
    background-position-y: 52px;
}

.controller.half {
    margin-top: -300px;
}