1 files changed, 459 insertions, 0 deletions
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
new file mode 100644
index 0000000..11dfa30
--- /dev/null
+++ b/public/css/icinga/main.less
@@ -0,0 +1,459 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+// Url for static ipl assets
+@iplWebAssets: "../lib/icinga/icinga-php-library";
+
+// Width for the name column--th--of name-value-table
+@name-value-table-name-width: 38/3em;
+
+.action-link {
+  color: @icinga-blue;
+}
+
+.error-message {
+  font-weight: @font-weight-bold;
+}
+
+.error-reason {
+  margin-top: 4em;
+}
+
+.large-icon {
+  font-size: 200%;
+}
+
+.content-centered {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.icon-col {
+  text-align: center;
+  width: 1em;
+}
+
+.preformatted {
+  font-family: @font-family-fixed;
+  white-space: pre-wrap;
+}
+
+.markdown {
+  > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    border-bottom: 1px @text-color-light dotted;
+
+    &:hover, &:focus {
+      border-bottom: 1px @text-color solid;
+      text-decoration: none;
+    }
+
+    img {
+      max-width: 32em;
+    }
+
+    &.with-thumbnail {
+      img {
+        padding: 1px;
+      }
+
+      &:hover, &:focus {
+        img {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+
+    th {
+      text-align: left;
+      background-color: @gray-lighter;
+    }
+
+    &, th, td {
+      border: 1px solid @gray-light;
+    }
+  }
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.pull-right {
+  float: right;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.user-avatar {
+  height: 16px;
+  width: 16px;
+}
+
+.v-center {
+  > * {
+    vertical-align: middle;
+  }
+}
+
+.section {
+  margin-bottom: 2em;
+}
+
+a:hover > .icon-cancel {
+  color: @color-critical;
+}
+
+.icon-stateful {
+  .fg-stateful();
+}
+
+// Link styles
+
+.button-link {
+  .action-link();
+  .rounded-corners(3px);
+
+  background: @low-sat-blue;
+  display: inline-block;
+  padding: 0.25em 0.5em;
+
+  &:hover {
+    background: @low-sat-blue-dark;
+    text-decoration: none;
+  }
+}
+
+// List styles
+
+.comment-list {
+  margin: 0;
+
+  > dt {
+    border-bottom: 1px solid @gray-lighter;
+    margin-bottom: 0.25em;
+
+    &:hover {
+      background-color: @gray-lightest;
+
+      > .remove-action button:not(.spinner.active) {
+        visibility: visible;
+      }
+    }
+
+    > .remove-action button:not(.spinner.active) {
+      visibility: hidden;
+    }
+  }
+
+  > dd {
+    margin: 0 0 1em 0;
+  }
+}
+
+.comment-time {
+  color: @text-color-light;
+  font-size: @font-size-small;
+}
+
+.name-value-list {
+  > dd {
+    // Reset default margin
+    margin: 0;
+  }
+
+  > dt {
+    color: @text-color-light;
+    font-size: @font-size-small;
+  }
+}
+
+// Table styles
+
+.common-table {
+  width: 100%;
+
+  td, th {
+    padding-top: 1em;
+  }
+
+  td {
+    padding-bottom: 1em;
+  }
+
+  th {
+    text-align: left;
+    padding-bottom: 0.5em;
+  }
+
+  thead {
+    border-bottom: 1px solid @gray-light;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid @gray-lightest;
+    border-left: 5px solid transparent;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  tr[href].active {
+    background-color: @tr-active-color;
+    border-left-color: @icinga-blue;
+  }
+
+  tr[href]:hover {
+    background-color: @tr-hover-color;
+    cursor: pointer;
+  }
+}
+
+.name-value-table {
+  width: 100%;
+}
+
+.name-value-table > caption {
+  margin-top: .5em;
+  text-align: left;
+  font-weight: bold;
+}
+
+.name-value-table > tbody > tr > th {
+  color: @text-color-light;
+  // Reset default font-weight
+  font-weight: normal;
+  padding-left: 0;
+  text-align: left;
+  vertical-align: top;
+  width: @name-value-table-name-width;
+}
+
+/* Styles for centering content of unknown width and height both horizontally and vertically
+ *
+ * Example markup:
+ * <div class="centered-ghost">
+ *     <div class="centered-content">
+ *         <p>I'm centered.</p>
+ *     </div>
+ * </div>
+ */
+
+.centered-content {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.centered-ghost {
+  height: 100%;
+  text-align: center;
+  letter-spacing: -0.417em; // Remove gap between content and ghost
+}
+
+.centered-ghost > * {
+  letter-spacing: normal;
+}
+
+.centered-ghost:after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+// Responsive iFrames
+
+.iframe-container {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 75%;
+  width: 100%;
+
+  & > iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+// Collapsible Control
+#collapsible-control-ghost {
+  display: none;
+}
+
+.collapsible + .collapsible-control {
+  position: relative;
+  z-index: 1;
+
+  button {
+    .rounded-corners(50%);
+
+    float: right;
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    margin-top: -1em;
+    margin-right: .25em;
+
+    background: @gray-lighter;
+    color: @gray;
+    border: none;
+    -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
+    -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
+    box-shadow: 0 0 1/3em rgba(0,0,0,.3);
+
+    &:hover {
+      background: @gray-light;
+    }
+  }
+
+  button i:before {
+    margin-right: 0;
+  }
+}
+
+details.collapsible > summary {
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.collapsible[data-can-collapse]:not(.collapsed) + .collapsible-control button,
+.collapsible[data-can-collapse]:not(.collapsed) > .collapsible-control,
+details.collapsible[open] + .collapsible-control button,
+details.collapsible[open] > .collapsible-control {
+  i.expand-icon {
+    display: none;
+  }
+
+  i.collapse-icon {
+    display: inline;
+  }
+}
+
+.collapsible.collapsed + .collapsible-control button,
+.collapsible.collapsed > .collapsible-control,
+details.collapsible:not([open]) + .collapsible-control button,
+details.collapsible:not([open]) > .collapsible-control {
+  i.expand-icon {
+    display: inline;
+  }
+
+  i.collapse-icon {
+    display: none;
+  }
+}
+
+// Collapsibles
+
+.collapsible.collapsed:not(details) {
+  overflow: hidden;
+}
+
+.collapsible.collapsed:not([data-toggle-element], details) {
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    height: 2em;
+    background: linear-gradient(@body-bg-color-transparent, @body-bg-color);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+
+    opacity: 1;
+    transition: opacity 2s 1s linear;
+  }
+}
+
+.role-memberships {
+  letter-spacing: -0.417em;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    display: inline-block;
+    letter-spacing: normal;
+    margin: 0;
+    padding: 0 0.25em 0 0;
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+.module-dependencies {
+  .unmet-dependencies {
+    background-color: @color-warning;
+    color: @text-color-on-icinga-blue;
+    padding: .25em .5em;
+    margin-left: -.5em;
+  }
+
+  .name-value-table {
+    > caption {
+      font-weight: normal;
+      color: @text-color-light;
+    }
+
+    > tbody > tr > th {
+      font-weight: bold;
+      color: @text-color;
+    }
+
+    .missing {
+      color: @color-critical;
+      font-weight: bold;
+    }
+
+    td {
+      white-space: nowrap;
+
+      &.or-separator {
+        width: 100%;
+        transform: translate(0, 50%);
+        padding-left: 3em;
+
+        &::before {
+          content: "";
+          position: absolute;
+          height: 1.5em;
+          width: 1.5em;
+          left: 0.5em;
+          border-top: 3px solid @gray;
+          border-right: 3px solid @gray;
+          border-top-right-radius: .50em;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}