diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index fc7f3ca9d..e7181e52f 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/logo_netbox_bright_teal.svg b/netbox/project-static/img/logo_netbox_bright_teal.svg new file mode 100644 index 000000000..958a1d401 --- /dev/null +++ b/netbox/project-static/img/logo_netbox_bright_teal.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/netbox/project-static/img/logo_netbox_dark_teal.svg b/netbox/project-static/img/logo_netbox_dark_teal.svg new file mode 100644 index 000000000..5e4d36173 --- /dev/null +++ b/netbox/project-static/img/logo_netbox_dark_teal.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss index bf73f8361..04bb37c05 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -33,4 +33,4 @@ $dark-teal: #00857D; $primary: $dark-teal; // Navbar active dropdown border color -$navbar-active-border-color: $bright-teal; +$navbar-active-border-color: $dark-teal; diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index c84274a21..fba5e6f3c 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -32,16 +32,12 @@ pre { // Dropdown items .dropdown-item { // Tabler sets display: flex - display: inline-block;; -} - -table th.orderable a { - color: var(--#{$prefix}body-color); + display: inline-block; } // Override background color alpha value [data-bs-theme=dark] ::selection { - background-color: rgba(var(--tblr-primary-rgb),.48) + background-color: rgba(var(--tblr-primary-rgb),.48); } // Dark mode colors @@ -95,6 +91,21 @@ table th.orderable a { // Dark mode overrides body[data-bs-theme=dark] { + // Change content color when primary teal changes with theme + .bg-primary { + .card-title,a,i { + color: $rich-black!important; + } + } + .text-bg-primary { + color: $rich-black!important; + } + + // Altering background colors + .card { + background: $rich-black!important; + } + // Background colors to match brand colors background-color: $rich-black; .navbar, .page-header { @@ -104,26 +115,6 @@ body[data-bs-theme=dark] { background-color: $rich-black-light!important; } - // Adjust dark table link color without affecting buttons and badges - table { - a { - color: $bright-teal; - &.dropdown-item { - color: inherit; - } - } - .badge a { - color: inherit; - } - .btn { - color: var(--#{$prefix}body-color); - } - // Stops table headers from appearing as primary link color - th.orderable a { - color: var(--#{$prefix}body-color); - } - } - // Adjusting text colors .text- { &bg-primary { diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index e7dd35507..4c16ab3de 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -1,26 +1,32 @@ -// Navbar styling +// Navbar and light theme styling .navbar-vertical.navbar-expand-lg { - background-color: $rich-black; - .dropdown-item { - color: white!important; - } - .text-secondary { - color: $bright-teal!important; - } + // 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 { + color: var(--tblr-nav-link-color)!important; + } + .text-secondary { + color: $dark-teal!important; + } + .dropdown-menu { + + // Adjust hover color & style for menu items .dropdown-item { a { - color: inherit; + color: $rich-black; } .btn-group { visibility: hidden; } - // Adjust hover color & style for menu items + // Style menu item hover state &:hover { - background-color: $gray-700; + background-color: var(--tblr-navbar-active-bg); a { text-decoration: none; } @@ -31,9 +37,9 @@ // Style active menu item &.active { - background-color: $gray-700; + background-color: var(--tblr-navbar-active-bg); a { - color: white; + color: $rich-black; } .btn-group { visibility: visible; @@ -44,3 +50,37 @@ } } } + +// Dark theme styling +body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg { + + // Background Gradient + background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423; + + // Border color for active dropdown list + .nav-item.dropdown.active:after { + border-color: $bright-teal!important; + } + + // Adjust hover color & style for menu items + .dropdown-item { + a { + color: white!important; + } + &.active { + background-color: $navbar-dark-active-bg!important; + a { + color: white!important; + } + } + &:hover { + background-color: $navbar-dark-active-bg!important; + } + .nav-link-title { + color: white!important; + } + } + .text-secondary { + color: $bright-teal!important; + } +} diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 6429fd1aa..2d90e6524 100644 --- a/netbox/project-static/styles/transitional/_tables.scss +++ b/netbox/project-static/styles/transitional/_tables.scss @@ -1,6 +1,11 @@ // Object list tables table.object-list { + // Adjust object list link color without affecting buttons + a:not(.btn) { + color: var(--#{$prefix}body-color); + } + // Hide border of last row tbody > tr:last-child > td { border-bottom-width: 0; @@ -48,3 +53,30 @@ table.attr-table { td pre { margin-bottom: 0; } + +table th.orderable a { + color: var(--#{$prefix}body-color); +} + +body[data-bs-theme=dark] { + .table thead th, .markdown>table thead th { + background: $rich-black!important; + } + + // Adjust dark table link color without affecting buttons and badges + table { + a:not(.btn,.badge a) { + color: $bright-teal; + } + // Stops table headers from appearing as primary link color + th.orderable a { + color: var(--#{$prefix}body-color); + } + } + + table.object-list { + a { + color: var(--#{$prefix}body-color)!important; + } + } +} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 40e371826..74062c25a 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -19,7 +19,7 @@ Blocks:
{# Sidebar #} -