From 03f1811ab4275f6dea0398c7153a1100737ad9f3 Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Fri, 24 Oct 2025 13:55:03 +0200
Subject: [PATCH] refactor(ui): refactored the CSS into a separate stylesheet
 (#20)

#14 [Subtask] CSS in separate stylesheet

Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/pulls/20
Reviewed-by: lq64 <lq@blackhole.local>
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>
---
 knockoutwhistweb/app/views/main.scala.html   | 103 -------------------
 knockoutwhistweb/public/stylesheets/main.css | 102 ++++++++++++++++++
 2 files changed, 102 insertions(+), 103 deletions(-)

diff --git a/knockoutwhistweb/app/views/main.scala.html b/knockoutwhistweb/app/views/main.scala.html
index fc87637..f3d0d99 100644
--- a/knockoutwhistweb/app/views/main.scala.html
+++ b/knockoutwhistweb/app/views/main.scala.html
@@ -13,109 +13,6 @@
         <title>@title</title>
         <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
-        <style>
-            body {
-                background-image: url("@routes.Assets.versioned("images/background.png")");
-            }
-            html, body {
-                height: 100vh;
-                margin: 0;
-            }
-            #sessions {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            text-align: center;
-            }
-
-            #sessions a, h1, p {
-                color: white;
-                font-size: 40px;
-                font-family: Arial;
-            }
-            #ingame {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: flex-end;
-                height: 100%;
-            }
-            #playercards {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                height: 20%
-            }
-            #cardsplayed {
-                display: flex;
-                flex-direction: row;
-                height: 10%;
-                min-height: 10%
-            }
-            #playedcardplayer {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-            }
-            #playedcardplayer p {
-                font-size: 12px;
-                height: 4%;
-            }
-            #playedcardplayer img {
-                height: 90%;
-            }
-
-            #firstCard {
-                display: flex;
-                flex-direction: row;
-                height: 20%;
-                width: 100%;
-                justify-content: space-between;
-            }
-            #firstCardObject {
-                display: flex;
-                flex-direction: column;
-                margin-right: 4%;
-            }
-            #firstCardObject img{
-                height: 90%;
-            }
-            #firstCardObject p{
-                height: 10%;
-                font-size: 20px;
-
-            }
-            #trumpsuit {
-                display: flex;
-                flex-direction: row;
-                margin-left: 4%;
-            }
-            #nextPlayers {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                height: 0%;
-            }
-            #nextPlayers p {
-                margin-top: 0px;
-                margin-bottom: 0px;
-            }
-            #invisible {
-                visibility: hidden;
-            }
-            #selecttrumpsuit {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                height: 100%;
-            }
-            #rules {
-                color: white;
-                font-size: 1.5em;
-                font-family: Arial;
-            }
-        </style>
     </head>
 
     <body>
diff --git a/knockoutwhistweb/public/stylesheets/main.css b/knockoutwhistweb/public/stylesheets/main.css
index e69de29..c269bec 100644
--- a/knockoutwhistweb/public/stylesheets/main.css
+++ b/knockoutwhistweb/public/stylesheets/main.css
@@ -0,0 +1,102 @@
+body {
+    background-image: url("/assets/images/background.png");
+}
+
+html, body {
+    height: 100vh;
+    margin: 0;
+}
+#sessions {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+}
+
+#sessions a, h1, p {
+    color: white;
+    font-size: 40px;
+    font-family: Arial;
+}
+#ingame {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+}
+#playercards {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    height: 20%
+}
+#cardsplayed {
+    display: flex;
+    flex-direction: row;
+    height: 10%;
+    min-height: 10%
+}
+#playedcardplayer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+#playedcardplayer p {
+    font-size: 12px;
+    height: 4%;
+}
+#playedcardplayer img {
+    height: 90%;
+}
+
+#firstCard {
+    display: flex;
+    flex-direction: row;
+    height: 20%;
+    width: 100%;
+    justify-content: space-between;
+}
+#firstCardObject {
+    display: flex;
+    flex-direction: column;
+    margin-right: 4%;
+}
+#firstCardObject img{
+    height: 90%;
+}
+#firstCardObject p{
+    height: 10%;
+    font-size: 20px;
+
+}
+#trumpsuit {
+    display: flex;
+    flex-direction: row;
+    margin-left: 4%;
+}
+#nextPlayers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 0%;
+}
+#nextPlayers p {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+#invisible {
+    visibility: hidden;
+}
+#selecttrumpsuit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+#rules {
+    color: white;
+    font-size: 1.5em;
+    font-family: Arial;
+}
\ No newline at end of file