From a3e7dfc570922f7e936943f46fe8094de88abb7e Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Wed, 24 Jan 2018 17:35:06 -0500
Subject: [PATCH] Added styles for active elements on the login view. Made the
 frame buttons unfocusable by tabbing. Changed the login form from a form to a
 div, the form element is not what we want to use.

---
 app/assets/css/launcher.css | 45 +++++++++++++++++++++++++++++--------
 app/frame.ejs               |  6 ++---
 app/login.ejs               | 10 ++++-----
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 30ef5d45..b505c95d 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -76,26 +76,35 @@ p {
 #frame_btn_close {
     background-color: #e74c32;
 }
-
-#frame_btn_close:hover {
+#frame_btn_close:hover,
+#frame_btn_close:focus {
     background-color: #FF9A8A;
 }
+#frame_btn_close:active {
+    background-color: #ff8d7b;
+}
 
 #frame_btn_restoredown {
     background-color: #fed045;
 }
-
-#frame_btn_restoredown:hover {
+#frame_btn_restoredown:hover,
+#frame_btn_restoredown:focus {
     background-color: #FFE9A9;
 }
+#frame_btn_restoredown:active {
+    background-color: #ffde7b;
+}
 
 #frame_btn_minimize {
     background-color: #96e734;
 }
-
-#frame_btn_minimize:hover {
+#frame_btn_minimize:hover,
+#frame_btn_minimize:focus {
     background-color: #D6FFA6;
 }
+#frame_btn_minimize:active {
+    background-color: #bfff76;
+}
 
 /*******************************************************************************
  *                                                                             *
@@ -159,6 +168,9 @@ p {
     color: #a2a2a2;
     outline: none;
 }
+#loginForm a:active {
+    color: #8b8b8b;
+}
 
 /* Logo on login form. */
 #loginImageSeal {
@@ -195,7 +207,7 @@ p {
     width: 250px;
     margin-bottom: 20px;
     border-color: #fff;
-    color: rgb(197, 197, 197);
+    color: rgba(255, 255, 255, 0.75);
     font-weight: bold;
     text-align: center;
     box-sizing: border-box;
@@ -207,7 +219,7 @@ p {
     outline: none;
 }
 .loginField::-webkit-input-placeholder {
-    color: rgb(197, 197, 197);
+    color: rgba(255, 255, 255, 0.75);
     font-size: 10px;
     letter-spacing: 1px;
     text-align: center;
@@ -255,6 +267,10 @@ p {
     text-shadow: 0px 0px 20px #fff;
     outline: none;
 }
+#loginButton:active {
+    color: #c7c7c7;
+    text-shadow:  0px 0px 20px #c7c7c7;
+}
 #loginSVG {
     -webkit-transform: translate3d(0, 0, 0);
     overflow: visible;
@@ -268,6 +284,12 @@ p {
 #loginButton:focus #loginSVG {
     -webkit-filter: drop-shadow(0px 0px 2px #fff);
 }
+#loginButton:active #loginSVG .arrowLine {
+    stroke: #c7c7c7;
+}
+#loginButton:active #loginSVG {
+    -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
+}
 
 #loginButtonContent {
     display: flex;
@@ -326,7 +348,7 @@ p {
     border: 1px solid #848484;
     border-radius: 1px;
     background: none;
-    transition: border-color 0.25s ease;
+    transition: 0.25s ease;
 }
 /* On hover and focus, add a grey border color. */
 #checkmarkContainer:hover input ~ *,
@@ -334,6 +356,11 @@ p {
     color: #a2a2a2;
     border-color: #a2a2a2;
 }
+/* On keydown, darken the checkbox a bit. */
+#checkmarkContainer input:active ~ *:not(#loginRememberText) {
+    color: #8d8d8d;
+    border-color: #8d8d8d;
+}
 /* For checked -> #checkmarkContainer input:checked ~ * */
 /* Create the checkmark/indicator (hidden when not checked). */
 .loginCheckmark:after {
diff --git a/app/frame.ejs b/app/frame.ejs
index e3cadf5d..534bce01 100644
--- a/app/frame.ejs
+++ b/app/frame.ejs
@@ -1,7 +1,7 @@
 <div id="frame_bar">
     <div id="frame_btn_dock">
-        <button class="frame_btn" id="frame_btn_close"></button>
-        <button class="frame_btn" id="frame_btn_restoredown"></button>
-        <button class="frame_btn" id="frame_btn_minimize"></button>
+        <button class="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
+        <button class="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
+        <button class="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/login.ejs b/app/login.ejs
index fc96f4d1..8cdb5d2a 100644
--- a/app/login.ejs
+++ b/app/login.ejs
@@ -1,6 +1,6 @@
 <div id="loginContainer">
     <div id="loginContent">
-        <form id='loginForm'>
+        <div id='loginForm'>
             <img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
             <span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
             <svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
@@ -25,14 +25,14 @@
                     <span class="loginCheckmark"></span>
                 </label>
             </div>
-            <button id="loginButton" type="submit">
+            <button id="loginButton">
                 <div id="loginButtonContent">
                     LOGIN
                     <svg id="loginSVG" viewBox="0 0 24.87 13.97">
                         <defs>
-                            <style>.cls-1{fill:none;stroke:#FFF;stroke-width:2px;}</style>
+                            <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
                         </defs>
-                        <polyline class="cls-1" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
+                        <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                     </svg>
                 </div>
             </button>
@@ -43,6 +43,6 @@
                 <p class="loginDisclaimerText">Your password is sent directly to mojang and never stored.</p>
                 <p class="loginDisclaimerText">WesterosCraft is not affiliated with Mojang AB.</p>
             </div>
-        </form>
+        </div>
     </div>
 </div>
\ No newline at end of file