Update: inline CSS

External CSS files don't work with some services. We have to check it before we delete the inline style.

templates/loginform.php

@@ -46,7 +46,7 @@ if (strlen($this->data['username']) > 0)
     $this->data['autofocus'] = 'username';
 }
 
-$this->data['head'] .= '<link rel="stylesheet" href="'
+$this->data['head'] .= '<link rel="stylesheet" type="text/css" href="'
     . htmlspecialchars(SimpleSAML_Module::getModuleUrl('privacyidea/css/loginform.css'), ENT_QUOTES)
     . '" media="screen" />';
 
@@ -57,9 +57,9 @@ if ($this->data['errorCode'] !== NULL)
 {
     ?>
 
-    <div class="error-dialog">
+    <div class="error-dialog" style="border-left: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; background: #f5f5f5">
         <img src="/<?php echo htmlspecialchars($this->data['baseurlpath'], ENT_QUOTES); ?>resources/icons/experience/gtk-dialog-error.48x48.png"
-             class="float-l erroricon" alt="gtk-dialog-error"/>
+             class="float-l erroricon" style="margin: 15px " alt="gtk-dialog-error"/>
         <h2><?php echo $this->t('{login:error_header}'); ?></h2>
         <p>
             <strong><?php echo htmlspecialchars("Error " . $this->data['errorCode'] . ": " . $this->data['errorMessage']); ?></strong>
@@ -105,6 +105,7 @@ if ($this->data['errorCode'] !== NULL)
                                 ?>
                                 <label for="username"></label>
                                 <input type="text" id="username" tabindex="1" name="username"
+                                       style="width:322px; margin:25px 15px 15px"
                                        value="<?php echo htmlspecialchars($this->data['username'], ENT_QUOTES) ?>"
                                        placeholder="<?php echo htmlspecialchars($this->t('{login:username}'), ENT_QUOTES) ?>"
                                 />
@@ -148,16 +149,18 @@ if ($this->data['errorCode'] !== NULL)
                             <!-- Pass and OTP fields -->
                             <label for="password"></label>
                             <input id="password" name="password" tabindex="1" type="password" value="" class="text"
-                                       placeholder="<?php echo htmlspecialchars($passHint, ENT_QUOTES) ?>"/>
+                                   placeholder="<?php echo htmlspecialchars($passHint, ENT_QUOTES) ?>"
+                                   style="width:322px; margin:15px"/>
 
                             <strong id="message"><?php echo $this->data['message'] ?></strong>
-
+                            <br>
                             <label for="otp"></label>
                             <input id="otp" name="otp" tabindex="1" type="password" value="" class="text"
-                                       placeholder="<?php echo htmlspecialchars($otpHint, ENT_QUOTES) ?>"/>
+                                   placeholder="<?php echo htmlspecialchars($otpHint, ENT_QUOTES) ?>"
+                                   style="width:322px; margin: 25px 15px 7px"/>
                             <br>
                             <input id="submitButton" tabindex="1" class="rc-button rc-button-submit" type="submit"
-                                       name="Submit"
+                                   name="Submit" style="width:210px; margin:0 15px 7px"
                                    value="<?php echo htmlspecialchars($this->t('{login:login_button}'), ENT_QUOTES) ?>"/>
 
                             <!-- Hidden input which store the info about changes for future use in backend-->
@@ -241,13 +244,17 @@ if ($this->data['errorCode'] !== NULL)
                 </div> <!-- slide-out-->
             </div> <!-- form-panel -->
 
-                <div id="AlternateLoginOptions" class="groupMargin">
+            <div id="AlternateLoginOptions" style="margin-top:35px" class="groupMargin">
                 <h3><label><?php echo $this->t('{privacyidea:privacyidea:alternate_login_options}'); ?></label></h3>
                 <!-- Alternate Login Options-->
-                    <input id="useWebAuthnButton" name="useWebAuthnButton" type="button" value="WebAuthn"/>
-                    <input id="usePushButton" name="usePushButton" type="button" value="Push"/>
-                    <input id="useOTPButton" name="useOTPButton" type="button" value="OTP"/>
-                    <input id="useU2FButton" name="useU2FButton" type="button" value="U2F"/>
+                <input id="useWebAuthnButton" name="useWebAuthnButton" type="button" value="WebAuthn"
+                       style="width:140px; margin:15px 10px 7px"/>
+                <input id="usePushButton" name="usePushButton" type="button" value="Push"
+                       style="width:140px; margin:15px 10px 7px"/>
+                <input id="useOTPButton" name="useOTPButton" type="button" value="OTP"
+                       style="width:140px; margin:15px 15px 7px"/>
+                <input id="useU2FButton" name="useU2FButton" type="button" value="U2F"
+                       style="width:140px; margin:15px 10px 7px"/>
             </div>
         </form>
 
@@ -265,7 +272,7 @@ if ($this->data['errorCode'] !== NULL)
 <?php
 if (!empty($this->data['links']))
 {
-    echo '<ul class="links">';
+    echo '<ul class="links" style="margin-top: 2em">';
     foreach ($this->data['links'] as $l)
     {
         echo '<li><a href="' . htmlspecialchars($l['href'], ENT_QUOTES) . '">' . htmlspecialchars($this->t($l['text'])) . '</a></li>';
@@ -293,7 +300,8 @@ if (!empty($this->data['links']))
     'alert_webauthn_insecure_context', 'alert_webauthn_unavailable', 'alert_webAuthnSignRequest_error',
     'alert_u2f_insecure_context', 'alert_u2f_unavailable', 'alert_U2FSignRequest_error',
 ];
-    foreach ($translation_keys as $translation_key) {
+foreach ($translation_keys as $translation_key)
+{
     $translations[$translation_key] = $this->t(sprintf('{privacyidea:privacyidea:%s}', $translation_key));
 }
 echo htmlspecialchars(json_encode($translations));