mirrors/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-12-21 22:23:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

修复对比视图内容中的圆角和背景溢出

Browse Source
This commit is contained in:
lutinglt
2025-11-04 13:45:01 +08:00
parent 0a7d5970c9
commit 976949aa2e
1 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
styles/components/diff.ts
View File

@@ -98,36 +98,44 @@ export const diff = css`
} }
} }
// 差异对比文件盒子 // 差异对比文件盒子
.repository .diff-file-box .code-diff { .repository .diff-file-box {
// 隐藏多余的空白 .code-diff {
// 合并视图的第三列 // 隐藏多余的空白
&.code-diff-unified colgroup col:nth-child(3), // 合并视图的第三列
// 拆分视图的第二列和第六列 &.code-diff-unified colgroup col:nth-child(3),
&.code-diff-split colgroup col:nth-child(2), // 拆分视图的第二列和第六列
&.code-diff-split colgroup col:nth-child(6), &.code-diff-split colgroup col:nth-child(2),
td.lines-escape { &.code-diff-split colgroup col:nth-child(6),
width: 0; // 不要使用 display: none; 否则会影响布局 td.lines-escape {
visibility: hidden; width: 0; // 不要使用 display: none; 否则会影响布局
visibility: hidden;
}
// Gitea 分列视图下默认 100% 宽度的目的是如果单文件只增加或只删除的情况下, 保持无内容的列的宽度一致, 始终保持左右两边的列宽度一致
// 保持 Gitea 的默认设置, 不对行号宽度做处理
/* &.code-diff-split table {
width: auto;
} */
// 行号宽度
// 40px: 长度 = 9999 行
// 45px: 长度 = 99999 行
// 50px: 长度 = 999999 行
// GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px
// 这里折中为 45px 会根据代码行数动态调整, 45px 既不会在行数少时显得太宽, 也可以在大多数情况下保持宽度一致
.lines-num {
min-width: 45px;
}
// 合并视图的第四列
&.code-diff-unified colgroup col:nth-child(4),
// 拆分视图的第三列和第七列, -/+ 保持居中的宽度
&.code-diff-split colgroup col:nth-child(3),
&.code-diff-split colgroup col:nth-child(7) {
width: 20;
}
} }
// 不明白 Gitea 分列视图下默认 100% 宽度的目的, 这里设置为 auto 使行号列宽自适应 // 修复对比视图内容中的圆角和背景溢出
&.code-diff-split table { .file-body.file-code {
width: auto; border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
} overflow: hidden;
// 行号宽度
// 40px: 长度 = 9999 行
// 45px: 长度 = 99999 行
// 50px: 长度 = 999999 行
// GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px
// 这里折中为 45px 会根据代码行数动态调整, 45px 既不会在行数少时显得太宽, 也可以在大多数情况下保持宽度一致
.lines-num {
min-width: 45px;
}
// 合并视图的第四列
&.code-diff-unified colgroup col:nth-child(4),
// 拆分视图的第三列和第七列, -/+ 保持居中的宽度
&.code-diff-split colgroup col:nth-child(3),
&.code-diff-split colgroup col:nth-child(7) {
width: 20;
} }
} }
`; `;