Merge pull request #13 from franius8/12-beautify-interface-and-change…

…-it-to-white-blue-color-scheme Closes #12
franius8 · Oct 30, 2022 · b60496a · b60496a
2 parents 8b007bb + cbab2aa
commit b60496a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/style.css b/dist/style.css
@@ -1,6 +1,7 @@
 :root {
-    --top-background-color: #cecece;
-    --shadow-color: #7a7a7a;
+    --top-background-color: #277ac7;
+    --hover-color: #0f467a;
+    --shadow-color: #939292;
 }
 
 body {
@@ -13,6 +14,7 @@ body {
     letter-spacing: 0.08rem;
     word-spacing: 0.2rem;
     font-size: 1.5rem;
+    color: black;
 }
 
 h1 {
@@ -22,7 +24,8 @@ h1 {
     background-color: var(--top-background-color);
     margin: 0;
     padding: 1rem;
-    box-shadow: 3px 3px 3px var(--shadow-color);
+    box-shadow: 0px 3px 3px var(--shadow-color);
+    color: white;
 }
 
 #content {
@@ -51,28 +54,38 @@ h1 {
 #markerdiv {
     height: 166px;
     width: 166px;
-    background-color: var(--top-background-color);
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 1rem;
-    border: 0.5rem solid var(--shadow-color);
+}
+
+#currentplayercontainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 1rem;
+    border: 0.5rem solid var(--top-background-color);
 }
 
 #currentplayerdiv, #errordiv {
-    background-color: var(--top-background-color);
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 1rem;
-    border: 0.5rem solid var(--shadow-color);
+    color: black;
     padding: 1rem;
     width: 320px;
     height: 20px;
 }
 
+#errordiv {
+    border: 0.5rem solid var(--top-background-color);
+}
+
 #currentplayerlabel {
     font-size: 1rem;
+    color: black;
 }
 
 #errordiv {
@@ -104,11 +117,12 @@ button {
     border-radius: 1rem;
     font-family: inherit;
     font-size: 1.5rem;
+    color: white;
 }
 
 button:hover {
-    background-color: var(--shadow-color);
-    border: 1px solid var(--shadow-color);
+    background-color: var(--hover-color);
+    border: 1px solid var(--hover-color);
     cursor: pointer;
 }
 
@@ -130,24 +144,24 @@ button:hover {
     padding: 10px 20px;
     border: 3px solid var(--top-background-color);
     border-radius: 1rem;
+    color: white;
 }
 
 #radiocontainer input[type="radio"]:checked + label {
-    background-color:var(--shadow-color);
-    border-color: var(--shadow-color);
+    background-color:var(--hover-color);
+    border-color: var(--hover-color);
 }
 
 #radiocontainer label:hover {
-    border: 3px solid var(--shadow-color);
+    border: 3px solid var(--hover-color);
     cursor: pointer;
   }
 
 #board {
-    background-color: var(--shadow-color);
+    background-color: var(--top-background-color);
     height: 500px;
     width: 500px;
     border-radius: 1rem;
-    border: 0.5rem solid var(--shadow-color);
     gap: 0.5rem;
     grid-template: repeat(3, 1fr) / repeat(3, 1fr);
     overflow: hidden;
@@ -158,7 +172,7 @@ button:hover {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--top-background-color);
+    background-color: white;
 }
 
 .field:hover {
@@ -189,4 +203,8 @@ button:hover {
     position: absolute;
     top: 65px;
     width: 140px;
+  }
+
+  .winnerdiv {
+    color: black;
   }