From 455db3514e13f4b25f0235ed9376c3ea734e196f Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 7 Oct 2021 11:19:58 +0200
Subject: [PATCH 1/9] css: Remove obsolete `.tiles > .addnew` rule

---
 public/css/module.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/css/module.less b/public/css/module.less
index 6528487..9ac6f50 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -532,7 +532,6 @@ td > a > .badges {
     > .up                  { background-color: @colorOk;                > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
     > .pending             { background-color: @colorPending;           > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
     > .missing             { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray }}
-    > .addnew              { background-color: @icinga-blue;            > a { text-shadow: 0 0 1px mix(#000, @icinga-blue, 40%); }}
     > .empty               { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray }}
 }
 

From 84c8ab9cd866501af8108c8bbcda5e34977876cc Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 7 Oct 2021 11:19:24 +0200
Subject: [PATCH 2/9] css: Adjust variable usages for compatiblity with v2.10

---
 public/css/module.less     | 268 +++++++++++++++++++++++++++----------
 public/css/state-ball.less |   2 +-
 2 files changed, 197 insertions(+), 73 deletions(-)

diff --git a/public/css/module.less b/public/css/module.less
index 9ac6f50..a5eda4b 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -1,3 +1,9 @@
+@color-diff-ins: @color-ok;
+@color-diff-del: @color-critical;
+@color-diff-changed-old: fade(@color-critical, 30%);
+@color-diff-changed-new: fade(@color-ok, 30%);
+@color-change-replace-del: #e99;
+
 a:focus {
     outline: none;
     text-decoration: underline;
@@ -22,7 +28,7 @@ a:focus {
         }
 
         &.button-link {
-            color: white;
+            color: @text-color-on-icinga-blue;
             background: @icinga-blue;
 
             &:active, &:focus {
@@ -55,7 +61,7 @@ a:focus {
                 }
 
                 &.active {
-                    color: white;
+                    color: @text-color-on-icinga-blue;
                     background-color: @icinga-blue;
                 }
 
@@ -89,9 +95,9 @@ div.bp.sortable > .sortable-ghost {
 }
 
 .simulation div.bp {
-    border-right: 1em solid @colorCriticalHandled;
+    border-right: 1em solid @color-critical-handled;
     padding-right: 1em;
-    background: white;
+    background: @white;
 }
 
 
@@ -170,7 +176,7 @@ ul.bp {
                 background-color: @gray-light;
                 font-weight: bold;
                 font-size: 1em;
-                color: white;
+                color: @text-color-light;
             }
         }
     }
@@ -201,6 +207,10 @@ ul.bp {
                 padding-top: 0;
             }
         }
+
+        > i.icon-service {
+            opacity: .75;
+        }
     }
 
     // horizontal layout
@@ -266,7 +276,7 @@ ul.bp {
 
     li.process > div > .state-ball,
     li:not(.process) > .state-ball {
-        border: .15em solid white;
+        border: .15em solid @body-bg-color;
 
         &.size-s {
             width: 7em/6em;
@@ -301,17 +311,21 @@ ul.bp {
         padding: 1em;
 
         &:hover {
-            background-color: @gray-lighter;
+            background-color: @tr-hover-color;
         }
 
         .bp-link {
             > a {
                 text-decoration: none;
-                color: inherit;
+                color: @gray;
                 vertical-align: middle;
                 word-wrap: break-word;
                 width: 100%;
                 overflow: hidden;
+
+                > span.header {
+                    color: @text-color;
+                }
             }
         }
 
@@ -324,7 +338,7 @@ ul.bp {
             }
 
             &:hover {
-                box-shadow: 0px 0px 5px #666;
+                box-shadow: 0px 0px 5px @gray-light;
             }
         }
     }
@@ -339,7 +353,7 @@ ul.bp {
     .action {
         > a {
             text-decoration: none;
-            color: inherit;
+            color: @gray;
             vertical-align: middle;
             display: block;
             padding: 1em;
@@ -349,8 +363,11 @@ ul.bp {
             box-sizing: border-box;
 
             &.addnew:hover {
-                background-color: @icinga-blue;
-                color: white;
+                background-color: @tr-hover-color;
+            }
+
+            > span.header {
+                color: @text-color;
             }
         }
     }
@@ -365,7 +382,7 @@ ul.bp {
     padding: 0.3em 0.4em;
 
     .badge {
-        border: 1px solid white;
+        border: 1px solid @white;
         margin: 0;
     }
 }
@@ -381,11 +398,11 @@ td > a > .badges {
     background-color: transparent;
 }
 
-.badge-critical, .badge-down { background: @colorCritical; }
-.badge-unknown, .badge-unreachable { background: @colorUnknown; }
-.badge-warning { background: @colorWarning; }
-.badge-pending { background: @colorPending; }
-.badge-missing { background: #ccc; }
+.badge-critical, .badge-down { background: @color-critical; }
+.badge-unknown, .badge-unreachable { background: @color-unknown; }
+.badge-warning { background: @color-warning }
+.badge-pending { background: @color-pending }
+.badge-missing { background: @gray; }
 /** END Badges **/
 
 /** BEGIN Tiles **/
@@ -397,11 +414,11 @@ td > a > .badges {
 
 .tiles.sortable > .sortable-ghost {
     opacity: 0.5;
-    border: .2em dashed black;
+    border: .2em dashed @black;
 }
 
 .tiles > div {
-    color: white;
+    color: @body-bg-color;
     width: 12em;
     display: inline-block;
     float: left;
@@ -427,7 +444,7 @@ td > a > .badges {
         left: 0;
         bottom: 0;
         margin: .5em;
-        border: 1px solid white;
+        border: 1px solid @white;
     }
 
     > a {
@@ -438,7 +455,6 @@ td > a > .badges {
         padding: 1em 1em 0;
         font-weight: bold;
         word-wrap: break-word;
-        color: @text-color-inverted;
 
         & + p.children-count {
             margin: 0;
@@ -453,7 +469,7 @@ td > a > .badges {
     }
 
     &:hover {
-        box-shadow: 0px 0px 5px #666;
+        box-shadow: 0px 0px 5px @gray;
     }
 
     .actions {
@@ -518,38 +534,38 @@ td > a > .badges {
 }
 
 .tiles {
-    > .critical            { background-color: @colorCritical;          > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
-    > .critical.handled    { background-color: @colorCriticalHandled;   > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
-    > .down                { background-color: @colorCritical;          > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
-    > .down.handled        { background-color: @colorCriticalHandled;   > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
-    > .unknown             { background-color: @colorUnknown;           > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
-    > .unknown.handled     { background-color: @colorUnknownHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
-    > .unreachable         { background-color: @colorUnknown;           > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
-    > .unreachable.handled { background-color: @colorUnknownHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
-    > .warning             { background-color: @colorWarning;           > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }}
-    > .warning.handled     { background-color: @colorWarningHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }}
-    > .ok                  { background-color: @colorOk;                > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
-    > .up                  { background-color: @colorOk;                > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
-    > .pending             { background-color: @colorPending;           > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
-    > .missing             { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray }}
-    > .empty               { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray }}
+    > .critical            { background-color: @color-critical;         > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }}
+    > .critical.handled    { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }}
+    > .down                { background-color: @color-critical;         > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }}
+    > .down.handled        { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }}
+    > .unknown             { background-color: @color-unknown;          > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }}
+    > .unknown.handled     { background-color: @color-unknown-handled;  > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }}
+    > .unreachable         { background-color: @color-unknown;          > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }}
+    > .unreachable.handled { background-color: @color-unknown-handled;  > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }}
+    > .warning             { background-color: @color-warning;          > a { text-shadow: 0 0 1px mix(#000, @color-warning, 40%); }}
+    > .warning.handled     { background-color: @color-warning-handled;  > a { text-shadow: 0 0 1px mix(#000, @color-warning-handled, 40%); }}
+    > .ok                  { background-color: @color-ok;               > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
+    > .up                  { background-color: @color-ok;               > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
+    > .pending             { background-color: @color-pending;          > a { text-shadow: 0 0 1px mix(#000, @color-pending, 40%); }}
+    > .missing             { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray; }}
+    > .empty               { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray; } }
 }
 
 /*
 .tiles > div:hover {
-    > .critical            { background: white; color: @text-color; }
-    > .critical.handled    { background: @colorCriticalHandled; }
-    > .down                { background: @colorCritical; }
-    > .down.handled        { background: @colorCriticalHandled; }
-    > .unknown             { background: @colorUnknown; }
-    > .unknown.handled     { background: @colorUnknownHandled; }
-    > .unreachable         { background: @colorUnknown; }
-    > .unreachable.handled { background: @colorUnknownHandled; }
-    > .warning             { background: @colorWarning; }
-    > .warning.handled     { background: @colorWarningHandled; }
-    > .ok                  { background: @colorOk; }
-    > .pending             { background: @colorPending; }
-    > .missing             { background: #ccc; }
+    > .critical            { background: @white; color: @text-color; }
+    > .critical.handled    { background: @color-critical-handled; }
+    > .down                { background: @color-critical; }
+    > .down.handled        { background: @color-critical-handled; }
+    > .unknown             { background: @color-unknown; }
+    > .unknown.handled     { background: @color-unknown-handled; }
+    > .unreachable         { background: @color-unknown; }
+    > .unreachable.handled { background: @color-unknown-handled; }
+    > .warning             { background: @color-warning; }
+    > .warning.handled     { background: @color-warning-handled; }
+    > .ok                  { background: @color-ok; }
+    > .pending             { background: @color-pending; }
+    > .missing             { background: @gray; }
 }
 */
 /*
@@ -623,7 +639,7 @@ td > a > .badges {
 
     > .state-ball {
         margin-right: .5em;
-        border: .15em solid white;
+        border: .15em solid @body-bg-color;
 
         &.size-s {
             width: 7em/6em;
@@ -641,12 +657,13 @@ td > a > .badges {
 
     &:last-of-type {
         border-radius: .25em;
-        border: 1px solid @icinga-blue;
+        border: 1px solid transparent;
         background: @icinga-blue;
+        color: @text-color-on-icinga-blue;
         padding-right: 1.2em;
 
         a {
-            color: white;
+            color: @text-color-light;
         }
     }
 }
@@ -678,17 +695,17 @@ td > a > .badges {
 &.impact {
     .breadcrumb li:not(:last-of-type) a:after {
         .transition(border-left-color 2s 0.66s linear ~'!important');
-        border-left-color: @gray-lighter !important;
+        border-left-color: @gray-lighter;
     }
 
     .breadcrumb li:not(:last-of-type) a:before {
         .transition(border-left-color 2s 1s linear ~'!important');
-        border-left-color: @gray-light !important;
+        border-left-color: @gray-light;
     }
 
     .breadcrumb li:not(:last-of-type) {
         .transition(border-color 2s 1s linear ~'!important');
-        border-color: @gray-light !important;
+        border-color: @gray-light;
     }
     .breadcrumb li:not(:last-of-type) a:hover {
         background-color: transparent !important;
@@ -705,7 +722,7 @@ td > a > .badges {
     padding-right: 0.5em;
 }
 
-.breadcrumb li:not(:last-child) a:hover { background: @icinga-blue; color: white; }
+.breadcrumb li:not(:last-child) a:hover { background: @icinga-blue; color: @text-color-on-icinga-blue; }
 .breadcrumb li:not(:last-child) a:hover:after { border-left-color: @icinga-blue; }
 .breadcrumb li:last-child:hover, .breadcrumb li:last-child a:hover { background: @icinga-blue; border-color: @icinga-blue; }
 
@@ -725,11 +742,11 @@ td > a > .badges {
 ul.error, ul.warning {
     padding: 0;
     list-style-type: none;
-    background-color: @colorCritical;
+    background-color: @color-critical;
 
     li {
         font-weight: bold;
-        color: white;
+        color: @text-color;
         padding: 0.3em 0.8em;
     }
 
@@ -745,7 +762,7 @@ ul.error, ul.warning {
 
 
 ul.warning {
-    background-color: @colorWarning;
+    background-color: @color-warning;
 }
 
 table.sourcecode {
@@ -794,7 +811,7 @@ form input[type=submit] {
     &:disabled {
         border-color: @gray-light;
         background-color: @gray-light;
-        color: #fff;
+        color: @text-color;
     }
 }
 
@@ -835,7 +852,7 @@ form ul.form-errors {
         background: @color-critical;
         font-weight: bold;
         padding: 0.5em 1em;
-        color: white;
+        color: @text-color;
     }
 }
 
@@ -844,7 +861,7 @@ select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */
 }
 
 select {
-    border: 1px solid #ddd;
+    border: 1px solid @gray;
     cursor: pointer;
     background: none;
 }
@@ -860,6 +877,7 @@ input[type=text], input[type=password], textarea, select {
     border-color: transparent;
     border-bottom-color: @gray-lighter;
     border-width: 1px 1px 1px 3px;
+    background-color: @low-sat-blue;
 
     &.search {
         background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em;
@@ -893,7 +911,7 @@ select::-moz-focus-inner { border: 0; }
 
 select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 #000;
+    text-shadow: 0 0 0 @black;
 }
 
 select, input[type=text], textarea {
@@ -910,20 +928,18 @@ select, input[type=text], textarea {
 }
 
 select[value=""] {
-    color: blue;
-    border: 1px solid #666;
+    color: @icinga-blue;
+    border: 1px solid @gray-light;
     background-color: @body-bg-color;
 }
 
 select option {
     color: inherit;
     padding-left: 0.5em;
-    background-color: @body-bg-color;
 }
 
 select option[value=""] {
-    color: #aaa;
-    background-color: @body-bg-color;
+    color: @disabled-gray;
 }
 
 form dt label {
@@ -1046,7 +1062,7 @@ form dd ul.errors {
     padding-left: 0.3em;
 
     li {
-        color: @colorCritical;
+        color: @color-critical;
         padding: 0.3em;
     }
 }
@@ -1060,7 +1076,7 @@ form div.hint {
 
     pre {
         font-style: normal;
-        background-color: white;
+        background-color: @white;
         margin: 0;
         padding: 1em;
     }
@@ -1076,6 +1092,114 @@ form {
 
 /** END of forms **/
 
+/** php-diff **/
+.diff-wrapper.diff {
+    background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em);
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid black;
+    color: black;
+    empty-cells: show;
+    font-family: monospace;
+    font-size: 13px;
+    width: 100%;
+    word-break: break-all;
+}
+.diff-wrapper.diff th {
+    font-weight: 700;
+}
+.diff-wrapper.diff td {
+    vertical-align: baseline;
+}
+.diff-wrapper.diff td,
+.diff-wrapper.diff th {
+    border-collapse: separate;
+    border: none;
+    padding: 1px 2px;
+    background: @low-sat-blue;
+}
+.diff-wrapper.diff td:empty:after,
+.diff-wrapper.diff th:empty:after {
+    content: " ";
+    visibility: hidden;
+}
+.diff-wrapper.diff td a,
+.diff-wrapper.diff th a {
+    color: @black;
+    cursor: inherit;
+    pointer-events: none;
+}
+.diff-wrapper.diff thead th {
+    background: @gray-lighter;
+    border-bottom: 1px solid @black;
+    padding: 4px;
+    text-align: left;
+}
+.diff-wrapper.diff tbody.skipped {
+    border-top: 1px solid black;
+}
+.diff-wrapper.diff tbody.skipped td,
+.diff-wrapper.diff tbody.skipped th {
+    display: none;
+}
+.diff-wrapper.diff tbody th {
+    background: @gray-lighter;
+    border-right: 1px solid @black;
+    text-align: right;
+    vertical-align: top;
+    width: 4em;
+}
+.diff-wrapper.diff tbody th.sign {
+    background: @text-color;
+    border-right: none;
+    padding: 1px 0;
+    text-align: center;
+    width: 1em;
+}
+.diff-wrapper.diff tbody th.sign.del {
+    background: @color-diff-del;
+}
+.diff-wrapper.diff tbody th.sign.ins {
+    background: @color-diff-ins;
+}
+.diff-wrapper.diff.diff-html {
+    white-space: pre-wrap;
+}
+.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
+    white-space: normal;
+}
+.diff-wrapper.diff.diff-html .change.change-eq .old,
+.diff-wrapper.diff.diff-html .change.change-eq .new {
+    background: @gray-lighter;
+}
+.diff-wrapper.diff.diff-html .change .old {
+    background: @color-diff-changed-old;
+}
+.diff-wrapper.diff.diff-html .change .new {
+    background: @color-diff-changed-new;
+}
+.diff-wrapper.diff.diff-html .change .rep {
+    background: @color-change-replace-del;
+}
+.diff-wrapper.diff.diff-html .change .old.none,
+.diff-wrapper.diff.diff-html .change .new.none,
+.diff-wrapper.diff.diff-html .change .rep.none {
+    background: transparent;
+    cursor: not-allowed;
+}
+.diff-wrapper.diff.diff-html .change ins,
+.diff-wrapper.diff.diff-html .change del {
+    font-weight: bold;
+    text-decoration: none;
+}
+.diff-wrapper.diff.diff-html .change ins {
+    background: @color-diff-ins;
+}
+.diff-wrapper.diff.diff-html .change del {
+    background: @color-diff-del;
+}
+/** END of php-diff **/
+
 /** Custom font styling **/
 textarea.smaller {
     font-size: 0.833em;
diff --git a/public/css/state-ball.less b/public/css/state-ball.less
index 9824577..d635f12 100644
--- a/public/css/state-ball.less
+++ b/public/css/state-ball.less
@@ -63,7 +63,7 @@
   }
 
   > i {
-    color: white;
+    color: @gray;
     font-style: normal;
     text-transform: uppercase;
   }

From 88e04d94c1bc147c7e566bb8dc7c7bce353d6320 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@me.com>
Date: Thu, 9 Dec 2021 16:53:13 +0100
Subject: [PATCH 3/9] module.less: Add fixed var for box-shadow

---
 public/css/module.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/css/module.less b/public/css/module.less
index a5eda4b..63f30f5 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -469,7 +469,7 @@ td > a > .badges {
     }
 
     &:hover {
-        box-shadow: 0px 0px 5px @gray;
+        box-shadow: 0px 0px .2em @black;
     }
 
     .actions {

From 86732a91f869f67e1034a9bd5ce5863021853351 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 16 Dec 2021 14:06:37 +0100
Subject: [PATCH 4/9] CSS: Remove styles for php-diff

---
 public/css/module.less | 109 -----------------------------------------
 1 file changed, 109 deletions(-)

diff --git a/public/css/module.less b/public/css/module.less
index 63f30f5..7c02c34 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -1089,117 +1089,8 @@ form {
         left: -100%;
     }
 }
-
 /** END of forms **/
 
-/** php-diff **/
-.diff-wrapper.diff {
-    background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em);
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: 1px solid black;
-    color: black;
-    empty-cells: show;
-    font-family: monospace;
-    font-size: 13px;
-    width: 100%;
-    word-break: break-all;
-}
-.diff-wrapper.diff th {
-    font-weight: 700;
-}
-.diff-wrapper.diff td {
-    vertical-align: baseline;
-}
-.diff-wrapper.diff td,
-.diff-wrapper.diff th {
-    border-collapse: separate;
-    border: none;
-    padding: 1px 2px;
-    background: @low-sat-blue;
-}
-.diff-wrapper.diff td:empty:after,
-.diff-wrapper.diff th:empty:after {
-    content: " ";
-    visibility: hidden;
-}
-.diff-wrapper.diff td a,
-.diff-wrapper.diff th a {
-    color: @black;
-    cursor: inherit;
-    pointer-events: none;
-}
-.diff-wrapper.diff thead th {
-    background: @gray-lighter;
-    border-bottom: 1px solid @black;
-    padding: 4px;
-    text-align: left;
-}
-.diff-wrapper.diff tbody.skipped {
-    border-top: 1px solid black;
-}
-.diff-wrapper.diff tbody.skipped td,
-.diff-wrapper.diff tbody.skipped th {
-    display: none;
-}
-.diff-wrapper.diff tbody th {
-    background: @gray-lighter;
-    border-right: 1px solid @black;
-    text-align: right;
-    vertical-align: top;
-    width: 4em;
-}
-.diff-wrapper.diff tbody th.sign {
-    background: @text-color;
-    border-right: none;
-    padding: 1px 0;
-    text-align: center;
-    width: 1em;
-}
-.diff-wrapper.diff tbody th.sign.del {
-    background: @color-diff-del;
-}
-.diff-wrapper.diff tbody th.sign.ins {
-    background: @color-diff-ins;
-}
-.diff-wrapper.diff.diff-html {
-    white-space: pre-wrap;
-}
-.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
-    white-space: normal;
-}
-.diff-wrapper.diff.diff-html .change.change-eq .old,
-.diff-wrapper.diff.diff-html .change.change-eq .new {
-    background: @gray-lighter;
-}
-.diff-wrapper.diff.diff-html .change .old {
-    background: @color-diff-changed-old;
-}
-.diff-wrapper.diff.diff-html .change .new {
-    background: @color-diff-changed-new;
-}
-.diff-wrapper.diff.diff-html .change .rep {
-    background: @color-change-replace-del;
-}
-.diff-wrapper.diff.diff-html .change .old.none,
-.diff-wrapper.diff.diff-html .change .new.none,
-.diff-wrapper.diff.diff-html .change .rep.none {
-    background: transparent;
-    cursor: not-allowed;
-}
-.diff-wrapper.diff.diff-html .change ins,
-.diff-wrapper.diff.diff-html .change del {
-    font-weight: bold;
-    text-decoration: none;
-}
-.diff-wrapper.diff.diff-html .change ins {
-    background: @color-diff-ins;
-}
-.diff-wrapper.diff.diff-html .change del {
-    background: @color-diff-del;
-}
-/** END of php-diff **/
-
 /** Custom font styling **/
 textarea.smaller {
     font-size: 0.833em;

From 4d7df037d35e324616256225bc4f2bc205c63c5f Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 16 Dec 2021 15:08:17 +0100
Subject: [PATCH 5/9] Drop `Component\StateBall` and use
 `ipl\Web\Widget\StateBall` instead

---
 configuration.php                             |  2 -
 .../Renderer/TileRenderer/NodeTile.php        | 23 +++---
 .../Businessprocess/Renderer/TreeRenderer.php | 39 ++++++-----
 .../Web/Component/StateBall.php               | 32 ---------
 public/css/state-ball.less                    | 70 -------------------
 5 files changed, 36 insertions(+), 130 deletions(-)
 delete mode 100644 library/Businessprocess/Web/Component/StateBall.php
 delete mode 100644 public/css/state-ball.less

diff --git a/configuration.php b/configuration.php
index cf5c86a..4615bd4 100644
--- a/configuration.php
+++ b/configuration.php
@@ -59,5 +59,3 @@ $this->provideRestriction(
 $this->provideJsFile('vendor/Sortable.js');
 $this->provideJsFile('behavior/sortable.js');
 $this->provideJsFile('vendor/jquery.fn.sortable.js');
-
-$this->provideCssFile('state-ball.less');
diff --git a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
index 62b1d9f..261b6cd 100644
--- a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
+++ b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
@@ -10,10 +10,10 @@ use Icinga\Module\Businessprocess\MonitoredNode;
 use Icinga\Module\Businessprocess\Node;
 use Icinga\Module\Businessprocess\Renderer\Renderer;
 use Icinga\Module\Businessprocess\ServiceNode;
-use Icinga\Module\Businessprocess\Web\Component\StateBall;
 use Icinga\Web\Url;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
+use ipl\Web\Widget\StateBall;
 
 class NodeTile extends BaseHtmlElement
 {
@@ -90,9 +90,9 @@ class NodeTile extends BaseHtmlElement
             if ($renderer->isBreadcrumb()) {
                 $state = strtolower($node->getStateName());
                 if ($node->isHandled()) {
-                    $state = $state . '-handled';
+                    $state = $state . ' handled';
                 }
-                $link->prepend((new StateBall($state))->addAttributes([
+                $link->prepend((new StateBall($state, StateBall::SIZE_MEDIUM))->addAttributes([
                     'title' => sprintf(
                         '%s %s',
                         $state,
@@ -116,13 +116,16 @@ class NodeTile extends BaseHtmlElement
         if ($this->renderer->rendersSubNode()
             && $this->renderer->getParentNode()->getChildState($node) !== $node->getState()
         ) {
-            $this->add((new StateBall(strtolower($node->getStateName())))->addAttributes([
-                'class' => 'overridden-state',
-                'title' => sprintf(
-                    '%s',
-                    $node->getStateName()
-                )
-            ]));
+            $this->add(
+                (new StateBall(strtolower($node->getStateName()), StateBall::SIZE_MEDIUM))
+                    ->addAttributes([
+                        'class' => 'overridden-state',
+                        'title' => sprintf(
+                            '%s',
+                            $node->getStateName()
+                        )
+                    ])
+            );
         }
 
         if ($node instanceof BpNode && !$renderer->isBreadcrumb()) {
diff --git a/library/Businessprocess/Renderer/TreeRenderer.php b/library/Businessprocess/Renderer/TreeRenderer.php
index efe8d77..0fb3c37 100644
--- a/library/Businessprocess/Renderer/TreeRenderer.php
+++ b/library/Businessprocess/Renderer/TreeRenderer.php
@@ -7,10 +7,11 @@ use Icinga\Module\Businessprocess\BpConfig;
 use Icinga\Module\Businessprocess\BpNode;
 use Icinga\Module\Businessprocess\ImportedNode;
 use Icinga\Module\Businessprocess\Node;
-use Icinga\Module\Businessprocess\Web\Component\StateBall;
 use Icinga\Module\Businessprocess\Web\Form\CsrfToken;
+use Icinga\Module\Icingadb\Model\State;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
+use ipl\Web\Widget\StateBall;
 
 class TreeRenderer extends Renderer
 {
@@ -119,9 +120,9 @@ class TreeRenderer extends Renderer
         }
         $state = strtolower($node->getStateName($parent !== null ? $parent->getChildState($node) : null));
         if ($node->isHandled()) {
-            $state = $state . '-handled';
+            $state = $state . ' handled';
         }
-        $icons[] = (new StateBall($state))->addAttributes([
+        $icons[] = (new StateBall($state, StateBall::SIZE_MEDIUM))->addAttributes([
             'title' => sprintf(
                 '%s %s',
                 $state,
@@ -140,20 +141,26 @@ class TreeRenderer extends Renderer
     public function getOverriddenState($fakeState, Node $node)
     {
         $overriddenState = Html::tag('div', ['class' => 'overridden-state']);
-        $overriddenState->add((new StateBall(strtolower($node->getStateName())))->addAttributes([
-            'title' => sprintf(
-                '%s',
-                $node->getStateName()
-            )
-        ]));
+        $overriddenState->add(
+            (new StateBall(strtolower($node->getStateName()), StateBall::SIZE_MEDIUM))
+                ->addAttributes([
+                    'title' => sprintf(
+                        '%s',
+                        $node->getStateName()
+                    )
+                ])
+        );
         $overriddenState->add(Html::tag('i', ['class' => 'icon icon-right-small']));
-        $overriddenState->add((new StateBall(strtolower($node->getStateName($fakeState))))->addAttributes([
-            'title' => sprintf(
-                '%s',
-                $node->getStateName($fakeState)
-            ),
-            'class' => 'last'
-        ]));
+        $overriddenState->add(
+            (new StateBall(strtolower($node->getStateName($fakeState)), StateBall::SIZE_MEDIUM))
+                ->addAttributes([
+                    'title' => sprintf(
+                        '%s',
+                        $node->getStateName($fakeState)
+                    ),
+                    'class' => 'last'
+                ])
+        );
 
         return $overriddenState;
     }
diff --git a/library/Businessprocess/Web/Component/StateBall.php b/library/Businessprocess/Web/Component/StateBall.php
deleted file mode 100644
index 7090c67..0000000
--- a/library/Businessprocess/Web/Component/StateBall.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-namespace Icinga\Module\Businessprocess\Web\Component;
-
-use ipl\Html\BaseHtmlElement;
-
-class StateBall extends BaseHtmlElement
-{
-    const SIZE_TINY = 'xs';
-    const SIZE_SMALL = 's';
-    const SIZE_MEDIUM = 'm';
-    const SIZE_LARGE = 'l';
-
-    protected $tag = 'div';
-
-    public function __construct($state = 'none', $size = self::SIZE_SMALL)
-    {
-        $state = \trim($state);
-
-        if (empty($state)) {
-            $state = 'none';
-        }
-
-        $size = \trim($size);
-
-        if (empty($size)) {
-            $size = self::SIZE_MEDIUM;
-        }
-
-        $this->defaultAttributes = ['class' => "state-ball state-$state size-$size"];
-    }
-}
diff --git a/public/css/state-ball.less b/public/css/state-ball.less
deleted file mode 100644
index d635f12..0000000
--- a/public/css/state-ball.less
+++ /dev/null
@@ -1,70 +0,0 @@
-.state-ball {
-  border-radius: 50%;
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-
-  &.state-critical,
-  &.state-down {
-    background-color: @color-critical;
-  }
-
-  &.state-unknown {
-    background-color: @color-unknown;
-  }
-
-  &.state-warning {
-    background-color: @color-warning;
-  }
-
-  &.state-ok,
-  &.state-up {
-    background-color: @color-ok;
-  }
-
-  &.state-pending {
-    background-color: @color-pending;
-  }
-
-  &.state-empty {
-    background-color: @gray-light;
-  }
-
-  &.state-critical-handled {
-    background-color: @color-critical-handled;
-  }
-
-  &.state-down-handled {
-    background-color: @color-critical-handled;
-  }
-
-  &.size-xs {
-    line-height: 0.75em;
-    height: 0.75em;
-    width: 0.75em;
-  }
-
-  &.size-s {
-    line-height: 1em;
-    height: 1em;
-    width: 1em;
-  }
-
-  &.size-m {
-    line-height: 2em;
-    height: 2em;
-    width: 2em;
-  }
-
-  &.size-l {
-    line-height: 2.5em;
-    height: 2.5em;
-    width: 2.5em;
-  }
-
-  > i {
-    color: @gray;
-    font-style: normal;
-    text-transform: uppercase;
-  }
-}

From fcadf2d6b4de18d079eb4966116f79e9ce2b562c Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 16 Dec 2021 15:09:50 +0100
Subject: [PATCH 6/9] Use Web 2's form style

---
 .../Web/Form/Element/Checkbox.php             |   8 +
 .../Businessprocess/Web/Form/QuickForm.php    |   2 +-
 public/css/module.less                        | 145 ++++--------------
 3 files changed, 37 insertions(+), 118 deletions(-)
 create mode 100644 library/Businessprocess/Web/Form/Element/Checkbox.php

diff --git a/library/Businessprocess/Web/Form/Element/Checkbox.php b/library/Businessprocess/Web/Form/Element/Checkbox.php
new file mode 100644
index 0000000..7975b82
--- /dev/null
+++ b/library/Businessprocess/Web/Form/Element/Checkbox.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace Icinga\Module\Businessprocess\Web\Form\Element;
+
+class Checkbox extends \Icinga\Web\Form\Element\Checkbox
+{
+
+}
diff --git a/library/Businessprocess/Web/Form/QuickForm.php b/library/Businessprocess/Web/Form/QuickForm.php
index 3442c00..c39b34b 100644
--- a/library/Businessprocess/Web/Form/QuickForm.php
+++ b/library/Businessprocess/Web/Form/QuickForm.php
@@ -85,7 +85,7 @@ abstract class QuickForm extends QuickBaseForm
 
     protected function setPreferredDecorators()
     {
-        $this->setAttrib('class', 'autofocus');
+        $this->setAttrib('class', 'autofocus icinga-controls');
         $this->setDecorators(
             array(
                 'Description',
diff --git a/public/css/module.less b/public/css/module.less
index 7c02c34..7e5053b 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -802,36 +802,10 @@ form input[type=file] {
     padding-right: 1em;
 }
 
-
-form input[type=submit] {
-    .button();
-    border-width: 1px;
-    margin-top: 0.5em;
-
-    &:disabled {
-        border-color: @gray-light;
-        background-color: @gray-light;
-        color: @text-color;
-    }
-}
-
 form input[type=submit]:first-of-type {
     border-width: 2px;
 }
 
-form input[type=submit].link-button {
-    color: @icinga-blue;
-    background: none;
-    border: none;
-    padding: 0;
-
-    text-align: left;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
 form p.description {
     padding: 1em 1em;
     margin: 0;
@@ -839,12 +813,6 @@ form p.description {
     width: 100%;
 }
 
-input[type=text], input[type=button], select, select option, textarea {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-}
-
 form ul.form-errors {
     margin-bottom: 0.5em;
 
@@ -852,50 +820,14 @@ form ul.form-errors {
         background: @color-critical;
         font-weight: bold;
         padding: 0.5em 1em;
-        color: @text-color;
+        color: @text-color-on-icinga-blue;
     }
 }
 
-select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */
-    display: none;
-}
-
-select {
-    border: 1px solid @gray;
-    cursor: pointer;
-    background: none;
-}
-
-input[type=text], input[type=password], textarea, select {
+input[type=text], input[type=password], input[type=file], textarea, select {
     max-width: 36em;
     min-width: 20em;
     width: 100%;
-    line-height: 2em;
-    height: 2.4em;
-    padding-left: 0.5em;
-    border-style: solid;
-    border-color: transparent;
-    border-bottom-color: @gray-lighter;
-    border-width: 1px 1px 1px 3px;
-    background-color: @low-sat-blue;
-
-    &.search {
-        background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em;
-        padding-left: 2em;
-    }
-}
-
-select[multiple] {
-    height: auto;
-}
-
-select option {
-    height: 2em;
-    padding-top: 0.3em;
-}
-
-select[multiple=multiple] {
-    height: auto;
 }
 
 label {
@@ -907,41 +839,10 @@ form dl {
     padding: 0;
 }
 
-select::-moz-focus-inner { border: 0; }
-
-select:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 @black;
-}
-
-select, input[type=text], textarea {
-    &:hover {
-        border-style: dotted solid dotted solid;
-        border-color: @gray-light;
-    }
-
-    &:focus, &:focus:hover {
-        border-style: solid;
-        border-color: @icinga-blue;
-        outline: none;
-    }
-}
-
-select[value=""] {
-    color: @icinga-blue;
-    border: 1px solid @gray-light;
-    background-color: @body-bg-color;
-}
-
 select option {
-    color: inherit;
     padding-left: 0.5em;
 }
 
-select option[value=""] {
-    color: @disabled-gray;
-}
-
 form dt label {
     width: auto;
     font-weight: normal;
@@ -1067,30 +968,40 @@ form dd ul.errors {
     }
 }
 
-form div.hint {
-    padding: 1em;
-    background-color: @tr-hover-color;
-    margin: 1em 0;
-    max-width: 65em;
-    font-size: 1em;
-
-    pre {
-        font-style: normal;
-        background-color: @white;
-        margin: 0;
-        padding: 1em;
-    }
-}
-
-
 form {
     #_FAKE_SUBMIT {
         position: absolute;
         left: -100%;
     }
 }
+
 /** END of forms **/
 
+/* Form fallback styles, remove once <=2.9.5 support is dropped */
+
+.icinga-controls {
+    input[type="file"] {
+        background-color: @low-sat-blue;
+    }
+
+    button[type="button"] {
+        background-color: @low-sat-blue;
+    }
+}
+
+form.icinga-form {
+    input[type="file"] {
+        flex: 1 1 auto;
+        width: 0;
+    }
+
+    button[type="button"] {
+        line-height: normal;
+    }
+}
+
+/* Form fallback styles end */
+
 /** Custom font styling **/
 textarea.smaller {
     font-size: 0.833em;

From 140ef72371c686eccce02acc78ea3162e00f2a0a Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 16 Dec 2021 15:10:14 +0100
Subject: [PATCH 7/9] css: Improve variable usage and make it compatible with
 Web < 2.10

---
 public/css/module.less | 64 ++++++++----------------------------------
 1 file changed, 12 insertions(+), 52 deletions(-)

diff --git a/public/css/module.less b/public/css/module.less
index 7e5053b..04701c6 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -1,9 +1,3 @@
-@color-diff-ins: @color-ok;
-@color-diff-del: @color-critical;
-@color-diff-changed-old: fade(@color-critical, 30%);
-@color-diff-changed-new: fade(@color-ok, 30%);
-@color-change-replace-del: #e99;
-
 a:focus {
     outline: none;
     text-decoration: underline;
@@ -94,12 +88,6 @@ div.bp.sortable > .sortable-ghost {
     opacity: 0.5;
 }
 
-.simulation div.bp {
-    border-right: 1em solid @color-critical-handled;
-    padding-right: 1em;
-    background: @white;
-}
-
 
 /* TreeView */
 
@@ -173,10 +161,10 @@ ul.bp {
             &.op {
                 padding: .1em .5em;
                 border-radius: .5em;
-                background-color: @gray-light;
+                background-color: @gray-semilight;
                 font-weight: bold;
                 font-size: 1em;
-                color: @text-color-light;
+                color: @text-color-on-icinga-blue;
             }
         }
     }
@@ -207,10 +195,6 @@ ul.bp {
                 padding-top: 0;
             }
         }
-
-        > i.icon-service {
-            opacity: .75;
-        }
     }
 
     // horizontal layout
@@ -382,7 +366,7 @@ ul.bp {
     padding: 0.3em 0.4em;
 
     .badge {
-        border: 1px solid @white;
+        border: 1px solid @body-bg-color;
         margin: 0;
     }
 }
@@ -402,7 +386,7 @@ td > a > .badges {
 .badge-unknown, .badge-unreachable { background: @color-unknown; }
 .badge-warning { background: @color-warning }
 .badge-pending { background: @color-pending }
-.badge-missing { background: @gray; }
+.badge-missing { background: @gray-semilight; color: @text-color-on-icinga-blue; }
 /** END Badges **/
 
 /** BEGIN Tiles **/
@@ -414,11 +398,11 @@ td > a > .badges {
 
 .tiles.sortable > .sortable-ghost {
     opacity: 0.5;
-    border: .2em dashed @black;
+    border: .2em dashed @gray;
 }
 
 .tiles > div {
-    color: @body-bg-color;
+    color: @text-color-on-icinga-blue;
     width: 12em;
     display: inline-block;
     float: left;
@@ -444,7 +428,7 @@ td > a > .badges {
         left: 0;
         bottom: 0;
         margin: .5em;
-        border: 1px solid @white;
+        border: 1px solid @body-bg-color;
     }
 
     > a {
@@ -469,7 +453,7 @@ td > a > .badges {
     }
 
     &:hover {
-        box-shadow: 0px 0px .2em @black;
+        box-shadow: 0 0 .2em @gray;
     }
 
     .actions {
@@ -547,34 +531,10 @@ td > a > .badges {
     > .ok                  { background-color: @color-ok;               > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
     > .up                  { background-color: @color-ok;               > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
     > .pending             { background-color: @color-pending;          > a { text-shadow: 0 0 1px mix(#000, @color-pending, 40%); }}
-    > .missing             { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray; }}
-    > .empty               { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray; } }
+    > .missing             { background-color: @gray-semilight;         > a { color: @text-color-on-icinga-blue; }}
+    > .empty               { background-color: @gray-semilight;         > a { color: @text-color-on-icinga-blue; }}
 }
 
-/*
-.tiles > div:hover {
-    > .critical            { background: @white; color: @text-color; }
-    > .critical.handled    { background: @color-critical-handled; }
-    > .down                { background: @color-critical; }
-    > .down.handled        { background: @color-critical-handled; }
-    > .unknown             { background: @color-unknown; }
-    > .unknown.handled     { background: @color-unknown-handled; }
-    > .unreachable         { background: @color-unknown; }
-    > .unreachable.handled { background: @color-unknown-handled; }
-    > .warning             { background: @color-warning; }
-    > .warning.handled     { background: @color-warning-handled; }
-    > .ok                  { background: @color-ok; }
-    > .pending             { background: @color-pending; }
-    > .missing             { background: @gray; }
-}
-*/
-/*
-.tiles .missing a {
-    pointer-events: none;
-    cursor: default;
-}
-*/
-
 .tiles.few { font-size: 2.5em; }
 .tiles.normal { font-size: 2.1em; }
 .tiles.many { font-size: 1.8em; }
@@ -663,7 +623,7 @@ td > a > .badges {
         padding-right: 1.2em;
 
         a {
-            color: @text-color-light;
+            color: @text-color-on-icinga-blue;
         }
     }
 }
@@ -746,7 +706,7 @@ ul.error, ul.warning {
 
     li {
         font-weight: bold;
-        color: @text-color;
+        color: @text-color-on-icinga-blue;
         padding: 0.3em 0.8em;
     }
 

From 940abdada6dfe66f8eb5077d7d489f081567f832 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 16 Dec 2021 16:02:55 +0100
Subject: [PATCH 8/9] Use the plug icon to indicate objects in downtime

---
 library/Businessprocess/Renderer/TreeRenderer.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library/Businessprocess/Renderer/TreeRenderer.php b/library/Businessprocess/Renderer/TreeRenderer.php
index 0fb3c37..c71a4f9 100644
--- a/library/Businessprocess/Renderer/TreeRenderer.php
+++ b/library/Businessprocess/Renderer/TreeRenderer.php
@@ -130,7 +130,7 @@ class TreeRenderer extends Renderer
             )
         ]);
         if ($node->isInDowntime()) {
-            $icons[] = Html::tag('i', ['class' => 'icon icon-moon']);
+            $icons[] = Html::tag('i', ['class' => 'icon icon-plug']);
         }
         if ($node->isAcknowledged()) {
             $icons[] = Html::tag('i', ['class' => 'icon icon-ok']);

From 1c131e8789d077be810f54ef3299823e8ca8bb3f Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 16 Dec 2021 15:45:57 +0100
Subject: [PATCH 9/9] CSS: Balance visual icon weight

---
 public/css/module.less | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/css/module.less b/public/css/module.less
index 04701c6..78617c5 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -123,6 +123,24 @@ ul.bp {
         }
     }
 
+    li {
+        i.icon-service {
+            opacity: .75;
+        }
+
+        i.icon-sitemap {
+            opacity: .8;
+        }
+
+        i.icon-ok {
+            opacity: .8;
+        }
+
+        i.icon-plug {
+            opacity: .7;
+        }
+    }
+
     // ghost style
     &.sortable > li.sortable-ghost {
         position: relative;