1 files changed, 93 insertions, 0 deletions
diff --git a/public/css/list/downtime-list.less b/public/css/list/downtime-list.less
new file mode 100644
index 0000000..8768097
--- /dev/null
+++ b/public/css/list/downtime-list.less
@@ -0,0 +1,93 @@
+// Style
+
+.downtime-list .list-item,
+.downtime-detail .list-item {
+  .progress {
+    > .bar {
+      background-color: @color-ok;
+    }
+  }
+
+  .visual {
+    background-color: @gray-lighter;
+  }
+
+  .main {
+    border-top: 1px solid @gray-light;
+  }
+
+  &:first-child .main {
+    border-top: none;
+
+    .progress > .bar {
+      border-top: 1px solid @gray-light;
+    }
+  }
+
+  &.in-effect {
+    .visual {
+      background-color: @color-ok;
+      color: @text-color-on-icinga-blue;
+    }
+
+    .main {
+      padding-top: 0; // If active the progress bar represents the padding top
+    }
+  }
+}
+
+// Layout
+
+.downtime-list .list-item {
+  .caption > * {
+    display: inline;
+  }
+}
+
+.downtime-list .list-item,
+.downtime-detail .list-item {
+  .progress {
+    height: 2px;
+    margin-bottom: ~"calc(.5em - 2px)";
+    min-width: 100%;
+    position: relative;
+
+    > .bar {
+      height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &:first-child .main .progress > .bar {
+    height: ~"calc(100% + 1px)"; // +1px due to the border added exclusively for the first item
+  }
+
+  .visual {
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1em;
+    margin-right: .5em;
+    padding: .5em .25em;
+    text-align: center;
+    width: 6em;
+
+    strong {
+      font-size: 1.5em;
+      line-height: 1em;
+    }
+  }
+}
+
+.item-list.downtime-list.minimal .list-item {
+  .visual {
+    display: block;
+    line-height: 1.5;
+    width: 8em;
+    white-space: nowrap;
+
+    strong {
+      display: inline-block;
+      font-size: 1em;
+    }
+  }
+}