Minor theme improvements

netbox/project-static/styles/cable-trace.scss

@@ -2,6 +2,7 @@
 
 :root {
   // Light Mode Variables.
+  --nbx-trace-color: #{$black};
   --nbx-trace-node-bg: #{$gray-200};
   --nbx-trace-termination-bg: #{$gray-100};
   --nbx-trace-cable-shadow: #{$gray-800};
@@ -9,6 +10,7 @@
   &[data-netbox-color-mode='dark'] {
     // Dark Mode Variables.
     // Note: only the `theme-light.scss` file is in-scope for simplicity.
+    --nbx-trace-color: #{$white};
     --nbx-trace-node-bg: #{$gray-900};
     --nbx-trace-termination-bg: #{$gray-800};
     --nbx-trace-cable-shadow: #{$gray-200};
@@ -20,12 +22,19 @@
   font-family: $font-family-sans-serif;
   font-size: $font-size-sm;
 }
+
 text {
   text-anchor: middle;
   dominant-baseline: middle;
-}
+
-text.bold {
+  &:not([fill]) {
-  font-weight: bold;
+    // Fill text with body color when a fill attribute is not set via element attributes.
+    fill: var(--nbx-trace-color);
+  }
+
+  &.bold {
+    font-weight: $font-weight-bold;
+  }
 }
 
 svg {

netbox/project-static/styles/netbox.scss

@@ -23,13 +23,13 @@
   --nbx-color-mode-toggle-color: #{$primary};
 
   body[data-netbox-color-mode='dark'] {
-    --nbx-sidebar-bg: #{$gray-800};
+    --nbx-sidebar-bg: #{$gray-900};
-    --nbx-sidebar-link-color: #{$gray-200};
+    --nbx-sidebar-link-color: #{$gray-100};
     --nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
     --nbx-sidebar-title-color: #{$gray-600};
     --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(255, 255, 255, 0.05);
     --nbx-breadcrumb-bg: #{$gray-800};
-    --nbx-body-bg: #1b1f22;
+    --nbx-body-bg: #{$darker};
     --nbx-body-color: #{$gray-100};
     --nbx-pre-bg: #{$gray-700};
     --nbx-pre-border-color: #{$gray-600};
@@ -886,14 +886,37 @@ div.card > div.card-header > div.table-controls {
   }
 }
 
+// Right-align the paginator element.
+.paginator {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: $spacer 0;
+}
+
 // Tabbed content
 .nav-tabs {
-  .nav-link.active {
+  .nav-link {
-  background-color: $tab-content-bg;
+    &:hover {
-  border-bottom-color: $tab-content-bg;
+      // Don't show a bottom-border on a hovered nav link because it overlaps with the .nav-tab border.
+      border-bottom-color: transparent;
+    }
+    &.active {
+      // Set the background-color of an active tab to the same color as the .tab-content
+      // background-color so it visually indicates which tab is open.
+      background-color: $tab-content-bg;
+      border-bottom-color: $tab-content-bg;
+      // Move the active tab down 1px to overtake the .nav-tabs element's border, but only for that
+      // tab. This is an ugly hack, but it works.
+      transform: translateY(1px);
+    }
   }
 }
+
 .tab-content {
-  background-color: $tab-content-bg;
+  display: flex;
+  flex-direction: column;
   padding: $spacer;
+  background-color: $tab-content-bg;
+  border-bottom: 1px solid $nav-tabs-border-color;
 }

netbox/project-static/styles/theme-base.scss

@@ -28,11 +28,16 @@ $line-height-xs: 1;
 $line-height-sm: 1.25;
 $line-height-lg: 1.75;
 
+$darker: #1b1f22;
+$darkest: #171b1d;
+
 @import 'bootstrap/scss/variables';
 
 // Make color palette colors available as theme colors.
 // For example, you could use `.bg-red-100`, if needed.
 $theme-color-addons: (
+  'darker': $darker,
+  'darkest': $darkest,
   'gray': $gray-400,
   'gray-100': $gray-100,
   'gray-200': $gray-200,

netbox/project-static/styles/theme-dark.scss

@@ -29,7 +29,7 @@ $theme-colors: map-merge($theme-colors, $theme-color-addons);
 $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
 
 // Body
-$body-bg: #1b1f22;
+$body-bg: $darker;
 $body-color: $white;
 $body-text-align: null;
 $border-color: $gray-700;
@@ -273,4 +273,4 @@ $kbd-bg: $gray-300;
 $pre-color: null;
 
 // Tabbed content
-$tab-content-bg: $gray-900;
+$tab-content-bg: $darkest;