CSS: rename .form to .below-logo

refs #10009

application/views/scripts/authentication/login.phtml

@@ -4,7 +4,7 @@
     <img aria-hidden="true" class="fade-in one" src="<?= $this->baseUrl('img/logo_icinga_big.png'); ?>" alt="<?= $this->translate('The Icinga logo'); ?>" >
    </div>
   </div>
-  <div class="form" data-base-target="layout">
+  <div class="below-logo" data-base-target="layout">
     <h1><?= $this->translate('Welcome to Icinga Web 2'); ?></h1>
     <?php if ($requiresSetup): ?>
     <p class="config-note"><?= sprintf(

application/views/scripts/error/error.phtml

@@ -5,7 +5,7 @@
     <img aria-hidden="true" class="fade-in one" src="<?= $this->baseUrl('img/logo_icinga_big.png'); ?>" alt="<?= $this->translate('The Icinga logo'); ?>" >
    </div>
   </div>
-  <div class="form" data-base-target="layout">
+  <div class="below-logo" data-base-target="layout">
     <div class="content">
       <p><strong><?= nl2br($this->escape($message)) ?></strong></p>
     </div>

public/css/icinga/layout-structure.less

@@ -280,11 +280,7 @@ html {
   }
 
   #login {
-    .form {
-      width: 100%;
-      margin: auto;
-    }
-    .form label {
+    .below-logo label {
       width: 100%;
       margin: 0;
       text-align: center;

public/css/icinga/login.less

@@ -9,16 +9,7 @@
     margin-right:auto;
   }
 
-  .form {
-    position: absolute;
-    font-size: 0.9em;
-    top: 45%;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-
-  .form h1 {
+  .below-logo h1 {
     text-align: center;
     font-size: 1.5em;
     margin-left: 2.3em;
@@ -27,7 +18,7 @@
     font-variant: unset;
   }
 
-  .form div.element {
+  .below-logo div.element {
     margin: 0;
 
     ul.errors {
@@ -35,7 +26,7 @@
     }
   }
 
-  .form label {
+  .below-logo label {
     font-weight: normal;
     display: inline-block;
     line-height: 2.5em;

public/css/icinga/logo.less

@@ -26,8 +26,22 @@
   }
 }
 
+.below-logo {
+  position: absolute;
+  font-size: 0.9em;
+  top: 45%;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
 #layout.minimal-layout {
   .logo .image img {
     width: 70%;
   }
+
+  .below-logo {
+    width: 100%;
+    margin: auto;
+  }
 }