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;
  }

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

    &.drawing {
      cursor: crosshair;
    }

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

    .captions-container {
      .top, .bottom {
        text-align: left;
        .iiif-url, .copy-button {
          display: inline-block;
        }
        .iiif-url {
          a {
            padding: 0px 0px 0px 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
          }
        }
        .copy-button button {
          background: none;
          border: none;
          color: white;
          mat-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
}

/*
 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;
}