diff --git a/.github/release.md b/.github/release.md index 0035d93..d1c5dbb 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,7 +2,8 @@ ##### 更符合 GitHub 风格 -- 优化查看代码文件内容时的体验 (滚动到底部时不会导致文件树部分内容遮挡) +- 同步查看代码文件内容时的样式 +- 优化查看代码文件内容时的体验 (去掉了一些底部元素) ### 🐞 Fix diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index ef4f3c1..63a9bbb 100644 --- a/styles/components/filelist.ts +++ b/styles/components/filelist.ts @@ -156,6 +156,15 @@ export const repoFileView = css` } } .page-content.repository.file.list { + &:has(.repo-view-file-tree-container) { + // 取消下间隔优化观看体验 + .secondary-nav { + margin-bottom: 0 !important; + .ui.tabs.divider { + margin-bottom: 0; + } + } + } > .ui.container.fluid { max-width: calc(100% - calc(2 * 16px)); } @@ -171,15 +180,16 @@ export const repoFileView = css` &:after { content: ""; position: absolute; - top: -14px; // 导航栏元素的偏移高度补齐 + top: 0; right: 0; width: 1.5; - height: calc(100% + 14px + 64px); // 导航栏偏移高度 + 头部高度 + height: calc(100% + 64px); // 头部高度 background: ${themeVars.color.secondary.self}; } > .repo-button-row { align-content: center; background: ${themeVars.color.body}; + font-size: 16px; height: 64px; margin: 0; // 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除 @@ -194,6 +204,9 @@ export const repoFileView = css` height: 1px; background: ${themeVars.color.secondary.self}; } + .ui.compact.icon.button { + border: 0; + } } .view-file-tree-items { margin-right: 0; @@ -208,30 +221,106 @@ export const repoFileView = css` background: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.secondary.self}; border-radius: ${otherThemeVars.border.radius}; + margin: 16px 0; height: 46px; min-height: 46px; padding: 8px; position: sticky; top: 0; z-index: 1; + .ui.button { + min-height: 32px; + } + // 打开文件树按钮 + .repo-view-file-tree-toggle-show { + background: initial; + border-color: #0000; + padding: 0; + min-width: 32px; + } + // 分支选择按钮 + .branch-dropdown-button { + padding: 0 12px; + } + // 路径 + .repo-path { + gap: 4px; + .section { + &:first-child, + &.active { + font-weight: 600; + } + } + .btn { + svg { + margin-left: 4px; + color: ${themeVars.color.text.light.num1}; + } + } + } } .non-diff-file-content { // 避免分支菜单遮挡 position: relative; z-index: 0; h4.file-header { + padding: 8px 12px !important; position: sticky; // 重叠边框线, 避免过粗 top: 45px; z-index: 1; + .file-header-left { + color: ${themeVars.color.text.light.num1}; + font-size: 12px; + } + .file-header-right { + // 按钮组 + > .ui.buttons { + margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了 + .ui.mini.button { + min-height: 28px; + height: 28px; + font-size: 12px; + padding: 0 8px; + } + } + // 右侧操作按钮 + > .btn-octicon { + display: flex; + align-items: center; + background: ${themeVars.color.button}; + border: 1px solid ${themeVars.color.light.border}; + height: 28px; + padding: 0 8px; + svg { + color: ${themeVars.color.text.light.num1}; + } + &:first-of-type { + border-top-left-radius: ${otherThemeVars.border.radius}; + border-bottom-left-radius: ${otherThemeVars.border.radius}; + } + &:last-of-type { + border-top-right-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + } + &:hover { + background: ${themeVars.color.hover.self}; + color: ${themeVars.color.text.light.num1}; + } + } + } } } // 头部提交信息 .ui.segment#repo-file-commit-box { padding: 8px 12px; - margin-bottom: 8px !important; + margin-bottom: 16px !important; + min-height: 46px; > .latest-commit { gap: 8px; + .commit-summary { + color: ${themeVars.color.text.light.num1}; + } } // 右侧提交时间 > .age {