同步分支菜单宽度

.github/release.md

@@ -2,6 +2,7 @@
 
 #### CSS 变量
 
+- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
 - 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
 
 ### 🌈 Style
@@ -23,6 +24,7 @@
 - 同步用户菜单样式
 - 优化下拉菜单样式
 - 同步差异对比页面文件名标题栏样式
+- 同步分支菜单宽度
 
 ### 🐞 Fix
 

README.md

@@ -101,9 +101,10 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
 ### CSS 变量
 
 | 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小  | 最大  |
-| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :------- | :---- |
+| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
+| --custom-branch-menu-width        | 分支菜单的宽度              | 320px | 320px  | 320px | Gitea | 640px |
 | --custom-clone-menu-width         | 克隆按钮的菜单宽度          | Gitea | 332px  | 200px | 150px | 400px |
-| --custom-user-menu-width          | 用户菜单的宽度              | 192px | 256px  |       | 内容宽度 | 320px |
+| --custom-user-menu-width          | 用户菜单的宽度              | 192px | 256px  |       | Gitea | 320px |
 | --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2     | 2      | 2     |       |       |
 | --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3     | 1      | 2/3   |       |       |
 | --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |       |       |

README_EN.md

@@ -105,9 +105,10 @@ Add the following code at the beginning or end of the theme's CSS file
 ### CSS Variables
 
 | Variable Name                     | Description                                              | Default | Github | Recommend | Min   | Max   |
-| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :------------ | :---- |
+| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
+| --custom-branch-menu-width        | Branch menu width                                        | 320px   | 320px  | 320px     | Gitea | 640px |
 | --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px |
-| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Content Width | 320px |
+| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Gitea | 320px |
 | --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       |
 | --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       |
 | --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       |

src/types/vars.ts

@@ -33,6 +33,7 @@ const vars = {
 const otherVars = { border: { radius: null }, color: { ...color.otherAuto } };
 
 const customVars = {
+  branchMenuWidth: "branch-menu-width",
   cloneMenuWidth: "clone-menu-width",
   userMenuWidth: "user-menu-width",
   explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" },

styles/components/filelist.ts

@@ -10,7 +10,7 @@ export const branchButton = css`
         border: 1px solid ${themeVars.color.light.border};
         margin-top: 1px;
         margin-left: auto;
-        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+        margin-right: 20px; // gitea 有 RSS 留出足够的空间
       }
     }
   }
@@ -374,7 +374,7 @@ export const repoSidebarTop = css`
       .flex-item {
         padding: 10px 0 0 0;
         .flex-item-title {
-          margin-top: 2px;
+          margin-top: 4px;
         }
         .flex-item-body {
           padding: 8px 0 0 0;

styles/public/button.ts

@@ -97,13 +97,19 @@ export const fixButtonHeight = css`
     min-height: 26px;
     height: 32px;
   }
+  // 修复仓库页仓库操作按钮高度对齐和修正
+  .repo-button-row .ui.button {
+    min-height: 32px;
+  }
   // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
-  .ui.labeled.button > .label,
-  .ui.ui.ui.ui.small.button.compact {
+  .repo-header {
+    .ui.ui.ui.ui.small.compact.button,
+    .ui.labeled.button > .label {
       height: 28px;
       min-height: 28px;
     }
-  .ui.tiny.buttons .button,
+  }
+  .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {
     min-height: 20px;
   }

styles/public/dropdown.ts

@@ -1,5 +1,6 @@
 import { animationDown, animationUp } from "src/core/theme";
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
@@ -194,9 +195,13 @@ export const fixSelectionDropdown = css`
 
 // 分支菜单
 export const branchDropdown = css`
-  .ui.dropdown.branch-selector-dropdown .menu > .item {
+  .ui.dropdown.branch-selector-dropdown > .menu {
+    width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")};
+    max-width: 640px;
+    > .item {
       animation: ${animationDown};
     }
+  }
 `;
 
 // 包含表情的下拉菜单