1 files changed, 344 insertions, 0 deletions
diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
new file mode 100644
index 0000000..9ce5d7e
--- /dev/null
+++ b/public/css/icinga/base.less
@@ -0,0 +1,344 @@
+/*! Icinga Web 2 | (c) 2013 Icinga Development Team | GPLv2+ */
+
+// Black colors
+@black: #535353;
+@white: #fff;
+
+// Gray colors
+@gray: #c4c4c4;
+@gray-semilight: #888;
+@gray-light: #5c5c5c;
+@gray-lighter: #4b4b4b;
+@gray-lightest: #3a3a3a;
+
+@disabled-gray: #9a9a9a;
+
+// State colors
+@color-ok: #44bb77;
+@color-up: @color-ok;
+@color-warning: #ffaa44;
+@color-warning-handled: #ffcc66;
+@color-critical: #ff5566;
+@color-critical-handled: #ff99aa;
+@color-critical-accentuated: darken(@color-critical, 10%);
+@color-down: @color-critical;
+@color-down-handled: @color-critical-handled;
+@color-unknown: #aa44ff;
+@color-unknown-handled: #cc77ff;
+@color-unreachable: @color-unknown;
+@color-unreachable-handled: @color-unknown-handled;
+@color-pending: #77aaff;
+
+// Icinga colors
+@icinga-blue: #00C3ED;
+@icinga-secondary: #EF4F98;
+@icinga-secondary-dark: darken(@icinga-secondary, 10%);
+@low-sat-blue: #404d72;
+@low-sat-blue-dark: #434374;
+@icinga-blue-light: fade(@icinga-blue, 50%);
+@icinga-blue-dark: #0081a6;
+
+// Notification colors
+@color-notification-error: @color-critical;
+@color-notification-info: @color-pending;
+@color-notification-success: @color-ok;
+@color-notification-warning: @color-warning;
+
+// Background color for <body>
+@body-bg-color: #282E39;
+@body-bg-color-transparent: fade(@body-bg-color, 0);
+
+// Text colors
+@text-color: @white;
+@text-color-inverted: @body-bg-color;
+@text-color-light: fade(@text-color, 75%);
+@text-color-on-icinga-blue: @body-bg-color;
+@light-text-bg-color: fade(@gray, 5%);
+
+// Text color on <a>
+@link-color: @text-color;
+
+@tr-active-color: fade(@icinga-blue, 25);
+@tr-hover-color: fade(@icinga-blue, 5);
+
+// Menu colors
+@menu-bg-color: #06062B;
+@menu-hover-bg-color: lighten(@menu-bg-color, 5%);
+@menu-search-hover-bg-color: @menu-hover-bg-color;
+@menu-active-bg-color: #181742;
+@menu-active-hover-bg-color: lighten(@menu-active-bg-color, 5%);
+@menu-color: #DBDBDB;
+@menu-active-color: @text-color;
+@menu-highlight-color: @icinga-blue;
+@menu-highlight-hover-bg-color: @icinga-blue-dark;
+@menu-2ndlvl-color: #c4c4c4;
+@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
+@menu-2ndlvl-active-bg-color: @menu-highlight-color;
+@menu-2ndlvl-active-color: @text-color-inverted;
+@menu-2ndlvl-active-hover-bg-color: darken(@menu-2ndlvl-active-bg-color, 5%);
+@menu-2ndlvl-active-hover-color: @menu-2ndlvl-active-color;
+@menu-flyout-bg-color: @body-bg-color;
+@menu-flyout-color: @text-color;
+@tab-hover-bg-color: fade(@body-bg-color, 50%);
+
+// Form colors
+@form-info-bg-color: fade(@color-ok, 20%);
+@form-error-bg-color: fade(@color-critical, 30%);
+@form-warning-bg-color: fade(@color-warning, 40%);
+@login-box-background: fade(#0B0B2F, 30%);
+
+// Other colors
+@color-granted: #59cd59;
+@color-refused: #ee7373;
+@color-restricted: #dede7d;
+
+// Font families
+@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+@font-family-fixed: "Liberation Mono", "Lucida Console", Courier, monospace;
+@font-family-wide: Tahoma, Verdana, sans-serif;
+
+// Font sizes
+@font-size: 0.750em; // 12px
+@font-size-small: 11/12em; // 11px
+@font-size-dashboard: 3.5em; // 56px
+@font-size-dashboard-small: 1.1em; // 17px
+@font-weight-bold: 600;
+
+// Set line-height w/o unit so that the line-height is dynamically calculated as font-size * line-height
+@line-height: 1.5;
+
+@table-column-padding: 0.333em; // 4px
+
+@vertical-padding: 0.5em; // 6px
+@horizontal-padding: 1em; // 12px
+
+@light-mode: {
+  @light-body-bg-color: #F5F9FA;
+
+  @iplWebLightRules();
+
+  :root {
+    --body-bg-color: @light-body-bg-color;
+    --body-bg-color-transparent: fade(@light-body-bg-color, 0);
+    --badge-color: #F5F9FA;
+    --text-color-inverted: #F5F9FA;
+    --text-color-on-icinga-blue: #F5F9FA;
+    --menu-flyout-bg-color: #F5F9FA;
+    --tab-hover-bg-color: fade(#F5F9FA, 50%);
+
+    --menu-color: #535353;
+    --menu-bg-color: #DEECF1;
+    --menu-hover-bg-color: darken(#DEECF1, 10%);
+    --menu-search-hover-bg-color: darken(#DEECF1, 10%);
+    --menu-active-bg-color: #EDF7FC;
+    --menu-active-hover-bg-color: darken(#EDF7FC, 20%);
+    --menu-highlight-hover-bg-color: darken(#EDF7FC, 20%);
+    --menu-2ndlvl-color: #676767;
+
+    --text-color: #535353;
+    --text-color-light: fade(#535353, 75%);
+    --light-text-bg-color: fade(#7F7F7F, 5%);
+    --link-color: #535353;
+    --menu-active-color: #535353;
+    --menu-flyout-color: #535353;
+
+    --low-sat-blue: #DEECF1;
+    --low-sat-blue-dark: #c0cccd;
+
+    --gray: #819398;
+    --gray-semilight: #94a5a6;
+    --gray-light: #d0d3da;
+    --gray-lighter: #e8ecef;
+    --gray-lightest: #F7F7F7;
+
+    // ipl-web overrides
+    --base-gray: var(--gray);
+    --base-gray-light: var(--gray-light);
+    --base-gray-lighter: var(--gray-lighter);
+
+    --default-text-color: var(--text-color);
+    --default-text-color-light: var(--text-color-light);
+    --default-text-color-inverted: var(--text-color-inverted);
+
+    --searchbar-bg: var(--low-sat-blue);
+
+    --search-logical-operator-bg: fade(#819398, 50%); // --gray
+  }
+};
+
+// ipl-web overrides
+@default-bg: @body-bg-color;
+
+@base-gray: @gray;
+@base-gray-light: @gray-light;
+@base-gray-lighter: @gray-lighter;
+@base-disabled: @disabled-gray;
+
+@base-primary-color: @icinga-blue;
+@base-primary-bg: @icinga-blue;
+
+@default-text-color: @text-color;
+@default-text-color-light: @text-color-light;
+
+@state-ok: @color-ok;
+@state-warning: @color-warning;
+@state-critical: @color-critical;
+@state-pending: @color-pending;
+@state-unknown: @color-unknown;
+
+@primary-button-hover-bg: @icinga-blue-dark;
+
+@searchbar-bg: @low-sat-blue;
+
+// Make padding not affect the final computed width of an element
+html {
+  box-sizing: border-box;
+}
+details > * {
+  // children somehow default to content-box no matter the inheritance
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+     -moz-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+a {
+  // Reset defaults
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+:focus {
+  outline: 3px solid fade(@icinga-blue, 50%);
+  outline-offset: 1px;
+}
+
+// Default margin for block text
+blockquote, p, pre {
+  margin: 0 0 1em 0;
+}
+
+blockquote {
+  border-left: 5px solid @gray-lighter;
+  padding: 0.667em 0.333em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: @font-weight-bold;
+  margin: 0.556em 0 0.333em;
+}
+
+h1 {
+  border-bottom: 1px solid @gray-lighter;
+  font-size: 1.333em;
+}
+
+h2 {
+  font-size: 1.333em;
+}
+
+h3 {
+  font-size: 1.167em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: @font-size-small;
+}
+
+h6 {
+  font-size: @font-size-small;
+  font-weight: normal;
+}
+
+pre {
+  .rounded-corners(.25em);
+  background-color: @gray-lighter;
+  font-family: @font-family-fixed;
+  font-size: @font-size-small;
+  padding: @vertical-padding @horizontal-padding;
+  white-space: pre-wrap;
+}
+
+td, th {
+  padding: @table-column-padding;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  // Smooth icons; ifont claims to have it, but it does not work in :before
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &:before {
+    margin-left: 0;
+  }
+}
+
+// Styles for when the page is loading. JS will remove this class once the document is ready
+.loading * {
+  // Disable all transition on page load
+  -webkit-transition: none !important;
+     -moz-transition: none !important;
+       -o-transition: none !important;
+          transition: none !important;
+}
+
+.container {
+  &:before,
+  > .content:before {
+    content: "";
+    display: block;
+
+    background: url(../img/icinga-loader.gif) no-repeat center center;
+    background-color: @body-bg-color;
+    background-size: 4em 4em;
+
+    opacity: 0;
+    z-index: -1;
+    pointer-events: none;
+    .transition(none);
+  }
+
+  &.impact,
+  > .content.impact {
+    overflow: hidden;
+    position: relative;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      opacity: .7;
+      z-index: 1000;
+      pointer-events: all;
+      .transition(opacity 1s 2s linear);
+    }
+  }
+
+  &.impact:before {
+    top: 2.5em;
+  }
+}
+
+@light-mode: {
+  .container {
+    &:before,
+    > .content:before {
+      background-image: url(../img/icinga-loader-light.gif)
+    }
+  }
+};