Improve diff file headers (#36215)

- reduce file name font size from 15px to 14px
- fix labels and buttons being cut off when their size is constrained
- change labels from monospace to sans-serif font
- move diff stats to right and change them from sum of changes to +/-
- change filemode to label and change text to match other labels

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-01-12 13:29:35 +01:00
committed by GitHub
parent fbea2c68e8
commit 1d399bb1d1
12 changed files with 181 additions and 114 deletions

View File

@@ -1293,8 +1293,7 @@ td .commit-summary {
filter: drop-shadow(-4px 0 0 var(--color-primary-alpha-30)) !important;
}
.code-comment:target,
.diff-file-box:target {
.code-comment:target {
border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
@@ -1681,18 +1680,27 @@ tbody.commit-list {
margin-top: 1em;
}
.diff-file-box:target {
border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.diff-file-header {
padding: 5px 8px !important;
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
font-weight: var(--font-weight-normal);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
/* prevent borders from being visible behind top corners when sticky and scrolled,
this "shadow" is used to use body's color to cover the scrolled-up left and right borders at corners */
box-shadow: 0 -1px 0 1px var(--color-body);
}
.diff-file-header .file {
min-width: 0;
.diff-file-box:target .diff-file-header {
box-shadow: unset; /* when targeted, still use the parent's box-shadow, remove the patched above */
}
.diff-file-header .file-link {
@@ -1715,6 +1723,7 @@ tbody.commit-list {
.diff-file-header {
flex-direction: column;
align-items: stretch;
gap: 0;
}
}
@@ -1743,13 +1752,13 @@ tbody.commit-list {
.diff-stats-bar {
display: inline-block;
background-color: var(--color-red);
background-color: var(--color-diff-prompt-del-fg); /* the background is used as "text foreground color" */
height: 12px;
width: 44px;
}
.diff-stats-bar .diff-stats-add-bar {
background-color: var(--color-green);
background-color: var(--color-diff-prompt-add-fg);
height: 100%;
}

View File

@@ -158,6 +158,8 @@ gitea-theme-meta-info {
--color-diff-removed-row-bg: #301e1e;
--color-diff-removed-row-border: #634343;
--color-diff-removed-word-bg: #6f3333;
--color-diff-prompt-add-fg: #87ab63;
--color-diff-prompt-del-fg: #cc4848;
--color-diff-inactive: #22282d;
--color-error-border: #a04141;
--color-error-bg: #522;

View File

@@ -158,6 +158,8 @@ gitea-theme-meta-info {
--color-diff-removed-row-bg: #ffeef0;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-prompt-add-fg: #21ba45;
--color-diff-prompt-del-fg: #db2828;
--color-diff-inactive: #f0f2f4;
--color-error-border: #e0b4b4;
--color-error-bg: #fff6f6;