forks/forgejo
1
0
Fork 0
Code Releases Activity

Change --border-radius-circle to --border-radius-full (gitea#30936)

Browse source 
Cherry-pick of 2ced31e81d 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)
This commit is contained in:
silverwind 2024-05-27 16:09:52 +05:00 committed by Earl Warren
parent df15abd072
commit afa1380672
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
5 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
tailwind.config.js
View file

@ -66,7 +66,7 @@ export default {
'xl': '12px', 'xl': '12px',
'2xl': '16px', '2xl': '16px',
'3xl': '24px', '3xl': '24px',
'full': 'var(--border-radius-circle)', // 50% 'full': 'var(--border-radius-full)',
}, },
fontFamily: { fontFamily: {
sans: 'var(--fonts-regular)', sans: 'var(--fonts-regular)',

4
web_src/css/base.css
View file

@ -18,7 +18,7 @@
/* other variables */ /* other variables */
--border-radius: 4px; --border-radius: 4px;
--border-radius-medium: 6px; --border-radius-medium: 6px;
--border-radius-circle: 50%; --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
--opacity-disabled: 0.55; --opacity-disabled: 0.55;
--height-loading: 16rem; --height-loading: 16rem;
--repo-header-issue-min-height: 41px; --repo-header-issue-min-height: 41px;
@ -1359,7 +1359,7 @@ svg.text.purple,
.color-icon { .color-icon {
display: inline-block; display: inline-block;
border-radius: var(--border-radius-circle); border-radius: var(--border-radius-full);
height: 14px; height: 14px;
width: 14px; width: 14px;
} }

2
web_src/css/modules/animations.css
View file

@ -31,7 +31,7 @@
border-width: 4px; border-width: 4px;
border-style: solid; border-style: solid;
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8); 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 { .is-loading.loading-icon-2px::after {

2
web_src/css/repo.css
View file

@ -791,7 +791,7 @@ td .commit-summary {
width: 34px; width: 34px;
height: 34px; height: 34px;
background-color: var(--color-timeline); background-color: var(--color-timeline);
border-radius: var(--border-radius-circle); border-radius: var(--border-radius-full);
display: flex; display: flex;
float: left; float: left;
margin-left: -33px; margin-left: -33px;

2
web_src/css/repo/release-tag.css
View file

@ -68,7 +68,7 @@
position: absolute; position: absolute;
left: -5.5px; left: -5.5px;
top: 30px; top: 30px;
border-radius: var(--border-radius-circle); border-radius: var(--border-radius-full);
border: 2.5px solid var(--color-body); border: 2.5px solid var(--color-body);
} }