From afa1380672a70cfd12cf5a976f32ebe050846803 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 27 May 2024 16:09:52 +0500 Subject: [PATCH] Change `--border-radius-circle` to `--border-radius-full` (gitea#30936) Cherry-pick of https://github.com/go-gitea/gitea/commit/2ced31e81dd9e45659660c1abff529d0192fd8ed adapted to Forgejo releases UI. Percentage-based `border-radius` [creates undesirable ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square content. Instead, use pixel value and use same wording `full` like tailwind does, but increast to 99999px over their 9999px. (cherry picked from commit 2ced31e81dd9e45659660c1abff529d0192fd8ed) --- tailwind.config.js | 2 +- web_src/css/base.css | 4 ++-- web_src/css/modules/animations.css | 2 +- web_src/css/repo.css | 2 +- web_src/css/repo/release-tag.css | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index d49e9d7a1c..94dfdbced4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -66,7 +66,7 @@ export default { 'xl': '12px', '2xl': '16px', '3xl': '24px', - 'full': 'var(--border-radius-circle)', // 50% + 'full': 'var(--border-radius-full)', }, fontFamily: { sans: 'var(--fonts-regular)', diff --git a/web_src/css/base.css b/web_src/css/base.css index deef2a866f..5d0e9e3608 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -18,7 +18,7 @@ /* other variables */ --border-radius: 4px; --border-radius-medium: 6px; - --border-radius-circle: 50%; + --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */ --opacity-disabled: 0.55; --height-loading: 16rem; --repo-header-issue-min-height: 41px; @@ -1359,7 +1359,7 @@ svg.text.purple, .color-icon { display: inline-block; - border-radius: var(--border-radius-circle); + border-radius: var(--border-radius-full); height: 14px; width: 14px; } diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 361618c449..a86c9234aa 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -31,7 +31,7 @@ border-width: 4px; border-style: solid; border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8); - border-radius: var(--border-radius-circle); + border-radius: var(--border-radius-full); } .is-loading.loading-icon-2px::after { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2b1c24fa46..68a714d21d 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -791,7 +791,7 @@ td .commit-summary { width: 34px; height: 34px; background-color: var(--color-timeline); - border-radius: var(--border-radius-circle); + border-radius: var(--border-radius-full); display: flex; float: left; margin-left: -33px; diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index e2b11dc77e..429a4690a4 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -68,7 +68,7 @@ position: absolute; left: -5.5px; top: 30px; - border-radius: var(--border-radius-circle); + border-radius: var(--border-radius-full); border: 2.5px solid var(--color-body); }