Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#14833)

* Remove dark mode styling

* Condense & rename light mode stylesheet

* Upgrade to Bootstrap 5.3.2

* Swap out Bootstrap for Tabler; remove custom styling

* Update base page layout for Tabler

* Update login page

* Bump node to v18

* Update button styles

* Update object list view

* Tweak navbar size

* Clean up dashboard widgets

* Ditch separate stylesheet for print media

* Remove simplebar

* Remove obsolete sidebar styling

* Clean up object view template

* Clean up object edit template

* Standardize primary button sizing

* Clean up object list styling

* Add buttons for add & import to navigation menu

* Fix global search bar

* Fix slim-select form widget styling

* Fix toast styling

* Set base fonts

* Clean up paginator styling

* Clean up navigation menu group headings

* Clean up footer links

* Clean up card styles

* Move SVG styles to a designated directory

* Restructure SCSS files

* Remove obsolete/redundant dependencies

* Fix icon spacing

* Update background color classes

* Tweak banner & footer styling and spacing

* Fix badge background colors in table content

* Bump @types/bootstrap to 5.2.10

* Clean up form layouts

* Fix object selector button style

* Fix icon padding inside small buttons

* Fix icon & badge spacing inside buttons and tabs

* Hide paginator for empty pages

* Fix hover color for list items (Tabler bug #1694)

* Fix width of checkbox column in empty tables

* Clean up bulk edit template

* Fix border color of reslug button

* Package & serve Google fonts locally

* Fix tab styling

* Reduce vetical space at top of dashboard

* Remove obsolete content-wrapper template block

* Fix icon spacing in dropdown menu items

* Fix color label sizing

* Separate bulk delete form & object list into tabs

* Fix styling of filter group headings

* Fix styling for object changelog & journal views

* Standardize ordering & styling of action buttons

* Fix designation of active menu item

* Automatically expand menu section containing the active link

* Clean up nav menu styling

* Remove button colors; hide buttons except on hover/active

* Highlight menu group containing the active item

* Update & standardize alert styling

* Refactor base templates to ensure consistent display of header content

* Tweak styling for links inside badges

* Clean up top menu

* Fix JSON/YAML toggles for config context data

* Fix object template header

* Constrain tabs to container-xl; tweak header margins

* Fix object identifier styling

* Fix positioning of card header buttons

* Remove padding from HTMX tables inside cards

* Ensure consistent use of row headings in attribute tables

* Remove padding surrounding tables inside cards

* Remove obsolete CSS classes

* Misc cleanup of old styling

* Refactor 'controls' template block; ditch old classes

* Fix login button sizing

* Limit object edit form width

* Append asterisk to required form field labels

* Remove obsolete styling

* Remove obsolete styling

* Fix position of progress bar outside label

* Fix alignment of delete button in report/script lists

* Fix <pre> styling

* Clean up page headers

* Replace SVG icons with Material Design icons

* Restore dark mode togle functionality

* Fix top navbar background color under dark mode

* Rebuild static assets

netbox/utilities/templates/builtins/badge.html

@@ -1 +1 @@
-{% if value or show_empty %}<span class="badge bg-{{ bg_color }}">{{ value }}</span>{% endif %}
+{% if value or show_empty %}<span class="badge text-bg-{{ bg_color }}">{{ value }}</span>{% endif %}

netbox/utilities/templates/builtins/htmx_table.html

@@ -1,4 +1,4 @@
-<div class="card-body htmx-container table-responsive"
+<div class="card-body htmx-container table-responsive p-0"
   hx-get="{% url viewname %}{% if url_params %}?{{ url_params.urlencode }}{% endif %}"
   hx-trigger="load"
 ></div>

netbox/utilities/templates/buttons/add.html

@@ -1,6 +1,6 @@
 {% if url %}
 {% load i18n %}
-  <a href="{{ url }}" type="button" class="btn btn-sm btn-success">
+  <a href="{{ url }}" type="button" class="btn btn-primary">
     <i class="mdi mdi-plus-thick"></i> {% trans "Add" %}
   </a>
 {% endif %}

netbox/utilities/templates/buttons/bookmark.html

@@ -5,11 +5,11 @@
     <input type="hidden" name="{{ field }}" value="{{ value }}" />
   {% endfor %}
   {% if bookmark %}
-    <button type="submit" class="btn btn-sm btn-info">
+    <button type="submit" class="btn btn-cyan">
       <i class="mdi mdi-bookmark-minus"></i> {% trans "Unbookmark" %}
     </button>
   {% else %}
-    <button type="submit" class="btn btn-sm btn-info">
+    <button type="submit" class="btn btn-cyan">
       <i class="mdi mdi-bookmark-check"></i> {% trans "Bookmark" %}
     </button>
   {% endif %}

netbox/utilities/templates/buttons/bulk_delete.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if url %}
-  <button type="submit" name="_delete" formaction="{{ url }}" class="btn btn-danger btn-sm">
+  <button type="submit" name="_delete" formaction="{{ url }}" class="btn btn-red">
     <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> {% trans "Delete Selected" %}
   </button>
 {% endif %}

