Synchronize GitHub new branch menu style.

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - Synchronize GitHub new version of Actions list page.
 - Synchronize GitHub new pagination button floating effect.
+- Synchronize GitHub new branch menu style.
 - Synchronize Clone Button Styles.
 
 ### 🐞 Fix

styles/common/after.ts

@@ -32,3 +32,17 @@ export const activeItemAfterStyle = cssStyle({
   top: "calc(50% - 12px)",
   width: "4px",
 });
+
+/** 激活项悬浮下划线样式
+ * @example 悬浮在激活项下面的下划线
+ */
+export const underlineNavActiveItemAfterStyle = cssStyle({
+  content: `""`,
+  backgroundColor: themeVars.github.underlineNav.borderColor.active,
+  borderRadius: otherThemeVars.border.radius,
+  position: "absolute",
+  width: "100%",
+  height: "2px",
+  left: "0",
+  bottom: "-8px",
+});

styles/common/index.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-export { activeItemAfterStyle } from "./after";
+export { activeItemAfterStyle, underlineNavActiveItemAfterStyle } from "./after";
 export { animation, animationDown, animationUp } from "./animation";
 export { basicButtonStyle, primaryButtonHoverStyle, primaryButtonStyle } from "./button";
 export { deleteHoverActiveStyle } from "./delete";

styles/components/notification.ts

@@ -65,7 +65,7 @@ const notification = css`
                   color: ${themeVars.color.text.self};
                   font-weight: 700;
                 }
-                .svg{
+                .svg {
                   margin-right: 0 !important;
                 }
               }

styles/components/repo/clone.ts

@@ -18,6 +18,7 @@
  */
 
 import { css, cssCombine, customThemeVars, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
+import { underlineNavActiveItemAfterStyle } from "@lutinglt/gitea-github-theme/styles/common";
 
 /** 克隆按钮 */
 const cloneButton = css`
@@ -48,7 +49,7 @@ const clonePanel = css`
         /* 按钮 */
         .item {
           color: ${themeVars.color.text.self};
-          font-weight: 600;
+          font-weight: 400;
           padding: 6px 8px;
           margin: 8px 0;
           &:hover {
@@ -56,16 +57,11 @@ const clonePanel = css`
             box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             border-radius: ${otherThemeVars.border.radius};
           }
-          &.active:after {
-            content: "";
-            display: block;
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: ${themeVars.github.underlineNav.borderColor.active};
-            border-radius: ${otherThemeVars.border.radius};
+          &.active {
+            font-weight: 600;
+            &:after {
+              ${underlineNavActiveItemAfterStyle}
+            }
           }
         }
         .item.active {

styles/public/dropdown/branch_dropdown.ts

@@ -18,7 +18,7 @@
  */
 
 import { css, cssCombine, customThemeVars, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
-import { animationDown } from "@lutinglt/gitea-github-theme/styles/common";
+import { animationDown, underlineNavActiveItemAfterStyle } from "@lutinglt/gitea-github-theme/styles/common";
 import { fallbackVar } from "@vanilla-extract/css";
 
 // 分支菜单
@@ -33,28 +33,31 @@ const branchDropdown = css`
     /* 分支/标签切换 */
     > .branch-tag-tab {
       > .branch-tag-item {
-        font-weight: 500;
-        padding: 8px 12px;
+        border: 0;
+        border-radius: ${otherThemeVars.border.radius};
+        font-weight: 400;
+        padding: 6px 8px;
         height: 32px;
-        line-height: 1.15;
+        margin-bottom: 8px;
+        position: relative;
         svg {
           display: none;
         }
         &.active {
-          background: ${themeVars.color.body};
-        }
-        &:hover {
-          color: inherit;
-          &:not(.active) {
-            background: ${themeVars.color.hover.self};
-            border: 1px solid ${themeVars.color.secondary.self};
-            border-bottom: 0;
-            border-top-left-radius: ${otherThemeVars.border.radius};
-            border-top-right-radius: ${otherThemeVars.border.radius};
+          font-weight: 600;
+          &:after {
+            ${underlineNavActiveItemAfterStyle}
           }
         }
+        &:hover {
+          background: ${themeVars.github.control.transparent.bgColor.hover};
+        }
       }
     }
+    /* 分支/标签切换下的分割线 */
+    .branch-tag-divider {
+      margin-top: 0 !important;
+    }
   }
 `;
 

styles/public/menu/secondary_menu.ts

@@ -19,6 +19,7 @@
 
 import { css, cssCombine, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
 import { basicButtonStyle } from "@lutinglt/gitea-github-theme/styles/common";
+import { underlineNavActiveItemAfterStyle } from "@lutinglt/gitea-github-theme/styles/common";
 
 const secondaryMenu = css`
   /* 二级菜单, 比如 Issue/PR/Actions 的筛选菜单 */
@@ -60,15 +61,8 @@ const secondaryMenu = css`
       border-color: #ffffff00;
       /* 模仿 github 的下划线 */
       span:after {
-        content: "";
-        background: ${themeVars.github.underlineNav.borderColor.active};
-        border-radius: ${otherThemeVars.border.radius};
-        bottom: calc(50% - 26px);
-        height: 2px;
-        position: absolute;
-        right: 50%;
-        transform: translate(50%, -50%);
-        width: 100%;
+        ${underlineNavActiveItemAfterStyle}
+        bottom: -10px;
         z-index: 1;
       }
     }