/* * * Diff to HTML (diff2html.css) * Author: rtfpessoa * */ :root { --d2h-bg-color: #fff; --d2h-border-color: #ddd; --d2h-dim-color: rgba(0, 0, 0, 0.3); --d2h-line-border-color: #eeeeee; --d2h-file-header-bg-color: #f7f7f7; --d2h-file-header-border-color: #d8d8d8; --d2h-empty-placeholder-bg-color: #f1f1f1; --d2h-empty-placeholder-border-color: #e1e1e1; --d2h-selected-color: #c8e1ff; --d2h-ins-bg-color: #dfd; --d2h-ins-border-color: #b4e2b4; --d2h-ins-highlight-bg-color: #97f295; --d2h-ins-label-color: #399839; --d2h-del-bg-color: #fee8e9; --d2h-del-border-color: #e9aeae; --d2h-del-highlight-bg-color: #ffb6ba; --d2h-del-label-color: #c33; --d2h-change-del-color: #fdf2d0; --d2h-change-ins-color: #ded; --d2h-info-bg-color: #f8fafd; --d2h-info-border-color: #d5e4f2; --d2h-change-label-color: #d0b44c; --d2h-moved-label-color: #3572b0; /** * Dark Color Scheme */ --d2h-dark-color: #e6edf3; --d2h-dark-bg-color: #171814; --d2h-dark-border-color: #494b40; --d2h-dark-dim-color: #929292; --d2h-dark-line-border-color: #5a5c51; --d2h-dark-file-header-bg-color: #4f5146; --d2h-dark-file-header-border-color: #3f4136; --d2h-dark-empty-placeholder-bg-color: #494b40; --d2h-dark-empty-placeholder-border-color: #66695a; --d2h-dark-selected-color: #00489f; --d2h-dark-ins-bg-color: #0f4a07; --d2h-dark-ins-border-color: #219f1f; --d2h-dark-ins-highlight-bg-color: #177016; --d2h-dark-ins-label-color: #4f9f4f; --d2h-dark-del-bg-color: #604243; --d2h-dark-del-border-color: #a07c7e; --d2h-dark-del-highlight-bg-color: #905a5c; --d2h-dark-del-label-color: #ca4f54; --d2h-dark-change-del-color: #9b7707; --d2h-dark-change-ins-color: #366b36; --d2h-dark-info-bg-color: #32342c; --d2h-dark-info-border-color: #4f5146; --d2h-dark-change-label-color: #d0b44c; --d2h-dark-moved-label-color: #3572b0; } .d2h-wrapper { text-align: left; } .d2h-file-header { display: flex; height: 35px; padding: 5px 10px; border-bottom: 1px solid var(--d2h-file-header-border-color); background-color: var(--d2h-file-header-bg-color); font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .d2h-file-header.d2h-sticky-header { position: sticky; top: 0; z-index: 1; } .d2h-file-stats { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: auto; font-size: 14px; } .d2h-lines-added { text-align: right; border: 1px solid var(--d2h-ins-border-color); border-radius: 5px 0 0 5px; color: var(--d2h-ins-label-color); padding: 2px; vertical-align: middle; } .d2h-lines-deleted { text-align: left; border: 1px solid var(--d2h-del-border-color); border-radius: 0 5px 5px 0; color: var(--d2h-del-label-color); padding: 2px; vertical-align: middle; margin-left: 1px; } .d2h-file-name-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; font-size: 15px; } .d2h-file-name { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; } .d2h-file-wrapper { border: 1px solid var(--d2h-border-color); border-radius: 3px; margin-bottom: 1em; } .d2h-file-collapse { justify-content: flex-end; display: none; cursor: pointer; font-size: 12px; align-items: center; border-radius: 3px; border: 1px solid var(--d2h-border-color); padding: 4px 8px; } .d2h-file-collapse.d2h-selected { background-color: var(--d2h-selected-color); } .d2h-file-collapse-input { margin: 0 4px 0 0; } .d2h-diff-table { width: 100%; border-collapse: collapse; font-family: 'Menlo', 'Consolas', monospace; font-size: 13px; } .d2h-files-diff { display: flex; width: 100%; } .d2h-file-diff { overflow-y: hidden; } .d2h-files-diff.d2h-d-none, .d2h-file-diff.d2h-d-none { display: none; } .d2h-file-side-diff { display: inline-block; overflow-x: scroll; overflow-y: hidden; width: 50%; } .d2h-code-line { display: inline-block; white-space: nowrap; user-select: none; width: calc(100% - 16em); /* Compensate for the absolute positioning of the line numbers */ padding: 0 8em; } .d2h-code-side-line { display: inline-block; white-space: nowrap; user-select: none; width: calc(100% - 9em); /* Compensate for the absolute positioning of the line numbers */ padding: 0 4.5em; } .d2h-code-line-ctn { display: inline-block; background: none; padding: 0; word-wrap: normal; white-space: pre; user-select: text; width: 100%; vertical-align: middle; } .d2h-code-line del, .d2h-code-side-line del { display: inline-block; margin-top: -1px; text-decoration: none; background-color: var(--d2h-del-highlight-bg-color); border-radius: 0.2em; } .d2h-code-line ins, .d2h-code-side-line ins { display: inline-block; margin-top: -1px; text-decoration: none; background-color: var(--d2h-ins-highlight-bg-color); border-radius: 0.2em; text-align: left; } .d2h-code-line-prefix { display: inline; background: none; padding: 0; word-wrap: normal; white-space: pre; } .line-num1 { box-sizing: border-box; float: left; width: 3.5em; overflow: hidden; text-overflow: ellipsis; padding: 0 0.5em 0 0.5em; } .line-num2 { box-sizing: border-box; float: right; width: 3.5em; overflow: hidden; text-overflow: ellipsis; padding: 0 0.5em 0 0.5em; } .d2h-code-linenumber { box-sizing: border-box; width: 7.5em; /* Keep the numbers fixed on line contents scroll */ position: absolute; display: inline-block; background-color: var(--d2h-bg-color); color: var(--d2h-dim-color); text-align: right; border: solid var(--d2h-line-border-color); border-width: 0 1px 0 1px; cursor: pointer; } .d2h-code-linenumber:after { content: '\200b'; } .d2h-code-side-linenumber { /* Keep the numbers fixed on line contents scroll */ position: absolute; display: inline-block; box-sizing: border-box; width: 4em; background-color: var(--d2h-bg-color); color: var(--d2h-dim-color); text-align: right; border: solid var(--d2h-line-border-color); border-width: 0 1px 0 1px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; padding: 0 0.5em 0 0.5em; } .d2h-code-side-linenumber:after { content: '\200b'; } .d2h-code-side-emptyplaceholder, .d2h-emptyplaceholder { background-color: var(--d2h-empty-placeholder-bg-color); border-color: var(--d2h-empty-placeholder-border-color); } .d2h-code-linenumber, .d2h-code-side-linenumber, .d2h-code-line-prefix, .d2h-emptyplaceholder { user-select: none; } .d2h-code-linenumber, .d2h-code-side-linenumber { direction: rtl; } /* * Changes Highlight */ .d2h-del { background-color: var(--d2h-del-bg-color); border-color: var(--d2h-del-border-color); } .d2h-ins { background-color: var(--d2h-ins-bg-color); border-color: var(--d2h-ins-border-color); } .d2h-info { background-color: var(--d2h-info-bg-color); color: var(--d2h-dim-color); border-color: var(--d2h-info-border-color); } .d2h-file-diff .d2h-del.d2h-change { background-color: var(--d2h-change-del-color); } .d2h-file-diff .d2h-ins.d2h-change { background-color: var(--d2h-change-ins-color); } /* * File Summary List */ .d2h-file-list-wrapper { margin-bottom: 10px; } .d2h-file-list-wrapper a { text-decoration: none; color: var(--d2h-moved-label-color); } .d2h-file-list-wrapper a:visited { color: var(--d2h-moved-label-color); } .d2h-file-list-header { text-align: left; } .d2h-file-list-title { font-weight: bold; } .d2h-file-list-line { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; } .d2h-file-list { display: block; list-style: none; padding: 0; margin: 0; } .d2h-file-list > li { border-bottom: var(--d2h-border-color) solid 1px; padding: 5px 10px; margin: 0; } .d2h-file-list > li:last-child { border-bottom: none; } .d2h-file-switch { display: none; font-size: 10px; cursor: pointer; } .d2h-icon { vertical-align: middle; margin-right: 10px; fill: currentColor; } .d2h-deleted { color: var(--d2h-del-label-color); } .d2h-added { color: var(--d2h-ins-label-color); } .d2h-changed { color: var(--d2h-change-label-color); } .d2h-moved { color: var(--d2h-moved-label-color); } .d2h-tag { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 10px; margin-left: 5px; padding: 0 2px; background-color: var(--d2h-bg-color); } .d2h-deleted-tag { border: var(--d2h-del-label-color) 1px solid; } .d2h-added-tag { border: var(--d2h-ins-label-color) 1px solid; } .d2h-changed-tag { border: var(--d2h-change-label-color) 1px solid; } .d2h-moved-tag { border: var(--d2h-moved-label-color) 1px solid; } /** * Dark Mode Colors */ .d2h-dark-color-scheme { color: var(--d2h-dark-color); background-color: var(--d2h-dark-bg-color); } .d2h-dark-color-scheme .d2h-file-header { background-color: var(--d2h-dark-file-header-bg-color); border-bottom: var(--d2h-dark-file-header-border-color); } .d2h-dark-color-scheme .d2h-lines-added { border: 1px solid var(--d2h-dark-ins-border-color); color: var(--d2h-dark-ins-label-color); } .d2h-dark-color-scheme .d2h-lines-deleted { border: 1px solid var(--d2h-dark-del-border-color); color: var(--d2h-dark-del-label-color); } .d2h-dark-color-scheme .d2h-code-line del, .d2h-dark-color-scheme .d2h-code-side-line del { background-color: var(--d2h-dark-del-highlight-bg-color); } .d2h-dark-color-scheme .d2h-code-line ins, .d2h-dark-color-scheme .d2h-code-side-line ins { background-color: var(--d2h-dark-ins-highlight-bg-color); } .d2h-dark-color-scheme .d2h-diff-tbody { border-color: var(--d2h-dark-border-color); } .d2h-dark-color-scheme .d2h-code-side-linenumber { border-color: var(--d2h-dark-line-border-color); } .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder { background-color: var(--d2h-dark-empty-placeholder-bg-color); border-color: var(--d2h-dark-empty-placeholder-border-color); } .d2h-dark-color-scheme .d2h-code-linenumber { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-dim-color); border-color: var(--d2h-dark-line-border-color); } .d2h-dark-color-scheme .d2h-del { background-color: var(--d2h-dark-del-bg-color); border-color: var(--d2h-dark-del-border-color); } .d2h-dark-color-scheme .d2h-ins { background-color: var(--d2h-dark-ins-bg-color); border-color: var(--d2h-dark-ins-border-color); } .d2h-dark-color-scheme .d2h-info { background-color: var(--d2h-dark-info-bg-color); color: var(--d2h-dark-dim-color); border-color: var(--d2h-dark-info-border-color); } .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change { background-color: var(--d2h-dark-change-del-color); } .d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change { background-color: var(--d2h-dark-change-ins-color); } .d2h-dark-color-scheme .d2h-file-wrapper { border: 1px solid var(--d2h-dark-border-color); } .d2h-dark-color-scheme .d2h-file-collapse { border: 1px solid var(--d2h-dark-bg-color); } .d2h-dark-color-scheme .d2h-file-collapse.d2h-selected { background-color: var(--d2h-dark-selected-color); } .d2h-dark-color-scheme .d2h-file-list-wrapper a { color: var(--d2h-dark-moved-label-color); } .d2h-dark-color-scheme .d2h-file-list-wrapper a:visited { color: var(--d2h-dark-moved-label-color); } .d2h-dark-color-scheme .d2h-file-list > li { border-bottom: var(--d2h-dark-bg-color) solid 1px; } .d2h-dark-color-scheme .d2h-deleted { color: var(--d2h-dark-del-label-color); } .d2h-dark-color-scheme .d2h-added { color: var(--d2h-dark-ins-label-color); } .d2h-dark-color-scheme .d2h-changed { color: var(--d2h-dark-change-label-color); } .d2h-dark-color-scheme .d2h-moved { color: var(--d2h-dark-moved-label-color); } .d2h-dark-color-scheme .d2h-tag { background-color: var(--d2h-dark-bg-color); } .d2h-dark-color-scheme .d2h-deleted-tag { border: var(--d2h-dark-del-label-color) 1px solid; } .d2h-dark-color-scheme .d2h-added-tag { border: var(--d2h-dark-ins-label-color) 1px solid; } .d2h-dark-color-scheme .d2h-changed-tag { border: var(--d2h-dark-change-label-color) 1px solid; } .d2h-dark-color-scheme .d2h-moved-tag { border: var(--d2h-dark-moved-label-color) 1px solid; } /** * Auto Mode Colors */ @media (prefers-color-scheme: dark) { .d2h-auto-color-scheme { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-color); } .d2h-auto-color-scheme .d2h-file-header { background-color: var(--d2h-dark-file-header-bg-color); border-bottom: var(--d2h-dark-file-header-border-color); } .d2h-auto-color-scheme .d2h-lines-added { border: 1px solid var(--d2h-dark-ins-border-color); color: var(--d2h-dark-ins-label-color); } .d2h-auto-color-scheme .d2h-lines-deleted { border: 1px solid var(--d2h-dark-del-border-color); color: var(--d2h-dark-del-label-color); } .d2h-auto-color-scheme .d2h-code-line del, .d2h-auto-color-scheme .d2h-code-side-line del { background-color: var(--d2h-dark-del-highlight-bg-color); } .d2h-auto-color-scheme .d2h-code-line ins, .d2h-auto-color-scheme .d2h-code-side-line ins { background-color: var(--d2h-dark-ins-highlight-bg-color); } .d2h-auto-color-scheme .d2h-diff-tbody { border-color: var(--d2h-dark-border-color); } .d2h-auto-color-scheme .d2h-code-side-linenumber { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-dim-color); border-color: var(--d2h-dark-line-border-color); } .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder { background-color: var(--d2h-dark-empty-placeholder-bg-color); border-color: var(--d2h-dark-empty-placeholder-border-color); } .d2h-auto-color-scheme .d2h-code-linenumber { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-dim-color); border-color: var(--d2h-dark-line-border-color); } .d2h-auto-color-scheme .d2h-del { background-color: var(--d2h-dark-del-bg-color); border-color: var(--d2h-dark-del-border-color); } .d2h-auto-color-scheme .d2h-ins { background-color: var(--d2h-dark-ins-bg-color); border-color: var(--d2h-dark-ins-border-color); } .d2h-auto-color-scheme .d2h-info { background-color: var(--d2h-dark-info-bg-color); color: var(--d2h-dark-dim-color); border-color: var(--d2h-dark-info-border-color); } .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change { background-color: var(--d2h-dark-change-del-color); } .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change { background-color: var(--d2h-dark-change-ins-color); } .d2h-auto-color-scheme .d2h-file-wrapper { border: 1px solid var(--d2h-dark-border-color); } .d2h-auto-color-scheme .d2h-file-collapse { border: 1px solid var(--d2h-dark-bg-color); } .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected { background-color: var(--d2h-dark-selected-color); } .d2h-auto-color-scheme .d2h-file-list-wrapper a { color: var(--d2h-dark-moved-label-color); } .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited { color: var(--d2h-dark-moved-label-color); } .d2h-auto-color-scheme .d2h-file-list > li { border-bottom: var(--d2h-dark-bg-color) solid 1px; } .d2h-dark-color-scheme .d2h-deleted { color: var(--d2h-dark-del-label-color); } .d2h-auto-color-scheme .d2h-added { color: var(--d2h-dark-ins-label-color); } .d2h-auto-color-scheme .d2h-changed { color: var(--d2h-dark-change-label-color); } .d2h-auto-color-scheme .d2h-moved { color: var(--d2h-dark-moved-label-color); } .d2h-auto-color-scheme .d2h-tag { background-color: var(--d2h-dark-bg-color); } .d2h-auto-color-scheme .d2h-deleted-tag { border: var(--d2h-dark-del-label-color) 1px solid; } .d2h-auto-color-scheme .d2h-added-tag { border: var(--d2h-dark-ins-label-color) 1px solid; } .d2h-auto-color-scheme .d2h-changed-tag { border: var(--d2h-dark-change-label-color) 1px solid; } .d2h-auto-color-scheme .d2h-moved-tag { border: var(--d2h-dark-moved-label-color) 1px solid; } }