Make tabs smaller (#12003)

* Make tabs smaller

Fomantic's tabs are excessively wide and with another tab added on the
repo tabbar (https://github.com/go-gitea/gitea/pull/8346) it would break
the layout on the english language.

Globally reduce tab bar padding to around half of the previous values.

* disable no-duplicate-selectors linter rule

* more tab bar tweaks

* more tweaks

* merge rules and nesting

* remove arc-green weird hover color

* few more arc-green tweaks

* restore to 12px

* tweaks

* use half width height padding

* final tweak

* 10px

* remove min-height

* 11px

* remve new-menu background on light theme too

* background fixes for new-menu

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

3 files changed, 42 insertions, 26 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index f99e07199e..08bc178595 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -887,7 +887,7 @@ footer {
     padding-top: 15px !important;
     margin-top: -15px !important;
     margin-bottom: 15px !important;
-    background-color: #fafafa !important;
+    background: #fafafa;
     border-width: 1px !important;
 }
 
@@ -895,7 +895,7 @@ footer {
     .ui.menu.new-menu {
         overflow-x: auto !important;
         justify-content: left !important;
-        padding-bottom: 5px;
+        padding-bottom: 2px;
     }
 
     .ui.menu.new-menu::-webkit-scrollbar {
@@ -1011,19 +1011,6 @@ footer {
     margin-top: 3em !important;
 }
 
-/* Tab color tweaks */
-.ui.tabular.menu .item {
-    color: rgba(0, 0, 0, .5);
-}
-
-.ui.tabular.menu .item:hover {
-    color: rgba(0, 0, 0, .8);
-}
-
-.ui.tabular.menu .item.active {
-    color: rgba(0, 0, 0, .9);
-}
-
 /* multiple radio or checkboxes as inline element */
 .inline-grouped-list {
     display: inline-block;
@@ -1300,3 +1287,23 @@ i.icon.centerlock {
 .ui.sub.header {
     text-transform: none;
 }
+
+.ui.tabular.menu {
+    .item {
+        padding: 11px 12px;
+        color: rgba(0, 0, 0, .5);
+    }
+
+    .item:hover {
+        color: rgba(0, 0, 0, .8);
+    }
+
+    .item.active {
+        color: rgba(0, 0, 0, .9);
+        margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
+    }
+}
+
+.ui.secondary.pointing.menu .item {
+    padding: 12px;
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 76e6729c35..7bdfe6611f 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3037,3 +3037,13 @@ td.blob-excerpt {
 .added-code {
     background-color: #99ff99;
 }
+
+.repository .ui.menu.new-menu {
+    background: none !important;
+
+    @media only screen and (max-width: 1200px) {
+        &:after {
+            background: none !important;
+        }
+    }
+}
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 718c7b38f4..3c83d1cc8b 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -516,13 +516,13 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.tabular.menu {
-    border-bottom-color: rgba(187, 187, 187, .24);
+    border-bottom-color: rgba(255, 255, 255, .1);
 
     .item.active {
         border-top-color: transparent;
         border-left-color: transparent;
         border-right-color: transparent;
-        background: #404552;
+        background: #383c4a;
         color: #dbdbdb;
     }
 
@@ -536,10 +536,8 @@ a.ui.basic.green.label:hover {
 
     &.navbar {
         .item.active {
-            background: #383c4a;
             border-left-color: transparent;
             border-right-color: transparent;
-            border-top: none;
         }
     }
 }
@@ -857,10 +855,12 @@ a.ui.basic.green.label:hover {
     background: #353945;
 }
 
+.ui.secondary.pointing.menu {
+    border-bottom-color: rgba(255, 255, 255, .15);
+}
+
 .ui.secondary.pointing.menu .active.item {
     color: #dbdbdb;
-    border: 0;
-    background: #383c4a;
 }
 
 .ui.user.list .item:not(:first-child) {
@@ -868,9 +868,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.secondary.pointing.menu .active.item:hover {
-    border-color: #af8b4c;
     color: #dbdbdb;
-    background: #4b5162;
 }
 
 .ui.secondary.pointing.menu .dropdown.item:hover,
@@ -902,11 +900,12 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.menu.new-menu {
-    background-color: #2a2e3a !important;
+    background: #2a2e3a;
+    border-color: transparent !important;
 
     @media only screen and (max-width: 1200px) {
         &:after {
-            background-image: linear-gradient(to right, rgba(42, 46, 42, 0), rgba(42, 46, 42, 1) 100%);
+            background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
         }
     }
 }
@@ -1359,7 +1358,7 @@ a.ui.labels .label:hover {
             background: #404552;
         }
 
-        border-color: rgba(187, 187, 187, .24);
+        border-color: rgba(255, 255, 255, .15);
     }
 
     .footer {