quick-modal/quickModal.css

Generate a custom modal quickly

.quick-modal-hider{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.4);z-index:9000;opacity:0;transition:all .5s}.quick-modal-hider.active{opacity:1}.quick-modal-hider.done{z-index:-1}.quick-modal{position:fixed;left:0;right:0;margin:0 auto;width:500px;top:0;transform:translateY(-25%);background-color:white;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);box-shadow:0 5px 15px rgba(0,0,0,0.5);z-index:9001;font-family:Arial;opacity:0;transition:all .5s;max-height:calc(100% - 115px);overflow-y:auto}.quick-modal.active{top:100px;transform:translateY(0);opacity:1}.quick-modal.done{z-index:-1}.quick-modal header{position:relative;padding:20px;font-size:36px;text-align:center;background-color:rgba(0,0,0,0.1);box-shadow:0 2px 5px -2px rgba(0,0,0,0.5)}.quick-modal header aside{position:absolute;top:10px;right:10px;opacity:.2;font-size:16px;cursor:pointer;font-family:monospace}.quick-modal header aside:hover{opacity:.5}.quick-modal .quick-modal-main{padding:10px 20px}.quick-modal .quick-modal-main form{height:100%;width:100%;margin:0;padding:0}.quick-modal .quick-modal-main p>*{vertical-align:middle}.quick-modal .quick-modal-main p label{line-height:34px}.quick-modal .quick-modal-main [name]{display:inline-block;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);margin-left:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.quick-modal footer{margin-top:20px}.quick-modal footer ul{list-style-type:none;text-align:center;padding-left:0}.quick-modal footer ul li{display:inline-block;margin:10px}.quick-modal footer ul li .quick-modal-btn,.quick-modal footer ul li .quick-modal-generated-btn{transition:all .5s;text-decoration:none;color:white;padding:6px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);text-shadow:0 -1px 0 rgba(0,0,0,0.2);background-color:#2aabd2;border:none}.quick-modal footer ul li .quick-modal-btn:hover,.quick-modal footer ul li .quick-modal-generated-btn:hover{background-color:#19667d}.quick-modal footer ul li .quick-modal-btn.quick-modal-close,.quick-modal footer ul li .quick-modal-generated-btn.quick-modal-close{background-color:#ca3b37}.quick-modal footer ul li .quick-modal-btn.quick-modal-close:hover,.quick-modal footer ul li .quick-modal-generated-btn.quick-modal-close:hover{background-color:#7b2320}@media screen and (max-width:499px){.quick-modal{width:auto;margin:0 10px}}