Add style in LESS format for `jfcherng/php-diff`

This commit is contained in:
Johannes Meyer 2021-12-15 15:52:10 +01:00
parent 93673399f6
commit 2457a6214f
1 changed files with 185 additions and 0 deletions

185
asset/css/vendor/diff-table.less vendored Normal file
View File

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