Revert to linear gradient, fix webkit-scrollbar

Author: CL-Jeremy

templates/repo/header.tmpl

@@ -167,6 +167,7 @@
 	<div class="df">
 		<div class="ui tabs divider f1"></div>
 		<div class="ui tabs divider container mx-0"></div>
+		<div class="ui tabs divider spacer"></div>
 		<div class="ui tabs divider f1"></div>
 	</div>
 {{end}}

web_src/less/_base.less

@@ -249,12 +249,12 @@ a.muted:hover,
 
 .page-content {
   margin-top: 15px;
-}
 
-.page-content .header-wrapper,
-.page-content .new-menu {
-  margin-top: -15px !important;
-  padding-top: 15px !important;
+  .header-wrapper,
+  .new-menu {
+    margin-top: -15px !important;
+    padding-top: 15px !important;
+  }
 }
 
 .ui.input.focus > input,
@@ -1238,35 +1238,33 @@ footer {
   margin-bottom: 15px;
   background: var(--color-navbar);
   border-bottom: 1px solid var(--color-secondary) !important;
-  overflow: auto;
-
-  @media @mediaSm {
-    & {
-      overflow: visible !important;
-    }
-  }
+  overflow-y: visible;
 
-  &::before,
-  &::after {
-    height: 38px !important;
-  }
-}
+  .new-menu-inner {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-left: auto;
+    margin-right: auto;
 
-.ui.menu.new-menu .new-menu-inner {
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
+    @media @mediaSm {
+      & {
+        flex-wrap: wrap;
+        overflow: visible !important;
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
 
-  @media @mediaSm {
-    & {
-      flex-wrap: wrap;
-      margin-left: 0;
-      margin-right: 0;
+    &::before,
+    &::after {
+      height: 38px !important;
     }
   }
 }
 
 .ui.menu.new-menu .item {
+  height: 40px;
   margin: 0 !important;
 }
 
@@ -1276,12 +1274,8 @@ footer {
   }
 }
 
-.ui.menu.new-menu .item:last-child {
-  padding-right: 30px !important;
-}
-
 .ui.tabs.container .ui.menu,
-.ui.menu.new-menu {
+.ui.menu.new-menu .new-menu-inner {
   &::before,
   &::after {
     content: "";
@@ -1294,31 +1288,34 @@ footer {
   }
 
   &::before {
-    background: radial-gradient(circle at 1100% 0, var(--color-navbar-transparent) 90.625%, var(--color-navbar) 95%);
+    background: linear-gradient(to left, var(--color-navbar-transparent), var(--color-navbar) 75%);
     left: 0;
     z-index: 1;
   }
 
   &::after {
-    background: radial-gradient(circle at -1000% 0, var(--color-navbar-transparent) 90.625%, var(--color-navbar) 95%);
+    background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 75%);
     right: 0;
   }
 
   &::-webkit-scrollbar {
-    height: 6px;
+    height: 10px;
     display: none;
   }
 
   &::-webkit-scrollbar-track {
-    background: none !important;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    box-shadow: none !important;
+    background: none;
   }
+  /* Exclude Firefox */
+  @supports (-webkit-appearance:none) and (not (-moz-appearance:none)) {
+    &:hover {
+      overflow-x: scroll !important;
+      margin-bottom: -10px !important;
 
-  &:hover::-webkit-scrollbar {
-    display: block;
+      &::-webkit-scrollbar {
+        display: block;
+      }
+    }
   }
 }
 

web_src/less/_repository.less

@@ -39,8 +39,9 @@
     justify-content: space-between;
 
     .ui.label {
-      margin-left: 7px;
-      padding: 3px 5px;
+      margin: -3px 0;
+      margin-left: 7px !important;
+      padding: 3px 5px !important;
     }
   }
 
@@ -185,8 +186,11 @@
         overflow-x: auto;
         overflow-y: hidden;
 
-        .spacer:last-child {
-          min-width: 1em;
+        /* Firefox and Safari < 14 need a spacer */
+        @supports (-moz-appearance:none) or (not (text-orientation:inherit)) {
+          .spacer:last-child {
+            min-width: 1em;
+          }
         }
 
         &::before {
@@ -212,7 +216,12 @@
             width: calc(100% - 2em);
           }
 
-          &:not(.container) {
+          &.spacer {
+            width: 1.25em;
+          }
+
+          &:first-child,
+          &:last-child {
             z-index: 2;
           }
         }