sync

packages/web/src/components/diffview.module.css

@@ -0,0 +1,80 @@
+.diff {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+}
+
+.column {
+ display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  min-width: 0;
+  align-items: flex-start;
+
+  &:first-child {
+    border-right: 1px solid var(--sl-color-divider);
+  }
+
+  & > [data-section="cell"]:first-child {
+    padding-top: 0.5rem;
+  }
+  & > [data-section="cell"]:last-child {
+    padding-bottom: 0.5rem;
+  }
+}
+
+[data-section="cell"] {
+  position: relative;
+  flex: none;
+  width: max-content;
+  padding: 0.1875rem 0.5rem 0.1875rem 1.8ch;
+  margin: 0;
+
+  pre {
+    background-color: var(--sl-color-bg-surface) !important;
+    white-space: pre;
+
+    code > span:empty::before {
+      content: "\00a0";
+      white-space: pre;
+      display: inline-block;
+      width: 0;
+    }
+  }
+}
+
+[data-diff-type="removed"] {
+  background-color: var(--sl-color-red-low);
+  min-width: 100%;
+
+  pre {
+    background-color: var(--sl-color-red-low) !important;
+  }
+
+  &::before {
+    content: "-";
+    position: absolute;
+    left: 0.5ch;
+    user-select: none;
+    color: var(--sl-color-red-high);
+  }
+}
+
+[data-diff-type="added"] {
+  background-color: var(--sl-color-green-low);
+  min-width: 100%;
+
+  pre {
+    background-color: var(--sl-color-green-low) !important;
+  }
+
+  &::before {
+    content: "+";
+    position: absolute;
+    left: 0.6ch;
+    user-select: none;
+    color: var(--sl-color-green-high);
+  }
+}