Lungo2.0.js/examples/todo.js/assets/sugars/lungo.sugar.growl.css

.growl{position:absolute;width:100%;height:100%;z-index:3;display:none;background:none;font-size:95%;color:#ffffff;}
.growl.modal{background-color:rgba(0, 0, 0, 0.5);}
.growl .modal{position:absolute;width:128px;height:128px;margin:-64px auto auto -64px;left:50%;top:50%;z-index:1;background-color:rgba(0, 0, 0, 0.85);-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-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-moz-transition:-webkit-transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-ms-transition:-webkit-transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-o-transition:-webkit-transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:-webkit-transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);text-align:center;}
.growl .modal.input{width:252px;height:auto;margin:-64px 0 0 -138px;padding:8px;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform:translatey(200%);-moz-transform:translatey(200%);-ms-transform:translatey(200%);-o-transform:translatey(200%);transform:translatey(200%);}
.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.hide{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
.growl .modal span.big.icon{width:128px;height:message_size;display:block;font-size:90px;line-height:128px;}
.growl .modal strong{position:relative;width:128px;width:90px;top:-28px;}
.growl .modal.input.show{opacity:1;-webkit-transform:translatey(0%);-moz-transform:translatey(0%);-ms-transform:translatey(0%);-o-transform:translatey(0%);transform:translatey(0%);}
.growl .modal.input.hide{opacity:0;-webkit-transform:translatey(100%);-moz-transform:translatey(100%);-ms-transform:translatey(100%);-o-transform:translatey(100%);transform:translatey(100%);}
.growl .modal.input a{margin:6px 0 0;height:24px;display:block;font-size:14px;line-height:32px;height:32px;}
.growl .modal.input a:last-child{margin-top:12px;}
.growl .modal.input a span{left:24px;}
.growl .modal.working span{-webkit-animation:growl-working 1s infinite;}
@-webkit-keyframes growl-working{0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}}.notify{position:absolute;height:auto;left:4px;right:4px;bottom:4px;background:-webkit-gradient(linear, top left, bottom left, color-stop(0, #666668), color-stop(75%, #202221));background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #666668), color-stop(75%, #202221));background:-webkit-linear-gradient(#666668 0, #202221 75%);background:-moz-linear-gradient(center bottom, #666668 0, #202221 75%);background:-o-linear-gradient(center bottom, #666668 0, #202221 75%);background:linear-gradient(center bottom, #666668 0, #202221 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 2px rgba(0, 0, 0, 0.25);-moz-box-shadow:0px 0px 2px rgba(0, 0, 0, 0.25);box-shadow:0px 0px 2px rgba(0, 0, 0, 0.25);-webkit-transform:translatey(100%);-moz-transform:translatey(100%);-ms-transform:translatey(100%);-o-transform:translatey(100%);transform:translatey(100%);-webkit-transition:all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-moz-transition:all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-ms-transition:all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);-o-transition:all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);opacity:0;font-size:12px;color:#ffffff;text-shadow:0 1px 1px 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.info,.notify.alert{color:#555555;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
.notify.success{background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0%, #4d970c), color-stop(75%, #95ee6b));}
.notify.show{opacity:1;-webkit-transform:translatey(0%);-moz-transform:translatey(0%);-ms-transform:translatey(0%);-o-transform:translatey(0%);transform:translatey(0%);}
.notify span.icon{margin:6px;float:left;width:40px;height:40px;font-size:44px;font-weight:normal;}
.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 em{opacity:0.75;font-size:0.95em;font-style:normal;}