netbox/utilities/templates/buttons/bulk_edit.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if url %}
-  <button type="submit" name="_edit" formaction="{{ url }}" class="btn btn-warning btn-sm">
+  <button type="submit" name="_edit" formaction="{{ url }}" class="btn btn-yellow">
     <i class="mdi mdi-pencil" aria-hidden="true"></i> {% trans "Edit Selected" %}
   </button>
 {% endif %}

netbox/utilities/templates/buttons/clone.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if url %}
-  <a href="{{ url }}" class="btn btn-sm btn-success" role="button">
+  <a href="{{ url }}" class="btn btn-green" role="button">
     <i class="mdi mdi-content-copy" aria-hidden="true"></i> {% trans "Clone" %}
   </a>
 {% endif %}

netbox/utilities/templates/buttons/delete.html

@@ -2,9 +2,9 @@
 <a href="#"
   hx-get="{{ url }}"
   hx-target="#htmx-modal-content"
-  class="btn btn-sm btn-danger"
+  class="btn btn-red"
   data-bs-toggle="modal"
   data-bs-target="#htmx-modal"
 >
-  <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>&nbsp;{% trans "Delete" %}
+  <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> {% trans "Delete" %}
 </a>

netbox/utilities/templates/buttons/edit.html

@@ -1,4 +1,4 @@
 {% load i18n %}
-<a href="{{ url }}" class="btn btn-sm btn-warning" role="button">
-    <span class="mdi mdi-pencil" aria-hidden="true"></span>&nbsp;{% trans "Edit" %}
+<a href="{{ url }}" class="btn btn-yellow" role="button">
+  <i class="mdi mdi-pencil" aria-hidden="true"></i> {% trans "Edit" %}
 </a>

netbox/utilities/templates/buttons/export.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="dropdown">
-  <button type="button" class="btn btn-sm btn-purple dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <i class="mdi mdi-download"></i>&nbsp;{% trans "Export" %}
+  <button type="button" class="btn btn-purple dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="mdi mdi-download"></i> {% trans "Export" %}
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
     <li><a class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export=table">{% trans "Current View" %}</a></li>

netbox/utilities/templates/buttons/import.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if url %}
-  <a href="{{ url }}" type="button" class="btn btn-sm btn-info">
+  <a href="{{ url }}" type="button" class="btn btn-cyan">
     <i class="mdi mdi-upload"></i> {% trans "Import" %}
   </a>
 {% endif %}

netbox/utilities/templates/buttons/sync.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <form action="{{ url }}" method="post">
   {% csrf_token %}
-  <button type="submit" class="btn btn-primary btn-sm">
+  <button type="submit" class="btn btn-primary">
     <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Sync" %}
   </button>
 </form>

netbox/utilities/templates/form_helpers/render_field.html

@@ -17,7 +17,7 @@
     {% if field|widget_type == 'slugwidget' %}
       <div class="input-group">
         {{ field }}
-        <button id="reslug" type="button" title="{% trans "Regenerate Slug" %}" class="btn btn-outline-dark border-input">
+        <button id="reslug" type="button" title="{% trans "Regenerate Slug" %}" class="btn">
           <i class="mdi mdi-reload"></i>
         </button>
       </div>
@@ -33,7 +33,7 @@
     {% elif 'data-clipboard' in field.field.widget.attrs %}
       <div class="input-group">
         {{ field }}
-        <button type="button" title="{% trans "Copy to clipboard" %}" class="btn btn-outline-dark border-input copy-content" data-clipboard-target="#{{ field.id_for_label }}">
+        <button type="button" title="{% trans "Copy to clipboard" %}" class="btn btn-outline-dark copy-content" data-clipboard-target="#{{ field.id_for_label }}">
           <i class="mdi mdi-content-copy"></i>
         </button>
       </div>

netbox/utilities/templates/helpers/applied_filters.html

@@ -2,17 +2,17 @@
 {% if applied_filters %}
   <div class="mb-3">
     {% for filter in applied_filters %}
-      <a href="{{ filter.link_url }}" class="badge rounded-pill bg-primary text-decoration-none me-1">
+      <a href="{{ filter.link_url }}" class="badge rounded-pill text-bg-primary text-decoration-none me-1">
         <i class="mdi mdi-close"></i> {{ filter.link_text }}
       </a>
     {% endfor %}
     {% if applied_filters|length > 1 %}
-      <a href="?" class="badge rounded-pill bg-danger text-decoration-none me-1">
+      <a href="?" class="badge rounded-pill text-bg-danger text-decoration-none me-1">
         <i class="mdi mdi-tag-off"></i> {% trans "Clear all" %}
       </a>
     {% endif %}
     {% if save_link %}
-      <a href="{{ save_link }}" class="badge rounded-pill bg-success text-decoration-none me-1">
+      <a href="{{ save_link }}" class="badge rounded-pill text-bg-success text-decoration-none me-1">
         <i class="mdi mdi-content-save"></i> {% trans "Save" %}
       </a>
     {% endif %}

netbox/utilities/templates/helpers/utilization_graph.html

