variaboard/dist/variaboard.min.css

VariaBoard is a control interface to modify parameters in JavaScript.

body{background:radial-gradient(#333,#111);min-height:100vh;overflow:hidden}canvas{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.variaboard-panel,.variaboard-panel *{box-sizing:border-box}.variaboard-panel{background:#000;border-right:1px solid #000;font-family:source code pro,monospace;font-size:16px;left:0;max-width:400px;position:fixed;top:0;transition:opacity .2s;width:100%;z-index:1;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.variaboard-panel,.variaboard-title{border-bottom:1px solid #000;color:#fff}.variaboard-title{background:#333;font-size:.8em;font-weight:700;line-height:1;margin:0;padding:1.2em .75em}.variaboard-control{background:#222;border-bottom:1px solid #000;display:-webkit-box;display:flex;transition:background .2s}.variaboard-control:hover{background:#333;transition-duration:0ms}.variaboard-control:last-child{border-bottom:none}.variaboard-control-title{border-right:1px solid #000;-webkit-box-flex:1;flex:1 1 35%;font-size:.8em;font-weight:400;line-height:1;margin:0;padding:.6em .75em;text-align:right;transition:color .2s}.variaboard-control:hover .variaboard-control-title{color:#fff;transition-duration:0ms}.variaboard-control-value{background:none;border:none;border-right:1px solid #000;border-radius:0;color:inherit;-webkit-box-flex:1;flex:1 1 20%;font-family:inherit;font-size:.8em;font-weight:400;line-height:1;margin:0;padding:.6em .75em;transition:color .2s;width:100%;-webkit-appearance:none}.variaboard-control:hover .variaboard-control-value{color:#fff;transition-duration:0ms}.variaboard-control-value:focus{outline:none}.variaboard-control-button{background:#444;border:none;border-right:1px solid #000;border-radius:0;color:#fff;cursor:pointer;font-family:inherit;font-size:.8em;font-weight:400;line-height:1;margin:0;padding:1.2em 1.5em;transition:background .2s,color .2s;-webkit-appearance:none}.variaboard-control-button:active{background:#fff;color:#000;transition-duration:0ms}.variaboard-control-button:focus{outline:none}.variaboard-control-range{cursor:ew-resize;-webkit-box-flex:1;flex:1 1 45%;overflow:hidden}.variaboard-control-range-inner{background:#555;height:101%;-webkit-transform-origin:0 50%;transform-origin:0 50%;transition:background .2s;width:100%}.variaboard-control:hover .variaboard-control-range-inner{background:#fff;transition-duration:0ms}