From 3b16a76ba0202b44babf2e171fd7fcbdd3276ae2 Mon Sep 17 00:00:00 2001
From: =?utf8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 16 Nov 2018 18:21:58 +0100
Subject: [PATCH] Fix login primary colour and feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/guest.css | 29 +++++++++++++++++++++--------
 1 file 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 */
-- 
2.39.5