@@ -11,6 +11,6 @@
     {% if utilization >= 35 %}{{ utilization|floatformat:1 }}%{% endif %}
   </div>
   {% if utilization < 35 %}
-    <span class="ps-1">{{ utilization|floatformat:1 }}%</span>
+    <span class="progress-label">{{ utilization|floatformat:1 }}%</span>
   {% endif %}
 </div>

netbox/utilities/templates/navigation/menu.html

@@ -1,43 +1,46 @@
 {% load helpers %}
 
-<ul class="navbar-nav">
+<ul class="navbar-nav pt-lg-2">
   {% for menu, groups in nav_items %}
-    <li class="nav-item">
+    <li class="nav-item dropdown">
+
       {# Menu heading #}
-      <a class="nav-link" href="#menu{{ menu.name }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.name }}">
-       <i class="{{ menu.icon_class }}"></i>
-       <span class="nav-link-text">{{ menu.label }}</span>
+      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false" >
+        <span class="nav-link-icon d-md-none d-lg-inline-block">
+          <i class="{{ menu.icon_class }}"></i>
+        </span>
+        <span class="nav-link-title">
+          {{ menu.label }}
+        </span>
       </a>
+
       {# Menu groups #}
-      <div class="collapse" id="menu{{ menu.name }}">
-        <ul class="nav nav-sm flex-column">
-          {% for group, items in groups %}
-            {# Group heading #}
-            <li class="nav-item">
-              <div class="nav-group-header">
-                <span class="nav-group-label">{{ group.label }}</span>
+      <div class="dropdown-menu">
+        <div class="dropdown-menu-columns">
+          <div class="dropdown-menu-column pb-2">
+            {% for group, items in groups %}
+              <div class="text-uppercase fw-bold fs-5 ps-3 pt-3 pb-1">
+                {{ group.label }}
               </div>
-            </li>
-            {# Group items #}
-            {% for item, buttons in items %}
-              <li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
-                {# Item #}
-                <a href="{% url item.link %}" class="nav-link">{{ item.link_text }}</a>
-                {# Item buttons (if any) #}
-                {% if buttons %}
-                  <div class="btn-group px-2">
-                    {% for button in buttons %}
-                      <a class="btn btn-sm btn-{{ button.color }} lh-1" href="{% url button.link %}" title="{{ button.title }}">
-                        <i class="{{ button.icon_class }}"></i>
-                      </a>
-                    {% endfor %}
-                  </div>
-                {% endif %}
-              </li>
+              {% for item, buttons in items %}
+                <div class="dropdown-item d-flex justify-content-between ps-3 py-0">
+                  <a href="{% url item.link %}" class="d-inline-flex flex-fill py-1">{{ item.link_text }}</a>
+                  {% if buttons %}
+                    <div class="btn-group ms-1">
+                      {% for button in buttons %}
+                        <a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline-dark" }} lh-2" title="{{ button.title }}">
+                          <i class="{{ button.icon_class }}"></i>
+                        </a>
+                      {% endfor %}
+                    </div>
+                  {% endif %}
+                </div>
+              {% endfor %}
             {% endfor %}
-          {% endfor %}
-        </ul>
+          </div>
+        </div>
       </div>
+
     </li>
   {% endfor %}
 </ul>

netbox/utilities/templates/widgets/apiselect.html

@@ -5,7 +5,7 @@
     <button
       type="button"
       title="{% trans "Open selector" %}"
-      class="btn btn-sm btn-outline-dark border-input ms-1"
+      class="btn btn-outline-secondary ms-1"
       data-bs-toggle="modal"
       data-bs-target="#htmx-modal"
       hx-get="{% url 'htmx_object_selector' %}?_model={{ widget.attrs.selector }}&target={{ widget.attrs.id }}"

netbox/utilities/templates/widgets/markdown_input.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="border rounded markdown-widget"> 
+<div class="border rounded">
     <ul class="nav nav-tabs px-3 pt-2 rounded-top border-0">
         <li class="nav-item" role="presentation">
           <button class="nav-link active " id="{{ widget.name }}-input-tab" data-bs-toggle="tab" data-bs-target="#{{ widget.name }}-input" type="button" role="tab" aria-controls="{{ widget.name }}-input" aria-selected="true">
@@ -12,7 +12,7 @@
             </button>
           </li>
       </ul>
-      <div class="tab-content bg-body rounded-bottom border-top">
+      <div class="tab-content text-bg-body rounded-bottom border-top">
         <div class="tab-pane show active" id="{{ widget.name }}-input" role="tabpanel" aria-labelledby="{{ widget.name }}-input-tab">
         {% include "django/forms/widgets/textarea.html" %}
         </div>

netbox/utilities/templates/widgets/number_with_options.html

@@ -1,6 +1,6 @@
 <div class="input-group">
   {% include 'django/forms/widgets/number.html' %}
-  <button type="button" class="btn btn-outline-dark border-input dropdown-toggle" data-bs-toggle="dropdown"></button>
+  <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"></button>
   <ul class="dropdown-menu dropdown-menu-end">
     {% for value, label in widget.options %}
       <li>