saxi/dist/ui/ui.css

Drive the AxiDraw pen plotter

:root{--teal: #75D5CD;--teal-light: #DCF4F2;--teal-dark: #3F9991;--purple: #8E75B6;--purple-light: #E3DCED;--purple-dark: #604987;--red: #DE7272;--panel-width: 260px}body{font-family:Work Sans,sans-serif;font-size:14px;color:var(--purple);background-color:#f6f6f6}body,html,#app{height:100%;margin:0}body.dragover{background-color:var(--teal)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}strong{font-weight:900}.root{display:flex;align-items:stretch;height:100%}path{stroke:#000;fill:transparent}.preview-area{position:relative;flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden}.preview{box-shadow:3px 3px 15px #0003;overflow:hidden;background-color:#fff;position:relative}.preview-loader{align-items:center;background:#0003;color:#f5f5f5;display:flex;font-size:36px;font-weight:700;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.preview>svg{display:block;contain:strict}.preview>svg:not(:first-child){position:absolute;transform:translateZ(.001px);top:0;left:0}.dragover .drag-target{opacity:0}.drag-target{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#0003}.drag-target-message{display:flex;justify-content:center;align-items:center;color:#f5f5f5;font-weight:700;font-size:36px}.control-panel{position:relative;flex:0 0 var(--panel-width);width:var(--panel-width);background-color:#fff;overflow-y:auto;box-shadow:3px 3px 15px #0003}.control-panel-bottom{position:fixed;bottom:0;width:var(--panel-width);padding-bottom:.5rem;background-color:#fff}.control-panel-bottom .section-header{padding-top:.25rem}.saxi-title{margin:0 1rem;padding-top:.5rem;font-size:36px;font-weight:900;text-align:center;user-select:none}.disconnected .saxi-title{text-decoration-line:line-through}.section-header{margin-bottom:1rem;padding:.5rem 0;border-bottom:1px solid var(--purple-light);font-size:18px;font-weight:900;text-align:center;user-select:none}.section-body{padding:0 1rem}form{display:grid;grid-template-columns:1fr 1fr}label{font-size:10px;text-align:center;line-height:1.6;user-select:none}input[type=number]{width:100%;padding:.3rem;margin-bottom:.5rem;border:1px solid var(--purple);font-family:Work Sans,sans-serif;font-size:14px;color:var(--purple);background-color:#fff;box-shadow:1px 1px 2px #0000001a;outline:none}input[type=checkbox]{position:relative;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0 .5rem 0 0;border:1px solid var(--purple);background-color:#fff;box-shadow:1px 1px 2px #0000001a;outline:none;cursor:pointer}input[type=checkbox]:checked:after{display:block;position:absolute;inset:3px;content:"";background-color:var(--purple)}button,select{width:100%;margin-bottom:.5rem;padding:.4rem;font-family:Work Sans,sans-serif;font-size:14px;font-weight:700;background-color:#fff;color:var(--purple);border:1px solid var(--purple);border-radius:0;box-shadow:1px 1px 2px #0000001a;cursor:pointer;outline:none}button:not(:disabled):hover,button:not(:disabled):focus,select:not(:disabled):hover,select:focus,input[type=number]:hover,input[type=number]:focus,input[type=checkbox]:focus{box-shadow:1px 2px 5px #00000040}button:not(:disabled):active{box-shadow:0 0 1px #00000040,inset 2px 2px 5px #0003;background-color:#fafafa;color:var(--purple-dark)}button.button-link{display:block;padding:0;border:none;font-size:10px;text-decoration:none;background-color:transparent;box-shadow:none;font-weight:400}button.button-link:hover,button.button-link:active,button.button-link:focus{box-shadow:none;background-color:transparent;text-decoration:underline}select{height:30px;appearance:none;-webkit-appearance:none}select[multiple]:focus option:checked{background:var(--purple);color:#fff}.flex button,.flex label{width:calc(50% - .25rem);align-self:flex-end}.flex-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.pen-label{width:calc(50% - .25rem)}.paper-sizes{display:flex;justify-content:space-between;align-items:flex-end}.paper-label{width:44%;margin-bottom:0}.paper-sizes__swap{width:10%;margin-bottom:16px;cursor:pointer;fill:var(--purple)}.paper-sizes__swap:hover{fill:var(--purple-dark)}.layer-select{height:100px;background-color:#fff;border:1px solid var(--purple);color:var(--purple)}.layer-select:hover{background-color:#fff;cursor:default}.spacer{height:200px}summary{outline:none;cursor:pointer}summary:focus{color:var(--purple-dark)}.horizontal-labels label{display:block;position:relative}.horizontal-labels label:after{position:absolute;top:0;bottom:0;left:28px;border-right:1px solid var(--purple)}.horizontal-labels img{position:absolute;padding:4px;width:28px;height:28px;border-right:1px solid var(--purple)}.horizontal-labels input{padding-left:32px}.duration{display:flex;justify-content:space-between;margin-bottom:.5rem}.section-body__plot button{padding:.4rem;font-size:18px}.section-body__plot button:disabled{cursor:default}.plot-button{color:#fff;background-color:var(--teal);border:1px solid var(--teal-dark)}.plot-button:not(:disabled):active{color:#fff;background-color:var(--teal)}.plot-button:disabled{color:var(--teal-light);background-color:#fff}.plot-button--plotting{background-color:var(--teal-light)}.button-row{display:flex}.button-row>*:not(:first-child){margin-left:10px}.cancel-button{background-color:#fff;color:var(--purple-light)}.cancel-button--active,.purple{color:var(--purple)}.teal{color:var(--teal)}.teal-dark{color:var(--teal-dark)}.red{color:var(--red)}.reg{font-weight:400}.flex{display:flex;justify-content:space-between}.info-disconnected{text-align:center;color:var(--red)}
/*# sourceMappingURL=ui.css.map */