add button

src/assets/main.css

@@ -16,22 +16,6 @@
   margin-right: 15px;
 }
 
-.button-custom {
-  margin-left: auto;
-  background-color: var(--main-color);
-  font-weight: 600;
-  color: white;
-}
-
-.button-custom:hover {
-  background-color: var(--main-color);
-  opacity: 0.9;
-}
-
-.button-custom:disabled {
-  opacity: 0.5;
-}
-
 .button-dialog {
   background-color: var(--main-color);
   font-weight: 600;

src/components/GameWindow.vue

@@ -229,9 +229,10 @@ onMounted(() => {
         <div class="center-block-custom">
           <form @submit.prevent="addAction">
             <div class="controller">
-              <input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
+              <input class="game-input-run" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
                 :disabled="gameState !== 'RUN'">
-              <button class="button-custom" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
+              <div class="game-button-run-shadow"></div>
+              <button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
             </div>
           </form>
         </div>
@@ -290,6 +291,7 @@ onMounted(() => {
 <style scoped>
 body {
   overflow: hidden;
+  background-color: gray;
 }
 
 .hr {
@@ -298,6 +300,8 @@ body {
 
 .body-custom {
   font-size: medium;
+  background-color: gray;
+  height: 100vh;
 }
 
 .info-custom {
@@ -323,8 +327,8 @@ body {
 }
 
 .game-input-form {
-  height: 90px;
+  height: 76px;
-  padding: 20px;
+  padding: 13px;
   position: relative;
   z-index: 1000;
 }
@@ -337,7 +341,7 @@ body {
   position: absolute;
   box-shadow: 0px -5px 10px black;
   z-index: 9;
-  background-color: aqua;
+  background-color: black;
 }
 
 .message-cloud {
@@ -462,7 +466,7 @@ body {
   top: 10px;
   box-shadow: 0px 5px 10px black;
   z-index: 9;
-  background-color: aqua;
+  background-color: black;
 }
 
 .game-header-belt {
@@ -478,7 +482,7 @@ body {
   height: 60px;
   top: 30px;
   position: absolute;
-  background-color: aqua;
+  background-color: black;
   box-shadow: 0px 5px 10px black;
 }
 
@@ -498,4 +502,42 @@ body {
   vertical-align: middle;
   font-weight: 700;
 }
+
+.game-button-run {
+  background-image: url("@/assets/button.png");
+  background-size: cover;
+  font-size: 1.5em;
+  color: white;
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 155px;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+.game-button-run-shadow {
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 150px;
+  box-shadow: -5px 5px 10px black;
+}
+
+.game-button-run:hover {
+  /* TODO */
+}
+
+.game-button-run:disabled {
+  /* TODO */
+}
+
+.game-input-run {
+  height: 50px;
+  width: calc(100% - 150px);
+}
 </style>