1 | .str-chat {
|
2 | box-sizing: border-box;
|
3 |
|
4 | *,
|
5 | *::after,
|
6 | *::before {
|
7 | box-sizing: inherit;
|
8 | font-family: var(--second-font);
|
9 | }
|
10 |
|
11 |
|
12 | .ngxp__container {
|
13 | z-index: 1;
|
14 | margin: 0 !important;
|
15 | padding: 0 !important;
|
16 | box-shadow: none !important;
|
17 | border: none !important;
|
18 |
|
19 | .ngxp__arrow {
|
20 | display: none !important;
|
21 | }
|
22 | }
|
23 |
|
24 |
|
25 | &.google-chrome {
|
26 | popper-content {
|
27 | .ngxp__container {
|
28 | display: block !important;
|
29 | position: absolute;
|
30 | right: 0;
|
31 | bottom: 0;
|
32 | opacity: 0;
|
33 |
|
34 | &[aria-hidden='true'] {
|
35 | visibility: hidden;
|
36 | }
|
37 | }
|
38 | }
|
39 | }
|
40 |
|
41 |
|
42 | .str-chat__unread-messages-notification,
|
43 | .str-chat__unread-messages-separator-wrapper,
|
44 | .str-chat__message-bounce-prompt {
|
45 | display: none;
|
46 | }
|
47 | }
|
48 |
|
49 | .clearfix {
|
50 | clear: both;
|
51 | }
|
52 |
|
53 | .messenger-chat {
|
54 | &.str-chat {
|
55 | display: flex;
|
56 | align-items: flex-start;
|
57 | justify-content: flex-start;
|
58 | font-family: var(--second-font);
|
59 | height: 100vh;
|
60 | margin: 0;
|
61 | flex: 1 0 100%;
|
62 |
|
63 | .str-chat {
|
64 | &__container {
|
65 | flex: 1;
|
66 | height: 100%;
|
67 | display: flex;
|
68 | flex-direction: row;
|
69 | }
|
70 |
|
71 | &__main-panel {
|
72 | width: 100%;
|
73 | min-width: 250px;
|
74 | flex: 1;
|
75 | height: 100%;
|
76 | display: flex;
|
77 | flex-direction: column;
|
78 | padding: var(--sm-p) var(--sm-p) 0 var(--xs-p);
|
79 | }
|
80 | }
|
81 | }
|
82 | }
|
83 |
|
84 | .str-chat {
|
85 | height: 100vh;
|
86 | font-family: var(--second-font);
|
87 | color: var(--black);
|
88 |
|
89 | &.dark {
|
90 | color: var(--white);
|
91 | }
|
92 |
|
93 | &.messaging,
|
94 | &.commerce {
|
95 | background-color: var(--grey-gainsboro);
|
96 |
|
97 | &.dark {
|
98 | background-color: var(--dark-grey);
|
99 | }
|
100 | }
|
101 |
|
102 | &.team {
|
103 | &.dark {
|
104 | background: var(--dark-grey);
|
105 | }
|
106 | }
|
107 |
|
108 | &.livestream {
|
109 | &.dark {
|
110 | background: var(--dark-grey);
|
111 | }
|
112 | }
|
113 | }
|
114 |
|
115 | .str-chat-channel-list {
|
116 | float: left;
|
117 | }
|
118 |
|
119 | .str-chat-channel {
|
120 | max-height: 100vh;
|
121 |
|
122 | .str-chat__container {
|
123 | height: 100%;
|
124 | display: flex;
|
125 |
|
126 | .str-chat__main-panel,
|
127 | .str-chat-angular__main-panel-inner {
|
128 | height: 100%;
|
129 | width: 100%;
|
130 | min-width: 250px;
|
131 | display: flex;
|
132 | flex-direction: column;
|
133 | flex: 1;
|
134 |
|
135 | &--hideOnThread {
|
136 | display: none;
|
137 | }
|
138 | }
|
139 |
|
140 | .rfu-dropzone {
|
141 | width: 100%;
|
142 | }
|
143 | }
|
144 |
|
145 | &.messaging {
|
146 | .str-chat__main-panel {
|
147 | padding: var(--sm-p) var(--xs-p) 0 0;
|
148 | }
|
149 |
|
150 | @media screen and (max-width: 960px) {
|
151 | .str-chat__main-panel {
|
152 | padding: var(--xxs-p) var(--xxs-p) 0;
|
153 | }
|
154 | }
|
155 | }
|
156 |
|
157 | &.team {
|
158 | .str-chat {
|
159 | &__container {
|
160 | display: flex;
|
161 | }
|
162 | }
|
163 | }
|
164 |
|
165 | &.commerce {
|
166 | .str-chat {
|
167 | &__main-panel {
|
168 | width: 100%;
|
169 | }
|
170 |
|
171 | &__container {
|
172 | background: var(--white95);
|
173 | }
|
174 | }
|
175 |
|
176 | &.dark {
|
177 | .str-chat__container {
|
178 | background: var(--dark-grey);
|
179 | box-shadow: 0 10px 31px 0 var(--black50);
|
180 | }
|
181 | }
|
182 | }
|
183 | }
|
184 |
|
185 | .str-chat.dark {
|
186 | .emoji-mart {
|
187 | background: var(--dark-grey);
|
188 | border: var(--dark-grey);
|
189 | }
|
190 |
|
191 | .emoji-mart-category-label span {
|
192 | background: var(--dark-grey);
|
193 | color: var(--white);
|
194 | }
|
195 |
|
196 | .emoji-mart-search {
|
197 | input {
|
198 | background: var(--dark-grey);
|
199 | color: var(--white);
|
200 | }
|
201 |
|
202 | button svg {
|
203 | fill: var(--white);
|
204 | }
|
205 | }
|
206 | }
|
207 |
|
208 |
|
209 | .str-chat__empty-channel {
|
210 | display: none;
|
211 | }
|
212 |
|
213 |
|
214 | stream-icon,
|
215 | stream-icon-placeholder {
|
216 | display: flex;
|
217 | justify-content: center;
|
218 | align-items: center;
|
219 | }
|