Kaynağa Gözat

Restyling the game screen to use some cool opacity

Kirk Trombley 5 yıl önce
ebeveyn
işleme
f72c5187c8
1 değiştirilmiş dosya ile 20 ekleme ve 2 silme
  1. 20 2
      client/src/App.css

+ 20 - 2
client/src/App.css

@@ -307,6 +307,8 @@
 
 @media only screen and (min-width: 600px) {
   .game-panel {
+    display: block;
+    position: relative;
     flex-flow: row nowrap;
   }
 
@@ -316,16 +318,32 @@
   }
 
   .guess-pane {
+    position: absolute;
+    left: 10px;
+    bottom: 30px;
+    height: 200px;
+    width: 200px;
     flex-flow: column nowrap;
+    z-index: 1;
+    opacity: .5;
+    transition: 1s;
+  }
+
+  .guess-pane:hover {
+    height: 400px;
+    width: 400px;
+    opacity: 1;
+    transition: 0.5s;
   }
 
   .game-panel__spacer {
-    height: 100%;
-    width: 2px;
+    height: 0px;
+    width: 0px;
   }
 
   .guess-pane__timer-submit-wrapper {
     margin-top: 4px;
+    color: #fff;
   }
 
   .guess-pane__submit {