diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 55c93ba2c..253391bb6 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 9a4d510b7..01dcd8062 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 20ebabab0..2e195cfc2 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 @@ -73,6 +69,11 @@ table th.orderable a { // Dark mode overrides body[data-bs-theme=dark] { + // Altering background colors + .card { + background: $rich-black!important; + } + // Background colors to match brand colors background-color: $rich-black; .navbar, .page-header { @@ -82,23 +83,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; - } - .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- { &muted { diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index e7dd35507..dc80af761 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,47 @@ } } } + +// Fixes bug where user loads page on dark mode, switches to light mode but filter is not removed +[data-bs-theme=dark] .navbar-brand-autodark .navbar-brand-image { + filter: none!important; +} + +// 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; + } + + // Override svg logo fill + .navbar-brand-autodark .navbar-brand-image { + filter: none!important; + } +} diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 6429fd1aa..c43755d77 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,33 @@ 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) { + color: $bright-teal; + } + .badge a { + color: inherit; + } + // 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); + } + } +} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 40e371826..c337d2441 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -19,7 +19,7 @@ Blocks:
{# Sidebar #} -