vexip-ui/css/toast.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-toast-vars{--vxp-toast-z-index:var(--vxp-z-index-masker);--vxp-toast-min-width:100px;--vxp-toast-max-width:90%;--vxp-toast-min-height:100px;--vxp-toast-v-padding:16px;--vxp-toast-h-padding:16px;--vxp-toast-color:var(--vxp-color-white);--vxp-toast-bg-color:var(--vxp-color-black);--vxp-toast-radius:var(--vxp-radius-large);--vxp-toast-opacity:70%}.vxp-toast{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:fixed;inset:0;z-index:var(--vxp-z-index-masker);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.vxp-toast,.vxp-toast *,.vxp-toast ::after,.vxp-toast ::before{box-sizing:border-box}.vxp-toast--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-toast--text-only{--vxp-toast-min-height:0;--vxp-toast-v-padding:8px}.vxp-toast>*{pointer-events:auto}.vxp-toast__mask{position:absolute;inset:0;background-color:transparent}.vxp-toast__wrapper{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:var(--vxp-toast-min-width);max-width:var(--vxp-toast-max-width);min-height:var(--vxp-toast-min-height);padding:var(--vxp-toast-v-padding) var(--vxp-toast-h-padding);color:var(--vxp-toast-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border-radius:var(--vxp-toast-radius);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-toast__wrapper--top{position:absolute;top:30px}.vxp-toast__wrapper--bottom{position:absolute;bottom:30px}.vxp-toast__wrapper--closable{cursor:pointer}.vxp-toast__wrapper::before{position:absolute;inset:0;z-index:-1;pointer-events:none;content:"";background-color:var(--vxp-toast-bg-color);border-radius:var(--vxp-toast-radius);opacity:var(--vxp-toast-opacity)}.vxp-toast__icon{display:flex;align-items:center;justify-content:center;margin-bottom:8px}.vxp-toast__content{width:-moz-fit-content;width:fit-content;word-break:break-all;white-space:pre-wrap}