signal-desktop/stylesheets/components/MessageTextRenderer.scss

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

.MessageTextRenderer {
  &__formatting {
    // bold is handled by <strong> element
    // italic is handled by <em> element
    // strikethrough is handled by <s> element

    &--monospace {
      font-family: $monospace;
    }

    // Note: only used in the left pane for search results, not in message bubbles
    // Note: This is referenced in formatting/matchers.ts, to detect these styles on paste
    &--keywordHighlight {
      // Boldness of this is handled by <strong> element

      // To differentiate it from bold formatting, we increase the color contrast
      @include light-theme {
        color: $color-black; // vs color-gray-60 normally
      }
      @include dark-theme {
        color: $color-white; // vs color-gray-25 normally
      }
    }

    // Note: Spoiler must be last to override any other formatting applied to the section
    &--spoiler {
      cursor: pointer;

      // Prepare for our inner copy target
      position: relative;

      // Lighten things up a bit
      opacity: 50%;
      border-radius: 4px;

      // make child text invisible
      color: transparent;

      // fix outline
      outline: none;

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

    // Note: This is referenced in formatting/matchers.ts, to detect these styles on paste
    &--spoiler--noninteractive {
      cursor: inherit;
      box-shadow: none;
    }

    // The simplest; always in dark mode
    &--spoiler-StoryViewer {
      background-color: $color-white;
    }
    &--spoiler-MediaEditor {
      background-color: $color-gray-15;
    }

    // The left pane
    &--spoiler-ConversationList,
    &--spoiler-SearchResult {
      @include light-theme {
        background-color: $color-gray-60;
      }
      @include dark-theme {
        background-color: $color-gray-25;
      }
    }

    // The timeline
    &--spoiler-Quote {
      @include light-theme {
        background-color: $color-gray-90;
      }
      @include dark-theme {
        background-color: $color-gray-05;
      }
    }

    &--spoiler-Timeline--incoming {
      @include light-theme {
        background-color: $color-gray-90;
      }
      @include dark-theme {
        background-color: $color-gray-05;
      }
    }
    &--spoiler-Timeline--outgoing {
      @include light-theme {
        background-color: rgba(255, 255, 255, 0.9);
      }
      @include dark-theme {
        background-color: rgba(255, 255, 255, 0.9);
      }
    }

    &--invisible {
      visibility: hidden;
    }
  }
}