TelegramPWA/src/components/mediaViewer/MediaViewer.scss

#MediaViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  color: #fff;
  z-index: var(--z-media-viewer);
  padding: 0.5rem 0;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 2.75rem 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  justify-items: stretch;
  align-items: center;

  // Potential perf improvement
  &:not(.shown) {
    display: block !important;
    transform: scale(0);
  }

  body.ghost-animating & {
    > .pan-wrapper, > .Transition, > button {
      display: none;
    }
  }

  body.animation-level-2 & {
    transition-duration: .3s !important;
  }

  &:not(.open),
  .closing {
    .SenderInfo {
      pointer-events: none;
      transition: none;
    }
  }

  &.zoomed {
    .navigation {
      display: none;
    }

    .media-viewer-head {
      z-index: 2;
    }

    .media-viewer-content {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      padding: 0;
      z-index: 1;
    }
  }

  .media-viewer-head {
    display: flex;
    grid-area: 1 / 1 / 2 / -2;
    padding: 0 1.25rem;
    position: relative;
    z-index: var(--z-media-viewer-head);
    min-width: 0;

    & > .Transition {
      width: 100%;
      min-width: 0;
    }

    @media (max-width: 600px) {
      padding: 0 0.5rem;

      .media-viewer-close {
        margin-right: 1.5rem;
      }
    }
  }

  & > .Transition,
  & > .pan-wrapper {
    grid-area: 1 / 1 / -1 / -1;
  }

  & > .Transition,
  & > .pan-wrapper .Transition {
    position: relative;
    justify-self: center;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .media-viewer-content {
    position: relative;
    z-index: 1;
    padding: 3.25rem 0;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.has-footer {
      padding: 7rem 0;
      @media (min-width: 600px) {
        min-width: 600px;
      }

      @media (max-height: 640px) {
        padding: 4rem 0;
      }

      > img {
        max-height: calc(100vh - 15rem);
        @media (max-height: 640px) {
          max-height: calc(100vh - 10rem);
        }
      }
    }

    .thumbnail {
      position: relative;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    > img {
      max-width: 100vw;
      max-height: calc(100vh - 8.25rem);
      object-fit: contain;
      transition: transform .2s;
    }

    .spinner-wrapper {
      max-width: 100vw;
      margin: auto;
    }

    .Spinner {
      margin: auto;
    }
  }

  .navigation {
    position: fixed;
    top: 4rem;
    width: 10vw;
    bottom: 0;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    background: transparent no-repeat;
    background-size: 1.25rem;
    opacity: 0;
    transition: opacity .15s;
    outline: none;
    cursor: pointer;
    z-index: 1;

    @media (max-width: 600px) {
      width: 20vw;
    }

    &:hover, .is-touch-env & {
      opacity: 1;
    }

    &.prev {
      left: 0;
      background-image: url("../../assets/media_navigation_previous.svg");
      background-position: 1.25rem calc(50% - 2rem);

      &[dir=rtl] {
        left: auto;
        right: 0;
        transform: scaleX(-1);
      }
    }

    &.next {
      right: 0;
      background-image: url("../../assets/media_navigation_next.svg");
      background-position: calc(100% - 1.25rem) calc(50% - 2rem);

      &[dir=rtl]{
        left: 0;
        right: auto;
        transform: scaleX(-1);
      }
    }

    &.inline {
      top: calc(50% - 3rem);
      bottom: unset;
      height: 6rem;
      background-position-y: center;

      @media (max-width: 600px) {
        opacity: 0;
        transition: opacity .15s ease-in;
        pointer-events: none;

        .video-controls-visible & {
          opacity: 1;
          pointer-events: all;
        }
      }
    }
  }
}

.ghost {
  position: absolute;
  z-index: var(--z-media-viewer);
  will-change: transform, opacity;
  overflow: hidden;
  border-radius: 0;
  transition: transform .2s ease, opacity .2s ease;

  &.rounded-corners {
    border-radius: var(--border-radius-messages);
  }

  &.circle {
    border-radius: 50%;
  }

  body.is-ios & {
    transition: transform .2s ease, opacity .2s ease, border-radius .2s ease !important;
  }

  img,
  video {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    object-fit: cover;
  }
}