diff --git a/PS5_White.css b/PS5_White.css index 85282d8..f9cdbcb 100644 --- a/PS5_White.css +++ b/PS5_White.css @@ -1,287 +1,156 @@ -/*BEGIN PS4 Controller Styling*/ -.controller.ds4 { - background: url(White_SkinNo_Buttons.png); - height: 700px; - width: 1200px; - /* margin-left: -403px; - margin-top: -280px;*/ +body { + background-color: #000000; + background-color: RGBA(0, 0, 0, 0); + margin: 0 auto; + overflow: hidden; } - -.ds4.disconnected div { - display: none; +.controller.xbox { + background: url(https://i.imgur.com/fJIyBwn.png); + width: 807px; + height: 651px; + margin-left: 0; + margin-top: 0; } - -.ds4 .triggers { - width: 598px; - height: 90px; - position: absolute; - left: 299px; - top: 38px; +.xbox .sticks { + width: 367px; + height: 100px; + left: 220px; + top: 333px; } - -.ds4 .trigger { - width: 99px; - height: 100%; - background: url(Trigger_Pressed.png); - opacity: 0; +.xbox .stick { + background: url(https://i.imgur.com/nXaGdI2.png); + width: 100px; + height: 100px; } - -.ds4 .trigger.left { - float: left; +.xbox .stick.pressed { + background-position: -102px 0; } - -.ds4 .trigger.right { - float: right; - background-position-x: 99px; +.xbox .stick.right { + top: 0; + left: 267px; } - -.ds4 .bumper { - width: 200px; - height: 45px; - background: url(Bumper.png) no-repeat; - opacity: 0; +.xbox .abxy { + width: 181px; + height: 181px; + left: 573px; + top: 178px; } - -.ds4 .bumpers { - position: absolute; - width: 672px; - height: 23px; - left: 263px; - top: 132px; +.xbox .button { + background: url(https://i.imgur.com/DVqDSsJ.png); + width: 58px; + height: 58px; } - -.ds4 .bumper.pressed { - opacity: 0.8; +.xbox .button.pressed { + background-position-y: -59px; + margin-top: 0; } - -.ds4 .bumper.left { - /* -webkit-transform: rotateY(180deg); */ - /* transform: rotateY(180deg); */ - float: left; +.xbox .a { + background-position: 0 0; + left: 61px; + top: 123px; } - -.ds4 .bumper.right { - float: right; - transform: rotateY(180deg); +.xbox .b { + background-position: -59px 0; + left: 123px; + top: 62px; } - -.ds4 .touchpad { - width: 350px; - height: 300px; - position: absolute; - left: 422px; - top: 74px; +.xbox .x { + background-position: -118px 0; + left: 0px; + top: 61px; } - -.ds4 .touchpad.pressed { - background: url(Touchpad.png) no-repeat center; +.xbox .y { + background-position: -177px 0; + left: 61px; + top: 0px; } - -.ds4 .meta { - width: 100px; - height: 100px; - position: absolute; - left: 546px; - bottom: 264px; +.xbox .arrows { + left: 195px; + top: 140px; + width: 416px; + height: 57px; } - -.ds4 .meta.pressed { - background: url(Home.png) no-repeat center; +.xbox .quadrant { + display: none; } - -.ds4 .p0{ -background-position: 0 -6px; +.xbox .back, +.xbox .start { + background: url(https://i.imgur.com/YJRVQxC.png); + width: 27px; + height: 57px; + opacity: 0; } -.ds4 .p1{ -background-position: 0 -28px; +.xbox .start { + background-position: 27px 0; + float: right; } -.ds4 .p2{ -background-position: 0 -49px; +.xbox .dpad { + width: 144px; + height: 144px; + left: 71px; + top: 196px; } -.ds4 .p3{ -background-position: 0 -70px; -}*/ -.ds4 .arrows { - position: absolute; - width: 352px; - height: 46px; - top: 142px; - left: 227px; +.xbox .face { + background: url(https://i.imgur.com/hCmzXWK.png); + position: absolute; + opacity: 0; } - -.ds4 .back, .ds4 .start { - background: url(Select.png); - width: 26px; - height: 43px; - opacity: 0; +.xbox .face.up { + background-position: 0 -68px; + width: 52px; + height: 63px; + left: 46px; } -.ds4 .start { - position: absolute; - left: 546px; - bottom: -30px; +.xbox .face.down { + background-position: -54px 63px; + width: 52px; + height: 63px; + left: 46px; + top: 81px; } -.ds4 .back { - position: absolute; - left: 170px; - bottom: -30px; +.xbox .face.left { + background-position: -108px -68px; + width: 64px; + height: 52px; + left: -1px; + top: 47px; } - - -.ds4 .back.pressed, .ds4 .start.pressed { - /* background-position-y: -21px; */ - /* margin-top: 2px; */ - opacity: 1; +.xbox .face.right { + background-position: -175px -68px; + width: 63px; + height: 52px; + left: 81px; + top: 46px; } - -.ds4 .back { - float: left; - /* width: 28px; */ +.xbox .bumpers { + width: 620px; + height: 35px; + left: 93px; + top: 114px; } - -.ds4 .start { - float: right; - /* width: 28px; */ - background-position: 0px 0; +.xbox .bumper { + background: url(https://i.imgur.com/2YssqRT.png); + width: 110px; + height: 35px; + opacity: 0; } - -.ds4 .abxy { - position: absolute; - width: 170px; - height: 171px; - top: 200px; - left: 762px; +.xbox .triggers { + width: 619px; + height: 108px; + left: 94px; } - -.ds4 .button { - position: absolute; - width: 55px; - height: 55px; - background: url(FaceButtons.png); +.xbox .trigger { + background: url(https://i.imgur.com/LsxmGBD.png); + width: 111px; + height: 108px; + opacity: 0; } - -.ds4 .button.pressed { - background-position-y: 55px; - /* margin-top: 5px; */ +.xbox .trigger.right { + background-position: -113px 0; + transform: rotateY(0); } - -.ds4 .a { - background-position: 0 0; - bottom: 0px; - left: 58px; -} - -.ds4 .b { - background-position: -57px 0; - top: 57px; - right: -3px; -} - -.ds4 .x { - background-position: -113px 0; - top: 57px; -} - -.ds4 .y { - background-position: 55px 0; - left: 58px; - bottom: 119px; -} - -.ds4 .sticks { - position: absolute; - width: 364px; - height: 105px; - top: 348px; - left: 422px; -} - -.ds4 .stick { - position: absolute; - background: url(Sticks.png); - height: 94px; - width: 94px; -} - -.ds4 .stick.pressed.left { - background-position-x: -96px; -} - -.ds4 .stick.pressed.right { - background-position-x: -192px; -} - -.ds4 .stick.left { - top: 0; - left: 0; -} - -.ds4 .stick.right { - top: calc(100% - 105px); - left: calc(100% - 105px); -} - -.ds4 .dpad { - position: absolute; - width: 125px; - height: 126px; - top: 220px; - left: 286px; -} - -.ds4 .face { - background: url(Dpad.png); - position: absolute; -} - -.ds4 .face.up, .ds4 .face.down { - width: 37px; - height: 52px; -} - -.ds4 .face.left, .ds4 .face.right { - width: 52px; - height: 40px; -} - -.ds4 .face.up { - left: 44px; - top: 0; - background-position: -37px 0px; -} - -.ds4 .face.down { - left: 44px; - bottom: 0; - background-position: 0px 0; -} - -.ds4 .face.left { - top: 45px; - left: 0; - background-position: 104px 0; -} - -.ds4 .face.right { - top: 45px; - right: 0px; - background-position: 52px 0; -} - -.ds4 .face.pressed { - /* margin-top: 5px; */ - background-position-y: 52px; -} - -.ds4.half { - margin-top: -300px; -} - -/*END PS4 Controller Styling*/ - -.ds4.white .back, .ds4 .start { - background-image: url(Start.png); - width: 26px; - height: 43px; -} - -/*END PS4 White Controller Styling*/ \ No newline at end of file +/* +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/ +*/