1 files changed, 128 insertions, 0 deletions
diff --git a/public/css/widget/state-change.less b/public/css/widget/state-change.less
new file mode 100644
index 0000000..adc8d42
--- /dev/null
+++ b/public/css/widget/state-change.less
@@ -0,0 +1,128 @@
+.state-change {
+  display: inline-flex;
+
+  &.reversed-state-balls {
+    // This is needed, because with ~ we can address only subsequent nodes
+    flex-direction: row-reverse;
+  }
+
+  .state-ball {
+    .box-shadow(0, 0, 0, 1px, @body-bg-color);
+  }
+
+  // Same on same
+  .state-ball ~ .state-ball {
+    &.ball-size-xs {
+      margin-left: -.05em;
+    }
+
+    &.ball-size-s {
+      margin-left: -.15em;
+    }
+
+    &.ball-size-m {
+      margin-left: -.275em;
+    }
+
+    &.ball-size-ml {
+      margin-left: -.375em;
+    }
+
+    &.ball-size-l,
+    &.ball-size-xl {
+      margin-left: -.875em;
+    }
+  }
+
+  // big left, smaller right
+  &:not(.reversed-state-balls) .ball-size-l ~ .state-ball {
+    &.ball-size-ml {
+      margin-top: .25em;
+      margin-left: -.5em;
+      margin-right: .25em;
+    }
+  }
+
+  // smaller left, big right
+  &.reversed-state-balls .ball-size-l ~ .state-ball {
+    &.ball-size-ml {
+      z-index: -1;
+      margin-top: .25em;
+      margin-right: -.5em;
+    }
+  }
+
+  .state-ball.state-ok,
+  .state-ball.state-up,
+  .state-pending {
+    &.ball-size-l,
+    &.ball-size-xl {
+      background-color: @body-bg-color;
+    }
+  }
+
+  // Avoid transparency on overlapping solid state-change state-balls
+  .state-ball.handled {
+    position: relative;
+    opacity: 1;
+
+    i {
+      position: relative;
+      z-index: 3;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: 50%;
+      opacity: .6;
+      z-index: 2
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      border-radius: 50%;
+      background-color: @body-bg-color;
+      z-index: 1;
+    }
+
+    &.state-pending:before {
+      background-color: @color-pending;
+    }
+
+    &.state-down:before {
+      background-color: @color-down;
+    }
+
+    &.state-warning:before {
+      background-color: @color-warning;
+    }
+
+    &.state-critical:before {
+      background-color: @color-critical;
+    }
+
+    &.state-unknown:before {
+      background-color: @color-unknown;
+    }
+  }
+}
+
+.overdue .state-change .state-ball {
+  .box-shadow(0, 0, 0, 1px, @gray-lighter);
+
+  &.handled:after {
+    background-color: @gray-lighter;
+  }
+}