1 line
No EOL
2 KiB
CSS
1 line
No EOL
2 KiB
CSS
.toast-group{position:fixed;z-index:9999999;left:0;right:0;bottom:0;inset-inline-start:0;inset-inline-end:0;display:flex;align-items:center;justify-content:center;gap:1vh;pointer-events:none;flex-direction:column;padding-bottom:8vh;padding-bottom:calc(8vh + env(safe-area-inset-bottom,0));font-size:110%}.toast-group-top{flex-direction:column-reverse;bottom:initial;align-items:flex-end;top:0;padding-bottom:0;padding-top:2em;padding-top:calc(2em + env(safe-area-inset-top,0));padding-inline-end:2em;padding-inline-end:calc(2em + env(safe-area-inset-right,0))}.toast{font-size:inherit;font-family:inherit;font-weight:inherit;max-inline-size:min(25ch,90vw);padding:1.5ch 2ch;border-radius:.42em;will-change:transform,opacity;animation:toast-fade-in .3s ease,toast-slide-in .3s ease,toast-fade-out .3s ease 3s;display:flex;flex-direction:row;align-items:center}.toast-top{animation:toast-fade-in .3s ease,toast-slide-in-top .3s ease,toast-fade-out .3s ease 3s}.toast-center{animation:toast-scale-up .3s ease-out,toast-scale-down .3s ease-out 3s;position:fixed;top:50%;inset-inline-start:50%;width:16em;height:17em;margin-inline-start:-8em;margin-top:-8.5em;justify-content:center;overflow:hidden;flex-direction:column;padding-top:0;padding-bottom:0;z-index:9999999}.toast-primarytext{margin:0}.toast-secondaryText{font-size:92%;margin-top:.25em}.toast-icon{font-size:160%;margin:0;margin-inline-end:.5em}.toast-icon-center{font-size:800%;flex-shrink:0;width:1em;height:1em;margin:0}@keyframes toast-scale-up{0%{transform:scale(.8);opacity:0}}@keyframes toast-scale-down{to{transform:scale(.8);opacity:0}}@keyframes toast-fade-in{0%{opacity:0}}@keyframes toast-fade-out{to{opacity:0}}@keyframes toast-slide-in{0%{transform:translateY(5vh)}}@keyframes toast-slide-in-top{0%{transform:translateY(-5vh)}}@supports (scale:1){.toast{will-change:translate,opacity}.toast-center{will-change:scale,opacity}@keyframes toast-scale-up{0%{scale:.8;opacity:0}}@keyframes toast-scale-down{to{scale:.8;opacity:0}}@keyframes toast-slide-in{0%{translate:0 5vh}}@keyframes toast-slide-in-top{0%{translate:0 -5vh}}} |