@import (reference) "../defs.less";


@img_base: '../../images';


/*
 * The .diff-changes-* rules are used only within JavaScript code to
 * figure out the colors used to display the file complexity icons.
 */
.diff-changes-icon-insert {
  color: @diff-insert-dot-color;
}

.diff-changes-icon-replace {
  color: @diff-replace-dot-color;
}

.diff-changes-icon-delete {
  color: @diff-delete-dot-color;
}


.sidebyside {
  @diff-cell-padding: 1px;
  @linenum-padding-right: 4px;
  @linenum-padding-left: 2px;

  /*
   * Most of the moved range border sits on the line number cell as a
   * border-right, and part sits on the content cell as a border-left. This
   * gives us a full 4px, which is nicely visible, while allowing us to keep
   * a reasonable padding in both types of cells, without also needing to
   * press any text right up against the border.
   */
  @moved-border-right-width: 3px;
  @moved-border-left-width: 1px;

  background: white;
  border-collapse: separate;
  border-spacing: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;

  // This fixes an annoying 1px bright line between the bottom of the
  // side-by-side diff view and the bottom border of the roundrect it's
  // contained within.
  margin-bottom: -1px;

  &.diff-error {
    td {
      background: @diff-error-color;
      padding: 1em;

      a:not(.btn) {
        color: blue;
        font-weight: bold;
      }

      h2 {
        font-size: 10pt;
        margin: 0em 0 2em 0;
        padding: 0;

        .rb-icon {
          vertical-align: text-bottom;
        }
      }
    }

    .error-details {
      display: none;

      pre {
        background: white;
        border: 1px #999 solid;
        padding: 1em;
      }

      td {
        padding-top: 0;
      }
    }

    .revision-row th {
      padding-left: 4em;
    }
  }

  &.newfile {
    col {
      &.left {
        width: 0%;
      }

      &.right {
        width: 100%;
      }
    }

    td .diff-collapse-btn {
      right: 50%;
    }
  }

  &.selecting-col-1:not(.newfile) {
    td.r {
      &, * {
        .unselectable();
      }
    }
  }

  &.selecting-col-3 {
    td.l {
      &, * {
        .unselectable();
      }
    }
  }

  a {
    color: black;
    text-decoration: none;
  }

  col {
    &.left {
      width: 50%;
    }

    &.right {
      width: 50%;
    }

    &.line {
      width: 1%; /* Make sure this doesn't stretch if the header stretches. */
    }
  }

  img.header-file-icon {
    vertical-align: middle;
  }

  pre {
    font-size: 8pt;
    line-height: 140%;
    margin: 0;
    padding-left: @linenum-padding-left;

    /*
     * We ideally want break-spaces, which behaves like pre-wrap but will break
     * in the middle of whitespace. Not all browsers support this, so we have
     * to fall back.
     */
    white-space: pre-wrap;
    white-space: break-spaces;

    /*
     * overflow-wrap is the modern name, but some browsers need word-break
     * to work right. Edge, IE, and Safari, for instance, do not support this or
     * treat it correctly at the time of this writing (April 11, 2017). Guides
     * suggest specifying both, so we're specifying both.
     */
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .indent {
    color: #A3CCA3;
  }

  .unindent {
    color: #CCA3A3;
  }

  .moved-row-start {
    pre {
      margin-top: 4px;
    }
  }

  .moved-row td {
    &.moved-from, &.moved-to {
      border-left-width: @moved-border-left-width;
      border-left-style: solid;

      pre {
        padding-left: @linenum-padding-left - @moved-border-left-width;
      }
    }

    &.moved-from {
      border-left-color: @diff-moved-from-bg-color;
    }

    &.moved-to {
      border-left-color: @diff-moved-to-bg-color;
    }
  }

  .moved-row th {
    &.moved-from, &.moved-to {
      border-right-width: @moved-border-right-width;
      border-right-style: solid;
      padding-right: @linenum-padding-right - @moved-border-right-width;
    }

    &.moved-from {
      border-right-color: @diff-moved-from-bg-color;
    }

    &.moved-to {
      border-right-color: @diff-moved-to-bg-color;
    }
  }

  .moved-to .moved-flag {
    background-color: @diff-moved-to-bg-color !important;
  }

  .moved-from .moved-flag {
    background-color: @diff-moved-from-bg-color !important;
  }

  .moved-flag {
    background-color: inherit !important;
    display: inline-block;
    font-size: 7pt;
    padding: 0;

    /*
     * We need to compensate for some spacing in the cells. The TD for the
     * cell is @diff-cell-padding around the sides, which is simple.
     *
     * We need to offset a bit more on the left to compensate for the border.
     * Parent cells have different border colors and widths above and to the
     * side, which creates a diagonal. This means there's what appears to be
     * a gap between the moved range line and the flag. We cover that up by
     * moving the flag over the left a bit.
     */
    margin: -@diff-cell-padding -@diff-cell-padding @diff-cell-padding
            -(@diff-cell-padding + @moved-border-right-width);
  }

  .moved-to-start, .moved-from-start {
    padding-top: 0;

    .moved-flag {
      border-radius: 0, 8px, 8px, 0;
      padding: 3px 1em 3px 0.5em;
    }
  }

  tbody {
    tr {
      &.selected {
        * {
          background: @diff-selected-color;
        }

        td .diff-collapse-btn {
          background: #E4D9CB;
        }
      }

      &.first {
        td, th {
          border-top: 1px @diff-line-border-color solid;
        }
      }

      &.highlight-anchor {
        td, th {
          background: @diff-highlight-color;
        }
      }

      td {
        background: @diff-background-color;
        padding: @diff-cell-padding;
        vertical-align: top;

        .collapse-floater {
          position: relative;
        }

        .diff-collapse-btn {
          @image-size: 14px;

          background: #E4D9CB;
          border: 1px black solid;
          padding: 5px;
          cursor: pointer;
          position: absolute;
          right: -8px;
          z-index: @z-index-diff-collapse-btn;
          opacity: 0.8;
          width: @image-size;
          height: @image-size;

          &:hover {
            opacity: 1.0;
          }
        }
      }

      th {
        color: @diff-linenum-color;
        font-weight: normal;
        background: @diff-linenum-background-color;
        cursor: pointer;
        padding-left: 1em;
        padding-right: @linenum-padding-right;
        text-align: right;
        vertical-align: top;

        /*
         * The minimum width is calculated so that the th is always as wide as
         * the expand by 20 lines button, which is 28px wide.
         */
        min-width: calc(28px - 1em - @linenum-padding-right);

        .unselectable();
      }
    }

    &.whitespace-file td {
      background: @diff-replace-color;
      border-bottom: 1px @diff-file-border-color solid;
      padding: 1em;
    }

    &.deleted td {
      background: @diff-delete-color;
      padding: 1em;

      a {
        color: #0000FF;
        text-decoration: underline;
      }
    }

    &.new-empty-file td {
      background: @diff-insert-color;
      padding: 1em;
    }

    &.no-changes td {
      padding: 1em;
    }

    &.binary {
      .inline-actions-header {
        background: @inline-actions-bg;
        border-bottom: 1px @diff-file-border-color solid;

        td {
          padding: 0;

          &:first-child {
            border-right: 1px @diff-line-border-color solid;
          }
        }
      }

      .inline-actions-right, .inline-actions-left {
        li {
          border-radius: 0;

          &:hover {
            background-color: @inline-actions-hover-bg;
          }
        }
      }

      .inline-actions-right {
        float: right;

        a {
          border-left: 1px @diff-file-border-color solid;
        }
      }

      .inline-actions-left {
        float: left;

        a {
          border-right: 1px @diff-file-border-color solid;
          border-left: 0px;
        }
      }

      .inline-files-container {
        td {
          &:first-child {
            border-right: 1px @diff-line-border-color solid;
          }

          &.diff-review-ui {
            padding: 0;
          }
        }
      }

      .file-thumbnail-container {
        margin: 0;
        overflow: hidden;
        padding: 1em;
        text-align: center;
        white-space: nowrap;
      }

      p {
        margin: 0;
        padding: 4px;
      }

      td {
        padding: 1em;
      }
    }

    &.delete {
      /*
       * Use the delete border colors for this chunk and for the top of the
       * following chunk. The delete border is darker than the borders of other
       * types of chunks, and contrasts much better with the delete background
       * color, so we always want it used for the top of the next diff row.
       */
      & tr,
      + tbody.equal tr.first,
      + tbody.delete tr.first,
      + tbody.insert tr.first,
      + tbody.replace tr.first {
        td {
          border-color: @diff-delete-border-color;
        }

        th {
          border-color: @diff-delete-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-delete-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-delete-color;
        }

        th {
          background: @diff-delete-linenum-color;
        }
      }
    }

    &.equal {
      /*
       * Don't include a border for adjacent equals chunks. This will happen
       * when expanding diffs, and is specific to equals.
       */
      + tbody.equal tr.first {
        td, th {
          border-top: 0;
        }
      }
    }

    &.insert {
      /*
       * Use the insert border colors for this chunk and the top of a
       * following equal or replace chunks. The insert border color better
       * contrasts with the green than the border colors of the equal or
       * replace chunks. We don't want this for deletes.
       */
      & tr,
      + tbody.equal tr.first,
      + tbody.replace tr.first {
        td {
          border-color: @diff-insert-border-color;
        }

        th {
          border-color: @diff-insert-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-insert-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-insert-color;
        }

        th {
          background: @diff-insert-linenum-color;
        }
      }
    }

    &.replace {
      /*
       * Use the replace border colors for this chunk and the top of a
       * following equal chunk.
       */
      & tr,
      + tbody.equal tr.first {
        td {
          border-color: @diff-replace-border-color;
        }

        th {
          border-color: @diff-replace-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-replace-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-replace-color;
        }

        th {
          background: @diff-replace-linenum-color;
        }
      }

      &.dimmed {
        background: #FFFFFF;

        .hl { background: #FFFFFF; }
        th { background: #F0F0F0; }
      }

      .hl { background: #eff23d; }
    }

    &.diff-header {
      + tbody {
        td, th {
          border-top: 0;
        }
      }

      a {
        text-decoration: none;
        color: black;
      }

      code {
        margin: 0 2px;
      }

      img {
        vertical-align: middle;
        padding: 1px;
      }

      td {
        background: @diff-header-color;
        font-size: x-small;
        text-align: center;
      }

      th {
        background: @diff-header-color;
      }

      tr {
        &:first-child {
          td, th {
            border-top: 1px darken(@diff-header-color, 10%) solid;
          }
        }

        &:last-child {
          td, th {
            border-bottom: 1px darken(@diff-header-color, 10%) solid;
          }
        }
      }
    }
  }

  thead {
    /*
     * Remove the top border on the diff header or chunk following the file
     * header, so that the file header's border takes precedence.
     */
    + tbody {
      tr.first, tr:first-child {
        td, th {
          /*
           * Ideally we wouldn't use !important, but we otherwise need to
           * have this rule for each type of tbody, which we don't want.
           */
          border-top: 0 !important;
        }
      }
    }

    th {
      background: @diff-file-color;
      font-size: 120%;
      font-weight: bold;
      text-align: left;
      text-overflow: ellipsis;
    }

    .filename-row th {
      overflow: hidden;
      padding: 8px;

      #gradient > .vertical-three-colors(#FFFFFF, @diff-file-color, 50%, @diff-file-color);
    }

    .revision-row th {
      border-bottom: 1px @diff-file-border-color solid;
      font-size: 100%;
      font-weight: normal;
      padding: 8px 0;

      &.revision-col {
        overflow: hidden;
      }

      .rb-icon {
        vertical-align: text-top;
      }
    }
  }

  thead th.controls,
  th.controls {
    font-size: 100%;
    font-weight: normal;
    padding: 2px 0 2px 2px;
    vertical-align: top;
  }
}

.commentflag {
  border-radius: @comment-flag-border-radius;
  display: none;
  left: -0.7em;
  margin-top: -0.3em;
  position: absolute;
  width: 1.6em;

  .commentflag-shadow {
    border-radius: @comment-flag-border-radius;
    opacity: 0.1;
    background-color: black;
    border: 1px solid black;
    bottom: 0;
    left: 0.2em;
    position: absolute;
    right: 0;
    top: 0.2em;
    width: 100%;
  }

  .commentflag-inner {
    border-radius: @comment-flag-border-radius;
    opacity: 0.95;
    background-color: @comment-flag-color;
    border: 1px solid @comment-flag-border-color;
    bottom: 0.2em;
    cursor: pointer;
    font-size: 90%;
    font-weight: normal;
    left: 0;
    line-height: 1.7em;
    position: absolute;
    right: 0.2em;
    text-align: center;
    top: 0;
    vertical-align: top;
    width: 100%;
    z-index: @z-index-deco;

    span {
      background: transparent !important;
      .unselectable();
    }
  }
}

.selected .commentflag .commentflag-inner {
  background-color: @comment-flag-color;
}

.selected .commentflag .commentflag-inner,
.commentflag .commentflag-inner:hover {
  background-color: @comment-flag-hover-color;
}

.commentflag.draft .commentflag-inner {
  background-color: @comment-flag-draft-color;
  border-color: @comment-flag-draft-border-color;
}

.selected .commentflag.draft .commentflag-inner,
.commentflag.draft .commentflag-inner:hover {
  background-color: @comment-flag-draft-hover-color;
}

.ghost-commentflag {
  cursor: pointer;
  position: absolute;
  left: 0.1em;
  margin-top: -0.1em;
  height: 21px;

  .commentflag-inner {
    background-color: @comment-flag-ghost-color;
    border-color: @comment-flag-ghost-border-color;
  }
}

#diffs {
  list-style: none;
  margin: 0;
  padding: 0;

  /* Allows highlight chunks to be absolute relative to this. */
  position: relative;

  div.index ol {
    margin-bottom: 20px;
    padding-left: 30px;
  }

  .diff-container {
    margin-bottom: 1em;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .diff-box {
    border: 1px @diff-border-color solid;
    border-radius: @box-border-radius;
    box-shadow: @box-shadow;
    overflow: hidden;
  }

  .diff-highlight {
    background-color: rgba(0, 0, 255, 0.2);
    display: block;
    font-size: 0; /* Prevents the 13px minimum height in IE6 */
    position: absolute;
    left: 0;
    top: 0;
  }
}

#diff_index,
.diff-index {
  @icon-size: 20px;
  @icon-offset: 2px;

  border: 1px #BBB solid;

  table {
    padding: 0;
    border-collapse: collapse;
    width: 100%;

    tr {
      &:first-child td {
        border-top: 0;
      }
    }

    td {
      background: #FDFDFD;
      padding: 0.6em;
      margin: 0;
      border-top: 1px #DDD solid;
      vertical-align: top;

      &.diff-chunks-cell {
        color: #888;
        text-align: right;
        width: 70%;
      }

      &.diff-file-icon {
        padding: @icon-offset 0 0 @icon-offset;

        .rb-icon {
          width: @icon-size;
          height: @icon-size;
        }

        .fa-spinner {
          font-size: @icon-size - 4px;
          margin: 2px;
        }
      }

      &.diff-file-info {
        padding-left: 0.3em;
        white-space: nowrap;
        width: 30%;

        .diff-file-rename {
          color: #888;
          display: block;
          font-size: 90%;
          font-style: italic;
          padding: 1em 0 0 0;
        }
      }

      a {
        color: blue;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }

        &.dimmed {
          color: #ABABAB;
        }
      }

      .diff-chunks {
        max-height: 2.5em;
        overflow: hidden;
        text-align: right;

        a {
          border-radius: 50%;
          display: inline-block;
          margin: 3px 2px 0 2px;
          width: 8px;
          height: 8px;

          &.insert {
            background-color: @diff-insert-dot-color;
          }

          &.delete {
            background-color: @diff-delete-dot-color;
          }

          &.replace {
            background-color: @diff-replace-dot-color;
          }
        }
      }
    }
  }
}


/****************************************************************************
 * Diff information
 ****************************************************************************/
#diff-details {
  border-spacing: 8px;

  &.loading {
    #diff_index {
      background: white;
      font-size: 16px;
      height: 16px;
      padding: @box-padding;
    }
  }

  #diff_revision_label h1 {
    color: @review-request-label-color;
    font-size: 120%;
    margin: 0;
    padding: 0;
  }

  .main {
    padding: 1em;

    h1, p {
      margin: 1em 0;
      padding: 0;
    }
  }
}

