add retry button
[2048.git] / style / main.css
blob:a/style/main.css -> blob:b/style/main.css
--- a/style/main.css
+++ b/style/main.css
@@ -94,7 +94,8 @@
 a {
   color: #776e65;
   font-weight: bold;
-  text-decoration: underline; }
+  text-decoration: underline;
+  cursor: pointer; }
 
 strong.important {
   text-transform: uppercase; }
@@ -143,30 +144,41 @@
   width: 500px;
   height: 500px;
   box-sizing: border-box; }
-  .game-container.game-over:after, .game-container.game-won:after {
+  .game-container .game-message {
+    display: none;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    display: block;
     background: rgba(238, 228, 218, 0.5);
+    z-index: 100;
     text-align: center;
-    height: 500px;
-    line-height: 500px;
-    z-index: 100;
-    font-size: 60px;
-    font-weight: bold;
     -webkit-animation: fade-in 800ms ease 1200ms;
     -moz-animation: fade-in 800ms ease 1200ms;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
-  .game-container.game-over:after {
-    content: "Game over!"; }
-  .game-container.game-won:after {
-    content: "You win!";
-    background: rgba(237, 194, 46, 0.5);
-    color: #f9f6f2; }
+    .game-container .game-message p {
+      font-size: 60px;
+      font-weight: bold;
+      height: 60px;
+      line-height: 60px;
+      margin-top: 222px; }
+    .game-container .game-message a {
+      display: inline-block;
+      background: #a69382;
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: #f9f6f2;
+      height: 40px;
+      line-height: 42px;
+      margin-top: 59px; }
+    .game-container .game-message.game-won {
+      background: rgba(237, 194, 46, 0.5);
+      color: #f9f6f2; }
+    .game-container .game-message.game-won, .game-container .game-message.game-over {
+      display: block; }
 
 .grid-container {
   position: absolute;

comments