diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 94a34ecb5..0d9ddb95d 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/img/motif.svg b/netbox/project-static/img/motif.svg new file mode 100644 index 000000000..11a49f454 --- /dev/null +++ b/netbox/project-static/img/motif.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index 4c16ab3de..1de4948b2 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -1,9 +1,6 @@ // Navbar and light theme styling .navbar-vertical.navbar-expand-lg { - // Background Gradient - background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF; - // Adjust hover color & style for menu items .navbar-collapse { .nav-link-icon { @@ -49,6 +46,55 @@ } } } + + // Ensures theme toggle appears above background image + .navbar-nav { + z-index: 1; + } + + // Logo text for non-community editions + .navbar-brand { + + // Reduce logo padding on mobile view + @include media-breakpoint-down(lg) { + padding: 0.2rem 0; + } + + a:hover { + text-decoration: none; + } + .netbox-edition { + font-size: .7rem; + letter-spacing: .15rem; + text-align: center; + } + } + + // Navigation geometric graphic for non-community editions + img.motif { + bottom: 0; + display: none; + left:0; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%); + opacity: .5; + position: fixed; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; + width:18rem; + + @include media-breakpoint-up(lg) { + display: block; + } + } +} + +// Light theme styling +body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg { + background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF; } // Dark theme styling @@ -83,4 +129,8 @@ body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg { .text-secondary { color: $bright-teal!important; } + + img.motif { + opacity: .25; + } } diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index fad748a2f..2f6030f24 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -20,6 +20,11 @@ Blocks: {# Sidebar #}