1 files changed, 30 insertions, 2 deletions

diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index f7cd5d7e183..4eb26d533c2 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -450,6 +450,16 @@
   }
 }
 
+.code .diff-grid-row.line_holder.diff-tr .diff-td.commented:not(.hll) {
+  --highlight-border-color: #{$blue-300};
+  background-color: $blue-50;
+
+  .gl-dark & {
+    --highlight-border-color: #{$blue-600};
+    background-color: $blue-900;
+  }
+}
+
 .diff-table.code,
 table.code {
   width: 100%;
@@ -461,6 +471,21 @@ table.code {
   table-layout: fixed;
   border-radius: 0 0 $border-radius-default $border-radius-default;
 
+  .diff-td.highlight-top {
+    box-shadow: 0 -1px var(--highlight-border-color, $blue-300);
+    z-index: 1;
+  }
+
+  .diff-td.highlight-bottom {
+    box-shadow: 0 1px var(--highlight-border-color, $blue-300);
+    z-index: 1;
+  }
+
+  .diff-td.highlight-top.highlight-bottom {
+    box-shadow: 0 -1px var(--highlight-border-color, $blue-300), 0 1px var(--highlight-border-color, $blue-300);
+    z-index: 2;
+  }
+
   .diff-tr.line_holder .diff-td,
   tr.line_holder td {
     line-height: $code-line-height;
@@ -485,13 +510,16 @@ table.code {
       user-select: none;
       margin: 0;
       padding: 0 10px 0 5px;
-      border-right-width: 1px;
-      border-right-style: solid;
       text-align: right;
       width: 50px;
       position: relative;
       white-space: nowrap;
 
+      &:nth-of-type(2) {
+        border-right-width: 1px;
+        border-right-style: solid;
+      }
+
       a {
         transition: none;
         float: left;