style.css

body,button,dd,div,dl,dt,fieldset,form,html,img,input,label,legend,li,ol,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ol,ul{list-style:none}:focus{outline:0}.clearfix{position:relative}.clearfix:after{content:" ";clear:both;display:block;height:0}body{background:rgba(230,230,235,.96);cursor:default;font:14px 'Segoe UI',Helvetica,Arial,sans-serif;color:#e8eff8}.top-nav{overflow:hidden;z-index:99;position:fixed;top:0;left:72px;right:0;height:42px;background:#fff}.undoredo>button{width:42px;height:42px;float:left;font-size:20px;cursor:pointer;color:#6b82a7;opacity:.8}.undoredo>button:hover{opacity:1}.frame-buttons{position:relative;z-index:1}.frame-buttons>button{float:right;color:#6b82a7;cursor:pointer;width:32px;height:32px;opacity:.8;font-size:16px}.frame-buttons>button:hover{opacity:1;background:#f2f6f8}.drag-prog{position:absolute;top:0;height:100%;left:84px;right:96px;-webkit-user-select:none;-webkit-app-region:drag}.panel{z-index:100;background:#6b82a7;position:fixed;left:0;top:0;display:block;height:100%;width:72px;box-sizing:border-box}.fill-type{width:66px}.hidePal{position:absolute;left:-10px;width:0;height:0;visibility:hidden}.active{background:#e8eff8!important;color:#6b82a7!important}.activeM{background:#fff!important;color:#6b82a7!important}.inner{overflow:scroll;position:fixed;top:42px;left:72px;bottom:0;right:0;border-bottom:1px solid #fff;border-right:1px solid #fff}header{-webkit-user-select:none;user-select:none}#settings{width:280px;height:300px;position:absolute;z-index:100;top:0;background:#fff;-webkit-user-select:none;user-select:none;box-shadow:0 0 1px 1px rgba(0,20,60,.2);transition:box-shadow .2s cubic-bezier(.1,.13,0,.71);color:#789;box-sizing:border-box}.elems{position:absolute;top:36px;bottom:0;width:100%;overflow-y:auto}.elems>div{box-sizing:border-box;padding:10px 16px}.change{background:#f4f4f4}.drag-zone{position:absolute;height:36px;cursor:move;top:0;width:100%;background:rgba(0,190,165,.7);display:table;box-sizing:border-box;padding:0 16px}.drag-zone>span{display:table-cell;vertical-align:middle;color:#fff;font-weight:700;font-size:16px}.pointer{cursor:pointer}.col-row>span{display:block;font-weight:700;padding-bottom:6px}.param{padding:2px 0;float:left}.param>div{position:relative;background:url(checkerboard.png);cursor:pointer;width:40px;height:20px}.param>div>div{position:absolute;top:0;left:0;right:0;bottom:0}.param>div,.param>input,.param>span{float:left}.param>span:first-child{margin-right:4px}.param>input[type=range]{width:80px;margin-right:4px}.param>input[type=text]{margin-right:2px}.param>input{color:#789;width:36px;border-bottom:1px solid #789;text-align:center}.brush-param{padding:2px 0;float:left}.brush-param>span{position:relative;display:block;clear:both}.scroll-wrap{width:120px;float:left;padding-right:20px}.scroll-wrap>input{height:20px;width:100%;margin-bottom:10px}.view-wrap{float:left;width:80px;height:80px;border:1px solid #789;text-align:center;vertical-align:middle;display:flex;justify-content:center;align-items:center}.view-wrap>div{width:60px;height:60px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:radial-gradient(ellipse at center,#7db9e8 0,rgba(125,185,232,.5) 50%,rgba(125,185,232,0) 100%)}.size{position:relative;font-weight:700;display:table-cell;width:220px;height:42px;text-align:center;vertical-align:middle}.instruments>span{font-size:16px;display:block;border-bottom:1px solid #e8eff8}#menu{width:100%;height:42px;color:#e8eff8;font-weight:700;font-size:16px;cursor:pointer}#menu:hover{background:#9caec9;color:#fff}.inr-menu:after{content:"";position:absolute;top:-10px;left:18px;border-right:18px solid transparent;border-bottom:10px solid #f4f4f4;border-left:18px solid transparent}.inr-menu{position:absolute;z-index:999;top:42px;bottom:0;left:0;width:240px;background:#f4f4f4;box-shadow:1px 1px 1px rgba(0,20,60,.2);color:#789}.inr-menu input{color:#789;margin:0 5px;width:44px;border-bottom:1px solid #789;text-align:center}.inr-menu>span{display:block;padding:10px 20px;font-weight:700;font-size:16px}.inr-menu>ul{padding:0 20px 10px;font-weight:700;border-bottom:1px solid rgba(0,20,60,.2)}.inr-menu>ul>li{padding:4px 0}.inr-menu button{cursor:pointer;margin-top:10px;width:100%;height:32px;color:#fff;background:rgba(0,190,165,.7);font-weight:700}.inr-menu button:hover{background:#00bea5}#lol{position:absolute;top:60px;left:60px;z-index:999}#nameDownload{width:160px;margin:0 0 0 5px}#format{width:80px;margin:0 0 0 5px}#canopy{display:none;z-index:999;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.2)}#inr-wrap{padding:20px 0;position:relative;min-height:100%;box-sizing:border-box}.controls>button{width:36px;height:36px;font-size:16px;float:left;color:#e8eff8;cursor:pointer}.controls>button:hover{background:#9caec9;color:#fff}#list2{display:block;position:relative;margin:0 auto}#list1{box-shadow:0 0 1px 1px rgba(0,20,60,.2);background:url(checkerboard.png);position:absolute;top:20px;left:50%;margin-left:-240px}.wrapper{position:relative;width:100%;height:100%;padding-top:20px;box-sizing:border-box}