mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-08 16:14:30 +00:00
Change --border-radius-circle
to --border-radius-full
(gitea#30936)
Cherry-pick of2ced31e81d
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) Adapted by @0ko (cherry picked from commitafa1380672
) (cherry picked from commit 7b7318255e68ee7e4d0f5b1b8e5ef91cd72a59e5)
This commit is contained in:
parent
43303922a8
commit
def21375b7
|
@ -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)',
|
||||
|
|
|
@ -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;
|
||||
|
@ -1423,7 +1423,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;
|
||||
}
|
||||
|
|
|
@ -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.small-loading-icon::after {
|
||||
|
|
|
@ -805,7 +805,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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue