hugopl/reviewit

.code-review-header {
  width: 100% !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  text-align: center;
  font-weight: bold;
  span {
    font-family: monospace;
  }

  .js-toggle-diff {
    cursor: pointer;
  }
}

.js-trigger-ci {
  cursor: pointer;
}

.comment-controls {
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: auto;
}

.editor-box {
  margin-top: 5px;
}

span.js-tada {
  display: inline-block;
}

.merge-bar {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: right;
}

table.code-review {
  border-top: none !important;
  margin-top: 0px !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
/*  overflow-x: scroll;*/

  .binary-image {
    text-align: center;
    background-color: white;
    background-image: linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray),
                      linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
  }

  .del {
    background: #FFF6F6;
    background-color: #fdd;
    .line {
      background-color: #fcc;
      border-right-color: #e7baba;
    }
  }

  .add {
    background-color: rgb(252, 255, 245);
    background-color: #e6ffed;
    .line {
      background-color: #cdffd8;
      border-right-color: #b9e7b9;
    }
  }

  tr > td.line:first-child {
    border-right: none;
  }

  .line {
    color: rgba(27,31,35,.3);
  }

  .info {
    color: #ccc;
    background-color: #fafafa;
  }

  td {
    border-top: none !important;
    padding: 0px 6px 0px 6px !important;
  }

  tr.comments td {
    border-top: 1px solid rgba(34, 36, 38, 0.1) !important;
    border-bottom: 1px solid rgba(34, 36, 38, 0.1) !important;
  }

  td.add-comment {
    border-top: 1px solid rgba(34, 36, 38, 0.1) !important;
    border-bottom: 1px solid rgba(34, 36, 38, 0.1) !important;
  }

  tr.comments + tr > td.add-comment {
    border-top: none !important;
  }

  .line {
    font-family: monospace;
    background-color: whitesmoke;
    border-right: 1px solid #ccc;
    text-align: right;
  }

  .code {
    font-family: monospace;
    white-space: pre-wrap;
  }

  // Add comment button
  td > .js-add-comment {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    color: #276f86;
    visibility: hidden;
    margin-left: -16px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.1s ease-in-out;

    &:hover {
      transform: scale(1.5, 1.5);
    }
  }

  tr[data-location]:hover {
    > td > .js-add-comment {
     visibility: visible;
    }
  }

  tr[class=info]:hover {
    > td > .js-add-comment {
      visibility: hidden;
    }
  }
}

.text.markdown pre, .editor-preview pre {
  background-color: white;
  border: 1px dashed lightgrey;
  border-radius: 4px;
  overflow-x: auto;
  padding: 4px;
}

.text.markdown code, .editor-preview code {
  background-color: white;
  border: 1px dashed lightgrey;
  border-radius: 4px;
}

.text.markdown pre code, .editor-preview pre code {
  border: none;
  background: none;
}

#mr-form .ui.comments {
  max-width: none;
}