@cw-devops/bk-magic-vue/lib/ui/diff.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.hljs{
  display:block;
  overflow-x:auto;
  padding:0.5em;
  background:white;
  color:black;
}

.hljs-comment,
.hljs-quote{
  color:#800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name{
  color:#008;
}

.hljs-variable,
.hljs-template-variable{
  color:#660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp{
  color:#080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link{
  color:#066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params{
  color:#606;
}

.hljs-attribute,
.hljs-subst{
  color:#000;
}

.hljs-formula{
  background-color:#eee;
  font-style:italic;
}

.hljs-selector-id,
.hljs-selector-class{
  color:#9B703F
}

.hljs-addition{
  background-color:#baeeba;
}

.hljs-deletion{
  background-color:#ffc8bd;
}

.hljs-doctag,
.hljs-strong{
  font-weight:bold;
}

.hljs-emphasis{
  font-style:italic;
}

.d2h-wrapper{
  text-align:left;
}

.d2h-file-header{
  height:35px;
  padding:5px 10px;
  border-bottom:1px solid #d8d8d8;
  background-color:#f7f7f7;
}

.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 #b4e2b4;
  border-radius:5px 0 0 5px;
  color:#399839;
  padding:2px;
  vertical-align:middle;
}

.d2h-lines-deleted{
  text-align:left;
  border:1px solid #e9aeae;
  border-radius:0 5px 5px 0;
  color:#c33;
  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-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:15px;
}

.d2h-file-name{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow-x:hidden;
}

.d2h-file-wrapper{
  border:1px solid #ddd;
  border-radius:3px;
  margin-bottom:1em;
}

.d2h-diff-table{
  width:100%;
  border-collapse:collapse;
  font-family:"Menlo", "Consolas", monospace;
  font-size:13px;
}

.d2h-files-diff{
  display:block;
  width:100%;
  height:100%;
}

.d2h-file-diff{
  overflow-y:hidden;
}

.d2h-file-side-diff{
  display:inline-block;
  overflow-x:scroll;
  overflow-y:hidden;
  width:50%;
  margin-right:-4px;
  margin-bottom:-8px;
}

.d2h-code-line{
  display:inline-block;
  white-space:nowrap;
  padding:0 8em;
}

.d2h-code-side-line{
  display:inline-block;
  white-space:nowrap;
  padding:0 4.5em;
}

.d2h-code-line del,
.d2h-code-side-line del{
  display:inline-block;
  margin-top:-1px;
  text-decoration:none;
  background-color:#ffb6ba;
  border-radius:0.2em;
}

.d2h-code-line ins,
.d2h-code-side-line ins{
  display:inline-block;
  margin-top:-1px;
  text-decoration:none;
  background-color:#97f295;
  border-radius:0.2em;
  text-align:left;
}

.d2h-code-line-prefix{
  display:inline;
  background:none;
  padding:0;
  word-wrap:normal;
  white-space:pre;
}

.d2h-code-line-ctn{
  display:inline;
  background:none;
  padding:0;
  word-wrap:normal;
  white-space:pre;
}

.line-num1{
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  float:left;
  width:3.5em;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 0.5em 0 0.5em;
}

.line-num2{
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  float:right;
  width:3.5em;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 0.5em 0 0.5em;
}

.d2h-code-linenumber{
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  width:7.5em;
  position:absolute;
  display:inline-block;
  background-color:#fff;
  color:rgba(0, 0, 0, 0.3);
  text-align:right;
  border:solid #eeeeee;
  border-width:0 1px 0 1px;
  cursor:pointer;
}

.d2h-code-linenumber:after{
  content:'\200b';
}

.d2h-code-side-linenumber{
  position:absolute;
  display:inline-block;
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  width:4em;
  background-color:#fff;
  color:rgba(0, 0, 0, 0.3);
  text-align:right;
  border:solid #eeeeee;
  border-width:0 1px 0 1px;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
}

.d2h-code-side-linenumber:after{
  content:'\200b';
}

.d2h-code-side-emptyplaceholder,
.d2h-emptyplaceholder{
  background-color:#f1f1f1;
  border-color:#e1e1e1;
}

.d2h-del{
  background-color:#fee8e9;
  border-color:#e9aeae;
}

.d2h-ins{
  background-color:#dfd;
  border-color:#b4e2b4;
}

.d2h-info{
  background-color:#f8fafd;
  color:rgba(0, 0, 0, 0.3);
  border-color:#d5e4f2;
}

