Adjust warning/alert/... styling

This commit is contained in:
traumweh 2025-04-09 12:23:15 +02:00
parent fccd7625a2
commit 524eb67b9f
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
3 changed files with 84 additions and 20 deletions

View file

@ -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 {

View file

@ -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 {

View file

@ -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);
}
}