1 | %scrollable {
|
2 | overflow-x: hidden;
|
3 | overflow-y: auto;
|
4 | }
|
5 |
|
6 |
|
7 |
|
8 | %loading-indicator-container {
|
9 | display: flex;
|
10 | padding-top: var(--xs-p);
|
11 | justify-content: center;
|
12 | width: 100%;
|
13 | position: absolute;
|
14 | }
|
15 |
|
16 | .str-chat-angular__message-list-host {
|
17 | @extend %scrollable;
|
18 | }
|
19 |
|
20 | .str-chat__list.str-chat__list--thread {
|
21 | .str-chat__reverse-infinite-scroll {
|
22 | padding-top: 0;
|
23 | }
|
24 | }
|
25 |
|
26 | .str-chat__list {
|
27 | @extend %scrollable;
|
28 | position: relative;
|
29 | flex: 1;
|
30 | -webkit-overflow-scrolling: touch;
|
31 | padding: 0;
|
32 |
|
33 | &__loading {
|
34 | @extend %loading-indicator-container;
|
35 | }
|
36 |
|
37 | .str-chat__reverse-infinite-scroll {
|
38 | padding-top: 72px;
|
39 | }
|
40 |
|
41 | &-wrapper {
|
42 | flex: 1;
|
43 | position: relative;
|
44 | display: flex;
|
45 | flex-direction: column;
|
46 | }
|
47 |
|
48 | &--thread {
|
49 | padding: var(--sm-p) 0 0 0;
|
50 | }
|
51 |
|
52 | &__center {
|
53 | width: 100%;
|
54 | display: flex;
|
55 | justify-content: center;
|
56 | }
|
57 | }
|
58 |
|
59 | .str-chat__ul {
|
60 | display: block;
|
61 | list-style-type: none;
|
62 | padding: 0;
|
63 | margin: 0;
|
64 | }
|
65 |
|
66 | .str-chat__custom-notification {
|
67 | border-radius: var(--border-radius-sm);
|
68 | font-size: var(--sm-font);
|
69 | padding: var(--xs-p);
|
70 | font-family: var(--second-font);
|
71 | text-align: center;
|
72 | margin-top: var(--xs-m);
|
73 |
|
74 | &.notification-success {
|
75 | background: var(--faded-green);
|
76 | border: 1px solid var(--green);
|
77 | color: var(--green);
|
78 | }
|
79 |
|
80 | &.notification-error {
|
81 | background: var(--faded-red);
|
82 | border: 1px solid var(--red);
|
83 | color: var(--red);
|
84 | }
|
85 |
|
86 | &.notification-info {
|
87 | background: var(--faded-blue);
|
88 | border: 1px solid var(--blue);
|
89 | color: var(--blue);
|
90 | }
|
91 | }
|
92 |
|
93 | .str-chat__connection-issue {
|
94 | background: var(--faded-red);
|
95 | border: 1px solid var(--red);
|
96 | color: var(--red);
|
97 | border-radius: var(--border-radius-sm);
|
98 | font-size: var(--sm-font);
|
99 | padding: var(--xs-p);
|
100 | font-family: var(--second-font);
|
101 | text-align: center;
|
102 | }
|
103 |
|
104 | .str-chat__list-notifications,
|
105 | .str-chat__jump-to-latest-message {
|
106 | padding: 0 var(--xl-p);
|
107 | display: flex;
|
108 | position: relative;
|
109 | flex-direction: column;
|
110 | justify-content: center;
|
111 | }
|
112 |
|
113 | .messaging {
|
114 | &.str-chat {
|
115 | .str-chat {
|
116 | &__list.str-chat__list--thread {
|
117 | .str-chat__reverse-infinite-scroll {
|
118 | padding-top: 0;
|
119 | }
|
120 | }
|
121 |
|
122 | &__list {
|
123 | padding: 0 var(--xl-p) 0;
|
124 | background: var(--white);
|
125 |
|
126 | .str-chat__reverse-infinite-scroll {
|
127 | padding-top: 56px;
|
128 | }
|
129 |
|
130 | &-notifications {
|
131 | background: var(--white);
|
132 | }
|
133 | }
|
134 | }
|
135 |
|
136 | @media screen and (max-width: 960px) {
|
137 | .str-chat {
|
138 | &__list.str-chat__list--thread {
|
139 | .str-chat__reverse-infinite-scroll {
|
140 | padding-top: 0;
|
141 | }
|
142 | }
|
143 |
|
144 | &__list {
|
145 | padding: 0 var(--xs-p) 0;
|
146 |
|
147 | .str-chat__reverse-infinite-scroll {
|
148 | padding-top: 56px;
|
149 | }
|
150 |
|
151 | &-notifications,
|
152 | .str-chat__jump-to-latest-message {
|
153 | padding: 0 var(--xs-p);
|
154 | }
|
155 | }
|
156 | }
|
157 | }
|
158 |
|
159 | &.dark {
|
160 | .str-chat__list {
|
161 | background: var(--white5);
|
162 |
|
163 | &-notifications {
|
164 | background: var(--white5);
|
165 | }
|
166 | }
|
167 | }
|
168 | }
|
169 | }
|
170 |
|
171 | .livestream {
|
172 | &.str-chat {
|
173 | .str-chat {
|
174 | &__list.str-chat__list--thread {
|
175 | .str-chat__reverse-infinite-scroll {
|
176 | padding-top: 0;
|
177 | }
|
178 | }
|
179 |
|
180 | &__list {
|
181 | padding: 0 var(--xs-p);
|
182 |
|
183 | .str-chat__reverse-infinite-scroll {
|
184 | padding-top: 56px;
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|
189 | }
|
190 |
|
191 | .commerce {
|
192 | &.str-chat {
|
193 | .str-chat {
|
194 | &__list.str-chat__list--thread {
|
195 | .str-chat__reverse-infinite-scroll {
|
196 | padding-top: 0;
|
197 | }
|
198 | }
|
199 |
|
200 | &__list {
|
201 | padding: 0 var(--md-p) 0;
|
202 |
|
203 | .str-chat__reverse-infinite-scroll {
|
204 | padding-top: 72px;
|
205 | }
|
206 |
|
207 | &-notifications {
|
208 | padding-left: var(--md-p);
|
209 | padding-right: var(--md-p);
|
210 | }
|
211 | }
|
212 | }
|
213 | }
|
214 | }
|
215 |
|
216 | .str-chat__virtual-list {
|
217 | position: relative;
|
218 | flex: 1;
|
219 | overflow-x: hidden;
|
220 | overflow-y: auto;
|
221 | -webkit-overflow-scrolling: touch;
|
222 | background: var(--white);
|
223 | margin: 0;
|
224 | width: 100%;
|
225 | height: 100%;
|
226 |
|
227 | &__loading {
|
228 | @extend %loading-indicator-container;
|
229 | }
|
230 |
|
231 | p {
|
232 | margin: 0 !important;
|
233 |
|
234 | a {
|
235 | white-space: pre-line;
|
236 | overflow: hidden;
|
237 | word-wrap: break-word;
|
238 | }
|
239 | }
|
240 | }
|
241 |
|
242 | .dark .str-chat__virtual-list {
|
243 | background: var(--white5);
|
244 | }
|