diff --git a/.github/release.md b/.github/release.md index a1c448c..e89745b 100644 --- a/.github/release.md +++ b/.github/release.md @@ -1,3 +1,9 @@ +### ✨ Feature + +#### CSS 变量 + +- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度 + ### 🌈 Style - 优化小型按钮的高度 @@ -14,6 +20,8 @@ - 同步顶部工单等仪表板样式 - 同步置顶 Issue 样式 - 同步订阅页面样式 +- 同步用户菜单样式 +- 优化下拉菜单样式 ### 🐞 Fix diff --git a/README.md b/README.md index 043595d..8e38091 100644 --- a/README.md +++ b/README.md @@ -100,14 +100,15 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark ### CSS 变量 -| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | -| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | -| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | -| --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-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 | | | ## 使用开发中的主题 diff --git a/README_EN.md b/README_EN.md index b2f07df..5f752a3 100644 --- a/README_EN.md +++ b/README_EN.md @@ -104,14 +104,15 @@ 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-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-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 | | | ## Using Development Version of the Theme diff --git a/src/types/vars.ts b/src/types/vars.ts index a8651f8..075a6ad 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -34,6 +34,7 @@ const otherVars = { border: { radius: null }, color: { ...color.otherAuto } }; const customVars = { cloneMenuWidth: "clone-menu-width", + userMenuWidth: "user-menu-width", explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" }, userRepolistColumns: "user-repolist-columns", org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" }, diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 8d03aa4..7291462 100644 --- a/styles/public/dropdown.ts +++ b/styles/public/dropdown.ts @@ -16,19 +16,18 @@ export const dropdown = css` > .item:not(.tw-hidden) { display: flex !important; align-items: center; - gap: 0.5rem; - padding: 8px 10px !important; + padding: 6px 8px !important; border-radius: ${otherThemeVars.border.radius} !important; &:not(.emoji) { - margin: 0 0.5rem; + margin: 0 8px; } &:not(.emoji):first-of-type { - margin-top: 0.5rem; + margin-top: 8px; } // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 &.cherry-pick-button, &:not(.emoji):last-of-type { - margin-bottom: 0.5rem; + margin-bottom: 8px; } &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; @@ -46,9 +45,17 @@ export const dropdown = css` ${activeItemAfterStyle}; } } + svg { + margin-top: 2px; + margin-right: 8px; + } + // 复选框对齐 + .ui.checkbox input[type="checkbox"] { + height: 100%; + } } > .divider { - margin: 0.5rem 0; + margin: 8px 0; } &:after { display: none !important; @@ -59,7 +66,7 @@ export const dropdown = css` .ui.dropdown:not(.upward), .ui.menu .ui.dropdown:not(.upward) { .menu { - margin-top: 0.35em !important; + margin-top: 4px !important; } } // 向上弹出的下拉菜单向上偏移 @@ -67,7 +74,7 @@ export const dropdown = css` .ui.menu .ui.dropdown.upward { .menu { animation: ${animationUp}; - margin-bottom: 0.35em !important; + margin-bottom: 4px !important; } } // 修复下拉菜单元素溢出问题 diff --git a/styles/public/navbar.ts b/styles/public/navbar.ts index 1423d58..cd7de4b 100644 --- a/styles/public/navbar.ts +++ b/styles/public/navbar.ts @@ -1,4 +1,5 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { fallbackVar } from "src/functions"; +import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; export const navbarRight = css` #navbar { @@ -91,6 +92,24 @@ export const navbarRight = css` } } } + // 用户菜单 + .navbar-right .user-menu { + width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")}; + max-width: 320px; + > .header { + font-size: 14px; + font-weight: 400; + margin: 0; + padding: 16px 16px 8px 16px; + strong { + font-weight: 600; + } + } + > .divider { + margin: 8px; + width: calc(100% - 16px); + } + } } // 手机下的创建菜单按钮 @media (max-width: 767.98px) {