.d2h-file-diff .d2h-del.d2h-change{
  background-color:#fdf2d0;
}

.d2h-file-diff .d2h-ins.d2h-change{
  background-color:#ded;
}

.d2h-file-list-wrapper{
  margin-bottom:10px;
}

.d2h-file-list-wrapper a{
  text-decoration:none;
  color:#3572b0;
}

.d2h-file-list-wrapper a:visited{
  color:#3572b0;
}

.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:#ddd 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:#c33;
}

.d2h-added{
  color:#399839;
}

.d2h-changed{
  color:#d0b44c;
}

.d2h-moved{
  color:#3572b0;
}

.d2h-tag{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  font-size:10px;
  margin-left:5px;
  padding:0 2px;
  background-color:#fff;
}

.d2h-deleted-tag{
  border:#c33 1px solid;
}

.d2h-added-tag{
  border:#399839 1px solid;
}

.d2h-changed-tag{
  border:#d0b44c 1px solid;
}

.d2h-moved-tag{
  border:#3572b0 1px solid;
}

.selecting-left .d2h-code-line,
.selecting-left .d2h-code-line *,
.selecting-right td.d2h-code-linenumber,
.selecting-right td.d2h-code-linenumber *,
.selecting-left .d2h-code-side-line,
.selecting-left .d2h-code-side-line *,
.selecting-right td.d2h-code-side-linenumber,
.selecting-right td.d2h-code-side-linenumber *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.selecting-left .d2h-code-line::-moz-selection,
.selecting-left .d2h-code-line *::-moz-selection,
.selecting-right td.d2h-code-linenumber::-moz-selection,
.selecting-left .d2h-code-side-line::-moz-selection,
.selecting-left .d2h-code-side-line *::-moz-selection,
.selecting-right td.d2h-code-side-linenumber::-moz-selection,
.selecting-right td.d2h-code-side-linenumber *::-moz-selection{
  background:transparent;
}

.selecting-left .d2h-code-line::-moz-selection, .selecting-left .d2h-code-line *::-moz-selection, .selecting-right td.d2h-code-linenumber::-moz-selection, .selecting-left .d2h-code-side-line::-moz-selection, .selecting-left .d2h-code-side-line *::-moz-selection, .selecting-right td.d2h-code-side-linenumber::-moz-selection, .selecting-right td.d2h-code-side-linenumber *::-moz-selection{
  background:transparent;
}

.selecting-left .d2h-code-line::selection,
.selecting-left .d2h-code-line *::selection,
.selecting-right td.d2h-code-linenumber::selection,
.selecting-left .d2h-code-side-line::selection,
.selecting-left .d2h-code-side-line *::selection,
.selecting-right td.d2h-code-side-linenumber::selection,
.selecting-right td.d2h-code-side-linenumber *::selection{
  background:transparent;
}

.bk-diff .hljs{
    display:inline-block;
    padding:0;
    background:transparent;
    vertical-align:middle;
    overflow-y:hidden;
  }

.bk-diff .d2h-file-header{
    display:none;
  }

.bk-diff .d2h-file-diff::-webkit-scrollbar{
      width:6px;
      height:5px;
      background-color:rgba(204, 204, 204, 0);
    }

.bk-diff .d2h-file-diff::-webkit-scrollbar-thumb{
      border-radius:2px;
      background-color:#e6e9ea;
    }

.bk-diff .d2h-files-diff{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }

.bk-diff .d2h-files-diff .d2h-file-side-diff{
      -webkit-box-flex:1;
          -ms-flex:1 1 50%;
              flex:1 1 50%
    }

.bk-diff .d2h-files-diff .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper{
          border-left:1px solid #fff;
        }

.bk-diff .d2h-files-diff .d2h-file-side-diff .d2h-code-side-linenumber{
        width:60px;
        padding-right:10px;
      }

.bk-diff .d2h-info{
    background-color:transparent;
  }

.bk-diff .d2h-diff-table td{
      height:20px;
      vertical-align:middle;
      overflow:hidden;
    }

.bk-diff .d2h-file-side-diff::-webkit-scrollbar{
      width:6px;
      height:5px;
      background-color:rgba(204, 204, 204, 0);
    }

.bk-diff .d2h-file-side-diff::-webkit-scrollbar-thumb{
      border-radius:2px;
      background-color:#e6e9ea;
    }

