diff --git a/src/assets/belt.png b/src/assets/belt.png index e3267c8..282296f 100644 Binary files a/src/assets/belt.png and b/src/assets/belt.png differ diff --git a/src/assets/belt_mini.png b/src/assets/belt_mini.png index b21ae73..03aa9dd 100644 Binary files a/src/assets/belt_mini.png and b/src/assets/belt_mini.png differ diff --git a/src/assets/main.css b/src/assets/main.css index 18999aa..a4fdb89 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -36,3 +36,18 @@ body { align-items: center; justify-content: center; } + +.controller-metal { + width: 30px; + height: calc(100% + 2px); + position: absolute; + top: -1px; +} + +.controller-metal-left { + left: -15px; +} + +.controller-metal-right { + right: -15px; +} diff --git a/src/components/BeltBlock.vue b/src/components/BeltBlock.vue index e202133..4072cfd 100644 --- a/src/components/BeltBlock.vue +++ b/src/components/BeltBlock.vue @@ -20,9 +20,8 @@ .shadow { height: 10px; - width: 120%; + width: 100%; position: absolute; - left: -10%; background-color: black; } diff --git a/src/components/BeltMiniBlock.vue b/src/components/BeltMiniBlock.vue index 4bf6a5f..0977649 100644 --- a/src/components/BeltMiniBlock.vue +++ b/src/components/BeltMiniBlock.vue @@ -19,8 +19,7 @@ .shadow { height: 10px; - width: 120%; - left: -10%; + width: 100%; position: absolute; bottom: 5px; background-color: black; diff --git a/src/components/GameHeader.vue b/src/components/GameHeader.vue index 5a098d4..45ae006 100644 --- a/src/components/GameHeader.vue +++ b/src/components/GameHeader.vue @@ -2,22 +2,27 @@ import BeltMiniBlock from './BeltMiniBlock.vue'; import BeltBlock from './BeltBlock.vue'; import HeaderText from './HeaderText.vue'; +import MetalPlate from './MetalPlate.vue'; @@ -31,6 +36,12 @@ import HeaderText from './HeaderText.vue'; z-index: 2000; } +.center { + position: relative; + max-width: 1920px; + margin: 0 auto; +} + .logo { width: 90px; height: 88px; @@ -59,4 +70,20 @@ import HeaderText from './HeaderText.vue'; align-items: center; justify-content: left; } + +.controller-metal { + width: 30px; + height: calc(100% + 2px); + position: absolute; + top: -1px; + z-index: 15; +} + +.controller-metal-left { + left: -30px; +} + +.controller-metal-right { + right: -30px; +} diff --git a/src/components/GameInputForm.vue b/src/components/GameInputForm.vue index 541b57a..ba75c05 100644 --- a/src/components/GameInputForm.vue +++ b/src/components/GameInputForm.vue @@ -65,6 +65,8 @@ async function addAction() { height: 76px; position: relative; z-index: 1000; + margin: 0 auto; + max-width: 1920px; } .controller-metal { @@ -75,11 +77,11 @@ async function addAction() { } .controller-metal-left { - left: -15px; + left: -30px; } .controller-metal-right { - right: -15px; + right: -30px; } .controller { @@ -90,9 +92,9 @@ async function addAction() { .game-input { position: relative; top: 14px; - left: 25px; + left: 15px; height: 50px; - width: calc(100% - 150px - 35px); + width: calc(100% - 150px - 25px); } .game-input-run { @@ -139,12 +141,4 @@ async function addAction() { margin: 0; padding: 0; } - -.game-button-run:hover { - /* TODO */ -} - -.game-button-run:disabled { - /* TODO */ -}