signal-desktop/stylesheets/components/MessageTextRenderer.scss
2023-05-09 17:40:19 -07:00

124 lines
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
// 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;
}
}
}
&--spoiler--copy-target {
// We don't want this thing to affect the layout of the message
position: absolute;
top: 0;
// We can use left here; this is not visible to the user
/* stylelint-disable liberty/use-logical-spec */
left: 0;
height: 1px;
width: 1px;
// Hide text
color: transparent;
overflow: hidden;
}
// 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;
}
}
}