1 files changed, 136 insertions, 0 deletions
diff --git a/public/css/widget/monitoring-health.less b/public/css/widget/monitoring-health.less
new file mode 100644
index 0000000..f0ed252
--- /dev/null
+++ b/public/css/widget/monitoring-health.less
@@ -0,0 +1,136 @@
+.monitoring-health {
+  max-width: 65em;
+
+  > section:not(:last-child) {
+    margin-bottom: 4em;
+  }
+
+  .vertical-key-value .value {
+    display: inline-block;
+    margin-bottom: .25em;
+  }
+
+  .check-summary {
+    padding: .5em 0;
+
+    .col {
+      padding: 0 1em .5em 1em;
+    }
+
+    .col:not(:last-child) {
+      border-right: 1px solid @gray-light;
+    }
+  }
+
+  .check-summary,
+  .instance-features {
+    .rounded-corners();
+    border: 1px solid;
+    border-color: @gray-light;
+    display: flex;
+    width: 100%;
+  }
+
+  .check-summary,
+  .col-content,
+  .icinga-info {
+    width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+
+  .icinga-info {
+    margin-bottom: -2em;
+
+    .vertical-key-value {
+      margin-bottom: 2em;
+    }
+  }
+
+  .col {
+    flex: 1 1 auto;
+    text-align: center;
+
+    > h3 {
+      margin: 0 0 1em;
+    }
+  }
+
+  .icinga-health {
+    .rounded-corners();
+    margin-bottom: 2em;
+    padding: 1em;
+    text-align: center;
+    width: 100%;
+    font-weight: bold;
+
+    &.up {
+      border: 1px solid;
+      border-color: @color-up;
+      color: @color-up;
+    }
+
+    &.down {
+      background-color: @color-down;
+      color: @body-bg-color;
+    }
+  }
+
+  .instance-features {
+    .control-group {
+      flex: 1 1 auto;
+      margin: .5em 0;
+      padding: .5em;
+      width: 0;
+
+      display: flex;
+      align-items: center;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+
+      &:not(:last-of-type) {
+        border-right: 1px solid @gray-light;
+      }
+
+      .control-label-group {
+        font-size: 10/12em;
+        margin-right: 0;
+        margin-top: 1em;
+        padding: 0;
+        text-align: center;
+        width: auto;
+
+        label {
+          text-align: center;
+        }
+      }
+
+      .toggle-switch {
+        margin: 0;
+      }
+    }
+  }
+}
+
+#layout.minimal-layout {
+  .icinga-info {
+    .vertical-key-value {
+      width: 100%;
+    }
+  }
+
+  .instance-features {
+    flex-wrap: wrap;
+
+    .control-group {
+      width: 33%;
+
+      &:nth-child(3n) {
+        border-right: none;
+      }
+    }
+  }
+}