1 files changed, 666 insertions, 0 deletions
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
new file mode 100644
index 0000000..3518cbe
--- /dev/null
+++ b/public/css/icinga/widgets.less
@@ -0,0 +1,666 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+#announcements > ul {
+  background-color: @body-bg-color;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    border-bottom: 1px solid @gray-lighter;
+    line-height: 1.5em;
+    padding: 0.5em 1em 0.5em 3em;
+
+    position: relative;
+
+    &:before {
+      color: @icinga-blue;
+      content: "\e811";
+      font-family: 'ifont';
+
+      position: absolute;
+      left: 1.25em;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    a {
+      color: @icinga-blue;
+    }
+
+    .message {
+      display: inline-block;
+      vertical-align: middle;
+      padding-right: 1.5em;
+      font-size: 7/6em;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.acknowledge-announcement-control,
+.application-state-acknowledge-message-control {
+  background: none;
+  border: none;
+  display: block;
+  margin-top: -0.75em;
+
+  position: absolute;
+  right: .75em;
+  top: 50%;
+}
+
+.application-state-acknowledge-message-control .link-button {
+  color: #fff;
+
+  &:hover .icon-cancel {
+    color: @icinga-blue;
+  }
+}
+
+#application-state-summary > div {
+  background-color: @color-critical;
+  color: @text-color-on-icinga-blue;
+  line-height: 1.5em;
+  padding: 0.5em 1em 0.5em 3em;
+
+  position: relative;
+
+  &:before {
+    content: "\e84d";
+    font-family: 'ifont';
+
+    position: absolute;
+    text-align: center;
+    left: .4em;
+    padding: .5em;
+    width: 3em;
+    top: 0;
+  }
+
+  > section {
+    margin-left: .5em;
+  }
+
+  > form .icon-cancel:before {
+    color: @text-color-on-icinga-blue;
+  }
+}
+
+.dashboard-link {
+  .clearfix();
+  display: block;
+  max-width: 100%;
+  vertical-align: middle;
+  padding: 1em;
+  width: 36em;
+
+  &:hover {
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+
+    -webkit-background-clip: padding-box;
+       -moz-background-clip: padding;
+            background-clip: padding-box;
+
+    -webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+       -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+
+    background-color: @tr-hover-color;
+    text-decoration: none;
+  }
+}
+
+.dashboard.content > .container {
+  overflow-x: auto;
+}
+
+.link-meta {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.link-label {
+  font-weight: @font-weight-bold;
+}
+
+.link-description {
+  color: @text-color-light;
+}
+
+.link-icon {
+  display: table-cell;
+  padding-right: .5em;
+  vertical-align: middle;
+  text-align: center;
+
+  > i {
+    font-size: 3em;
+    opacity: 0.7;
+    line-height: 1.5;
+
+    &:before {
+      min-width: 1.25em;
+    }
+  }
+
+  > img {
+    width: 3em;
+    height: 3em;
+    margin-right: .6em;
+  }
+}
+
+table.historycolorgrid {
+  font-size: 1.5em;
+}
+
+table.historycolorgrid th {
+  width: 1em;
+  height: 1em;
+  margin: 0.5em;
+  font-size: 0.55em;
+  font-weight: bold;
+}
+
+table.historycolorgrid td {
+  width: 1em;
+  height: 1em;
+  margin: 1em;
+}
+
+table.historycolorgrid td:hover {
+  opacity: 0.5;
+}
+
+table.historycolorgrid td.weekday {
+  font-size: 0.55em;
+  font-weight: bold;
+  width: 2.5em;
+  opacity: 1.0;
+}
+
+table.historycolorgrid a, table.historycolorgrid span {
+  .rounded-corners(0.2em);
+  margin: 0;
+  text-decoration: none;
+  display: block;
+  width: 1.1em;
+  height: 1.1em;
+}
+
+table.historycolorgrid a:hover {
+  text-decoration: none;
+}
+
+table.multiselect tr[href] td {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+#main div.filter {
+  .search.search-input {
+    width: 8em;
+  }
+
+  form.editor {
+    input[type=text], select {
+      width: 12em;
+      height: 2em;
+      line-height: 1;
+    }
+
+    ul.tree li.active {
+      background-color: @gray-lightest;
+    }
+
+    button {
+      padding: .5em;
+      border: none;
+      background: none;
+      color: @text-color;
+
+      &:hover, &:focus {
+        color: @icinga-blue;
+      }
+    }
+
+    .buttons {
+      margin-left: 25em;
+      padding: .25em 0;
+    }
+
+    .buttons input:not(:last-child) {
+      margin-right:.5em;
+    }
+
+    ul.tree {
+      .filter-operator {
+        width: 5em;
+      }
+
+      .new-filter {
+        background: #ffb;
+      }
+
+      .filter-rule {
+        width: 4em;
+      }
+    }
+  }
+}
+
+form.role-form {
+  &.icinga-form .control-label-group {
+    width: 20em;
+  }
+
+  .control-label-group em {
+    color: @text-color-light;
+    font-style: normal;
+  }
+
+  .unrestricted-role {
+    text-decoration: line-through;
+  }
+
+  .control-label > * {
+    display: inline-block;
+  }
+
+  summary {
+    border-bottom: 1px solid @gray-light;
+    .user-select(none);
+    cursor: pointer;
+
+    font-weight: @font-weight-bold;
+    margin: 0.556em 0 0.333em;
+    font-size: 1.167em;
+
+    display: flex;
+    align-items: baseline;
+    .privilege-preview {
+      flex: 1 1 auto;
+    }
+
+    > :first-child {
+      display: inline-block;
+      width: 20em / 1.167em; // element label width / summary font-size
+    }
+
+    > :nth-last-child(1),
+    > :nth-last-child(2) {
+      font-size: .75em;
+      opacity: .6;
+    }
+
+    .privilege-preview .icon {
+      &.granted {
+        color: @color-granted;
+      }
+
+      &.refused {
+        color: @color-refused;
+      }
+
+      &.restricted {
+        color: @color-restricted;
+      }
+    }
+  }
+
+  .collapsible {
+    summary em {
+      font-size: .857em;
+      font-weight: normal;
+      color: @text-color-light;
+    }
+
+    h4 {
+      display: inline-block;
+      width: 20em;
+      margin-top: 1.5em;
+      padding-right: .5625em;
+      text-align: right;
+
+      & ~ i {
+        display: inline-block;
+        width: 2.625em;
+        margin-right: 1em;
+        text-align: center;
+
+        &.icon-ok {
+          color: @color-granted;
+        }
+
+        &.icon-cancel {
+          color: @color-refused;
+        }
+      }
+    }
+  }
+}
+
+ul.tree select:first-of-type { /* ?? */
+  margin-bottom: 0.3em;
+  margin-left: 2em;
+}
+
+ul.tree {
+  padding: 0;
+  margin: 0;
+  padding-top: .5em;
+}
+
+ul.tree ul {
+  padding-left: 1em;
+}
+
+ul.tree li {
+  margin: 0;
+  list-style-type: none;
+  position: relative;
+  padding: 0;
+}
+
+ul.tree li .handle {
+  background-image: url('../img/tree/tree-minus.gif');
+  background-repeat: no-repeat;
+  display: inline-block;
+  position: absolute;
+  width: 1.5em;
+  height: 2em;
+  left: 0em;
+  background-position: center center;
+  z-index: 1;
+  cursor: pointer;
+}
+
+ul.tree li.collapsed > .handle {
+  background-image: url('../img/tree/tree-plus.gif');
+}
+
+ul.tree li.collapsed > ul {
+  display: none;
+}
+
+ul.tree li::before, ul.tree li::after {
+  content: '';
+  position: absolute;
+  right: auto;
+  left: -0.2em;
+  border-color: @gray-light;
+  border-style: dotted;
+  border-width: 0;
+}
+
+/* This is the left vertical line */
+ul.tree li::before {
+  border-left-width: 1px;
+  top: -.5em;
+  width: 1em;
+  height: 2.5em;
+  bottom: 1em;
+}
+
+/* This is the horizontal dash in front of each item */
+ul.tree li::after {
+  border-top-width: 1px;
+  top: 1em;
+  width: 2em;
+  height: 1em;
+}
+
+/* Stop left vertical line at "mid-height" after last nodes (at each level) */
+ul.tree li:last-child::before {
+  height: 1.5em;
+}
+
+/* No border for the root element - there must be only ONE root */
+ul.tree > li::before, ul.tree > li::after {
+  display: none;
+}
+
+/* No connector before (each) root element */
+ul.tree > ul > li::before, ul.tree > ul > li::after {
+	border: 0;
+}
+
+ul.tree li a {
+  display: inline-block;
+  line-height: 2em;
+  padding: 0 .5em;
+  text-decoration: none;
+  color: @gray;
+  background-repeat: no-repeat;
+  background-position: 0.8em 0.4em;
+}
+
+ul.tree li a.error {
+  color: @color-critical-handled;
+}
+
+ul.tree li a:hover {
+  color: @text-color;
+  text-decoration: underline;
+}
+
+ul.tree li a.error:hover {
+  color: @color-critical;
+}
+
+/* charts should grow as much as possible but never beyond the current viewport's size */
+.svg-container-responsive {
+  padding: 1.5em;
+  height: 80vh;
+}
+
+.tipsy .tipsy-inner {
+  // overwrite tooltip max width, we need them to grow bigger
+  font-family: @font-family;
+  font-size: @font-size-small;
+  max-width: 300px;
+  text-align: left;
+  background-color: rgba(0,0,0,0.8);
+}
+
+.progress-label span {
+  font-size: 1.5em;
+  .animate(blink 1.4s infinite both);
+
+  &:nth-child(2) {
+    animation-delay: .2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: .4s;
+  }
+}
+
+.flyover:not(.flyover-expanded) .flyover-content {
+  display: none;
+}
+
+.flyover {
+  position: relative;
+
+  .flyover-content {
+    background-color: @body-bg-color;
+    border: 1px solid;
+    border-color: @gray-lighter;
+    box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
+    position: absolute;
+    padding: @vertical-padding @horizontal-padding;
+    .rounded-corners();
+  }
+
+  &.flyover-arrow-top .flyover-content:before {
+    background: @body-bg-color;
+    border-left: 1px solid @gray-lighter;
+    border-top: 1px solid @gray-lighter;
+    content: "";
+    height: 1em;
+    -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+    width: 1em;
+
+    position: absolute;
+    left: 6px;
+    top: -7px;
+  }
+
+  &.flyover-right .flyover-content {
+    left: auto;
+    right: 0;
+  }
+
+  &.flyover-arrow-top.flyover-right .flyover-content:before {
+    left: auto;
+    right: 6px;
+  }
+}
+
+.slice-state-ok {
+  stroke: @color-ok;
+  background: @color-ok;
+}
+
+.slice-state-warning-handled {
+  stroke: @color-warning-handled;
+  background: @color-warning-handled;
+}
+
+.slice-state-warning {
+  stroke: @color-warning;
+  background: @color-unreachable-handled;
+}
+
+.slice-state-critical-handled {
+  stroke: @color-critical-handled;
+  background: @color-critical-handled;
+}
+
+.slice-state-critical {
+  stroke: @color-critical;
+  background: @color-critical;
+}
+
+.slice-state-unknown-handled {
+  stroke: @color-unknown-handled;
+  background: @color-unknown-handled;
+}
+
+.slice-state-unknown {
+  stroke: @color-unknown;
+  background: @color-unknown;
+}
+
+.slice-state-unreachable-handled {
+  stroke: @color-unreachable-handled;
+  background: @color-unreachable-handled;
+}
+
+.slice-state-unreachable {
+  stroke: @color-unreachable;
+  background: @color-unreachable;
+}
+
+.slice-state-pending {
+  stroke: @color-pending;
+  background: @color-pending;
+}
+
+.slice-state-not-checked {
+  stroke: @gray-light;
+  background: @gray-light;
+}
+
+.donut {
+  width: 22em;
+  height: 22em;
+  min-width: 11.5em;
+  display: table;
+}
+
+.donut-graph {
+  width: 22em;
+  height: 22em;
+}
+
+.donut-label {
+  font-weight: bold;
+  fill: @text-color;
+}
+
+.donut-label {
+  margin-top: -12.5em;
+  text-align: center;
+}
+
+.donut-label-big {
+  color: @gray-light;
+  .fg-stateful();
+  font-size: 6em;
+  line-height: 0;
+  text-anchor: middle;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.donut-label-small {
+  fill: @text-color;
+  font-size: 1.2em;
+  text-anchor: middle;
+  -moz-transform: translateY(0.35em);
+  -ms-transform: translateY(0.35em);
+  -webkit-transform: translateY(0.35em);
+  transform: translateY(0.35em);
+}
+
+.donut-container {
+  float: left;
+
+  &:not(:last-of-type) {
+    margin-right: 10em;
+  }
+}
+
+.dashboard .donut-container .donut-legend {
+  margin-left: auto;
+}
+
+.donut-legend {
+  width: 50%;
+  padding: 0;
+  margin-left: 18em;
+  list-style-type: none;
+
+  li {
+    vertical-align: middle;
+
+    &:not(:last-child) {
+      margin-bottom: .5em;
+    }
+
+    .badge {
+      font-weight: bold;
+      margin-right: .5em;
+      vertical-align: initial;
+    }
+  }
+}
+
+html.no-js .progress-label {
+  display: none;
+}
+