Fix flashes display after grid introduction

Closes #5
This commit is contained in:
2024-01-17 21:57:18 +01:00
parent 11ecd8eaed
commit 1227c54e0e
5 changed files with 31 additions and 21 deletions

View File

@@ -202,18 +202,28 @@ input[type=text]:read-only {
}
#flashes {
align-items: center;
display: flex;
flex-direction: column;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 1em;
}
.flash {
align-items: center;
border-radius: 0.2rem;
border-radius: 0.2em;
color: white;
display: flex;
font-size: 1.0rem;
pointer-events: auto;
}
.flash.alert:before {
content: url('pictograms/alert-outline.svg');
height: 1.4rem;
margin: 0 0.5rem;
width: 1.4rem;
height: 1.4em;
margin: 0 0.5em;
width: 1.4em;
}
.flash.alert {
border-color: #ff1f5b;
@@ -221,25 +231,24 @@ input[type=text]:read-only {
}
.flash.notice:before {
content: url('pictograms/check-circle-outline.svg');
height: 1.4rem;
margin: 0 0.5rem;
width: 1.4rem;
height: 1.4em;
margin: 0 0.5em;
width: 1.4em;
}
.flash.notice {
border-color: #009ade;
background-color: #009ade;
}
/* NOTE: currently flash button inherits some unnecessary styles from generic
* button. */
.flash button {
background-color: inherit;
border: inherit;
border-radius: inherit;
border: none;
color: inherit;
cursor: pointer;
font-size: 1.4rem;
font-size: 1.4em;
font-weight: bold;
margin-left:auto;
opacity: 0.6;
padding: 0.2rem 0.2rem;
padding: 0.2em 0.4em;
}
.flash button:hover {
opacity: 1;