@livelayer/react 0.5.4 → 0.5.5
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.js +3 -3
- package/dist/index.mjs +991 -957
- package/dist/styles.css +59 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -200,6 +200,65 @@
|
|
|
200
200
|
pointer-events: none;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
+
/* ── Avatar variant ────────────────────────────────────────────────── */
|
|
204
|
+
/* When `avatarImageUrl` is supplied, the tab shows a circular avatar
|
|
205
|
+
photo + a tiny chevron pinned to the inward edge as the click
|
|
206
|
+
affordance. Same overall footprint as the chevron-only variant —
|
|
207
|
+
just a touch wider (44px vs 36px) so the photo reads as a real
|
|
208
|
+
circle. */
|
|
209
|
+
|
|
210
|
+
.ll-widget .ll-hidden--with-avatar {
|
|
211
|
+
width: 44px;
|
|
212
|
+
/* Shift to flex layout so chevron + avatar align side-by-side. */
|
|
213
|
+
display: flex;
|
|
214
|
+
align-items: center;
|
|
215
|
+
padding: 0 4px;
|
|
216
|
+
gap: 2px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.ll-widget .ll-hidden--with-avatar:hover {
|
|
220
|
+
width: 50px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* On the right edge, chevron sits on the LEFT (inward) side of the
|
|
224
|
+
tab pointing left. On the left edge, mirror it. */
|
|
225
|
+
.ll-widget .ll-hidden--with-avatar.ll-hidden--right {
|
|
226
|
+
/* chevron first, then avatar on the right (outermost) */
|
|
227
|
+
flex-direction: row;
|
|
228
|
+
}
|
|
229
|
+
.ll-widget .ll-hidden--with-avatar.ll-hidden--left {
|
|
230
|
+
flex-direction: row-reverse;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.ll-widget .ll-hidden__chevron--mini {
|
|
234
|
+
/* Smaller, semi-faded — affordance, not focus. */
|
|
235
|
+
width: 10px;
|
|
236
|
+
height: 10px;
|
|
237
|
+
stroke-width: 2.5;
|
|
238
|
+
opacity: 0.55;
|
|
239
|
+
flex-shrink: 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.ll-widget .ll-hidden__avatar {
|
|
243
|
+
width: 30px;
|
|
244
|
+
height: 30px;
|
|
245
|
+
border-radius: 50%;
|
|
246
|
+
object-fit: cover;
|
|
247
|
+
background: linear-gradient(180deg, #e8e4df 0%, #d4cfc8 100%);
|
|
248
|
+
flex-shrink: 0;
|
|
249
|
+
user-select: none;
|
|
250
|
+
-webkit-user-drag: none;
|
|
251
|
+
pointer-events: none;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.ll-widget .ll-hidden--with-avatar.ll-hidden--mobile {
|
|
255
|
+
width: 50px;
|
|
256
|
+
}
|
|
257
|
+
.ll-widget .ll-hidden--with-avatar.ll-hidden--mobile .ll-hidden__avatar {
|
|
258
|
+
width: 36px;
|
|
259
|
+
height: 36px;
|
|
260
|
+
}
|
|
261
|
+
|
|
203
262
|
.ll-widget .ll-hidden--speaking {
|
|
204
263
|
animation: ll-pulse 1.5s ease-in-out infinite;
|
|
205
264
|
}
|
package/package.json
CHANGED