#7450: Clean up footer and navbar styles

netbox/project-static/styles/netbox.scss

@@ -358,7 +358,7 @@ nav.search {
   // Don't overtake dropdowns
   z-index: 999;
   justify-content: center;
-  background-color: var(--nbx-body-bg);
+  background-color: $navbar-light-color;
 
   .search-container {
     display: flex;
@@ -452,8 +452,8 @@ main.login-container {
 }
 
 .footer {
+  background-color: $tab-content-bg;
   padding: 0;
-
   .nav-link {
     padding: 0.5rem;
   }
@@ -517,6 +517,10 @@ h6.accordion-item-title {
   }
 }
 
+.navbar {
+  border-bottom: 1px solid $border-color;
+}
+
 .navbar-brand {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -554,6 +558,7 @@ div.content-container {
   }
 
   div.content {
+    background-color: $tab-content-bg;
     flex: 1;
   }
 
@@ -898,6 +903,7 @@ div.card-overlay {
 
 // Tabbed content
 .nav-tabs {
+  background-color: $body-bg;
   .nav-link {
     &:hover {
       // Don't show a bottom-border on a hovered nav link because it overlaps with the .nav-tab border.
@@ -919,14 +925,6 @@ div.card-overlay {
   display: flex;
   flex-direction: column;
   padding: $spacer;
-  background-color: $tab-content-bg;
-  border-bottom: 1px solid $nav-tabs-border-color;
-
-  // Remove background and border when printing.
-  @media print {
-    background-color: var(--nbx-body-bg) !important;
-    border-bottom: none !important;
-  }
 }
 
 // Override masonry-layout styles when printing.

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

@@ -139,7 +139,7 @@ $nav-tabs-link-active-border-color: $gray-800 $gray-800 $nav-tabs-link-active-bg
 $nav-pills-link-active-color: $component-active-color;
 $nav-pills-link-active-bg: $component-active-bg;
 
-$navbar-light-color: $gray-500;
+$navbar-light-color: $darkest;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
 $navbar-light-toggler-border-color: $gray-700;
 

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

@@ -22,6 +22,8 @@ $theme-colors: map-merge($theme-colors, $theme-color-addons);
 
 $light: $gray-200;
 
+$navbar-light-color: $gray-100;
+
 $card-cap-color: $gray-800;
 
 $accordion-bg: transparent;

netbox/templates/base/layout.html

@@ -20,7 +20,7 @@
         </div>
 
         {# Top bar #}
-        <nav class="navbar navbar-light sticky-top flex-md-nowrap p-1 mb-3 search container-fluid border-bottom noprint">
+        <nav class="navbar navbar-light sticky-top flex-md-nowrap p-1 mb-3 search container-fluid noprint">
 
             {# Mobile Navigation #}
             <div class="nav-mobile">

netbox/templates/extras/report.html

@@ -21,30 +21,41 @@
 {% endblock %}
 
 {% block controls %}{% endblock %}
-{% block tabs %}{% endblock %}
+
+{% block tabs %}
+  <ul class="nav nav-tabs px-3">
+    <li class="nav-item" role="presentation">
+      <a href="#report" role="tab" data-bs-toggle="tab" class="nav-link active">Report</a>
+    </li>
+  </ul>
+{% endblock %}
 
 {% block content-wrapper %}
-  {% if perms.extras.run_report %}
+  <div class="tab-content">
-    <div class="px-3 float-end noprint">
+    <div role="tabpanel" class="tab-pane active" id="report">
-        <form action="{% url 'extras:report' module=report.module name=report.class_name %}" method="post">
+      {% if perms.extras.run_report %}
-            {% csrf_token %}
+        <div class="px-3 float-end noprint">
-            <button type="submit" name="_run" class="btn btn-primary">
+            <form action="{% url 'extras:report' module=report.module name=report.class_name %}" method="post">
-                {% if report.result %}
+                {% csrf_token %}
-                    <i class="mdi mdi-replay"></i> Run Again
+                <button type="submit" name="_run" class="btn btn-primary">
-                {% else %}
+                    {% if report.result %}
-                    <i class="mdi mdi-play"></i> Run Report
+                        <i class="mdi mdi-replay"></i> Run Again
-                {% endif %}
+                    {% else %}
-            </button>
+                        <i class="mdi mdi-play"></i> Run Report
-        </form>
+                    {% endif %}
-    </div>
+                </button>
-  {% endif %}
+            </form>
-  <div class="row px-3">
+        </div>
-      <div class="col col-md-12">
+      {% endif %}
-          {% if report.result %}
+      <div class="row px-3">
-              Last run: <a href="{% url 'extras:report_result' job_result_pk=report.result.pk %}">
+          <div class="col col-md-12">
-                  <strong>{{ report.result.created|annotated_date }}</strong>
+              {% if report.result %}
-              </a>
+                  Last run: <a href="{% url 'extras:report_result' job_result_pk=report.result.pk %}">
-          {% endif %}
+                      <strong>{{ report.result.created|annotated_date }}</strong>
+                  </a>
+              {% endif %}
+          </div>
       </div>
+    </div>
   </div>
 {% endblock %}

netbox/templates/extras/report_result.html

@@ -1,7 +1,7 @@
 {% extends 'extras/report.html' %}
 
 {% block content-wrapper %}
-  <div class="row px-3">
+  <div class="row p-3">
     <div class="col col-md-12"{% if not result.completed %} hx-get="{% url 'extras:report_result' job_result_pk=result.pk %}" hx-trigger="every 3s"{% endif %}>
       {% include 'extras/htmx/report_result.html' %}
     </div>