fix(ui): changed backgrounds (#33)

Reviewed-on: #33

knockoutwhistweb/app/assets/stylesheets/dark-mode.less

@@ -0,0 +1,6 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-image: url('/assets/images/background.png');
+    --color: white;
+  }
+}

knockoutwhistweb/app/assets/stylesheets/light-mode.less

@@ -0,0 +1,4 @@
+:root {
+  --background-image: url('/assets/images/img.png');
+  --color: black;
+}

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -1,5 +1,15 @@
+@import "light-mode.less";
+@import "dark-mode.less";
+
+@background-image: var(--background-image);
+@color: var(--color);
+@keyframes slideIn {
+  0% { transform: translateX(-100vw); }
+  100% { transform: translateX(0); }
+}
 body {
-    background-image: url("/assets/images/background.png");
+    background-image: @background-image;
+    background-size: 100vw 100vh;
 }
 
 html, body {
@@ -12,12 +22,20 @@ html, body {
     justify-content: flex-start;
     align-items: center;
     text-align: center;
+    h1 {
+        animation: slideIn 0.5s ease-out forwards;
+        animation-fill-mode: backwards;
+    }
+}
+#textanimation {
+        animation: slideIn 0.5s ease-out forwards;
+        animation-fill-mode: backwards;
+        animation-delay: 1s;
     }
-
 #sessions a, h1, p {
-    color: white;
+    color: @color;
     font-size: 40px;
-    font-family: Arial;
+    font-family: Arial, serif;
 }
 #ingame {
     display: flex;
@@ -30,8 +48,21 @@ html, body {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    height: 20%
+    height: 20%;
+    img {
+        animation: slideIn 0.5s ease-out forwards;
+        animation-fill-mode: backwards;
+        &:nth-child(1) { animation-delay: 0.5s; }
+        &:nth-child(2) { animation-delay: 1s; }
+        &:nth-child(3) { animation-delay: 1.5s; }
+        &:nth-child(4) { animation-delay: 2s; }
+        &:nth-child(5) { animation-delay: 2.5s; }
+        &:nth-child(6) { animation-delay: 3s; }
+        &:nth-child(7) { animation-delay: 3.5s; }
     }
+}
+
+
 #cardsplayed {
     display: flex;
     flex-direction: row;
@@ -80,11 +111,11 @@ html, body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 0%;
+    height: 0;
+    p {
+        margin-top: 0;
+        margin-bottom: 0;
     }
-#nextPlayers p {
-    margin-top: 0px;
-    margin-bottom: 0px;
 }
 #invisible {
     visibility: hidden;
@@ -96,7 +127,7 @@ html, body {
     height: 100%;
 }
 #rules {
-    color: white;
+    color: @color;
     font-size: 1.5em;
-    font-family: Arial;
+    font-family: Arial, serif;
 }

knockoutwhistweb/app/views/sessions.scala.html

@@ -3,9 +3,9 @@
 @main("Sessions") {
     <div id="sessions">
         <h1>Knockout Whist sessions</h1>
-        <p>Please select your session to jump inside the game!</p>
+        <p id="textanimation">Please select your session to jump inside the game!</p>
         @for(session <- sessions) {
-            <a href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br>
+            <a id="textanimation" href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br>
         }
     </div>
 }

project/plugins.sbt

@@ -4,3 +4,5 @@ addSbtPlugin("org.foundweekends.giter8" % "sbt-giter8-scaffold" % "0.18.0")
 addSbtPlugin("org.scoverage" % "sbt-scoverage" % "2.2.1")
 addSbtPlugin("com.eed3si9n" % "sbt-assembly" % "2.3.0")
 addSbtPlugin("org.scoverage" % "sbt-coveralls" % "1.3.1")
+
+addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")