Restructure and redesign two-factor auth provider selection

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

1 files changed, 44 insertions, 21 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index fc926688c44..5d1e164a4f3 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -372,34 +372,57 @@ form .warning input[type='checkbox']+label {
 	color: #fff !important;
 }
 
-/* TOTP */
-.two-factor-header {
-	text-align: center;
-}
 .two-factor-provider {
-	text-align: center;
-	width: 258px !important;
-	display: inline-block;
-	margin-bottom: 0 !important;
-	background-color: rgba(0, 0, 0, 0.3) !important;
-	border: none !important;
+	display: flex;
+	border-radius: 3px;
+	margin: 12px 0;
+	border: 1px solid transparent;
 }
-.two-factor-link {
-	display: inline-block;
-	color: rgba(255, 255, 255, 0.75);
-	width: 100%;
+.two-factor-provider:hover,
+.two-factor-provider:focus,
+.two-factor-provider:active {
+	border: 1px solid #fff;
+}
+.two-factor-provider img {
+	width: 64px;
+	height: 64px;
+	padding: 0 12px;
+}
+.two-factor-provider div {
+	margin: 12px 0;
+}
+.two-factor-provider h3 {
+	margin: 0;
+}
+.two-factor-provider p {
+	font-weight: 300;
 }
-.two-factor-link .button {
+.two-factor-provider.two-factor-secondary {
+	margin: 0;
+}
+.two-factor-provider.two-factor-secondary img {
+	width: 16px;
+	height: 16px;
+	padding: 14px 12px 14px 60px;
+}
+.two-factor-provider.two-factor-secondary div {
+	margin: 12px auto;
+}
+
+.two-factor-icon {
+	width: 100px;
+	display: block;
+	margin: 0 auto;
+}
+.two-factor-submit {
+	width: 280px;
 	padding: 10px;
+	margin: 0 0 5px 0;
 	border-radius: 3px;
-	color: #555 !important;
-	display: inline-block;
-	margin: 5px 0;
-	text-align: center;
-	width: 100%;
-	box-sizing: border-box
+	font-size: 20px;
 }
 
+
 /* Additional login options */
 #remember_login {
 	margin: 18px 5px 0 16px !important;