Merge pull request #2984 from deric/solarized

Solarized dark theme

public/css/themes/solarized-dark.less

@@ -0,0 +1,239 @@
+/*! Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */
+
+/* solarized colors: http://simianuprising.com/wp-content/uploads/2012/08/solarized-reference-horizontal.png */
+
+@base01: #586e75;
+@base00: #657b83;
+@base02: #073645;
+@base03: #002b36;
+@base0: #839496;
+@base1: #93a1a1;
+@base2: #eee8d5;
+
+@icinga-blue: @base1;
+@body-bg-color: @base03;
+
+@color-ok: #859900;
+@color-critical: #dc322f;
+@color-critical-handled: #a82523;
+@color-warning: #cf9b00;
+@color-warning-handled: #b58900;
+@color-unknown: #6c71c4;
+@color-unknown-handled: #444f83;
+@color-unreachable: #2aa198;
+@color-unreachable-handled: #1d736c;
+@color-pending: #268bd2;
+
+@text-color: @base2;
+@text-color-light: @base1;
+@text-color-on-icinga-blue: @base2;
+@text-color-inverted: @base02;
+
+@link-color: @base0;
+
+@gray: @base1;
+@gray-light: @base01;
+@gray-lighter: #00222b;
+@gray-lightest: @base02;
+
+@tr-active-color: @base01;
+@tr-hover-color: @base02;
+
+#header {
+  background-color: @base02;
+}
+
+.tabs > li > a {
+  color: @base00;
+}
+
+.action-link {
+  color: @link-color;
+}
+
+input, select {
+  background-color: @body-bg-color;
+}
+
+#login {
+  background: @base02;
+
+  .control-label {
+    color: @base0;
+  }
+
+  input[type=submit] {
+    color: @base0;
+    background-color: @base02;
+  }
+}
+
+#login-footer {
+  color: @base01;
+}
+
+textarea {
+  background-color: @base01;
+}
+
+.control-button, input[type="submit"] {
+  color: @base0;
+}
+
+.badge.handled {
+  background-color: @body-bg-color !important;
+  color: @text-color;
+
+  &.state-warning {
+    border: 1px solid @color-warning-handled;
+    margin-top: -1px;
+  }
+
+  &.state-critical {
+    border: 1px solid @color-critical-handled;
+    margin-top: -1px;
+  }
+
+  &.state-down {
+    border: 1px solid @color-critical-handled;
+    margin-top: -1px;
+  }
+
+  &.state-unreachable {
+    border: 1px solid @color-unreachable-handled;
+    margin-top: -1px;
+  }
+
+  &.state-unknown {
+    border: 1px solid @color-unknown-handled;
+    margin-top: -1px;
+  }
+}
+
+#menu {
+  a:hover {
+    color: @body-bg-color;
+    background-color: @base1;
+  }
+
+  input.search {
+    background-image: url(../img/icons/search_icinga_blue.png);
+  }
+
+  .active > a {
+    color: @text-color-on-icinga-blue;
+    background-color: @base01;
+  }
+}
+
+.boxview a:focus {
+  color: @text-color;
+  text-decoration: underline;
+}
+
+.icinga-module.module-monitoring {
+  @timeline-notification-color: #1650CF;
+  @timeline-hard-state-color: #A24600;
+  @timeline-comment-color: #346964;
+  @timeline-ack-color: #855D18;
+  @timeline-downtime-start-color: #515151;
+  @timeline-downtime-end-color: #5e5e2f;
+
+  // Unfortunately it does not suffice to only override the timeline colors here, because our less compiler seems to
+  // have the related style block in module.less already evaluated
+
+  .timeline-notification {
+    background-color: @timeline-notification-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-notification-color, 20%);
+    }
+  }
+
+  .timeline-hard-state {
+    background-color: @timeline-hard-state-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-hard-state-color, 20%);
+    }
+  }
+
+  .timeline-comment {
+    background-color: @timeline-comment-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-comment-color, 20%);
+    }
+  }
+
+  .timeline-ack {
+    background-color: @timeline-ack-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-ack-color, 20%);
+    }
+  }
+
+  .timeline-downtime-start {
+    background-color: @timeline-downtime-start-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-downtime-start-color, 20%);
+    }
+  }
+
+  .timeline-downtime-end {
+    background-color: @timeline-downtime-end-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-downtime-end-color, 20%);
+    }
+  }
+}
+
+.icinga-module.module-monitoring {
+  .tactical {
+    .box {
+      border-color: @body-bg-color !important;
+    }
+
+    div.box.contents {
+      background: @body-bg-color;
+    }
+  }
+}
+
+.icinga-module.module-director {
+  form {
+    input[type=text], input[type=password], textarea, select, .director-suggestions li {
+      background-color: @body-bg-color;
+      border-bottom: 1px solid @gray-light;
+    }
+
+    .director-suggestions li:hover {
+      background-color: @icinga-blue;
+    }
+
+    ul.extensible-set input[type=text] {
+      background-color: @icinga-blue;
+      color: @base2;
+    }
+
+    p.description {
+      background-color: @base02;
+    }
+
+    option {
+      background-color: @body-bg-color;
+    }
+  }
+
+  dd.active ul.extensible-set input[type=text], ul.extensible-set.sortable input[type=text] {
+    background: @body-bg-color;
+    border: 1px solid @gray-light;
+  }
+
+  ul.main-actions li a {
+    color: @icinga-blue;
+  }
+}