react-floatify/dist/react-floatify.css

A lightweight, customizable toast notification library for React.

:root{--toasty-color-primary: #4e4867;--toasty-color-success: rgb(106, 197, 106);--toasty-color-error: red;--toasty-color-warning: rgb(255, 182, 25);--toasty-color-contrast-text: rgb(238, 238, 238)}.Toasty-stack-modal{position:fixed;bottom:.5rem;left:.5rem;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:.5rem;z-index:99999;pointer-events:none}.Toasty-stack-modal.left{align-items:flex-start}.Toasty-stack-modal.right{align-items:flex-end;left:unset;right:.5rem}.Toasty-stack-modal.center{align-items:center}.Toasty-stack-modal.top{bottom:unset;top:.5rem}.Toasty-container{max-width:250px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-radius:.6rem;color:var(--toasty-color-primary);font-size:.9rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow:hidden;background-color:unset}.Toasty-container.outlined{background-color:inherit;backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem)}.Toasty-container.success{color:var(--toasty-color-success)}.Toasty-container.success.outlined{border:1px solid var(--toasty-color-success)}.Toasty-container.success.contained{background-color:var(--toasty-color-success)}.Toasty-container.success.regular{background-color:#f5f5f5}.Toasty-container.error{color:var(--toasty-color-error)}.Toasty-container.error.outlined{border:1px solid var(--toasty-color-error)}.Toasty-container.error.contained{background-color:var(--toasty-color-error)}.Toasty-container.error.regular{background-color:#f5f5f5}.Toasty-container.warning{color:var(--toasty-color-warning)}.Toasty-container.warning.outlined{border:1px solid var(--toasty-color-warning)}.Toasty-container.warning.contained{background-color:var(--toasty-color-warning)}.Toasty-container.warning.regular{background-color:#f5f5f5}.Toasty-container.default{color:var(--toasty-color-primary)}.Toasty-container.default.outlined{border:1px solid var(--toasty-color-primary)}.Toasty-container.default.contained{background-color:var(--toasty-color-primary)}.Toasty-container.default.regular{background-color:#f5f5f5}.Toasty-container .Toasty-message{font-size:1rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.Toasty-container .Toasty-message>*{flex-shrink:0}.Toasty-container .Toasty-message.small-spacing{padding:.5rem 1rem}.Toasty-container .Toasty-message.regular-spacing{padding:.75rem 1.25rem}.Toasty-container .Toasty-message.large-spacing{padding:1rem 1.5rem}.Toasty-progress-container{width:100%;height:5px;display:flex;justify-content:start;align-items:center}.Toasty-progress-container .Toasty-progress-bar{height:100%;animation:progress linear forwards}.Toasty-progress-container .Toasty-progress-bar.success{background-color:var(--toasty-color-success)}.Toasty-progress-container .Toasty-progress-bar.error{background-color:var(--toasty-color-error)}.Toasty-progress-container .Toasty-progress-bar.warning{background-color:var(--toasty-color-warning)}.Toasty-progress-container .Toasty-progress-bar.default{background-color:var(--toasty-color-primary)}.Toasty-container.contained{color:var(--toasty-color-contrast-text)}.Toasty-container.contained .Toasty-progress-bar{background-color:var(--toasty-color-contrast-text)}@keyframes progress{0%{width:100%}to{width:0%}}