diff --git a/.github/release.md b/.github/release.md index dd854e8..3cdce84 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,7 +2,6 @@ ## 🌈 Style -- 略微增加仓库代码文件列表的单行高度与 GitHub 一致 - 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致 - 优化消息右上角小图标样式 - 优化组织页面下的 RSS 订阅按钮样式 @@ -10,18 +9,20 @@ #### 更符合 GitHub 风格 - 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12 -- 同步仓库代码文件页 README 导航栏样式 - 同步分页菜单样式 - 同步登录/注册页面样式 +- 同步 Issue/PR 列表样式 +- 同步 Issue/PR 详细页面侧边栏样式 +- 同步仓库代码文件页 README 导航栏样式 +- 同步用户点星仓库列表样式 +- 优化私有标签样式 - 优化热力图和动态样式 - 优化仪表板仓库/组织列表样式 -- 优化私有标签样式 -- 同步用户点星仓库列表样式 -- 同步 Issue/PR 详细页面侧边栏样式 +- 略微增加仓库代码文件列表的单行高度 ## 🐞 Fix -- 修复 Action 作业步骤页面标题选中时滚动固定的高度问题 -- 修复用户公开活动页动态布局问题 -- 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄 -- 修复手机页面下注册/登录页导航栏注册按钮换行的问题 +- Action 作业步骤页面标题选中时滚动固定的高度 +- 用户公开活动页动态布局 +- 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄 +- 手机页面下注册/登录页导航栏注册按钮换行 diff --git a/TODO.md b/TODO.md index b97e154..9709cef 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,5 @@ ### 重大 - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式 -- issue/PR 列表样式 github 布局 - 色盲主题支持 - 打开文件时的文件导航树样式和滚动高度 diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 66ea873..4093eb1 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -178,6 +178,7 @@ export const github = { * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色 * @filelist `repoFiles` README 栏的按钮的悬停背景颜色 * @issue `issueSidebar` 操作按钮的悬停背景颜色 + * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色 * @dashboard `dashboard` 仓库列表项目的悬停背景颜色 */ hover: null, diff --git a/styles/components/issue.ts b/styles/components/issue.ts index 4034e76..4b2308a 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -1,6 +1,115 @@ import { css, otherThemeVars, themeVars } from "src/types/vars"; import { activeItemAfterStyle } from "styles/public/menu"; +// 工单&PR 列表 +export const issueList = css` + .page-content.repository.issue-list { + // 头部筛选菜单栏 + .issue-list-toolbar { + align-items: center; + align-content: center; + background-color: ${themeVars.color.box.header}; + border: 1px solid ${themeVars.color.light.border}; + border-bottom: 0; + border-top-left-radius: ${otherThemeVars.border.radius}; + border-top-right-radius: ${otherThemeVars.border.radius}; + height: 48px; + padding: 8px; + .issue-list-toolbar-left { + // 复选框 + input { + margin: 0 8px !important; + } + > .ui.compact.menu { + align-items: center; + border: 0; + > .item { + background: unset !important; + border-radius: ${otherThemeVars.border.radius}; + color: ${themeVars.color.text.light.num1}; + padding: 0px 8px; + height: 30px; + &:before { + display: none; + } + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover} !important; + } + &.active { + color: ${themeVars.color.text.self}; + font-weight: 700; + } + } + } + } + .issue-list-toolbar-right > .ui.menu { + align-items: center; + > .item { + color: ${themeVars.color.text.light.num1}; + } + > .ui.button { + padding: 0 12px; + height: 32px; + } + } + } + // Issue 列表 + .flex-list#issue-list { + border: 1px solid ${themeVars.color.light.border}; + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + > .flex-item { + align-items: center; + padding: 0; + &:last-child { + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + } + &:hover { + background-color: ${themeVars.color.hover.opaque}; + } + > .flex-item-icon { + display: flex; + gap: 4px; + margin-left: 8px; + // 复选框 + input { + background: unset; + margin-top: 14px; + margin-left: 8px; + margin-right: 8px !important; + } + svg { + margin-top: 14px; + } + } + > .flex-item-main { + gap: 4px; + .flex-item-header { + padding-top: 8px; + } + .flex-item-body { + font-size: 12px; + padding-bottom: 8px; + } + } + > .flex-item-trailing { + margin-right: 32px; + } + } + } + } +`; + +// 避免手机/平板下菜单错位 +export const issueListMobile = css` + @media (max-width: 1023.98px) { + .page-content.repository.issue-list .issue-list-toolbar { + height: auto; + } + } +`; + export const button = css` .issue-content-left .field.footer { // 关闭工单按钮 diff --git a/styles/public/menu.ts b/styles/public/menu.ts index 44f180e..16c6002 100644 --- a/styles/public/menu.ts +++ b/styles/public/menu.ts @@ -219,7 +219,6 @@ export const paginationMenu = css` &:hover { background: unset; border-color: ${themeVars.color.secondary.self}; - transition-duration: 0.1s; } } &.navigation { diff --git a/styles/public/transition.ts b/styles/public/transition.ts index 492cba7..19d4654 100644 --- a/styles/public/transition.ts +++ b/styles/public/transition.ts @@ -2,13 +2,6 @@ import { css } from "src/types/vars"; // 简单的渐变过渡 export const transition = css` - // 迁移的元素 - #navbar .item, - .header-wrapper .ui.tabular.menu .item, - .job-step-summary, - .job-step-logs, - .job-brief-item, - .repo-file-cell, // 差异对比的代码折叠按钮 .code-expander-button, // 仓库 README 头部的按钮 @@ -16,6 +9,18 @@ export const transition = css` .file-header-right, // 仪表板仓库列表 .ui.attached.segment.table ul li, + // Issue 列表 + .issue-list-toolbar .item, + .flex-list#issue-list > .flex-item, + // 分页菜单 + .ui.borderless.pagination.menu .item, + // 迁移的元素 + #navbar .item, + .header-wrapper .ui.tabular.menu .item, + .job-step-summary, + .job-step-logs, + .job-brief-item, + .repo-file-cell, .tippy-box .flex-items-block .item, .clone-panel-tab .item, .ui.form select,