Apply CSS Variables to all message elements (#17920)
Fixes #17918. Applies color variables to all ui message on both themes. The colorization on .segment is a customization not present in fomantic ui, only used on user/repo/org delete pages.
This commit is contained in:
		
							parent
							
								
									dcdb4873c8
								
							
						
					
					
						commit
						12a42baa5e
					
				|  | @ -82,15 +82,18 @@ | |||
|   --color-diff-moved-row-border: #d0e27f; | ||||
|   --color-diff-added-row-border: #e6ffed; | ||||
|   --color-diff-inactive: #f2f2f2; | ||||
|   --color-error-border: #c29393; | ||||
|   --color-error-bg: #fff5f5; | ||||
|   --color-error-text: #d64444; | ||||
|   --color-error-border: #e0b4b4; | ||||
|   --color-error-bg: #fff6f6; | ||||
|   --color-error-text: #9f3a38; | ||||
|   --color-success-border: #a3c293; | ||||
|   --color-success-bg: #fcfff5; | ||||
|   --color-success-text: #6cc644; | ||||
|   --color-warning-border: #c2c193; | ||||
|   --color-warning-bg: #fffff5; | ||||
|   --color-warning-text: #fbbd08; | ||||
|   --color-success-text: #2c662d; | ||||
|   --color-warning-border: #c9ba9b; | ||||
|   --color-warning-bg: #fffaf3; | ||||
|   --color-warning-text: #573a08; | ||||
|   --color-info-border: #a9d5de; | ||||
|   --color-info-bg: #f8ffff; | ||||
|   --color-info-text: #276f86; | ||||
|   /* target-based colors */ | ||||
|   --color-body: #ffffff; | ||||
|   --color-text-dark: #080808; | ||||
|  | @ -423,13 +426,68 @@ a.muted:hover, | |||
| .ui.message { | ||||
|   background: var(--color-box-body); | ||||
|   color: var(--color-text); | ||||
| } | ||||
| 
 | ||||
| .ui.bottom.attached.message { | ||||
|   box-shadow: none !important; | ||||
|   border: 1px solid var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .ui.info.message, | ||||
| .ui.attached.info.message, | ||||
| .ui.blue.message, | ||||
| .ui.attached.blue.message { | ||||
|   background: var(--color-info-bg); | ||||
|   color: var(--color-info-text); | ||||
|   border-color: var(--color-info-border); | ||||
| } | ||||
| 
 | ||||
| .ui.success.message, | ||||
| .ui.attached.success.message, | ||||
| .ui.positive.message, | ||||
| .ui.attached.positive.message { | ||||
|   background: var(--color-success-bg); | ||||
|   color: var(--color-success-text); | ||||
|   border-color: var(--color-success-border); | ||||
| } | ||||
| 
 | ||||
| .ui.error.message, | ||||
| .ui.attached.error.message, | ||||
| .ui.red.message, | ||||
| .ui.attached.red.message, | ||||
| .ui.negative.message, | ||||
| .ui.attached.negative.message { | ||||
|   background: var(--color-error-bg); | ||||
|   color: var(--color-error-text); | ||||
|   border-color: var(--color-error-border); | ||||
| } | ||||
| 
 | ||||
| .ui.warning.message, | ||||
| .ui.attached.warning.message, | ||||
| .ui.yellow.message, | ||||
| .ui.attached.yellow.message { | ||||
|   background: var(--color-warning-bg); | ||||
|   color: var(--color-warning-text); | ||||
|   border-color: var(--color-warning-border); | ||||
| } | ||||
| 
 | ||||
| .ui.error.header { | ||||
|   background: var(--color-error-bg) !important; | ||||
|   color: var(--color-error-text) !important; | ||||
|   border-color: var(--color-error-border) !important; | ||||
| } | ||||
| 
 | ||||
| .ui.error.segment { | ||||
|   border-color: var(--color-error-border) !important; | ||||
| } | ||||
| 
 | ||||
| .ui.warning.header { | ||||
|   background: var(--color-warning-bg) !important; | ||||
|   color: var(--color-warning-text) !important; | ||||
|   border-color: var(--color-warning-border) !important; | ||||
| } | ||||
| 
 | ||||
| .ui.warning.segment { | ||||
|   border-color: var(--color-warning-border) !important; | ||||
| } | ||||
| 
 | ||||
| .ui.selection.active.dropdown, | ||||
| .ui.selection.active.dropdown:hover, | ||||
| .ui.selection.active.dropdown .menu, | ||||
|  | @ -920,35 +978,9 @@ a.ui.card:hover, | |||
|     vertical-align: middle; | ||||
|   } | ||||
| 
 | ||||
|   .error { | ||||
|     &.header { | ||||
|       background-color: #ffe8e6 !important; | ||||
|       border-color: var(--color-red); | ||||
|     } | ||||
| 
 | ||||
|     &.segment { | ||||
|       border-color: var(--color-red); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .warning { | ||||
|     &.header { | ||||
|       background-color: #f9edbe !important; | ||||
|       border-color: var(--color-yellow); | ||||
|     } | ||||
| 
 | ||||
|     &.segment { | ||||
|       border-color: var(--color-yellow); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .info { | ||||
|     &.segment { | ||||
|       border: 1px solid #c5d5dd; | ||||
| 
 | ||||
|       &.top { | ||||
|         background-color: #e6f1f6 !important; | ||||
| 
 | ||||
|         h3, | ||||
|         h4 { | ||||
|           margin-top: 0; | ||||
|  |  | |||
|  | @ -79,14 +79,17 @@ | |||
|   --color-diff-added-row-border: #314a37; | ||||
|   --color-diff-inactive: #353846; | ||||
|   --color-error-border: #a53a37; | ||||
|   --color-error-bg: #403440; | ||||
|   --color-error-text: #d64444; | ||||
|   --color-error-bg: #482c2c; | ||||
|   --color-error-text: #ff4433; | ||||
|   --color-success-border: #458a57; | ||||
|   --color-success-bg: #304440; | ||||
|   --color-success-bg: #284034; | ||||
|   --color-success-text: #6cc664; | ||||
|   --color-warning-border: #aaa050; | ||||
|   --color-warning-bg: #404440; | ||||
|   --color-warning-border: #bb9d00; | ||||
|   --color-warning-bg: #3a3a30; | ||||
|   --color-warning-text: #fbbd08; | ||||
|   --color-info-border: #306090; | ||||
|   --color-info-bg: #26354c; | ||||
|   --color-info-text: #38a8e8; | ||||
|   /* target-based colors */ | ||||
|   --color-body: #383c4a; | ||||
|   --color-box-header: #404652; | ||||
|  | @ -337,38 +340,6 @@ td.blob-hunk { | |||
|   color: #dbdbdb !important; | ||||
| } | ||||
| 
 | ||||
| .ui .warning.header, | ||||
| .ui.warning.message { | ||||
|   background-color: #542 !important; | ||||
|   border-color: #ec8; | ||||
| } | ||||
| 
 | ||||
| .ui.warning.message { | ||||
|   color: #ec8; | ||||
|   box-shadow: 0 0 0 1px #ec8; | ||||
| } | ||||
| 
 | ||||
| .ui.warning.segment { | ||||
|   border-color: #ec8; | ||||
| } | ||||
| 
 | ||||
| .ui.red.message, | ||||
| .ui.error.message { | ||||
|   background-color: #522; | ||||
|   color: #f9cbcb; | ||||
|   box-shadow: 0 0 0 1px #a04141 inset; | ||||
| } | ||||
| 
 | ||||
| .ui .error.header, | ||||
| .ui.error.message { | ||||
|   background-color: #522 !important; | ||||
|   border-color: #a04141; | ||||
| } | ||||
| 
 | ||||
| .ui.error.segment { | ||||
|   border-color: #a04141; | ||||
| } | ||||
| 
 | ||||
| .ui.red.button, | ||||
| .ui.red.buttons .button { | ||||
|   background-color: #7d3434; | ||||
|  | @ -379,18 +350,6 @@ td.blob-hunk { | |||
|   background-color: #984646; | ||||
| } | ||||
| 
 | ||||
| .ui.positive.message { | ||||
|   background-color: #0d491b; | ||||
|   color: #87ab63; | ||||
|   box-shadow: 0 0 0 1px #2d693b inset, 0 0 0 0 transparent; | ||||
| } | ||||
| 
 | ||||
| .ui.negative.message { | ||||
|   background-color: rgba(80, 23, 17, .6); | ||||
|   color: #f9cbcb; | ||||
|   box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent; | ||||
| } | ||||
| 
 | ||||
| .ui.list .list > .item .header, | ||||
| .ui.list > .item .header { | ||||
|   color: #dedede; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue