1 | .str-chat__message-actions-box {
|
2 | position: absolute;
|
3 | display: none;
|
4 | bottom: 20px;
|
5 | left: 40px;
|
6 | width: 120px;
|
7 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
|
8 | background: var(--white);
|
9 | background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
|
10 | box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
|
11 | z-index: 999;
|
12 |
|
13 | &.str-chat__message-actions-box-angular {
|
14 | position: initial;
|
15 | margin: 8px;
|
16 | border-radius: var(--border-radius);
|
17 | }
|
18 | }
|
19 |
|
20 | .str-chat__message-actions-box--open {
|
21 | display: block;
|
22 | }
|
23 |
|
24 | .str-chat__message-actions-list {
|
25 | height: 100%;
|
26 | margin: 0;
|
27 | padding: 0;
|
28 | list-style-type: none;
|
29 | display: flex;
|
30 | flex-direction: column;
|
31 | align-items: flex-start;
|
32 | }
|
33 |
|
34 | .str-chat__message-actions-list-item {
|
35 | padding: var(--xs-p) var(--xs-p);
|
36 | width: 100%;
|
37 | margin: 0;
|
38 | }
|
39 |
|
40 | .str-chat__message-actions-list button {
|
41 | background: none;
|
42 | text-align: left;
|
43 | outline: none;
|
44 | border: none;
|
45 | cursor: pointer;
|
46 | display: block;
|
47 | width: 100%;
|
48 | font-size: var(--sm-font);
|
49 | color: var(--black);
|
50 | text-decoration: none;
|
51 |
|
52 | &:focus {
|
53 | outline: 5px auto -webkit-focus-ring-color;
|
54 | }
|
55 | }
|
56 |
|
57 | .str-chat__message-actions-list button:hover {
|
58 | color: var(--primary-color);
|
59 | }
|
60 |
|
61 | .str-chat__message-actions-list button:not(:last-of-type) {
|
62 | border-bottom: 1px solid var(--black5);
|
63 | }
|
64 |
|
65 | .str-chat__message-actions {
|
66 | position: relative;
|
67 | align-self: flex-start;
|
68 | display: flex;
|
69 | align-items: center;
|
70 | justify-content: flex-end;
|
71 | margin: var(--xxs-m) var(--xs-m);
|
72 | cursor: pointer;
|
73 | }
|
74 |
|
75 | .str-chat__message-actions {
|
76 | order: 2;
|
77 | }
|
78 |
|
79 | .str-chat__message--me .str-chat__message-actions {
|
80 | order: -1;
|
81 | }
|
82 |
|
83 | .str-chat__message-actions-reactions,
|
84 | .str-chat__message-actions-options {
|
85 | display: flex;
|
86 | align-items: center;
|
87 | justify-content: center;
|
88 | width: 22px;
|
89 | height: 22px;
|
90 | }
|
91 |
|
92 | .str-chat__message-actions-reactions,
|
93 | .str-chat__message-actions-options svg {
|
94 | fill: var(--grey);
|
95 | position: relative;
|
96 | }
|
97 |
|
98 | .str-chat__message-actions-reactions:hover,
|
99 | .str-chat__message-actions-options:hover svg {
|
100 | fill: var(--primary-color);
|
101 | }
|
102 |
|
103 | .str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--thread {
|
104 | display: flex;
|
105 | }
|
106 |
|
107 | .str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--reactions {
|
108 | display: flex;
|
109 | }
|
110 |
|
111 | .str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
|
112 | display: flex;
|
113 |
|
114 | button {
|
115 | display: flex;
|
116 | align-items: center;
|
117 | }
|
118 | }
|
119 |
|
120 | .str-chat__message-moderation-error-actions-box {
|
121 | display: flex;
|
122 | justify-content: flex-end;
|
123 | padding-top: var(--xs-p);
|
124 | padding-bottom: var(--xs-p);
|
125 | gap: var(--xs-p);
|
126 |
|
127 | button {
|
128 | border: none;
|
129 | background: none;
|
130 | font-weight: var(--font-weight-semi-bold);
|
131 | color: var(--secondary-button-text);
|
132 |
|
133 | &.str-chat__message-moderation-error-actions-box--primary {
|
134 | color: var(--button-text);
|
135 | }
|
136 | }
|
137 | }
|