Jonttu/HeliosLauncher
1
0
Fork 1
mirror of https://github.com/dscalzi/HeliosLauncher.git synced 2024-12-22 03:32:12 -08:00
Code Issues Projects Releases Wiki Activity

Adding login box

Browse Source
This commit is contained in:
Daniel Scalzi 2017-05-17 14:51:49 -04:00
parent c83809b0dc
commit 771b0984f1
2 changed files with 75 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/assets/css/styles.css
View File

@ -33,6 +33,20 @@ html {
background-size: cover;
}
button {
background-color: #a02d2a;
color: #ffffff;
border: none;
padding: 7px 10px;
text-align: center;
text-decoration: none;
font-size: 14px;
}
button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/*******************************************************************************
* *
* Header *
@ -151,6 +165,52 @@ html {
width: 30%;
}
#welcome_text {
font-family: 'ringbearer';
font-size: 16px;
display: block;
text-align: center;
padding-top: 10px;
}
#login_container {
display: inline-flex;
width: 100%;
}
#login_image {
height: 85px;
width: auto;
display: block;
border: 3px solid #000000;
}
#login_container_right input,
#login_container_right label {
display: flex;
width: 100%;
}
#login_container_left {
padding: 10px 0 10px 10px;
}
#login_container_right {
padding: 10px;
width: 100%;
}
.login_field {
font-size: 12px;
font-family: 'Segoe UI';
font-weight: 500;
}
#button_login {
float: right;
margin-right: 10px;
}
/*******************************************************************************
* *
* Right Body Container *

16
app/index.html
View File

@ -38,7 +38,21 @@
<div id="main_content">
<div id="left_pane">
<span id="welcome_text">Welcome to WesterosCraft!</span>
<div id="login_container">
<div id="login_container_left">
<img src="https://minotar.net/avatar/TheAventine.png" id="login_image" />
</div>
<div id="login_container_right">
<label class="login_field">Username</label>
<input type="text" name="username"></input>
<label class="login_field">Password</label>
<input type="password" name="password"></input>
</div>
</div>
<div id="login_button_dock">
<button id="button_login">Login</button>
</div>
</div>
<div id="right_pane">
<div class="toggle-btn-grp">