#overlay{ position:fixed; width:100vw; height:100vh; overflow:hidden; top:0; left:0; right:0; bottom:0; animation:overlay .3s forwards ease; background-color:rgba(0,0,0,.8); transform:scale(1); transform-origin:center center; z-index: 2000; display: block; > div { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } header{ @include fancy_sans; @include fontsize(18); padding: 1rem 1rem 1rem 0; margin-left: 0; } } .top { z-index: 10000; } @keyframes modal{ from{ -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }; to{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes overlay{ from{ background-color:rgba(0,0,0,0); }; to{ background-color:rgba(0,0,0,.8); } } #overlay-wrapper { max-width: 52%; width: 90%; } #modal { min-height: 330px; padding: 0 1rem 1rem 1rem; background-color: white; border-radius: 4px; overflow:hidden; animation:modal .2s forwards ease; -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); & > div { color: #424242; background-color: white; } // specific fixes for notebook create form #nb-create-form { width: 99%;} .flex-wrapper { display: block; margin-top: .5rem; #color-picker { margin-top: 3rem; margin-left: .25rem; } .nb-name { width: 100%;} } input[type="submit"] { float: right; } } #hed-wrapper { display: flex; align-items: center; justify-content: space-between; & > * { width: auto; } }