#6372: Reduce padding of top-level menu items & improve home page stat badge coloring

netbox/project-static/netbox.scss

@@ -22,6 +22,7 @@
   --nbx-cable-termination-border-color: #{$gray-300};
   --nbx-search-filter-border-left-color: #{$gray-300};
   --nbx-color-mode-toggle-color: #{$primary};
+  --nbx-stat-badge-bg: #{$gray-600};
 
   body[data-netbox-color-mode='dark'] {
     --nbx-logo-color-1: #{$white};
@@ -43,6 +44,7 @@
     --nbx-cable-termination-border-color: #{$gray-700};
     --nbx-search-filter-border-left-color: #{$gray-600};
     --nbx-color-mode-toggle-color: #{$yellow-300};
+    --nbx-stat-badge-bg: #{$gray-600};
   }
 }
 
@@ -72,6 +74,11 @@ body {
     fill: #1685fc;
     stroke: #1685fc;
   }
+  span.badge.stat-badge {
+    margin-left: map.get($spacers, 2);
+    background-color: var(--nbx-stat-badge-bg);
+  }
+
   &[data-netbox-color-mode='light'] {
     .btn.btn-primary {
       color: $white;
@@ -219,7 +226,8 @@ h3.accordion-item-title,
 h4.accordion-item-title,
 h5.accordion-item-title,
 h6.accordion-item-title {
-  padding: 0 0.5rem;
+  // padding: 0 0.5rem;
+  padding: 0.25rem 0.5rem;
   font-weight: $font-weight-bold;
   text-transform: uppercase;
   color: var(--nbx-sidebar-title-color);
@@ -277,11 +285,14 @@ li.dropdown-item.dropdown-item-btns {
 nav.nav.nav-pills {
   .nav-item.nav-link {
     padding: 0.25rem 0.5rem;
-    font-size: $font-size-base;
+    // font-size: $font-size-base;
+    font-size: $font-size-sm;
     border-radius: $border-radius;
     &:hover {
-      color: $body-color;
-      background-color: var(--nbx-sidebar-link-hover-bg);
+      // color: $body-color;
+      // background-color: var(--nbx-sidebar-link-hover-bg);
+      background-color: $accordion-button-active-bg;
+      color: $accordion-button-active-color;
     }
   }
 }
@@ -307,13 +318,17 @@ nav.nav.nav-pills {
     top: 8.125rem;
   }
 
-  .sidebar-nav-link {
-    color: var(--nbx-sidebar-link-color);
-  }
-
-  div.accordion-item > a.accordion-button.nav-link:focus {
-    border-color: unset;
-    box-shadow: unset;
+  div.accordion-item > a.accordion-button.nav-link {
+    &:hover {
+      // color: $body-color;
+      // background-color: var(--nbx-sidebar-link-hover-bg);
+      color: $accordion-button-active-color;
+      background-color: $accordion-button-active-bg;
+    }
+    &:focus {
+      border-color: unset;
+      box-shadow: unset;
+    }
   }
 
   .accordion-body {
@@ -321,12 +336,15 @@ nav.nav.nav-pills {
     overflow-y: auto;
     .nav-item {
       .nav-link {
-        padding: 0.25rem 0.5rem;
-        font-size: $font-size-base;
+        padding: 0.25rem 0.6rem;
+        // font-size: $font-size-base;
+        font-size: $font-size-sm;
         border-radius: $border-radius;
         &:hover {
-          color: $body-color;
-          background-color: var(--nbx-sidebar-link-hover-bg);
+          // color: $body-color;
+          // background-color: var(--nbx-sidebar-link-hover-bg);
+          color: $accordion-button-active-color;
+          background-color: $accordion-button-active-bg;
         }
       }
     }

netbox/project-static/theme-base.scss

@@ -217,3 +217,6 @@ $font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystem
   'Segoe UI Symbol', 'Noto Color Emoji';
 $font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
   'Courier New', monospace;
+
+$accordion-padding-y: 0.8125rem;
+$accordion-padding-x: 0.8125rem;

netbox/project-static/theme-dark.scss

@@ -174,8 +174,8 @@ $accordion-bg: transparent;
 $accordion-border-color: rgba($white, 0.125);
 $accordion-button-color: $accordion-color;
 $accordion-button-bg: $accordion-bg;
-$accordion-button-active-bg: tint-color($component-active-bg, 5%);
-$accordion-button-active-color: shade-color($primary, 10%);
+$accordion-button-active-bg: rgba($blue-300, 0.15);
+$accordion-button-active-color: $gray-300;
 $accordion-button-focus-border-color: $input-focus-border-color;
 $accordion-icon-color: $accordion-color;
 $accordion-icon-active-color: $accordion-button-active-color;

netbox/project-static/theme-light.scss

@@ -17,6 +17,8 @@ $card-cap-color: $gray-800;
 
 $accordion-bg: transparent;
 $accordion-button-bg: $accordion-bg;
+$accordion-button-active-bg: $blue-100;
+$accordion-button-active-color: $gray-800;
 
 $breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
 

netbox/templates/home.html

@@ -22,7 +22,7 @@
                   <small class="mb-1 text-muted">{{ item.description }}</small>
                   {% endif %}
                 </div>
-                <span class="badge bg-secondary rounded-pill">
+                <span class="badge stat-badge rounded-pill">
                   {% if item.count == None %}
                     <i class="mdi mdi-lock"></i>
                   {% else %}

netbox/utilities/templates/navigation/nav_items.html

@@ -7,14 +7,12 @@
       aria-expanded="true"
       data-bs-toggle="collapse"
       data-bs-target="#{{ menu.label|lower }}"
-      class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed"
-      ><span class="fw-bold sidebar-nav-link">{{ menu.label }}</span></a
-    >
-    <div
-      id="{{ menu.label|lower }}"
-      class="accordion-collapse collapse"
-      data-bs-parent="#sidenav-accordion"
-    >
+      class="d-flex justify-content-between align-items-center accordion-button nav-link collapsed">
+        <span class="fw-bold sidebar-nav-link">
+          {{ menu.label }}
+        </span>
+      </a>
+    <div id="{{ menu.label|lower }}" class="accordion-collapse collapse" data-bs-parent="#sidenav-accordion">
       <div class="multi-level accordion-body px-0">
         {% for group in menu.groups %}
         <div class="flex-column nav px-2">
@@ -27,7 +25,7 @@
           {% endfor %}
         </div>
         {% if forloop.counter != menu.groups|length %}
-        <hr class="dropdown-divider my-3" />
+        <hr class="dropdown-divider my-2" />
         {% endif %} {% endfor %}
       </div>
     </div>