add score and endgame
[2048.git] / style / main.css
blob:a/style/main.css -> blob:b/style/main.css
--- a/style/main.css
+++ b/style/main.css
@@ -22,11 +22,38 @@
   display: block;
   float: left; }
 
+@-webkit-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@-moz-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
 .score-container {
   position: relative;
   float: right;
   background: #bbada0;
-  padding: 15px 30px;
+  padding: 15px 20px;
   font-size: 25px;
   height: 25px;
   line-height: 47px;
@@ -45,6 +72,19 @@
     line-height: 13px;
     text-align: center;
     color: #eee4da; }
+  .score-container .score-addition {
+    position: absolute;
+    right: 30px;
+    color: red;
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: bold;
+    color: rgba(119, 110, 101, 0.9);
+    z-index: 100;
+    -webkit-animation: move-up 600ms ease-in;
+    -moz-animation: move-up 600ms ease-in;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both; }
 
 p {
   margin-top: 0;
@@ -103,13 +143,12 @@
   width: 500px;
   height: 500px;
   box-sizing: border-box; }
-  .game-container.game-over:after {
+  .game-container.game-over:after, .game-container.game-won:after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    content: "Game over!";
     display: block;
     background: rgba(238, 228, 218, 0.5);
     text-align: center;
@@ -122,6 +161,12 @@
     -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; }
 
 .grid-container {
   position: absolute;

comments