diff options
| author | silverwind <me@silverwind.io> | 2024-05-25 16:33:34 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-25 14:33:34 +0000 |
| commit | 2ced31e81dd9e45659660c1abff529d0192fd8ed (patch) | |
| tree | 49c47b2ccb87248f9fca8a746dd6fe499d165a97 /web_src | |
| parent | 47e715a70ff1802fae27d8d922b3185a3d83d640 (diff) | |
| download | gitea-2ced31e81dd9e45659660c1abff529d0192fd8ed.tar.gz gitea-2ced31e81dd9e45659660c1abff529d0192fd8ed.zip | |
Change `--border-radius-circle` to `--border-radius-full` (#30936)
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.
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/base.css | 4 | ||||
| -rw-r--r-- | web_src/css/modules/animations.css | 2 | ||||
| -rw-r--r-- | web_src/css/repo.css | 2 |
3 files changed, 4 insertions, 4 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index 2d93690170..0e54d17262 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; --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */ @@ -1166,7 +1166,7 @@ overflow-menu .ui.label { .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 56235f8ebe..ce5d3c7951 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -790,7 +790,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; |