opensource/gitea
1
0
Fork 0
mirror of https://gitcode.com/gitea/gitea.git synced 2025-06-04 19:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove svg.svg class, restore .rss-icon (#24667)

Browse Source 
Fix regression from https://github.com/go-gitea/gitea/pull/24476 where
the `svg.svg` class misaligns SVG icons across the site and streched
buttons unintentionally in vertical height.

Before (button 30.3px):
<img width="157" alt="Screenshot 2023-05-11 at 22 09 42"
src="https://github.com/go-gitea/gitea/assets/115237/0fd137ab-ab52-4cf8-afca-c45776d526d0">

After (button 30px):
<img width="160" alt="Screenshot 2023-05-11 at 22 09 59"
src="https://github.com/go-gitea/gitea/assets/115237/4b741f4b-0fd2-4fae-9bee-16a7deb098e8">

[vertical-align:
middle](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
is not suitable to align icons to text because

> Aligns the middle of the element with the baseline plus half the
x-height of the parent.

Example of `vertical-align: middle` from MDN:

<img width="232" alt="Screenshot 2023-05-11 at 22 29 28"
src="https://github.com/go-gitea/gitea/assets/115237/179fb756-85a1-4cab-8219-1a4958f333e2">

So I think the
[existing](365bb77a54/web_src/css/svg.css (L3))
`vertical-align: text-top` is generally still the best bet:

<img width="241" alt="Screenshot 2023-05-11 at 22 34 24"
src="https://github.com/go-gitea/gitea/assets/115237/0cd6edf5-12c0-4bdb-8771-a900f5ba2d35">

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2023-05-12 12:23:53 +02:00
committed by GitHub
parent 4b80813341
commit a96c73f979
5 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web_src/css/base.css
View File

@ -364,12 +364,6 @@ a.label,
text-decoration: none !important;
}
/* for most cases, we only use our svg icon as inline icon, so we need to make them inline-block and vertical-align: middle */
svg.svg {
display: inline-block;
vertical-align: middle;
}
.ui.red.labels .label,
.ui.ui.ui.red.label,
.ui.red.button,
@ -2595,6 +2589,11 @@ a.ui.basic.label:hover {
line-height: .67em;
}
.rss-icon {
display: inline-flex;
color: var(--color-text-light-1);
}
table th[data-sortt-asc]:hover,
table th[data-sortt-desc]:hover {
background: rgba(0, 0, 0, 0.1) !important;