CSS: Reduce color mixins to fg-stateful and bg-stateful

modules/monitoring/application/views/scripts/list/servicegrid.phtml

@@ -81,7 +81,7 @@ $hostFilter = '(host_name=' . implode('|host_name=', array_keys($pivotData)) . '
                             $service->service_display_name,
                             $service->host_display_name
                         ),
-                        'class'               => 'bg-color-' . Service::getStateText($service->service_state) . ($service->service_handled ? ' handled' : ''),
+                        'class'               => 'service-grid-link state-' . Service::getStateText($service->service_state) . ($service->service_handled ? ' handled' : ''),
                         'title'               => $service->service_output
                     )
                 ) ?>

modules/monitoring/application/views/scripts/show/components/checksource.phtml

@@ -8,9 +8,9 @@
     <?php if ($object->is_reachable !== null): ?>
         <span class="check-source-meta"><?= (bool) $object->is_reachable ? $this->translate('is reachable') : $this->translate('is not reachable') ?></span>
         <?php if ((bool) $object->is_reachable) {
-            echo $this->icon('circle', $this->translate('Is reachable'), array('class' => 'check-source-reachable'));
+            echo $this->icon('circle', $this->translate('Is reachable'), array('class' => 'icon-stateful state-ok'));
         } else {
-            echo $this->icon('circle', $this->translate('Not reachable'), array('class' => 'check-source-not-reachable'));
+            echo $this->icon('circle', $this->translate('Not reachable'), array('class' => 'icon-stateful state-critical'));
         } ?>
     <?php endif ?>
     </td>

modules/monitoring/application/views/scripts/show/components/checkstatistics.phtml

@@ -9,7 +9,7 @@ $activeChecksEnabled = (bool) $object->active_checks_enabled;
 <?php if ((int) $object->state !== 99): ?>
         <?= $this->timeAgo($object->last_check) ?>
     <?php if ($object->next_update < time()): ?>
