diff --git a/css/area_msg.less b/css/area_msg.less index 41fe08b..d631e0c 100644 --- a/css/area_msg.less +++ b/css/area_msg.less @@ -15,23 +15,70 @@ } } -/* short fix: SPR-891 - icons for notifications in message area are repeated */ div.success, div.error, div.info, div.notify { - background-repeat: no-repeat; - background-position: 8px 50%; - border: 1px solid #eeb; - font-size: 90%; - margin: 0 0 .5em; - padding: .4em; - padding-left: 32px; - overflow: hidden; - border-radius: @fix_border-radius; + @media @screen_max-md { + flex-direction: column; + } - * { - color: inherit; + display: flex; + align-items: start; + gap: 0.5rem; + border: none; + border-left: solid 0.5rem var(--color-shade-4); + border-radius: 0.5rem; + padding: 1em; + background-image: none; + background-color: var(--color-shade-1); + + &::before { + content: ""; + flex-shrink: 0; + margin-top: 0.3em; + width: 1em; + height: 1em; + mask-size: contain; + mask-position: center top; + mask-repeat: no-repeat; + background-color: currentColor; + } + + &.success { + color: var(--color-success); + + &::before { + mask-image: url(img/tick_small.svg); + } + } + + &.error { + border-left-color: var(--color-error); + color: var(--color-foreground); + + &::before { + background-color: var(--color-error); + mask-image: url(img/power.svg); + } + } + + &.info { + color: var(--color-foreground); + + &::before { + mask-image: url(img/info.svg); + } + } + + &.notify { + border-left-color: var(--color-warning); + color: var(--color-foreground); + + &::before { + background-color: var(--color-warning); + mask-image: url(img/warning.svg); + } } a { diff --git a/css/plugins/extension__manager.less b/css/plugins/extension__manager.less index 8ccd7b4..1199b74 100644 --- a/css/plugins/extension__manager.less +++ b/css/plugins/extension__manager.less @@ -14,6 +14,30 @@ padding-left: .3rem; padding-right: .3rem; } + + p.permerror { + @media @screen_max-md { + flex-direction: column; + } + + display: flex; + align-items: start; + gap: 0.5rem; + background: none; + + &::before { + content: ""; + flex-shrink: 0; + margin-top: 0.3em; + width: 1em; + height: 1em; + mask-size: contain; + mask-position: center top; + mask-repeat: no-repeat; + mask-image: url(img/warning.svg); + background-color: var(--color-warning); + } + } } ul.tabs { diff --git a/css/plugins/wrap.less b/css/plugins/wrap.less index 9d6bbc8..0c0948c 100644 --- a/css/plugins/wrap.less +++ b/css/plugins/wrap.less @@ -39,11 +39,6 @@ background-image: none; background-color: var(--color-shade-1); - p { - margin: 0; - max-width: calc(~"100% - 2.5rem"); - } - &::before { content: ""; flex-shrink: 0; @@ -53,6 +48,7 @@ mask-size: contain; mask-position: center top; mask-repeat: no-repeat; + background-color: currentColor; } } @@ -60,7 +56,6 @@ color: var(--color-foreground); &::before { - background-color: currentColor; mask-image: url(img/info.svg); } } @@ -69,7 +64,6 @@ color: var(--color-foreground); &::before { - background-color: currentColor; mask-image: url(img/lightbulb.svg); } } @@ -118,7 +112,6 @@ color: var(--color-foreground); &::before { - background-color: currentColor; mask-image: url(img/tick_small.svg); } }