Add tab if alternate login present (#16832)

Add tab if alternate login present

core/css/guest.css

@@ -95,21 +95,21 @@ body {
 	max-width: 100%;
 	max-height: 200px;
 }
+
 .wrapper {
-	width: 300px;
+	max-width: 100%;
 	margin-top: 10vh;
 }
 
 /* Default FORM */
 form {
 	position: relative;
-	width: 280px;
 	margin: auto;
 	padding: 0;
 }
 form fieldset {
-	margin-bottom: 20px;
-	text-align: left;
+	width: 260px;
+	margin: auto auto 20px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -143,7 +143,8 @@ form #datadirField legend {
 
 /* Buttons and input */
 #submit-wrapper,
-#reset-password-wrapper {
+#reset-password-wrapper,
+#alternative-logins {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -151,6 +152,49 @@ form #datadirField legend {
 						   absolutely positioned descendant icons */
 }
 
+#alternative-logins {
+	margin: 30px 15px 20px;
+	display: block;
+	min-width: 260px;
+	max-width: 400px;
+	overflow: hidden;
+}
+
+#alternative-logins a {
+	margin: 10px 5px;
+	display: block;
+	font-size: 15px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#alternative-logins a.button::before {
+	content: "";
+	background-repeat: no-repeat;
+	background-size: contain;
+	width: 0;
+	margin-right: 0;
+	height: 18px;
+	display: inline-block;
+	vertical-align: bottom;
+}
+
+#alternative-logins .button {
+	color: #0082c9;
+	padding: 12px 20px;
+}
+
+@media only screen and (max-width: 1024px) {
+	.wrapper {
+		margin-top: 0;
+	}
+	#alternative-logins {
+		margin: 30px 15px 10px;
+	}
+}
+
+
 #submit-wrapper .submit-icon,
 #reset-password-wrapper .submit-icon {
 	position: absolute;
@@ -163,6 +207,10 @@ form #datadirField legend {
 							 applied to the button instead. */
 }
 
+#submit-wrapper {
+	margin: 0 auto;
+}
+
 #submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white,
 #submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white,
 #submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {

core/templates/login.php

@@ -4,14 +4,13 @@ script('core', 'dist/login');
 ?>
 
 <div id="login"></div>
+
 <?php if (!empty($_['alt_login'])) { ?>
-<form id="alternative-logins">
-	<fieldset>
-		<ul>
-			<?php foreach($_['alt_login'] as $login): ?>
-				<li><a class="button" href="<?php print_unescaped($login['href']); ?>" ><?php p($login['name']); ?></a></li>
-			<?php endforeach; ?>
-		</ul>
-	</fieldset>
-</form>
-<?php }
+    <div id="alternative-logins">
+        <?php foreach($_['alt_login'] as $login): ?>
+            <a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
+                <?php p($login['name']); ?>
+            </a>
+        <?php endforeach; ?>
+    </div>
+<?php } ?>