signal-desktop/stylesheets/components/MessageTextRenderer.scss
2023-04-14 11:16:28 -07:00

101 lines
2.3 KiB
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
&--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 {
user-select: none;
cursor: pointer;
// 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;
}
}
}
&--spoiler--noninteractive {
cursor: default;
box-shadow: none;
}
// The simplest; always in dark mode
&--spoiler-StoryViewer {
background-color: $color-white;
}
// 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;
}
}
}