Make tabular menu styling consistent for arc-green (#11570) (#11798)

* Make tabular menu styling consistent for arc-green

* rework completely

* transparent borders

* use darker color for active item; override only colors for borders

* Update web_src/less/themes/theme-arc-green.less

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: zeripath <art27@cantab.net>
(cherry picked from commit 4395c607ed79985602a99dda251f090fbd2f5cf9)

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index eabbe30a342be64a62ed82085c1c4c1f94406342..bfefb5298afbb5351274dc189a3a68c28890df48 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -385,22 +385,6 @@ a.ui.basic.green.label:hover {
     background-color: #2a2e3a;
 }
 
-.ui.tabular.menu .active.item {
-    background: #383c4a;
-    color: #dbdbdb;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-    border-top: 0;
-}
-
-.ui.tabular.menu .item {
-    color: #9e9e9e;
-}
-
-.ui.tabular.menu .item:hover {
-    color: #dbdbdb;
-}
-
 .ui.header,
 .ui.breadcrumb .divider {
     color: #9e9e9e;
@@ -531,15 +515,31 @@ a.ui.basic.green.label:hover {
     border-bottom: 1px solid #304251;
 }
 
-.repository.wiki.new .ui.container form .ui.tabular.menu {
-    border-bottom: 1px solid rgba(187, 187, 187, .6);
+.ui.tabular.menu {
+    border-bottom-color: rgba(187, 187, 187, .24);
+
+    .item.active {
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        background: #404552;
+        color: #dbdbdb;
+    }
+
+    .item {
+        color: #9e9e9e;
+    }
+
+    .item:hover {
+        color: #dbdbdb;
+    }
 
-    .active.item {
-        border-top: 1px solid rgba(187, 187, 187, .6);
-        border-left: 1px solid rgba(187, 187, 187, .6);
-        border-right: 1px solid rgba(187, 187, 187, .6);
-        &:hover {
-            background: #4b5162;
+    &.navbar {
+        .item.active {
+            background: #383c4a;
+            border-left-color: transparent;
+            border-right-color: transparent;
+            border-top: none;
         }
     }
 }
@@ -819,10 +819,6 @@ a.ui.basic.green.label:hover {
     color: #dbdbdb !important;
 }
 
-.ui.tabular.menu {
-    border-bottom: 1px solid #313c47;
-}
-
 .ui.card,
 .ui.cards > .card {
     background: #353945;