react-alert-message/dist/style.css

alert project message

.color-green{color:#009833}.color-yellow{color:#f90}.react-alert-message .more-detail{margin:20px -19px -19px;background:white;color:#787878;padding:19px;font-weight:normal;font-size:12px;max-height:500px;overflow:scroll}.react-alert-message .more-detail h4{color:#333;font-weight:bold}.react-alert-message>.box-alert-message{position:fixed;z-index:11;left:0;right:0;top:-50%;background:#fff;padding:20px;box-shadow:0 0 64px rgba(0,0,0,0.34);font-weight:bold;color:#fff;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;opacity:0;visibility:hidden}.react-alert-message>.box-alert-message.show{top:0;opacity:1;visibility:visible}.react-alert-message>.box-alert-message .close{position:absolute;top:15px;right:20px;cursor:pointer;width:32px;height:32px;opacity:0.3}.react-alert-message>.box-alert-message .close:hover{opacity:1}.react-alert-message>.box-alert-message .close:before,.react-alert-message>.box-alert-message .close:after{position:absolute;left:15px;content:' ';height:25px;width:2px;background-color:#333}.react-alert-message>.box-alert-message .close:before{transform:rotate(45deg)}.react-alert-message>.box-alert-message .close:after{transform:rotate(-45deg)}.react-alert-message>.box-alert-message .detail hr{border-color:#f27b79}.react-alert-message>.box-alert-message .detail .headline{display:block;font-size:20px;font-weight:700;font-family:Arial, Helvetica, sans-serif;text-align:center;margin-bottom:20px}.react-alert-message>.box-alert-message .detail .headline>i{margin-right:10px}.react-alert-message>.box-alert-message .detail .subheadline{color:#FFD8DB;font-size:16px;margin-bottom:20px;font-weight:500}.react-alert-message>.box-alert-message .detail .subheadline>.topic{font-size:16px;font-weight:700;margin-bottom:15px}.react-alert-message>.box-alert-message .detail .subheadline>.message{padding:0 50px;margin:15px 0;position:relative}.react-alert-message>.box-alert-message .detail .subheadline>.message>.title{min-width:42px;color:#fff;position:absolute;left:0;top:-5px;background:#DE413F;border-radius:3px;padding:5px 10px;display:inline-block}.react-alert-message>.box-alert-message .detail .bottom{text-align:center;position:relative}.react-alert-message>.box-alert-message .detail .bottom>span{position:absolute;right:0;top:12px;font-weight:100;font-size:11px}@media only screen and (max-width: 1050px){.react-alert-message>.box-alert-message .detail .bottom>span{top:0;right:0;margin:30px 0;position:relative;display:block;font-size:14px}}.react-alert-message>.box-alert-message .button{min-width:135px;border:3px solid #B71C1C;border-radius:3px;background:#B71C1C;font-family:inherit;font-size:inherit;transition:all 0.3s;cursor:pointer;padding:10px 32px;display:inline-block;letter-spacing:1px;font-weight:500;outline:none;position:relative;font-size:14px;color:#fff}.react-alert-message>.box-alert-message .button:hover{border-color:#d00000;background:#d00000}.react-alert-message>.box-alert-message .button .icon{display:inherit;height:7px;margin-right:10px}.react-alert-message>.box-alert-message .button .arrow-up{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff}.react-alert-message>.box-alert-message .button .arrow-down{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff}.react-alert-message>.box-alert-message .icon-arrow-up{content:"\E003"}.react-alert-message.DEFAULT .box-alert-message{background:#4D82D6}.react-alert-message.DEFAULT .box-alert-message .close{color:#fff;opacity:1}.react-alert-message.ERROR .box-alert-message{background:#f44336;color:#fff}.react-alert-message.ERROR .box-alert-message .close{color:#fff;opacity:1}.react-alert-message.WARNING .box-alert-message{background:#f90;color:#fff}.react-alert-message.WARNING .box-alert-message .close{color:#fff;opacity:1}.react-alert-message.WARNING .box-alert-message .detail hr{border-color:#FFCC80}.react-alert-message.WARNING .box-alert-message .detail .subheadline{color:#FFF3E0}.react-alert-message.WARNING .box-alert-message .detail .subheadline>.message>.title{background-color:#F57C00}.react-alert-message.WARNING .box-alert-message .button{border-color:#F57C00;background-color:#F57C00}.react-alert-message.SUCCESS .box-alert-message{background:#57BF57}.react-alert-message.SUCCESS .box-alert-message .detail hr{border-color:#A5D6A7}.react-alert-message.SUCCESS .box-alert-message .detail .subheadline{color:#E8F5E9}.react-alert-message.SUCCESS .box-alert-message .detail .subheadline>.message>.title{background-color:#388E3C}.react-alert-message.SUCCESS .box-alert-message .button{border-color:#388E3C;background-color:#388E3C}.react-alert-message.LOADING .box-alert-message{background:#eee}.react-alert-message.LOADING .box-alert-message .close{color:#000;opacity:1}.react-alert-message.LOADING .box-alert-message .detail hr{border-color:#ffffff}.react-alert-message.LOADING .box-alert-message .detail .headline{color:#616161;margin-bottom:20px}.react-alert-message.LOADING .box-alert-message .detail .subheadline{color:#616161}.react-alert-message.LOADING .loading{display:inline-block;vertical-align:middle;margin-right:15px}.react-alert-message.LOADING .loading-style-normal{border-radius:50%;width:24px;height:24px;border:0.15rem solid rgba(255,255,255,0.2);border-top-color:#d00000;animation:reactAlertMessageSpin 1s infinite linear}.react-alert-message.LOADING .loading-style-normal--double{border-style:double;border-width:.5rem}.react-alert-message.LOADING .loading-style-normal.red{border-color:#d00000;border-top-color:#fff}.react-alert-message.LOADING .loading-style-normal.medium{border-size:.3rem;width:38px;height:38px}.react-alert-message.SYSTEM_ERROR{position:fixed;z-index:99;top:0;left:0;right:0;bottom:0;margin:0;width:100%;background:#d00000}.react-alert-message.SYSTEM_ERROR h4{font-size:30px}.react-alert-message.SYSTEM_ERROR .D-2{display:block;width:100%;margin-bottom:20px}.react-alert-message.SYSTEM_ERROR .box-alert-message{top:40%;bottom:initial;border-radius:0;transform:translateY(-50%);text-align:center;box-shadow:none;background:#d00000;color:#fff}.react-alert-message.SYSTEM_ERROR .box-alert-message .close{display:none}@keyframes reactAlertMessageSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}