diff options
Diffstat (limited to 'asset/css')
-rw-r--r-- | asset/css/vendor/diff-table.less | 185 |
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; + } + } + } +} + |