fix global notices

This commit is contained in:
Henry Jameson 2024-02-27 22:02:25 +02:00
parent eab3bfaf0d
commit e2af986323
5 changed files with 6 additions and 45 deletions

View File

@ -18,7 +18,8 @@ export default {
{ {
directives: { directives: {
background: '--text', background: '--text',
opacity: 0.5 opacity: 0.5,
blur: '9px'
} }
}, },
{ {

View File

@ -4,7 +4,7 @@
v-for="(notice, index) in notices" v-for="(notice, index) in notices"
:key="index" :key="index"
class="alert global-notice" class="alert global-notice"
:class="{ ['global-' + notice.level]: true }" :class="{ [notice.level]: true }"
> >
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
@ -52,48 +52,8 @@
} }
} }
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
.global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text);
}
}
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice { .close-notice {
padding-right: 0.2em; padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
} }
} }
</style> </style>

View File

@ -9,6 +9,7 @@ export default {
'Scrollbar', 'Scrollbar',
'ScrollbarElement', 'ScrollbarElement',
'MobileDrawer', 'MobileDrawer',
'Alert',
'Button' // mobile post button 'Button' // mobile post button
], ],
defaultRules: [ defaultRules: [

View File

@ -6,8 +6,7 @@ export default {
// we are searching for underlay specifically or for whatever is laid on top of it. // we are searching for underlay specifically or for whatever is laid on top of it.
outOfTreeSelector: '.underlay', outOfTreeSelector: '.underlay',
validInnerComponents: [ validInnerComponents: [
'Panel', 'Panel'
'Alert'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
return [ return [
header, header,
directives + ';', directives + ';',
(rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '', (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
'', '',
virtualDirectives, virtualDirectives,
footer footer