diff options
| -rw-r--r-- | core/css/inputs.css | 14 | ||||
| -rw-r--r-- | core/templates/login.php | 4 |
2 files changed, 16 insertions, 2 deletions
diff --git a/core/css/inputs.css b/core/css/inputs.css index b58310a5c58..ebde986d584 100644 --- a/core/css/inputs.css +++ b/core/css/inputs.css @@ -310,3 +310,17 @@ input:disabled+label, input:disabled:hover+label, input:disabled:focus+label { background-color: #00a2e9; color: #bbb; } + +@keyframes shake { + 0% { transform: translate(-5px, 0); } + 20% { transform: translate(5px, 0); } + 40% { transform: translate(-5px, 0); } + 60% { transform: translate(5px, 0); } + 80% { transform: translate(-5px, 0); } + 100% { transform: translate(5px, 0); } +} +.shake { + animation-name: shake; + animation-duration: .3s; + animation-timing-function: ease-out; +} diff --git a/core/templates/login.php b/core/templates/login.php index 95c5a423c3d..c5453c34497 100644 --- a/core/templates/login.php +++ b/core/templates/login.php @@ -38,7 +38,7 @@ script('core', [ <!-- the following div ensures that the spinner is always inside the #message div --> <div style="clear: both;"></div> </div> - <p class="grouptop"> + <p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <input type="text" name="user" id="user" placeholder="<?php p($l->t('Username or email')); ?>" value="<?php p($_['loginName']); ?>" @@ -47,7 +47,7 @@ script('core', [ <label for="user" class="infield"><?php p($l->t('Username or email')); ?></label> </p> - <p class="groupbottom"> + <p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <input type="password" name="password" id="password" value="" placeholder="<?php p($l->t('Password')); ?>" <?php p($_['user_autofocus'] ? '' : 'autofocus'); ?> |