custom.css

.custom {
    background: no-repeat center;
}

.controller.custom {
    background: var(--controller-background-image);
    height: 630px;
    width: 750px;
}

.custom.disconnected {
    background: var(--controller-disconnected-image);
}

.custom.disconnected div {
    display: none;
}

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

.custom .touchpad::after {
    content: "";
    position: absolute;
    top: 41px;
    left: 66px;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    background: var(--controller-touchpad-image) no-repeat center;
    background-size: 70px 70px;
}

.custom .touchpad.pressed {
}

.custom .triggers {
    width: 446px;
    height: 121px;
    position: absolute;
    left: 152px;
}

.custom .trigger {
    width: 88px;
    height: 121px;
    background: var(--controller-trigger-image);
    opacity: 0;
}

.custom .trigger.left {
    float: left;
    background-position: 0 0;
}

.custom .trigger.right {
    float: right;
    transform: rotateY(180deg);
}

.custom .bumper {
    width: 170px;
    height: 61px;
    background: var(--controller-bumper-image) no-repeat;
    opacity: 0;
}

.custom .bumpers {
    position: absolute;
    width: 536px;
    height: 61px;
    left: 107px;
    top: 129px;
}

.custom .bumper.pressed {
    opacity: 1;
}

.custom .bumper.left {
    float: left;
}

.custom .bumper.right {
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

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

.custom .meta.pressed {
    background: var(--controller-meta-pressed-image) no-repeat center;
}

.custom .arrows {
    position: absolute;
    width: 141px;
    height: 33px;
    top: 264px;
    left: 306px;
}

.custom .back, .custom .start {
    background: var(--controller-start-image);
    width: 33px;
    height: 33px;
    opacity: 0;
}

.custom .back.pressed, .custom .start.pressed {
    opacity: 1;
}

.custom .back {
    float: left;
}

.custom .start {
    float: right;
    background-position: 33px 0;
}

.custom .abxy {
    position: absolute;
    width: 153px;
    height: 156px;
    top: 192px;
    left: 488px;
}

.custom .button {
    position: absolute;
    width: 48px;
    height: 48px;
    background: var(--controller-button-image);
}

.custom .button.pressed {
    background-position-y: -48px;
    margin-top: 5px;
    opacity: 1;
}

.custom .a {
    background-position: 0 0;
    top: 108px;
    left: 55px;
}

.custom .b {
    background-position: -49px 0;
    top: 58px;
    right: 0px;
}

.custom .x {
    background-position: -98px 0;
    top: 58px;
    left: 4px;
}

.custom .y {
    background-position: 48px 0;
    top: 7px;
    left: 55px;
}

.custom .sticks {
    position: absolute;
    width: 371px;
    height: 196px;
    top: 239px;
    left: 144px;
}

.custom .stick {
    position: absolute;
    background: var(--controller-stick-image);
    background-position: -85px 0;
    height: 83px;
    width: 83px;
}

.custom .stick.pressed {
    background-position: 0 0;
}

.custom .stick.pressed.left {
    background-position-x: -96px;
}

.custom .stick.pressed.right {
    background-position-x: -192px;
}

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

.custom .stick.right {
    top: 113px;
    left: 288px;
}

.custom .dpad {
    position: absolute;
    width: 110px;
    height: 111px;
    top: 345px;
    left: 223px;
}

.custom .face.pressed {
    background: var(--controller-face-image);
}

.custom .face {
    position: absolute;
}

.custom .face.up, .custom .face.down {
    width: 34px;
    height: 56px;
}

.custom .face.left, .custom .face.right {
    width: 55px;
    height: 35px;
}

.custom .face.up {
    background-position: 34px 0;
    left: 38px;
    top: 0px;
}

.custom .face.down {
    left: 38px;
    bottom: 0;
}

.custom .face.left {
    background-position: 0 -93px;
    top: 38px;
    left: 0;
}

.custom .face.right {
    background-position: 0 -57px;
    top: 38px;
    right: 0;
}

.custom .half {
    margin-top: -315px;
}