1 files changed, 171 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less
new file mode 100644
index 0000000..2a59ae7
--- /dev/null
+++ b/public/css/module.less
@@ -0,0 +1,171 @@
+// Icinga Web 2 X.509 Module | (c) 2018 Icinga GmbH | GPLv2
+
+@cert-segment-color-0: #FF595E;
+@cert-segment-color-1: #FFCA3A;
+@cert-segment-color-2: #8AC926;
+@cert-segment-color-3: #1982C4;
+@cert-segment-color-4: #6A4C93;
+
+.action-bar {
+  line-height: 2.5em;
+}
+
+.cert-details {
+  .iicon-certificate {
+    font-size: 5em;
+  }
+
+  h3 {
+    text-align: right;
+    //text-decoration: underline;
+    width: 10.25em;
+    border-bottom: 1px solid @gray-lighter;
+  }
+
+  dl {
+    > dd {
+      // Reset default margin
+      margin: 0;
+    }
+
+    > dt {
+      margin-right: 1em;
+      text-align: right;
+      width: 12em;
+
+      float: left;
+      clear: left;
+    }
+  }
+}
+
+.expiration-col .progress-bar {
+  background-color: @gray-lighter;
+  border-radius: 2px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+  height: 0.5em;
+
+  > div {
+    border-radius: 2px;
+    height: 100%;
+  }
+}
+
+.certificate-days-remaining {
+  font-size: @font-size-small;
+  margin-left: 2em;
+}
+
+.expiration-col {
+  width: 18em;
+
+  span.progress-bar-label {
+    font-size: 0.9em;
+  }
+}
+
+.icon-col > i {
+  font-size: 120%;
+}
+
+.version-col {
+  width: 1em;
+}
+
+.cert-table, .usage-table {
+  width: 98%;
+}
+
+.cert-dashboard {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cert-donut {
+  align-self: flex-start;
+  padding: 1em;
+
+  .donut-graph {
+    .segment-0 {
+      stroke: @cert-segment-color-0;
+    }
+
+    .segment-1 {
+      stroke: @cert-segment-color-1;
+    }
+
+    .segment-2 {
+      stroke: @cert-segment-color-2;
+    }
+
+    .segment-3 {
+      stroke: @cert-segment-color-3;
+    }
+
+    .segment-4 {
+      stroke: @cert-segment-color-4;
+    }
+  }
+
+  .badge {
+    height: 1.75em;
+
+    &.badge-0 {
+      background: @cert-segment-color-0;
+    }
+
+    &.badge-1 {
+      background: @cert-segment-color-1;
+    }
+
+    &.badge-2 {
+      background: @cert-segment-color-2;
+    }
+
+    &.badge-3 {
+      background: @cert-segment-color-3;
+    }
+
+    &.badge-4 {
+      background: @cert-segment-color-4;
+    }
+  }
+}
+
+.cert-chain {
+  .rounded-corners();
+
+  color: @text-color-inverted;
+  font-size: 120%;
+  font-weight: @font-weight-bold;
+  padding: 0.75em;
+  text-align: center;
+
+  > p {
+    margin: 0;
+  }
+
+  &.-valid {
+    background-color: @color-ok;
+  }
+
+  &.-invalid {
+    background-color: @color-critical;
+  }
+}
+
+.icon {
+  &.-ok {
+    color: @color-ok;
+  }
+
+  &.-critical {
+    color: @color-critical;
+  }
+}
+
+.schedule-element-separator {
+  border-top: 1px solid @gray-lighter;
+}