mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-08-30 14:26:04 +02:00
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
2 changed files with 76 additions and 85 deletions
|
@ -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 a new issue