signal-desktop/stylesheets/components/Quote.scss

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

.module-quote {
  &__container {
    .module-message & {
      margin-inline: -4px;
      margin-top: 0px;
      margin-bottom: 8px;
    }
  }

  @include button-reset;
  width: 100%;

  position: relative;
  border-radius: 8px 8px 4px 4px;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;

  @include keyboard-mode {
    &:focus {
      box-shadow: 0px 0px 0px 2px $color-ultramarine;
    }
  }

  &__reaction-emoji {
    bottom: 5px;
    position: absolute;
    inset-inline-end: 25px;
    z-index: $z-index-base;

    img.emoji {
      height: 24px;
      width: 24px;
    }

    &--story-unavailable {
      align-items: flex-end;
      display: flex;
      margin-inline-start: 32px;
      padding-bottom: 7px;
    }
  }
}

.module-quote--no-click {
  cursor: auto;
}

.module-quote--with-reference-warning {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.module-quote--outgoing {
  background-color: $color-steel;

  .module-quote__primary {
    border-inline-start-color: $color-steel;
  }

  // To preserve contrast
  @include keyboard-mode {
    &:focus {
      box-shadow: 0px 0px 0px 2px $color-white;
    }
  }
}

@each $color, $value in $conversation-colors {
  .module-quote--incoming-#{$color} {
    background-color: scale-color($value, $lightness: 60%);

    .module-quote__primary {
      border-inline-start-color: $value;
    }

    @include dark-theme {
      background-color: scale-color($value, $lightness: -40%);
    }
  }

  .module-quote--outgoing-#{$color} {
    background-color: scale-color($value, $lightness: 60%);

    .module-quote__primary {
      border-inline-start-color: $color-white;
    }

    @include dark-theme {
      background-color: scale-color($value, $lightness: -40%);
      border-inline-start-color: $color-white;
    }
  }

  .module-quote--compose-#{$color} {
    background-color: scale-color($value, $lightness: 60%);

    .module-quote__primary {
      border-inline-start-color: $value;
    }

    @include dark-theme {
      background-color: scale-color($value, $lightness: -40%);
      .module-quote__primary {
        border-inline-start-color: $color-white;
      }
    }
  }
}

.module-quote--compose-custom,
.module-quote--incoming-custom,
.module-quote--outgoing-custom {
  background-attachment: fixed;
}

@each $color, $value in $conversation-colors-gradient {
  .module-quote--compose-#{$color},
  .module-quote--incoming-#{$color} {
    .module-quote__primary,
    &.module-quote__reference-warning {
      border-inline-start-color: map-get($value, 'start');
    }
  }
  .module-quote--compose-#{$color},
  .module-quote--incoming-#{$color},
  .module-quote--outgoing-#{$color} {
    background-attachment: fixed;
    @include light-theme {
      background-image: linear-gradient(
          map-get($value, 'deg'),
          scale-color(map-get($value, 'start'), $lightness: 60%),
          scale-color(map-get($value, 'end'), $lightness: 60%)
        ),
        linear-gradient(red, blue);
    }
    @include dark-theme {
      background-image: linear-gradient(
        map-get($value, 'deg'),
        scale-color(map-get($value, 'start'), $lightness: -40%),
        scale-color(map-get($value, 'end'), $lightness: -40%)
      );
    }
  }
  .module-quote--outgoing-#{$color} {
    .module-quote__primary,
    &.module-quote__reference-warning {
      border-inline-start-color: $color-white;
    }
  }
}

.module-quote__primary {
  flex-grow: 1;
  padding-inline: 8px;
  padding-top: 7px;
  padding-bottom: 7px;

  // To leave room for image thumbnail
  min-height: 54px;
  border-style: solid;
  border-width: 0 0 0 4px;
}

