diff options
| -rw-r--r-- | core/css/guest.css | 29 |
1 files changed, 21 insertions, 8 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index 6a3b8c633e0..af6b31a99f1 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -144,23 +144,28 @@ form #datadirField legend { /* Buttons and input */ #submit-wrapper, #reset-password-wrapper { + display: flex; + align-items: center; + justify-content: center; position: relative; /* Make the wrapper the containing block of its absolutely positioned descendant icons */ } #submit-wrapper .submit-icon { position: absolute; - height: 22px; + top: 22px; right: 24px; - top: 18px; + transition: right 100ms ease-in-out; pointer-events: none; /* The submit icon is positioned on the submit button. From the user point of view the icon is part of the button, so the clicks on the icon have to be applied to the button instead. */ } -/* Properly position any loader */ -#submit-wrapper .submit-icon::after { - margin: -10px; + +#submit-wrapper:hover .submit-icon.icon-confirm-white, +#submit-wrapper:focus .submit-icon.icon-confirm-white, +#submit-wrapper:active .submit-icon.icon-confirm-white { + right: 20px; } #reset-password-submit { @@ -173,6 +178,12 @@ form #datadirField legend { display: none; } +#submit-wrapper .icon-loading-small { + position: absolute; + top: 22px; + right: 24px; +} + input, textarea, select, button, div[contenteditable=true] { font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; @@ -220,7 +231,8 @@ input[type='email'] { font-weight: normal; } input.login { - width: 269px; + width: 260px; + height: 50px; background-position: right 16px center; } input[type='submit'], @@ -253,6 +265,7 @@ a.primary { border: 1px solid #fff; background-color: #0082c9; color: #fff; + transition: color 100ms ease-in-out; } input.primary:not(:disabled):hover, @@ -260,8 +273,8 @@ input.primary:not(:disabled):focus, button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, -a.primary:not(:disabled):focus{ - background-color: #17adff; +a.primary:not(:disabled):focus { + color: rgba(255, 255, 255, .8); } /* Checkboxes - white only for login */ |