Browse Source

* Make it look better in Chrome

michael 6 years ago
parent
commit
0d92a818eb
2 changed files with 16 additions and 13 deletions
  1. 10 6
      demo/tetris/tetris.css
  2. 6 7
      demo/tetris/tetris.html

+ 10 - 6
demo/tetris/tetris.css

@@ -24,6 +24,7 @@ body {
     flex-direction: column;
     flex-direction: column;
     justify-content: space-between;
     justify-content: space-between;
     height: 470px;
     height: 470px;
+    width: 240px;
 }
 }
 
 
 #info > #logo {
 #info > #logo {
@@ -79,16 +80,17 @@ body {
 
 
 .button {
 .button {
     margin: 0.4em;
     margin: 0.4em;
-    padding: 0.7em 1em;
+    padding: 1em;
     text-align: center;
     text-align: center;
     cursor: pointer;
     cursor: pointer;
     outline: none;
     outline: none;
     color: #fff;
     color: #fff;
+    min-width: 100px;
     font-weight: bold;
     font-weight: bold;
     background-color: #537fe4;
     background-color: #537fe4;
     border: none;
     border: none;
     border-radius: 15px;
     border-radius: 15px;
-    box-shadow: 0 2px #999;
+    box-shadow: 1px 2px #aaa;
   }
   }
 
 
 .button:hover {
 .button:hover {
@@ -122,11 +124,12 @@ body {
     display: flex;
     display: flex;
     width: 540px;
     width: 540px;
     margin: -40px auto;
     margin: -40px auto;
+    font-size: 12px;
 }
 }
 
 
-.btn-primary{
+#btn-reset{
     background: #2B60DE;
     background: #2B60DE;
-    color: #eee;
+    color: #fff;
     font-weight: bold;
     font-weight: bold;
     border: 0;
     border: 0;
     padding: 12px 0;
     padding: 12px 0;
@@ -135,13 +138,14 @@ body {
     text-transform: uppercase;
     text-transform: uppercase;
     font-size: 14px;
     font-size: 14px;
     cursor: pointer;
     cursor: pointer;
+    outline: none;
 }
 }
 
 
-.btn-primary:hover {
+#btn-reset:hover {
     background-color: #1e4fc2;
     background-color: #1e4fc2;
 }
 }
 
 
-.btn-primary:active {
+#btn-reset:active {
     background-color: #1e4fc2;
     background-color: #1e4fc2;
     transform: translateY(2px);
     transform: translateY(2px);
 }
 }

+ 6 - 7
demo/tetris/tetris.html

@@ -16,22 +16,21 @@
         </div>
         </div>
         <div id="info">
         <div id="info">
           <div id="logo">
           <div id="logo">
-            <!-- <img id="logo-img" src="tetrislogo.png" width="161" height="54"/> -->
             <img id="logo-img" src="tetrislogo.png" height="54"/>
             <img id="logo-img" src="tetrislogo.png" height="54"/>
           </div>
           </div>
-          <div id="score-envelope">
+          <div id="score-envelope" class="envelope">
             <div id="score-label" class="label">Score:</div>
             <div id="score-label" class="label">Score:</div>
             <div id="score">0</div>
             <div id="score">0</div>
           </div>
           </div>
-          <div id="level-envelope">
+          <div id="level-envelope" class="envelope">
             <div id="level-label" class="label">Level:</div>
             <div id="level-label" class="label">Level:</div>
             <div id="level">1</div>
             <div id="level">1</div>
           </div>
           </div>
-          <div id="status-envelope">
+          <div id="status-envelope" class="envelope">
             <div id="status-label" class="label">Game status:</div>
             <div id="status-label" class="label">Game status:</div>
             <div id="status">Playing</div>
             <div id="status">Playing</div>
           </div>
           </div>
-          <div id="controls-envelope">
+          <div id="controls-envelope" class="envelope">
             <div id="controls-label" class="label">Controls:</div>
             <div id="controls-label" class="label">Controls:</div>
             <div id="controls">
             <div id="controls">
               <div class="one-btn">
               <div class="one-btn">
@@ -45,11 +44,11 @@
                 <button class="button" id="control-down"><i class="fas fa-arrow-down"></i>&nbsp; &nbsp;Move Down</button>
                 <button class="button" id="control-down"><i class="fas fa-arrow-down"></i>&nbsp; &nbsp;Move Down</button>
               </div>
               </div>
               <div class="one-btn">
               <div class="one-btn">
-                <button class="button" id="control-drop">Space bar: Drop block</button>
+                <button class="button" id="control-drop"><i class="fas fa-level-down-alt"></i>&nbsp; &nbsp;Space bar: Drop block</button>
               </div>
               </div>
             </div>
             </div>
           </div>
           </div>
-          <button id="btn-reset" class="btn-primary">Restart</button>
+          <button id="btn-reset">Restart</button>
         </div>
         </div>
     </div>
     </div>
     <div class="source">
     <div class="source">