Lungo.js/examples/todo.js/assets/sugars/lungo.sugar.growl.min.css

/**
 * Growl Notification system in CSS3
 *
 * @namespace LUNGO.Sugar
 * @class Growl
 * @version 1.1
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
.growl{position:absolute;width:100%;height:100%;z-index:3;background:none;font-size:95%;color:#ffffff;display:none;}
.growl.modal{background-color:rgba(0, 0, 0, 0.5);}
.growl .modal{position:absolute;width:136px;margin:-68px auto auto -68px;padding:8px 0;left:50%;top:50%;z-index:1;background-color:rgba(0, 0, 0, 0.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;text-align:center;-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-ms-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75);opacity:0;transition-property:scale, opacity;-webkit-transition:300ms cubic-bezier(0.39, 0.575, 0.565, 1);-moz-transition:300ms cubic-bezier(0.39, 0.575, 0.565, 1);-o-transition:300ms cubic-bezier(0.39, 0.575, 0.565, 1);transition:300ms cubic-bezier(0.39, 0.575, 0.565, 1);}
.growl .modal.show{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
.growl .modal .icon{display:block;font-size:72px;font-weight:normal !important;line-height:80px;}
.growl .modal strong{margin:0 8px 8px;display:block;}
.growl .modal small{margin:0 8px 8px;display:block;font-size:0.8em;font-weight:normal;}
.growl .modal.input{width:224px !important;margin:-68px auto auto -122px;padding-left:10px;padding-right:10px;}
.growl .modal.input a{margin:6px 0 0;height:24px;display:block;font-size:14px;line-height:32px;height:32px;}
.growl .modal.input a .icon{left:24px;font-size:24px;line-height:31px;}
.growl .modal.working span{-webkit-animation:growl-working 1s infinite;}
.growl .modal.loading span{-webkit-animation:growl-loading 1s infinite;}
.notify{position:absolute;height:auto;left:4px;right:4px;bottom:4px;background-color:rgba(0, 0, 0, 0.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0px 0px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 0px 4px rgba(0, 0, 0, 0.3);box-shadow:0px 0px 4px rgba(0, 0, 0, 0.3);-webkit-transform:translatey(100%);-moz-transform:translatey(100%);-ms-transform:translatey(100%);-o-transform:translatey(100%);transform:translatey(100%);-webkit-transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);-moz-transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);-ms-transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);-o-transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);opacity:0;color:#ffffff;text-shadow:0 1px 0px rgba(0, 0, 0, 0.5);}
.notify.info{background:-webkit-gradient(linear, top left, bottom left, color-stop(0, #e8e8e8), color-stop(75%, #c0c0c0));background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #e8e8e8), color-stop(75%, #c0c0c0));background:-webkit-linear-gradient(#e8e8e8 0, #c0c0c0 75%);background:-moz-linear-gradient(center bottom, #e8e8e8 0, #c0c0c0 75%);background:-o-linear-gradient(center bottom, #e8e8e8 0, #c0c0c0 75%);background:linear-gradient(center bottom, #e8e8e8 0, #c0c0c0 75%);}
.notify.error{background:-webkit-gradient(linear, top left, bottom left, color-stop(0, #e75d65), color-stop(75%, #ac000f));background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #e75d65), color-stop(75%, #ac000f));background:-webkit-linear-gradient(#e75d65 0, #ac000f 75%);background:-moz-linear-gradient(center bottom, #e75d65 0, #ac000f 75%);background:-o-linear-gradient(center bottom, #e75d65 0, #ac000f 75%);background:linear-gradient(center bottom, #e75d65 0, #ac000f 75%);}
.notify.alert{background:-webkit-gradient(linear, top left, bottom left, color-stop(0, #f5dd42), color-stop(75%, #e8a400));background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #f5dd42), color-stop(75%, #e8a400));background:-webkit-linear-gradient(#f5dd42 0, #e8a400 75%);background:-moz-linear-gradient(center bottom, #f5dd42 0, #e8a400 75%);background:-o-linear-gradient(center bottom, #f5dd42 0, #e8a400 75%);background:linear-gradient(center bottom, #f5dd42 0, #e8a400 75%);}
.notify.success{background:-webkit-gradient(linear, top left, bottom left, color-stop(0, #95ee6b), color-stop(75%, #4d970c));background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #95ee6b), color-stop(75%, #4d970c));background:-webkit-linear-gradient(#95ee6b 0, #4d970c 75%);background:-moz-linear-gradient(center bottom, #95ee6b 0, #4d970c 75%);background:-o-linear-gradient(center bottom, #95ee6b 0, #4d970c 75%);background:linear-gradient(center bottom, #95ee6b 0, #4d970c 75%);}
.notify.info,.notify.alert{color:#555555;text-shadow:0 1px 0px rgba(255, 255, 255, 0.75);}
.notify.show{opacity:1;-webkit-transform:translatey(0%);-moz-transform:translatey(0%);-ms-transform:translatey(0%);-o-transform:translatey(0%);transform:translatey(0%);}
.notify .icon{margin:6px 6px 6px 10px;float:left;font-size:53px;line-height:40px;}
.notify strong{margin:14px 0 -12px;max-height:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.15em;text-transform:uppercase;line-height:12px;}
.notify small{font-size:0.9em;}
@-webkit-keyframes growl-working { 0% {opacity: 1; } 50% {opacity: 0;} 100% {opacity: 1;} }