signal-desktop/stylesheets/components/MessageTextRenderer.scss

112 lines
2.8 KiB
SCSS
Raw Normal View History

// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2024-11-15 23:09:31 +00:00
@use '../mixins';
@use '../variables';
.MessageTextRenderer {
&__formatting {
// bold is handled by <strong> element
// italic is handled by <em> element
// strikethrough is handled by <s> element
&--monospace {
2024-11-15 23:09:31 +00:00
font-family: variables.$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
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
color: variables.$color-black; // vs color-gray-60 normally
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
color: variables.$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;
2024-11-15 23:09:31 +00:00
@include mixins.keyboard-mode {
&:focus {
2024-11-15 23:09:31 +00:00
box-shadow: 0 0 0px 1px variables.$color-ultramarine;
}
}
}
// Note: This is referenced in formatting/matchers.ts, to detect these styles on paste
&--spoiler--noninteractive {
2023-04-18 01:16:41 +00:00
cursor: inherit;
box-shadow: none;
}
// The simplest; always in dark mode
&--spoiler-StoryViewer {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white;
}
&--spoiler-MediaEditor {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-gray-15;
}
// The left pane
&--spoiler-ConversationList,
&--spoiler-SearchResult {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
background-color: variables.$color-gray-60;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
background-color: variables.$color-gray-25;
}
}
// The timeline
&--spoiler-Quote {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
background-color: variables.$color-gray-90;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
background-color: variables.$color-gray-05;
}
}
&--spoiler-Timeline--incoming {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
background-color: variables.$color-gray-90;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
background-color: variables.$color-gray-05;
}
}
&--spoiler-Timeline--outgoing {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
background-color: rgba(255, 255, 255, 0.9);
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
background-color: rgba(255, 255, 255, 0.9);
}
}
&--invisible {
visibility: hidden;
}
}
}