knockoutwhistweb/app/assets/stylesheets/main.less

@@ -24,14 +24,14 @@
 }
 .game-field-background {
     background-image: @background-image;
-    background-size: cover;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
+    max-width: 1400px;
+    margin: 0 auto;
+    min-height: 100vh;
 }
 .lobby-background {
     background-color: @background-color;
-
+    width: 100%;
+    height: 100vh;
 }
 
 .navbar-header{
@@ -49,8 +49,11 @@
 .bottom-div {
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
   width: 100%;
+  margin: 0;
   text-align: center;
   padding: 10px;
 }
@@ -220,9 +223,9 @@ body {
 }
 .score-header {
     font-weight: bold;
-    color: #ffffff;
+    color: #000000;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 .score-row {
-    color: #ffffff;
+    color: #000000;
 }

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -3,8 +3,9 @@
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
 @main("Ingame") {
+<div class="lobby-background vh-100">
     <main class="game-field-background vh-100">
-    <div class="py-5 ms-4 me-4">
+        <div class="py-5 container-xxl">
 
             <div class="row ms-4 me-4">
                 <div class="col-4 mt-5 text-start">
@@ -21,7 +22,7 @@
                 <div class="col-4 text-center">
 
                     <div class="score-table mt-5">
-                    <h4 class="fw-bold mb-3 text-white">Tricks Won</h4>
+                        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
 
                         <div class="d-flex justify-content-between score-header pb-1">
                             <div style="width: 50%">PLAYER</div>
@@ -55,7 +56,7 @@
                         }
                     </div>
                 </div>
-            <div class="col-md-4 text-end">
+                <div class="col-4 mt-5 text-end">
                     <h4 class="fw-semibold mb-1">Trumpsuit</h4>
                     <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
 
@@ -70,12 +71,7 @@
                 </div>
             </div>
 
-
-        <div class="row">
-
-        </div>
-
-        <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);">
+            <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
                 <div class="row justify-content-center" id="card-slide">
                     @for(i <- player.currentHand().get.cards.indices) {
                     <div class="col-auto handcard" style="border-radius: 6px">
@@ -91,4 +87,5 @@
             </div>
         </div>
     </main>
+</div>
 }