summaryrefslogtreecommitdiffstats
path: root/asset/css
diff options
context:
space:
mode:
Diffstat (limited to 'asset/css')
-rw-r--r--asset/css/vendor/diff-table.less185
1 files changed, 185 insertions, 0 deletions
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;
+ }
+ }
+ }
+}
+