119 lines
3.1 KiB
CSS
119 lines
3.1 KiB
CSS
.notice {
|
|
--app-notice-border-color: var(--app-muted-border-color);
|
|
--app-notice-background-color: var(--app-card-background-color);
|
|
--app-notice-accent-color: var(--app-color);
|
|
border: var(--app-border-width) solid var(--app-notice-border-color);
|
|
border-radius: var(--app-border-radius);
|
|
background: var(--app-notice-background-color);
|
|
padding: calc(var(--app-spacing) * .5) calc(var(--app-spacing) * 1);
|
|
padding-right: calc(var(--app-spacing) * .5);
|
|
margin-bottom: var(--app-spacing);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--app-spacing);
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--app-notice-border-color);
|
|
}
|
|
|
|
#async-messages .notice {
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
padding-right: 5px;
|
|
padding-left: 15px;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--app-notice-border-color);
|
|
}
|
|
|
|
|
|
.notice strong {
|
|
color: var(--app-notice-accent-color);
|
|
}
|
|
|
|
.notice[data-variant=success] {
|
|
--app-notice-border-color: var(--app-notice-success-border-color);
|
|
--app-notice-background-color: var(--app-notice-success-background-color);
|
|
--app-notice-accent-color: var(--app-notice-success-color);
|
|
}
|
|
|
|
.notice[data-variant=warning] {
|
|
--app-notice-border-color: var(--app-notice-warning-border-color);
|
|
--app-notice-background-color: var(--app-notice-warning-background-color);
|
|
--app-notice-accent-color: var(--app-notice-warning-color);
|
|
}
|
|
|
|
.notice[data-variant=info] {
|
|
--app-notice-border-color: var(--app-notice-info-border-color);
|
|
--app-notice-background-color: var(--app-notice-info-background-color);
|
|
--app-notice-accent-color: var(--app-notice-info-color);
|
|
}
|
|
|
|
.notice[data-variant=error] {
|
|
--app-notice-border-color: var(--app-notice-error-border-color);
|
|
--app-notice-background-color: var(--app-notice-error-background-color);
|
|
--app-notice-accent-color: var(--app-notice-error-color);
|
|
}
|
|
|
|
.notice.flash-timed::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 3px;
|
|
width: 100%;
|
|
background: var(--app-notice-border-color);
|
|
transform-origin: left;
|
|
transform: scaleX(0);
|
|
animation: flash-progress var(--flash-timeout, 4000ms) linear forwards;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.notice.flash-timed:hover::after {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes flash-progress {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.notice.flash-timed::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.notice button[type=submit] {
|
|
border: 1px solid var(--app-notice-border-color) !important;
|
|
background: var(--app-notice-background-color);
|
|
color: var(--app-notice-border-color);
|
|
}
|
|
|
|
.notice ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.notice li:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.app-details-errors {
|
|
padding-block-start: 1rem;
|
|
}
|
|
|
|
.flash-stack:has(.notice) {
|
|
margin-top: var(--app-spacing);
|
|
} |