classic_chromakeying.scss

@import 'modules/theme';
@import 'partials/basic';
@import 'partials/button';
@import 'partials/fonts';
@import 'partials/modal';
@import 'partials/shape';

.chromawrapper {
  display: block;
  padding: 1em 2em 2em;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: $mainColor;
  background-image: $chromaBackground;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.canvasWrapper {
  display: inline-block;
  max-width: 100%;
  background-color: green;
  &.initial {
    width: 1000px;
  }
}

#mainCanvas {
  display: block;
  max-height: 650px;
  max-width: 100%;
}

.backgroundPreview {
  cursor: pointer;
  max-width: 120px;
  max-height: 80px;
  border: 2px solid $borderColor;
  margin: 3px;
}

.rotaryfocus.focused {
  opacity: 0.6 !important;
}