refactor(ui): Improve object change diff styling and layout

Update change data diff styling with CSS custom properties, better color
contrast, and consistent borders. Replace btn-group with card-actions
for navigation buttons and improve spacing.

netbox/project-static/styles/custom/_code.scss

@@ -1,46 +1,50 @@
+@use 'sass:map';
+
 // Serialized data from change records
 pre.change-data {
   border-radius: 0;
   padding: 0;
+  // Remove card-body padding
+  margin-inline: -0.75rem;
 
   // Display each line individually for highlighting
   > span {
     display: block;
-    padding-right: $spacer;
-    padding-left: $spacer;
-    width: 100%;
+    padding-inline: map.get($spacers, 2);
+    max-width: 100%;
     min-width: fit-content;
+    border-left: map.get($spacers, 1) solid transparent;
 
     &.added {
-      color: var(--tblr-dark);
-      background-color: $green-300;
+      background-color: var(--tblr-green-200);
+      border-left-color: var(--tblr-green-darken);
     }
 
     &.removed {
-      color: var(--tblr-dark);
-      background-color: $red-300;
+      background-color: var(--tblr-red-200);
+      border-left-color: var(--tblr-red-darken);
     }
   }
 }
 
 // Change data diff w/added & removed data
 pre.change-diff {
-  border-color: transparent;
+  border: var(--tblr-border-width) solid transparent;
 
   &.change-added {
-    color: var(--tblr-dark);
-    background-color: $green-300;
+    background-color: var(--tblr-green-lt);
+    border-color: var(--tblr-green);
   }
 
   &.change-removed {
-    color: var(--tblr-dark);
-    background-color: $red-300;
+    background-color: var(--tblr-red-lt);
+    border-color: var(--tblr-red);
   }
 }
 
 // <pre> elements displayed with a border
 pre.block {
   padding: $spacer;
-  border: 1px solid $border-color;
+  border: var(--tblr-border-width) solid $border-color;
   border-radius: $border-radius;
 }

netbox/templates/core/panels/objectchange_difference.html

@@ -3,11 +3,11 @@
 <div class="card">
   <h2 class="card-header d-flex justify-content-between">
     {% trans "Difference" %}
-    <div class="btn-group btn-group-sm d-print-none">
-      <a {% if prev_change %}href="{% url 'core:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-outline-secondary">
+    <div class="card-actions">
+      <a {% if prev_change %}href="{% url 'core:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-ghost-primary btn-sm">
         <i class="mdi mdi-chevron-left" aria-hidden="true"></i> {% trans "Previous" %}
       </a>
-      <a {% if next_change %}href="{% url 'core:objectchange' pk=next_change.pk %}"{% else %}disabled{% endif %} class="btn btn-outline-secondary">
+      <a {% if next_change %}href="{% url 'core:objectchange' pk=next_change.pk %}"{% else %}disabled{% endif %} class="btn btn-ghost-primary btn-sm">
         {% trans "Next" %} <i class="mdi mdi-chevron-right" aria-hidden="true"></i>
       </a>
     </div>