diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 11e881247..9d5efdc36 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 f64d91048..dd8a891c4 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/styles/sidenav.scss b/netbox/project-static/styles/sidenav.scss index 25f9a886c..651f19818 100644 --- a/netbox/project-static/styles/sidenav.scss +++ b/netbox/project-static/styles/sidenav.scss @@ -203,9 +203,9 @@ @include parent-link() { width: unset; height: 100%; + padding-left: $sidenav-link-spacing-x / 2; font-weight: $font-weight-bold; color: var(--nbx-sidenav-parent-color); - padding-left: $sidenav-link-spacing-x / 2; &.active { color: $accordion-button-active-color; @@ -260,20 +260,22 @@ // All Links .nav-link { + position: relative; display: flex; align-items: center; width: 100%; padding: $sidenav-link-spacing-y $sidenav-link-spacing-x; font-size: $font-size-sm; + color: var(--nbx-sidenav-link-color); white-space: nowrap; transition: $transition-100ms-ease-in-out; &.active { - position: relative; - background-color: var(--nbx-sidebar-link-hover-bg); + background-color: var(--nbx-sidebar-link-active-bg); } - &:hover { + &:hover:not(.active) { + color: var(--nbx-body-color); background-color: var(--nbx-sidebar-link-hover-bg); } @@ -290,7 +292,8 @@ display: block; font-size: $font-size-xs; font-weight: $font-weight-bold; - color: $secondary; + // color: $secondary; + color: var(--nbx-sidenav-group-color); text-transform: uppercase; white-space: nowrap; } diff --git a/netbox/project-static/styles/variables.scss b/netbox/project-static/styles/variables.scss index 51e1151ca..9d76bb9da 100644 --- a/netbox/project-static/styles/variables.scss +++ b/netbox/project-static/styles/variables.scss @@ -4,8 +4,8 @@ // Light Mode Variables. --nbx-sidebar-bg: #{$gray-200}; --nbx-sidebar-scroll: #{$gray-500}; - --nbx-sidebar-link-color: #{$gray-800}; - --nbx-sidebar-link-hover-bg: #{$blue-100}; + --nbx-sidebar-link-hover-bg: #{rgba($gray-600, 0.15)}; + --nbx-sidebar-link-active-bg: #{$blue-100}; --nbx-sidebar-title-color: #{$text-muted}; --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(0, 0, 0, 0.25); --nbx-breadcrumb-bg: #{$light}; @@ -21,15 +21,17 @@ --nbx-cable-termination-border-color: #{$gray-300}; --nbx-search-filter-border-left-color: #{$gray-300}; --nbx-color-mode-toggle-color: #{$primary}; + --nbx-sidenav-link-color: #{$gray-800}; --nbx-sidenav-pin-color: #{$orange}; --nbx-sidenav-parent-color: #{$gray-900}; + --nbx-sidenav-group-color: #{$secondary}; &[data-netbox-color-mode='dark'] { // Dark Mode Variables. --nbx-sidebar-bg: #{$gray-900}; --nbx-sidebar-scroll: #{$gray-700}; - --nbx-sidebar-link-color: #{$gray-100}; - --nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)}; + --nbx-sidebar-link-active-bg: #{rgba($blue-300, 0.25)}; + --nbx-sidebar-link-hover-bg: #{rgba($gray-500, 0.15)}; --nbx-sidebar-title-color: #{$gray-600}; --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(255, 255, 255, 0.05); --nbx-breadcrumb-bg: #{$gray-800}; @@ -45,7 +47,9 @@ --nbx-cable-termination-border-color: #{$gray-700}; --nbx-search-filter-border-left-color: #{$gray-600}; --nbx-color-mode-toggle-color: #{$yellow-300}; + --nbx-sidenav-link-color: #{$gray-200}; --nbx-sidenav-pin-color: #{$yellow}; --nbx-sidenav-parent-color: #{$gray-100}; + --nbx-sidenav-group-color: #{$gray-600}; } }