fix

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;
+}

src/components/BeltBlock.vue

@@ -20,9 +20,8 @@
 
 .shadow {
   height: 10px;
-  width: 120%;
+  width: 100%;
   position: absolute;
-  left: -10%;
   background-color: black;
 }
 

src/components/BeltMiniBlock.vue

@@ -19,8 +19,7 @@
 
 .shadow {
   height: 10px;
-  width: 120%;
+  width: 100%;
-  left: -10%;
   position: absolute;
   bottom: 5px;
   background-color: black;

src/components/GameHeader.vue

@@ -2,10 +2,14 @@
 import BeltMiniBlock from './BeltMiniBlock.vue';
 import BeltBlock from './BeltBlock.vue';
 import HeaderText from './HeaderText.vue';
+import MetalPlate from './MetalPlate.vue';
 </script>
 
 <template>
   <div class="game-header">
+    <div class="center">
+      <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
+      <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
       <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
       <BeltMiniBlock class="belt-mini"></BeltMiniBlock>
       <BeltBlock class="belt">
@@ -19,6 +23,7 @@ import HeaderText from './HeaderText.vue';
         </div>
       </BeltBlock>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -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;
+}
 </style>

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 */
-}
 </style>