Use shaded tabs

netbox/project-static/styles/netbox.scss

@@ -879,3 +879,15 @@ div.card > div.card-header > div.table-controls {
     font-size: $font-size-sm;
   }
 }
+
+// Tabbed content
+.nav-tabs {
+  .nav-link.active {
+  background-color: $tab-content-bg;
+  border-bottom-color: $tab-content-bg;
+  }
+}
+.tab-content {
+  background-color: $tab-content-bg;
+  padding: $spacer;
+}

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

@@ -271,3 +271,6 @@ $code-color: $gray-200;
 $kbd-color: $white;
 $kbd-bg: $gray-300;
 $pre-color: null;
+
+// Tabbed content
+$tab-content-bg: $gray-900;

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

@@ -25,3 +25,6 @@ $list-group-color: $gray-700;
 $list-group-disabled-color: $gray-500;
 
 $table-flush-header-bg: $gray-100;
+
+// Tabbed content
+$tab-content-bg: $gray-100;

netbox/templates/base/layout.html

@@ -138,9 +138,11 @@
         {# Page content #}
         <div id="content" class="container-fluid content px-0 m-0">
           {% block tabs %}{% endblock %}
+          {% block content-wrapper %}
             <div class="px-3">
               {% block content %}{% endblock %}
             </div>
+          {% endblock %}
         </div>
 
         {% if settings.BANNER_BOTTOM %}

netbox/templates/circuits/circuittermination_edit.html

@@ -27,7 +27,7 @@
         </div>
         {% render_field form.mark_connected %}
         {% with providernetwork_tab_active=form.initial.provider_network %}
-            <ul class="nav nav-tabs mb-3" role="tablist">
+            <ul class="nav nav-tabs" role="tablist">
             <li class="nav-item" role="presentation">
                 <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
             </li>

netbox/templates/dcim/device/config.html

@@ -9,7 +9,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col col-md-10">
+    <div class="col">
         <div class="card">
             <div class="card-overlay">
                 <div class="spinner-border" role="status">
@@ -18,12 +18,12 @@
             </div>
             <h5 class="card-header">Device Configuration</h5>
             <div class="card-body">
-                <ul class="nav nav-tabs" role="tablist">
+                <ul class="nav nav-pills" role="tablist">
                     <li role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li>
                     <li role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li>
                     <li role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li>
                 </ul>
-                <div class="tab-content pt-3">
+                <div class="tab-content p-3">
                     <div role="tabpanel" class="tab-pane active" id="running">
                         <pre id="running_config"></pre>
                     </div>

netbox/templates/dcim/devicetype.html

@@ -148,7 +148,7 @@
     </div>
     <div class="row my-3">
         <div class="col col-md-12">
-            <ul class="nav nav-tabs" role="tablist">
+            <ul class="nav nav-pills" role="tablist">
                 <li class="nav-item" role="presentation">
                     <button class="nav-link active" data-bs-target="#interfaces" role="tab" data-bs-toggle="tab">
                         Interfaces {% badge interface_table.rows|length %}
@@ -190,7 +190,7 @@
                     </button>
                 </li>
             </ul>
-            <div class="tab-content my-3">
+            <div class="tab-content p-0">
                 <div role="tabpanel" class="tab-pane active" id="interfaces">
                     {% include 'dcim/inc/devicetype_component_table.html' with table=interface_table title='Interfaces' tab='interfaces' %}
                 </div>

netbox/templates/dcim/inc/device_import_header.html

@@ -1,4 +1,4 @@
-<ul class="nav nav-tabs justify-content-center" style="margin-bottom: 20px">
+<ul class="nav nav-tabs px-3">
     <li class="nav-item" role="presentation">
         <a class ="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'dcim:device_import' %}">Racked Devices</a>
     </li>

netbox/templates/generic/object.html

@@ -52,7 +52,7 @@
 {% endblock controls %}
 
 {% block tabs %}
-<ul class="nav nav-tabs mb-3 px-3">
+  <ul class="nav nav-tabs px-3">
     {% block tab_items %}
       <li class="nav-item" role="presentation">
         <a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
@@ -76,5 +76,11 @@
         </li>
       {% endwith %}
     {% endif %}
-</ul>
+  </ul>
 {% endblock tabs %}
+
+{% block content-wrapper %}
+  <div class="tab-content">
+    {% block content %}{% endblock %}
+  </div>
+{% endblock %}

netbox/templates/generic/object_bulk_edit.html

@@ -5,7 +5,7 @@
 {% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs mb-3 px-3">
+  <ul class="nav nav-tabs px-3">
     <li class="nav-item" role="presentation">
       <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
         Bulk Edit
@@ -20,8 +20,9 @@
   </ul>
 {% endblock %}
 
-{% block content %}
+{% block content-wrapper %}
   <div class="tab-content">
+    {% block content %}
 
       {# Edit form #}
       <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
@@ -61,5 +62,6 @@
         {% include 'inc/table.html' %}
       </div>
 
+    {% endblock %}
   </div>
 {% endblock %}

netbox/templates/generic/object_bulk_import.html

@@ -4,16 +4,19 @@
 
 {% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}
 
-{% block content %}
+{% block tabs %}
-    <div class="row">
+  <ul class="nav nav-tabs px-3">
-        <div class="col col-md-12 col-lg-10 offset-lg-1">
-            <ul class="nav nav-tabs mb-3" role="tablist">
     <li class="nav-item" role="presentation">
-                    <a href="#csv" class="nav-link active" role="tab" data-bs-toggle="tab">CSV</a>
+      <a class ="nav-link active" href="#">Bulk Import</a>
     </li>
   </ul>
+{% endblock %}
+
+{% block content-wrapper %}
   <div class="tab-content">
-                <div role="tabpanel" class="tab-pane active" id="csv">
+    {% block content %}
+        <div class="row">
+            <div class="col col-md-12 col-lg-10 offset-lg-1">
                 <form action="" method="post" class="form">
                     {% csrf_token %}
                     {% render_form form %}
@@ -125,6 +128,6 @@
                 {% endif %}
             </div>
         </div>
+    {% endblock content %}
   </div>
-    </div>
+{% endblock %}
-{% endblock content %}

netbox/templates/generic/object_edit.html

@@ -60,7 +60,7 @@
     </div>
 
     <div class="row my-3">
-      <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
+      <div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
         {% block buttons %}
           <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
 

netbox/templates/ipam/ipaddress_edit.html

@@ -25,7 +25,7 @@
     <div class="field-group">
         <h4 class="mb-3">Interface Assignment</h4>
         {% with vm_tab_active=form.initial.vminterface %}
-            <ul class="nav nav-tabs mb-3" role="tablist">
+            <ul class="nav nav-tabs" role="tablist">
                 <li role="presentation" class="nav-item">
                     <button
                         role="tab"
@@ -52,7 +52,6 @@
                         Virtual Machine
                     </button>
                 </li>
-                
             </ul>
             <div class="tab-content">
                 <div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
@@ -69,7 +68,7 @@
     </div>
     <div class="field-group">
         <h4 class="mb-3">NAT IP (Inside)</h4>
-        <ul class="nav nav-tabs mb-3" role="tablist">
+        <ul class="nav nav-tabs" role="tablist">
             <li class="nav-item" role="presentation">
                 <button
                     role="tab"
@@ -125,9 +124,9 @@
             <div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel">
                 {% render_field form.nat_vrf %}
             </div>
-        </div>
             {% render_field form.nat_inside %}
         </div>
+    </div>
     {% if form.custom_fields %}
         <div class="field-group">
             <h4 class="mb-3">Custom Fields</h4>

netbox/templates/ipam/vlan/base.html

@@ -15,7 +15,7 @@
 {% endblock %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs" style="margin-bottom: 20px">
+  <ul class="nav nav-tabs px-3">
     <li class="nav-item" role="presentation">
       <a class="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'ipam:vlan' pk=object.pk %}">VLAN</a>
     </li>
@@ -37,3 +37,9 @@
     {% endif %}
   </ul>
 {% endblock %}
+
+{% block content-wrapper %}
+  <div class="tab-content">
+    {% block content %}{% endblock %}
+  </div>
+{% endblock %}

netbox/templates/ipam/vlan_edit.html

@@ -21,7 +21,7 @@
     <div class="field-group mb-3">
         <h4>Assignment</h4>
         {% with site_tab_active=form.initial.site %}
-            <ul class="nav nav-tabs mb-3" role="tablist">
+            <ul class="nav nav-tabs" role="tablist">
                 <li class="nav-item" role="presentation">
                     <a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
                 </li>