toastvibe/dist/index.css

ToastVibe is a lightweight, customizable, and flexible toast notification library for React.

.toast{padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;font-family:Arial,sans-serif;box-shadow:0 4px 12px #0003;margin:8px;display:flex;align-items:center;justify-content:space-between;max-width:300px;animation:fadeIn .3s ease-in-out;background:linear-gradient(135deg,#3498db,#2980b9);transition:transform .3s ease,opacity .3s ease,background .5s ease}.toast:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000004d}.toast-pending{background:linear-gradient(135deg,#3498db,#2980b9)}.toast-success{background:linear-gradient(135deg,#2ecc71,#27ae60)}.toast-warning{background:linear-gradient(135deg,#f1c40f,#f39c12)}.toast-error{background:linear-gradient(135deg,#e74c3c,#c0392b)}.toast.rich-colors{animation:colorChange 2s infinite alternate}@keyframes colorChange{0%{background:linear-gradient(135deg,var(--toast-color),var(--toast-color-dark))}to{background:linear-gradient(135deg,var(--toast-color-dark),var(--toast-color))}}.toast-pending.rich-colors{--toast-color: #3498db;--toast-color-dark: #2980b9}.toast-success.rich-colors{--toast-color: #2ecc71;--toast-color-dark: #27ae60}.toast-warning.rich-colors{--toast-color: #f1c40f;--toast-color-dark: #f39c12}.toast-error.rich-colors{--toast-color: #e74c3c;--toast-color-dark: #c0392b}.toast-close{background:none;border:none;color:#fff;cursor:pointer;margin-left:10px;font-size:16px;font-weight:700;transition:opacity .2s ease}.toast-close:hover{opacity:.8}.toast-container{position:fixed!important;z-index:9999!important}.toast-container.top-left{top:20px;left:20px}.toast-container.top-right{top:20px;right:20px}.toast-container.bottom-left{bottom:20px;left:20px}.toast-container.bottom-right{bottom:20px;right:20px}.toast-container.top-center{top:20px;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.toast-container.center{top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toast-container.top-left .toast{animation:slideInLeft .5s ease-in-out}.toast-container.top-right .toast{animation:slideInRight .5s ease-in-out}.toast-container.top-center .toast{animation:slideInTop .5s ease-in-out}.toast-container.bottom-center .toast{animation:slideInBottom .5s ease-in-out}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-loading{display:flex;align-items:center;margin-left:10px}.toast-loading-spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;width:16px;height:16px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast-message{flex:1;margin-right:10px}.toast-icon{margin-right:10px;font-size:18px}
/*# sourceMappingURL=index.css.map */