-        <?= $this->icon('circle', $this->translate('Check result is late'), array('class' => 'check-result-late')) ?>
+        <?= $this->icon('circle', $this->translate('Check result is late'), array('class' => 'icon-stateful state-critical')) ?>
     <?php endif ?>
 <?php endif ?>
     <?php if (isset($checkNowForm)) { // Form is unset if the current user lacks the respective permission

modules/monitoring/public/css/module.less

@@ -1,19 +1,7 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
-// Styles for the icon displayed if a check source is reachable
-.check-source-reachable {
-  color: @color-ok;
-}
-
-// Styles for the icon displayed if a check source is not reachable
-.check-source-not-reachable {
-  color: @color-critical;
-}
-
 // Styles for the icon displayed if a check result is late
 .check-result-late {
-  color: @color-critical;
-
   &:before {
     // Remove right margin because the check now form may be displayed right next to the icon and we already have a gap
     // because of inline-blocks

modules/monitoring/public/css/service-grid.less

@@ -5,24 +5,10 @@
   white-space: nowrap;
 
   td {
+    color: @gray-light;
+    padding: 0.2em;
     text-align: center;
-    width: 1.0em;
+    width: 1em;
-    color: @gray-lighter;
-    padding: 1px 2px;
-
-    a {
-      .rounded-corners(0.4em);
-      display: block;
-      height: 1.5em;
-      width: 1.5em;
-    }
-
-    i {
-      .rounded-corners(0.4em);
-      display: block;
-      height: 1.5em;
-      width: 1.5em;
-    }
   }
 
   .rotate-45 {
@@ -42,6 +28,26 @@
   }
 }
 
-.joystick-pagination a {
+.joystick-pagination {
+  margin: 0 auto;
+
+  a {
     color: @text-color;
+  }
+
+  i {
+    display: block;
+    height: 1.5em;
+    width: 1.5em;
+  }
+}
+
+.service-grid-link {
+  .bg-stateful();
+  .rounded-corners();
+
+  display: inline-block;
+  height: 1.5em;
+  vertical-align: middle;
+  width: 1.5em;
 }

public/css/icinga/badges.less

@@ -5,7 +5,9 @@
 @badge-padding: 0.25em;
 
 .badge {
+  .bg-stateful();
   .rounded-corners();
+
   background-color: @gray-light;
   color: @badge-color;
   display: inline-block;
@@ -17,36 +19,4 @@
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
-
-  &.state-ok {
-    .bg-color-ok();
-  }
-
-  &.state-up {
-    .bg-color-up();
-  }
-
-  &.state-warning {
-    .bg-color-warning();
-  }
-
-  &.state-critical {
-    .bg-color-critical();
-  }
-
-  &.state-down {
-    .bg-color-down();
-  }
-
-  &.state-unreachable {
-    .bg-color-unreachable();
-  }
-
-  &.state-unknown {
-    .bg-color-unknown();
-  }
-
-  &.state-pending {
-    .bg-color-pending();
-  }
 }

public/css/icinga/main.less

@@ -65,6 +65,10 @@ a:hover > .icon-cancel {
   color: @color-critical;
 }
 
+.icon-stateful {
+  .fg-stateful();
+}
+
 // Link styles
 
 .button-link {

public/css/icinga/mixins.less

@@ -114,88 +114,88 @@
           animation-fill-mode: forwards;
 }
 
-// Color mixins
+// Mixin for stateful foreground colors, e.g. text or icons
-
+.fg-stateful {
-.bg-color-ok,
+  &.state-ok {
-.bg-color-up {
-  background-color: @color-ok;
-}
-
-.bg-color-warning {
-  background-color: @color-warning;
-
-  &.handled {
-    background-color: @color-warning-handled;
-  }
-}
-
-.bg-color-critical,
-.bg-color-down {
-  background-color: @color-critical;
-
-  &.handled {
-    background-color: @color-critical-handled;
-  }
-}
-
-.bg-color-unreachable {
-  background-color: @color-unreachable;
-
-  &.handled {
-    background-color: @color-unreachable-handled;
-  }
-}
-
-.bg-color-unknown {
-  background-color: @color-unknown;
-
-  &.handled {
-    background-color: @color-unknown-handled;
-  }
-}
-
-.bg-color-pending {
-  background-color: @color-pending;
-}
-
-.fg-color-ok,
-.fg-color-up {
     color: @color-ok;
-}
+  }
-
+  &.state-up {
-.fg-color-warning {
+    color: @color-up;
+  }
+  &.state-warning {
     color: @color-warning;
-
     &.handled {
       color: @color-warning-handled;
     }
-}
+  }
-
+  &.state-critical {
-.fg-color-critical,
-.fg-color-down {
     color: @color-critical;
-
     &.handled {
       color: @color-critical-handled;
     }
-}
+  }
-
+  &.state-down {
-.fg-color-unreachable {
+    color: @color-down;
+    &.handled {
+      color: @color-down-handled;
+    }
+  }
+  &.state-unreachable {
     color: @color-unreachable;
-
     &.handled {
       color: @color-unreachable-handled;
     }
-}
+  }
-
+  &.state-unknown {
-.fg-color-unknown {
     color: @color-unknown;
-
     &.handled {
       color: @color-unknown-handled;
     }
+  }
+  &.state-pending {
+    color: @color-pending;
+  }
 }
 
-.fg-color-pending {
+// Mixin for stateful background colors
-  color: @color-pending;
+.bg-stateful {
+  &.state-ok {
+    background-color: @color-ok;
+  }
+  &.state-up {
+    background-color: @color-up;
+  }
+  &.state-warning {
+    background-color: @color-warning;
+    &.handled {
+      background-color: @color-warning-handled;
+    }
+  }
+  &.state-critical {
+    background-color: @color-critical;
+    &.handled {
+      background-color: @color-critical-handled;
+    }
+  }
+  &.state-down {
+    background-color: @color-down;
+    &.handled {
+      background-color: @color-down-handled;
+    }
+  }
+  &.state-unreachable {
+    background-color: @color-unreachable;
+    &.handled {
+      background-color: @color-unreachable-handled;
+    }
+  }
+  &.state-unknown {
+    background-color: @color-unknown;
+    &.handled {
+      background-color: @color-unknown-handled;
+    }
+  }
+  &.state-pending {
+    background-color: @color-pending;
+  }
 }