1 | .str-chat__header {
|
2 | display: flex;
|
3 | padding: var(--xs-p);
|
4 | border-bottom: 1px solid var(--border);
|
5 |
|
6 | &-livestream {
|
7 | padding: var(--xs-p) var(--xl-p);
|
8 | min-height: 70px;
|
9 | display: flex;
|
10 | align-items: center;
|
11 | font-family: var(--second-font);
|
12 | background: var(--white);
|
13 | box-shadow: 0 1px 1px 0 var(--border);
|
14 |
|
15 | &-left {
|
16 | flex: 1;
|
17 | font-size: var(--md-font);
|
18 |
|
19 | &--title {
|
20 | font-weight: var(--font-weight-bold);
|
21 | margin: 0;
|
22 | }
|
23 |
|
24 | &--members {
|
25 | font-weight: var(--font-weight-regular);
|
26 | margin: 0;
|
27 | }
|
28 |
|
29 | &--livelabel {
|
30 | position: relative;
|
31 | left: 5px;
|
32 | font-size: var(--sm-font);
|
33 | text-transform: uppercase;
|
34 | color: var(--red);
|
35 | display: inline-block;
|
36 | animation: pulse 2s infinite;
|
37 |
|
38 | &::before {
|
39 | content: '';
|
40 | position: relative;
|
41 | top: -2px;
|
42 | left: -4px;
|
43 | display: inline-block;
|
44 | width: 5px;
|
45 | height: 5px;
|
46 | border-radius: var(--border-radius-round);
|
47 | background-color: var(--accent_red);
|
48 | }
|
49 |
|
50 | @keyframes pulse {
|
51 | 0% {
|
52 | opacity: 0.5;
|
53 | }
|
54 |
|
55 | 50% {
|
56 | opacity: 1;
|
57 | }
|
58 |
|
59 | 100% {
|
60 | opacity: 0.5;
|
61 | }
|
62 | }
|
63 | }
|
64 | }
|
65 |
|
66 | &-right {
|
67 | display: flex;
|
68 | margin: 0 calc(var(--xxs-m) * -1);
|
69 |
|
70 | &-button-wrapper {
|
71 | position: relative;
|
72 | }
|
73 | }
|
74 | }
|
75 | }
|
76 |
|
77 | .str-chat__header .str-chat__avatar {
|
78 | margin: 0 var(--sm-m) 0 0;
|
79 | }
|
80 |
|
81 | .str-chat__title {
|
82 | font-weight: var(--font-weight-semi-bold);
|
83 | }
|
84 |
|
85 | .str-chat__meta {
|
86 | width: 100%;
|
87 | display: flex;
|
88 | flex-direction: column;
|
89 | justify-content: space-between;
|
90 | }
|
91 |
|
92 | .str-chat__info {
|
93 | width: 100%;
|
94 | display: flex;
|
95 | justify-content: space-between;
|
96 | font-size: var(--md-font);
|
97 | color: var(--grey);
|
98 | }
|
99 |
|
100 | .str-chat__square-button {
|
101 | background: var(--grey-whisper);
|
102 | border: 1px solid var(--border);
|
103 | border-radius: var(--border-radius-sm);
|
104 | padding: var(--xs-p);
|
105 | margin: 0 var(--xxs-m);
|
106 | display: flex;
|
107 | align-items: center;
|
108 | justify-content: center;
|
109 |
|
110 | svg {
|
111 | fill: var(--black);
|
112 | }
|
113 |
|
114 | &:active {
|
115 | background-color: var(--grey-whisper);
|
116 | }
|
117 | }
|
118 |
|
119 | .dark.str-chat {
|
120 | .str-chat__square-button {
|
121 | background: var(--white5);
|
122 | box-shadow: 0 1px 0 0 var(--black70);
|
123 | border-radius: var(--border-radius-sm);
|
124 |
|
125 | svg {
|
126 | fill: var(--white70);
|
127 | }
|
128 | }
|
129 | }
|
130 |
|
131 | .messaging {
|
132 | &.str-chat {
|
133 | .str-chat {
|
134 | &__header-livestream {
|
135 | position: relative;
|
136 | z-index: 2;
|
137 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
138 | background: var(--white-snow);
|
139 | box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
|
140 | }
|
141 |
|
142 | @media screen and (max-width: 960px) {
|
143 | &__header-livestream {
|
144 | padding-left: var(--sm-p);
|
145 | padding-right: var(--sm-p);
|
146 | }
|
147 | }
|
148 | }
|
149 |
|
150 | &.dark {
|
151 | .str-chat__header-livestream {
|
152 | background: var(--dark-grey);
|
153 | box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
|
154 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
155 | color: var(--white);
|
156 | }
|
157 | }
|
158 | }
|
159 | }
|
160 |
|
161 | .livestream {
|
162 | &.str-chat {
|
163 | .str-chat {
|
164 | &__header-livestream {
|
165 | position: relative;
|
166 | z-index: 1;
|
167 | background: var(--grey-whisper);
|
168 | box-shadow: 0 1px 1px 0 var(--border);
|
169 | }
|
170 | }
|
171 |
|
172 | &.dark {
|
173 | .str-chat__header-livestream {
|
174 | background: var(--white5);
|
175 | box-shadow: 0 1px 1px 0 var(--border);
|
176 |
|
177 | &-left {
|
178 | &--title,
|
179 | &--members {
|
180 | color: var(--white);
|
181 | }
|
182 |
|
183 | &--title {
|
184 | font-size: var(--lg-font);
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|
189 | }
|
190 | }
|
191 |
|
192 | .commerce {
|
193 | &.str-chat {
|
194 | .str-chat {
|
195 | &__header-livestream {
|
196 | background: var(--white80);
|
197 | box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
|
198 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
199 | padding: var(--md-p);
|
200 |
|
201 | &-left {
|
202 | &--title {
|
203 | font-size: var(--xxl-font);
|
204 | margin: 0;
|
205 | line-height: 1;
|
206 | font-weight: var(--font-weight-regular);
|
207 | }
|
208 |
|
209 | &--subtitle {
|
210 | margin: var(--xs-m) 0;
|
211 | font-size: var(--lg-font);
|
212 | }
|
213 |
|
214 | &--members {
|
215 | display: none;
|
216 | }
|
217 | }
|
218 |
|
219 | &-right {
|
220 | &-button {
|
221 | &--info {
|
222 | display: none;
|
223 | }
|
224 | }
|
225 | }
|
226 | }
|
227 | }
|
228 |
|
229 | &.dark {
|
230 | .str-chat__header-livestream {
|
231 | background: var(--grey);
|
232 | box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
|
233 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
234 | color: var(--white);
|
235 | }
|
236 | }
|
237 | }
|
238 | }
|
239 |
|
240 | .team {
|
241 | &.str-chat {
|
242 | &.dark {
|
243 | .str-chat__header-livestream {
|
244 | background: var(--dark-grey);
|
245 | box-shadow: 0 1px 1px 0 var(--black30);
|
246 |
|
247 | &-left {
|
248 | color: var(--white);
|
249 |
|
250 | &--title {
|
251 | font-size: var(--lg-font);
|
252 | }
|
253 |
|
254 | &--members {
|
255 | font-size: var(--sm-font);
|
256 | }
|
257 | }
|
258 | }
|
259 | }
|
260 | }
|
261 | }
|
262 |
|
263 | .str-chat__header-hamburger {
|
264 | width: 30px;
|
265 | height: 38px;
|
266 | padding: var(--xxs-p);
|
267 | margin-right: var(--xs-m);
|
268 | display: none;
|
269 | align-items: center;
|
270 | justify-content: center;
|
271 | cursor: pointer;
|
272 | border: none;
|
273 | background: transparent;
|
274 |
|
275 | &:hover {
|
276 | svg path {
|
277 | fill: var(--primary-color);
|
278 | }
|
279 | }
|
280 |
|
281 | @media screen and (max-width: 960px) {
|
282 | display: flex;
|
283 | }
|
284 | }
|