lbry-desktop/ui/scss/init/_mixins.scss

@mixin placeholder {
  animation: pulse 2s infinite ease-in-out;
  background-color: var(--color-placeholder-background);
  border-radius: var(--card-radius);
}

@mixin mediaThumbHoverZoom {
  .media__thumb,
  img {
    transition: all 0.2s ease;
  }

  &:hover {
    .media__thumb,
    img {
      transform: scale(1.05);
    }
  }
}

@mixin handleClaimTileGifThumbnail($width) {
  .ff-canvas,
  .freezeframe-img {
    height: calc(#{$width} * (9 / 16)) !important;
    width: $width;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@mixin handleClaimListGifThumbnail($width) {
  .ff-canvas,
  .freezeframe-img {
    height: calc(#{$width} * (9 / 16)) !important;
    width: $width;
  }
}

@mixin handleChannelGif($size) {
  height: $size;
  width: $size;

  .ff-canvas,
  .freezeframe-img {
    border-radius: var(--border-radius);
    height: $size !important;
    width: $size !important;
  }
}