style.scss

html,
body,
#rig {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
* {
  box-sizing: border-box;
}
:disabled {
  opacity: 0.5;
}

.loading {
  &.all section:before {
    content: "loading OpenCV";
  }
  overflow: hidden;
  section .w33 {
    width: initial;
  }
  .edit canvas {
    background: transparent;
  }

  .edit:before,
  section:before {
    content: "";
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    background: url("data:image/gif;base64,R0lGODlhBgADAPABAICAgAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJFAABACwAAAAABgADAAACBkxggGfMBQAh+QQJFAABACwAAAAABgADAAACBQximHZbACH5BAUUAAEALAAAAAAGAAMAAAIFRGKXiVoAOw==")
      repeat-x top/1.5em;
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    font-size: 2rem;
    text-shadow: 0.05em 0.05em 0em #000, -0.05em -0.05em 0em #f00,
      -0.05em 0.05em 0em #0f0, 0.05em -0.05em 0em #00f;
    line-height: 0;
    mix-blend-mode: difference;
    color: #fff;
  }
  section:before {
    content: "please wait";
    background: none;
    mix-blend-mode: normal;
    z-index: 3;
  }
}

fieldset {
  margin: 1.5em 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #000;
  background: rgba(128, 128, 128, 0.125);
  label {
    min-width: 3em;
    display: inline-block;
    margin: 0.25em;
  }
  #maskImg {
    height: 3em;
    float: left;
  }
  input {
    width: calc(100% - 10em);
  }
}
.split {
  clear: both;
  margin-top: -2em;
  input {
    width: 50%;
    box-sizing: border-box;
    float: left;
    height: 2em;
  }
}
#export3d {
  float: right;
}

canvas {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2Nk+M/QwMDI0MAABYxgGkkQIoAkiBCACgIABm4HhEEa4PgAAAAASUVORK5CYII=");
}

#chromaImg {
  max-width: 1024px;
  width: 100%;
  display: block;
}
.w33,
.w50,
.w66 {
  max-width: 100%;
  float: left;
  position: relative;
}
.w33 {
  width: 33.3%;
}
.w50 {
  width: 50%;
}
.w66 {
  width: 66.6%;
}

//Easel
.dg.ac {
  z-index: 1 !important;
}
#touchup,
#alpha {
  z-index: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
#alpha {
  z-index: -1;
  opacity: 0;
}

.w33 canvas {
  position: absolute;
  top: 0;
  left: 0;
}

section {
  display: block;
  clear: both;
}

.dg.a {
  float: left !important;
}

.text-label {
  font-size: 0.5rem;
  padding: 0.25em;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.hide {
  display: none;
}

#help {
  position: fixed;
  right: 0.5em;
  bottom: 0.5em;
  z-index: 10;
  padding: 0.25em;
}