diff_view.scss

/*
 * Styles for the diff views.
 */
@import "css/mixins";
#commit {
  $commitFontFamily: 14px / 16px $monoFont;

  text-align: center;
  #center > * { text-align: left; }

  #marginSizing {
    width: 1px;
    font: $commitFontFamily;
  }

  #commitMetadata {
    @include display-box;
    @include embossedPanel;
    box-shadow: none;

    width: $pageWidth - 2 * 10 - 2;
    margin: 23px auto 0px auto;
    padding: 10px;
    font-size: 0.8em;

    // commitMetadata should appear above the reviewRequest box
    // so the "roll up" action hides the reviewRequest behind commitMetadata.
    position: relative;
    z-index: 2;

    #messageAndAuthor {
      @include box(vertical);
      width: 730px;

      #messageMetadata {
        @include box(vertical);
        @include box-flex(1);

        .name {
          margin-bottom: 10px;
            color: $lightTextColor;
          .repoName { font: 16px $sansFont; }
          .sha { font: 14px $monoFont; }
        }

        .message {
          margin-bottom: 10px;
          font: $commitFontFamily;
        }

      }

      #authorMetadata {
        @include display-box;
        display: block;

        .avatar {
          @include gravatar(50px);
          margin-right: 5px;
        }

        .authorInfo {
          display: inline-block;
          vertical-align: middle;
          line-height: 1.25em;

          .email, .date { color: $lightTextColor; }
        }
      }
    }

    #metadataButtons {
      @include box(vertical, center, end);
      @include box-flex(1);

      #approvalGroup { width: 160px; }

      button {
        width: 100%;
        display: block;
        font-size: 14px;
        white-space: nowrap;
      }

      #disapproveButton { margin-bottom: 8px; }

      #approveButton {
        margin-bottom: 40px;

        /* These styles were taken from our "fancy button" style definition. Only the color is different. */
        $greenApproveButton: #42C050;

        border: 1px solid darken($greenApproveButton, 20%);
        /* This darker border helps distinguish the drop shadow. */
        border-bottom: 1px solid darken($greenApproveButton, 25%);
        text-shadow: 0px -1px 1px darken($greenApproveButton, 30%);

        @include linear-gradient(lighten($greenApproveButton, 3%) 0%, darken($greenApproveButton, 15%) 95%,
            $fallback: darken($greenApproveButton, 18%));

        &:hover {
          border: 1px solid darken(#890128, 25%);
          @include linear-gradient(lighten($greenApproveButton, 10%) 0%, darken($greenApproveButton, 15%) 95%,
            $fallback: darken($greenApproveButton, 18%));
        }

        &:active { background-image: none; }
      }

      .approvedBy, .approvedAt {
        color: $lightTextColor;
        text-align: center;
        font-size: 12px;
        margin-bottom: 4px;
      }

      #minorButtons {
        @include box(vertical, end);
        @include box-flex(1);

        button {
          font-size: 11px;
          width: 132px;
          margin-top: 8px;
        }
      }
    }
  }

  #reviewRequestContainer {
    width: $pageWidth;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    #reviewRequest {
      @include raisedPanel;
      position: absolute;
      left: ($pageWidth - 600px) / 2;
      top: -100px;
      width: 600px;
      min-height: 100px;
      text-align: center;
      font-size: 14px;
      display: none;

      div { margin: 50px 30px 30px 30px; }

      #requestInput {
        #authorInput {
          width: 300px;
          height: 19px;
          margin-left: 5px;
        }

        button {
          display: inline-block;
          margin-left: 5px;
          padding: 4px;
        }
      }

      #requestSubmitted {
        display: none;
        color: green;
      }
    }
  }

  #commitSummary {
    margin: 25px auto;
    width: $pageWidth;

    #filesChanged {
      font: 14px $monoFont;

      border-collapse: collapse;
      width: 100%;

      th {
        font: 14px $sansFont;
        font-weight: bold;
        text-align: center;
      }
      tr.total {
        font-weight: bold;
        td.path { text-align: right; }
      }
      td {
        border-top: $standardBorder;
        padding: 3px 5px 1px 5px;
        list-style: none;
        &.path { width: 100%; }
        &.linesAdded, &.linesRemoved {
          padding: 0 10px;
          text-align: right;
        }
        &.linesAdded { color: #58BC0F; }
        &.linesRemoved { color: #E11D1E; }
        a {
          color: $lightTextColor;
          &:active { background: none; }
        }
      }
    }
  }

  .dataWrapper {
    //relative position here to anchor the codeRight element that has absolute position
    position: relative;
    width: 100%;
    background-color: $almostWhite;
    .data {
      width: 100%;
      border-collapse: collapse;
    }
    .codeLeft, .codeRight {
      left: 0px;
      overflow-x: auto;
    }

    //right side table for code is not diplayed initially, javascript will show it for side-by-side view
    .codeRight {
      position: absolute;
      display: none;
      top: 0px;

      .rightNumber {
        border-left: $standardBorder;
      }
    }
  }

  .filename {
    padding: 5px;
    background-color: $sunkenColor;
    border-bottom: $standardBorder;
    font: 14px $monoFont;
    a {
      color: $lightTextColor;
      &:active { background: none; }
    }
  }

  .file {
    @include embossedPanel;
    $commentWidth: 850px;

    .commentContainer {
      width: 100%;
      background-color: $almostWhite;
      z-index: 10;
      position: relative;
    }
    // The styles for inline comments are slightly different than general comments: they have no left border.
    .comment, .commentForm, .commentEditForm {
      width: $commentWidth;
      border-left: 0;
      margin-right: auto;
      textarea { width: $commentWidth - 2px; }
      .commentBody {
        img { max-width: 839px; }
        img.emoji {
          max-width: 100%;
          display: inline;
        }
      }
    }

    // The comment edit form, unlike general comment form, lives inside a comment div, so no margins needed.
    .commentEditForm {
      margin: 0;
    }
  }

  // Style tweaks only for side-by-side view.
  .file.sideBySide {
    $commentWidth: 780px;
    .comment, .commentForm, .commentEditForm {
      width: $commentWidth;
      textarea { width: $commentWidth - 2px; }
    }
  }

  .comment, .commentForm, .commentEditForm {
    @include raisedPanel;
    background-color: $almostWhite;
    font-size: 0.8em;
    width: $pageWidth - 2px;

    textarea {
      resize: vertical;
      min-height: 100px;
      width: $pageWidth - 4px;
      font: 14px $sansFont;
      border: 0;
      border-bottom: $standardBorder;
      box-shadow: 0 1px 0 white;
      padding-top: 3px;
      padding-left: 2px;
      /* Turn off Safari's heavy themed blue outline of focused textfields. */
      outline: 0;
      code, pre { font: $commitFontFamily; }
    }

    .commentPreviewText {
      border-bottom: $standardBorder;
      display: none;
    }

    .heading {
      .avatar { @include gravatar(25px); }
      color: $lightTextColor;
      padding: 5px;
      position: relative;

      @include linear-gradient($sunkenColor 0%, darken($sunkenColor, 10%) 95%);

      background-color: $sunkenColor;
      .addAComment, .name {
        font-weight: bold;
        color: #333333;
      }
      .name.deleted {
        color: #888;
        span { font-weight: normal; }
      }

      .permalink a { color: $lightTextColor; }

      .date { color: #666; }

      .buttonContainer {
        position: absolute;
        top: 4px;
        right: 4px;
        button { height: 30px; }
      }
    }

    .commentBody {
      padding: 8px 5px 0 5px;
      line-height: 1.5em;

      p, div, ol, ul { margin-bottom: 8px; }

      // Prevents red backgrounds on images that are links
      a { display: inline-block; }

      img {
        display: block;
        max-width: $pageWidth - 10px;
      }
      img.emoji {
          max-width: 100%;
          display: inline;
      }
      ul, ol { margin-left: 20px; }
      blockquote {
        border-left: 5px solid lighten($lightTextColor, 30%);
        padding-left: 4px;
        color: $lightTextColor;
      }

      code {
        display: inline;
        padding: 0 2px;
        font: $commitFontFamily;
        background: #F0EEEA;
      }

      pre {
        font: $commitFontFamily;
        overflow-x: auto;
        // Prevent any vertical scrollbar from being show.
        overflow-y: hidden;
      }

      .commentCode {
        padding: 5px;
        background: #F0EEEA;
        border: $standardBorder;
      }
    }

    .commentControls {
      margin: 10px 0;
      width: 100%;
      @include box(horizontal, end);
      .buttonSpacer {
        @include display-box;
        @include box-flex(1);
        @include box-ordinal-group(1);
        margin-left: 10px;
      }
      .commentCancel {
        @include display-box;
        @include box-ordinal-group(2);
        margin-right: 3px;
      }
      .commentSubmit {
        @include display-box;
        @include box-ordinal-group(3);
        margin-right: 10px;
      }
    }
  }

  // Comment edit form is not a panel, so doesn't need panel CSS
  .commentEditForm {
    margin: 0;
    border-left: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .fileSpecial {
    font: 14px $sansFont;
    text-align: center;
    padding: 5px;
    font-style: italic;
  }
  .contextExpander {
    font-size: 14px;
    background-color: $sunkenColor;
    color: $lightTextColor;
    &:not(.topExpander) { border-top: $standardBorder; }
    &:not(.bottomExpander) { border-bottom: $standardBorder; }
    td {
      position: relative;
      .expandEllipsisContainer {
        text-align: right;
        display: inline-block;
        font-size: 12px;
        width: 470px;
      }
      .expandContainer {
        text-align: right;
        display: none;
        &.incrementalExpansion { width: 600px; }
        &:not(.incrementalExpansion) { width: 485px; }
        span.expandLink {
          &:hover { text-decoration: underline; }
          cursor: pointer;
          color: $linkColor;
        }
      }
    }
  }

  .diffLine {
    &:not(.chunk) { display: none; }
    &.selected {
      .code .codeContainer {
        .removed, .same, .added { background-color: #FFC; }
      }
      .code .addCommentButton { opacity: 1; }
    }

    &.spacingLine { background-color: $sunkenColor; }

    .lineNumber {
      @include user-select(none);
      font: 14px $monoFont;
      background-color: $sunkenColor;
      color: $lightTextColor;
      border-right: $standardBorder;
      padding: 0 5px;
      vertical-align: text-top;
      width: 3ex;
      min-width: 3ex;

      div {
        text-align: right;
        margin-right: 0px;
      }
    }

    .code {
      display: block;
      .codeContainer {
        position: relative;
        .marginLine {
          height: 100%;
          position: absolute;
          top: 0px;
          // This value is just a guess; it will be adjusted in JS.
          left: 820px;
          right: 0px;
          border-left: 1px solid black;
          background-color: #333;
          // The margin line will be made visible after it is sized in JS.
          opacity: 0;
        }
        .removed { background-color: #fce2e2; }
        .added { background-color: #e2fce2; }
      }
      .addCommentButton {
        opacity: 0;
        @include transition(opacity 0.1s linear);
        background-image: url(/assets/images/left_comment_bubble.png);
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        margin-left: -20px;
        width: 20px;
        z-index: 0;

        &:hover { background-image: url(/assets/images/red_left_comment_bubble.png); }
      }

      .diffCommentCount {
        background-repeat: no-repeat;
        position: absolute;
        left: $pageWidth + 4px;
        width: 40px;
        font-size: 14px;

        a:active { background:none; }
        a {
          text-decoration: none;
          color: $textColor;
          border: 0;
        }
        a:hover {
          color: $textColor;
        }

        span {
          font-size: 80%;
          color: $lightTextColor;
        }
      }

    }

    pre {
      padding-bottom: 2px;
      font: $commitFontFamily;
    }
  }

  #signinPrompt {
    text-align: center;
    width: $pageWidth;
  }
}

.commentContainer {
  width: $pageWidth;
  margin: 0 auto;
  padding: 8px 0px;
}