diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index e555625e..d8304000 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -223,6 +223,30 @@ p {
text-align: right;
position: absolute;
top: 7px;
+ opacity: 0;
+ transition: 0.25s ease;
+}
+
+.shake {
+ animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+@keyframes shake {
+ 10%, 90% {
+ transform: translate3d(-1px, 0, 0);
+ }
+
+ 20%, 80% {
+ transform: translate3d(2px, 0, 0);
+ }
+
+ 30%, 50%, 70% {
+ transform: translate3d(-4px, 0, 0);
+ }
+
+ 40%, 60% {
+ transform: translate3d(4px, 0, 0);
+ }
}
/* Login text input styles. */
@@ -245,6 +269,9 @@ p {
.loginField:focus {
outline: none;
}
+.loginField:disabled {
+ color: rgba(255, 255, 255, 0.50);
+}
.loginField::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.75);
font-size: 10px;
@@ -321,6 +348,9 @@ p {
#loginButton:active #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
}
+#loginButton:disabled #loginSVG .arrowLine {
+ stroke: rgba(255, 255, 255, 0.75);
+}
#loginButtonContent {
display: flex;
@@ -328,10 +358,10 @@ p {
}
#loginButton .circle-loader,
-#loginButton:disabled #loginSVG {
+#loginButton[loading] #loginSVG {
display: none;
}
-#loginButton:disabled .circle-loader,
+#loginButton[loading] .circle-loader,
#loginButton #loginSVG {
display: initial;
}
diff --git a/app/login.ejs b/app/login.ejs
index 0b345991..2a610076 100644
--- a/app/login.ejs
+++ b/app/login.ejs
@@ -9,7 +9,7 @@