signal-desktop/stylesheets/components/StoryLinkPreview.scss

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.StoryLinkPreview {
  align-items: center;
  background-color: $color-white;
  border-radius: 36px;
  color: $color-gray-90;
  display: inline-flex;
  max-width: 560px;
  min-width: 560px;
  // no taller than 2:3
  max-height: calc(560px / (2 / 3));
  overflow: hidden;

  &__content {
    margin-inline: 24px;
    padding-block: 16px;
    padding-inline: 0;
  }

  &__title {
    @include font-body-1-bold;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.16px;
  }

  &__description {
    @include font-body-2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.06px;
  }

  &__location {
    @include font-caption;
    color: $color-gray-45;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.12px;
  }

  &__no-image {
    align-items: center;
    display: flex;
    height: 176px;
    justify-content: center;
    margin-inline: 52px;

    &::before {
      @include color-svg('../images/icons/v2/link-24.svg', $color-gray-90);
      content: '';
      display: block;
      height: 48px;
      width: 48px;
    }
  }

  &__icon-container {
    overflow: hidden;
  }

  &--tall {
    flex-direction: column;
  }

  &--tiny {
    min-width: inherit;

    .StoryLinkPreview__no-image {
      height: 100px;
      margin-inline: 24px 0;
      width: auto;
    }
  }
}