Merge pull request 'Improve how icon colors are defined' (#3702) from 0ko/forgejo:ui-icon-contrast into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3702 Reviewed-by: Otto <otto@codeberg.org> Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
		
				commit
				
					
						cf8641964c
					
				
			
		
					 5 changed files with 30 additions and 6 deletions
				
			
		| 
						 | 
				
			
			@ -1143,6 +1143,20 @@ overflow-menu .ui.label {
 | 
			
		|||
  color: var(--color-secondary-dark-2) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* colors of colorful icons */
 | 
			
		||||
svg.text.green,
 | 
			
		||||
.text.green svg {
 | 
			
		||||
  color: var(--color-icon-green) !important;
 | 
			
		||||
}
 | 
			
		||||
svg.text.red,
 | 
			
		||||
.text.red svg {
 | 
			
		||||
  color: var(--color-icon-red) !important;
 | 
			
		||||
}
 | 
			
		||||
svg.text.purple,
 | 
			
		||||
.text.purple svg {
 | 
			
		||||
  color: var(--color-icon-purple) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.oauth2-authorize-application-box {
 | 
			
		||||
  margin-top: 3em !important;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -178,6 +178,10 @@
 | 
			
		|||
  --color-orange-badge-bg: #ea580c22;
 | 
			
		||||
  --color-orange-badge-hover-bg: #ea580c44;
 | 
			
		||||
  --color-git: #f05133;
 | 
			
		||||
  /* Icon colors (PR/Issue/...) */
 | 
			
		||||
  --color-icon-green: #3fb950;
 | 
			
		||||
  --color-icon-red: #f85149;
 | 
			
		||||
  --color-icon-purple: #aa76ff;
 | 
			
		||||
  /* target-based colors */
 | 
			
		||||
  --color-body: var(--steel-800);
 | 
			
		||||
  --color-box-header: var(--steel-700);
 | 
			
		||||
| 
						 | 
				
			
			@ -264,9 +268,6 @@
 | 
			
		|||
.emoji[aria-label="musical notes"] {
 | 
			
		||||
  filter: invert(100%) hue-rotate(180deg);
 | 
			
		||||
}
 | 
			
		||||
.text.green.svg {
 | 
			
		||||
  color: var(--color-green-light) !important;
 | 
			
		||||
}
 | 
			
		||||
i.grey.icon.icon.icon.icon {
 | 
			
		||||
  color: var(--steel-350) !important;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -195,6 +195,10 @@
 | 
			
		|||
  --color-orange-badge-bg: #ea580c22;
 | 
			
		||||
  --color-orange-badge-hover-bg: #ea580c44;
 | 
			
		||||
  --color-git: #f05133;
 | 
			
		||||
  /* Icon colors (PR/Issue/...) */
 | 
			
		||||
  --color-icon-green: var(--color-green-light);
 | 
			
		||||
  --color-icon-red: var(--color-red-light);
 | 
			
		||||
  --color-icon-purple: var(--color-purple-light);
 | 
			
		||||
  /* target-based colors */
 | 
			
		||||
  --color-body: #fff;
 | 
			
		||||
  --color-box-header: var(--zinc-100);
 | 
			
		||||
| 
						 | 
				
			
			@ -258,9 +262,6 @@
 | 
			
		|||
  accent-color: var(--color-accent);
 | 
			
		||||
  color-scheme: light;
 | 
			
		||||
}
 | 
			
		||||
.text.green.svg {
 | 
			
		||||
  color: var(--color-green-light) !important;
 | 
			
		||||
}
 | 
			
		||||
.ui.secondary.vertical.menu {
 | 
			
		||||
  border-radius: 0.28571429rem !important;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -179,6 +179,10 @@
 | 
			
		|||
  --color-orange-badge-bg: #f2711c1a;
 | 
			
		||||
  --color-orange-badge-hover-bg: #f2711c4d;
 | 
			
		||||
  --color-git: #f05133;
 | 
			
		||||
  /* Icon colors (PR/Issue/...) */
 | 
			
		||||
  --color-icon-green: var(--color-green);
 | 
			
		||||
  --color-icon-red: var(--color-red);
 | 
			
		||||
  --color-icon-purple: var(--color-purple);
 | 
			
		||||
  /* target-based colors */
 | 
			
		||||
  --color-body: #1c1f25;
 | 
			
		||||
  --color-box-header: #1a1d1f;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -179,6 +179,10 @@
 | 
			
		|||
  --color-orange-badge-bg: #f2711c1a;
 | 
			
		||||
  --color-orange-badge-hover-bg: #f2711c4d;
 | 
			
		||||
  --color-git: #f05133;
 | 
			
		||||
  /* Icon colors (PR/Issue/...) */
 | 
			
		||||
  --color-icon-green: var(--color-green);
 | 
			
		||||
  --color-icon-red: var(--color-red);
 | 
			
		||||
  --color-icon-purple: var(--color-purple);
 | 
			
		||||
  /* target-based colors */
 | 
			
		||||
  --color-body: #ffffff;
 | 
			
		||||
  --color-box-header: #f1f3f5;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue