API tools faq
paste
corumbaplay

xbox

corumbaplay
Apr 19th, 2024 (edited)
17
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.31 KB | Gaming | 0 0
raw download clone embed print report
  1. /*BEGIN Xbox One Controller Styling*/
  2. .controller.xbox {
  3. background: url((https://rawgit.com/EelzTwitch/controller-ocean-shadow/master/assets/base.svg);
  4. height: 630px;
  5. width: 750px;
  6. /* margin-left: -375px;
  7. margin-top: -285px;*/
  8. }
  9.  
  10. .xbox.white {
  11. background: url(https://rawgit.com/EelzTwitch/controller-ocean-shadow/master/assets/base.svg);
  12.  
  13. }
  14.  
  15. .xbox.disconnected {
  16. background: url(https://app.gpv.gg/?p=1&s=0&css=https%3A%2F%2Fpastebin.com%2Fraw%2Fs7LtrRPw);
  17. }
  18.  
  19. .xbox.disconnected div {
  20. display: none;
  21. }
  22.  
  23. .xbox .triggers {
  24. width: 446px;
  25. height: 121px;
  26. position: absolute;
  27. left: 152px;
  28. }
  29.  
  30. .xbox .trigger {
  31. width: 88px;
  32. height: 121px;
  33. background: url(xbox-assets/trigger.svg);
  34. opacity: 0;
  35. }
  36.  
  37. .xbox .trigger.left {
  38. float: left;
  39. background-position: 0 0;
  40. }
  41.  
  42. .xbox .trigger.right {
  43. float: right;
  44. transform: rotateY(180deg);
  45. }
  46.  
  47. .xbox .bumper {
  48. width: 170px;
  49. height: 61px;
  50. background: url(xbox-assets/bumper.svg);
  51. opacity: 0;
  52. }
  53.  
  54. .xbox .bumpers {
  55. position: absolute;
  56. width: 536px;
  57. height: 61px;
  58. left: 107px;
  59. top: 129px;
  60. }
  61.  
  62. .xbox .bumper.pressed {
  63. opacity: 1;
  64. }
  65.  
  66. .xbox .bumper.left {
  67. float: left;
  68. }
  69.  
  70. .xbox .bumper.right {
  71. float: right;
  72. -webkit-transform: rotateY(180deg);
  73. transform: rotateY(180deg);
  74. }
  75.  
  76. .xbox .quadrant {
  77. position: absolute;
  78. background: url(xbox-assets/quadrant.svg);
  79. height: 45px;
  80. width: 45px;
  81. top: 258px;
  82. left: 354px;
  83. z-index: 0;
  84. }
  85.  
  86. .xbox .p0 {
  87. -webkit-transform: rotate(0deg);
  88. transform: rotate(0deg);
  89. }
  90.  
  91. .xbox .p1 {
  92. -webkit-transform: rotate(90deg);
  93. transform: rotate(90deg);
  94. }
  95.  
  96. .xbox .p2 {
  97. -webkit-transform: rotate(270deg);
  98. transform: rotate(270deg);
  99. }
  100.  
  101. .xbox .p3 {
  102. -webkit-transform: rotate(180deg);
  103. transform: rotate(180deg);
  104. }
  105.  
  106. .xbox .arrows {
  107. position: absolute;
  108. width: 141px;
  109. height: 33px;
  110. top: 264px;
  111. left: 306px;
  112. }
  113.  
  114. .xbox .back, .xbox .start {
  115. background: url(xbox-assets/start-select.svg);
  116. width: 33px;
  117. height: 33px;
  118. opacity: 0;
  119. }
  120.  
  121. .xbox .back.pressed, .xbox .start.pressed {
  122. opacity: 1;
  123. }
  124.  
  125. .xbox .back {
  126. float: left;
  127. }
  128.  
  129. .xbox .start {
  130. background-position: 33px 0px;
  131. float: right;
  132. }
  133.  
  134. .xbox .abxy {
  135. position: absolute;
  136. width: 153px;
  137. height: 156px;
  138. top: 192px;
  139. left: 488px;
  140. }
  141.  
  142. .xbox .button {
  143. position: absolute;
  144. background: url(xbox-assets/abxy.svg);
  145. width: 48px;
  146. height: 48px;
  147. }
  148.  
  149. .xbox .button.pressed {
  150. background-position-y: -48px;
  151. margin-top: 5px;
  152. opacity: 1;
  153. }
  154.  
  155. .xbox .a {
  156. background-position: 0 0;
  157. top: 108px;
  158. left: 55px;
  159. }
  160.  
  161. .xbox .b {
  162. background-position: -49px 0;
  163. top: 58px;
  164. right: 0px;
  165. }
  166.  
  167. .xbox .x {
  168. background-position: -98px 0;
  169. top: 58px;
  170. left: 4px;
  171. }
  172.  
  173. .xbox .y {
  174. background-position: 48px 0;
  175. left: 55px;
  176. top: 7px;
  177. }
  178.  
  179. .xbox .sticks {
  180. position: absolute;
  181. width: 371px;
  182. height: 196px;
  183. top: 239px;
  184. left: 144px;
  185. }
  186.  
  187. .xbox .stick {
  188. position: absolute;
  189. background: url(xbox-assets/stick.svg);
  190. background-position: -85px 0;
  191. height: 83px;
  192. width: 83px;
  193. }
  194.  
  195. .xbox .stick.pressed {
  196. background-position: 0 0;
  197. }
  198.  
  199. .xbox .stick.left {
  200. top: 0;
  201. left: 0;
  202. }
  203.  
  204. .xbox .stick.right {
  205. top: 113px;
  206. left: 288px;
  207. }
  208.  
  209. .xbox .dpad {
  210. position: absolute;
  211. width: 110px;
  212. height: 111px;
  213. top: 345px;
  214. left: 223px;
  215. }
  216.  
  217. .xbox .face {
  218. background: url(xbox-assets/dpad.svg);
  219. position: absolute;
  220. opacity: 0;
  221. }
  222.  
  223. .xbox .face.pressed {
  224. opacity: 1;
  225. }
  226.  
  227. .xbox .face.up {
  228. background-position: 34px 0;
  229. left: 38px;
  230. top: 0px;
  231. width: 34px;
  232. height: 56px;
  233. }
  234.  
  235. .xbox .face.down {
  236. left: 38px;
  237. bottom: 0;
  238. width: 34px;
  239. height: 56px;
  240. }
  241.  
  242. .xbox .face.left {
  243. background-position: 0 -93px;
  244. width: 55px;
  245. height: 35px;
  246. top: 38px;
  247. left: 0;
  248. }
  249.  
  250. .xbox .face.right {
  251. background-position: 0 -57px;
  252. width: 55px;
  253. height: 35px;
  254. top: 38px;
  255. right: 0;
  256. }
  257.  
  258. .xbox.half {
  259. margin-top: -315px;
  260. }
  261.  
  262. .xbox {
  263. background: no-repeat center;
  264. }
  265.  
  266. /*END Xbox One Controller Styling*/
  267.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!