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 @@ - * Invalid Email + * Invalid Value
@@ -26,12 +26,12 @@ forgot password?
- +