UNPKG

4.19 kBSCSSView Raw
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
102button.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}