1 files changed, 90 insertions, 50 deletions

diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index e2626da7871..8c1b0cd84ec 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -1,20 +1,60 @@
 /* https://github.com/aahan/pygments-github-style */
 .code.white {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: $background-color;
+  }
 
-  background-color: #f8fafc !important;
-  color: #5b6169 !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(0, 0, 0, 0.3);
+  }
 
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color: $background-color !important;
-    color: $gl-gray !important;
+  // Code itself
+  pre.code, .diff-line-num {
+    border-color: $border-color;
   }
 
-  pre.code {
-    border-left: 1px solid $border-color;
-    background-color: #fff !important;
-    color: #333 !important;
+  &, pre.code, .line_holder .line_content {
+    background-color: #fff;
+    color: #333;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num {
+      &.old {
+        background: #fdd;
+        border-color: #f1c0c0;
+      }
+
+      &.new {
+        background: #dbffdb;
+        border-color: #c1e9c1;
+      }
+    }
+
+    .line_content {
+      &.old {
+        background: #ffecec;
+
+        span.idiff {
+          background-color: #f8cbcb;
+        }
+      }
+
+      &.new {
+        background: #eaffea;
+
+        span.idiff {
+          background-color: #a6f3a6;
+        }
+      }
+
+      &.match {
+        color: rgba(0, 0, 0, 0.3);
+        background: #fafafa;
+      }
+    }
   }
 
   // highlight line via anchor
@@ -28,66 +68,66 @@
   }
 
   .hll { background-color: #f8f8f8 }
-  .c { color: #999988; font-style: italic; }
+  .c { color: #998; font-style: italic; }
   .err { color: #a61717; background-color: #e3d2d2; }
   .k { font-weight: bold; }
   .o { font-weight: bold; }
-  .cm { color: #999988; font-style: italic; }
-  .cp { color: #999999; font-weight: bold; }
-  .c1 { color: #999988; font-style: italic; }
-  .cs { color: #999999; font-weight: bold; font-style: italic; }
-  .gd { color: #000000; background-color: #ffdddd; }
-  .gd .x { color: #000000; background-color: #ffaaaa; }
+  .cm { color: #998; font-style: italic; }
+  .cp { color: #999; font-weight: bold; }
+  .c1 { color: #998; font-style: italic; }
+  .cs { color: #999; font-weight: bold; font-style: italic; }
+  .gd { color: #000; background-color: #fdd; }
+  .gd .x { color: #000; background-color: #faa; }
   .ge { font-style: italic; }
-  .gr { color: #aa0000; }
-  .gh { color: #999999; }
-  .gi { color: #000000; background-color: #ddffdd; }
-  .gi .x { color: #000000; background-color: #aaffaa; }
-  .go { color: #888888; }
-  .gp { color: #555555; }
+  .gr { color: #a00; }
+  .gh { color: #999; }
+  .gi { color: #000; background-color: #dfd; }
+  .gi .x { color: #000; background-color: #afa; }
+  .go { color: #888; }
+  .gp { color: #555; }
   .gs { font-weight: bold; }
   .gu { color: #800080; font-weight: bold; }
-  .gt { color: #aa0000; }
+  .gt { color: #a00; }
   .kc { font-weight: bold; }
   .kd { font-weight: bold; }
   .kn { font-weight: bold; }
   .kp { font-weight: bold; }
   .kr { font-weight: bold; }
-  .kt { color: #445588; font-weight: bold; }
-  .m { color: #009999; }
-  .s { color: #dd1144; }
-  .n { color: #333333; }
+  .kt { color: #458; font-weight: bold; }
+  .m { color: #099; }
+  .s { color: #d14; }
+  .n { color: #333; }
   .na { color: teal; }
   .nb { color: #0086b3; }
-  .nc { color: #445588; font-weight: bold; }
+  .nc { color: #458; font-weight: bold; }
   .no { color: teal; }
   .ni { color: purple; }
-  .ne { color: #990000; font-weight: bold; }
-  .nf { color: #990000; font-weight: bold; }
-  .nn { color: #555555; }
+  .ne { color: #900; font-weight: bold; }
+  .nf { color: #900; font-weight: bold; }
+  .nn { color: #555; }
   .nt { color: navy; }
   .nv { color: teal; }
   .ow { font-weight: bold; }
-  .w { color: #bbbbbb; }
-  .mf { color: #009999; }
-  .mh { color: #009999; }
-  .mi { color: #009999; }
-  .mo { color: #009999; }
-  .sb { color: #dd1144; }
-  .sc { color: #dd1144; }
-  .sd { color: #dd1144; }
-  .s2 { color: #dd1144; }
-  .se { color: #dd1144; }
-  .sh { color: #dd1144; }
-  .si { color: #dd1144; }
-  .sx { color: #dd1144; }
+  .w { color: #bbb; }
+  .mf { color: #099; }
+  .mh { color: #099; }
+  .mi { color: #099; }
+  .mo { color: #099; }
+  .sb { color: #d14; }
+  .sc { color: #d14; }
+  .sd { color: #d14; }
+  .s2 { color: #d14; }
+  .se { color: #d14; }
+  .sh { color: #d14; }
+  .si { color: #d14; }
+  .sx { color: #d14; }
   .sr { color: #009926; }
-  .s1 { color: #dd1144; }
+  .s1 { color: #d14; }
   .ss { color: #990073; }
-  .bp { color: #999999; }
+  .bp { color: #999; }
   .vc { color: teal; }
   .vg { color: teal; }
   .vi { color: teal; }
-  .il { color: #009999; }
-  .gc { color: #999; background-color: #EAF2F5; }
+  .il { color: #099; }
+  .gc { color: #999; background-color: #eaf2f5; }
 }