.revision-selector-grabbed,
.revision-selector-grabbed * {
  cursor: grabbing !important;
}

.revision-selector {
  margin: 3em 1.5em 1.5em 1.5em;
  position: relative;

  .revision-selector-trough {
    border-bottom: 1px solid black;
  }

  .revision-selector-tick {
    position: absolute;
    top: -8px;
    height: 16px;
    border-left: 1px solid black;
  }

  .revision-selector-label {
    position: absolute;
    top: -26px;

    .user-select(none);

    &.revision-selector-label-active {
      cursor: pointer;
    }
  }

  .revision-selector-handle {
    position: absolute;
    top: -9px;
    z-index: 2;
    cursor: grab;
  }

  .revision-selector-range {
    position: absolute;
    background-color: grey;
    top: -1px;
    height: 4px;
    z-index: 1;
  }
}


/****************************************************************************
 * Comments hint
 ****************************************************************************/
.comments-hint li {
  &.current {
    font-weight: bold;
  }

  &:not(.current) {
    color: @link-color;
    text-decoration: underline;
    cursor: pointer;
  }
}


/****************************************************************************
 * Pagination
 ****************************************************************************/
.paginate-link,
.paginate-current {
  padding: 2px 4px;
  border: 1px solid @paginate-border-color;
}

.paginate-current {
  background: @paginate-bg-color;
  color: @paginate-text-color;
  font-weight: bold;
}

#pagination2 {
  margin-top: 1em;
}

// vim: set et ts=2 sw=2:
