1 | .str-chat__message-reactions-list {
|
2 | list-style-type: none;
|
3 | margin: 0;
|
4 | padding: 0;
|
5 | display: flex;
|
6 | }
|
7 |
|
8 | .str-chat__message-reactions-list-item {
|
9 | font-size: var(--xl-font);
|
10 | margin: 0 var(--xxs-m);
|
11 | position: relative;
|
12 | line-height: 0;
|
13 |
|
14 | button {
|
15 | padding: 0;
|
16 | }
|
17 |
|
18 | span[role='img'] {
|
19 | position: relative;
|
20 | display: block;
|
21 | top: -2px;
|
22 | transition: transform 100ms ease;
|
23 |
|
24 | &:hover {
|
25 | transform: scale(1.4);
|
26 | }
|
27 | }
|
28 |
|
29 | &__count {
|
30 | position: absolute;
|
31 | top: 28px;
|
32 | font-size: var(--xs-font);
|
33 | color: var(--white);
|
34 | font-weight: var(--font-weight-bold);
|
35 | left: 6px;
|
36 | }
|
37 |
|
38 | .latest-user {
|
39 | width: 20px;
|
40 | height: 20px;
|
41 | position: absolute;
|
42 | top: -24px;
|
43 | left: 0;
|
44 |
|
45 | &-tooltip {
|
46 | display: none;
|
47 | text-align: center;
|
48 | position: absolute;
|
49 | bottom: calc(100% + 5px);
|
50 | left: 50%;
|
51 | transform: translate(-50%, 0);
|
52 | background: var(--black80);
|
53 | border-radius: var(--border-radius-sm);
|
54 | background-image: linear-gradient(-180deg, transparent, var(--black50));
|
55 | max-width: 237px;
|
56 | padding: var(--xxs-p) var(--xs-p);
|
57 | font-size: var(--sm-font);
|
58 | color: var(--white);
|
59 |
|
60 | &::after {
|
61 | content: '';
|
62 | position: absolute;
|
63 | top: calc(100% - 4px);
|
64 | left: 50%;
|
65 | transform: translate(-50%, 0) rotate(45deg);
|
66 | width: 7px;
|
67 | height: 7px;
|
68 | background-color: var(--dark-grey);
|
69 | }
|
70 | }
|
71 |
|
72 | &-not-found {
|
73 | border: 1.5px solid var(--white);
|
74 | border-radius: var(--border-radius-round);
|
75 | background-color: var(--secondary-color);
|
76 | width: inherit;
|
77 | height: inherit;
|
78 | }
|
79 |
|
80 | img {
|
81 | border: 1.5px solid var(--white);
|
82 | border-radius: var(--border-radius-round);
|
83 | object-fit: cover;
|
84 | width: inherit;
|
85 | height: inherit;
|
86 | }
|
87 |
|
88 | &:hover {
|
89 | .latest-user-tooltip {
|
90 | display: block;
|
91 | }
|
92 | }
|
93 | }
|
94 |
|
95 | .str-chat__emoji-selector-emoji-angular {
|
96 | width: 20px;
|
97 | height: 20px;
|
98 | top: 10px;
|
99 | }
|
100 | }
|
101 |
|
102 | button.str-chat__message-reactions-list-item {
|
103 | background-color: transparent;
|
104 | border: none;
|
105 | padding: 0;
|
106 | display: flex;
|
107 | }
|
108 |
|
109 | .str-chat__reaction-selector {
|
110 | z-index: 999;
|
111 | height: 60px;
|
112 | position: absolute;
|
113 | width: initial;
|
114 | background: var(--black);
|
115 | background-image: linear-gradient(-180deg, transparent, var(--border));
|
116 | border: 1px solid var(--white5);
|
117 | box-shadow: 0 3px 1px 0 var(--border), 0 11px 8px 0 var(--border);
|
118 | border-radius: var(--border-radius-round);
|
119 | display: flex;
|
120 | align-items: center;
|
121 |
|
122 | ul {
|
123 | position: relative;
|
124 | z-index: 1000;
|
125 | margin: 0 var(--sm-m);
|
126 | }
|
127 |
|
128 | &-tooltip {
|
129 | position: absolute;
|
130 | bottom: calc(100% + 15px);
|
131 | background: var(--black);
|
132 | border-radius: var(--border-radius-sm);
|
133 | min-width: 85px;
|
134 | min-height: 24px;
|
135 | max-width: 100%;
|
136 | padding: var(--xxs-p) var(--xs-p);
|
137 | font-size: var(--sm-font);
|
138 | color: var(--white);
|
139 | text-align: center;
|
140 |
|
141 | .arrow {
|
142 | position: absolute;
|
143 | top: calc(100% - 4px);
|
144 | left: 50%;
|
145 | transform: translate(-50%, 0) rotate(45deg);
|
146 | width: 7px;
|
147 | height: 7px;
|
148 | background-color: var(--black);
|
149 | }
|
150 | }
|
151 |
|
152 | .emoji-mart-emoji:hover,
|
153 | .str-chat__emoji:hover {
|
154 | transition: 0.1s;
|
155 | transform: scale(1.2);
|
156 | cursor: pointer;
|
157 | }
|
158 | }
|
159 |
|
160 | .str-chat__message,
|
161 | .str-chat__message-team,
|
162 | .str-chat__message-simple,
|
163 | .str-chat__message-commerce,
|
164 | .str-chat__message-livestream {
|
165 | .str-chat__reaction-selector {
|
166 | top: -65px;
|
167 | left: 0;
|
168 | }
|
169 | }
|
170 |
|
171 | .str-chat__message-commerce {
|
172 | &--right {
|
173 | .str-chat__reaction-selector {
|
174 | left: unset;
|
175 | right: 0;
|
176 | }
|
177 | }
|
178 | }
|
179 |
|
180 | .str-chat__message-livestream {
|
181 | .str-chat__reaction-selector {
|
182 | left: unset;
|
183 | top: -70px;
|
184 | right: 0;
|
185 | }
|
186 | }
|
187 |
|
188 | .str-chat__message-team {
|
189 | .str-chat__reaction-selector {
|
190 | left: unset;
|
191 | top: -60px;
|
192 | right: 0;
|
193 | }
|
194 | }
|
195 |
|
196 | .str-chat__message-simple {
|
197 | .str-chat__reaction-selector {
|
198 | right: unset;
|
199 | left: 0;
|
200 |
|
201 | &--reverse {
|
202 | right: 0;
|
203 | left: unset;
|
204 | }
|
205 | }
|
206 |
|
207 | &--me {
|
208 | .str-chat__reaction-selector {
|
209 | left: unset;
|
210 | right: 0;
|
211 |
|
212 | &--reverse {
|
213 | right: unset;
|
214 | left: 0;
|
215 | }
|
216 | }
|
217 | }
|
218 | }
|