From 12a42baa5ed5f5b5224f7c775b8be04b3eb4980c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 6 Dec 2021 07:49:30 -0800 Subject: [PATCH] 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. --- web_src/less/_base.less | 104 +++++++++++++++-------- web_src/less/themes/theme-arc-green.less | 57 ++----------- 2 files changed, 76 insertions(+), 85 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index e9e2cf064e..1d6b65e945 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 98f98c7871..091cd28752 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -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;