Files
warpbox/static/css/components/toast.css

39 lines
953 B
CSS

.toast {
position: fixed;
right: 12px;
bottom: 52px;
max-width: min(360px, calc(100vw - 24px));
display: none;
padding: 8px 10px;
color: #000000;
background: #ffffcc;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
z-index: 60;
font-size: 12px;
line-height: 14px;
box-shadow: 4px 4px 0 rgba(0,0,0,.45);
zoom: var(--ui-scale);
}
.toast.is-visible {
display: block;
animation: toast-in 180ms steps(3, end), toast-buzz 700ms steps(2, end) 180ms;
}
.toast.toast-warning {
color: #000000;
background: #ffffcc;
border: 4px solid transparent;
border-image: repeating-linear-gradient(45deg, #111111 0 8px, #ffcc00 8px 16px) 4;
}
.toast.toast-error {
color: #ffffff;
background: #b00000;
text-shadow: 1px 1px 0 #000000;
border-color: #ffb0b0 #330000 #330000 #ffb0b0;
}