still-image.component.scss

// sizes
$max-width: 800px;
$panelSize: 40px;

$osd-height: 460px;

// colors
$dark: #000;
$bright: #ccc;

:host {
  // display: inline-flex;
  width: 100%;

  @media (max-height: 636px) {
    height: 300px;
  }

  // .content {
  //   // min-height: $full-height;
  //   height: 100%;
  //   width: 100%;

  .osd-container {
    color: $bright;
    background-color: $dark;
    height: 100%;

    &.drawing {
      cursor: crosshair;
    }

    &.fullscreen {
      max-width: 100vw;
    }
  }

  // }
}

/*
 Overlay styling
 */

::ng-deep .region {
  filter: alpha(opacity=40);
  opacity: 0.4;
  fill: transparent;
  stroke: #00695c;
  stroke-width: 2px;
}

::ng-deep .region:hover,
.region:focus {
  filter: alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
}

::ng-deep .region.active {
  filter: alpha(opacity=100);
  opacity: 1;
}