.bk-diff .hljs-comment,
  .bk-diff .hljs-quote{
    color:#c4c6cc;
    font-style:italic;
  }

.bk-diff.dark .d2h-diff-table{
      background:#1d1d1d;
    }

.bk-diff.dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper{
          border-left-color:#313238;
        }

.bk-diff.dark .d2h-code-linenumber,
    .bk-diff.dark .d2h-code-side-linenumber{
      font-size:12px;
      color:#8f8f89;
      border:none;
      background:#212121
    }

.bk-diff.dark .d2h-code-linenumber.d2h-change, .bk-diff.dark .d2h-code-side-linenumber.d2h-change{
        background-color:#dfd;
      }

.bk-diff.dark .d2h-code-linenumber.d2h-emptyplaceholder, .bk-diff.dark .d2h-code-side-linenumber.d2h-emptyplaceholder{
        background:transparent;
      }

.bk-diff.dark .d2h-info{
      color:inherit;
    }

.bk-diff.dark .d2h-del{
      background-color:#422321 !important;
    }

.bk-diff.dark .d2h-del del{
        background:transparent;
      }

.bk-diff.dark .d2h-ins{
      background-color:#2d3324 !important;
    }

.bk-diff.dark .d2h-ins ins{
        background:transparent;
      }

.bk-diff.dark .d2h-emptyplaceholder{
      background-color:#292929 !important;
    }

.bk-diff.dark .hljs{
      color:#979ba5;
    }

.bk-diff.dark .hljs-keyword,
    .bk-diff.dark .hljs-literal,
    .bk-diff.dark .hljs-symbol,
    .bk-diff.dark .hljs-name{
      color:#3a84ff;
    }

.bk-diff.dark .hljs-link{
      color:#569cd6;
      text-decoration:underline;
    }

.bk-diff.dark .hljs-built_in,
    .bk-diff.dark .hljs-type{
      color:#4ec9b0;
    }

.bk-diff.dark .hljs-number,
    .bk-diff.dark .hljs-class{
      color:#b8d7a3;
    }

.bk-diff.dark .hljs-string,
    .bk-diff.dark .hljs-meta-string{
      color:#8f3aff;
    }

.bk-diff.dark .hljs-regexp,
    .bk-diff.dark .hljs-template-tag{
      color:#9a5334;
    }

.bk-diff.dark .hljs-subst,
    .bk-diff.dark .hljs-function,
    .bk-diff.dark .hljs-title,
    .bk-diff.dark .hljs-formula{
      color:#8f3aff;
    }

.bk-diff.dark .hljs-params{
      color:#ea3636;
    }

.bk-diff.dark .hljs-comment,
    .bk-diff.dark .hljs-quote{
      color:#63656e;
      font-style:italic;
    }

.bk-diff.dark .hljs-doctag{
      color:#608b4e;
    }

.bk-diff.dark .hljs-meta,
    .bk-diff.dark .hljs-meta-keyword,
    .bk-diff.dark .hljs-tag{
      color:#9b9b9b;
    }

.bk-diff.dark .hljs-variable,
    .bk-diff.dark .hljs-template-variable{
      color:#bd63c5;
    }

.bk-diff.dark .hljs-attr,
    .bk-diff.dark .hljs-attribute,
    .bk-diff.dark .hljs-builtin-name{
      color:#ff9c01;
    }

.bk-diff.dark .hljs-section{
      color:gold;
    }

.bk-diff.dark .hljs-emphasis{
      font-style:italic;
    }

.bk-diff.dark .hljs-strong{
      font-weight:bold;
    }

.bk-diff.dark .hljs-bullet,
    .bk-diff.dark .hljs-selector-tag,
    .bk-diff.dark .hljs-selector-id,
    .bk-diff.dark .hljs-selector-class,
    .bk-diff.dark .hljs-selector-attr,
    .bk-diff.dark .hljs-selector-pseudo{
      color:#3a84ff;
    }

.bk-diff.dark .hljs-addition{
      background-color:#144212;
      display:inline-block;
      width:100%;
    }

.bk-diff.dark .hljs-deletion{
      background-color:#600;
      display:inline-block;
      width:100%;
    }

.bk-diff.format-line-by-line tbody.d2h-diff-tbody tr:last-child,
      .bk-diff.format-line-by-line tbody.d2h-diff-tbody tr:nth-last-child(2){
        display:none;
      }

.bk-diff.format-side-by-side tbody.d2h-diff-tbody tr:last-child{
        display:none;
      }