lila/ui/analyse/css/study/relay/_video-player.scss

#video-player {
  z-index: $z-video-player-100;
  display: none;
  position: absolute;
  border: 0;
}

#video-player-placeholder {
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
}

.video-player-close {
  z-index: $z-video-player-controls-101;
  position: absolute;
  pointer-events: auto;
  top: 6px;
  right: 6px;
  height: 24px;
  width: 24px;
  padding: 2px;
  border-radius: 50%;
  background-color: black;
  cursor: pointer;

  &:hover {
    filter: brightness(3);
  }
}

#video-player-placeholder.link {
  cursor: pointer;
  overflow: hidden;
  outline-offset: -3px;
  outline: 3px solid $m-bad--alpha-50;

  .image {
    position: absolute;
    background: center / cover;
    overflow: hidden;
    inset: 0;
    filter: blur(4px) brightness(0.7);
  }

  .play-button {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 18%;
    opacity: 0.6;
    fill: white;
    filter: drop-shadow(0 0 12px #0000004f);

    circle {
      filter: drop-shadow(0 0 8px #840000);
      paint-order: stroke fill;
      stroke: #fff9;
      stroke-width: 3px;
      fill: $c-bad;
    }
  }

  &:has(.text-box) .play-button {
    top: 56%;
  }

  .text-box {
    @extend %flex-column;

    position: absolute;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    top: 10%;
    left: 10%;
    right: 10%;
  }

  .text-box div {
    margin: auto;
    pointer-events: none;
    border-radius: 5px;
    border: 1px solid #8888;
    padding: 5px 8px;
    text-align: center;
    line-height: normal;
    color: #ddde;
    background-color: #333d;
    font-family: 'Noto Sans';
    font-size: 1.2em;
  }

  &:hover:not(:has(.video-player-close:hover)) {
    .play-button {
      opacity: 1;
    }

    .image {
      filter: blur(4px) brightness(0.6);
    }
  }
}