From fe2b9274b13f33fdfa77e2ae46f63b31a92a810a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 18 Aug 2023 05:50:32 +0800 Subject: [PATCH] Fix various line-height styles (#26553) Fix #26537 Use the same default line-height as "normalize.css" instead of "1". "1" is not right because it doesn't work with descent part and causes overflow problems. ![image](https://github.com/go-gitea/gitea/assets/2114189/3f2e8fb5-b326-4889-bfff-c79c75f1b7f4) --------- Co-authored-by: silverwind --- web_src/css/admin.css | 2 +- web_src/css/base.css | 13 ++++++++++--- web_src/css/repo.css | 4 ++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web_src/css/admin.css b/web_src/css/admin.css index 74e6b10a7c..fecae5f2bf 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -13,7 +13,7 @@ .admin dl.admin-dl-horizontal dt, .admin dl.admin-dl-horizontal dd { - line-height: 1; + line-height: var(--line-height-default); padding: 5px 0; } diff --git a/web_src/css/base.css b/web_src/css/base.css index 0ea0c81864..94dd85814e 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -9,6 +9,8 @@ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; + /* line-height: use the default value as "modules/normalize.css" */ + --line-height-default: 1.15; /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); @@ -518,6 +520,9 @@ a.label, .ui.menu .item { color: var(--color-text); user-select: auto; + line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */ + padding-top: 11px; /* counteract line-height change */ + padding-bottom: 11px; /* counteract line-height change */ } .ui.menu .item > .svg { @@ -664,6 +669,8 @@ a.label, .ui.secondary.menu .item { margin-left: 0; margin-right: 0; + padding-top: 10px; /* counteract line-height change */ + padding-bottom: 10px; /* counteract line-height change */ } .ui.secondary.menu .dropdown.item:hover, @@ -1476,7 +1483,7 @@ img.ui.avatar, height: 3em; float: none; display: block; - line-height: 1; + line-height: var(--line-height-default); padding: 0; margin: 0 auto 0.5rem; opacity: 1; @@ -2124,7 +2131,7 @@ table th[data-sortt-desc] .svg { .emoji, .reaction { font-size: 1.25em; - line-height: 1; + line-height: var(--line-height-default); font-style: normal !important; font-weight: var(--font-weight-normal) !important; vertical-align: -0.075em; @@ -2247,7 +2254,7 @@ table th[data-sortt-desc] .svg { } .ui.dropdown { - line-height: 1; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ + line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ } /* dropdown has some kinds of icons: diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 34fa2a0052..8e8125a5f4 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -390,8 +390,8 @@ } .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon { - line-height: 1; - padding: 10px 8px; + line-height: var(--line-height-default); + padding: 8px; vertical-align: middle; color: var(--color-text); }