Pretty highlighted diffs for every theme

5 files changed, 37 insertions, 20 deletions

diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 3ba2cc94ad2..8464727de9d 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(51, 255, 51, #808080);
+      @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(255, 51, 51, #808080);
+      @include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.2), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index b47aef73d2b..516d8aef960 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #f8f8f2;
+    color: rgba(255, 255, 255, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(156, 175, 183, #808080);
+      @include diff_background(rgba(166, 226, 46, 0.2), rgba(166, 226, 46, 0.3), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(254, 147, 140, #808080);
+      @include diff_background(rgba(254, 147, 140, 0.2), rgba(254, 147, 140, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 0aab580bd3c..ae7ecc65c39 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #93a1a1;
+    color: rgba(255, 255, 255, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(255, 255, 255, #808080);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(255, 51, 51, #808080);
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 3aaadcd0f96..1c138572145 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #586e75;
+    color: rgba(0, 0, 0, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(92, 164, 169, #FAF3DD);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #FAF3DD);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(237, 106, 90, #FAF3DD);
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #FAF3DD);
+    }
+
+    .line_content.match {
+      color: rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.4);
     }
   }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 06d0ece1c66..5215df04a6e 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -353,17 +353,14 @@
   }
 }
 
-@mixin diff_background($r, $g, $b, $custom-border) {
-  /* Fallback for web browsers that doesn't support RGBa */
-  background: rgb($r, $g, $b);
-  /* RGBa with 0.3 opacity */
-  background: rgba($r, $g, $b, 0.3);
+@mixin diff_background($background, $idiff, $border) {
+  background: $background;
 
-  &.diff-line-num {
-    border-right-color: $custom-border !important;
+  &.line_content span.idiff {
+    background: $idiff;
   }
 
-  &.line_content span.idiff {
-    background: rgb($r, $g, $b);
+  &.diff-line-num {
+    border-color: $border;
   }
 }