From 2457a6214f965a3c41dd19210b61a28f803126f4 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Wed, 15 Dec 2021 15:52:10 +0100
Subject: [PATCH] Add style in LESS format for `jfcherng/php-diff`

---
 asset/css/vendor/diff-table.less | 185 +++++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 asset/css/vendor/diff-table.less

diff --git a/asset/css/vendor/diff-table.less b/asset/css/vendor/diff-table.less
new file mode 100644
index 0000000..910b4ee
--- /dev/null
+++ b/asset/css/vendor/diff-table.less
@@ -0,0 +1,185 @@
+/**
+ * This is based on https://github.com/jfcherng/php-diff/blob/6.10.2/example/diff-table.scss
+ *
+ * It's been converted by performing these steps:
+ *  - npm install less-plugin-sass2less --save-dev
+ *  - ./node_modules/.bin/sass2less -c /usr/share/icinga-php/vendor/vendor/jfcherng/php-diff/example \
+ *    diff-table.scss > /usr/share/icinga-php/vendor/asset/css/vendor/diff-table.less
+ *  - `@diff-text-color: invert(@diff-bg-color)` though had to be changed to `@diff-text-color: black`.
+ *    (`@diff-text-color: spin(@diff-bg-color, 180)` didn't work)
+ */
+
+@diff-bg-color: #fff;
+@diff-text-color: black;
+
+@diff-bg-color-ins-base: #8e8;
+@diff-bg-color-del-base: #e88;
+@diff-bg-color-rep-base: #fbdb65;
+
+@diff-op-highlight-ratio: 90%;
+@diff-op-normal-ratio: 25%;
+
+// emphasized colors for detailed inline difference
+@diff-bg-color-ins-highlight: mix(@diff-bg-color-ins-base, @diff-bg-color, @diff-op-highlight-ratio);
+@diff-bg-color-del-highlight: mix(@diff-bg-color-del-base, @diff-bg-color, @diff-op-highlight-ratio);
+
+// colors for operation rows
+@diff-bg-color-ins: mix(@diff-bg-color-ins-base, @diff-bg-color, @diff-op-normal-ratio);
+@diff-bg-color-del: mix(@diff-bg-color-del-base, @diff-bg-color, @diff-op-normal-ratio);
+@diff-bg-color-rep: mix(@diff-bg-color-rep-base, @diff-bg-color, @diff-op-normal-ratio);
+
+@diff-table-head-color: mix(@diff-bg-color, @diff-text-color, 65%);
+@diff-table-sidebar-color: mix(@diff-bg-color, @diff-text-color, 80%);
+@diff-border-color: @diff-text-color;
+
+// color for the nonexistent block
+// for example, there are a deleted line that has no corresponding one
+@diff-bg-color-none-block: mix(@diff-bg-color, @diff-table-sidebar-color, 80%);
+@diff-bg-color-none-block-alternative: mix(@diff-bg-color, @diff-table-sidebar-color, 55%);
+
+.diff-wrapper.diff {
+  background: repeating-linear-gradient(
+    -45deg,
+    @diff-bg-color-none-block,
+    @diff-bg-color-none-block 0.5em,
+    @diff-bg-color-none-block-alternative 0.5em,
+    @diff-bg-color-none-block-alternative 1em
+  );
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px solid @diff-border-color;
+  color: @diff-text-color;
+  empty-cells: show;
+  font-family: monospace;
+  font-size: 13px;
+  width: 100%;
+  word-break: break-all;
+
+  th {
+    font-weight: 700;
+  }
+
+  td {
+    vertical-align: baseline;
+  }
+
+  td,
+  th {
+    border-collapse: separate;
+    border: none;
+    padding: 1px 2px;
+    background: @diff-bg-color;
+
+    // make empty cell has height
+    &:empty:after {
+      content: " ";
+      visibility: hidden;
+    }
+
+    a {
+      color: #000;
+      cursor: inherit;
+      pointer-events: none;
+    }
+  }
+
+  thead th {
+    background: @diff-table-head-color;
+    border-bottom: 1px solid @diff-border-color;
+    padding: 4px;
+    text-align: left;
+  }
+
+  tbody {
+    &.skipped {
+      border-top: 1px solid @diff-border-color;
+
+      td,
+      th {
+        display: none;
+      }
+    }
+
+    th {
+      background: @diff-table-sidebar-color;
+      border-right: 1px solid @diff-border-color;
+      text-align: right;
+      vertical-align: top;
+      width: 4em;
+
+      &.sign {
+        background: @diff-bg-color;
+        border-right: none;
+        padding: 1px 0;
+        text-align: center;
+        width: 1em;
+
+        &.del {
+          background: @diff-bg-color-del;
+        }
+
+        &.ins {
+          background: @diff-bg-color-ins;
+        }
+      }
+    }
+  }
+
+  &.diff-html {
+    white-space: pre-wrap;
+
+    &.diff-combined {
+      .change.change-rep {
+        .rep {
+          // fixes https://github.com/jfcherng/php-diff/issues/34#issuecomment-671404456
+          white-space: normal;
+        }
+      }
+    }
+
+    .change {
+      &.change-eq {
+        .old,
+        .new {
+          background: @diff-bg-color;
+        }
+      }
+
+      .old {
+        background: @diff-bg-color-del;
+      }
+
+      .new {
+        background: @diff-bg-color-ins;
+      }
+
+      .rep {
+        background: @diff-bg-color-rep;
+      }
+
+      .old,
+      .new,
+      .rep {
+        &.none {
+          background: transparent;
+          cursor: not-allowed;
+        }
+      }
+
+      ins,
+      del {
+        font-weight: bold;
+        text-decoration: none;
+      }
+
+      ins {
+        background: @diff-bg-color-ins-highlight;
+      }
+
+      del {
+        background: @diff-bg-color-del-highlight;
+      }
+    }
+  }
+}
+