Reduce nav tab border width and adjust sidebar padding for improved layout (#2040)

Author: clicktodev

assets/css/custom-props/common.css

@@ -3,7 +3,7 @@
   --content-width: 949px;
   --content-gutter: 60px;
   --borderRadius: 8px;
-  --navTabBorderWidth: 4px;
+  --navTabBorderWidth: 2px;
 
   /* Font Families */
   --defaultFontFamily: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,

assets/css/sidebar.css

@@ -144,7 +144,7 @@
 .sidebar .sidebar-list-nav {
   display: flex;
   margin: 0;
-  padding: 4px 4px 0 4px;
+  padding: 0px;
   overflow: auto;
   scrollbar-width: thin;
 }
@@ -173,24 +173,22 @@
   cursor: pointer;
   display: inline-block;
   line-height: 27px;
-  padding: 4px 10px 2px 10px;
+  padding: 4px 14px 4px 14px;
   transition: var(--transition-all);
 }
 
 .sidebar .sidebar-list-nav button {
-  border-top: var(--navTabBorderWidth) solid var(--sidebarHeader);
+  border-bottom: var(--navTabBorderWidth) solid transparent;
 }
 
 .sidebar .sidebar-list-nav button:not([aria-selected]):hover {
-  background-color: var(--sidebarInactiveItemMarker);
-  border-top: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
+  border-bottom: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
   color: var(--sidebarAccentMain);
   transition: var(--transition-all);
 }
 
 .sidebar .sidebar-list-nav button[aria-selected] {
-  background-color: var(--sidebarBackground);
-  border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+  border-bottom: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
 }
 
 .sidebar .sidebar-tabpanel {
@@ -243,7 +241,7 @@
 .sidebar .full-list a {
   margin-right: 30px;
   padding: 3px 0 3px 12px;
-  border-left: 3px solid transparent;
+  border-left: var(--navTabBorderWidth) solid transparent;
   color: var(--sidebarItem);
 }