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-01 23:27:17 +08:00
parent 925068c962
commit f71dccb0c1
2 changed files with 65 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
styles/components/diff.ts
View File

@@ -4,6 +4,23 @@ export const diff = css`
/* 折叠行多余的颜色 */
.tag-code {
background-color: unset;
height: 24px;
// 展开/收缩按钮高度与.tag-code一致
.code-expander-buttons,
// 双向展开的按钮
.code-expander-buttons[data-expand-direction="3"] {
.code-expander-button {
height: 24px;
}
}
/* 展开/收缩按钮 */
.code-expander-button {
color: ${themeVars.color.text.light.num1};
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
}
}
/* 折叠行文本 */
.code-inner {
color: ${themeVars.color.text.light.num1};
@@ -20,23 +37,19 @@ export const diff = css`
/* 增加/删除相关代码背景色圆角 */
.added-code,
.removed-code {
border-radius: 0.1875rem;
border-radius: 3px;
color: ${themeVars.color.text.self};
/* 覆盖掉 chroma 的颜色 */
* {
color: ${themeVars.color.text.self} !important;
}
}
/* 展开/收缩按钮 */
.code-expander-button {
color: ${themeVars.color.text.light.num1};
height: 28px !important;
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
}
// 代码行
.lines-num,
.lines-code {
line-height: 24px;
}
/* 行号居中 */
// 行号居中
.lines-num {
text-align: center !important;
}
@@ -63,17 +76,54 @@ export const diff = css`
}
// 操作按钮
.diff-file-header-actions {
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 400;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
.diff-header-popup-btn {
border-radius: ${otherThemeVars.border.radius};
padding: 5px !important;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
}
}
// 差异对比文件盒子
.repository .diff-file-box .code-diff {
// 隐藏多余的空白
// 合并视图的第三列
&.code-diff-unified colgroup col:nth-child(3),
// 拆分视图的第二列和第六列
&.code-diff-split colgroup col:nth-child(2),
&.code-diff-split colgroup col:nth-child(6),
td.lines-escape {
width: 0; // 不要使用 display: none; 否则会影响布局
visibility: hidden;
}
// 固定表格中每列的宽度
table {
width: 100%;
}
// 行号宽度
// 合并视图的第一列和第二列
&.code-diff-unified colgroup col:nth-child(1),
&.code-diff-unified colgroup col:nth-child(2),
// 拆分视图的第一列和第五列
&.code-diff-split colgroup col:nth-child(1),
&.code-diff-split colgroup col:nth-child(5) {
width: 40;
}
// 修复 table 100% 宽度时的行号换行问题
.lines-num {
text-wrap-mode: wrap; // 2024年10月浏览器开始支持
}
// 合并视图的第四列
&.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;
}
}
`;