* Make it look better in Chrome

This commit is contained in:
michael 2019-07-13 17:00:14 +00:00
parent 0c9deb045e
commit 0d92a818eb
2 changed files with 16 additions and 13 deletions

View File

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

View File

@ -16,22 +16,21 @@
</div>
<div id="info">
<div id="logo">
<!-- <img id="logo-img" src="tetrislogo.png" width="161" height="54"/> -->
<img id="logo-img" src="tetrislogo.png" height="54"/>
</div>
<div id="score-envelope">
<div id="score-envelope" class="envelope">
<div id="score-label" class="label">Score:</div>
<div id="score">0</div>
</div>
<div id="level-envelope">
<div id="level-envelope" class="envelope">
<div id="level-label" class="label">Level:</div>
<div id="level">1</div>
</div>
<div id="status-envelope">
<div id="status-envelope" class="envelope">
<div id="status-label" class="label">Game status:</div>
<div id="status">Playing</div>
</div>
<div id="controls-envelope">
<div id="controls-envelope" class="envelope">
<div id="controls-label" class="label">Controls:</div>
<div id="controls">
<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>
</div>
<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>
<button id="btn-reset" class="btn-primary">Restart</button>
<button id="btn-reset">Restart</button>
</div>
</div>
<div class="source">