diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue index f628908..f1fca99 100644 --- a/src/components/GameWindow.vue +++ b/src/components/GameWindow.vue @@ -209,10 +209,13 @@ onMounted(() => {
-
+
- +
+ + +
@@ -220,17 +223,20 @@ onMounted(() => {
- -
-
-
- - -
-
-
-
+
+
+ +
+
+
+ + +
+
+
+
+
@@ -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;