lbry-desktop/src/renderer/scss/component/_content.scss

.content {
  flex: 1 0 var(--file-page-min-width);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.content__cover {
  // Video thumbnail with play/download button
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  position: absolute;

  &:not(.card__media--nsfw) {
    background-color: $lbry-black;

    html[data-theme='dark'] & {
      background-color: rgba($lbry-white, 0.1);
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.content__embedded {
  @include thumbnail;
  align-items: center;
  background-color: $lbry-black;
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-vertical-large);
  max-height: 60vh;
  position: relative;
  width: 100%;

  video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;

    &:hover {
      cursor: pointer;
    }
  }
}

.content__empty {
  @include thumbnail;
  align-items: center;
  background-color: $lbry-black;
  color: $lbry-white;
  display: flex;
  justify-content: center;
  width: 100%;
}

.content__empty--nsfw {
  background-color: $lbry-grape-3;
}

.content__loading {
  width: 100%;
  height: 100%;

  align-items: center;
  background-color: rgba($lbry-black, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--spacing-vertical-large);
}

.content__loading-text {
  color: $lbry-white;
}

.content__view {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;

  iframe {
    width: 100%;
    height: 100%;
    background-color: $lbry-white;
  }
}