mtg button fa

This commit is contained in:
chris 2021-12-29 22:06:26 -05:00
parent 243b03ae8c
commit 6bb2b02920
2 changed files with 15 additions and 9 deletions

View File

@ -151,10 +151,10 @@
</div>
</div>
<div id="buttonWrapper">
<div onclick="removePlayer()" id="removePlayer" class="buttons"></div>
<div onclick="reset()" id="reset" class="buttons"><span class="buttonText"></span></div>
<div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div>
<div onclick="reset()" id="reset" class="buttons"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div>
<!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> -->
<div onclick="addPlayer()" id="addPlayer" class="buttons">+</div>
<div onclick="addPlayer()" id="addPlayer" class="buttons"><i class="fas fa-plus-circle"></i></div>
</div>

View File

@ -10,7 +10,7 @@ body {
/* background-color: rgb(78, 69, 202); */
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(137,137,194,1) 47%, rgba(108,127,131,1) 100%);
min-height: 100vh;
/* max-height: 100vh; */
/* width: 100vw; */
margin: 0;
display: flex;
@ -33,13 +33,13 @@ main {
Verdana, sans-serif;
flex-wrap: wrap;
width: 100vw;
min-height: 100vh;
height: 100vh;
/* align-items: center; */
position: relative;
/* margin: 0 auto; */
padding-bottom: 70px;
/* padding-bottom: 70px; */
margin-top: 70px;
margin-bottom: -50px;
margin-bottom: -65px;
}
.name {
font-size: 3rem;
@ -97,6 +97,7 @@ main {
min-width: auto;
font-size: 6rem;
user-select: none;
height:fit-content
}
.life div {
@ -109,8 +110,10 @@ main {
display: flex;
flex-direction: column;
/* flex-grow: 1; */
margin: 2rem;
margin: 1.5rem;
gap: 0;
max-height: 300px !important;
}
.buttons {
@ -127,18 +130,21 @@ main {
background-color: #eee;
user-select: none;
border-radius: 30px;
align-content: center;
}
#buttonWrapper {
display: flex;
flex-direction: row;
justify-content: space-evenly;
justify-content: space-between;
width: 100%;
position:absolute;
bottom: 0;
height:fit-content;
align-content: center;
}
.buttonText {
font-size: 0.65rem;
}
.fiveLife {