1 files changed, 537 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less
new file mode 100644
index 0000000..659984d
--- /dev/null
+++ b/public/css/module.less
@@ -0,0 +1,537 @@
+/* Copyright (C) 2017 Icinga Development Team <info@icinga.com> */
+
+.tlv-overview-tiles .tlv-overview-tile {
+  display: block;
+
+  float: left;
+
+  padding: 1em;
+  margin: 1em;
+
+  position: relative;
+
+  width: 20em;
+  height: 10em;
+
+  border: 1px solid @gray;
+
+  text-decoration: none;
+
+  .tlv-title {
+    font-weight: bold;
+    font-size: 1.3em;
+  }
+
+  .tlv-name {
+    color: @gray;
+  }
+
+  .action-links {
+    position: absolute;
+    right: 0;
+    bottom: 1em;
+  }
+
+  .unsaved {
+    display: inline-block;
+    padding: 0.2em;
+
+    font-weight: bold;
+
+    background: @tlv-color-warning-bg;
+    color: @tlv-color-warning-fg;
+  }
+}
+
+// see Icinga Web 2: public/css/icinga/base.less
+//@import '../../vendor/icingaweb2/public/css/icinga/base.less';
+@tlv-color-critical-bg: @color-critical;
+@tlv-color-critical-fg: white;
+@tlv-color-critical-handled-bg: #FFCCBC; // Material Design Deep Orange 100
+@tlv-color-critical-handled-fg: #6d4148;
+@tlv-color-warning-bg: @color-warning;
+@tlv-color-warning-fg: #6d572b;
+@tlv-color-warning-handled-bg: #FFF9C4; // Material Design Yellow 100
+@tlv-color-warning-handled-fg: #6d572b;
+@tlv-color-unknown-bg: @color-unknown;
+@tlv-color-unknown-fg: white;
+@tlv-color-unknown-handled-bg: #E1BEE7; // Material Design Purple 100
+@tlv-color-unknown-handled-fg: #57326d;
+@tlv-color-ok-bg: @color-ok;
+@tlv-color-ok-fg: white;
+@tlv-color-downtime-bg: @color-ok;
+@tlv-color-downtime-fg: #333;
+@tlv-color-downtime-handled-bg: @color-ok;
+@tlv-color-downtime-handled-fg: #ffff00;
+@tlv-color-pending-bg: @color-pending;
+@tlv-color-pending-fg: #32486d;
+@tlv-color-missing-bg: #ccc;
+@tlv-color-missing-fg: #333;
+
+.tlv-status-tile {
+  &.critical, &.down {
+    background-color: @tlv-color-critical-bg;
+    color: @tlv-color-critical-fg;
+  }
+  &.critical.handled, &.down.handled {
+    background-color: @tlv-color-critical-handled-bg;
+    color: @tlv-color-critical-handled-fg;
+  }
+  &.unknown, &.unreachable {
+    background-color: @tlv-color-unknown-bg;
+    color: @tlv-color-unknown-fg;
+  }
+  &.unknown.handled, &.unreachable.handled {
+    background-color: @tlv-color-unknown-handled-bg;
+    color: @tlv-color-unknown-handled-fg;
+  }
+  &.warning {
+    background-color: @tlv-color-warning-bg;
+    color: @tlv-color-warning-fg;
+  }
+  &.warning.handled {
+    background-color: @tlv-color-warning-handled-bg;
+    color: @tlv-color-warning-handled-fg;
+  }
+  &.ok, &.up {
+    background-color: @tlv-color-ok-bg;
+    color: @tlv-color-ok-fg;
+  }
+  &.downtime.active {
+    background-color: @tlv-color-downtime-bg;
+    color: @tlv-color-downtime-fg;
+  }
+  &.downtime.handled {
+    background-color: @tlv-color-downtime-handled-bg;
+    color: @tlv-color-downtime-handled-fg;
+  }
+  &.pending {
+    background-color: @tlv-color-pending-bg;
+    color: @tlv-color-pending-fg;
+  }
+  &.missing {
+    background-color: @tlv-color-missing-bg;
+    color: @tlv-color-missing-fg;
+  }
+  &.total {
+    background-color: @icinga-blue;
+    color: @text-color-on-icinga-blue;
+  }
+}
+
+.tlv-status-section {
+  &.critical, &.down {
+    border-color: @tlv-color-critical-bg;
+  }
+  &.critical.handled, &.down.handled {
+    border-color: @tlv-color-critical-handled-bg;
+  }
+  &.unknown, &.unreachable {
+    border-color: @tlv-color-unknown-bg;
+  }
+  &.unknown.handled, &.unreachable.handled {
+    border-color: @tlv-color-unknown-handled-bg;
+  }
+  &.warning {
+    border-color: @tlv-color-warning-bg;
+  }
+  &.warning.handled {
+    border-color: @tlv-color-warning-handled-bg;
+  }
+  &.ok, &.up {
+    border-color: @tlv-color-ok-bg;
+  }
+  &.pending {
+    border-color: @tlv-color-pending-bg;
+  }
+  &.missing {
+    border-color: @tlv-color-missing-bg;
+  }
+}
+
+.tlv-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+
+  .tlv-header {
+    margin: 0 12px;
+    z-index: 99;
+  }
+}
+
+.tlv-header {
+  position: relative;
+
+  line-height: 2em;
+  height: 2em;
+
+  h1 {
+    display: inline-block;
+    border: none;
+    margin: 0 0.5em 0 0;
+  }
+
+  .last-refresh {
+    display: inline-block;
+    font-weight: bold;
+    margin: 0 0.5em;
+  }
+
+  .action-links {
+    display: inline-block;
+    margin: 0 0.5em;
+  }
+
+  .badges {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+
+    font-size: 1.2em;
+
+    .badge {
+      margin-left: 0.2em;
+    }
+  }
+}
+
+.tlv-view-tiles {
+  position: relative;
+
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+
+  height: 100%;
+
+  margin-top: -2em;
+  padding-top: 2em;
+
+  .tlv-tiles {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: stretch;
+    flex-grow: 1;
+
+    width: 100%;
+    height: 100%;
+
+    margin-top: -2.3em; // - padding title - margin tile
+    padding-top: 2.3em; // + padding title + margin tile
+  }
+
+  .tlv-tile {
+    margin: 0.1em;
+    flex-grow: 1;
+
+    overflow: hidden;
+
+    .badges {
+      display: inline-block;
+
+      font-weight: normal;
+      margin-left: 0.2em;
+
+      .badge {
+        font-size: 0.7em;
+
+        border: 0.1em solid white;
+        margin-left: 0.2em;
+      }
+    }
+  }
+
+  .tlv-tile-title {
+    display: inline-block;
+    height: 1.8em;
+    width: 100%;
+
+    padding: 0.1em;
+  }
+
+  > .tlv-tile { // first level
+    min-width: 40%;
+
+    border-style: solid;
+    border-width: 1px 1px 1px 4px;
+
+    padding: 0.1em;
+    margin: 0.3em 0.5em;
+
+    > .tlv-tile-title {
+      font-weight: bold;
+
+      > .badges {
+        float: right;
+      }
+    }
+
+    > .tlv-tiles > .tlv-tile { // second level
+      min-width: 10%;
+
+      > .tlv-tile-title {
+        height: 100%;
+        text-align: center;
+
+        .badge {
+          margin-top: -0.3em;
+        }
+
+        &:before {
+          content: "";
+          display: inline-block;
+          height: 100%;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+
+#layout.wide-layout .tlv-view-tiles .tlv-tile-title {
+  font-size: 1.3em;
+}
+
+#layout.wide-layout.twocols .tlv-view-tiles .tlv-tile-title {
+  font-size: 1.1em;
+}
+
+.tlv-view-tree {
+  .tlv-tree-node {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+
+    width: 100%;
+
+    &.tlv-collapsed {
+      width: auto;
+    }
+
+    background: none;
+    border-style: solid;
+
+    border-width: 2px 0 0 5px;
+
+    padding: 0.2em 0 0 1em;
+
+    &.tlv-collapsed {
+      > .tlv-tree-node, > .tlv-node-icinga {
+        display: none;
+      }
+    }
+
+    .badges {
+      display: inline-block;
+      font-size: 0.9em;
+
+      .badge {
+        border: 0.1em solid white;
+        margin-left: 0.2em;
+      }
+    }
+  }
+
+  > .tlv-tree-node {
+    border-right-width: 2px;
+
+    &:last-of-type {
+      border-bottom-width: 2px;
+    }
+  }
+
+  .tlv-tree-title {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    margin: -0.2em 0 0 -1em;
+    padding: 0.3em 0.3em 0.3em 0.3em;
+
+    .badges {
+      float: right;
+    }
+  }
+
+  .tlv-node-icinga {
+    flex-grow: 1;
+
+    margin: 0.2em;
+    padding: 0.2em 1em;
+    white-space: nowrap;
+
+    border-radius: 0.5em;
+
+    font-size: 0.9em;
+  }
+}
+
+.tlv-collapsible {
+  .icon.tlv-collapse-handle::before {
+    font-size: 1.3em;
+    content: '\e81d';
+  }
+
+  .collapsed {
+    .icon.tlv-collapse-handle::before {
+      content: '\e820';
+    }
+  }
+}
+
+/** BEGIN of breadcrumb **/
+.breadcrumb {
+  list-style: none;
+  overflow: hidden;
+  padding: 0;
+
+  .badges {
+    display: inline-block;
+    padding: 0 0 0 0.5em;
+    .badge {
+      line-height: 1.25em;
+      font-size: 0.8em;
+      border: 1px solid white;
+      margin: -0.25em 1px 0 0;
+    }
+  }
+}
+
+.breadcrumb:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.breadcrumb li {
+  float: left;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+}
+
+.breadcrumb li a {
+  color: white;
+  margin: 0;
+  font-size: 1.2em;
+  text-decoration: none;
+  padding-left: 2em;
+  line-height: 2.5em;
+  background: @icinga-blue;
+  position: relative;
+  display: block;
+  float: left;
+  &:focus {
+    outline: none;
+  }
+}
+
+.breadcrumb li a:before, .breadcrumb li a:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  border-top: 1.3em solid transparent;
+  border-bottom: 1.2em solid transparent;
+  position: absolute;
+  margin-top: -1.2em;
+  top: 50%;
+  left: 100%;
+}
+
+.breadcrumb li a:before {
+  border-left: 1.2em solid white;
+  margin-left: 1px;
+  z-index: 1;
+}
+
+.breadcrumb li a:after {
+  border-left: 1.2em solid @icinga-blue;
+  z-index: 2;
+}
+
+.breadcrumb li:first-child a {
+  padding-left: 1em;
+  padding-right: 0.5em;
+}
+
+.breadcrumb li:last-child a {
+  cursor: default;
+}
+
+.breadcrumb li:last-child a:hover {
+
+}
+
+.breadcrumb li:not(:last-child) a:hover {
+  background: @text-color;
+  color: white;
+}
+
+.breadcrumb li:not(:last-child) a:hover:after {
+  border-left-color: @text-color;
+}
+
+.breadcrumb li a:focus {
+  text-decoration: underline;
+}
+
+#layout.twocols, #layout.layout-minimal, div.compact {
+  .breadcrumb {
+    font-size: 0.833em;
+  }
+}
+
+/** END of breadcrumb **/
+
+.action-links {
+  .action-link {
+    margin-right: 1em;
+  }
+}
+
+.warning-note {
+  display: inline-block;
+
+  padding: 1px 5px;
+  background: @tlv-color-warning-bg;
+  color: @tlv-color-warning-fg
+}
+
+textarea.code-editor {
+  min-height: 45em;
+  width: 100%;
+}
+
+.CodeMirror {
+  min-height: 60em;
+  width: 100%;
+
+  margin-bottom: 1em;
+
+  border: 1px solid @gray-light;
+
+  pre {
+    font-family: @font-family-fixed;
+    font-size: 1.2em;
+  }
+}
+
+div[href].action.active {
+  border-left-color: @icinga-blue;
+}
+
+div[href].action:hover {
+  cursor: pointer;
+
+  a[href]:first-of-type {
+    text-decoration: underline;
+  }
+}