From 751da3c76204b3be9a3c71100db7949f15324855 Mon Sep 17 00:00:00 2001 From: Tomas Barton Date: Sat, 30 Sep 2017 11:51:36 +0200 Subject: [PATCH 1/2] Add solarized dark theme Signed-off-by: Eric Lippmann --- public/css/themes/solarized-dark.less | 177 ++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 public/css/themes/solarized-dark.less diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less new file mode 100644 index 000000000..967dd60e4 --- /dev/null +++ b/public/css/themes/solarized-dark.less @@ -0,0 +1,177 @@ +/*! 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: @base02; +@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: @base2; + +@link-color: @base0; + +@gray: @base02; +@gray-light: @base1; +@gray-lighter: #00222b; +@gray-lightest: @base2; + +@tr-active-color: @base01; +@tr-hover-color: @base02; + +.tabs > li > a { + color: @base00; +} + +.action-link { + color: @link-color; +} + +input, select { + background-color: @body-bg-color; +} + +#login .control-label { + color: @base0; +} + +#login-footer { + color: @base01; +} + +#login input[type=submit] { + color: @base0; +} + +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; +} + +#menu .active > a { + text-decoration: underline; + background-color: #657b83; +} + +.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%); + } + } +} From 0a188740d37ed803e0fb077249d8357619a51a8f Mon Sep 17 00:00:00 2001 From: Markus Frosch Date: Mon, 9 Oct 2017 13:55:26 +0200 Subject: [PATCH 2/2] Solazired theme: Improve colors and module styles Signed-off-by: Eric Lippmann --- public/css/themes/solarized-dark.less | 102 +++++++++++++++++++++----- 1 file changed, 82 insertions(+), 20 deletions(-) diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less index 967dd60e4..dad47c6de 100644 --- a/public/css/themes/solarized-dark.less +++ b/public/css/themes/solarized-dark.less @@ -10,7 +10,7 @@ @base1: #93a1a1; @base2: #eee8d5; -@icinga-blue: @base02; +@icinga-blue: @base1; @body-bg-color: @base03; @color-ok: #859900; @@ -27,18 +27,22 @@ @text-color: @base2; @text-color-light: @base1; @text-color-on-icinga-blue: @base2; -@text-color-inverted: @base2; +@text-color-inverted: @base02; @link-color: @base0; -@gray: @base02; -@gray-light: @base1; +@gray: @base1; +@gray-light: @base01; @gray-lighter: #00222b; -@gray-lightest: @base2; +@gray-lightest: @base02; @tr-active-color: @base01; @tr-hover-color: @base02; +#header { + background-color: @base02; +} + .tabs > li > a { color: @base00; } @@ -51,18 +55,23 @@ input, select { background-color: @body-bg-color; } -#login .control-label { - color: @base0; +#login { + background: @base02; + + .control-label { + color: @base0; + } + + input[type=submit] { + color: @base0; + background-color: @base02; + } } #login-footer { color: @base01; } -#login input[type=submit] { - color: @base0; -} - textarea { background-color: @base01; } @@ -101,19 +110,25 @@ textarea { } } -#menu a:hover { - color: @body-bg-color; - background-color: @base1; -} +#menu { + a:hover { + color: @body-bg-color; + background-color: @base1; + } -#menu .active > a { - text-decoration: underline; - background-color: #657b83; + 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; + color: @text-color; + text-decoration: underline; } .icinga-module.module-monitoring { @@ -175,3 +190,50 @@ textarea { } } } + +.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; + } +}