Add style in LESS format for `jfcherng/php-diff`
This commit is contained in:
Johannes Meyer
parent
93673399f6
commit
2457a6214f
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue