Cleaning up login code a bit, next stage is completing login responsiveness.
This commit is contained in:
Daniel Scalzi
parent
e555dd747f
commit
e236a38757
@ -103,6 +103,23 @@ p {
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
/* Login span styles. */
|
||||
.loginSpan {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Styles for dimmer login span. */
|
||||
.loginSpanDim {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 12px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Main login container. */
|
||||
#loginContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -111,12 +128,14 @@ p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Login content wrapper. */
|
||||
#loginContent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Login form. */
|
||||
#loginForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -124,6 +143,16 @@ p {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Login form anchor styles. */
|
||||
#loginForm a {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 12px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Logo on login form. */
|
||||
#loginImageSeal {
|
||||
border-radius: 50%;
|
||||
border: 2px solid #cad7e1;
|
||||
@ -134,36 +163,20 @@ p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.loginSpan {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.loginSpanDim {
|
||||
font-family: 'Avenir Book';
|
||||
/* Header on login view. */
|
||||
#loginSubheader {
|
||||
font-family: 'Avenir Medium';
|
||||
margin-bottom: 25px;
|
||||
font-size: 12px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#loginForm a {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 12px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* SVG icons on the login view. */
|
||||
.loginSVG {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#labelPassword {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
/* Login text input styles. */
|
||||
.loginField {
|
||||
font-family: 'Avenir Book';
|
||||
background: none;
|
||||
@ -180,11 +193,9 @@ p {
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.loginField:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.loginField::-webkit-input-placeholder {
|
||||
color: rgb(197, 197, 197);
|
||||
font-size: 10px;
|
||||
@ -196,108 +207,24 @@ p {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#loginSubheader {
|
||||
font-family: 'Avenir Medium';
|
||||
margin-bottom: 25px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
/* Add spacing between password field and options bar. */
|
||||
#labelPassword {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
/* Container which contains the forgot and remember options. */
|
||||
#loginOptions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Remember option text. */
|
||||
#loginRememberText {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#checkmarkContainer input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Customize the label (the container) */
|
||||
#checkmarkContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
#checkmarkContainer input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.loginCheckmark {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: 1px solid #848484;
|
||||
border-radius: 1px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
#checkmarkContainer:hover input ~ .loginCheckmark {
|
||||
border-color: #848484;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
#checkmarkContainer input:checked ~ .loginCheckmark {
|
||||
border-color: #848484;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.loginCheckmark:after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
#checkmarkContainer input:checked ~ .loginCheckmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
#checkmarkContainer .loginCheckmark:after {
|
||||
position: absolute;
|
||||
left: 3.5px;
|
||||
top: 0.5px;
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
border: solid #848484;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#loginDisclaimer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loginDisclaimerText {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 7px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loginRegisterSpan {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Login button styles. */
|
||||
#loginButton {
|
||||
background: none;
|
||||
color: #fff;
|
||||
@ -310,27 +237,112 @@ p {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
right: -20px;
|
||||
transition: 0.5s ease;2
|
||||
}
|
||||
#loginButton:hover {
|
||||
text-shadow: 0px 0px 20px #fff;
|
||||
}
|
||||
#loginButton:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#loginButton img {
|
||||
transform: rotate(90deg);
|
||||
margin-left: 20px;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
#loginButton:hover img {
|
||||
-webkit-filter: drop-shadow(0px 0px 2px #fff);
|
||||
}
|
||||
|
||||
#loginButtonContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Login View (login.ejs) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
/* Disclaimer container. */
|
||||
#loginDisclaimer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#login_main {
|
||||
/* Add spacing between register anchor and disclaimer. */
|
||||
#loginRegisterSpan {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Disclaimer text styles. */
|
||||
.loginDisclaimerText {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 7px;
|
||||
color: #848484;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Login View | Custom Checkbox
|
||||
* * */
|
||||
|
||||
/* Checkbox container. */
|
||||
#checkmarkContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: calc(100% - 22px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Hide the default checkbox. */
|
||||
#checkmarkContainer input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox. */
|
||||
.loginCheckmark {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: 1px solid #848484;
|
||||
border-radius: 1px;
|
||||
background: none;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
/* On mouse-over, add a grey border color. */
|
||||
#checkmarkContainer:hover input ~ .loginCheckmark {
|
||||
border-color: #a2a2a2;;
|
||||
}
|
||||
/* When the checkbox is checked, add a grey border color. */
|
||||
#checkmarkContainer input:checked ~ .loginCheckmark {
|
||||
border-color: #a2a2a2;;
|
||||
}
|
||||
/* Create the checkmark/indicator (hidden when not checked). */
|
||||
.loginCheckmark:after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
/* Show the checkmark when checked. */
|
||||
#checkmarkContainer input:checked ~ .loginCheckmark:after {
|
||||
display: block;
|
||||
}
|
||||
/* Style the checkmark/indicator. */
|
||||
#checkmarkContainer .loginCheckmark:after {
|
||||
position: absolute;
|
||||
left: 3.5px;
|
||||
top: 0.5px;
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
border: solid #a2a2a2;;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
#login_filter {
|
||||
height: calc(100% - 22px);
|
||||
width: 100%;
|
||||
@ -341,64 +353,7 @@ p {
|
||||
transform: scale(1.2);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#login_container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 9001;
|
||||
}
|
||||
|
||||
#login_content {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#login_image_seal {
|
||||
height: 150px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.login_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Adds padding between flex children */
|
||||
.login_section > * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login_section > *:last-child {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
#login_header_text {
|
||||
font-family: 'Avenir Book';
|
||||
color: #ded8cb;
|
||||
}
|
||||
|
||||
#login_links a {
|
||||
color: #5a534b;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#login_information input {
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 2px solid #fff;
|
||||
}
|
||||
|
||||
/*#login_information input[type='password'] {
|
||||
letter-spacing: 0.3em;
|
||||
}*/
|
||||
|
||||
*/
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
|
||||
@ -25,7 +25,12 @@
|
||||
<span class="loginCheckmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<button id="loginButton" type="submit">LOGIN <img src="assets/images/icons/arrow.svg" id="menu_img"/></button>
|
||||
<button id="loginButton" type="submit">
|
||||
<div id="loginButtonContent">
|
||||
LOGIN
|
||||
<img src="assets/images/icons/arrow.svg" id="menu_img"/>
|
||||
</div>
|
||||
</button>
|
||||
<div id="loginDisclaimer">
|
||||
<span class="loginSpanDim" id="loginRegisterSpan">
|
||||
<a href="https://minecraft.net/en-us/store/minecraft/">Need an Account?</a>
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<!-- Temp for tests -->
|
||||
<% include frame.ejs %>
|
||||
<script src="./assets/js/uicore.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
||||
<!-- end temp -->
|
||||
<div id="login_main">
|
||||
<div id="login_filter"></div>
|
||||
<div id="login_container">
|
||||
<div id="login_content">
|
||||
<div id="login_header" class="login_section">
|
||||
<img id="login_image_seal" src="assets/images/WesterosSealCircle.png"/>
|
||||
<span id="login_header_text">MEMBER LOGIN</span>
|
||||
</div>
|
||||
<div id="login_information" class="login_section">
|
||||
<input type="text" placeholder="EMAIL/USERNAME"/>
|
||||
<input type="password" placeholder="PASSWORD"/>
|
||||
<div id="login_links">
|
||||
<a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">Forgot Password?</a>
|
||||
<a href="https://minecraft.net/en-us/store/minecraft/">Need an account?</a>
|
||||
</div>
|
||||
<button id="login_button">LOGIN</button>
|
||||
</div>
|
||||
<div id="login_footer" class="login_section">
|
||||
<p id="login_disclaimer">
|
||||
Disclamer text...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user