101 lines
2.3 KiB
SCSS
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: inherit;
|
|
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;
|
|
}
|
|
}
|
|
}
|