.module-quote__primary__author {
  @include font-body-2-bold;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  @include light-theme {
    color: $color-gray-90;
  }
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__primary__author--incoming {
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__primary__text {
  @include font-body-1;

  text-align: start;

  @include light-theme {
    color: $color-gray-90;
    a {
      color: $color-gray-90;
    }
  }
  @include dark-theme {
    color: $color-gray-05;
    a {
      color: $color-gray-05;
    }
  }

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.module-quote__primary__text--incoming {
  @include dark-theme {
    color: $color-gray-05;
    a {
      color: $color-gray-05;
    }
  }
}

.module-quote__primary__type-label {
  @include font-body-2-italic;

  @include light-theme {
    color: $color-gray-90;
  }
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__primary__type-label--incoming {
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__primary__filename-label {
  @include font-body-2;
}

.module-quote__close-container {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  height: 16px;
  width: 16px;

  border-radius: 50%;

  background-color: $color-black-alpha-40;

  @include keyboard-mode {
    &:focus-within {
      background-color: $color-ultramarine;
    }
  }
}

.module-quote__close-button {
  @include button-reset;

  width: 14px;
  height: 14px;

  @include position-absolute-center;

  @include color-svg('../images/icons/v3/x/x.svg', $color-white);
}

.module-quote__icon-container {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 54px;
  position: relative;
  width: 54px;

  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.module-quote__icon-container__outgoing-gift-badge {
  @include light-theme {
    border: 1px solid $color-white;
  }
  @include dark-theme {
    border: 1px solid $color-white-alpha-80;
  }
}

.module-quote__icon-container__inner {
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-quote__icon-container__circle-background {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-color: $color-white;
}

.module-quote__icon-container__icon {
  width: 20px;
  height: 20px;
}

.module-quote__icon-container__icon--file {
  @include color-svg('../images/icons/v3/file/file.svg', $color-ultramarine);
}
.module-quote__icon-container__icon--image {
  @include color-svg(
    '../images/icons/v3/photo/photo-square.svg',
    $color-ultramarine
  );
}
.module-quote__icon-container__icon--microphone {
  @include color-svg('../images/icons/v3/mic/mic.svg', $color-ultramarine);
}
.module-quote__icon-container__icon--play {
  @include color-svg(
    '../images/icons/v3/play/play-fill.svg',
    $color-ultramarine
  );
}
.module-quote__icon-container__icon--movie {
  @include color-svg('../images/movie.svg', $color-ultramarine);
}
.module-quote__icon-container__icon--view-once {
  @include color-svg(
    '../images/icons/v3/view_once/view_once.svg',
    $color-ultramarine
  );
}

.module-quote__generic-file {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.module-quote__generic-file__icon {
  background: url('../images/file-gradient.svg');
  background-size: 75%;
  background-repeat: no-repeat;
  height: 28px;
  width: 36px;
  margin-inline: -4px -6px;
  margin-bottom: 5px;
}
.module-quote__generic-file__text {
  @include font-body-2;

  max-width: calc(100% - 26px);
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  @include light-theme {
    color: $color-gray-90;
  }
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__generic-file__text--incoming {
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__reference-warning {
  color: $color-gray-90;
  height: 26px;
  display: flex;
  flex-direction: row;
  align-items: center;

  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-inline-start-style: solid;
  border-left-width: 4px;
  padding-inline: 8px;
}

.module-quote__reference-warning__icon {
  height: 16px;
  width: 16px;

  @include light-theme {
    @include color-svg(
      '../images/icons/v3/link/link-slash.svg',
      $color-gray-90
    );
  }
  @include dark-theme {
    @include color-svg(
      '../images/icons/v3/link/link-slash.svg',
      $color-gray-05
    );
  }
}

.module-quote__reference-warning__icon--incoming {
  @include light-theme {
    @include color-svg(
      '../images/icons/v3/link/link-slash.svg',
      $color-gray-90
    );
  }
  @include dark-theme {
    @include color-svg(
      '../images/icons/v3/link/link-slash.svg',
      $color-gray-05
    );
  }
}

.module-quote__reference-warning__text {
  @include font-caption;

  margin-inline-start: 6px;

  @include light-theme {
    color: $color-gray-90;
  }
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-quote__reference-warning__text--incoming {
  @include dark-theme {
    color: $color-gray-05;
  }
}

.module-message {
  .module-message__author + .module-quote__container {
    margin-top: 3px;
    .module-quote {
      border-radius: 4px 4px 4px 4px;
    }
  }
}

.module-message--incoming.module-message--collapsed-above {
  .module-quote {
    border-top-left-radius: 4px;
  }
}
.module-message--outgoing.module-message--collapsed-above {
  .module-quote {
    border-top-right-radius: 4px;
  }
}