1 files changed, 192 insertions, 0 deletions
diff --git a/public/css/widget/check-statistics.less b/public/css/widget/check-statistics.less
new file mode 100644
index 0000000..4bd34c2
--- /dev/null
+++ b/public/css/widget/check-statistics.less
@@ -0,0 +1,192 @@
+.check-statistics {
+  position: relative;
+  .card();
+  .progress-bar();
+
+  .check-attempt {
+    display: inline-flex;
+  }
+
+  .bubble {
+    &.top-left-aligned,
+    &.top-right-aligned {
+      &::before {
+        visibility: hidden;
+      }
+
+      svg {
+        position: absolute;
+        top: -1em;
+        width: 1em;
+        height: 1em;
+
+        .bg {
+          fill: @body-bg-color;
+        }
+
+        .border {
+          fill: @gray-light;
+        }
+      }
+    }
+
+    &.top-left-aligned {
+      transform: unset;
+      border-top-left-radius: 0;
+
+      svg {
+        left: -1px;
+      }
+    }
+
+    &.top-right-aligned {
+      transform: translate(-100%);
+      border-top-right-radius: 0;
+
+      svg {
+        right: -1px;
+      }
+    }
+  }
+
+  // ATTENTION!: `&.progress-bar {` must not be used here, seems to confuse the less parser!!!!111
+
+  &.progress-bar .timeline .progress.running {
+    &::before,
+    > .bar {
+      background: @state-ok;
+    }
+  }
+
+  &.progress-bar .check-timeline {
+    margin-top: .5em;
+  }
+  &.progress-bar .above {
+    margin-top: .5em;
+  }
+
+  .interval-line {
+    position: absolute;
+    height: 100%;
+
+    &::before {
+      position: absolute;
+      top: ~"calc(50% - .125em)";
+      display: block;
+      height: .25em;
+      width: 100%;
+      content: "";
+
+      background-color: @gray-light;
+    }
+
+    .vertical-key-value {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+
+      padding: 0 .2em;
+      background-color: @body-bg-color;
+    }
+
+    .start,
+    .end {
+      position: absolute;
+      top: 50%;
+      width: .25em;
+      height: 1em;
+      background-color: @gray;
+    }
+
+    .start {
+      left: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    .end {
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  .execution-line .vertical-key-value {
+    z-index: 1;
+  }
+
+  &.check-overdue {
+    --duration-scale: 60%;
+    --overlay-scale: 20%;
+
+    .above {
+      .now {
+        position: absolute;
+        right: var(--hPadding);
+        bottom: 0;
+
+        .bubble {
+          // to move the center of the bubble to the end of the wrapper.
+          transform: translate(50%, 0);
+        }
+      }
+    }
+
+    .timeline-overlay {
+      background: linear-gradient(90deg, @gray-light 0, @color-down 2em);
+      opacity: 1;
+
+      &::after {
+        background-color: @color-down;
+      }
+    }
+  }
+
+  &.checks-disabled.progress-bar {
+    .timeline {
+      .marker {
+        &.highlighted {
+          background-color: @gray;
+        }
+      }
+    }
+  }
+
+  .checks-disabled-overlay {
+    border-radius: 0.4em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    background-color: ~"@{disabled-gray}20";
+    z-index: 1;
+
+    .notes {
+      color: @text-color-light;
+      margin-top: -4em;
+      text-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+#layout.twocols &#col1,
+#layout.minimal-layout,
+#layout.poor-layout,
+#layout.twocols.compact-layout,
+#layout.twocols.default-layout {
+  .check-statistics .bubble.top-right-aligned {
+    transform: translate(-50%, 0); // default what progress-bar() defined
+    border-top-right-radius: .25em; // default what progress-bar() defined
+
+    &::before {
+      visibility: visible;
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}