simpler key styling

1 files changed, 10 insertions, 17 deletions

diff --git a/app/style.js b/app/style.js
index 5e84f5c..a20510e 100644
--- a/app/style.js
+++ b/app/style.js
@@ -79,21 +79,10 @@ label {
 
 .hexagon {
   position: absolute;
-  width: ${rem(sizeA)};
-  height: ${rem(sizeB)};
-}
-
-.col-major .hexagon {
-  width: ${rem(sizeB)};
-  height: ${rem(sizeA)};
-}
-
-.hexagon > .inner {
-  margin: auto;
   width: ${rem(longSize * 1.4)};
   height: ${rem(longSize * 1.4)};
-  padding: ${rem(longSize * 0.4)};
   border-radius: ${rem(longSize)};
+
   box-sizing: border-box;
   font-size: ${rem(longSize * 0.5)};
   text-align: center;
@@ -102,24 +91,28 @@ label {
   color: #eeeeee;
   cursor: pointer;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   transition: background 300ms, border 300ms;
 }
 
-.hexagon.disabled > .inner {
+.hexagon.disabled {
   background: #363636 !important;
   border-color: #363636;
   color: #848484;
 }
-.hexagon.core> .inner {
+.hexagon.core > .inner {
   border-color: #eeeeee;
 }
 
-.hexagon > .inner:hover {
+.hexagon:hover {
   background: #848484;
   border-color: #848484;
 }
-.hexagon > .inner:active,
-.hexagon.active > .inner {
+.hexagon:active,
+.hexagon.active {
   background: #eeeeee;
   border-color: #eeeeee;
   color: #696969;