Merge branch 'diff-line-colors' into 'master'

Update diff blue & yellow to match design

<img src="/uploads/60e1351fb04ab1c8969685fbc8b61c88/Screen_Shot_2016-04-22_at_9.12.17_AM.png" width="500px">
<img src="/uploads/6812b22ec53f3041811261daa0584822/Screen_Shot_2016-04-22_at_9.12.05_AM.png" width="500px">

See merge request !3883

3 files changed, 16 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index f0ec250de2b..29501069d27 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -11,7 +11,7 @@
     border-bottom: 1px solid $border-white-light;
 
     &:target {
-      background: $row-hover;
+      background: $line-target-blue;
     }
 
     .avatar {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 30ca27ab104..ef37ade3b7b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -168,8 +168,12 @@ $line-removed: #fbe9eb;
 $line-removed-dark: #fac5cd;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
+$line-number-select: #fbf2da;
 $match-line: #fafafa;
 $table-border-gray: #f0f0f0;
+$line-target-blue: #eaf3fc;
+$line-select-yellow: #fcf8e7;
+$line-select-yellow-dark: #f0e2bd;
 /*
  * Fonts
  */
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 1ff6ad75e07..31a4e3deaac 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -21,11 +21,6 @@
 
   // Diff line
   .line_holder {
-    td.diff-line-num.hll:not(.empty-cell),
-    td.line_content.hll:not(.empty-cell) {
-      background-color: #f8eec7;
-      border-color: darken(#f8eec7, 15%);
-    }
 
     .diff-line-num {
       &.old {
@@ -37,11 +32,16 @@
         background-color: $line-number-new;
         border-color: $line-added-dark;
       }
+
+      &.hll:not(.empty-cell) {
+        background-color: $line-number-select;
+        border-color: $line-select-yellow-dark;
+      }
     }
 
     .line_content {
       &.old {
-        background: $line-removed;
+        background-color: $line-removed;
 
         span.idiff {
           background-color: $line-removed-dark;
@@ -58,7 +58,11 @@
 
       &.match {
         color: $black-transparent;
-        background: $match-line;
+        background-color: $match-line;
+      }
+
+      &.hll:not(.empty-cell) {
+        background-color: $line-select-yellow;
       }
     }
   }