Fix diff tree height and adjust target file style (#23616)

Extract from https://github.com/go-gitea/gitea/pull/23553, just the
parts that fix the diff tree height and the change to the file `:target`
style.

Fixes: https://github.com/go-gitea/gitea/issues/23593
This commit is contained in:
silverwind 2023-03-22 21:32:27 +01:00 committed by GitHub
parent 774b37b9f8
commit 622d21691c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 14 deletions

View file

@ -1611,14 +1611,12 @@
padding: 7px 0;
background: var(--color-body);
line-height: 30px;
height: 47px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
}
@media (max-width: 991px) {
.repository .diff-detail-box {
flex-direction: column;
align-items: flex-start;
height: 77px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
}
}
@ -1674,6 +1672,13 @@
}
}
.diff-detail-actions {
/* prevent font-size from increasing element height so that .diff-detail-box comes
out with height of 47px (one line) and 77px (two lines), which is important for
position: sticky */
height: 33px;
}
.repository .diff-detail-box .diff-detail-actions > * {
margin-right: 0;
}
@ -1848,10 +1853,24 @@
padding-bottom: 5px;
}
.diff-file-box {
border: 1px solid transparent;
border-radius: var(--border-radius);
}
/* TODO: this can potentially be made "global" by removing the class prefix */
.diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table {
margin: 0; /* remove fomantic negative margins */;
width: initial; /* remove fomantic over 100% width */;
max-width: initial; /* remove fomantic over 100% width */;
}
.repository .diff-stats {
clear: both;
margin-bottom: 5px;
max-height: 400px;
max-height: 200px;
height: fit-content;
overflow: auto;
padding-left: 0;
}
@ -2647,7 +2666,8 @@
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
}
.code-comment:target {
.code-comment:target,
.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;
@ -3238,13 +3258,13 @@ td.blob-excerpt {
}
#diff-file-tree {
width: 20%;
flex: 0 0 20%;
max-width: 380px;
line-height: inherit;
position: sticky;
padding-top: 0;
top: 47px;
max-height: calc(100vh - 50px);
max-height: calc(100vh - 47px);
height: 100%;
overflow-y: auto;
}

View file

@ -308,11 +308,3 @@ a.blob-excerpt:hover {
width: 72px;
height: 10px;
}
.diff-file-box {
border-radius: 0.285rem; /* Just like ui.top.attached.header */
}
.diff-file-box:target {
box-shadow: 0 0 0 3px var(--color-accent);
}