diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c7954c..ca80f5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,10 @@ ##### 更符合 GitHub 风格 -### 🐞 Fix +- 优化用户动态 +- 优化顶部导航栏头像 +- 优化设置页面 +- 优化仓库活动页面 ## 📃 English @@ -10,4 +13,7 @@ ##### More aligned with GitHub style -### 🐞 Fix +- Optimized user activity feed +- Optimized top navigation bar avatars +- Optimized settings page +- Optimized repository activity page \ No newline at end of file diff --git a/package.json b/package.json index d92a9c2..5bc0b4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitea-github-theme", - "version": "1.24.8", + "version": "1.25.0", "type": "module", "scripts": { "dev": "vite build --mode dev", diff --git a/styles/components/actions.ts b/styles/components/actions.ts index 381dace..701d707 100644 --- a/styles/components/actions.ts +++ b/styles/components/actions.ts @@ -36,7 +36,7 @@ export const actions = css` border-top-right-radius: ${otherThemeVars.border.radius}; padding: 16px; margin-bottom: 0; - > .item { + > .ui.dropdown { color: ${themeVars.color.text.light.num1}; } } @@ -76,22 +76,25 @@ export const actions = css` .flex-item { padding: 16px; - .flex-item-leading { align-self: flex-start; margin-top: 2px; } - .flex-item-main { gap: 0.5rem; } - .flex-item-trailing { - justify-content: space-between; - > .ui.label { border-radius: ${otherThemeVars.border.radius}; - margin-left: 32px; + } + > .ui.dropdown.jump { + color: ${themeVars.color.text.light.num1}; + &:hover { + color: ${themeVars.color.primary.self}; + } + .menu > .item:hover { + color: ${themeVars.color.text.self} !important; + } } } } @@ -223,17 +226,28 @@ export const actionViewRight = css` .action-view-right { /* 提前加载高度和滚动条 */ min-height: calc(100vh - 245px); - + // 作业详情页标题 .job-info-header { - padding: 16px 12px 16px 24px; - height: 80px; - - .job-info-header-title { - color: ${themeVars.github.fgColor.accent}; + padding: 16px 12px 16px 24px !important; + height: 80px !important; + .job-info-header-left { + .job-info-header-title { + color: ${themeVars.github.fgColor.accent} !important; + } + .job-info-header-detail { + margin-top: 8px; + } } - - .job-info-header-detail { - margin-top: 8px; + .job-info-header-right { + .ui.dropdown { + > .button { + border: unset; + padding: 7px !important; + } + .menu > .item > i.icon { + margin-right: 2px; + } + } } } @@ -241,7 +255,7 @@ export const actionViewRight = css` // 步骤标题 .job-step-summary { color: ${themeVars.color.console.fg.subtle}; - padding: 8px 10px; + padding: 8px 10px !important; &.selected { // 滚动时固定在顶部的高度与 job-info-header 高度相同 diff --git a/styles/components/commit.ts b/styles/components/commit.ts index 9d00fb1..8454d8a 100644 --- a/styles/components/commit.ts +++ b/styles/components/commit.ts @@ -28,7 +28,7 @@ export const commit = css` a.ui.basic.primary.label { border-radius: 25px; border-width: 1.5px; - padding: 5px 8px !important; + padding: 3px 8px !important; } } // 提交信息右侧 @@ -67,11 +67,38 @@ export const commit = css` export const commitStatus = css` .flex-text-inline[data-global-init="initCommitStatuses"] { - padding: 6px; + padding: 3px; margin-top: 2px; border-radius: ${otherThemeVars.border.radius}; &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover}; } + svg { + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + } + } +`; + +// 提交图 +export const commitGraph = css` + .page-content.repository #git-graph-container { + // 提交图的 SHA 标签 + li .ui.label.commit-id-short { + height: 25px; + // 验证提交 SHA 标签 + &.commit-is-signed { + span.ui.label.commit-is-signed { + height: 25px; + } + } + } + // 提交图的分支选择菜单框 + .ui.search.selection.dropdown > .menu > .item { + flex-direction: row; + align-items: center; + } } `; diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index 0f405f3..c263854 100644 --- a/styles/components/filelist.ts +++ b/styles/components/filelist.ts @@ -181,17 +181,18 @@ export const repoFileView = css` top: 0; // 左侧文件树 .repo-view-file-tree-container { - height: calc(100vh - 64px); // 减去头部高度 + height: 100vh; // 固定头部 position: sticky; top: 0; + overflow-y: unset; &:after { content: ""; position: absolute; top: 0; right: 0; width: 1px; - height: calc(100% + 64px); // 头部高度 + height: 100%; background: ${themeVars.color.secondary.self}; } > .repo-button-row { @@ -282,6 +283,7 @@ export const repoFileView = css` font-size: 12px; } .file-header-right { + gap: 0px; // 按钮组 > .ui.buttons { margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了 @@ -298,12 +300,14 @@ export const repoFileView = css` align-items: center; background: ${themeVars.color.button}; border: 1px solid ${themeVars.color.light.border}; + border-left-width: 0; height: 28px; padding: 0 8px; svg { color: ${themeVars.color.text.light.num1}; } &:first-of-type { + border-left-width: 1px; border-top-left-radius: ${otherThemeVars.border.radius}; border-bottom-left-radius: ${otherThemeVars.border.radius}; } diff --git a/styles/components/heatmap.ts b/styles/components/heatmap.ts index 750a3de..3f23864 100644 --- a/styles/components/heatmap.ts +++ b/styles/components/heatmap.ts @@ -74,7 +74,13 @@ export const activity = css` box-shadow: ${themeVars.github.shadow.floating.small}; > .flex-item { gap: 12px; - padding: 12px 8px 16px 14px; + padding: 16px; + > .flex-item-leading { + img { + width: 20px; + height: 20px; + } + } > .flex-item-main { gap: 8px !important; > div:not([class]) { @@ -82,14 +88,37 @@ export const activity = css` gap: 8px; flex-wrap: wrap; } - relative-time { + > .tw-flex-col { + gap: 0px !important; + > .flex-text-block { + gap: 4px; + font-size: 12px; + color: ${themeVars.color.text.light.num1}; + img { + width: 14px; + height: 14px; + } + .ui.sha.label { + margin-top: 0; + } + } + } + > .flex-item-body { + gap: 4px; + font-size: 12px; color: ${themeVars.color.text.light.num1}; } + > a { + font-size: 12px; + } } // 动态的右侧 svg 图标 - .flex-item-trailing svg { - height: 20px; - width: 20px; + .flex-item-trailing { + align-self: center; + svg { + height: 18px; + width: 18px; + } } } > .page.buttons { diff --git a/styles/components/issue.ts b/styles/components/issue.ts index 09571fc..acb20f5 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -73,6 +73,7 @@ export const issueList = css` > .flex-item { align-items: center; padding: 0; + min-height: 64px; &:last-child { border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; @@ -80,18 +81,16 @@ export const issueList = css` &:hover { background-color: ${themeVars.color.hover.opaque}; } - > .flex-item-icon { - display: flex; - gap: 4px; + > .flex-item-leading { + align-self: flex-start; + margin-top: 14px; margin-left: 16px; - // 复选框 - input { - background: unset; - margin-top: 14px; - margin-right: 8px !important; - } - svg { - margin-top: 14px; + > .flex-text-inline { + margin-top: 0px !important; + // 复选框 + input { + margin-right: 8px !important; + } } } > .flex-item-main { diff --git a/styles/components/navbar.ts b/styles/components/navbar.ts index 1cde128..c41ff68 100644 --- a/styles/components/navbar.ts +++ b/styles/components/navbar.ts @@ -75,8 +75,7 @@ export const navbarRight = css` .item.ui.dropdown { // 头像菜单 &:last-child { - padding-left: 2px; // 调整此选项需同步增减相同的标识的 left - padding-right: 16px; + padding: 0; .text { // 不显示小箭头标识 > .not-mobile { @@ -87,20 +86,12 @@ export const navbarRight = css` border-radius: 25px; height: 32px; max-height: 32px; + margin: 0 !important; } } - } - // 用户头像的管理员标识 - .navbar-profile-admin { - background-color: ${themeVars.github.bgColor.accent.emphasis}; - border-radius: 25px; - border: 2px solid ${themeVars.color.nav.bg}; - color: ${themeVars.color.white}; - font-size: 9px; - font-weight: 600; - padding: 2px 5px; - top: -7px; - left: 21px; + &.active { + background: unset; + } } } // 通知和计时器的圆点 diff --git a/styles/components/notification.ts b/styles/components/notification.ts index 918be74..6a2b132 100644 --- a/styles/components/notification.ts +++ b/styles/components/notification.ts @@ -90,7 +90,7 @@ export const notification = css` } // 通知列表 &:has(#notification_table) { - > .tw-flex:first-child { + > .flex-text-block:first-child { background-color: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.light.border}; border-bottom: 0; @@ -137,7 +137,7 @@ export const notification = css` color: ${themeVars.color.text.light.num1}; > .notifications-item { border-top: 1px solid ${themeVars.color.light.border}; - padding: 8px !important; + padding: 12px !important; &:first-child { border-top: 0; } @@ -153,11 +153,11 @@ export const notification = css` box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset; color: ${themeVars.color.text.self}; } - > .notifications-link { - > .notifications-top-row { + > .notifications-link > div{ + &:first-child { font-size: 12px !important; } - > .notifications-bottom-row { + &:last-child { font-size: 14px !important; } } diff --git a/styles/components/release.ts b/styles/components/release.ts index ceca3ce..7058714 100644 --- a/styles/components/release.ts +++ b/styles/components/release.ts @@ -48,10 +48,14 @@ export const tags = css` .tag-list-row-title { line-height: 1.5; } - .download { + .muted-links { color: ${themeVars.color.text.light.num1}; font-size: 12px; - a.muted:hover { + svg { + min-width: 12px; + width: 12px; + } + a:hover { text-decoration: none; } } diff --git a/styles/components/repo.ts b/styles/components/repo.ts index 26a3713..de07b24 100644 --- a/styles/components/repo.ts +++ b/styles/components/repo.ts @@ -74,7 +74,7 @@ export const repoTopic = css` border-radius: 25px; font-size: 12px; font-weight: 500; - padding: 5px 10px; + padding: 2.5px 10px; background-color: ${themeVars.github.bgColor.accent.muted}; color: ${themeVars.github.fgColor.accent}; &:hover { diff --git a/styles/public/attached.ts b/styles/public/attached.ts index df3d000..1e06ccd 100644 --- a/styles/public/attached.ts +++ b/styles/public/attached.ts @@ -7,6 +7,7 @@ export const attached = css` .user-setting-content, .org-setting-content, .admin-setting-content, + // 仓库动态页面 // 新建页面内容 .page-content.repository.new-repo, .page-content.repository.new.migrate, @@ -18,19 +19,45 @@ export const attached = css` font-weight: 400; background-color: unset !important; margin-bottom: 0.25rem; + padding-left: 0; + padding-right: 0; + > .ui.right { + right: 0; + } } - .ui.attached.segment { background-color: unset; - border-radius: ${otherThemeVars.border.radius} !important; - } - - .ui.attached.segment:not(.error) { + border-top-left-radius: ${otherThemeVars.border.radius} !important; + border-top-right-radius: ${otherThemeVars.border.radius} !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; border: 1px solid ${themeVars.color.light.border} !important; + + .ui.attached.segment { + border-top: 0 !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + &:has(+ :not(.ui.attached.segment)), + &:last-child { + border-bottom-left-radius: ${otherThemeVars.border.radius} !important; + border-bottom-right-radius: ${otherThemeVars.border.radius} !important; + } } - .ui.attached.segment.error { border: 1px solid ${themeVars.color.error.border} !important; } } `; + +// 仓库活动页面下的边框线修复 +export const fixActivity = css` + .page-content.repository.commits .flex-container-main:has(.ui.header.activity-header) { + > .ui.attached.segment { + border-radius: 0; + &:has(+ :not(.ui.attached.segment)) { + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + } + } + } +`; diff --git a/styles/public/base.ts b/styles/public/base.ts new file mode 100644 index 0000000..98a2214 --- /dev/null +++ b/styles/public/base.ts @@ -0,0 +1,7 @@ +import { css } from "src/types/vars"; + +export const body = css` + body { + line-height: 18px; + } +`; diff --git a/styles/public/button.ts b/styles/public/button.ts index 9db1934..858679a 100644 --- a/styles/public/button.ts +++ b/styles/public/button.ts @@ -118,6 +118,7 @@ export const fixButtonHeight = css` .ui.labeled.button > .label { height: 28px; min-height: 28px; + line-height: 1.5; } } .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button, diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 1a2eadb..a47f696 100644 --- a/styles/public/dropdown.ts +++ b/styles/public/dropdown.ts @@ -57,7 +57,7 @@ export const dropdown = css` } svg { margin-top: 2px; - margin-right: 4px; + margin-right: 2px; } // 复选框对齐 .ui.checkbox input[type="checkbox"] { diff --git a/styles/public/index.ts b/styles/public/index.ts index a3866db..c3e0912 100644 --- a/styles/public/index.ts +++ b/styles/public/index.ts @@ -1,6 +1,7 @@ // organize-imports-ignore // tslint:disable:ordered-imports // 组件导入有顺序, 禁止插件优化 +import "./base"; // 基础样式, 确保在其他样式之前导入 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入 import "./animation"; // 动画效果 import "./transition"; // 过渡效果 diff --git a/styles/public/label.ts b/styles/public/label.ts index f128a7b..28e3083 100644 --- a/styles/public/label.ts +++ b/styles/public/label.ts @@ -8,6 +8,7 @@ export const label = css` &.ui.ui.ui { &.label { border-radius: 25px; + padding: 1.5px 6px; // 多个标签的组合标签的圆角修复 &.scope-parent { .scope-left { @@ -99,10 +100,14 @@ export const shaLabel = css` span.ui.label.commit-is-signed { padding: 3px 5px; margin-left: 5px; + height: 25px; } } } - + // 修复带验证的提交 SHA 标签的高度 + .ui.label.commit-id-short { + height: 25px; + } // 验证提交附带的图标 span.ui.label.commit-is-signed { // 验证信任 @@ -181,7 +186,7 @@ export const repoLabel = css` color: ${themeVars.color.text.light.num1}; font-size: 12px; font-weight: 500; - padding: 3px 6px; + padding: 1.5px 6px; } } .org-visibility span.ui.basic.label { diff --git a/styles/public/menu.ts b/styles/public/menu.ts index e671265..4538502 100644 --- a/styles/public/menu.ts +++ b/styles/public/menu.ts @@ -139,6 +139,10 @@ export const menu = css` } } } + // 菜单标签样式 + .ui.menu .item>.label:not(.floating) { + padding: 1.5px 6px; + } `; export const secondaryMenu = css`