diff --git a/netbox/dcim/tables/template_code.py b/netbox/dcim/tables/template_code.py
index f78908218..8e382dd66 100644
--- a/netbox/dcim/tables/template_code.py
+++ b/netbox/dcim/tables/template_code.py
@@ -35,23 +35,19 @@ DEVICEBAY_STATUS = """
"""
INTERFACE_IPADDRESSES = """
-
"""
INTERFACE_FHRPGROUPS = """
-
"""
INTERFACE_TAGGED_VLANS = """
diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 129bcdb48..979aa662c 100644
Binary files a/netbox/project-static/dist/netbox.css and b/netbox/project-static/dist/netbox.css differ
diff --git a/netbox/project-static/styles/custom/_code.scss b/netbox/project-static/styles/custom/_code.scss
new file mode 100644
index 000000000..3b95aeaf5
--- /dev/null
+++ b/netbox/project-static/styles/custom/_code.scss
@@ -0,0 +1,40 @@
+// Serialized data from change records
+pre.change-data {
+ padding-right: 0;
+ padding-left: 0;
+
+ // Display each line individually for highlighting
+ > span {
+ display: block;
+ padding-right: $spacer;
+ padding-left: $spacer;
+
+ &.added {
+ background-color: $green;
+ }
+
+ &.removed {
+ background-color: $red;
+ }
+ }
+}
+
+// Change data diff w/added & removed data
+pre.change-diff {
+ border-color: transparent;
+
+ &.change-added {
+ background-color: $green;
+ }
+
+ &.change-removed {
+ background-color: $red;
+ }
+}
+
+// elements displayed with a border
+pre.block {
+ padding: $spacer;
+ border: 1px;
+ border-radius: $border-radius;
+}
diff --git a/netbox/project-static/styles/custom/_misc.scss b/netbox/project-static/styles/custom/_misc.scss
index e80bccd61..42ea9a8c6 100644
--- a/netbox/project-static/styles/custom/_misc.scss
+++ b/netbox/project-static/styles/custom/_misc.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
// Color labels
span.color-label {
display: block;
@@ -37,3 +39,22 @@ span.color-label {
}
}
+
+// Object hierarchy depth indicators
+.record-depth {
+ display: inline;
+ user-select: none;
+ opacity: 33%;
+
+ // Add spacing to the last or only dot.
+ span:only-of-type,
+ span:last-of-type {
+ margin-right: map.get($spacers, 1);
+ }
+}
+
+// Hides the last child of an element
+.hide-last-child :last-child {
+ visibility: hidden;
+ opacity: 0;
+}
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 5895701da..f86c4433f 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -18,4 +18,5 @@
@import 'transitional/tabs';
// Custom styling
+@import 'custom/code';
@import 'custom/misc';
diff --git a/netbox/project-static/styles/old/netbox.scss b/netbox/project-static/styles/old/netbox.scss
deleted file mode 100644
index 5f840fa1e..000000000
--- a/netbox/project-static/styles/old/netbox.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-// NetBox-specific Styles and Overrides.
-
-@use 'sass:map';
-@use 'sass:math';
-//@import './sidenav';
-@import './overrides';
-@import './utilities';
-//@import './variables';
-
-// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
-// assigned to interfaces.
-table .table-badge-group {
- .table-badge {
- display: block;
- width: min-content;
- font-size: $font-size-sm;
- font-weight: $font-weight-base;
-
- &:not(.badge) {
- // Apply badge horizontal padding so that IP addresses *not* within a badge appear aligned
- // with IP addresses that *are* within a badge.
- padding: 0 $badge-padding-x;
- }
-
- &.badge:not(:last-of-type):not(:only-child) {
- margin-bottom: map.get($spacers, 1);
- }
- }
-}
-
-pre.change-data {
- padding-right: 0;
- padding-left: 0;
-
- > span {
- display: block;
- padding-right: $spacer;
- padding-left: $spacer;
-
- &.added {
- background-color: var(--nbx-change-added);
- }
-
- &.removed {
- background-color: var(--nbx-change-removed);
- }
- }
-}
-
-pre.change-diff {
- border-color: transparent;
-
- &.change-removed {
- background-color: var(--nbx-change-removed);
- }
-
- &.change-added {
- background-color: var(--nbx-change-added);
- }
-}
-
-div.card-overlay {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- background-color: rgba($white, 0.75);
- border-radius: $border-radius;
-
- > div.spinner-border {
- width: 6rem;
- height: 6rem;
- color: $secondary;
- }
-}
-
-.table-controls {
- display: flex;
-
- @include media-breakpoint-up(md) {
- // `!important` needed because of inherited margin-bottom from `.col`
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- }
-
- .table-configure {
- justify-content: flex-start;
-
- @include media-breakpoint-up(md) {
- justify-content: flex-end;
- }
- }
-
- .form-switch.form-check-inline {
- flex: 1 0 auto;
- font-size: $font-size-sm;
- }
-}
-
-// 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.
- border-bottom-color: transparent;
- }
- &.active {
- // Set the background-color of an active tab to the same color as the .tab-content
- // background-color so it visually indicates which tab is open.
- background-color: $tab-content-bg;
- border-bottom-color: $tab-content-bg;
- // Move the active tab down 1px to overtake the .nav-tabs element's border, but only for that
- // tab. This is an ugly hack, but it works.
- transform: translateY(1px);
- }
- }
-}
-
-.tab-content {
- display: flex;
- flex-direction: column;
- padding: $spacer;
-}
-
-// Object hierarchy indicators.
-.record-depth {
- display: inline;
- font-size: $font-size-base;
- user-select: none;
- opacity: 0.33;
-
- // Add spacing to the last or only dot.
- span:only-of-type,
- span:last-of-type {
- margin-right: map.get($spacers, 1);
- }
-}
-
-// Remove the max-width from image preview popovers as this is controlled on the image element.
-.popover.image-preview-popover {
- max-width: unset;
-}
-
-/* Markdown widget */
-.markdown-widget {
- .nav-link {
- border-bottom: 0;
-
- &.active {
- background-color: var(--nbx-body-bg);
- }
- }
-
- .nav-tabs {
- background-color: var(--nbx-pre-bg);
- }
-}
-
-// Preformatted text blocks
-td pre {
- margin-bottom: 0;
-}
-pre.block {
- padding: $spacer;
- background-color: var(--nbx-pre-bg);
- border: 1px solid var(--nbx-pre-border-color);
- border-radius: $border-radius;
-}
-
-#django-messages {
- position: fixed;
- right: $spacer;
- bottom: 0;
- margin: $spacer;
-}
-
-// Page-specific styles.
-html {
- // Shade the home page content background-color.
- &[data-netbox-url-name='home'] {
- .content-container,
- .search {
- background-color: $gray-100 !important;
- }
- &[data-netbox-color-mode='dark'] {
- .content-container,
- .search {
- background-color: $darkest !important;
- }
- }
- }
-
- // Don't show the django-messages toasts on the login screen in favor of the alert component.
- &[data-netbox-url-name='login'] {
- #django-messages {
- display: none;
- }
- }
-}
diff --git a/netbox/project-static/styles/old/overrides.scss b/netbox/project-static/styles/old/overrides.scss
deleted file mode 100644
index e7643eaea..000000000
--- a/netbox/project-static/styles/old/overrides.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Overrides to native HTML elements (i.e., not bootstrap classes or custom components).
-
-body {
- color: var(--nbx-body-color);
- background-color: var(--nbx-body-bg);
- font-size: $font-size-sm;
-}
-
-pre {
- white-space: pre;
-}
-
-// Force elements to make text smaller.
-small {
- font-size: smaller !important;
-}
-
-// Fix the hideous way Safari shows button anchor elements.
-a[type='button'] {
- -webkit-appearance: unset !important;
-}
-
-// Ensure elements with data-href set show the correct cursor.
-// data-href is set on non non-anchor elements that need to redirect the user to a URL when
-// clicked, but where an anchor element does not suffice or is not supported.
-*[data-href] {
- cursor: pointer;
-}
-
-.form-control:not([type='file']) {
- font-size: inherit;
-}
-
-.badge {
- font-size: $font-size-xs;
-}
-
-/* clears the 'X' in search inputs from webkit browsers */
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
- -webkit-appearance: none !important;
-}
-
-// Remove x-axis padding from highlighted text
-mark {
- padding-left: 0;
- padding-right: 0;
-}
\ No newline at end of file
diff --git a/netbox/project-static/styles/old/utilities.scss b/netbox/project-static/styles/old/utilities.scss
deleted file mode 100644
index a5a4bf038..000000000
--- a/netbox/project-static/styles/old/utilities.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Custom Utility classes.
-
-// Utility class for extra-small text.
-.text-xs {
- font-size: $font-size-xs !important;
- line-height: $line-height-sm !important;
-}
-
-// Add a border color that mimics the appearance of a form element.
-.border-input {
- border: $input-border-width solid $input-border-color !important;
-}
-
-// Force no line wrapping.
-.ws-nowrap {
- white-space: nowrap !important;
-}
-
-// Vertically align table rows/cells.
-table tr,
-table td {
- .vertical-align {
- vertical-align: middle;
- }
-}
-
-// Hide element when printing.
-.noprint {
- @media print {
- display: none !important;
- visibility: hidden !important;
- }
-}
-
-// Only show element when printing, otherwise hide.
-.printonly {
- display: none !important;
- visibility: hidden !important;
-
- @media print {
- display: block !important;
- visibility: visible !important;
- }
-}
-
-// Hides the last child of an element
-.hide-last-child :last-child {
- visibility: hidden;
- opacity: 0;
-}
diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss
index af1ea81bd..6ac17c59c 100644
--- a/netbox/project-static/styles/transitional/_tables.scss
+++ b/netbox/project-static/styles/transitional/_tables.scss
@@ -39,3 +39,8 @@ table.attr-table {
}
}
+
+// Remove bottom margin from elements inside table cells
+td pre {
+ margin-bottom: 0;
+}
diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
index 1e5acedb2..0725be056 100644
--- a/netbox/templates/dcim/device.html
+++ b/netbox/templates/dcim/device.html
@@ -30,7 +30,7 @@
{% if object.rack %}
{{ object.rack|linkify }}
-
+
@@ -64,7 +64,7 @@
{% if object.latitude and object.longitude %}
{% if config.MAPS_URL %}
- | |