fix

src/components/GameWindow.vue

@@ -209,10 +209,13 @@ onMounted(() => {
 
   <div class="body-custom">
 
-    <div>
+    <div class="game-header">
       <div class="game-header-empty-block"></div>
       <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
-      <BeltMiniBlock class="game-header-belt-mini"></BeltMiniBlock>
+      <div class="game-header-belt-mini-shadow"></div>
+      <BeltMiniBlock class="game-header-belt-mini">
+      </BeltMiniBlock>
+      <div class="game-header-belt-shadow"></div>
       <BeltBlock class="game-header-belt center-bold-text">
         <!-- Вечерний детектив -->
         <!-- <span class="team-name-block text-truncate">{{ team.name }}</span> -->
@@ -220,7 +223,9 @@ onMounted(() => {
     </div>
 
     <!-- Форма ввода -->
-    <BeltBlock class="form-custom">
+    <div class="form-custom">
+      <div class="game-input-form-shadow"></div>
+      <BeltBlock class="game-input-form">
         <div class="center-block-custom">
           <form @submit.prevent="addAction">
             <div class="controller">
@@ -231,6 +236,7 @@ onMounted(() => {
           </form>
         </div>
       </BeltBlock>
+    </div>
 
     <!-- Действия -->
     <div class="messages-block" ref="scrollContainer">
@@ -308,13 +314,30 @@ body {
 }
 
 .form-custom {
-  border: 1px solid #444444;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
-  padding: 20px;
   color: white;
+  z-index: 1000;
+}
+
+.game-input-form {
+  height: 90px;
+  padding: 20px;
+  position: relative;
+  z-index: 1000;
+}
+
+.game-input-form-shadow {
+  height: 90px;
+  width: 120%;
+  left: -10%;
+  top: 3px;
+  position: absolute;
+  box-shadow: 0px -5px 10px black;
+  z-index: 9;
+  background-color: aqua;
 }
 
 .message-cloud {
@@ -350,9 +373,12 @@ body {
 }
 
 .messages-block {
-  height: calc(100dvh - 140px - 60px);
+  top: 95px;
+  height: calc(100dvh - 95px - 90px + 5px);
   overflow-y: auto;
   scrollbar-width: none;
+  position: relative;
+  padding: 5px 0 15px 0;
 }
 
 @media (min-width: 1025px) {
@@ -408,6 +434,16 @@ body {
   display: flex;
 }
 
+.game-header {
+  height: 100px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: white;
+  z-index: 1000;
+}
+
 .game-header-empty-block {
   height: 5px;
 }
@@ -418,6 +454,17 @@ body {
   z-index: 10;
 }
 
+.game-header-belt-mini-shadow {
+  height: 20px;
+  width: 120%;
+  left: -10%;
+  position: absolute;
+  top: 10px;
+  box-shadow: 0px 5px 10px black;
+  z-index: 9;
+  background-color: aqua;
+}
+
 .game-header-belt {
   height: 60px;
   position: relative;
@@ -425,6 +472,16 @@ body {
   z-index: 1;
 }
 
+.game-header-belt-shadow {
+  width: 120%;
+  left: -10%;
+  height: 60px;
+  top: 30px;
+  position: absolute;
+  background-color: aqua;
+  box-shadow: 0px 5px 10px black;
+}
+
 .logo {
   width: 90px;
   height: 88px;