chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mtg button fa

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
MTG/index.html
View File

@ -151,10 +151,10 @@
</div> </div>
</div> </div>
<div id="buttonWrapper"> <div id="buttonWrapper">
<div onclick="removePlayer()" id="removePlayer" class="buttons">−</div> <div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div>
<div onclick="reset()" id="reset" class="buttons">↺<span class="buttonText"></span></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="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> </div>

18
MTG/style.css
View File

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