UNPKG

5.65 kBSCSSView Raw
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}