diff --git a/netbox/project-static/dist/config.js b/netbox/project-static/dist/config.js index 9a70cba92..c1ea8e0c0 100644 Binary files a/netbox/project-static/dist/config.js and b/netbox/project-static/dist/config.js differ diff --git a/netbox/project-static/dist/config.js.map b/netbox/project-static/dist/config.js.map index 4df3fe996..3279ff836 100644 Binary files a/netbox/project-static/dist/config.js.map and b/netbox/project-static/dist/config.js.map differ diff --git a/netbox/project-static/dist/jobs.js b/netbox/project-static/dist/jobs.js index 248670053..cb5fc1876 100644 Binary files a/netbox/project-static/dist/jobs.js and b/netbox/project-static/dist/jobs.js differ diff --git a/netbox/project-static/dist/jobs.js.map b/netbox/project-static/dist/jobs.js.map index c4f72f2e4..92b309a32 100644 Binary files a/netbox/project-static/dist/jobs.js.map and b/netbox/project-static/dist/jobs.js.map differ diff --git a/netbox/project-static/dist/lldp.js b/netbox/project-static/dist/lldp.js index acc6b1665..49b8d8086 100644 Binary files a/netbox/project-static/dist/lldp.js and b/netbox/project-static/dist/lldp.js differ diff --git a/netbox/project-static/dist/lldp.js.map b/netbox/project-static/dist/lldp.js.map index a534001f5..d133a775e 100644 Binary files a/netbox/project-static/dist/lldp.js.map and b/netbox/project-static/dist/lldp.js.map differ diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 0083825e0..f76ea1c7f 100644 Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 2f5b2a366..bca530a97 100644 Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index ce38c47ef..8495c2e19 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index e54bdfe98..658249345 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/dist/status.js b/netbox/project-static/dist/status.js index 62d5253a4..5da6d0980 100644 Binary files a/netbox/project-static/dist/status.js and b/netbox/project-static/dist/status.js differ diff --git a/netbox/project-static/dist/status.js.map b/netbox/project-static/dist/status.js.map index 779623b85..dc885d245 100644 Binary files a/netbox/project-static/dist/status.js.map and b/netbox/project-static/dist/status.js.map differ diff --git a/netbox/project-static/src/bs.ts b/netbox/project-static/src/bs.ts index ecd7e5592..af87b481e 100644 --- a/netbox/project-static/src/bs.ts +++ b/netbox/project-static/src/bs.ts @@ -34,16 +34,16 @@ export function createToast( message: string, extra?: string, ): Toast { - let iconName = 'bi-exclamation-triangle-fill'; + let iconName = 'mdi-alert'; switch (level) { case 'warning': - iconName = 'bi-exclamation-triangle-fill'; + iconName = 'mdi-alert'; case 'success': - iconName = 'bi-check-circle-fill'; + iconName = 'mdi-check-circle'; case 'info': - iconName = 'bi-info-circle-fill'; + iconName = 'mdi-information'; case 'danger': - iconName = 'bi-exclamation-triangle-fill'; + iconName = 'mdi-alert'; } const container = document.createElement('div'); @@ -59,7 +59,7 @@ export function createToast( header.setAttribute('class', `toast-header bg-${level} text-body`); const icon = document.createElement('i'); - icon.setAttribute('class', `bi ${iconName}`); + icon.setAttribute('class', `mdi ${iconName}`); const titleElement = document.createElement('strong'); titleElement.setAttribute('class', 'me-auto ms-1'); diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index abd9ccf4a..038fa12d9 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -94,12 +94,37 @@ margin-bottom: $spacer; } +// 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; } -// Use proper contrasting color foreground color for special components. @each $color, $value in $theme-colors { + // Override CSS values on each theme color. + + // Use Bootstrap's method of coloring alert links to appropriately color close buttons within + // another colored element. + // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52 + // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_close.scss#L12 + $shaded-color: shade-color(mix($value, color-contrast($value), abs($alert-color-scale)), 5%); + $btn-close-bg: url("data:image/svg+xml,"); + .bg-#{$color} button.btn-close { + background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; + } + + // Use Bootstrap's method of coloring the .alert-link class automatically. + // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52 + .toast.bg-#{$color}, + .alert.alert-#{$color} { + a { + color: $shaded-color; + font-weight: $font-weight-bold; + } + } + + // Use proper contrasting color foreground color for special components. .badge, .toast, .progress-bar { @@ -107,11 +132,11 @@ color: color-contrast($value); } } - // Use proper foreground color in the alert body. Note: this is applied to a, p, & small because + + // Use proper foreground color in the alert body. Note: this is applied to p, & small because // we *don't* want to override the h1-h6 colors for alerts, since those are set to a color // similar to the alert color. .alert.alert-#{$color} { - a, p, small { color: color-contrast($value); @@ -926,8 +951,9 @@ div.card > div.card-header > div.table-controls { border-bottom: 1px solid $nav-tabs-border-color; } -// Shade the home page content background-color. -body { +// Page-specific styles. +html { + // Shade the home page content background-color. &[data-netbox-path='/'] { .content-container, .search { @@ -940,4 +966,11 @@ body { } } } + + // Don't show the django-messages toasts on the login screen in favor of the alert component. + &[data-netbox-path*='/login'] { + #django-messages { + display: none; + } + } } diff --git a/netbox/project-static/styles/theme-base.scss b/netbox/project-static/styles/theme-base.scss index 8dafd5e16..35534de20 100644 --- a/netbox/project-static/styles/theme-base.scss +++ b/netbox/project-static/styles/theme-base.scss @@ -128,6 +128,10 @@ $font-family-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMa $font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; +// This is the same value as the default from Bootstrap, but it needs to be in scope prior to +// importing _variables.scss from Bootstrap. +$btn-close-width: 1em; + $accordion-padding-y: 0.8125rem; $accordion-padding-x: 0.8125rem; diff --git a/netbox/project-static/styles/theme-dark.scss b/netbox/project-static/styles/theme-dark.scss index a2f675554..fae66e1f1 100644 --- a/netbox/project-static/styles/theme-dark.scss +++ b/netbox/project-static/styles/theme-dark.scss @@ -46,6 +46,7 @@ $link-hover-color: $blue-100; // Alerts $alert-bg-scale: -5%; $alert-border-scale: -20%; +$alert-color-scale: 20%; // Tables $table-color: $gray-100; @@ -261,15 +262,8 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100); // Close $btn-close-color: $white; $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); - $btn-close-bg: url("data:image/svg+xml,"); -@each $color, $value in $theme-colors { - .bg-#{$color} button.btn-close { - background: url("data:image/svg+xml,"); - } -} - // Code $code-color: $gray-200; $kbd-color: $white; diff --git a/netbox/templates/inc/messages.html b/netbox/templates/inc/messages.html index 352777564..409117efe 100644 --- a/netbox/templates/inc/messages.html +++ b/netbox/templates/inc/messages.html @@ -1,39 +1,59 @@ +{% load helpers %} +
+ {# Django Messages #} + {% if messages %} {% for message in messages %} -