From 64684a51da155a27b8c9a6332f85be06296f5cb7 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sun, 7 Sep 2025 13:30:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=88=86=E6=94=AF=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 2 ++ README.md | 19 ++++++++++--------- README_EN.md | 19 ++++++++++--------- src/types/vars.ts | 1 + styles/components/filelist.ts | 4 ++-- styles/public/button.ts | 18 ++++++++++++------ styles/public/dropdown.ts | 11 ++++++++--- 7 files changed, 45 insertions(+), 29 deletions(-) diff --git a/.github/release.md b/.github/release.md index 74b39fe..665fe44 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,6 +2,7 @@ #### CSS 变量 +- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度 - 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度 ### 🌈 Style @@ -23,6 +24,7 @@ - 同步用户菜单样式 - 优化下拉菜单样式 - 同步差异对比页面文件名标题栏样式 +- 同步分支菜单宽度 ### 🐞 Fix diff --git a/README.md b/README.md index 8e38091..76d77b3 100644 --- a/README.md +++ b/README.md @@ -100,15 +100,16 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark ### CSS 变量 -| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | -| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :------- | :---- | -| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | -| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | 内容宽度 | 320px | -| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | | -| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | | -| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | | -| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | | -| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | | +| 变量名 | 描述 | 默认 | 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 | | 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 | | | +| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | | +| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | | ## 使用开发中的主题 diff --git a/README_EN.md b/README_EN.md index 5f752a3..68e1ce4 100644 --- a/README_EN.md +++ b/README_EN.md @@ -104,15 +104,16 @@ 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-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-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 | | | -| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | | -| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | | +| 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 | | 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 | | | +| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | | +| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | | ## Using Development Version of the Theme diff --git a/src/types/vars.ts b/src/types/vars.ts index 075a6ad..27d4d1a 100644 --- a/src/types/vars.ts +++ b/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" }, diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index 4e3a988..8f89e90 100644 --- a/styles/components/filelist.ts +++ b/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; diff --git a/styles/public/button.ts b/styles/public/button.ts index 0a84805..25c4653 100644 --- a/styles/public/button.ts +++ b/styles/public/button.ts @@ -97,13 +97,19 @@ export const fixButtonHeight = css` min-height: 26px; height: 32px; } - // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高 - .ui.labeled.button > .label, - .ui.ui.ui.ui.small.button.compact { - height: 28px; - min-height: 28px; + // 修复仓库页仓库操作按钮高度对齐和修正 + .repo-button-row .ui.button { + min-height: 32px; } - .ui.tiny.buttons .button, + // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高 + .repo-header { + .ui.ui.ui.ui.small.compact.button, + .ui.labeled.button > .label { + height: 28px; + min-height: 28px; + } + } + .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button, .ui.ui.ui.ui.tiny.button { min-height: 20px; } diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 7291462..e2eae12 100644 --- a/styles/public/dropdown.ts +++ b/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,8 +195,12 @@ export const fixSelectionDropdown = css` // 分支菜单 export const branchDropdown = css` - .ui.dropdown.branch-selector-dropdown .menu > .item { - animation: ${animationDown}; + .ui.dropdown.branch-selector-dropdown > .menu { + width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")}; + max-width: 640px; + > .item { + animation: ${animationDown}; + } } `;