From a312311be9d4598fe134b7f7ab24125f085c0e6b Mon Sep 17 00:00:00 2001
From: Matt <mtt.lov@gmail.com>
Date: Fri, 6 Aug 2021 17:46:49 -0700
Subject: [PATCH] Improve sidenav link styles

---
 netbox/project-static/dist/netbox-dark.css  | Bin 806162 -> 806443 bytes
 netbox/project-static/dist/netbox-light.css | Bin 501024 -> 501305 bytes
 netbox/project-static/styles/sidenav.scss   |  13 ++++++++-----
 netbox/project-static/styles/variables.scss |  12 ++++++++----
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index 11e88124775e45861e7e2f1443faf4f1f861eede..9d5efdc363e7ad5d18ed851357d2203a955c2de4 100644
GIT binary patch
delta 396
zcmbO<%W(A^!-f{d7N!>F7M2#)7Pc1l7LF~Pi;AZ+1#<{ZUs%j(HhIMymFfQrIC-Xj
zDCN|iuG`MZvE8?Xa}CS%<V~zn(=SY9Wu3m?jYoKT!y;DU={l91veP#eb4qaMWaee-
zCg<nm7imuSsN`&&zSomSaQcTzPI0!x<dV#?)am_Ioc_XA8Tn<YMOJzFB^r7Van0#E
zJ)9QXYpXb=8K>_k<`iO0FUl`1n9lc?TVeZ-YR(w3>6ueG1%wPNbQBB?&4GlGsg8o4
zp{eGyNt_~3!?#;c;&f%2&OeD$ZhFlWPAeH}UERE-3f<z&l+?V$GF`Bd5a(GbOrO}w
zs5SlO6wW-D)AFWrN--NjOa$A;V{Qzz$ifgrSZ;5f%IU)-jPRkAf^w>5YI17Y^uj5e
eGSlx(=hVb+;l(aSopzlWoIuRAU1tXOvn>E>vxf8l

delta 258
zcmYkyKT85(0LO98yYu{=_D@MM(gJHZnhvrtTJ8l%V>BqPMPLx>Q8zr{;t)sP?@@xn
zwe{kGmgp6<G&D8VSg)WuYH9dRpYQFJ8&2FnXd)$aVF**Cg(WgErX4m<?IP#Dva`JQ
zVe++u9JSp{f!pWi8UsCN@S=}JuAHE%yko=$8yi?<Fg25>iwe)W5WE{$3(PmnJRgRz
z`PqlTrylkh^pNKJ3;uyhprl!~X1i5ywRv-ZB~|sYSLF94%G``lQ1>BrQd}Nki*lmX
sC`UNthy3F*OA+RDx9;#UL`C@#oZoqd&k_#hk+weY#z?Z2H_pDrKj2MTUjP6A

diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index f64d9104882a17bab8264b6a3621c01545e4ceb0..dd8a891c45219d0f0c545f8ed0efdc006a3826fc 100644
GIT binary patch
delta 439
zcmZ2*N^a*FxrP?T7N!>F7M3ln0Y@g+6-Z3qk;g7S-SRf80Hfygz!R*R)At=?6`1aO
ziIrpf%_FRfm?syt$xrX|ViBI6pUW&feccIG*~$BR*`^=g!^+2>msqBolbM&To1CAM
zU!*x*(SliI`n?mZ{?m6ZVi%kqaFSJ=D>1nwvn*9NDIH?IuvJEWS!$70UVe#&9z;%a
z`n9X97Sjuku(C|wf0Fg`^pkn)e4HS&(~I&;3#LEFV^`R|=@jcfUKy}npjlQ5Md?Y2
z8iocIItqq{=0L*8bo&3>tfJgt=RnNee*FfkE7SDVH(2GSOWbC)QnuFB%}c7#EzV3y
zg_{m>x|M>mS+cpQdCK(J(^<8r*WPAzQHDDlW|^S@&>l0OjYg&>ItqG5rkc~w-)2?e
zF*gQ^TNr`}%k4l%_%I100tIMts%2_&YT9((+pIFvBklo%_`n@jb{TxGXm7m7y1nrp
H+x%kye*d0Z

delta 271
zcmdmaMsC3=xrP?T7N!>F7M3ln0Y|1AK4TS|{@@g=(Dd#jth~b31&JvsnR)5DIjLzS
zR(hsIskzewPq1oE-*=2vVEe@*tgD!(H+r!sOwZ3{7M_0K1gq?HB?}-+<Rq*A<VONR
z(~~Wk1*Z!vWapY*caoKNy4WdJqv`ujva(H2e+aY#MdB2@vRSgZsd>t@0(Qym;-^{v
z@lI#F#VR^|!);cU={z@Cg|~;@WOZPgUVWOCbNa#Cth&<$@37|cCFkel7g;GNr&**~
zrX@~iyveG<V`!kGU}$EcqhMreGTrbd(2$&)tlpEwx%sy{-DSPY2r<L!KC5o~toy9n
KXWeI;e+&SY3Ss#G

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};
   }
 }