1.WrapperMessage-hoverBox {
2  padding-bottom: 3px;
3  padding-top: 3px;
4  padding-left: 56px;
5  padding-right: 16px;
6  display: flex;
7  flex-direction: column;
8  position: relative;
9  width: 100%;
10}
11.WrapperMessage-systemMessage {
12  padding-left: 0;
13}
14.WrapperMessage-noOverflow {
15  overflow: hidden;
16}
17.WrapperMessage-hoverBox .WrapperMessage-buttons {
18  display: none;
19  flex-direction: row;
20  justify-content: flex-end;
21  margin-left: 0;
22}
23.WrapperMessage-hoverBox:hover .WrapperMessage-buttons,
24.WrapperMessage-decorated.active .WrapperMessage-buttons {
25  display: flex;
26  flex-direction: row;
27  justify-content: flex-end;
28  margin-left: 0;
29}
30.WrapperMessage-hoverColor:hover {
31  background-color: #ebf2fc;
32}
33.WrapperMessage-decorated.active {
34  background-color: #ebf2fc;
35}
36.darkMode .WrapperMessage-hoverColor:hover {
37  background-color: #101010;
38}
39.darkMode .WrapperMessage-decorated.active {
40  background-color: #101010;
41}
42.WrapperMessage-author {
43  padding-left: 0;
44  padding-top: 8px;
45}
46.WrapperMessage-hoverBox .WrapperMessage-emojiButton {
47  transition: box-shadow 0.1s ease-out;
48}
49.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton {
50  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
51}
52.darkMode .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton {
53  box-shadow: none;
54}
55.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton.noShadow,
56.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton:active {
57  box-shadow: none;
58}
59.WrapperMessage-hoverBox .WrapperMessage-newEmojiButton {
60  visibility: hidden;
61}
62.WrapperMessage-hoverBox:hover .WrapperMessage-newEmojiButton {
63  visibility: visible;
64}
65.WrapperMessage-hoverBox:hover .WrapperMessage-emojiRow {
66  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.08);
67}
68.WrapperMessage-centered {
69  background-color: #fff75a;
70}
71.ReplyBox:hover {
72  background-color: white;
73}
74.darkMode .ReplyBox:hover {
75  background-color: rgba(24, 45, 110, 0.5);
76}
77.WrapperMessage-hoverBox:hover .sendingStatus {
78  visibility: hidden;
79}
80.darkMode .WrapperMessage-centered {
81  background-color: #e0d733;
82}
83.darkMode .WrapperMessage-centered .text_Body {
84  color: #101010;
85}
86.darkMode .WrapperMessage-centered:hover .text_BodySmallBold {
87  /* author username */
88  color: rgba(255, 255, 255, 0.85) !important;
89}
90.darkMode .WrapperMessage-centered:hover .text_Body {
91  /* message text */
92  color: rgba(255, 255, 255, 0.85) !important;
93}
94.darkMode .WrapperMessage-centered:hover .text_BodyTiny {
95  /* timestamp */
96  color: rgba(255, 255, 255, 0.4) !important;
97}
98.darkMode .WrapperMessage-centered:hover .ReplyBox .text_BodySemibold {
99  /* reply author username */
100  color: rgba(255, 255, 255, 0.6) !important;
101}
102.darkMode .WrapperMessage-centered:hover .ReplyBox .text_BodySmall {
103  /* reply message text */
104  color: rgba(255, 255, 255, 0.4) !important;
105}
106.darkMode .WrapperMessage-centered:hover .explodingTimeContainer {
107  background-color: rgba(255, 255, 255, 0.85) !important;
108}
109.darkMode .WrapperMessage-centered:hover .explodingTimeText {
110  color: rgba(0, 0, 0, 0.85) !important;
111}
112.darkMode .WrapperMessage-centered:hover .explodingTimeIcon {
113  color: rgba(255, 255, 255, 0.85) !important;
114}
115