Merge branch 'diff-email-css' into 'master'

Reduced diff email CSS

## What does this MR do?

Reduces the amount of inline CSS on the diff emails.

## What are the relevant issue numbers?

#15178 

See merge request !5203

1 files changed, 19 insertions, 61 deletions

diff --git a/app/assets/stylesheets/mailers/repository_push_email.scss b/app/assets/stylesheets/mailers/repository_push_email.scss
index 7f645d3089d..33aedf1f7c1 100644
--- a/app/assets/stylesheets/mailers/repository_push_email.scss
+++ b/app/assets/stylesheets/mailers/repository_push_email.scss
@@ -10,83 +10,48 @@
 // preference): plain class selectors, type (element name) selectors, or
 // explicit child selectors.
 
-table.code {
-  width: 100%;
+.code {
+  background-color: #fff;
   font-family: monospace;
-  border: none;
-  border-collapse: separate;
-  margin: 0;
-  padding: 0;
+  font-size: $code_font_size;
   -premailer-cellpadding: 0;
   -premailer-cellspacing: 0;
   -premailer-width: 100%;
 
-  > tr > td {
+  > tr {
     line-height: $code_line_height;
-    font-family: monospace;
-    font-size: $code_font_size;
-
-    &.diff-line-num {
-      margin: 0;
-      padding: 0;
-      border: none;
-      padding: 0 5px;
-      border-right: 1px solid;
-      text-align: right;
-      min-width: 35px;
-      max-width: 50px;
-      width: 35px;
-    }
-
-    &.line_content {
-      display: block;
-      margin: 0;
-      padding: 0 0.5em;
-      border: none;
-      white-space: pre;
-    }
   }
 }
 
-.line-numbers, .diff-line-num {
+.diff-line-num {
+  padding: 0 5px;
+  text-align: right;
+  width: 35px;
   background-color: $background-color;
-}
-
-.diff-line-num, .diff-line-num a {
   color: $black-transparent;
-}
-
-pre.code, .diff-line-num {
-  border-color: $table-border-gray;
-}
+  border-right: 1px solid $table-border-gray;
 
-.code.white, pre.code, .line_content {
-  background-color: #fff;
-  color: #333;
-}
-
-.diff-line-num {
   &.old {
     background-color: $line-number-old;
-    border-color: $line-removed-dark;
+    border-right-color: $line-removed-dark;
   }
 
   &.new {
     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;
+    border-right-color: $line-added-dark;
   }
 }
 
 .line_content {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  white-space: pre;
+
   &.old {
     background-color: $line-removed;
 
-    > .line > span.idiff, > .line > span > span.idiff {
+    > .line > span.idiff,
+    > .line > span > span.idiff {
       background-color: $line-removed-dark;
     }
   }
@@ -94,7 +59,8 @@ pre.code, .diff-line-num {
   &.new {
     background-color: $line-added;
 
-    > .line > span.idiff, > .line > span > span.idiff {
+    > .line > span.idiff,
+    > .line > span > span.idiff {
       background-color: $line-added-dark;
     }
   }
@@ -103,14 +69,6 @@ pre.code, .diff-line-num {
     color: $black-transparent;
     background-color: $match-line;
   }
-
-  &.hll:not(.empty-cell) {
-    background-color: $line-select-yellow;
-  }
-}
-
-pre > .hll {
-  background-color: #f8eec7 !important;
 }
 
 span.highlight_word {