still-image.component.scss

@import "../../../../../assets/style/config";
// sizes
$max-width: 800px;
$panelSize: 40px;

$osd-height: 460px;

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

.annotation-tooltip {
  display: none;
  position: fixed;
  background-color: $black-60-opacity;
  color: $bright;
  padding: 8px;
  border-radius: $border-radius;
  min-height: 24px;
  max-height: 258px;
  max-width: 256px;
  box-sizing: border-box;
  transition: 0.1s;
  transform: translate(16px, 16px);
  font-size: small;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1000;
}

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