Move css instructions to dedicated stylesheet

refs #7163

application/views/scripts/form/setup-admin-account.phtml

@@ -10,11 +10,11 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
   <?= $form->getElement('description'); ?>
 <?php if (($byNameElem = $form->getElement('by_name')) !== null): ?>
   <div>
-    <div style="display: inline-block; width: 30.2em;">
+    <div class="instructions">
       <?= $byNameElem; ?>
     </div>
 <?php if ($showRadioBoxes): ?>
-    <div style="vertical-align: top; display: inline-block; padding: 0.4em 0.2em 0;">
+    <div class="radiobox">
       <label>
         <input type="radio" name="user_type" value="by_name">
         <?= $radioElem->getMultiOption('by_name'); ?>
@@ -25,11 +25,11 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
 <?php endif ?>
 <?php if (($existingUserElem = $form->getElement('existing_user')) !== null): ?>
   <div>
-    <div style="display: inline-block; width: 30.2em;">
+    <div class="instructions">
       <?= $existingUserElem; ?>
     </div>
 <?php if ($showRadioBoxes): ?>
-    <div style="vertical-align: top; display: inline-block; padding: 0.4em 0.2em 0;">
+    <div class="radiobox">
       <label>
         <input type="radio" name="user_type" value="existing_user">
         <?= $radioElem->getMultiOption('existing_user'); ?>
@@ -40,13 +40,13 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
 <?php endif ?>
 <?php if (($newUserElem = $form->getElement('new_user')) !== null): ?>
   <div>
-    <div style="display: inline-block; width: 30.2em;">
+    <div class="instructions">
       <?= $newUserElem; ?>
       <?= $form->getElement('new_user_password'); ?>
       <?= $form->getElement('new_user_2ndpass'); ?>
     </div>
 <?php if ($showRadioBoxes): ?>
-    <div style="vertical-align: top; display: inline-block; padding: 0.4em 0.2em 0;">
+    <div class="radiobox">
       <label>
         <input type="radio" name="user_type" value="new_user">
         <?= $radioElem->getMultiOption('new_user'); ?>

application/views/scripts/form/setup-requirements.phtml

@@ -6,14 +6,14 @@ use Icinga\Web\Setup\Requirements;
 $requirements = $form->getRequirements();
 
 ?>
-<table>
+<table class="requirements">
   <tbody>
 <?php foreach ($requirements as $requirement): ?>
     <tr>
       <td><?= $requirement->title; ?></td>
       <td><?= $requirement->description; ?></td>
-      <td style="background-color: <?= $requirement->state === Requirements::STATE_OK ? 'green' : (
-        $requirement->state === Requirements::STATE_OPTIONAL ? 'yellow' : 'red'
+      <td class="<?= $requirement->state === Requirements::STATE_OK ? 'fulfilled' : (
+        $requirement->state === Requirements::STATE_OPTIONAL ? 'not-available' : 'missing'
       ); ?>"><?= $requirement->message; ?></td>
     </tr>
 <?php endforeach ?>

application/views/scripts/setup/wizard.phtml

@@ -1,3 +1,3 @@
-<div class="container">
+<div id="wizard" class="container">
   <?= $wizard->getForm()->render(); ?>
 </div>

library/Icinga/Web/StyleSheet.php

@@ -19,6 +19,7 @@ class StyleSheet
         'css/icinga/main-content.less',
         'css/icinga/tabs.less',
         'css/icinga/forms.less',
+        'css/icinga/wizard.less',
         'css/icinga/widgets.less',
         'css/icinga/pagination.less',
         'css/icinga/monitoring-colors.less',

public/css/icinga/wizard.less

@@ -0,0 +1,28 @@
+#wizard table.requirements {
+  td {
+    &.fulfilled {
+      background-color: lime;
+    }
+
+    &.not-available {
+      background-color: yellow;
+    }
+
+    &.missing {
+      background-color: red;
+    }
+  }
+}
+
+#setup_admin_account {
+  div.instructions {
+    width: 30.2em;
+    display: inline-block;
+  }
+
+  div.radiobox {
+    vertical-align: top;
+    display: inline-block;
+    padding: 0.4em 0.2em 0;
+  }
+}