mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 11:28:24 +00:00 
			
		
		
		
	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.
This commit is contained in:
		| @@ -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; | ||||
| } | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user