From 7190ea2dedf01a097de326f3645ed2bb23a5f918 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 3 Jun 2018 13:09:20 -0700
Subject: [PATCH] Make cell change color on corner hover.

---
 public/css/main.css   | 35 ++++++++++++++++-------------------
 public/scss/main.scss |  8 ++++----
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 16654ce..8f29cab 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -22,40 +22,37 @@ body {
   margin: auto;
   border-radius: 10px; }
 
-.black-player .overlay:hover {
-  background-image: url("../svg/black.svg"); }
+.black-player .board-cell:hover .overlay {
+  background-color: black; }
 
-.white-player .overlay:hover {
-  background-image: url("../svg/white.svg"); }
+.white-player .board-cell:hover .overlay {
+  background-color: white; }
 
 .board-cell {
   display: inline-block;
   position: relative;
-  background-image: url("../svg/cross.svg");
-  background-size: 100%;
-  padding: 5.5555555556%; }
+  padding: 5.55556%; }
   .board-cell .overlay {
     position: absolute;
     box-sizing: border-box;
-    top: 0%;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    background-image: url("../svg/cross.svg");
-    transition: background-image .25s;
-    background-size: 100%; }
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    transition: background-color .25s; }
   .board-cell.small {
-    padding: 5.5555555556%; }
+    padding: 5.55556%; }
   .board-cell.medium {
-    padding: 3.8461538462%; }
+    padding: 3.84615%; }
   .board-cell.large {
-    padding: 2.6315789474%; }
+    padding: 2.63158%; }
 
 .black-cell .overlay {
-  background-image: url("../svg/black.svg"); }
+  background-color: black; }
 
 .white-cell .overlay {
-  background-image: url("../svg/white.svg"); }
+  background-color: white; }
 
 .split-wrapper {
   display: flex;
diff --git a/public/scss/main.scss b/public/scss/main.scss
index 7b7e020..7ed5231 100644
--- a/public/scss/main.scss
+++ b/public/scss/main.scss
@@ -33,14 +33,14 @@ body {
     border-radius: 10px;
 }
 
-.black-player .overlay {
-    &:hover {
+.black-player {
+    .board-cell:hover .overlay {
         background-color: black;
     }
 }
 
-.white-player .overlay {
-    &:hover {
+.white-player {
+    .board-cell:hover .overlay {
         background-color: white;
     }
 }