From e1cbe8775f5e6939b2393a54fb9fcc87e1b7cb2f Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sat, 15 Jan 2022 03:47:26 -0300
Subject: [PATCH] Improving contrast for UI tabs (#2076)

* Improving nav-tabs contrast

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>

* Improving nav-tabs contrast + prettier

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
---
 style/themes/default-dark.css   | 37 ++++++++++++++++++++-------------
 style/themes/default-darker.css | 12 +++++------
 style/themes/default-light.css  | 17 ++++++++++++++-
 3 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index c0444ab4..5e20e1d1 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -263,24 +263,36 @@ h4 {
 .nav-tabs-custom .tab-content {
   background-color: #30383f;
 }
-.nav-tabs-custom > .nav-tabs > li.active > a {
-  border-left-color: #353c42;
-  border-right-color: #353c42;
-  background-color: #272c30;
-  color: #bec5cb;
-}
-.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
-  border-left-color: #353c42;
+.nav-tabs-custom > .nav-tabs {
+  background: rgba(64, 72, 80, 0.666);
 }
 .nav-tabs-custom > .nav-tabs > li {
+  margin-right: 1px;
   color: #bec5cb;
 }
+.nav-tabs-custom > .nav-tabs > li.active > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  border-left-color: #30383f;
+  border-right-color: #30383f;
+  background-color: #30383f;
+  color: #bec5cb;
+}
+.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+  border-top-color: #d2d6de;
+  background-color: transparent;
+}
 .nav-tabs-custom > .nav-tabs > li > a {
-  color: #bec5cb;
+  color: #8e959b;
 }
 .nav-tabs-custom > .nav-tabs > li > a:focus {
-  background: #404850;
+  color: #3c8dbc;
 }
+.nav-tabs-custom > .nav-tabs > li:hover > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  background-color: #353c42;
+  color: #bec5cb;
+}
+
 .list-group {
   color: #bec5cb;
   background-color: #272c30;
@@ -452,11 +464,6 @@ div.dataTables_wrapper div.dataTables_length select {
   color: #bec5cb;
   border: 1px solid #3d444b;
 }
-.nav-tabs-custom > .nav-tabs > li:hover > a,
-.nav-tabs-custom > .nav-tabs > li.active:hover > a {
-  background-color: #353c42;
-  color: #bec5cb;
-}
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
index 85eb263b..391ba064 100644
--- a/style/themes/default-darker.css
+++ b/style/themes/default-darker.css
@@ -3330,16 +3330,18 @@ a:focus {
   box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px;
 }
 .nav-tabs-custom > .nav-tabs {
+  background: rgb(30, 40, 44);
   border-bottom-color: rgb(51, 55, 57);
 }
 .nav-tabs-custom > .nav-tabs > li {
   border-top-color: transparent;
+  margin-right: 1px;
 }
 .nav-tabs-custom > .nav-tabs > li.disabled > a {
   color: rgb(157, 148, 136);
 }
 .nav-tabs-custom > .nav-tabs > li > a {
-  color: rgb(189, 183, 175);
+  color: rgb(140, 144, 154);
 }
 .nav-tabs-custom > .nav-tabs > li > a.text-muted {
   color: rgb(168, 160, 149);
@@ -3352,10 +3354,8 @@ a:focus {
 .nav-tabs-custom > .nav-tabs > li > a:hover {
   color: rgb(168, 160, 149);
 }
-.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
-.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
-.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
-  border-color: transparent;
+.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+  background: rgb(24, 32, 35);
 }
 .nav-tabs-custom > .nav-tabs > li.active {
   border-top-color: rgb(44, 103, 137);
@@ -3392,7 +3392,7 @@ a:focus {
 }
 .nav-tabs-custom > .nav-tabs > li > a:focus,
 .nav-tabs-custom > .nav-tabs > li.active > a:focus {
-  color: rgb(95, 142, 170);
+  color: rgb(60, 140, 188);
 }
 
 .nav-tabs-custom.tab-primary > .nav-tabs > li.active {
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index 0ee69ccb..051c6b42 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -130,8 +130,23 @@
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 0;
 }
+
+.nav-tabs-custom > .nav-tabs {
+  background: #e4e8f0;
+}
+.nav-tabs-custom > .nav-tabs > li {
+  margin-right: 1px;
+}
+.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+  background: #fff;
+  border-top-color: #d2d6de;
+}
+.nav-tabs-custom > .nav-tabs > li > a,
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  color: #567;
+}
 .nav-tabs-custom > .nav-tabs > li > a:focus {
-  color: #60a4cc;
+  color: #3c8dbc;
 }
 
 .layout-top-nav .main-header > .logo {