/** * JemcoTech Gamepad Tester - Controller Skins & Positioning */ /* ========================================================================== 1. PS5 DUALSENSE SKINS ========================================================================== */ .ps5-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .ps5-scaler { width: 807px; height: 651px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.ps5 { background: url('../gamepads/PS5 Blanco/base.png') no-repeat center; background-size: 807px 651px; width: 807px; height: 651px; position: absolute; top: 0; left: 0; } .controller.ps5 .triggers { width: 619px; height: 108px; left: 94px; position: absolute; top: 0; z-index: 1; } .controller.ps5 .trigger { background: url('../gamepads/PS5 Blanco/triggers.png') no-repeat; width: 111px; height: 108px; opacity: 0; position: absolute; top: 0; } .controller.ps5 .trigger.left { left: 0; background-position: 0 0; } .controller.ps5 .trigger.right { background-position: -113px 0; right: 0; } .controller.ps5 .bumpers { width: 620px; height: 35px; left: 93px; top: 114px; position: absolute; z-index: 2; } .controller.ps5 .bumper { background: url('../gamepads/PS5 Blanco/bumpers.png') no-repeat; width: 110px; height: 35px; opacity: 0; position: absolute; transition: opacity 0.05s ease-out, transform 0.05s ease-out; } .controller.ps5 .bumper.left { left: 0; background-position: 0 0; } .controller.ps5 .bumper.right { right: 0; background-position: 0 0; transform: scaleX(-1); } .controller.ps5 .bumper.active, .controller.ps5 .bumper.pressed { opacity: 1; transform: translateY(1px); filter: brightness(1.1); } .controller.ps5 .bumper.right.active, .controller.ps5 .bumper.right.pressed { transform: scaleX(-1) translateY(1px); } .controller.ps5 .touchpad { position: absolute; left: 380px; top: 200px; width: 40px; height: 40px; border-radius: 50%; background: rgba(45, 90, 240, 0.85); box-shadow: 0 0 10px rgba(45, 90, 240, 0.6); opacity: 0; transition: opacity 0.05s ease-out, transform 0.05s ease-out; z-index: 3; } .controller.ps5 .touchpad.active { opacity: 1; transform: translateY(1px); } .controller.ps5 .ps { position: absolute; left: 373px; top: 345px; width: 60px; height: 60px; background-image: url('../gamepads/PS5 Blanco/public/Images/PS_Color.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 0.05s ease-out, transform 0.05s ease-out; z-index: 3; } .controller.ps5 .ps.active { opacity: 1; transform: translateY(1px); } .controller.ps5 .arrows { left: 195px; top: 140px; width: 416px; height: 57px; position: absolute; } .controller.ps5 .back, .controller.ps5 .start { background: url('../gamepads/PS5 Blanco/arrows.png') no-repeat; width: 27px; height: 57px; opacity: 0; position: absolute; transition: opacity 0.05s ease-out, transform 0.05s ease-out; } .controller.ps5 .back { left: 0; background-position: 0 0; } .controller.ps5 .start { background-position: -27px 0; right: 0; } .controller.ps5 .back.active, .controller.ps5 .start.active { opacity: 1; transform: translateY(1px); filter: brightness(1.1); } .controller.ps5 .abxy { width: 181px; height: 181px; left: 573px; top: 178px; position: absolute; } .controller.ps5 .button { background: url('../gamepads/PS5 Blanco/buttons.png') no-repeat; width: 58px; height: 58px; position: absolute; opacity: 0; transition: opacity 0.05s ease-out, transform 0.05s ease-out, filter 0.05s ease-out; } .controller.ps5 .button.active, .controller.ps5 .button.pressed { opacity: 1; background-position-y: -59px !important; transform: translateY(1px); } .controller.ps5 .button.a { background-position: 0 0; left: 61px; top: 123px; } .controller.ps5 .button.b { background-position: -59px 0; left: 123px; top: 62px; } .controller.ps5 .button.x { background-position: -118px 0; left: 0px; top: 61px; } .controller.ps5 .button.y { background-position: -177px 0; left: 61px; top: 0px; } .controller.ps5 .sticks { width: 367px; height: 100px; left: 220px; top: 333px; position: absolute; } .controller.ps5 .stick { background: url('../gamepads/PS5 Blanco/sticks.png') no-repeat; width: 100px; height: 100px; position: absolute; transition: transform 0.05s linear; } .controller.ps5 .stick.pressed { background-position: -102px 0; } .controller.ps5 .stick.left { top: 0; left: 0; } .controller.ps5 .stick.right { top: 0; left: 267px; } .controller.ps5 .dpad { width: 144px; height: 144px; left: 71px; top: 196px; position: absolute; } .controller.ps5 .face { background: url('../gamepads/PS5 Blanco/dpad.png') no-repeat; position: absolute; opacity: 0; transition: opacity 0.05s ease-out, transform 0.05s ease-out; } .controller.ps5 .face.active, .controller.ps5 .face.pressed { opacity: 1; background-position-y: -68px !important; transform: translateY(1px); } .controller.ps5 .face.up { background-position: 0 0; width: 52px; height: 63px; left: 46px; top: 0; } .controller.ps5 .face.down { background-position: -54px 0; width: 52px; height: 63px; left: 46px; top: 81px; } .controller.ps5 .face.left { background-position: -108px 0; width: 64px; height: 52px; left: -1px; top: 47px; } .controller.ps5 .face.right { background-position: -175px 0; width: 63px; height: 52px; left: 81px; top: 46px; } /* PS5 Negro */ .controller.ps5-black { background: url('../gamepads/PS5 Negro/assets/controller_body.png') no-repeat; height: 850px; width: 1050px; position: absolute; top: 0; left: 0; } .controller.ps5-black.disconnected { background: url('../gamepads/PS5 Negro/assets/disconnected_body.png') no-repeat; } .controller.ps5-black .triggers { width: 204px; height: 92px; top: 13px; left: 20px; position: absolute; background-repeat: no-repeat; } .controller.ps5-black .trigger { width: 241px; height: 114px; background: url('../gamepads/PS5 Negro/assets/triggers.png') no-repeat; opacity: 0; } .controller.ps5-black .trigger.left { float: left; top: 42px; left: 22px; background-position-x: 120px; position: absolute; } .controller.ps5-black .trigger.right { float: right; width: 241px; height: 114px; top: 42px; left: 746px; background-position-x: -120px; position: absolute; } .controller.ps5-black .bumper { width: 208px; height: 333px; left: 155px; top: 179px; background: url('../gamepads/PS5 Negro/assets/bumpers.png') no-repeat; opacity: 0; position: absolute; } .controller.ps5-black .bumper.pressed { opacity: 1; } .controller.ps5-black .bumper.left { float: right; } .controller.ps5-black .bumper.right { transform: rotateY(180deg); float: left; left: 686px; } .controller.ps5-black .dpad { height: 624px; width: 840px; background-repeat: no-repeat; } .controller.ps5-black .face { background: url('../gamepads/PS5 Negro/assets/dpad.png') no-repeat; position: absolute; top: 337px; left: 140px; opacity: 0; } .controller.ps5-black .face.pressed { opacity: 1; } .controller.ps5-black .face.left.pressed { transform: rotate(0deg); top: 337px; left: 140px; width: 71px; height: 58px; } .controller.ps5-black .face.right.pressed { transform: rotate(180deg); top: 337px; left: 235px; width: 71px; height: 58px; } .controller.ps5-black .face.up.pressed { transform: rotate(90deg); top: 289px; left: 187px; width: 71px; height: 58px; } .controller.ps5-black .face.down.pressed { transform: rotate(-90deg); top: 385px; left: 187px; width: 71px; height: 58px; } .controller.ps5-black .arrows { position: absolute; width: 205px; height: 19px; top: 250px; left: 291px; } .controller.ps5-black .back, .controller.ps5-black .start { background: url('../gamepads/PS5 Negro/assets/menu_buttons.png') no-repeat; width: 34px; height: 51px; } .controller.ps5-black .back.pressed, .controller.ps5-black .start.pressed { top: -15px; opacity: 1; } .controller.ps5-black .back { position: absolute; left: -10px; float: left; width: 38px; height: 55px; opacity: 0; } .controller.ps5-black .start { transform: rotate(24deg); position: absolute; left: 443px; float: right; width: 38px; height: 55px; opacity: 0; } .controller.ps5-black .abxy { position: absolute; } .controller.ps5-black .button { position: absolute; } .controller.ps5-black .button.pressed { background: url('../gamepads/PS5 Negro/assets/face_buttons.png') no-repeat; height: 211px; width: 211px; top: 260px; left: 722px; background-position-y: 0px; margin-top: 0px; opacity: 1; } .controller.ps5-black .a.pressed { clip: rect(0px, 144px, 70px, 0px); background-position-y: -143px; top: 403px; } .controller.ps5-black .b.pressed { clip: rect(0px, 72px, 140px, 0px); background-position-x: -144px; left: 866px; } .controller.ps5-black .x.pressed { clip: rect(0px, 72px, 140px, 0px); } .controller.ps5-black .y.pressed { clip: rect(0px, 144px, 70px, 0px); } .controller.ps5-black .meta { width: 153px; height: 85px; position: absolute; left: 489px; top: 462px; opacity: 0; } .controller.ps5-black .meta.pressed { background: url('../gamepads/PS5 Negro/assets/ps_button.png') no-repeat; opacity: 1; } .controller.ps5-black .sticks { position: absolute; width: 364px; height: 100px; top: 438px; left: 321px; } .controller.ps5-black .stick { position: absolute; background: url('../gamepads/PS5 Negro/assets/analog_sticks.png') no-repeat; height: 116px; width: 116px; } .controller.ps5-black .stick.left { top: 2px; left: -9px; } .controller.ps5-black .stick.right { top: 2px; left: 301px; } .controller.ps5-black .stick.pressed.left, .controller.ps5-black .stick.pressed.right { background-position-x: -118px; } .controller.ps5-black .touchpad { position: absolute; top: 212px; left: 322px; height: 200px; width: 407px; background: url('../gamepads/PS5 Negro/assets/touchpad_lightbar.png') no-repeat; animation: ps5_rotation_hue 8.5s infinite linear; } .controller.ps5-black .touchpad.pressed { position: absolute; top: 186px; left: 330px; height: 213px; width: 391px; background: url('../gamepads/PS5 Negro/assets/touchpad_pressed.png') no-repeat; } @keyframes ps5_rotation_hue { 0%, 100% { filter: saturate(1) brightness(0.35); transform: hue-rotate(359deg); } 50% { filter: saturate(50%) brightness(1.6); transform: hue-rotate(0deg); } } /* ========================================================================== 2. PS4 DUALSHOCK 4 ========================================================================== */ .ps4-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .ps4-scaler { width: 806px; height: 598px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.ds4 { background: url('../gamepads/PS4 Negro/ps4-assets/base.svg') no-repeat center; background-size: 806px 598px; height: 598px; width: 806px; position: absolute; top: 0; left: 0; } .controller.ds4.white-skin { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/base.svg'); } .controller.ds4 .triggers { width: 588px; height: 90px; position: absolute; left: 109px; top: 0px; } .controller.ds4 .trigger { width: 99px; height: 90px; background: url('../gamepads/PS4 Negro/ps4-assets/triggers.svg') no-repeat; opacity: 0; position: relative; } .controller.ds4.white-skin .trigger { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/triggers.svg'); } .controller.ds4 .trigger.left { float: left; background-position: 0 0; } .controller.ds4 .trigger.right { float: right; background-position: -99px 0; } .controller.ds4 .bumpers { position: absolute; width: 588px; height: 23px; left: 109px; top: 94px; } .controller.ds4 .bumper { width: 99px; height: 23px; background: url('../gamepads/PS4 Negro/ps4-assets/bumper.svg') no-repeat; opacity: 0; transition: opacity 0.08s ease; } .controller.ds4.white-skin .bumper { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/bumper.svg'); } .controller.ds4 .bumper.pressed { opacity: 1; } .controller.ds4 .bumper.left { float: left; } .controller.ds4 .bumper.right { float: right; transform: rotateY(180deg); } .controller.ds4 .touchpad { width: 262px; height: 151px; position: absolute; left: 272px; top: 122px; border-radius: 8px; cursor: pointer; } .controller.ds4 .touchpad.pressed { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 12px rgba(255, 140, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4); } .controller.ds4 .meta { width: 42px; height: 42px; position: absolute; left: 382px; top: 341px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.08s ease, box-shadow 0.15s ease; } .controller.ds4 .meta.pressed { opacity: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(0, 102, 255, 0.25) 60%, transparent 70%); box-shadow: 0 0 16px rgba(0, 102, 255, 0.9), 0 0 28px rgba(56, 189, 248, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.7); } .controller.ds4 .arrows { position: absolute; width: 352px; height: 46px; top: 142px; left: 227px; } .controller.ds4 .back, .controller.ds4 .start { background: url('../gamepads/PS4 Negro/ps4-assets/start.svg') no-repeat; width: 28px; height: 46px; opacity: 0; transition: opacity 0.08s ease; } .controller.ds4.white-skin .back, .controller.ds4.white-skin .start { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/start.svg'); } .controller.ds4 .back.pressed, .controller.ds4 .start.pressed { opacity: 1; } .controller.ds4 .back { float: left; background-position: 0 0; } .controller.ds4 .start { float: right; background-position: 0 0; } .controller.ds4 .abxy { width: 170px; height: 171px; top: 159px; left: 567px; position: absolute; } .controller.ds4 .button { position: absolute; width: 55px; height: 55px; background: url('../gamepads/PS4 Negro/ps4-assets/face.svg') no-repeat; } .controller.ds4.white-skin .button { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/face.svg'); } .controller.ds4 .button.pressed { background-position-y: -56px !important; opacity: 1; } .controller.ds4 .button.a { background-position: 0 0; top: 116px; left: 58px; } .controller.ds4 .button.b { background-position: -56px 0; top: 58px; right: 0px; } .controller.ds4 .button.x { background-position: -112px 0; top: 58px; left: 0px; } .controller.ds4 .button.y { background-position: -168px 0; top: 0px; left: 58px; } .controller.ds4 .sticks { position: absolute; width: 361px; height: 105px; top: 308px; left: 228px; } .controller.ds4 .stick { position: absolute; background: url('../gamepads/PS4 Negro/ps4-assets/sticks.svg') no-repeat; background-position: 0 0; height: 94px; width: 94px; will-change: transform; } .controller.ds4.white-skin .stick { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/sticks.svg'); } .controller.ds4 .stick.pressed.left { background-position-x: -96px !important; } .controller.ds4 .stick.pressed.right { background-position-x: -192px !important; } .controller.ds4 .stick.left { top: 0; left: 0; } .controller.ds4 .stick.right { top: 0; left: 256px; } .controller.ds4 .dpad { position: absolute; width: 125px; height: 126px; top: 181px; left: 92px; } .controller.ds4 .face { background: url('../gamepads/PS4 Negro/ps4-assets/dpad.svg') no-repeat; position: absolute; opacity: 0; } .controller.ds4.white-skin .face { background-image: url('../gamepads/PS4 Blanco/ps4-white-assets/dpad.svg'); } .controller.ds4 .face.up, .controller.ds4 .face.down { width: 36px; height: 52px; } .controller.ds4 .face.left, .controller.ds4 .face.right { width: 52px; height: 36px; } .controller.ds4 .face.up { left: 44.5px; top: 0; background-position: -37px 0; } .controller.ds4 .face.down { left: 44.5px; bottom: 0; background-position: 0 0; } .controller.ds4 .face.left { top: 45px; left: 0; background-position: -74px 0; } .controller.ds4 .face.right { top: 45px; right: 0; background-position: -126px 0; } .controller.ds4 .face.pressed { opacity: 1; background-position-y: -52px !important; } /* ========================================================================== 3. PS3 DUALSHOCK 3 (REESTRUCTURADO 784px x 558px) ========================================================================== */ .ps3-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .ps3-scaler { width: 784px; height: 558px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.ps3 { background: url('../gamepads/PS3 Negro/ps3-assets/base.png') no-repeat center; background-size: 784px 558px; height: 558px; width: 784px; position: absolute; top: 0; left: 0; } .controller.ps3.white-skin { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/base.png'); } .controller.ps3 .quadrant { position: absolute; background: url('../gamepads/PS3 Negro/ps3-assets/player-n.png') no-repeat; height: 17px; width: 111px; top: 140px; left: 240px; background-position: 0 -6px; z-index: 2; pointer-events: none; } .controller.ps3.white-skin .quadrant { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/player-n.png'); background-position: 0 -4px; } .controller.ps3 .quadrant.p0 { background-position: 0 -6px; } .controller.ps3 .quadrant.p1 { background-position: 0 -28px; } .controller.ps3 .quadrant.p2 { background-position: 0 -49px; } .controller.ps3 .quadrant.p3 { background-position: 0 -70px; } .controller.ps3.white-skin .quadrant.p0 { background-position: 0 -4px; } .controller.ps3.white-skin .quadrant.p1 { background-position: 0 -25px; } .controller.ps3.white-skin .quadrant.p2 { background-position: 0 -46px; } .controller.ps3.white-skin .quadrant.p3 { background-position: 0 -67px; } .controller.ps3 .triggers { width: 586px; height: 65px; position: absolute; left: 99px; top: 0px; } .controller.ps3 .trigger { width: 86px; height: 65px; background: url('../gamepads/PS3 Negro/ps3-assets/triggers.png') no-repeat; opacity: 0; position: relative; } .controller.ps3.white-skin .trigger { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/triggers.png'); } .controller.ps3 .trigger.left { float: left; background-position: 0 0; } .controller.ps3 .trigger.right { float: right; background-position: 0 0; } .controller.ps3 .trigger .trigger-pct-meter { top: 20px; left: 50%; transform: translateX(-50%) !important; font-size: 15px; white-space: nowrap; } .controller.ps3 .bumpers { position: absolute; width: 586px; height: 28px; left: 99px; top: 72px; } .controller.ps3 .bumper { width: 89px; height: 28px; background: url('../gamepads/PS3 Negro/ps3-assets/bumpers.png') no-repeat; opacity: 0; } .controller.ps3.white-skin .bumper { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/bumpers.png'); } .controller.ps3 .bumper.pressed { opacity: 1; } .controller.ps3 .bumper.left { float: left; transform: rotateY(180deg); } .controller.ps3 .bumper.right { float: right; } .controller.ps3 .meta { width: 44px; height: 44px; position: absolute; left: 370px; top: 281px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.08s ease, box-shadow 0.15s ease; } .controller.ps3 .meta.pressed { opacity: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(234, 88, 12, 0.2) 60%, transparent 70%); box-shadow: 0 0 16px rgba(234, 88, 12, 0.95), 0 0 28px rgba(255, 140, 0, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.7); } .controller.ps3 .arrows { position: absolute; width: 205px; height: 19px; top: 250px; left: 291px; } .controller.ps3 .back, .controller.ps3 .start { background: url('../gamepads/PS3 Negro/ps3-assets/menus.png') no-repeat; width: 34px; height: 19px; opacity: 0; } .controller.ps3.white-skin .back, .controller.ps3.white-skin .start { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/menus.png'); } .controller.ps3 .back.pressed, .controller.ps3 .start.pressed { background-position-y: -21px !important; opacity: 1; } .controller.ps3 .back { float: left; width: 38px; background-position: 0 0; } .controller.ps3 .start { float: right; width: 36px; background-position: -38px 0; } .controller.ps3 .abxy { position: absolute; width: 204px; height: 205px; top: 156px; left: 538px; } .controller.ps3 .button { position: absolute; width: 62px; height: 62px; background: url('../gamepads/PS3 Negro/ps3-assets/face-buttons.png') no-repeat; opacity: 1; } .controller.ps3.white-skin .button { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/face-buttons.png'); } .controller.ps3 .button.pressed { background-position-y: -63px !important; margin-top: 5px; opacity: 1; } .controller.ps3 .button.a { background-position: -188px 0; top: 142px; left: 71px; } .controller.ps3 .button.b { background-position: -125px 0; top: 71px; right: 0px; } .controller.ps3 .button.x { background-position: 0 0; top: 71px; left: 0px; } .controller.ps3 .button.y { background-position: -63px 0; top: 0px; left: 71px; } .controller.ps3 .sticks { position: absolute; width: 364px; height: 105px; top: 328px; left: 210px; } .controller.ps3 .stick { position: absolute; background: url('../gamepads/PS3 Negro/ps3-assets/thumbs.png') no-repeat; background-position: 0 0; height: 105px; width: 105px; will-change: transform; } .controller.ps3.white-skin .stick { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/thumbs.png'); } .controller.ps3 .stick.pressed.left { background-position-x: -106px !important; } .controller.ps3 .stick.pressed.right { background-position-x: -211px !important; } .controller.ps3 .stick.left { top: 0; left: 0; } .controller.ps3 .stick.right { top: 0; left: 259px; } .controller.ps3 .dpad { position: absolute; width: 140px; height: 132px; top: 192px; left: 74px; } .controller.ps3 .face { background: url('../gamepads/PS3 Negro/ps3-assets/dpad.png') no-repeat; position: absolute; opacity: 1; } .controller.ps3.white-skin .face { background-image: url('../gamepads/PS3 Blanco/ps3-white-assets/dpad.png'); } .controller.ps3 .face.up, .controller.ps3 .face.down { width: 38px; height: 52px; } .controller.ps3 .face.left, .controller.ps3 .face.right { width: 52px; height: 38px; } .controller.ps3 .face.up { left: 50px; top: 0; background-position: -92px 0px; } .controller.ps3 .face.down { left: 50px; top: 80px; background-position: -53px 0; } .controller.ps3 .face.left { top: 47px; left: 0; background-position: 0px 0; } .controller.ps3 .face.right { top: 47px; right: 0; background-position: -131px 0; } .controller.ps3 .face.pressed { background-position-y: -53px !important; margin-top: 2px; } /* ========================================================================== 4. SWITCH PRO / JOY-CON ========================================================================== */ .switch-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .switch-scaler { width: 550px; height: 420px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.switch-pro { background: url('../gamepads/Switch Pro/images/default/base.svg') no-repeat center; background-size: 550px 420px; width: 550px; height: 420px; position: absolute; top: 0; left: 0; } .controller.switch-pro .triggers { position: absolute; width: 550px; height: 40px; left: 0; top: 0; } .controller.switch-pro .trigger-button { position: absolute; background: url('../gamepads/Switch Pro/images/default/trigger-button.svg') no-repeat; background-size: 129.89px 54.08px; width: 65px; height: 25px; opacity: 0; transition: opacity 0.08s ease; } .controller.switch-pro .trigger-button.pressed { opacity: 1; background-position-y: -30px; } .controller.switch-pro .trigger-button.left { background-position-x: 0px; left: 191.25px; top: 0.5px; } .controller.switch-pro .trigger-button.right { background-position-x: -70px; left: 290.65px; top: 0.5px; } .controller.switch-pro .bumpers { position: absolute; width: 550px; height: 44px; left: 0; top: 0; } .controller.switch-pro .bumper { position: absolute; background: url('../gamepads/Switch Pro/images/default/bumper.svg') no-repeat; background-size: 131.9px 43.55px; width: 131.9px; height: 43.55px; opacity: 0; transition: opacity 0.08s ease; } .controller.switch-pro .bumper.pressed { opacity: 1; } .controller.switch-pro .bumper.left { right: 356.2px; top: 23.28px; transform: rotateY(180deg); } .controller.switch-pro .bumper.right { left: 353.2px; top: 22.28px; } .controller.switch-pro .meta { position: absolute; width: 26px; height: 26px; left: 300px; top: 121px; border-radius: 50%; cursor: pointer; } .controller.switch-pro .meta.pressed { background: rgba(0, 150, 255, 0.45); box-shadow: 0 0 14px #0096ff; } .controller.switch-pro .capture { position: absolute; width: 22px; height: 22px; left: 224px; top: 123px; border-radius: 4px; cursor: pointer; } .controller.switch-pro .capture.pressed { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 12px #fff; } .controller.switch-pro .arrows { position: absolute; width: 550px; height: 30px; left: 0; top: 0; } .controller.switch-pro .back, .controller.switch-pro .start { position: absolute; background: url('../gamepads/Switch Pro/images/default/plusminus.svg') no-repeat; background-size: 46px 44px; width: 23px; height: 22px; } .controller.switch-pro .back.pressed, .controller.switch-pro .start.pressed { background-position-y: -22px; } .controller.switch-pro .back { background-position: 0 0; left: 195.78px; top: 82.15px; } .controller.switch-pro .start { background-position: -23px 0px; left: 330.25px; top: 82.29px; } .controller.switch-pro .abxy { position: absolute; width: 550px; height: 420px; top: 0; left: 0; } .controller.switch-pro .button { position: absolute; background: url('../gamepads/Switch Pro/images/default/abxy.svg') no-repeat; background-size: 160px 82px; width: 40px; height: 41px; } .controller.switch-pro .button.pressed { background-position-y: -42px !important; } .controller.switch-pro .button.a { background-position: 0 0; left: 442.06px; top: 110.99px; } .controller.switch-pro .button.b { background-position: -40px 0; left: 399.25px; top: 147.21px; } .controller.switch-pro .button.x { background-position: -80px 0; left: 399.25px; top: 73.51px; } .controller.switch-pro .button.y { background-position: -120px 0; left: 356.85px; top: 110.11px; } .controller.switch-pro .sticks { position: absolute; width: 550px; height: 420px; top: 0; left: 0; } .controller.switch-pro .stick { position: absolute; background: url('../gamepads/Switch Pro/images/default/stick.svg') no-repeat; background-size: 135px 65px; background-position: -70px 0; height: 65px; width: 65px; will-change: transform; } .controller.switch-pro .stick.pressed { background-position: 0 0; } .controller.switch-pro .stick.left { left: 92.26px; top: 101.01px; } .controller.switch-pro .stick.right { left: 313.05px; top: 176.2px; } .controller.switch-pro .dpad { position: absolute; width: 550px; height: 420px; top: 0; left: 0; } .controller.switch-pro .face { position: absolute; background: url('../gamepads/Switch Pro/images/default/dpad.svg') no-repeat; background-size: 116.3px 56.6px; width: 29px; height: 29px; } .controller.switch-pro .face.pressed { background-position-y: -30px !important; } .controller.switch-pro .face.up { background-position-x: 0px; left: 176.9px; top: 169.5px; } .controller.switch-pro .face.down { background-position-x: -30px; left: 176.9px; top: 222.15px; } .controller.switch-pro .face.left { background-position-x: -60px; left: 150.9px; top: 195.8px; } .controller.switch-pro .face.right { background-position-x: -90px; left: 203.4px; top: 195.8px; } /* ========================================================================== 5. XBOX ONE (OG) ========================================================================== */ .xbox-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .xbox-scaler { width: 750px; height: 630px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.xbox-custom { background: url('../gamepads/XBOX OG Negro/images/base.svg') no-repeat center; background-size: 750px 630px; height: 630px; width: 750px; position: absolute; top: 0; left: 0; } .controller.xbox-custom.white-skin { background-image: url('../gamepads/XBOX OG Blanco/base-white.svg'); } .controller.xbox-custom .triggers { width: 446px; height: 121px; position: absolute; left: 152px; top: 0px; } .controller.xbox-custom .trigger { width: 88px; height: 121px; background: url('../gamepads/XBOX OG Negro/images/trigger.svg') no-repeat; opacity: 0; position: relative; } .controller.xbox-custom.white-skin .trigger { background-image: url('../gamepads/XBOX OG Blanco/trigger.svg'); } .controller.xbox-custom .trigger.left { float: left; background-position: 0 0; } .controller.xbox-custom .trigger.right { float: right; transform: rotateY(180deg); } .controller.xbox-custom .trigger.right .trigger-pct-meter { transform: translateX(-50%) rotateY(180deg); } .controller.xbox-custom .bumpers { position: absolute; width: 536px; height: 61px; left: 107px; top: 129px; } .controller.xbox-custom .bumper { width: 170px; height: 61px; background: url('../gamepads/XBOX OG Negro/images/bumper.svg') no-repeat; opacity: 0; transition: opacity 0.08s ease; } .controller.xbox-custom.white-skin .bumper { background-image: url('../gamepads/XBOX OG Blanco/bumper.svg'); } .controller.xbox-custom .bumper.pressed { opacity: 1; } .controller.xbox-custom .bumper.left { float: left; } .controller.xbox-custom .bumper.right { float: right; transform: rotateY(180deg); } .controller.xbox-custom .meta { width: 42px; height: 42px; position: absolute; left: 354px; top: 172px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.1s ease, box-shadow 0.15s ease; } .controller.xbox-custom .meta.pressed { opacity: 1; background: radial-gradient(circle, rgba(16, 124, 16, 0.4) 0%, rgba(16, 124, 16, 0.15) 60%, transparent 70%); box-shadow: 0 0 20px rgba(16, 124, 16, 0.95), 0 0 35px rgba(52, 211, 153, 0.85), inset 0 0 15px rgba(255, 255, 255, 0.6); } .controller.xbox-custom.white-skin .meta.pressed { opacity: 1; background-image: radial-gradient(circle, rgba(16, 124, 16, 0.4) 0%, rgba(16, 124, 16, 0.15) 60%, transparent 70%); } .controller.xbox-custom .arrows { position: absolute; width: 141px; height: 33px; top: 264px; left: 306px; } .controller.xbox-custom .back, .controller.xbox-custom .start { background: url('../gamepads/XBOX OG Negro/images/start-select.svg') no-repeat; width: 33px; height: 33px; opacity: 0; transition: opacity 0.08s ease; } .controller.xbox-custom.white-skin .back, .controller.xbox-custom.white-skin .start { background-image: url('../gamepads/XBOX OG Blanco/start-select.svg'); } .controller.xbox-custom .back.pressed, .controller.xbox-custom .start.pressed { opacity: 1; } .controller.xbox-custom .back { float: left; background-position: 0 0; } .controller.xbox-custom .start { float: right; background-position: -34px 0; } .controller.xbox-custom .abxy { position: absolute; width: 153px; height: 156px; top: 192px; left: 488px; } .controller.xbox-custom .button { position: absolute; width: 48px; height: 48px; background: url('../gamepads/XBOX OG Negro/images/abxy.svg') no-repeat; } .controller.xbox-custom.white-skin .button { background-image: url('../gamepads/XBOX OG Blanco/abxy.svg'); } .controller.xbox-custom .button.pressed { background-position-y: -48px !important; margin-top: 5px; opacity: 1; } .controller.xbox-custom .button.a { background-position: 0 0; top: 108px; left: 55px; } .controller.xbox-custom .button.b { background-position: -49px 0; top: 58px; right: 0px; } .controller.xbox-custom .button.x { background-position: -98px 0; top: 58px; left: 4px; } .controller.xbox-custom .button.y { background-position: -147px 0; top: 7px; left: 55px; } .controller.xbox-custom .sticks { position: absolute; width: 371px; height: 196px; top: 239px; left: 144px; } .controller.xbox-custom .stick { position: absolute; background: url('../gamepads/XBOX OG Negro/images/stick.svg') no-repeat; background-position: -85px 0; height: 83px; width: 83px; will-change: transform; } .controller.xbox-custom.white-skin .stick { background-image: url('../gamepads/XBOX OG Blanco/stick.svg'); } .controller.xbox-custom .stick.pressed { background-position: 0 0; } .controller.xbox-custom .stick.left { top: 0; left: 0; } .controller.xbox-custom .stick.right { top: 113px; right: 0; } .controller.xbox-custom .dpad { position: absolute; width: 110px; height: 111px; top: 345px; left: 223px; } .controller.xbox-custom .face { background: url('../gamepads/XBOX OG Negro/images/dpad.svg') no-repeat; position: absolute; opacity: 0; } .controller.xbox-custom.white-skin .face { background-image: url('../gamepads/XBOX OG Blanco/dpad.svg'); } .controller.xbox-custom .face.pressed { opacity: 1; } .controller.xbox-custom .face.up { background-position: -36px 0; left: 38px; top: 0px; width: 34px; height: 56px; } .controller.xbox-custom .face.down { background-position: 0 0; left: 38px; bottom: 0; width: 34px; height: 56px; } .controller.xbox-custom .face.left { background-position: 0 -93px; width: 55px; height: 35px; top: 38px; left: 0; } .controller.xbox-custom .face.right { background-position: 0 -57px; width: 55px; height: 35px; top: 38px; right: 0; } /* ========================================================================== 6. XBOX SERIES X/S ========================================================================== */ .xsx-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .xsx-scaler { width: 900px; height: 800px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.xsx-black { background: url('../gamepads/XBOX Series Negro/assets/controller_body.png') no-repeat; height: 800px; width: 900px; position: absolute; top: 0; left: 0; } .controller.xsx-black.disconnected { background: url('../gamepads/XBOX Series Negro/assets/disconnected_body.png') no-repeat; } .controller.xsx-black .triggers { width: 127px; height: 93px; top: 0px; left: 10px; position: absolute; } .controller.xsx-black .trigger { height: 142px; width: 900px; opacity: 0; } .controller.xsx-black .trigger.left { background: url('../gamepads/XBOX Series Negro/assets/trigger_left.png') no-repeat; left: -10px; position: absolute; } .controller.xsx-black .trigger.right { background: url('../gamepads/XBOX Series Negro/assets/trigger_right.png') no-repeat; left: -10px; position: absolute; } .controller.xsx-black .bumper { height: 800px; width: 900px; position: absolute; top: 0; left: 0; opacity: 0; } .controller.xsx-black .bumper.pressed { opacity: 1; } .controller.xsx-black .bumper.left { background: url('../gamepads/XBOX Series Negro/assets/bumper_left.png') no-repeat; } .controller.xsx-black .bumper.right { background: url('../gamepads/XBOX Series Negro/assets/bumper_right.png') no-repeat; } .controller.xsx-black .dpad { position: absolute; height: 800px; width: 900px; top: 0; left: 0; } .controller.xsx-black .face { position: absolute; opacity: 0; } .controller.xsx-black .face.up.pressed { background: url('../gamepads/XBOX Series Negro/assets/dpad_up_pressed.png') no-repeat; height: 800px; width: 900px; opacity: 1; } .controller.xsx-black .face.down.pressed { background: url('../gamepads/XBOX Series Negro/assets/dpad_down_pressed.png') no-repeat; height: 800px; width: 900px; opacity: 1; } .controller.xsx-black .face.left.pressed { background: url('../gamepads/XBOX Series Negro/assets/dpad_left_pressed.png') no-repeat; height: 800px; width: 900px; opacity: 1; } .controller.xsx-black .face.right.pressed { background: url('../gamepads/XBOX Series Negro/assets/dpad_right_pressed.png') no-repeat; height: 800px; width: 900px; opacity: 1; } .controller.xsx-black .arrows { position: absolute; width: 205px; height: 19px; top: 250px; left: 291px; } .controller.xsx-black .back, .controller.xsx-black .start { position: absolute; top: -249px; left: -290px; height: 800px; width: 900px; opacity: 0; } .controller.xsx-black .back.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_view_pressed.png') no-repeat; opacity: 1; } .controller.xsx-black .start.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_menu_pressed.png') no-repeat; opacity: 1; } .controller.xsx-black .abxy { position: absolute; height: 800px; width: 900px; top: 0; left: 0; } .controller.xsx-black .button { opacity: 1; position: absolute; height: 800px; width: 900px; top: 0; left: 0; } .controller.xsx-black .button.a { background: url('../gamepads/XBOX Series Negro/assets/button_a.png') no-repeat; } .controller.xsx-black .button.b { background: url('../gamepads/XBOX Series Negro/assets/button_b.png') no-repeat; } .controller.xsx-black .button.x { background: url('../gamepads/XBOX Series Negro/assets/button_x.png') no-repeat; } .controller.xsx-black .button.y { background: url('../gamepads/XBOX Series Negro/assets/button_y.png') no-repeat; } .controller.xsx-black .button.a.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_a_pressed.png') no-repeat; } .controller.xsx-black .button.b.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_b_pressed.png') no-repeat; } .controller.xsx-black .button.x.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_x_pressed.png') no-repeat; } .controller.xsx-black .button.y.pressed { background: url('../gamepads/XBOX Series Negro/assets/button_y_pressed.png') no-repeat; } .controller.xsx-black .sticks { position: absolute; width: 310px; height: 100px; top: 424px; left: 309px; } .controller.xsx-black .stick { position: absolute; background: url('../gamepads/XBOX Series Negro/assets/analog_stick.png') no-repeat; height: 100px; width: 100px; } .controller.xsx-black .stick.left { top: -140px; left: -139px; } .controller.xsx-black .stick.right { top: calc(100% - 105px); left: calc(100% - 100px); } .controller.xsx-black .stick.pressed.left, .controller.xsx-black .stick.pressed.right { filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 140, 0, 0.8)); } .controller.xsx-black .meta { position: absolute; width: 80px; height: 80px; top: 207px; left: 410px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.1s ease, box-shadow 0.15s ease; } .controller.xsx-black .meta.pressed { opacity: 1; background: radial-gradient(circle, rgba(16, 124, 16, 0.4) 0%, rgba(16, 124, 16, 0.15) 60%, transparent 70%); box-shadow: 0 0 20px rgba(16, 124, 16, 0.95), 0 0 35px rgba(52, 211, 153, 0.85), inset 0 0 15px rgba(255, 255, 255, 0.6); } /* ========================================================================== 7. NES (832px x 391px) ========================================================================== */ .nes-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .nes-scaler { width: 832px; height: 391px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.nes { background: url('../gamepads/NES/nes-assets/base.png') no-repeat center; background-size: 832px 391px; width: 832px; height: 391px; position: absolute; top: 0; left: 0; } .controller.nes .arrows { position: absolute; width: 189px; height: 22px; top: 251px; left: 288px; } .controller.nes .back, .controller.nes .start { background: url('../gamepads/NES/nes-assets/menu.png') no-repeat; width: 73px; height: 20px; opacity: 0; } .controller.nes .back.pressed, .controller.nes .start.pressed { background-position-y: -21px !important; margin-top: 4px; opacity: 1; } .controller.nes .back { float: left; } .controller.nes .start { float: right; } .controller.nes .abxy { position: absolute; width: 180px; height: 74px; top: 223px; left: 570px; } .controller.nes .button { position: absolute; width: 74px; height: 74px; background: url('../gamepads/NES/nes-assets/buttons.png') no-repeat; top: 0; opacity: 0; } .controller.nes .button.pressed { background-position-y: -77px !important; margin-top: 5px; opacity: 1; } .controller.nes .button.a { right: 0; } .controller.nes .button.b { left: 0px; } .controller.nes .dpad { position: absolute; width: 135px; height: 131px; top: 142px; left: 65px; } .controller.nes .face { background: url('../gamepads/NES/nes-assets/dpad.png') no-repeat; position: absolute; width: 38px; height: 38px; opacity: 0; } .controller.nes .face.up { left: 50px; top: 0; background-position: -37px 0; } .controller.nes .face.down { left: 50px; top: 98px; background-position: -74px 0; } .controller.nes .face.left { top: 49px; left: 0; background-position: 0px 0; } .controller.nes .face.right { top: 49px; right: 0px; background-position: -111px 0; } .controller.nes .face.pressed { background-position-y: -38px !important; opacity: 1; } /* ========================================================================== 8. GAMECUBE (978px x 837px) ========================================================================== */ .gc-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .gc-scaler { width: 978px; height: 837px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.gc { background: url('../gamepads/GameCube/gc-assets/base.svg') no-repeat center; background-size: 978px 837px; height: 837px; width: 978px; position: absolute; top: 0; left: 0; } .controller.gc .triggers { width: 775px; height: 95px; position: absolute; left: 102px; top: 0; } .controller.gc .trigger { width: 131px; height: 100%; background: url('../gamepads/GameCube/gc-assets/trigger.svg') no-repeat; opacity: 0; } .controller.gc .trigger.left { float: left; } .controller.gc .trigger.right { float: right; } .controller.gc .bumpers { position: absolute; width: 792px; height: 73px; left: 103px; top: 138px; } .controller.gc .bumper { width: 158px; height: 100%; background: url('../gamepads/GameCube/gc-assets/buttons.svg') no-repeat; background-position: -358px 0px; opacity: 0; } .controller.gc .bumper.pressed { opacity: 1; } .controller.gc .bumper.right { float: right; } .controller.gc .arrows { position: absolute; width: 50px; height: 50px; top: 324px; left: 465px; } .controller.gc .start { width: 43px; height: 43px; background: #E7E7E7; border-radius: 100%; border: solid 4.5px rgba(0, 0, 0, .65); background-clip: content-box; opacity: 0; float: right; } .controller.gc .start.pressed { opacity: 1; filter: invert(1); } .controller.gc .abxy { position: absolute; width: 288px; height: 230px; top: 207px; left: 640px; } .controller.gc .button { position: absolute; background: url('../gamepads/GameCube/gc-assets/buttons.svg') no-repeat; opacity: 0; } .controller.gc .button.pressed { opacity: 1; } .controller.gc .button.a { background-position: 0 0; width: 114px; height: 114px; bottom: 35px; left: 91px; } .controller.gc .button.b { width: 71px; height: 71px; background-position: -116px 0; bottom: 0px; left: 1px; } .controller.gc .button.x { width: 66px; height: 103px; background-position: -292px 0; top: 65px; right: 0px; } .controller.gc .button.y { width: 103px; height: 66px; background-position: -189px 0; left: 67px; top: 2px; } .controller.gc .sticks { position: absolute; width: 628px; height: 392px; top: 258px; left: 106px; } .controller.gc .stick { position: absolute; } .controller.gc .stick.left { top: 24px; left: 23px; background: url('../gamepads/GameCube/gc-assets/left-stick.svg') center no-repeat; height: 121px; width: 121px; will-change: transform; } .controller.gc .stick.right { top: calc(100% - 127px); left: calc(100% - 125px); background: url('../gamepads/GameCube/gc-assets/cstick.svg') center no-repeat; width: 84px; height: 84px; will-change: transform; } .controller.gc .dpad { position: absolute; width: 130px; height: 130px; top: 497px; left: 263px; } .controller.gc .face { background: url('../gamepads/GameCube/gc-assets/dpad.svg') no-repeat; position: absolute; opacity: 0; } .controller.gc .face.up, .controller.gc .face.down { width: 44px; height: 65px; } .controller.gc .face.left, .controller.gc .face.right { width: 65px; height: 44px; } .controller.gc .face.up { left: 42px; top: 0; background-position: 0px 0px; } .controller.gc .face.down { left: 42px; bottom: 0; background-position: -46px 0; } .controller.gc .face.left { top: 43px; left: 0; background-position: -93px 0; } .controller.gc .face.right { top: 43px; right: 0px; background-position: -160px 0; } .controller.gc .face.pressed { opacity: 1; } /* ========================================================================== 9. FLIGHTPAD PRO (938px x 755px) ========================================================================== */ .fpp-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .fpp-scaler { width: 938px; height: 755px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.fpp { background: url('../gamepads/FlightPad Pro/fpp-assets/base.svg') no-repeat center; background-size: 938px 755px; height: 755px; width: 938px; position: absolute; top: 0; left: 0; } .controller.fpp .triggers { width: 684px; height: 104px; position: absolute; left: 145px; top: 0; } .controller.fpp .trigger { width: 96px; height: 104px; background: url('../gamepads/FlightPad Pro/fpp-assets/triggers.svg') no-repeat; opacity: 0; } .controller.fpp .trigger.left { float: left; } .controller.fpp .trigger.right { float: right; background-position-x: -98px; } .controller.fpp .bumpers { position: absolute; width: 816px; height: 76px; left: 65px; top: 115px; } .controller.fpp .bumper { width: 221px; height: 75px; background: url('../gamepads/FlightPad Pro/fpp-assets/bumpers.svg') no-repeat; opacity: 0; } .controller.fpp .bumper.pressed { opacity: 1; } .controller.fpp .bumper.left { float: left; } .controller.fpp .bumper.right { background-position-x: -223px; float: right; } .controller.fpp .arrows { position: absolute; width: 175px; height: 43px; top: 550px; left: 480px; } .controller.fpp .back, .controller.fpp .start { width: 81px; height: 43px; opacity: 0; } .controller.fpp .back.pressed, .controller.fpp .start.pressed { background: url('../gamepads/FlightPad Pro/fpp-assets/buttons.svg') no-repeat; opacity: 1; } .controller.fpp .start.pressed { background-position-x: -83px; } .controller.fpp .back { float: left; } .controller.fpp .start { transform: translateX(-29px); float: right; } .controller.fpp .abxy { position: absolute; width: 201px; height: 205px; top: 235px; left: 600px; } .controller.fpp .button { position: absolute; width: 70px; height: 70px; background: url('../gamepads/FlightPad Pro/fpp-assets/buttons.svg') no-repeat; opacity: 0; } .controller.fpp .button.pressed { opacity: 1; } .controller.fpp .button.a { background-position: 0 0; top: 135px; left: 57px; } .controller.fpp .button.b { background-position: -70px 0; top: 79px; right: 0px; } .controller.fpp .button.x { background-position: -140px 0; top: 67px; left: 0px; } .controller.fpp .button.y { background-position: -210px 0; left: 75px; top: 11px; } .controller.fpp .sticks { position: absolute; width: 114px; height: 114px; top: 386px; left: 215px; } .controller.fpp .stick { position: absolute; background: url('../gamepads/FlightPad Pro/fpp-assets/sticks.svg') no-repeat; height: 114px; width: 114px; will-change: transform; } .controller.fpp .stick.pressed.left { background-position-x: -115px; } .controller.fpp .stick.left { top: 0; left: 0; } .controller.fpp .dpad { position: absolute; width: 157px; height: 156px; top: 242px; left: 69px; } .controller.fpp .face { background: url('../gamepads/FlightPad Pro/fpp-assets/dpad.svg') no-repeat; position: absolute; opacity: 0; } .controller.fpp .face.pressed { opacity: 1; } .controller.fpp .face.up, .controller.fpp .face.down { width: 110px; height: 78px; } .controller.fpp .face.left, .controller.fpp .face.right { width: 78px; height: 111px; } .controller.fpp .face.up { left: 23px; top: 0; background-position: 0 0px; } .controller.fpp .face.down { left: 23px; bottom: 2px; background-position: -111px 0; } .controller.fpp .face.left { top: 22px; left: 1px; background-position: -222px 0; } .controller.fpp .face.right { top: 22px; right: 0px; background-position: -303px 0; } /* ========================================================================== 10. XBOX 360 / FALLBACK (668px x 544px) ========================================================================== */ .xbox360-container { width: 100%; max-width: 480px; position: relative; display: none; justify-content: center; align-items: flex-start; margin: 0 auto; } .xbox360-scaler { width: 668px; height: 544px; position: relative; transform-origin: top center; flex-shrink: 0; } .controller.xbox360 { background: url('../gamepads/Xbox 360/xbox-assets-old/bg.png') no-repeat center; background-size: 668px 544px; width: 668px; height: 544px; position: absolute; top: 0; left: 0; } .controller.xbox360.white-skin { background-image: url('../gamepads/XBOX 360 Blanco/xbox-assets-old/bg.png'); } .controller.xbox360 .triggers { width: 430px; height: 76px; position: absolute; left: 119px; top: 0px; } .controller.xbox360 .trigger { width: 33px; height: 76px; background: url('../gamepads/Xbox 360/xbox-assets-old/trigger.png') no-repeat; opacity: 0; position: relative; } .controller.xbox360 .trigger.left { float: left; background-position: 0 0; } .controller.xbox360 .trigger.right { float: right; background-position: 0 -77px; } .controller.xbox360 .bumpers { position: absolute; width: 516px; height: 44px; left: 76px; top: 84px; } .controller.xbox360 .bumper { width: 119px; height: 44px; background: url('../gamepads/Xbox 360/xbox-assets-old/bumper.png') no-repeat; opacity: 0; } .controller.xbox360 .bumper.pressed { opacity: 1; } .controller.xbox360 .bumper.left { float: left; } .controller.xbox360 .bumper.right { float: right; transform: rotateY(180deg); } .controller.xbox360 .meta { position: absolute; background: url('../gamepads/Xbox 360/xbox-assets-old/quadrant.png') no-repeat center; height: 100px; width: 100px; top: 165px; left: 284px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.1s ease; } .controller.xbox360 .meta.pressed { opacity: 1; box-shadow: 0 0 16px rgba(0, 255, 0, 0.8); } .controller.xbox360 .arrows { position: absolute; width: 180px; height: 29px; top: 200px; left: 244px; } .controller.xbox360 .back, .controller.xbox360 .start { background: url('../gamepads/Xbox 360/xbox-assets-old/arrow.png') no-repeat; width: 34px; height: 29px; opacity: 0; } .controller.xbox360 .back.pressed, .controller.xbox360 .start.pressed { background-position: 0 -30px; opacity: 1; } .controller.xbox360 .back { float: left; transform: rotateY(180deg); } .controller.xbox360 .start { float: right; } .controller.xbox360 .abxy { position: absolute; width: 161px; height: 160px; top: 125px; left: 451px; } .controller.xbox360 .button { position: absolute; width: 54px; height: 54px; opacity: 1; } .controller.xbox360 .button.a { width: 53px; height: 53px; background: url('../gamepads/Xbox 360/xbox-assets-old/a.png') no-repeat; top: 108px; left: 55px; } .controller.xbox360 .button.b { background: url('../gamepads/Xbox 360/xbox-assets-old/b.png') no-repeat; top: 54px; right: 0px; } .controller.xbox360 .button.x { background: url('../gamepads/Xbox 360/xbox-assets-old/x.png') no-repeat; top: 54px; left: 0px; } .controller.xbox360 .button.y { width: 55px; height: 54px; background: url('../gamepads/Xbox 360/xbox-assets-old/y.png') no-repeat; top: 0px; left: 54px; } .controller.xbox360 .button.pressed { background-position: 0 -55px !important; margin-top: 6px; } .controller.xbox360 .button.pressed.a { background-position: 0 -54px !important; } .controller.xbox360 .button.pressed.y { background-position: 0 -56px !important; } .controller.xbox360 .sticks { position: absolute; width: 383px; height: 208px; top: 167px; left: 89px; } .controller.xbox360 .stick { position: absolute; background: url('../gamepads/Xbox 360/xbox-assets-old/stick.png') no-repeat; height: 86px; width: 86px; will-change: transform; } .controller.xbox360 .stick.pressed { background-position: 0 -87px; } .controller.xbox360 .stick.left { top: 0; left: 0; } .controller.xbox360 .stick.right { top: calc(100% - 86px); left: calc(100% - 86px); } .controller.xbox360 .dpad { position: absolute; width: 112px; height: 112px; top: 273px; left: 174px; } .controller.xbox360 .face { position: absolute; border-radius: 4px; opacity: 0; background: rgba(255, 140, 0, 0.7); box-shadow: 0 0 10px rgba(255, 140, 0, 0.9); transition: opacity 0.08s ease; } .controller.xbox360 .face.up, .controller.xbox360 .face.down { width: 34px; height: 40px; } .controller.xbox360 .face.left, .controller.xbox360 .face.right { width: 40px; height: 34px; } .controller.xbox360 .face.up { left: 39px; top: 0; } .controller.xbox360 .face.down { left: 39px; bottom: 0; } .controller.xbox360 .face.left { top: 39px; left: 0; } .controller.xbox360 .face.right { top: 39px; right: 0; } .controller.xbox360 .face.pressed { opacity: 1; } .stick.drift-warning { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.95)) !important; }