Handle device login like an alternative login

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 17 insertions, 10 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index b6421aca1f7..72523a3b7df 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -147,7 +147,7 @@ form #datadirField legend {
 /* Buttons and input */
 #submit-wrapper,
 #reset-password-wrapper,
-#alternative-logins {
+.alternative-logins {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -155,7 +155,7 @@ form #datadirField legend {
 						   absolutely positioned descendant icons */
 }
 
-#alternative-logins {
+.alternative-logins {
 	margin: auto;
 	display: block;
 	min-width: 260px;
@@ -163,7 +163,7 @@ form #datadirField legend {
 	overflow: hidden;
 }
 
-#alternative-logins a {
+.alternative-logins a.button {
 	margin: 10px 5px;
 	display: block;
 	font-size: 15px;
@@ -172,7 +172,7 @@ form #datadirField legend {
 	text-overflow: ellipsis;
 }
 
-#alternative-logins a.button::before {
+.alternative-logins a.button::before {
 	content: "";
 	background-repeat: no-repeat;
 	background-size: contain;
@@ -183,16 +183,22 @@ form #datadirField legend {
 	vertical-align: bottom;
 }
 
-#alternative-logins .button {
-	color: #0082c9;
+.alternative-logins .button {
+	color: #ffffff;
 	padding: 12px 20px;
 }
 
+
+.alternative-logins .button.single-alt-login-option {
+	 width: 260px;
+	 margin: 0 auto;
+ }
+
 @media only screen and (max-width: 1024px) {
 	.wrapper {
 		margin-top: 0;
 	}
-	#alternative-logins {
+	.alternative-logins {
 		margin: auto;
 	}
 }
@@ -563,15 +569,16 @@ form .warning input[type='checkbox']+label {
 }
 
 /* Alternative Logins */
-#alternative-logins legend {
+.alternative-logins legend {
 	margin-bottom: 10px;
 }
-#alternative-logins li {
+.alternative-logins li {
 	height: 40px;
 	white-space: nowrap;
 	padding: 05px;
 }
-#alternative-logins li a {
+.alternative-logins a.button,
+.alternative-logins li a {
 	width: 100%;
 	display: inline-block;
 	text-align: center;