Merge pull request #12495 from nextcloud/login-theming-primary-fix

Fix login primary colour and feedback

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 */