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] 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;
   }