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 {
|
#loginContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -111,12 +128,14 @@ p {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Login content wrapper. */
|
||||||
#loginContent {
|
#loginContent {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Login form. */
|
||||||
#loginForm {
|
#loginForm {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -124,6 +143,16 @@ p {
|
|||||||
align-items: center;
|
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 {
|
#loginImageSeal {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #cad7e1;
|
border: 2px solid #cad7e1;
|
||||||
@ -134,36 +163,20 @@ p {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginSpan {
|
/* Header on login view. */
|
||||||
font-family: 'Avenir Book';
|
#loginSubheader {
|
||||||
font-size: 14px;
|
font-family: 'Avenir Medium';
|
||||||
color: #fff;
|
margin-bottom: 25px;
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loginSpanDim {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #848484;
|
letter-spacing: 1px;
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loginForm a {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-size: 12px;
|
|
||||||
color: #848484;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* SVG icons on the login view. */
|
||||||
.loginSVG {
|
.loginSVG {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#labelPassword {
|
/* Login text input styles. */
|
||||||
margin-bottom: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loginField {
|
.loginField {
|
||||||
font-family: 'Avenir Book';
|
font-family: 'Avenir Book';
|
||||||
background: none;
|
background: none;
|
||||||
@ -180,11 +193,9 @@ p {
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginField:focus {
|
.loginField:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginField::-webkit-input-placeholder {
|
.loginField::-webkit-input-placeholder {
|
||||||
color: rgb(197, 197, 197);
|
color: rgb(197, 197, 197);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
@ -196,108 +207,24 @@ p {
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginSubheader {
|
/* Add spacing between password field and options bar. */
|
||||||
font-family: 'Avenir Medium';
|
#labelPassword {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 13px;
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Container which contains the forgot and remember options. */
|
||||||
#loginOptions {
|
#loginOptions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Remember option text. */
|
||||||
#loginRememberText {
|
#loginRememberText {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkmarkContainer input {
|
/* Login button styles. */
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loginButton {
|
#loginButton {
|
||||||
background: none;
|
background: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -310,27 +237,112 @@ p {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
right: -20px;
|
right: -20px;
|
||||||
|
transition: 0.5s ease;2
|
||||||
|
}
|
||||||
|
#loginButton:hover {
|
||||||
|
text-shadow: 0px 0px 20px #fff;
|
||||||
|
}
|
||||||
|
#loginButton:focus {
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginButton img {
|
#loginButton img {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
transition: 0.25s ease;
|
||||||
|
}
|
||||||
|
#loginButton:hover img {
|
||||||
|
-webkit-filter: drop-shadow(0px 0px 2px #fff);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#loginButtonContent {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
/*******************************************************************************
|
/* Disclaimer container. */
|
||||||
* *
|
#loginDisclaimer {
|
||||||
* Login View (login.ejs) *
|
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;
|
position: relative;
|
||||||
height: calc(100% - 22px);
|
cursor: pointer;
|
||||||
width: 100%;
|
font-size: 22px;
|
||||||
overflow: hidden;
|
-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 {
|
#login_filter {
|
||||||
height: calc(100% - 22px);
|
height: calc(100% - 22px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -341,64 +353,7 @@ p {
|
|||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
background-size: cover;
|
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>
|
<span class="loginCheckmark"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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">
|
<div id="loginDisclaimer">
|
||||||
<span class="loginSpanDim" id="loginRegisterSpan">
|
<span class="loginSpanDim" id="loginRegisterSpan">
|
||||||
<a href="https://minecraft.net/en-us/store/minecraft/">Need an Account?</a>
|
<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