beautyToast.min.css

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');:root{--beautyToast-font: 'Quicksand', sans-serif;--beautyToast-regular: 400;--beautyToast-bold: 700;--beautyToast-body: 14px;--beautyToast-title: 16px;--beautyToast-image: 31px;--beautyToast-success-color: #68D84C;--beautyToast-error-color: #D84C4C;--beautyToast-info-color: #4CA5D8;--beautyToast-warning-color: #D8D24C;--beautyToast-bg-color: #FDFDFD;--beautyToast-text-color: #4E4E4E;--beautyToast-progress-color: #D3D6D2;--beautyToast-close-color: #121212;}*{margin: 0;padding: 0;}button{background-color: transparent;border: none;}.beautyToast-dark{--beautyToast-bg-color: #464646;--beautyToast-text-color: #D7D7D7;--beautyToast-progress-color: #7D7D7D;--beautyToast-close-color: #D3CECE;}.beautyToast, .beautyToast-body, .beautyToast-title-group{display: flex;flex-direction: row;align-items: center;}.beautyToast-wrapper{position: fixed;display: flex;align-items: flex-end;flex-direction: column;top: 15px;right: 15px;margin-left: 15px;gap: 10px;z-index: 100;}.beautyToast{justify-content: space-between;gap: 15px;font-family: var(--beautyToast-font);font-size: var(--beautyToast-body);background-color: var(--beautyToast-bg-color);padding: 15px;padding-right: 10px;padding-bottom: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);border-radius: 5px;opacity: 0;pointer-events: none;transition: all .3s ease-in-out;transform: translateX(50px);-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-webkit-transform: translateX(50px);-moz-transform: translateX(50px);-ms-transform: translateX(50px);-o-transform: translateX(50px);}.beautyToast.no-close{padding-right: 35px;}.beautyToast.show{opacity: 1;pointer-events: fill;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);}.beautyToast .beautyToast-topbar{position: absolute;height: 5px;width: 100%;top: 0;left: 0;}.beautyToast-success .beautyToast-topbar{background-color: var(--beautyToast-success-color);}.beautyToast-error .beautyToast-topbar{background-color: var(--beautyToast-error-color);}.beautyToast-info .beautyToast-topbar{background-color: var(--beautyToast-info-color);}.beautyToast-warning .beautyToast-topbar{background-color: var(--beautyToast-warning-color);}.beautyToast-success{color: var(--beautyToast-success-color) }.beautyToast-error{color: var(--beautyToast-error-color) }.beautyToast-info{color: var(--beautyToast-info-color) }.beautyToast-warning{color: var(--beautyToast-warning-color) }.beautyToast-body{gap: 20px;}.beautyToast-title-group{gap: 10px;font-weight: var(--beautyToast-bold);}.beautyToast-icon{display: flex;align-items: center;justify-content: center;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transform: rotate(45deg) scale(0.5);-webkit-transform: rotate(45deg) scale(0.5);-moz-transform: rotate(45deg) scale(0.5);-ms-transform: rotate(45deg) scale(0.5);-o-transform: rotate(45deg) scale(0.5);}.beautyToast.animate-child .beautyToast-icon{transform: rotate(0) scale(1);-webkit-transform: rotate(0) scale(1);-moz-transform: rotate(0) scale(1);-ms-transform: rotate(0) scale(1);-o-transform: rotate(0) scale(1);}.beautyToast-icon.image{width: var(--beautyToast-image);height: var(--beautyToast-image);background-size: contain;background-position: center center;}.beautyToast-icon img, .beautyToast-icon svg{width: var(--beautyToast-image) !important;height: var(--beautyToast-image) !important;}.beautyToast-icon i{font-size: var(--beautyToast-image);}.beautyToast-title{font-size: var(--beautyToast-title);transition: all .3s ease-out;transform: translateX(10px);opacity: 0;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;-webkit-transform: translateX(10px);-moz-transform: translateX(10px);-ms-transform: translateX(10px);-o-transform: translateX(10px);}.beautyToast.animate-child .beautyToast-title{opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);}.beautyToast-text{color: var(--beautyToast-text-color);max-width: 400px;transition: all .3s ease-out;transform: translateX(10px);opacity: 0;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;-webkit-transform: translateX(10px);-moz-transform: translateX(10px);-ms-transform: translateX(10px);-o-transform: translateX(10px);}.beautyToast.animate-child .beautyToast-text{opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);}.beautyToast-close{color: var(--beautyToast-close-color);font-size: var(--beautyToast-title);display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;transition: all .15s linear;-webkit-transition: all .15s linear;-moz-transition: all .15s linear;-ms-transition: all .15s linear;-o-transition: all .15s linear;}.beautyToast-close:hover{opacity: 0.75;box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15);}.beautyToast-progress{position: absolute;height: 3px;bottom: 0;left: 0;width: 100%;background: var(--beautyToast-progress-color);transition: all .15s linear;-webkit-transition: all .15s linear;-moz-transition: all .15s linear;-ms-transition: all .15s linear;-o-transition: all .15s linear;}@media(max-width: 476px){:root{--beautyToast-body: 12px;--beautyToast-title: 14px;--beautyToast-image: 25px;}}