Cleaning up login code a bit, next stage is completing login responsiveness.

app/assets/css/launcher.css

@@ -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';
-    font-size: 12px;
-    color: #848484;
-    font-weight: bold;
-}
-
-#loginForm a {
-    font-family: 'Avenir Book';
+/* Header on login view. */
+#loginSubheader {
+    font-family: 'Avenir Medium';
+    margin-bottom: 25px;
     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,29 +207,85 @@ 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;
+/* Login button styles. */
+#loginButton {
+    background: none;
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Avenir Book';
+    letter-spacing: 2px;
+    border: none;
+    padding: 15px 5px;
+    margin: 10px 0px;
     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;
+}
+
+/* Disclaimer container. */
+#loginDisclaimer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 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;
 }
 
-/* Customize the label (the container) */
+/* * *
+* Login View | Custom Checkbox
+* * */
+
+/* Checkbox container. */
 #checkmarkContainer {
     display: flex;
     justify-content: flex-end;
@@ -229,14 +296,14 @@ p {
     -webkit-user-select: none;
 }
 
-/* Hide the browser's default checkbox */
+/* Hide the default checkbox. */
 #checkmarkContainer input {
     opacity: 0;
     cursor: pointer;
     position: absolute;
 }
 
-/* Create a custom checkbox */
+/* Create a custom checkbox. */
 .loginCheckmark {
     position: relative;
     height: 10px;
@@ -244,93 +311,38 @@ p {
     border: 1px solid #848484;
     border-radius: 1px;
     background: none;
+    transition: border-color 0.25s ease;
 }
-
-/* On mouse-over, add a grey background color */
+/* On mouse-over, add a grey border color. */
 #checkmarkContainer:hover input ~ .loginCheckmark {
-    border-color: #848484;
+    border-color: #a2a2a2;;
 }
-
-/* When the checkbox is checked, add a blue background */
+/* When the checkbox is checked, add a grey border color. */
 #checkmarkContainer input:checked ~ .loginCheckmark {
-    border-color: #848484;
+    border-color: #a2a2a2;;
 }
-
-/* Create the checkmark/indicator (hidden when not checked) */
+/* Create the checkmark/indicator (hidden when not checked). */
 .loginCheckmark:after {
     content: "";
     display: none;
 }
-
-/* Show the checkmark when checked */
+/* Show the checkmark when checked. */
 #checkmarkContainer input:checked ~ .loginCheckmark:after {
     display: block;
 }
-  
-/* Style the checkmark/indicator */
+/* Style the checkmark/indicator. */
 #checkmarkContainer .loginCheckmark:after {
     position: absolute;
     left: 3.5px;
     top: 0.5px;
     width: 2px;
     height: 6px;
-    border: solid #848484;
+    border: solid #a2a2a2;;
     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 {
-    background: none;
-    color: #fff;
-    font-weight: bold;
-    font-family: 'Avenir Book';
-    letter-spacing: 2px;
-    border: none;
-    padding: 15px 5px;
-    margin: 10px 0px;
-    cursor: pointer;
-    position: relative;
-    right: -20px;
-}
-
-#loginButton img {
-    transform: rotate(90deg);
-    margin-left: 20px;
-}
-
-
-/*******************************************************************************
- *                                                                             *
- * Login View (login.ejs)                                                      *
- *                                                                             *
- ******************************************************************************/
-
-#login_main {
-    position: relative;
-    height: calc(100% - 22px);
-    width: 100%;
-    overflow: hidden;
-}
-
+/*
 #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;
-}*/
-
+*/
 
 /*******************************************************************************
  *                                                                             *

app/login.ejs

@@ -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>

app/loginOLD.ejs

@@ -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>