Stripe background should only work in SideBySide

The Inline renderer output is affected.

Signed-off-by: Jack Cherng <jfcherng@gmail.com>

Author: jfcherng

example/diff-table.css

@@ -76,10 +76,6 @@
 .diff-wrapper.diff.diff-html .change.change-eq .new {
   background: #fff;
 }
-.diff-wrapper.diff.diff-html .change.change-ins .old, .diff-wrapper.diff.diff-html .change.change-del .new, .diff-wrapper.diff.diff-html .change.change-rep .old:empty, .diff-wrapper.diff.diff-html .change.change-rep .new:empty {
-  cursor: not-allowed;
-  background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em) fixed;
-}
 .diff-wrapper.diff.diff-html .change .old {
   background: #fbe1e1;
 }
@@ -89,6 +85,10 @@
 .diff-wrapper.diff.diff-html .change .rep {
   background: #fef6d9;
 }
+.diff-wrapper.diff.diff-html .change .old.none, .diff-wrapper.diff.diff-html .change .new.none, .diff-wrapper.diff.diff-html .change .rep.none {
+  cursor: not-allowed;
+  background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em) fixed;
+}
 .diff-wrapper.diff.diff-html .change ins,
 .diff-wrapper.diff.diff-html .change del {
   font-weight: bold;

example/diff-table.scss

@@ -121,20 +121,6 @@ $diff-bg-color-none-block-alternative: mix($diff-bg-color, $diff-table-sidebar-c
         }
       }
 
-      &.change-ins .old,
-      &.change-del .new,
-      &.change-rep .old:empty,
-      &.change-rep .new:empty {
-        cursor: not-allowed;
-        background: repeating-linear-gradient(
-          -45deg,
-          $diff-bg-color-none-block,
-          $diff-bg-color-none-block 0.5em,
-          $diff-bg-color-none-block-alternative 0.5em,
-          $diff-bg-color-none-block-alternative 1em,
-        ) fixed;
-      }
-
       .old {
         background: $diff-bg-color-del;
       }
@@ -147,6 +133,19 @@ $diff-bg-color-none-block-alternative: mix($diff-bg-color, $diff-table-sidebar-c
         background: $diff-bg-color-rep;
       }
 
+      .old, .new, .rep {
+        &.none {
+          cursor: not-allowed;
+          background: repeating-linear-gradient(
+            -45deg,
+            $diff-bg-color-none-block,
+            $diff-bg-color-none-block 0.5em,
+            $diff-bg-color-none-block-alternative 0.5em,
+            $diff-bg-color-none-block-alternative 1em,
+          ) fixed;
+        }
+      }
+
       ins,
       del {
         font-weight: bold;

src/Renderer/Html/SideBySide.php

@@ -158,7 +158,7 @@ protected function renderTableBlockInsert(array $block): string
             $html .=
                 '<tr>' .
                     $this->renderLineNumberColumn('', null) .
-                    '<td class="old"></td>' .
+                    '<td class="old none"></td>' .
                     $this->renderLineNumberColumn('new', $newLineNum) .
                     '<td class="new">' . $newLine . '</td>' .
                 '</tr>';
@@ -184,7 +184,7 @@ protected function renderTableBlockDelete(array $block): string
                     $this->renderLineNumberColumn('old', $oldLineNum) .
                     '<td class="old">' . $oldLine . '</td>' .
                     $this->renderLineNumberColumn('', null) .
-                    '<td class="new"></td>' .
+                    '<td class="new none"></td>' .
                 '</tr>';
         }
 
@@ -222,9 +222,13 @@ protected function renderTableBlockReplace(array $block): string
             $html .=
                 '<tr>' .
                     $this->renderLineNumberColumn('old', $oldLineNum) .
-                    '<td class="old">' . $oldLine . '</td>' .
+                    '<td class="old' . (isset($oldLineNum) ? '' : ' none') . '">' .
+                        $oldLine .
+                    '</td>' .
                     $this->renderLineNumberColumn('new', $newLineNum) .
-                    '<td class="new">' . $newLine . '</td>' .
+                    '<td class="new' . (isset($newLineNum) ? '' : ' none') . '">' .
+                        $newLine .
+                    '</td>' .
                 '</tr>';
         }