From a96c73f9790772d6fa34f462dfd5a87f9a4b0e21 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 12 May 2023 12:23:53 +0200 Subject: [PATCH] Remove svg.svg class, restore .rss-icon (#24667) 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): Screenshot 2023-05-11 at 22 09 42 After (button 30px): Screenshot 2023-05-11 at 22 09 59 [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: Screenshot 2023-05-11 at 22 29 28 So I think the [existing](https://github.com/go-gitea/gitea/blob/365bb77a5497d492836bf823cf780c823db27e8c/web_src/css/svg.css#L3) `vertical-align: text-top` is generally still the best bet: Screenshot 2023-05-11 at 22 34 24 Co-authored-by: Giteabot --- templates/org/home.tmpl | 2 +- templates/repo/header.tmpl | 2 +- templates/repo/release_tag_header.tmpl | 2 +- web_src/css/base.css | 11 +++++------ web_src/js/components/RepoBranchTagSelector.vue | 2 +- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl index 27f0df0b38..97047c71cc 100644 --- a/templates/org/home.tmpl +++ b/templates/org/home.tmpl @@ -10,7 +10,7 @@ {{if .Org.Visibility.IsPrivate}}{{.locale.Tr "org.settings.visibility.private_shortname"}}{{end}} {{if .EnableFeed}} - {{svg "octicon-rss" 24}} + {{svg "octicon-rss" 24}} {{end}} {{if $.RenderedDescription}}
{{$.RenderedDescription|Str2html}}
{{end}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index b2fd0710af..03f5a2e78f 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -36,7 +36,7 @@ {{end}} {{if $.EnableFeed}} - {{svg "octicon-rss" 18}} + {{svg "octicon-rss" 18}} {{end}} {{if $.IsPullMirror}} diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl index 6d022eebcc..d8f60a2c6c 100644 --- a/templates/repo/release_tag_header.tmpl +++ b/templates/repo/release_tag_header.tmpl @@ -11,7 +11,7 @@ {{end}} {{if .EnableFeed}} - {{svg "octicon-rss" 18}} + {{svg "octicon-rss" 18}} {{end}} {{if and (not .PageIsTagList) .CanCreateRelease}} diff --git a/web_src/css/base.css b/web_src/css/base.css index aa86d140fe..3663511fef 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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; diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index f02918da9a..6be09251bc 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -39,7 +39,7 @@
{{ item.name }} - +