1 files changed, 357 insertions, 0 deletions
diff --git a/public/css/common.less b/public/css/common.less
new file mode 100644
index 0000000..777cc33
--- /dev/null
+++ b/public/css/common.less
@@ -0,0 +1,357 @@
+/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */
+
+@exports: {
+  @iplWebAssets: "../lib/icinga/icinga-php-library";
+};
+
+& > .content.full-width {
+  padding-left: 0;
+  padding-right: 0;
+
+  .list-item {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+}
+
+& > .content.full-height {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.plugin-output {
+  .monospace();
+  word-break: break-word;
+}
+
+.empty-state {
+  color: @gray-semilight;
+}
+
+div.show-more {
+  .clearfix();
+  float: right;
+}
+
+.state-ball.state-not-available {
+  .ball-solid(@gray-light);
+  .animate(pulse 1.5s infinite both);
+}
+
+.icon-ball {
+  .ball();
+  .ball-outline(@gray);
+  text-align: center;
+
+  i:before {
+    margin-right: 0;
+  }
+}
+
+.user-ball {
+  .ball();
+  .ball-size-xl();
+  .ball-solid(@gray-semilight);
+  font-weight: bold;
+  line-height: 1.75;
+  text-transform: uppercase;
+}
+
+.usergroup-ball {
+  .ball();
+  .ball-outline(@gray);
+  .ball-size-xl();
+  line-height: 1.75;
+  text-transform: uppercase;
+}
+
+.ack-badge {
+  text-transform: uppercase;
+  line-height: 1;
+  margin-top: -.25em;
+  align-self: flex-start;
+
+  i {
+    vertical-align: baseline;
+  }
+}
+
+.controls {
+  .box-shadow(0, 0, 0, 1px, @gray-lighter);
+  flex-shrink: 0;
+  position: relative; // Required for the host meta info control
+  z-index: 1; // The content may clip, this ensures the separator is always visible
+
+  > :not(:only-child) {
+    margin-bottom: .5em;
+  }
+
+  #object-meta-info {
+    margin-bottom: 0;
+
+    .object-meta-info {
+      margin-bottom: .5em;
+    }
+  }
+
+  &.overdue,
+  &.overdue .tabs li.active a,
+  &.overdue .object-meta-info-control {
+    background-color: @gray-lighter;
+  }
+
+  .limit-control,
+  .view-mode-switcher,
+  .sort-control {
+    margin-left: .5em;
+    float: right;
+  }
+
+  .toggle-switch {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .item-list {
+    width: 100%;
+
+    .list-item .main {
+      border-top: none;
+    }
+
+    .list-item .visual {
+      width: auto;
+      margin-top: 0;
+    }
+
+    .list-item .visual,
+    .list-item .main {
+      padding-bottom: .25em;
+      padding-top: .25em;
+    }
+  }
+
+  .search-controls .continue-with {
+    margin-right: -.5em;
+    margin-left: .5em;
+  }
+
+  .show-more {
+    margin-top: .25em;
+  }
+
+  .notice {
+    display: none;
+  }
+
+  // TODO: Remove once ipl-web v0.7.0 is required
+  &:not(.default-layout) {
+    .pagination-control {
+      float: left;
+    }
+
+    .sort-control {
+      display: flex;
+      justify-content: flex-end;
+
+      :not(.form-element) > label {
+        margin-right: 0;
+      }
+
+      .control-button {
+        margin: 0;
+      }
+    }
+
+    > :not(:only-child) {
+      margin-bottom: 0.5em;
+    }
+
+    .search-suggestions {
+      margin-bottom: 2.5em;
+    }
+
+    .search-controls {
+      clear: both;
+      display: flex;
+      min-width: 100%;
+
+      .search-bar {
+        flex: 1 1 auto;
+
+        & ~ .control-button:last-child {
+          margin-right: -.5em;
+        }
+
+        & ~ .control-button {
+          margin-left: .5em;
+        }
+      }
+    }
+  }
+}
+
+.content > h2:first-child,
+.object-detail > h2:first-child {
+  margin-top: 0;
+}
+
+.content.full-width > h2 {
+  margin-left: 1em / 1.333em; // 1em / h2 font size
+}
+
+.object-detail .plugin-output {
+  .rounded-corners(.25em);
+  background-color: @gray-lighter;
+  padding: .5em;
+}
+
+.object-detail .item-list {
+  &.action-list .list-item {
+    margin-right: -1em;
+    margin-left: -1em;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
+
+  .list-item:last-of-type .caption {
+    min-height: 1.5em;
+    max-height: 3em;
+    height: auto;
+  }
+}
+
+.perfdata-wrapper {
+  svg {
+    width: 100%;
+  }
+
+  svg:not(:last-child) {
+    margin-bottom: 1em;
+  }
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-muted {
+  color: @gray;
+}
+
+.accompanying-text {
+  color: @text-color-light;
+
+  .subject {
+    color: @text-color;
+    .user-select(all);
+  }
+}
+
+.comment-detail {
+  > form,
+  > h2:not(:first-child) {
+    margin-top: 1em;
+  }
+}
+
+.footer {
+  display: flex;
+  .box-shadow(0, -1px, 0, 0, @gray-lighter);
+  color: @text-color-light;
+
+  .selection-count {
+    flex: 1 1 auto;
+
+    .selected-items {
+      font-size: 1.25em;
+    }
+  }
+
+  .status-bar, .selection-count {
+    font-size: .857em;
+    padding: .25em 1em;
+    line-height: 1.7;
+  }
+}
+
+.status-bar {
+  margin-left: auto;
+
+  .item-count {
+    font-size: 1.25em;
+  }
+
+  .state-badges {
+    display: inline-block;
+    margin: 0 0 0 .417em;
+  }
+}
+
+.multiselect-summary {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  // Donut
+  > div:first-child {
+    height: 4em;
+    width: 4em;
+
+    > svg {
+      height: auto;
+      max-width: 100%;
+    }
+  }
+
+  > .vertical-key-value {
+    padding: 0 .5em;
+  }
+}
+
+.hostgroup-list.minimal,
+.servicegroup-list.minimal {
+  .col {
+    padding: 0;
+  }
+
+  .title br {
+    display: none;
+  }
+
+  .vertical-key-value {
+    br {
+      display: none;
+    }
+
+    .key {
+      padding-left: .417em;
+    }
+
+    .value {
+      vertical-align: middle;
+    }
+  }
+}
+
+.hostgroup-list > col.object-statistics-graph,
+.servicegropup-list > col.object-statistics-graph {
+  padding-right: .25em;
+}
+
+.history-list,
+.objectHeader {
+  .visual.small-state-change .state-change {
+    padding-top: .25em;
+  }
+}
+
+.comment-popup {
+  .comment-list .main {
+    // This is necessary to limit the visible comment lines
+    // because the popup is shown in detailed list mode only
+    .caption {
+      height: 3em;
+    }
+  }
+}