Misc cleanup & refactoring

netbox/project-static/styles/overrides/_tabler.scss

@@ -11,16 +11,38 @@ pre {
   color: inherit;
 }
 
-// Buttons
+// Slightly increase alert contrast between bg and text
+.alert {
+  background: var(--#{$prefix}bg-surface);
+}
+
+// Button adjustments
 .btn {
   // Tabler sets display: flex
   display: inline-block;
+
+  &:focus {
+    // Add button focus state
+    border: 1px solid var(--tblr-primary-fg);
+    outline: 2px solid var(--tblr-primary) !important;
+  }
 }
 .btn-sm {
   // $border-radius-sm (2px) is too small
   border-radius: $border-radius;
 }
 
+// Dropdown items
+.dropdown-item {
+  // Tabler sets display: flex
+  display: inline-block;
+}
+
+// Set footer icon color
+.footer .text-primary {
+  color: $rich-black !important;
+}
+
 // Tabs
 .nav-tabs {
   .nav-link {
@@ -29,15 +51,12 @@ pre {
   }
 }
 
-// Dropdown items
+// Altering background colors
-.dropdown-item {
+.page, .page-tabs .nav-tabs .nav-link.active {
-  // Tabler sets display: flex
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
-  display: inline-block;
 }
-
+.page-body .card .card-header {
-// Override background color alpha value
+  background: var(--tblr-bg-surface-secondary) !important;
-[data-bs-theme=dark] ::selection {
-  background-color: rgba(var(--tblr-primary-rgb),.48);
 }
 
 // Dark mode colors
@@ -55,59 +74,30 @@ pre {
   }
 }
 
-// Slightly increase alert contrast between bg and text
-.alert {
-  background: var(--#{$prefix}bg-surface);
-}
-
-// Altering background colors
-.page, .page-tabs .nav-tabs .nav-link.active {
-  background-color: var(--#{$prefix}bg-surface-tertiary)!important;
-}
-.page-body .card .card-header {
-  background: var(--tblr-bg-surface-secondary)!important;
-}
-
-.footer .text-primary {
-  color: $rich-black!important;
-}
-
-// Add button focus state
-.btn:focus {
-  border: 1px solid var(--tblr-primary-fg);
-  outline: 2px solid var(--tblr-primary)!important;
-}
-
-// Fix secondary combo button contrast
-.btn-outline-secondary {
-  &.active {
-    color: var(--tblr-primary-fg);
-  }
-  &:hover {
-    color: var(--tblr-primary-fg);
-  }
-}
-
 // Dark mode overrides
 body[data-bs-theme=dark] {
+  // Override background color alpha value
+  ::selection {
+    background-color: rgba(var(--tblr-primary-rgb),.48);
+  }
 
   .btn-primary {
-    color: $rich-black!important;
+    color: $rich-black !important;
   }
 
   // Change content color when primary teal changes with theme
   .bg-primary {
     .card-title,a,i {
-      color: $rich-black!important;
+      color: $rich-black !important;
     }
   }
   .text-bg-primary {
-    color: $rich-black!important;
+    color: $rich-black !important;
   }
 
   // Altering background colors
   .card {
-    background: $rich-black!important;
+    background: $rich-black !important;
   }
 
   // Background colors to match brand colors
@@ -116,7 +106,7 @@ body[data-bs-theme=dark] {
     background-color: $rich-black;
   }
   .page, .page-tabs .nav-tabs .nav-link.active {
-    background-color: $rich-black-light!important;
+    background-color: $rich-black-light !important;
   }
 
   .page-link.active, .active>.page-link {
@@ -126,16 +116,16 @@ body[data-bs-theme=dark] {
   // Adjusting text colors
   .text- {
     &bg-primary {
-      color: $rich-black!important;
+      color: $rich-black !important;
     }
     &muted {
       color: var(--#{$prefix}secondary-color) !important;
     }
     &secondary {
-      color: $gray-400!important;
+      color: $gray-400 !important;
     }
   }
   .footer .text-primary {
-    color: white!important;
+    color: white !important;
   }
 }

netbox/project-static/styles/transitional/_navigation.scss

@@ -9,10 +9,10 @@
   // Adjust hover color & style for menu items
   .navbar-collapse {
     .nav-link-icon {
-      color: var(--tblr-nav-link-color)!important;
+      color: var(--tblr-nav-link-color) !important;
     }
     .text-secondary {
-      color: $dark-teal!important;
+      color: $dark-teal !important;
     }
 
     .dropdown-menu {
@@ -94,6 +94,7 @@
 
 // Light theme styling
 body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+  // Background Gradient
   background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
 }
 
@@ -105,29 +106,29 @@ body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
 
   // Border color for active dropdown list
   .nav-item.dropdown.active:after {
-    border-color: $bright-teal!important;
+    border-color: $bright-teal !important;
   }
 
   // Adjust hover color & style for menu items
   .dropdown-item {
     a {
-      color: white!important;
+      color: white !important;
     }
     &.active {
-      background-color: $navbar-dark-active-bg!important;
+      background-color: $navbar-dark-active-bg !important;
       a {
-        color: white!important;
+        color: white !important;
       }
     }
     &:hover {
-      background-color: $navbar-dark-active-bg!important;
+      background-color: $navbar-dark-active-bg !important;
     }
     .nav-link-title {
-      color: white!important;
+      color: white !important;
     }
   }
   .text-secondary {
-    color: $bright-teal!important;
+    color: $bright-teal !important;
   }
 
   img.motif {

netbox/templates/base/layout.html

@@ -37,7 +37,7 @@ Blocks:
           <a href="{% url 'home' %}">
             <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
             <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
-            <div class="netbox-edition fw-semibold text-center fs-5 mt-2">{{ settings.RELEASE.edition }}</div>
+            <div class="netbox-edition fw-semibold text-center fs-5 my-1">{{ settings.RELEASE.edition }}</div>
           </a>
         </h1>