@mrrocket/sdk 0.14.0 → 0.16.0
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/CHANGELOG.md +10 -0
- package/README.md +45 -4
- package/dist/api-client.d.ts +67 -5
- package/dist/api-client.js +39 -8
- package/dist/api-client.js.map +1 -1
- package/dist/api.d.ts +4 -1
- package/dist/api.js +2 -1
- package/dist/api.js.map +1 -1
- package/dist/batch.d.ts +6 -4
- package/dist/batch.js +3 -3
- package/dist/batch.js.map +1 -1
- package/dist/browser/mrrocket-flows.js +2 -2
- package/dist/browser/mrrocket-forms.js +1 -1
- package/dist/browser/mrrocket-messenger.js +202 -46
- package/dist/browser/mrrocket-push.js +1 -1
- package/dist/browser/mrrocket-replay.js +3 -3
- package/dist/browser/mrrocket.js +1 -1
- package/dist/client.d.ts +10 -2
- package/dist/client.js +36 -15
- package/dist/client.js.map +1 -1
- package/dist/context.d.ts +5 -1
- package/dist/context.js.map +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/core.js.map +1 -1
- package/dist/errors.d.ts +5 -1
- package/dist/errors.js +8 -2
- package/dist/errors.js.map +1 -1
- package/dist/flows-ui.js +48 -1
- package/dist/flows-ui.js.map +1 -1
- package/dist/flows-web.d.ts +2 -0
- package/dist/flows-web.js +4 -1
- package/dist/flows-web.js.map +1 -1
- package/dist/flows.d.ts +61 -1
- package/dist/flows.js +64 -21
- package/dist/flows.js.map +1 -1
- package/dist/forms.d.ts +4 -0
- package/dist/forms.js +4 -1
- package/dist/forms.js.map +1 -1
- package/dist/identity.d.ts +42 -0
- package/dist/identity.js +24 -0
- package/dist/identity.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js.map +1 -1
- package/dist/messenger-ui.d.ts +21 -6
- package/dist/messenger-ui.js +334 -80
- package/dist/messenger-ui.js.map +1 -1
- package/dist/messenger.d.ts +11 -3
- package/dist/messenger.js +9 -5
- package/dist/messenger.js.map +1 -1
- package/dist/push-web.d.ts +2 -13
- package/dist/push-web.js +4 -2
- package/dist/push-web.js.map +1 -1
- package/dist/react-native/index.d.cts +162 -14
- package/dist/react-native/index.d.ts +162 -14
- package/dist/react-native/index.js +552 -207
- package/dist/react-native/index.js.map +1 -1
- package/dist/replay.d.ts +4 -1
- package/dist/replay.js +8 -2
- package/dist/replay.js.map +1 -1
- package/dist/server.d.ts +2 -0
- package/dist/server.js +2 -0
- package/dist/server.js.map +1 -1
- package/dist/styles-css.d.ts +1 -1
- package/dist/styles-css.js +200 -44
- package/dist/styles-css.js.map +1 -1
- package/dist/user-hash.d.ts +27 -0
- package/dist/user-hash.js +24 -0
- package/dist/user-hash.js.map +1 -0
- package/package.json +9 -1
package/dist/styles-css.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
// src/styles-css.ts
|
|
2
2
|
var STYLE_ID = "ckw-styles";
|
|
3
3
|
var CSS = `
|
|
4
|
-
.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);--ckw-raise:0 0 0 1px rgba(16,18,24,.05),0 1px 2px rgba(16,18,24,.05),0 6px 18px rgba(16,18,24,.06);--ckw-float:0 0 0 1px rgba(16,18,24,.06),0 18px 50px rgba(16,18,24,.2);
|
|
4
|
+
.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);--ckw-raise:0 0 0 1px rgba(16,18,24,.05),0 1px 2px rgba(16,18,24,.05),0 6px 18px rgba(16,18,24,.06);--ckw-float:0 0 0 1px rgba(16,18,24,.06),0 18px 50px rgba(16,18,24,.2);--ckw-soft:0 2px 8px rgba(16,18,24,.05),0 18px 48px rgba(16,18,24,.15);
|
|
5
5
|
font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}
|
|
6
|
-
.ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55)}
|
|
7
|
-
@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55)}}
|
|
6
|
+
.ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55);--ckw-soft:0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.55)}
|
|
7
|
+
@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55);--ckw-soft:0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.55)}}
|
|
8
8
|
.ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}
|
|
9
|
+
.ckw-root{--ckw-r-panel:22px;--ckw-r-bubble:18px;--ckw-r-tail:6px;--ckw-r-card:16px;--ckw-r-field:20px;--ckw-r-pill:999px;--ckw-r-fab:999px}
|
|
10
|
+
.ckw-root[data-corners=soft]{--ckw-r-panel:14px;--ckw-r-bubble:12px;--ckw-r-tail:4px;--ckw-r-card:10px;--ckw-r-field:10px;--ckw-r-pill:10px;--ckw-r-fab:18px}
|
|
11
|
+
.ckw-root[data-corners=square]{--ckw-r-panel:6px;--ckw-r-bubble:6px;--ckw-r-tail:2px;--ckw-r-card:4px;--ckw-r-field:4px;--ckw-r-pill:4px;--ckw-r-fab:8px}
|
|
12
|
+
.ckw-root[data-font=system]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
|
|
9
13
|
:where(.ckw-root) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
|
|
10
14
|
.ckw-root button{cursor:pointer}
|
|
11
15
|
.ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}
|
|
@@ -206,19 +210,21 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
|
|
|
206
210
|
.ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}
|
|
207
211
|
@media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}
|
|
208
212
|
/* Messenger (messenger-ui.ts). Motion: one soft ease (.32,.72,0,1) for things that arrive, a quick ease-in for things that leave. */
|
|
209
|
-
.ckw-msgr-fab{position:fixed;bottom:20px;height:52px;padding:0 20px 0 16px;gap:8px;font-size:15px;box-shadow:0 2px
|
|
210
|
-
.ckw-msgr-fab:hover{transform:scale(1.
|
|
213
|
+
.ckw-msgr-fab{position:fixed;bottom:20px;height:52px;padding:0 20px 0 16px;gap:8px;font-size:15px;box-shadow:0 1px 2px rgba(16,18,24,.1),0 6px 20px rgba(16,18,24,.16);transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .2s linear}
|
|
214
|
+
.ckw-msgr-fab:hover{transform:scale(1.05);box-shadow:0 1px 2px rgba(16,18,24,.1),0 10px 28px rgba(16,18,24,.2)}
|
|
211
215
|
.ckw-msgr-fab:active{transform:scale(.94);transition-duration:.1s}
|
|
212
|
-
.ckw-msgr-round{width:
|
|
216
|
+
.ckw-msgr-round{width:56px;height:56px;padding:0;justify-content:center}
|
|
217
|
+
.ckw-msgr-fab{border-radius:var(--ckw-r-fab)}
|
|
213
218
|
.ckw-msgr-fab-ic{position:relative;display:block;width:20px;height:20px;flex:none}
|
|
214
|
-
.ckw-msgr-round .ckw-msgr-fab-ic{width:
|
|
219
|
+
.ckw-msgr-round .ckw-msgr-fab-ic{width:27px;height:27px}
|
|
220
|
+
.ckw-msgr-fab .ckw-cut{stroke:var(--ckw-accent)}
|
|
215
221
|
.ckw-msgr-fab-i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .2s linear}
|
|
216
222
|
.ckw-msgr-fab-i .ckw-icon{width:auto;height:auto}
|
|
217
223
|
.ckw-msgr-fab-i[data-i=x],.ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=chat]{opacity:0;transform:rotate(-90deg) scale(.4)}
|
|
218
224
|
.ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=chat]{transform:rotate(90deg) scale(.4)}
|
|
219
225
|
.ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=x]{opacity:1;transform:none}
|
|
220
|
-
.ckw-msgr-fab-i[data-i=x] .ckw-icon{stroke-width:2}
|
|
221
|
-
.ckw-msgr-count{position:absolute;top:-2px;right:-2px;min-width:
|
|
226
|
+
.ckw-msgr-fab-i[data-i=x] .ckw-icon{stroke-width:2.2}
|
|
227
|
+
.ckw-msgr-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--ckw-bg);font-variant-numeric:tabular-nums;animation:ckw-badge .4s cubic-bezier(.34,1.56,.64,1)}
|
|
222
228
|
@keyframes ckw-badge{from{transform:scale(0)}}
|
|
223
229
|
.ckw-msgr-av{width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-size:15px;font-weight:700;line-height:1}
|
|
224
230
|
.ckw-msgr-av-sm{width:26px;height:26px;font-size:12px}
|
|
@@ -231,23 +237,24 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
|
|
|
231
237
|
.ckw-msgr-preview[data-out],.ckw-msgr-teaser[data-out]{animation:ckw-sink .16s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
|
|
232
238
|
@keyframes ckw-rise{from{opacity:0;transform:translateY(10px) scale(.94)}}
|
|
233
239
|
@keyframes ckw-sink{to{opacity:0;transform:translateY(6px) scale(.97)}}
|
|
234
|
-
.ckw-msgr-preview-card{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:
|
|
240
|
+
.ckw-msgr-preview-card{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 40px 14px 16px;border:0;border-radius:calc(var(--ckw-r-card) + 2px);background:var(--ckw-bg);box-shadow:var(--ckw-soft);transition:transform .2s cubic-bezier(.32,.72,0,1)}
|
|
235
241
|
.ckw-msgr-preview-card:hover{transform:translateY(-2px)}
|
|
236
242
|
.ckw-msgr-preview-main{display:flex;flex-direction:column;gap:2px;min-width:0}
|
|
237
243
|
.ckw-msgr-preview-who{font-size:12px;font-weight:600;color:var(--ckw-fg3)}
|
|
238
244
|
.ckw-msgr-preview-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
|
|
239
|
-
.ckw-msgr-preview-x{position:absolute;top
|
|
240
|
-
.ckw-msgr-
|
|
245
|
+
.ckw-msgr-preview-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--ckw-fg3);display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .12s linear,color .12s linear}
|
|
246
|
+
.ckw-msgr-preview-x:hover{background:var(--ckw-bg2);color:var(--ckw-fg)}
|
|
247
|
+
.ckw-msgr-teaser{width:340px;padding:16px;border-radius:calc(var(--ckw-r-card) + 4px);background:var(--ckw-bg);box-shadow:var(--ckw-soft);display:flex;flex-direction:column;gap:14px}
|
|
241
248
|
.ckw-msgr-teaser-top{display:flex;align-items:center;gap:12px}
|
|
242
249
|
.ckw-msgr-teaser-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
|
|
243
250
|
.ckw-msgr-teaser-t b{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
244
251
|
.ckw-msgr-teaser-row{display:flex;gap:8px}
|
|
245
|
-
.ckw-msgr-teaser-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:
|
|
252
|
+
.ckw-msgr-teaser-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:var(--ckw-r-pill);background:var(--ckw-bg3);color:var(--ckw-fg);font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s cubic-bezier(.32,.72,0,1),filter .1s linear}
|
|
246
253
|
.ckw-msgr-teaser-b[data-main]{flex:1.4;background:var(--ckw-accent);color:var(--ckw-accent-ink)}
|
|
247
254
|
.ckw-msgr-teaser-b:hover{filter:brightness(1.06)}
|
|
248
255
|
.ckw-msgr-teaser-b:active{transform:scale(.96)}
|
|
249
256
|
/* The panel */
|
|
250
|
-
.ckw-msgr{bottom:92px;width:400px;height:min(680px,calc(100vh - 112px));max-height:none;border:0;border-radius:
|
|
257
|
+
.ckw-msgr{bottom:92px;width:400px;height:min(680px,calc(100vh - 112px));max-height:none;border:0;border-radius:var(--ckw-r-panel);box-shadow:var(--ckw-soft);transform-origin:bottom right;animation:ckw-msgr-in .42s cubic-bezier(.32,.72,0,1);transition:width .36s cubic-bezier(.32,.72,0,1),height .36s cubic-bezier(.32,.72,0,1)}
|
|
251
258
|
.ckw-msgr[data-pos=bottom-left]{transform-origin:bottom left}
|
|
252
259
|
.ckw-msgr[data-wide]{width:680px;height:calc(100vh - 112px);max-height:860px}
|
|
253
260
|
.ckw-msgr[data-still]{animation:none}
|
|
@@ -262,14 +269,7 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
|
|
|
262
269
|
.ckw-msgr-ib:active{transform:scale(.9)}
|
|
263
270
|
.ckw-msgr-ib[aria-current=page]{color:var(--ckw-fg)}
|
|
264
271
|
.ckw-msgr-x{display:none}
|
|
265
|
-
.ckw-msgr-
|
|
266
|
-
.ckw-msgr-seg-mark{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--ckw-accent);box-shadow:0 1px 3px color-mix(in srgb,var(--ckw-accent) 40%,transparent);opacity:0;transition:transform .38s cubic-bezier(.32,.72,0,1),width .38s cubic-bezier(.32,.72,0,1),opacity .2s linear}
|
|
267
|
-
.ckw-msgr-seg-mark[data-on]{opacity:1}
|
|
268
|
-
.ckw-msgr-seg-mark[data-still]{transition:opacity .2s linear}
|
|
269
|
-
.ckw-msgr-seg-b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ckw-fg2);font-size:13.5px;font-weight:650;white-space:nowrap;transition:color .25s linear}
|
|
270
|
-
.ckw-msgr-seg-b:hover{color:var(--ckw-fg)}
|
|
271
|
-
.ckw-msgr-seg-b[aria-current=page]{color:var(--ckw-accent-ink)}
|
|
272
|
-
.ckw-msgr-count-tab{top:8px;right:4px;min-width:0;width:7px;height:7px;padding:0;font-size:0;line-height:0;box-shadow:0 0 0 2px var(--ckw-bg3)}
|
|
272
|
+
.ckw-msgr-count-tab{top:-1px;right:-3px;min-width:0;width:8px;height:8px;padding:0;font-size:0;line-height:0;box-shadow:0 0 0 2px var(--ckw-bg)}
|
|
273
273
|
.ckw-msgr-menu{position:absolute;z-index:3;top:52px;right:12px;min-width:200px;padding:6px;border-radius:14px;background:var(--ckw-bg);box-shadow:var(--ckw-float);display:flex;flex-direction:column;transform-origin:top right;animation:ckw-menu-in .2s cubic-bezier(.32,.72,0,1)}
|
|
274
274
|
.ckw-msgr-menu[data-out]{animation:ckw-menu-out .12s cubic-bezier(.4,0,1,1) forwards}
|
|
275
275
|
@keyframes ckw-menu-in{from{opacity:0;transform:translateY(-4px) scale(.94)}}
|
|
@@ -285,12 +285,14 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
|
|
|
285
285
|
.ckw-msgr-enter>:nth-child(n+4){animation-delay:.09s}
|
|
286
286
|
@keyframes ckw-view{from{opacity:0;transform:translateY(8px)}}
|
|
287
287
|
/* Home */
|
|
288
|
-
.ckw-msgr-hero{display:flex;flex-direction:column;gap:
|
|
288
|
+
.ckw-msgr-hero{display:flex;flex-direction:column;gap:6px;padding:10px 4px 8px}
|
|
289
289
|
.ckw-msgr-brand{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ckw-fg2);min-width:0}
|
|
290
290
|
.ckw-msgr-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
291
|
-
.ckw-msgr-hello{margin:
|
|
292
|
-
.ckw-msgr-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:
|
|
293
|
-
button.ckw-msgr-card:hover{
|
|
291
|
+
.ckw-msgr-hello{margin:14px 0 0;font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.12;text-wrap:balance;overflow-wrap:anywhere}
|
|
292
|
+
.ckw-msgr-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:var(--ckw-r-card);background:var(--ckw-bg2);transition:background-color .15s linear,box-shadow .15s linear,transform .25s cubic-bezier(.32,.72,0,1)}
|
|
293
|
+
button.ckw-msgr-card:hover{background:var(--ckw-bg3)}
|
|
294
|
+
.ckw-msgr-card-col .ckw-msgr-search{background:var(--ckw-bg)}
|
|
295
|
+
.ckw-msgr-card .ckw-msgr-art:hover{background:var(--ckw-bg3)}
|
|
294
296
|
button.ckw-msgr-card:active{transform:scale(.985)}
|
|
295
297
|
.ckw-msgr-card-col{flex-direction:column;align-items:stretch;gap:2px;padding:8px}
|
|
296
298
|
.ckw-msgr-card-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
|
|
@@ -307,7 +309,7 @@ button.ckw-msgr-card:hover .ckw-msgr-go{transform:translateX(2px)}
|
|
|
307
309
|
.ckw-msgr-card .ckw-msgr-go .ckw-icon{color:var(--ckw-accent)}
|
|
308
310
|
.ckw-msgr-badge{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ckw-danger);font-size:0}
|
|
309
311
|
/* Search */
|
|
310
|
-
.ckw-msgr-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid transparent;border-radius:
|
|
312
|
+
.ckw-msgr-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid transparent;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);color:var(--ckw-fg3);cursor:text;transition:border-color .15s linear,box-shadow .15s linear,background-color .15s linear}
|
|
311
313
|
.ckw-msgr-card-col .ckw-msgr-search{margin-bottom:4px;height:42px}
|
|
312
314
|
.ckw-msgr-search:focus-within{border-color:var(--ckw-accent);background:var(--ckw-bg);box-shadow:0 0 0 4px color-mix(in srgb,var(--ckw-accent) 16%,transparent);color:var(--ckw-accent)}
|
|
313
315
|
.ckw-msgr-search-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:14.5px;color:var(--ckw-fg)}
|
|
@@ -352,52 +354,206 @@ button.ckw-msgr-card:hover .ckw-msgr-go{transform:translateX(2px)}
|
|
|
352
354
|
.ckw-msgr-rate-b{display:flex;gap:6px}
|
|
353
355
|
.ckw-msgr-ask{margin-top:6px;width:100%;height:40px;border-radius:12px}
|
|
354
356
|
/* Chat */
|
|
355
|
-
.ckw-msgr-intro{display:flex;align-items:center;gap:12px;padding:6px 2px 14px;border-bottom:1px solid var(--ckw-line)}
|
|
356
|
-
.ckw-msgr-intro-av .ckw-msgr-av{width:44px;height:44px;font-size:18px;box-shadow:0 4px 12px color-mix(in srgb,var(--ckw-accent) 30%,transparent)}
|
|
357
|
-
.ckw-msgr-intro-t{display:flex;flex-direction:column;gap:3px;min-width:0}
|
|
358
|
-
.ckw-msgr-intro-t b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
359
357
|
.ckw-msgr-cite{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:7px 10px;border:1px solid var(--ckw-line);border-radius:12px;background:var(--ckw-bg);font-size:13px;text-align:left}
|
|
360
358
|
.ckw-msgr-cite .ckw-icon{color:var(--ckw-accent)}
|
|
361
359
|
.ckw-msgr-cite span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
362
|
-
.ckw-msgs{list-style:none;margin:
|
|
360
|
+
.ckw-msgs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
|
|
363
361
|
.ckw-msg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:82%;transform-origin:bottom left}
|
|
364
362
|
.ckw-msg[data-from=me]{align-self:flex-end;align-items:flex-end;transform-origin:bottom right}
|
|
365
363
|
.ckw-msg[data-new]{animation:ckw-bub .4s cubic-bezier(.32,.72,0,1)}
|
|
366
364
|
@keyframes ckw-bub{from{opacity:0;transform:translateY(10px) scale(.92)}}
|
|
367
|
-
.ckw-bubble{padding:10px 14px;border-radius:
|
|
368
|
-
.ckw-msg[data-from=me] .ckw-bubble{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:
|
|
365
|
+
.ckw-bubble{padding:10px 14px;border-radius:var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-tail);background:var(--ckw-bg3);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45;text-wrap:pretty}
|
|
366
|
+
.ckw-msg[data-from=me] .ckw-bubble{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-tail) var(--ckw-r-bubble)}
|
|
369
367
|
.ckw-msg[aria-busy=true] .ckw-bubble{opacity:.7}
|
|
370
368
|
.ckw-msg-meta{font-size:11px;color:var(--ckw-fg3);font-variant-numeric:tabular-nums;padding:0 6px}
|
|
371
369
|
.ckw-msgr-sugg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:12px}
|
|
372
|
-
.ckw-msgr-sugg-b{max-width:100%;padding:9px 14px;border:
|
|
373
|
-
.ckw-msgr-sugg-b:hover{
|
|
370
|
+
.ckw-msgr-sugg-b{max-width:100%;padding:9px 14px;border:0;border-radius:var(--ckw-r-card);background:var(--ckw-bg2);font-size:13.5px;text-align:left;color:var(--ckw-fg);transition:background-color .12s linear,color .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
|
|
371
|
+
.ckw-msgr-sugg-b:hover{background:var(--ckw-bg3);color:var(--ckw-accent)}
|
|
374
372
|
.ckw-msgr-sugg-b:active{transform:scale(.96)}
|
|
375
373
|
.ckw-msgr-enter .ckw-msgr-sugg-b{animation:ckw-view .34s cubic-bezier(.32,.72,0,1) backwards}
|
|
376
374
|
.ckw-msgr-enter .ckw-msgr-sugg-b:nth-child(2){animation-delay:.12s}
|
|
377
375
|
.ckw-msgr-enter .ckw-msgr-sugg-b:nth-child(3){animation-delay:.18s}
|
|
378
376
|
.ckw-msgr-note{margin:4px 0 0;text-align:center}
|
|
379
377
|
.ckw-msgr-compose{display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px;background:var(--ckw-bg);flex:none}
|
|
380
|
-
.ckw-msgr-compose .ckw-input{border:0;border-radius:
|
|
381
|
-
.ckw-msgr-
|
|
382
|
-
.ckw-msgr-box:
|
|
383
|
-
.ckw-msgr-
|
|
378
|
+
.ckw-msgr-compose .ckw-input{border:0;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);min-height:40px;padding:8px 16px}
|
|
379
|
+
.ckw-root .ckw-msgr-compose .ckw-input:focus-visible{outline:none;background:var(--ckw-bg3)}
|
|
380
|
+
.ckw-msgr-box{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 8px 8px 16px;border:0;border-radius:calc(var(--ckw-r-card) + 4px);background:var(--ckw-bg2);box-shadow:0 0 0 1px color-mix(in srgb,var(--ckw-line) 70%,transparent);cursor:text;transition:background-color .15s linear,box-shadow .15s linear}
|
|
381
|
+
.ckw-msgr-box:focus-within{background:var(--ckw-bg);box-shadow:0 0 0 1px var(--ckw-line),0 6px 18px rgba(16,18,24,.07)}
|
|
382
|
+
.ckw-msgr-tools{display:flex;align-items:center;gap:2px;margin-left:-8px}
|
|
383
|
+
.ckw-msgr-sp{flex:1}
|
|
384
|
+
.ckw-msgr-input{flex:1;min-width:0;min-height:24px;max-height:140px;padding:2px 8px 2px 0;border:0;border-radius:0;background:transparent;resize:none;field-sizing:content;font-size:14.5px}
|
|
384
385
|
.ckw-root .ckw-msgr-input:focus-visible{outline:none}
|
|
385
|
-
.ckw-msgr-box-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
|
386
|
-
.ckw-msgr-hint{font-size:11.5px;color:var(--ckw-fg3);opacity:0;transition:opacity .15s linear}
|
|
387
|
-
.ckw-msgr-box:focus-within .ckw-msgr-hint{opacity:1}
|
|
388
386
|
.ckw-msgr-send{width:32px;height:32px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);transition:background-color .15s linear,color .15s linear,transform .25s cubic-bezier(.34,1.56,.64,1)}
|
|
389
387
|
.ckw-msgr-send:not(:disabled):hover{transform:scale(1.08)}
|
|
390
388
|
.ckw-msgr-send:not(:disabled):active{transform:scale(.9)}
|
|
391
389
|
.ckw-msgr-send:disabled{background:var(--ckw-bg3);color:var(--ckw-fg3);cursor:default}
|
|
390
|
+
/* Files: the paperclip in the field, picked files above it, sent ones in the bubbles, dropping onto the panel */
|
|
391
|
+
.ckw-msgr-compose{position:relative}
|
|
392
|
+
.ckw-msgr-clip{width:32px;height:32px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:calc(var(--ckw-r-field) - 4px);background:transparent;color:var(--ckw-fg3);transition:color .12s linear,background-color .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
|
|
393
|
+
.ckw-msgr-clip:hover,.ckw-msgr-clip[aria-expanded=true]{color:var(--ckw-fg);background:color-mix(in srgb,var(--ckw-fg) 7%,transparent)}
|
|
394
|
+
.ckw-msgr-clip:active{transform:scale(.9)}
|
|
395
|
+
|
|
396
|
+
.ckw-msgr-amenu{top:auto;bottom:calc(100% - 4px);right:14px;transform-origin:bottom right}
|
|
397
|
+
.ckw-msgr-files{display:flex;flex-wrap:wrap;gap:10px;padding:6px 2px 0}
|
|
398
|
+
.ckw-msgr-file{position:relative;width:56px;height:56px;border-radius:calc(var(--ckw-r-card) - 4px);background:var(--ckw-bg2);box-shadow:0 0 0 1px var(--ckw-line)}
|
|
399
|
+
.ckw-msgr-file img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
|
|
400
|
+
.ckw-msgr-file[aria-busy=true] img,.ckw-msgr-file[aria-busy=true] .ckw-msgr-file-doc{opacity:.45}
|
|
401
|
+
.ckw-msgr-file[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--ckw-fg2);border-right-color:transparent;border-radius:50%;animation:ckw-spin .8s linear infinite}
|
|
402
|
+
@keyframes ckw-spin{to{transform:rotate(360deg)}}
|
|
403
|
+
.ckw-msgr-file-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;padding:4px;color:var(--ckw-fg2);font-size:10px;line-height:1.2}
|
|
404
|
+
.ckw-msgr-file-doc span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
405
|
+
.ckw-msgr-file-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--ckw-bg);border-radius:50%;background:var(--ckw-fg);color:var(--ckw-bg)}
|
|
406
|
+
.ckw-msgr-file-x .ckw-icon{width:10px;height:10px}
|
|
407
|
+
.ckw-msg-files{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
|
|
408
|
+
.ckw-msg[data-from=me] .ckw-msg-files{justify-content:flex-end}
|
|
409
|
+
.ckw-msg-img{display:block;overflow:hidden;border-radius:var(--ckw-r-bubble);background:var(--ckw-bg3);box-shadow:0 0 0 1px var(--ckw-line)}
|
|
410
|
+
.ckw-msg-img img{display:block;max-width:220px;max-height:200px;min-width:48px;min-height:48px;object-fit:cover}
|
|
411
|
+
.ckw-msg-files a.ckw-msgr-cite{color:var(--ckw-fg);text-decoration:none}
|
|
412
|
+
.ckw-msgr[data-drop]::after{content:"Drop to attach";position:absolute;inset:8px;z-index:5;display:flex;align-items:center;justify-content:center;border:2px dashed var(--ckw-accent);border-radius:calc(var(--ckw-r-panel) - 6px);background:color-mix(in srgb,var(--ckw-bg) 90%,transparent);color:var(--ckw-fg);font-size:15px;font-weight:600;pointer-events:none}
|
|
413
|
+
/* Powered by */
|
|
414
|
+
.ckw-msgr-powered{flex:none;display:block;padding:2px 0 10px;text-align:center;font-size:11.5px;color:var(--ckw-fg3);text-decoration:none;background:var(--ckw-bg)}
|
|
415
|
+
.ckw-msgr-powered b{font-weight:650;color:var(--ckw-fg2)}
|
|
416
|
+
.ckw-msgr-powered:hover b{color:var(--ckw-fg)}
|
|
417
|
+
.ckw-msgr-compose:has(+.ckw-msgr-powered){padding-bottom:8px}
|
|
392
418
|
.ckw-msgr-error{margin:0;font-size:12px;color:var(--ckw-danger)}
|
|
393
419
|
.ckw-msgr .ckw-input[aria-invalid=true]{box-shadow:0 0 0 1px var(--ckw-danger)}
|
|
420
|
+
/* Bar middle, tab bar, Home's glow and "Ask a question" (Featurebase-like) */
|
|
421
|
+
.ckw-msgr-mid{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;max-width:62%;flex:none}
|
|
422
|
+
.ckw-msgr-mid b{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
423
|
+
.ckw-msgr-mid-t{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
|
|
424
|
+
.ckw-msgr-mid-t .ckw-msgr-online{font-size:11.5px;white-space:nowrap}
|
|
425
|
+
.ckw-msgr-mid-t .ckw-msgr-online::before{width:6px;height:6px;box-shadow:none}
|
|
426
|
+
.ckw-msgr-tabs{flex:none;display:flex;padding:6px 10px 4px;background:var(--ckw-bg);box-shadow:0 -1px 0 color-mix(in srgb,var(--ckw-line) 60%,transparent)}
|
|
427
|
+
.ckw-msgr-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;border:0;border-radius:12px;background:none;color:var(--ckw-fg3);font-size:12px;font-weight:550;transition:color .15s linear}
|
|
428
|
+
.ckw-msgr-tab:hover{color:var(--ckw-fg2)}
|
|
429
|
+
.ckw-msgr-tab[aria-current=page]{color:var(--ckw-fg)}
|
|
430
|
+
.ckw-msgr-tab-ic{position:relative;display:block;width:22px;height:22px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
|
|
431
|
+
.ckw-msgr-tab:active .ckw-msgr-tab-ic{transform:scale(.88)}
|
|
432
|
+
.ckw-msgr-tab-ic>.ckw-icon{position:absolute;inset:0;transition:opacity .15s linear,transform .3s cubic-bezier(.34,1.56,.64,1)}
|
|
433
|
+
.ckw-msgr-tab-ic>.ckw-icon+.ckw-icon{opacity:0;transform:scale(.75)}
|
|
434
|
+
.ckw-msgr-tab[aria-current=page] .ckw-msgr-tab-ic>.ckw-icon:first-child{opacity:0}
|
|
435
|
+
.ckw-msgr-tab[aria-current=page] .ckw-msgr-tab-ic>.ckw-icon+.ckw-icon{opacity:1;transform:none}
|
|
436
|
+
.ckw-cut{stroke:var(--ckw-bg)}
|
|
437
|
+
.ckw-root:not([data-header=color]) .ckw-msgr[data-view=home] :is(.ckw-msgr-bar,.ckw-msgr-body){background:transparent}
|
|
438
|
+
.ckw-msgr-askq{display:flex;align-items:center;gap:8px;height:52px;margin:6px 0 4px;padding:0 7px 0 18px;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);box-shadow:0 0 0 1px color-mix(in srgb,var(--ckw-line) 70%,transparent);transition:background-color .15s linear,box-shadow .15s linear}
|
|
439
|
+
.ckw-msgr-askq:focus-within{background:var(--ckw-bg);box-shadow:0 0 0 1px var(--ckw-line),0 6px 18px rgba(16,18,24,.07)}
|
|
440
|
+
.ckw-msgr-askq-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:15px;color:var(--ckw-fg)}
|
|
441
|
+
.ckw-msgr-askq-in::placeholder{color:var(--ckw-fg3)}
|
|
442
|
+
.ckw-root .ckw-msgr-askq-in:focus-visible{outline:none}
|
|
443
|
+
.ckw-msgr-askq .ckw-msgr-send{width:38px;height:38px}
|
|
444
|
+
.ckw-root[data-header=color] .ckw-msgr-askq{background:var(--ckw-card);box-shadow:var(--ckw-raise)}
|
|
445
|
+
/* Home in the accent color (look: header "color"): the bar and the top in the accent, raised cards over its edge */
|
|
446
|
+
.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-bar{background:var(--ckw-accent);color:var(--ckw-accent-ink)}
|
|
447
|
+
.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib{color:color-mix(in srgb,var(--ckw-accent-ink) 80%,transparent)}
|
|
448
|
+
.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib:hover,.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib[aria-expanded=true]{background:color-mix(in srgb,var(--ckw-accent-ink) 14%,transparent);color:var(--ckw-accent-ink)}
|
|
449
|
+
.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-body,.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-powered{background:var(--ckw-bg2)}
|
|
450
|
+
.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-body{scrollbar-width:none}
|
|
451
|
+
.ckw-root[data-header=color] .ckw-msgr-hero{margin:-4px -16px 0;padding:14px 20px 64px;background:var(--ckw-accent);color:var(--ckw-accent-ink)}
|
|
452
|
+
.ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-brand,.ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-online{color:color-mix(in srgb,var(--ckw-accent-ink) 82%,transparent)}
|
|
453
|
+
.ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-av{background:var(--ckw-accent-ink);color:var(--ckw-accent)}
|
|
454
|
+
.ckw-root[data-header=color] .ckw-msgr-hero+*{margin-top:-58px}
|
|
455
|
+
.ckw-root[data-header=color] .ckw-msgr-card{background:var(--ckw-card);box-shadow:var(--ckw-raise)}
|
|
456
|
+
.ckw-root[data-header=color] button.ckw-msgr-card:hover{background:var(--ckw-card);transform:translateY(-1px)}
|
|
457
|
+
.ckw-root[data-header=color] .ckw-msgr-card-col .ckw-msgr-search{background:var(--ckw-bg2)}
|
|
458
|
+
.ckw-root[data-header=color] .ckw-msgr-card .ckw-msgr-art:hover{background:var(--ckw-bg2)}
|
|
459
|
+
/* Where it sits: a corner, the middle of the top or bottom edge, or the middle of a side; panel and cards open from the launcher */
|
|
460
|
+
.ckw-msgr-fab[data-pos$=left],.ckw-msgr[data-pos$=left],.ckw-msgr-preview[data-pos$=left],.ckw-msgr-teaser[data-pos$=left]{left:20px;right:auto}
|
|
461
|
+
.ckw-msgr-fab[data-pos$=right],.ckw-msgr[data-pos$=right],.ckw-msgr-preview[data-pos$=right],.ckw-msgr-teaser[data-pos$=right]{right:20px;left:auto}
|
|
462
|
+
.ckw-msgr-fab[data-pos$=center],.ckw-msgr[data-pos$=center],.ckw-msgr-preview[data-pos$=center],.ckw-msgr-teaser[data-pos$=center]{left:50%;right:auto;translate:-50% 0}
|
|
463
|
+
.ckw-msgr-fab[data-pos^=top]{top:20px;bottom:auto}
|
|
464
|
+
.ckw-msgr[data-pos^=top],.ckw-msgr-preview[data-pos^=top],.ckw-msgr-teaser[data-pos^=top]{top:92px;bottom:auto}
|
|
465
|
+
.ckw-msgr-fab[data-pos^=middle],.ckw-msgr[data-pos^=middle],.ckw-msgr-preview[data-pos^=middle],.ckw-msgr-teaser[data-pos^=middle]{top:50%;bottom:auto;translate:0 -50%}
|
|
466
|
+
.ckw-msgr[data-pos=middle-left],.ckw-msgr-preview[data-pos=middle-left],.ckw-msgr-teaser[data-pos=middle-left]{left:92px}
|
|
467
|
+
.ckw-msgr[data-pos=middle-right],.ckw-msgr-preview[data-pos=middle-right],.ckw-msgr-teaser[data-pos=middle-right]{right:92px}
|
|
468
|
+
.ckw-msgr[data-pos^=middle]{height:min(680px,calc(100vh - 40px))}
|
|
469
|
+
.ckw-msgr[data-pos=top-right],.ckw-msgr-preview[data-pos=top-right],.ckw-msgr-teaser[data-pos=top-right]{transform-origin:top right}
|
|
470
|
+
.ckw-msgr[data-pos=top-left],.ckw-msgr-preview[data-pos=top-left],.ckw-msgr-teaser[data-pos=top-left]{transform-origin:top left}
|
|
471
|
+
.ckw-msgr[data-pos=top-center],.ckw-msgr-preview[data-pos=top-center],.ckw-msgr-teaser[data-pos=top-center]{transform-origin:top center}
|
|
472
|
+
.ckw-msgr[data-pos=bottom-center],.ckw-msgr-preview[data-pos=bottom-center],.ckw-msgr-teaser[data-pos=bottom-center]{transform-origin:bottom center}
|
|
473
|
+
.ckw-msgr[data-pos=middle-left],.ckw-msgr-preview[data-pos=middle-left],.ckw-msgr-teaser[data-pos=middle-left]{transform-origin:center left}
|
|
474
|
+
.ckw-msgr[data-pos=middle-right],.ckw-msgr-preview[data-pos=middle-right],.ckw-msgr-teaser[data-pos=middle-right]{transform-origin:center right}
|
|
475
|
+
@media (max-width:520px){.ckw-root:not([data-contained]) .ckw-msgr{top:0;translate:none}.ckw-msgr-fab[data-pos$=left]{left:14px}.ckw-msgr-fab[data-pos$=right]{right:14px}.ckw-msgr-fab[data-pos^=top]{top:14px}.ckw-msgr-preview[data-pos^=top],.ckw-msgr-teaser[data-pos^=top]{top:84px}.ckw-msgr-preview[data-pos^=middle],.ckw-msgr-teaser[data-pos^=middle]{top:auto;bottom:20px;left:16px;right:16px;width:auto;translate:none}}
|
|
394
476
|
/* Inside MRRocket's preview: placed in its frame, not the page */
|
|
395
477
|
.ckw-root[data-contained]{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
|
396
478
|
.ckw-root[data-contained]>*{position:absolute;pointer-events:auto}
|
|
397
479
|
.ckw-root[data-contained] .ckw-msgr{height:min(680px,calc(100% - 112px));max-width:calc(100% - 40px)}
|
|
398
480
|
.ckw-root[data-contained] .ckw-msgr[data-wide]{height:calc(100% - 112px)}
|
|
481
|
+
.ckw-root[data-contained] .ckw-msgr[data-pos^=middle]{height:min(680px,calc(100% - 40px));max-width:calc(100% - 112px)}
|
|
482
|
+
.ckw-root[data-contained] .ckw-msgr-preview[data-pos^=middle],.ckw-root[data-contained] .ckw-msgr-teaser[data-pos^=middle]{max-width:calc(100% - 112px)}
|
|
399
483
|
@media (max-width:520px){.ckw-root:not([data-contained]) .ckw-msgr{width:100%;height:100dvh;bottom:0;border-radius:0;transform-origin:bottom center}.ckw-root:not([data-contained]) .ckw-msgr-x{display:flex}.ckw-msgr-preview,.ckw-msgr-teaser{bottom:84px}}
|
|
400
|
-
@media (prefers-reduced-motion:reduce){.ckw-msgr,.ckw-msgr[data-out],.ckw-msgr-preview,.ckw-msgr-teaser,.ckw-msgr-menu,.ckw-msgr-count,.ckw-msg[data-new],.ckw-msgr-enter>*,.ckw-msgr-enter .ckw-msgr-sugg-b{animation:none}.ckw-msgr-fab,.ckw-msgr-fab-i,.ckw-msgr-
|
|
484
|
+
@media (prefers-reduced-motion:reduce){.ckw-msgr,.ckw-msgr[data-out],.ckw-msgr-preview,.ckw-msgr-teaser,.ckw-msgr-menu,.ckw-msgr-count,.ckw-msg[data-new],.ckw-msgr-enter>*,.ckw-msgr-enter .ckw-msgr-sugg-b{animation:none}.ckw-msgr-fab,.ckw-msgr-fab-i,.ckw-msgr-tab-ic,.ckw-msgr-tab-ic>.ckw-icon,.ckw-msgr{transition:none}}
|
|
485
|
+
/* The messenger in HeroUI v3's look (heroui.com, its free components): a soft gray ground, white surfaces with a hairline
|
|
486
|
+
shadow, white fields, pill buttons and a pill tab switch, a 2px ring in the accent on focus. Its tokens (--hu-*) map onto
|
|
487
|
+
the widget's own, inside the messenger only, so the other widgets keep theirs. */
|
|
488
|
+
.ckw-root{--hu-bg:#fff;--hu-surface:#f4f4f5;--hu-default:#ececee;--hu-default-hover:#e4e4e7;--hu-segment:#fff;--hu-muted:#71717a;--hu-fg:#18181b;--hu-border:#e4e4e7;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 1px 2px rgba(0,0,0,.08),0 0 1px rgba(0,0,0,.1);--hu-overlay:0 0 0 1px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1)}
|
|
489
|
+
.ckw-root[data-theme=dark]{--hu-bg:#111113;--hu-surface:#1c1c1f;--hu-default:#26262a;--hu-default-hover:#2e2e33;--hu-segment:#3a3a40;--hu-muted:#a1a1aa;--hu-fg:#fafafa;--hu-border:#27272a;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 0 0 1px rgba(255,255,255,.06);--hu-overlay:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.55)}
|
|
490
|
+
@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--hu-bg:#111113;--hu-surface:#1c1c1f;--hu-default:#26262a;--hu-default-hover:#2e2e33;--hu-segment:#3a3a40;--hu-muted:#a1a1aa;--hu-fg:#fafafa;--hu-border:#27272a;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 0 0 1px rgba(255,255,255,.06);--hu-overlay:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.55)}}
|
|
491
|
+
.ckw-msgr,.ckw-msgr-preview,.ckw-msgr-teaser{--ckw-bg:var(--hu-bg);--ckw-bg2:var(--hu-surface);--ckw-bg3:var(--hu-default);--ckw-card:var(--hu-surface);--ckw-fg:var(--hu-fg);--ckw-fg2:var(--hu-muted);--ckw-fg3:var(--hu-muted);--ckw-line:var(--hu-border);--ckw-soft:var(--hu-overlay);--ckw-raise:var(--hu-shadow)}
|
|
492
|
+
.ckw-root .ckw-msgr-preview-card,.ckw-root .ckw-msgr-teaser{background:var(--hu-surface)}
|
|
493
|
+
.ckw-root .ckw-msgr-card,.ckw-root .ckw-msgr-sugg-b,.ckw-root .ckw-msgr-rate,.ckw-root .ckw-msgr-cite{background:var(--hu-surface);box-shadow:var(--hu-shadow);border:0}
|
|
494
|
+
.ckw-root button.ckw-msgr-card:hover{background:var(--hu-default)}
|
|
495
|
+
.ckw-root .ckw-msgr-card-col{padding:6px}
|
|
496
|
+
.ckw-root .ckw-msgr-card .ckw-msgr-art:hover,.ckw-root .ckw-msgr-hrow:hover{background:var(--hu-default)}
|
|
497
|
+
.ckw-root .ckw-msgr-hrow+.ckw-msgr-hrow{box-shadow:0 -1px 0 var(--hu-border)}
|
|
498
|
+
.ckw-root .ckw-msgr-search,.ckw-root .ckw-msgr-askq,.ckw-root .ckw-msgr-box,.ckw-root .ckw-msgr-compose .ckw-input{background:var(--hu-surface);border:0;box-shadow:var(--hu-shadow)}
|
|
499
|
+
.ckw-root .ckw-msgr-search:focus-within,.ckw-root .ckw-msgr-askq:focus-within,.ckw-root .ckw-msgr-box:focus-within,.ckw-root .ckw-msgr-compose .ckw-input:focus-visible{background:var(--hu-surface);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ckw-accent) 55%,transparent),0 0 0 5px color-mix(in srgb,var(--ckw-accent) 12%,transparent);color:var(--ckw-fg3)}
|
|
500
|
+
.ckw-root .ckw-msgr-askq{height:48px;border-radius:24px}
|
|
501
|
+
.ckw-root .ckw-msgr-box{border-radius:20px}
|
|
502
|
+
.ckw-root .ckw-msgr-send{border-radius:999px}
|
|
503
|
+
.ckw-root .ckw-msgr-send:disabled{background:var(--hu-default);color:var(--hu-muted)}
|
|
504
|
+
.ckw-root .ckw-msgr-send:not(:disabled):hover{transform:none;filter:brightness(1.08)}
|
|
505
|
+
.ckw-root .ckw-msgr-send:not(:disabled):active{transform:scale(.97)}
|
|
506
|
+
.ckw-root .ckw-bubble{background:var(--hu-surface);box-shadow:var(--hu-shadow)}
|
|
507
|
+
.ckw-root .ckw-msg[data-from=me] .ckw-bubble{box-shadow:none}
|
|
508
|
+
.ckw-root .ckw-msgr-av{background:color-mix(in srgb,var(--ckw-accent) 16%,var(--hu-surface));color:var(--ckw-accent);font-weight:600}
|
|
509
|
+
.ckw-root .ckw-msgr-ib:hover,.ckw-root .ckw-msgr-ib[aria-expanded=true]{background:var(--hu-default)}
|
|
510
|
+
.ckw-root .ckw-msgr-menu{background:var(--hu-surface);box-shadow:var(--hu-overlay);border-radius:16px}
|
|
511
|
+
.ckw-root .ckw-msgr-menu-i{border-radius:10px}
|
|
512
|
+
.ckw-root .ckw-msgr-menu-i:hover,.ckw-root .ckw-msgr-menu-i:focus-visible{background:var(--hu-default)}
|
|
513
|
+
.ckw-root .ckw-msgr .ckw-btn,.ckw-root .ckw-msgr-teaser-b{height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--hu-default);color:var(--hu-fg);font-size:14px;font-weight:500;box-shadow:none;transition:transform .25s cubic-bezier(.32,.72,0,1),background-color .1s linear}
|
|
514
|
+
.ckw-root .ckw-msgr .ckw-btn:hover,.ckw-root .ckw-msgr-teaser-b:hover{background:var(--hu-default-hover);filter:none}
|
|
515
|
+
.ckw-root .ckw-msgr .ckw-btn:active,.ckw-root .ckw-msgr-teaser-b:active{transform:scale(.97)}
|
|
516
|
+
.ckw-root .ckw-msgr .ckw-btn-primary,.ckw-root .ckw-msgr-teaser-b[data-main]{background:var(--ckw-accent);color:var(--ckw-accent-ink)}
|
|
517
|
+
.ckw-root .ckw-msgr .ckw-btn-primary:hover,.ckw-root .ckw-msgr-teaser-b[data-main]:hover{background:var(--ckw-accent);filter:brightness(1.08)}
|
|
518
|
+
.ckw-root .ckw-msgr-sugg-b{border-radius:999px}
|
|
519
|
+
.ckw-root .ckw-msgr-ask{height:40px;border-radius:999px}
|
|
520
|
+
/* Home like Featurebase: the product's icon top left, "Hi, Lukas \u{1F44B}" over the greeting in gray, a silk of the accent
|
|
521
|
+
with drifting dots behind the top right (.ckw-msgr-sky, also drawn by MRRocket's phone preview) */
|
|
522
|
+
.ckw-msgr-logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;margin-left:6px}
|
|
523
|
+
.ckw-msgr-logo img{width:28px;height:28px;border-radius:8px;object-fit:contain}
|
|
524
|
+
.ckw-root .ckw-msgr[data-view=home] .ckw-msgr-bar{padding-top:16px}
|
|
525
|
+
.ckw-root .ckw-msgr[data-view=home] .ckw-msgr-body{position:relative;z-index:1;gap:10px;padding-top:0}
|
|
526
|
+
.ckw-root .ckw-msgr-hero.ckw-msgr-hello{display:flex;flex-direction:column;gap:1px;margin:22px 0 10px;padding:0 4px;font-size:25px;font-weight:600;letter-spacing:-.028em;line-height:1.2;color:var(--hu-fg)}
|
|
527
|
+
.ckw-msgr-hello-sub{color:var(--hu-muted);font-weight:500}
|
|
528
|
+
.ckw-msgr-wave{display:inline-block;transform-origin:70% 75%;animation:ckw-wave 2.4s ease-in-out .6s 1 both}
|
|
529
|
+
@keyframes ckw-wave{0%,60%,100%{transform:none}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
|
|
530
|
+
.ckw-root .ckw-msgr[data-view=home] .ckw-msgr-askq{margin:0 0 6px}
|
|
531
|
+
.ckw-msgr-sky{position:absolute;z-index:0;top:0;left:0;right:0;height:250px;pointer-events:none;overflow:hidden;border-radius:inherit;-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 92%);mask-image:linear-gradient(to bottom,#000 25%,transparent 92%)}
|
|
532
|
+
.ckw-msgr-sky::before{content:"";position:absolute;top:-45%;right:-25%;width:115%;height:135%;background:radial-gradient(36% 40% at 62% 46%,color-mix(in srgb,var(--ckw-accent) 92%,#fff) 0%,transparent 70%),radial-gradient(32% 36% at 86% 24%,color-mix(in srgb,var(--ckw-glow2,var(--ckw-accent)) 70%,#fff) 0%,transparent 72%),radial-gradient(46% 30% at 36% 64%,color-mix(in srgb,var(--ckw-glow3,var(--ckw-glow2,var(--ckw-accent))) 50%,#fff) 0%,transparent 70%);filter:blur(20px);opacity:.75;animation:ckw-silk 16s cubic-bezier(.45,0,.55,1) infinite alternate}
|
|
533
|
+
@keyframes ckw-silk{to{transform:translate(-7%,5%) rotate(8deg) scale(1.08)}}
|
|
534
|
+
.ckw-msgr-sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--ckw-accent) 85%,#fff) .9px,transparent 1.4px);background-size:5px 5px;-webkit-mask-image:linear-gradient(110deg,transparent 0%,#000 18%,transparent 34%,#000 52%,transparent 70%),radial-gradient(70% 85% at 88% 12%,#000 15%,transparent 75%);-webkit-mask-size:220% 100%,100% 100%;-webkit-mask-repeat:repeat-x,no-repeat;-webkit-mask-composite:source-in;mask-image:linear-gradient(110deg,transparent 0%,#000 18%,transparent 34%,#000 52%,transparent 70%),radial-gradient(70% 85% at 88% 12%,#000 15%,transparent 75%);mask-size:220% 100%,100% 100%;mask-repeat:repeat-x,no-repeat;mask-composite:intersect;opacity:.6;animation:ckw-dots 11s linear infinite}
|
|
535
|
+
@keyframes ckw-dots{from{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}to{-webkit-mask-position:-220% 0,0 0;mask-position:-220% 0,0 0}}
|
|
536
|
+
.ckw-root[data-theme=dark] .ckw-msgr-sky::before{opacity:.4}
|
|
537
|
+
.ckw-root[data-theme=dark] .ckw-msgr-sky::after{opacity:.4}
|
|
538
|
+
@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-msgr-sky::before{opacity:.4}.ckw-root[data-theme=auto] .ckw-msgr-sky::after{opacity:.4}}
|
|
539
|
+
.ckw-root[data-header=color] .ckw-msgr-sky{display:none}
|
|
540
|
+
@media (prefers-reduced-motion:reduce){.ckw-msgr-sky::before,.ckw-msgr-sky::after,.ckw-msgr-wave{animation:none}}
|
|
541
|
+
/* Home's latest message: one quiet row, the small mark, the words, who and when */
|
|
542
|
+
.ckw-root .ckw-msgr-recent{padding:10px 12px;gap:0}
|
|
543
|
+
.ckw-root .ckw-msgr-recent .ckw-msgr-recent-row{gap:10px}
|
|
544
|
+
.ckw-root .ckw-msgr-recent .ckw-msgr-card-main{gap:1px}
|
|
545
|
+
.ckw-root .ckw-msgr-recent-text{font-size:13.5px;font-weight:500}
|
|
546
|
+
.ckw-root .ckw-msgr-recent .ckw-msgr-card-meta{font-size:11.5px}
|
|
547
|
+
/* The tab switch: HeroUI's Tabs, a gray pill with the current tab on a raised white one */
|
|
548
|
+
.ckw-root .ckw-msgr-tabs{position:relative;z-index:1;margin:2px 12px 8px;padding:4px;gap:0;border-radius:999px;background:var(--hu-surface);box-shadow:none}
|
|
549
|
+
.ckw-root .ckw-msgr-tab{flex-direction:row;justify-content:center;gap:7px;height:36px;padding:0 10px;border-radius:999px;color:var(--hu-muted);font-size:13.5px;font-weight:500;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease,opacity .15s ease}
|
|
550
|
+
.ckw-root .ckw-msgr-tab:not([aria-current=page]):hover{color:var(--hu-muted);opacity:.7}
|
|
551
|
+
.ckw-root .ckw-msgr-tab[aria-current=page]{background:var(--hu-segment);color:var(--hu-fg);box-shadow:var(--hu-lift)}
|
|
552
|
+
.ckw-root .ckw-msgr-tab-ic{width:18px;height:18px}
|
|
553
|
+
.ckw-root .ckw-msgr-tab .ckw-cut{stroke:var(--hu-segment)}
|
|
554
|
+
.ckw-root .ckw-msgr-count-tab{box-shadow:0 0 0 2px var(--hu-default)}
|
|
555
|
+
.ckw-root .ckw-msgr-tab[aria-current=page] .ckw-msgr-count-tab{box-shadow:0 0 0 2px var(--hu-segment)}
|
|
556
|
+
.ckw-root .ckw-msgr-powered{background:var(--hu-bg);padding-top:0}
|
|
401
557
|
/* Survey */
|
|
402
558
|
.ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}
|
|
403
559
|
@keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}
|