pathology/viewer/src/components/image-viewer-page/image-viewer-page.component.scss

/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.image-viewer-page {
  display: grid;
  height: 100%;
  overflow: auto;
  position: relative;
}

.side-nav-menu {
  position: absolute;
  top: 1em;
  left: 1em;
  z-index: 3;
}

.slides-menu {
  position: absolute;
  bottom: 1em;
  left: 1em;
  z-index: 3;
}

.tile-viewer-wrapper {
  display: grid;
}

.multi-screen-viewer-2 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 0.1em;
  background: #d3e3fd;
  padding: 0.2em;
}

.multi-screen-viewer-4 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;

  grid-gap: 0.1em;
  background: #d3e3fd;
  padding: 0.2em;
}

.selected-split-viewer {
  outline: 0.2em dashed #f44336;
  z-index: 2;
}

.tile-viewer-wrapper .multi-view-info {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-row-gap: 0.5em;
  width: 4em;
  justify-content: space-between;
  padding: 0.6em;
  background: rgb(147 181 236 / 50%);

  border-radius: 13px;
  color: #454746;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.tile-viewer-wrapper .lock-button {
  background: #93b5ec;
  border-radius: 13px;
  color: #454746;
  left: 50%;
  padding: 0.3em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.tile-viewer-wrapper .locked-button {
  background: #afafaf;
}

.multi-view-option-picker {
  display: grid;
  justify-content: center;
  grid-template-rows: min-content min-content;
  margin-top: 10%;
  grid-row-gap: 1em;
  justify-items: center;

  .multi-view-options {
    display: grid;
    grid-template-columns: min-content min-content min-content;
    grid-column-gap: 1em;

    .option {
      gap: 0.4em;
      display: grid;
      justify-items: center;
    }

    .option-image-sections {
      display: grid;
      height: 25vh;
      width: 25vw;
      grid-gap: 0.1em;
      border: 2px solid #d9d9d9;

      .option-image {
        background: #d9d9d9;
      }
    }

    .multi-view-2 {
      grid-template-columns: 50% 50%;
      grid-template-rows: 100%;
    }

    .multi-view-4 {
      grid-template-columns: 50% 50%;
      grid-template-rows: 50%;
    }
  }
}

.select-slide-viewer {
  background: #fafafa;
}

.empty-multi-view-option {
  display: grid;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}