@ezuikit/control-broadcast 0.1.0-beta.3 → 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -3
- package/dist/index.esm.js +3 -3
- package/dist/index.umd.js +15 -3
- package/dist/style/index.js +3 -0
- package/dist/style/style/broadcast.scss +323 -0
- package/dist/style/style.css +1 -0
- package/dist/style/style.js +6 -0
- package/dist/types/index.d.ts +277 -220
- package/package.json +12 -6
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 广播内容区样式（抽屉骨架由 @ezuikit/control-drawer 提供，录音提示基于 @ezuikit/control-message）。
|
|
3
|
+
* 结构：.edrawer（根）> .edrawer-mask + .edrawer-panel > .edrawer-header + .edrawer-body
|
|
4
|
+
* 本文件只负责注入到 .edrawer-body 内的广播内容（Tab / 列表 / 状态 / 底部按钮 / 轻提示 / 录音提示）。
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
// 类名前缀，需与 src/constant.ts 中的 _BROADCAST_PREFIX_CLS_ 保持一致
|
|
8
|
+
$broadcast-prefix-cls: 'ebroadcast';
|
|
9
|
+
|
|
10
|
+
// 盒模型：只作用于本控件自己的元素（类名带前缀），不依赖宿主页面的全局 box-sizing。
|
|
11
|
+
// 放在最前面，后面的显式声明按书写顺序覆盖它。
|
|
12
|
+
[class*='#{$broadcast-prefix-cls}-'] {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.#{$broadcast-prefix-cls} {
|
|
17
|
+
// 内容根：占满抽屉 body，纵向排布，列表区内部滚动，底部按钮常驻
|
|
18
|
+
// 固定排版：行高不再继承宿主页面的 line-height（1.5 为无单位数值，按各元素自身字号计算）
|
|
19
|
+
&-content-root {
|
|
20
|
+
position: relative;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
height: 100%;
|
|
24
|
+
min-height: 0;
|
|
25
|
+
line-height: 1.5;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Tab区域
|
|
29
|
+
&-tabs {
|
|
30
|
+
display: flex;
|
|
31
|
+
padding: 0 16px;
|
|
32
|
+
flex-shrink: 0;
|
|
33
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&-tab {
|
|
37
|
+
position: relative;
|
|
38
|
+
padding: 4px 4px;
|
|
39
|
+
margin-right: 16px;
|
|
40
|
+
font-size: 12px;
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
color: rgba(0, 0, 0, 0.45);
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
transition: color 0.2s;
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
|
|
47
|
+
&:hover {
|
|
48
|
+
color: rgba(0, 0, 0, 0.75);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&-tab-active,
|
|
53
|
+
&-tab-active:hover {
|
|
54
|
+
color: #4a9eff;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&-tab-active::after {
|
|
58
|
+
content: '';
|
|
59
|
+
position: absolute;
|
|
60
|
+
bottom: -1px;
|
|
61
|
+
left: 0;
|
|
62
|
+
right: 0;
|
|
63
|
+
height: 2px;
|
|
64
|
+
border-radius: 1px;
|
|
65
|
+
background: #4a9eff;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// 内容区域（语音列表滚动区）
|
|
69
|
+
&-content {
|
|
70
|
+
flex: 1;
|
|
71
|
+
overflow-y: auto;
|
|
72
|
+
padding: 8px 0;
|
|
73
|
+
min-height: 0;
|
|
74
|
+
|
|
75
|
+
&::-webkit-scrollbar {
|
|
76
|
+
width: 4px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&::-webkit-scrollbar-thumb {
|
|
80
|
+
background: rgba(0, 0, 0, 0.35);
|
|
81
|
+
border-radius: 2px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// 语音列表：扁平行 + 悬停高亮，与 AlarmMessage 的列表行一致
|
|
86
|
+
&-voice-list {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-voice-item {
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
padding: 10px 16px;
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
transition: background 0.2s;
|
|
97
|
+
|
|
98
|
+
&:hover {
|
|
99
|
+
background: rgba(0, 0, 0, 0.03);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&-voice-item-selected,
|
|
104
|
+
&-voice-item-selected:hover {
|
|
105
|
+
background: rgba(74, 158, 255, 0.08);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&-voice-icon {
|
|
109
|
+
width: 24px;
|
|
110
|
+
height: 24px;
|
|
111
|
+
margin-right: 10px;
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
color: rgba(0, 0, 0, 0.45);
|
|
117
|
+
background: rgba(0, 0, 0, 0.06);
|
|
118
|
+
border-radius: 50%;
|
|
119
|
+
transition:
|
|
120
|
+
background 0.2s,
|
|
121
|
+
color 0.2s;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&-voice-item-selected &-voice-icon {
|
|
125
|
+
background: #4a9eff;
|
|
126
|
+
color: #ffffff;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&-voice-text {
|
|
130
|
+
flex: 1;
|
|
131
|
+
min-width: 0;
|
|
132
|
+
font-size: 13px;
|
|
133
|
+
color: rgba(0, 0, 0, 0.85);
|
|
134
|
+
line-height: 20px;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
transition: color 0.2s;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&-voice-item-selected &-voice-text {
|
|
142
|
+
color: #4a9eff;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// 状态区：加载 / 空 / 错误，占满剩余高度并居中
|
|
146
|
+
&-loading,
|
|
147
|
+
&-empty {
|
|
148
|
+
display: none;
|
|
149
|
+
align-items: center;
|
|
150
|
+
justify-content: center;
|
|
151
|
+
flex: 1;
|
|
152
|
+
color: rgba(0, 0, 0, 0.4);
|
|
153
|
+
font-size: 12px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&-error {
|
|
157
|
+
display: none;
|
|
158
|
+
align-items: center;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
flex: 1;
|
|
161
|
+
padding: 0 16px;
|
|
162
|
+
color: #ff6b6b;
|
|
163
|
+
font-size: 12px;
|
|
164
|
+
text-align: center;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// 底部按钮
|
|
168
|
+
&-footer {
|
|
169
|
+
padding: 10px 12px;
|
|
170
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
171
|
+
flex-shrink: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// 按住说话按钮：先 `all: unset` 一次性清掉宿主页面对 <button> 的全局样式
|
|
175
|
+
// （padding、margin、font、line-height、text-transform、box-shadow、min-* 等），再重新声明本控件需要的样式。
|
|
176
|
+
// 类名写两遍把特异性提到 (0,2,0)，高于 `button` / `[type='button']` / `.xxx button` 这类常见宿主规则；
|
|
177
|
+
// 状态类（recording / disabled）同样写两遍并放在其后，保证覆盖（:hover / :active 为 (0,3,0)，状态下的 :hover / :active 也相应对齐）。
|
|
178
|
+
// 宿主若用 id 选择器或 !important 命中按钮，仍会压过这里，需要宿主自行避免。
|
|
179
|
+
&-talk-btn#{&}-talk-btn {
|
|
180
|
+
all: unset;
|
|
181
|
+
box-sizing: border-box;
|
|
182
|
+
// 与改动前一致：行内块 + 100% 宽，文字水平居中；不改成 flex，避免文字 span 变成块级 flex 项而改变行盒高度
|
|
183
|
+
display: inline-block;
|
|
184
|
+
width: 100%;
|
|
185
|
+
height: 32px;
|
|
186
|
+
// 单行文字在 32px 高度内垂直居中（行高等于高度）
|
|
187
|
+
line-height: 32px;
|
|
188
|
+
background: #4a9eff;
|
|
189
|
+
color: #ffffff;
|
|
190
|
+
border-radius: 4px;
|
|
191
|
+
font-size: 13px;
|
|
192
|
+
font-weight: 500;
|
|
193
|
+
text-align: center;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
transition:
|
|
196
|
+
background 0.2s,
|
|
197
|
+
transform 0.1s;
|
|
198
|
+
user-select: none;
|
|
199
|
+
|
|
200
|
+
&:hover {
|
|
201
|
+
background: #3d8ee6;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&:active {
|
|
205
|
+
transform: scale(0.99);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
// `all: unset` 同时去掉了浏览器默认的焦点环，键盘操作时补回
|
|
209
|
+
&:focus-visible {
|
|
210
|
+
outline: 2px solid rgba(74, 158, 255, 0.5);
|
|
211
|
+
outline-offset: 2px;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
// 带 `-webkit-` 前缀的属性单独写成一条规则，不能和 `all: unset` 放在同一条里：
|
|
216
|
+
// 构建时压缩工具会把同一条规则里的声明重新排序，带前缀的声明会被排到 `all: unset` 之前而被它重置
|
|
217
|
+
// （iOS / Android 上会出现点击高亮，Safari 里 user-select 失效）。
|
|
218
|
+
// `:where(button)` 不增加特异性，只是让选择器串与上一条不同，避免被合并回去；它写在上一条之后，同特异性下后写的生效。
|
|
219
|
+
&-talk-btn#{&}-talk-btn:where(button) {
|
|
220
|
+
-webkit-user-select: none;
|
|
221
|
+
-webkit-tap-highlight-color: transparent;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
&-talk-btn-recording#{&}-talk-btn-recording,
|
|
225
|
+
&-talk-btn-recording#{&}-talk-btn-recording:hover {
|
|
226
|
+
background: #ff6b6b;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&-talk-btn-disabled#{&}-talk-btn-disabled,
|
|
230
|
+
&-talk-btn-disabled#{&}-talk-btn-disabled:hover {
|
|
231
|
+
background: rgba(0, 0, 0, 0.12);
|
|
232
|
+
color: rgba(0, 0, 0, 0.25);
|
|
233
|
+
cursor: not-allowed;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&-talk-btn-disabled#{&}-talk-btn-disabled:active {
|
|
237
|
+
transform: none;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
// 轻提示：底部浮层，成功 / 失败共用
|
|
241
|
+
&-tip {
|
|
242
|
+
position: absolute;
|
|
243
|
+
left: 16px;
|
|
244
|
+
right: 16px;
|
|
245
|
+
bottom: 64px;
|
|
246
|
+
padding: 8px 12px;
|
|
247
|
+
border-radius: 6px;
|
|
248
|
+
background: rgba(0, 0, 0, 0.75);
|
|
249
|
+
color: #ffffff;
|
|
250
|
+
font-size: 12px;
|
|
251
|
+
line-height: 18px;
|
|
252
|
+
text-align: center;
|
|
253
|
+
opacity: 0;
|
|
254
|
+
transition: opacity 0.2s ease;
|
|
255
|
+
pointer-events: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
&-tip-visible {
|
|
259
|
+
opacity: 1;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&-tip-error {
|
|
263
|
+
background: rgba(255, 107, 107, 0.92);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// 抽屉实例定制：左右方向沿用原广播弹框的 400px 最大宽度
|
|
267
|
+
&-drawer {
|
|
268
|
+
--edrawer-max-width: 400px;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
// 录音提示内容：波形 + 倒计时，纵向居中排布
|
|
272
|
+
&-recording-content {
|
|
273
|
+
display: flex;
|
|
274
|
+
flex-direction: column;
|
|
275
|
+
align-items: center;
|
|
276
|
+
gap: 16px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
&-recording-wave {
|
|
280
|
+
display: block;
|
|
281
|
+
width: 80px;
|
|
282
|
+
height: 40px;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
&-recording-hint {
|
|
286
|
+
display: block;
|
|
287
|
+
padding: 0 12px;
|
|
288
|
+
font-size: 12px;
|
|
289
|
+
line-height: 20px;
|
|
290
|
+
color: rgba(255, 255, 255, 0.9);
|
|
291
|
+
text-align: center;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// 录音提示：内容区上的 Message 实例，根节点 .emessage 带 .ebroadcast-recording。
|
|
296
|
+
// 居中展示 120×120 的深色方块并隐藏类型图标；选择器以本控件类名限定，不影响宿主页面的其它 Message。
|
|
297
|
+
.emessage.#{$broadcast-prefix-cls}-recording {
|
|
298
|
+
justify-content: center;
|
|
299
|
+
padding: 0;
|
|
300
|
+
|
|
301
|
+
.emessage-item {
|
|
302
|
+
flex-direction: column;
|
|
303
|
+
justify-content: center;
|
|
304
|
+
width: 120px;
|
|
305
|
+
height: 120px;
|
|
306
|
+
max-width: none;
|
|
307
|
+
margin: 0;
|
|
308
|
+
padding: 0;
|
|
309
|
+
box-sizing: border-box;
|
|
310
|
+
border: none;
|
|
311
|
+
border-radius: 16px;
|
|
312
|
+
background: rgba(44, 44, 44, 0.95);
|
|
313
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.emessage-icon {
|
|
317
|
+
display: none;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.emessage-content {
|
|
321
|
+
flex: 0 0 auto;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.edrawer{bottom:0;box-sizing:border-box;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;text-align:left;top:0;z-index:var(--edrawer-z-index,100)}.edrawer-fixed{position:fixed}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;text-align:left;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;height:var(--edrawer-header-height,40px);justify-content:space-between;padding:var(--edrawer-header-padding,0 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,14px);font-weight:500;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edrawer-close{align-items:center;background:transparent;border:none;border-radius:4px;box-sizing:border-box;color:var(--edrawer-close-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;margin-left:12px;padding:0;transition:color .2s,background-color .2s;width:28px}.edrawer-close:hover{background-color:var(--edrawer-close-hover-bg,rgba(0,0,0,.06));color:var(--edrawer-close-hover-color,rgba(0,0,0,.88))}.edrawer-close svg{display:block;height:16px;width:16px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}.emessage,[class*=emessage-]{box-sizing:border-box}.emessage{align-items:center;bottom:0;display:flex;flex-direction:column;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:var(--emessage-z-index,1000)}.emessage-fixed{position:fixed}.emessage-top{justify-content:flex-start;padding:16px}.emessage-bottom{justify-content:flex-end;padding:16px}.emessage-left{align-items:flex-start}.emessage-left,.emessage-right{justify-content:flex-start;padding:16px}.emessage-right{align-items:flex-end}.emessage-item{align-items:center;animation:emessage-fade-in .2s ease;background:var(--emessage-bg,rgba(0,0,0,.7));border:1px solid var(--emessage-border-color,rgba(0,0,0,.06));border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.08);color:var(--emessage-color,#fff);display:flex;font-size:13px;gap:8px;line-height:18px;margin:4px 0;max-width:min(80%,420px);padding:5px 6px;pointer-events:auto}.emessage-left .emessage-item,.emessage-right .emessage-item{margin:0 0 8px;max-width:min(42vw,340px)}.emessage-icon{align-items:center;color:var(--emessage-icon-color,#4a9eff);display:inline-flex;flex:0 0 auto;font-size:16px;justify-content:center;line-height:1}.emessage-icon img,.emessage-icon svg{height:1em;margin:0;max-width:none;width:1em}.emessage-content{flex:1 1 auto;min-width:0;word-break:break-word}.emessage-close.emessage-close{all:unset;align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;justify-content:center;line-height:1;margin-left:4px;opacity:.75;padding:2px}.emessage-close.emessage-close:hover{opacity:1}.emessage-close.emessage-close:focus-visible{outline:2px solid currentColor;outline-offset:1px}.emessage-close.emessage-close svg{display:block;height:1em;margin:0;max-width:none;width:1em}.emessage-item-full{align-items:center;animation:none;background:var(--emessage-full-bg,rgba(0,0,0,.7));border:none;border-radius:0;bottom:0;box-shadow:none;display:flex;flex-direction:column;font-size:13px;gap:12px;height:auto;justify-content:center;left:0;margin:0;max-height:none;max-width:none;position:absolute;right:0;top:0;width:auto}.emessage-item-full .emessage-icon{font-size:28px}.emessage-item-full .emessage-content{flex:0 0 auto;text-align:center}.emessage-item-full .emessage-close{margin:0;position:absolute;right:16px;top:16px}.emessage-item-notification .emessage-close{margin:0;position:absolute;right:8px;top:6px}.emessage-item-info{--emessage-icon-color:#4a9eff;z-index:1}.emessage-item-success{--emessage-icon-color:#52c41a;z-index:1}.emessage-item-warn{--emessage-icon-color:#faad14;z-index:1}.emessage-item-error{--emessage-icon-color:#ff4d4f;z-index:1}.emessage-item-leave{animation:emessage-fade-out .2s ease forwards}.emessage-notifications{align-items:start;display:grid;grid-template-columns:minmax(0,1fr);max-height:calc(100% - 32px);pointer-events:auto;position:absolute;right:16px;top:16px;z-index:2}.emessage-notifications>.emessage-item-notification{align-self:start;animation:emessage-notification-enter .2s ease;box-shadow:0 2px 2px rgba(0,0,0,.08);grid-column:1;justify-self:end;margin:0;max-width:100%;padding-right:28px;pointer-events:auto;position:relative;transition:margin-top .2s ease;width:-moz-fit-content;width:fit-content}.emessage-notifications>.emessage-item-notification:first-child{grid-row:1}.emessage-notifications>.emessage-item-notification:nth-child(2){grid-row:2;margin-top:8px}.emessage-notifications>.emessage-item-notification:nth-child(3){grid-row:3;margin-top:8px}.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(2):nth-last-child(n+3),.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(3):nth-last-child(n+2),.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(n+4){grid-row:1}.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(2):nth-last-child(n+3){margin-top:2px}.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(3):nth-last-child(n+2),.emessage-notifications:not(:hover)>.emessage-item-notification:nth-child(n+4){margin-top:4px}.emessage-notifications:hover>.emessage-item-notification{grid-row:auto}.emessage-notifications:hover>.emessage-item-notification:nth-child(n+2){margin-top:8px}.emessage-notifications>.emessage-item-notification.emessage-item-leave{animation:emessage-notification-leave .2s ease forwards}@keyframes emessage-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.emessage-left .emessage-item:not(.emessage-item-notification),.emessage-right .emessage-item:not(.emessage-item-notification){animation:emessage-fade-in-x .2s ease}.emessage-left .emessage-item-leave:not(.emessage-item-notification),.emessage-right .emessage-item-leave:not(.emessage-item-notification){animation:emessage-fade-out-x .2s ease forwards}@keyframes emessage-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@keyframes emessage-fade-in-x{0%{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}@keyframes emessage-notification-enter{0%{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}@keyframes emessage-notification-leave{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(16px)}}@keyframes emessage-fade-out-x{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(8px)}}[class*=ebroadcast-]{box-sizing:border-box}.ebroadcast-content-root{display:flex;flex-direction:column;height:100%;line-height:1.5;min-height:0;position:relative}.ebroadcast-tabs{border-bottom:1px solid rgba(0,0,0,.06);display:flex;flex-shrink:0;padding:0 16px}.ebroadcast-tab{color:rgba(0,0,0,.45);cursor:pointer;font-size:12px;font-weight:500;margin-right:16px;padding:4px;position:relative;transition:color .2s;white-space:nowrap}.ebroadcast-tab:hover{color:rgba(0,0,0,.75)}.ebroadcast-tab-active,.ebroadcast-tab-active:hover{color:#4a9eff}.ebroadcast-tab-active:after{background:#4a9eff;border-radius:1px;bottom:-1px;content:"";height:2px;left:0;position:absolute;right:0}.ebroadcast-content{flex:1;min-height:0;overflow-y:auto;padding:8px 0}.ebroadcast-content::-webkit-scrollbar{width:4px}.ebroadcast-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.35);border-radius:2px}.ebroadcast-voice-list{display:flex;flex-direction:column}.ebroadcast-voice-item{align-items:center;cursor:pointer;display:flex;padding:10px 16px;transition:background .2s}.ebroadcast-voice-item:hover{background:rgba(0,0,0,.03)}.ebroadcast-voice-item-selected,.ebroadcast-voice-item-selected:hover{background:rgba(74,158,255,.08)}.ebroadcast-voice-icon{align-items:center;background:rgba(0,0,0,.06);border-radius:50%;color:rgba(0,0,0,.45);display:flex;flex-shrink:0;height:24px;justify-content:center;margin-right:10px;transition:background .2s,color .2s;width:24px}.ebroadcast-voice-item-selected .ebroadcast-voice-icon{background:#4a9eff;color:#fff}.ebroadcast-voice-text{color:rgba(0,0,0,.85);flex:1;font-size:13px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .2s;white-space:nowrap}.ebroadcast-voice-item-selected .ebroadcast-voice-text{color:#4a9eff}.ebroadcast-empty,.ebroadcast-loading{color:rgba(0,0,0,.4)}.ebroadcast-empty,.ebroadcast-error,.ebroadcast-loading{align-items:center;display:none;flex:1;font-size:12px;justify-content:center}.ebroadcast-error{color:#ff6b6b;padding:0 16px;text-align:center}.ebroadcast-footer{border-top:1px solid rgba(0,0,0,.08);flex-shrink:0;padding:10px 12px}.ebroadcast-talk-btn.ebroadcast-talk-btn{all:unset;background:#4a9eff;border-radius:4px;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:13px;font-weight:500;height:32px;line-height:32px;text-align:center;transition:background .2s,transform .1s;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ebroadcast-talk-btn.ebroadcast-talk-btn:hover{background:#3d8ee6}.ebroadcast-talk-btn.ebroadcast-talk-btn:active{transform:scale(.99)}.ebroadcast-talk-btn.ebroadcast-talk-btn:focus-visible{outline:2px solid rgba(74,158,255,.5);outline-offset:2px}.ebroadcast-talk-btn.ebroadcast-talk-btn:where(button){-webkit-tap-highlight-color:transparent;-webkit-user-select:none}.ebroadcast-talk-btn-recording.ebroadcast-talk-btn-recording,.ebroadcast-talk-btn-recording.ebroadcast-talk-btn-recording:hover{background:#ff6b6b}.ebroadcast-talk-btn-disabled.ebroadcast-talk-btn-disabled,.ebroadcast-talk-btn-disabled.ebroadcast-talk-btn-disabled:hover{background:rgba(0,0,0,.12);color:rgba(0,0,0,.25);cursor:not-allowed}.ebroadcast-talk-btn-disabled.ebroadcast-talk-btn-disabled:active{transform:none}.ebroadcast-tip{background:rgba(0,0,0,.75);border-radius:6px;bottom:64px;color:#fff;font-size:12px;left:16px;line-height:18px;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;right:16px;text-align:center;transition:opacity .2s ease}.ebroadcast-tip-visible{opacity:1}.ebroadcast-tip-error{background:hsla(0,100%,71%,.92)}.ebroadcast-drawer{--edrawer-max-width:400px}.ebroadcast-recording-content{align-items:center;display:flex;flex-direction:column;gap:16px}.ebroadcast-recording-wave{display:block;height:40px;width:80px}.ebroadcast-recording-hint{color:hsla(0,0%,100%,.9);display:block;font-size:12px;line-height:20px;padding:0 12px;text-align:center}.emessage.ebroadcast-recording{justify-content:center;padding:0}.emessage.ebroadcast-recording .emessage-item{background:rgba(44,44,44,.95);border:none;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.3);box-sizing:border-box;flex-direction:column;height:120px;justify-content:center;margin:0;max-width:none;padding:0;width:120px}.emessage.ebroadcast-recording .emessage-icon{display:none}.emessage.ebroadcast-recording .emessage-content{flex:0 0 auto}
|