feat(ui): LESS Integration

Added less integration + light mode

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -0,0 +1,104 @@
+@import "light-mode.less";
+body {
+    background-image: @background-image;
+    background-size: 100vw 100vh;
+}
+
+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: @color;
+    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%;
+    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;
+}