@vanillaskyai/video 0.8.0 → 0.8.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/CHANGELOG.md +4 -0
- package/README.md +4 -0
- package/dist/assets/vanillasky-logo.svg +151 -0
- package/dist/react.js +381 -153
- package/docs/customization.md +11 -6
- package/docs/immersive-interface.md +87 -0
- package/docs/reference/design-system.html +115 -0
- package/package.json +1 -1
- package/starters/video-chat/index.html +2 -1
- package/starters/video-chat/package.json +1 -1
- package/styles/video-chat.css +650 -246
package/styles/video-chat.css
CHANGED
|
@@ -1,56 +1,47 @@
|
|
|
1
|
-
/*
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
* JSX contract: the outermost element uses class="vanillasky-video-chat" and
|
|
5
|
-
* carries data-theme and data-orientation. All other class names are internal.
|
|
6
|
-
*/
|
|
1
|
+
/* Scoped immersive VideoChat interface. Import this stylesheet once.
|
|
2
|
+
* All tokens, element rules and animation names belong to the component.
|
|
3
|
+
* Override --vs-chat-height / --vs-chat-min-height to fit an embedded host. */
|
|
7
4
|
.vanillasky-video-chat {
|
|
8
|
-
|
|
9
|
-
--vs-
|
|
10
|
-
--vs-fg
|
|
11
|
-
--vs-
|
|
12
|
-
--vs-surface-
|
|
13
|
-
--vs-surface-
|
|
14
|
-
--vs-surface-
|
|
15
|
-
--vs-surface-
|
|
16
|
-
--vs-
|
|
17
|
-
--vs-shadow-
|
|
18
|
-
--vs-
|
|
19
|
-
|
|
20
|
-
--vs-border:
|
|
21
|
-
--vs-border-strong:
|
|
22
|
-
--vs-accent: #
|
|
23
|
-
--vs-accent-deep: #
|
|
24
|
-
--vs-accent-fg: #
|
|
25
|
-
--vs-accent-ring:
|
|
5
|
+
color-scheme: dark;
|
|
6
|
+
--vs-bg: #080b16;
|
|
7
|
+
--vs-fg: #f8f8fc;
|
|
8
|
+
--vs-fg-muted: #bfc2cf;
|
|
9
|
+
--vs-surface-raised: rgb(255 255 255 / 6%);
|
|
10
|
+
--vs-surface-hover: rgb(255 255 255 / 10%);
|
|
11
|
+
--vs-surface-selected: rgb(199 204 244 / 15%);
|
|
12
|
+
--vs-surface-pop: rgb(23 26 40 / 82%);
|
|
13
|
+
--vs-surface-input: rgb(18 22 38 / 70%);
|
|
14
|
+
--vs-shadow-input: 0 12px 36px rgb(0 0 0 / 24%);
|
|
15
|
+
--vs-shadow-raised: inset 0 1px 0 rgb(255 255 255 / 6%);
|
|
16
|
+
--vs-on-media: #f8f8fc;
|
|
17
|
+
--vs-border: rgb(255 255 255 / 14%);
|
|
18
|
+
--vs-border-strong: rgb(255 255 255 / 25%);
|
|
19
|
+
--vs-accent: #c1c4e5;
|
|
20
|
+
--vs-accent-deep: #d5d7ef;
|
|
21
|
+
--vs-accent-fg: #171a2a;
|
|
22
|
+
--vs-accent-ring: rgb(193 196 229 / 50%);
|
|
26
23
|
--vs-voice: #FF3A71;
|
|
27
|
-
--vs-focus: #
|
|
28
|
-
--vs-focus-ring:
|
|
29
|
-
--vs-danger:
|
|
30
|
-
--vs-danger-surface:
|
|
24
|
+
--vs-focus: #c1c4e5;
|
|
25
|
+
--vs-focus-ring: rgb(193 196 229 / 85%);
|
|
26
|
+
--vs-danger: #ffb4ac;
|
|
27
|
+
--vs-danger-surface: rgb(189 66 62 / 20%);
|
|
31
28
|
--vs-text-caption: 0.75rem;
|
|
32
29
|
--vs-lead-caption: 1.33;
|
|
33
30
|
--vs-track-caption: 0;
|
|
34
|
-
|
|
35
31
|
--vs-text-footnote: 0.8125rem;
|
|
36
32
|
--vs-lead-footnote: 1.38;
|
|
37
33
|
--vs-track-footnote: -0.006em;
|
|
38
|
-
|
|
39
34
|
--vs-text-subhead: 0.9375rem;
|
|
40
35
|
--vs-lead-subhead: 1.33;
|
|
41
36
|
--vs-track-subhead: -0.016em;
|
|
42
|
-
|
|
43
37
|
--vs-text-body: 1.0625rem;
|
|
44
38
|
--vs-lead-body: 1.47;
|
|
45
39
|
--vs-track-body: -0.026em;
|
|
46
|
-
|
|
47
40
|
--vs-lead-headline: 1.29;
|
|
48
41
|
--vs-track-headline: -0.026em;
|
|
49
|
-
|
|
50
42
|
--vs-text-title3: 1.25rem;
|
|
51
43
|
--vs-lead-title3: 1.25;
|
|
52
44
|
--vs-track-title3: -0.023em;
|
|
53
|
-
|
|
54
45
|
--vs-text-display: clamp(1.75rem, 3.4vw, 2.75rem);
|
|
55
46
|
--vs-lead-display: 1.05;
|
|
56
47
|
--vs-track-display: 0.014em;
|
|
@@ -58,7 +49,7 @@
|
|
|
58
49
|
--vs-radius-lg: 1.25rem;
|
|
59
50
|
--vs-radius-pill: 999px;
|
|
60
51
|
--vs-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
61
|
-
--vs-shadow-pop: 0
|
|
52
|
+
--vs-shadow-pop: 0 24px 80px rgb(0 0 0 / 36%);
|
|
62
53
|
--vs-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
63
54
|
--vs-duration: 150ms;
|
|
64
55
|
--vs-duration-slow: 260ms;
|
|
@@ -68,108 +59,19 @@
|
|
|
68
59
|
--vs-touch: 2.75rem;
|
|
69
60
|
}
|
|
70
61
|
|
|
71
|
-
@media (prefers-color-scheme: dark) {
|
|
72
|
-
.vanillasky-video-chat:not([data-theme="light"]) {
|
|
73
|
-
--vs-bg: oklch(0.128 0.068 281);
|
|
74
|
-
--vs-fg: oklch(0.97 0.012 281);
|
|
75
|
-
--vs-fg-muted: oklch(0.72 0.035 281);
|
|
76
|
-
--vs-surface-raised: oklch(0.191 0.094 281);
|
|
77
|
-
--vs-surface-hover: oklch(0.25 0.09 281);
|
|
78
|
-
--vs-surface-selected: oklch(0.3 0.086 281);
|
|
79
|
-
--vs-surface-pop: oklch(0.175 0.085 281 / 94%);
|
|
80
|
-
--vs-surface-input: oklch(0.225 0.088 281);
|
|
81
|
-
--vs-shadow-input: 0 1px 2px oklch(0 0 0 / 20%), 0 6px 16px -12px oklch(0 0 0 / 40%);
|
|
82
|
-
--vs-shadow-raised: 0 1px 2px oklch(0 0 0 / 24%), 0 2px 6px -4px oklch(0 0 0 / 36%);
|
|
83
|
-
|
|
84
|
-
--vs-border: oklch(1 0 0 / 14%);
|
|
85
|
-
--vs-border-strong: oklch(1 0 0 / 24%);
|
|
86
|
-
--vs-accent: #FF3A71;
|
|
87
|
-
--vs-accent-deep: #FF006F;
|
|
88
|
-
--vs-accent-fg: #FFFFFF;
|
|
89
|
-
--vs-accent-ring: oklch(0.664 0.231 10.5 / 55%);
|
|
90
|
-
--vs-voice: #FF3A71;
|
|
91
|
-
--vs-focus: #FF3A71;
|
|
92
|
-
--vs-focus-ring: oklch(0.664 0.231 10.5 / 55%);
|
|
93
|
-
--vs-danger: oklch(0.75 0.16 32);
|
|
94
|
-
--vs-danger-surface: oklch(0.75 0.16 32 / 14%);
|
|
95
|
-
|
|
96
|
-
--vs-shadow-pop: 0 16px 48px -12px oklch(0 0 0 / 60%);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.vanillasky-video-chat[data-theme="dark"] {
|
|
101
|
-
--vs-bg: oklch(0.128 0.068 281);
|
|
102
|
-
--vs-fg: oklch(0.97 0.012 281);
|
|
103
|
-
--vs-fg-muted: oklch(0.72 0.035 281);
|
|
104
|
-
--vs-surface-raised: oklch(0.191 0.094 281);
|
|
105
|
-
--vs-surface-hover: oklch(0.25 0.09 281);
|
|
106
|
-
--vs-surface-selected: oklch(0.3 0.086 281);
|
|
107
|
-
--vs-surface-pop: oklch(0.175 0.085 281 / 94%);
|
|
108
|
-
--vs-surface-input: oklch(0.225 0.088 281);
|
|
109
|
-
--vs-shadow-input: 0 1px 2px oklch(0 0 0 / 20%), 0 6px 16px -12px oklch(0 0 0 / 40%);
|
|
110
|
-
--vs-shadow-raised: 0 1px 2px oklch(0 0 0 / 24%), 0 2px 6px -4px oklch(0 0 0 / 36%);
|
|
111
|
-
|
|
112
|
-
--vs-border: oklch(1 0 0 / 14%);
|
|
113
|
-
--vs-border-strong: oklch(1 0 0 / 24%);
|
|
114
|
-
--vs-accent: #FF3A71;
|
|
115
|
-
--vs-accent-deep: #FF006F;
|
|
116
|
-
--vs-accent-fg: #FFFFFF;
|
|
117
|
-
--vs-accent-ring: oklch(0.664 0.231 10.5 / 55%);
|
|
118
|
-
--vs-voice: #FF3A71;
|
|
119
|
-
--vs-focus: #FF3A71;
|
|
120
|
-
--vs-focus-ring: oklch(0.664 0.231 10.5 / 55%);
|
|
121
|
-
--vs-danger: oklch(0.75 0.16 32);
|
|
122
|
-
|
|
123
|
-
--vs-shadow-pop: 0 16px 48px -12px oklch(0 0 0 / 60%);
|
|
124
|
-
}
|
|
125
62
|
@media (prefers-contrast: more) {
|
|
126
63
|
.vanillasky-video-chat {
|
|
127
|
-
--vs-fg-muted:
|
|
128
|
-
--vs-border:
|
|
129
|
-
--vs-border-strong:
|
|
130
|
-
--vs-
|
|
131
|
-
--vs-
|
|
132
|
-
--vs-focus: #
|
|
133
|
-
--vs-focus-ring: oklch(0.45 0.13 244 / 70%);
|
|
134
|
-
--vs-danger: oklch(0.34 0.15 32);
|
|
135
|
-
--vs-shadow-input: 0 0 0 1px oklch(0.21 0.05 281 / 35%);
|
|
136
|
-
--vs-shadow-raised: 0 0 0 1px oklch(0.21 0.05 281 / 28%);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.vanillasky-video-chat[data-theme="dark"] {
|
|
140
|
-
--vs-fg-muted: oklch(0.88 0.02 281);
|
|
141
|
-
--vs-border: oklch(1 0 0 / 42%);
|
|
142
|
-
--vs-border-strong: oklch(1 0 0 / 70%);
|
|
143
|
-
--vs-accent: #FF7CA1;
|
|
144
|
-
--vs-accent-deep: #FF3A71;
|
|
145
|
-
--vs-accent-fg: #10073C;
|
|
146
|
-
--vs-focus: #FF7CA1;
|
|
147
|
-
--vs-focus-ring: oklch(0.78 0.16 10 / 75%);
|
|
148
|
-
--vs-danger: oklch(0.86 0.13 32);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
|
|
153
|
-
.vanillasky-video-chat:not([data-theme="light"]) {
|
|
154
|
-
--vs-fg-muted: oklch(0.88 0.02 281);
|
|
155
|
-
--vs-border: oklch(1 0 0 / 42%);
|
|
156
|
-
--vs-border-strong: oklch(1 0 0 / 70%);
|
|
157
|
-
--vs-accent: #FF7CA1;
|
|
158
|
-
--vs-accent-deep: #FF3A71;
|
|
159
|
-
--vs-accent-fg: #10073C;
|
|
160
|
-
--vs-focus: #FF7CA1;
|
|
161
|
-
--vs-focus-ring: oklch(0.78 0.16 10 / 75%);
|
|
162
|
-
--vs-danger: oklch(0.86 0.13 32);
|
|
64
|
+
--vs-fg-muted: #e4e5ef;
|
|
65
|
+
--vs-border: rgb(255 255 255 / 45%);
|
|
66
|
+
--vs-border-strong: rgb(255 255 255 / 70%);
|
|
67
|
+
--vs-surface-pop: #171a28;
|
|
68
|
+
--vs-surface-input: #121626;
|
|
69
|
+
--vs-focus-ring: #e4e5ef;
|
|
163
70
|
}
|
|
164
71
|
}
|
|
165
72
|
|
|
166
|
-
|
|
167
73
|
.vanillasky-video-chat, .vanillasky-video-chat * { box-sizing: border-box; }
|
|
168
74
|
|
|
169
|
-
.vanillasky-video-chat { color-scheme: light dark; }
|
|
170
|
-
.vanillasky-video-chat[data-theme="light"] { color-scheme: light; }
|
|
171
|
-
.vanillasky-video-chat[data-theme="dark"] { color-scheme: dark; }
|
|
172
|
-
|
|
173
75
|
.vanillasky-video-chat {
|
|
174
76
|
margin: 0;
|
|
175
77
|
background: var(--vs-bg);
|
|
@@ -179,6 +81,7 @@
|
|
|
179
81
|
}
|
|
180
82
|
|
|
181
83
|
.vanillasky-video-chat .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
84
|
+
|
|
182
85
|
.vanillasky-video-chat .error {
|
|
183
86
|
display: flex;
|
|
184
87
|
align-items: flex-start;
|
|
@@ -192,8 +95,11 @@
|
|
|
192
95
|
line-height: var(--vs-lead-footnote);
|
|
193
96
|
letter-spacing: var(--vs-track-footnote);
|
|
194
97
|
}
|
|
98
|
+
|
|
195
99
|
.vanillasky-video-chat .error svg { flex: 0 0 auto; margin-top: 0.05rem; }
|
|
100
|
+
|
|
196
101
|
.vanillasky-video-chat .error span { min-width: 0; }
|
|
102
|
+
|
|
197
103
|
.vanillasky-video-chat {
|
|
198
104
|
--vs-side: 1rem;
|
|
199
105
|
--vs-frame: min(72rem, 100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 16 / 9);
|
|
@@ -203,6 +109,7 @@
|
|
|
203
109
|
height: 100dvh;
|
|
204
110
|
overflow: hidden;
|
|
205
111
|
}
|
|
112
|
+
|
|
206
113
|
.vanillasky-video-chat :where(button, [href], input, select, textarea, [tabindex]):focus-visible {
|
|
207
114
|
outline: 2px solid var(--vs-focus-ring);
|
|
208
115
|
outline-offset: 2px;
|
|
@@ -219,6 +126,7 @@
|
|
|
219
126
|
margin: 0 auto;
|
|
220
127
|
padding: max(0.6rem, env(safe-area-inset-top)) 0 0.5rem;
|
|
221
128
|
}
|
|
129
|
+
|
|
222
130
|
.vanillasky-video-chat .group { display: flex; align-items: center; gap: 0.5rem; }
|
|
223
131
|
|
|
224
132
|
.vanillasky-video-chat .round {
|
|
@@ -233,7 +141,9 @@
|
|
|
233
141
|
cursor: pointer;
|
|
234
142
|
transition: background-color var(--vs-duration) ease, transform var(--vs-duration) ease;
|
|
235
143
|
}
|
|
144
|
+
|
|
236
145
|
.vanillasky-video-chat .round:hover { background: var(--vs-surface-hover); }
|
|
146
|
+
|
|
237
147
|
.vanillasky-video-chat .round:active { transform: scale(0.95); }
|
|
238
148
|
|
|
239
149
|
.vanillasky-video-chat .pill {
|
|
@@ -251,6 +161,7 @@
|
|
|
251
161
|
cursor: pointer;
|
|
252
162
|
transition: background-color var(--vs-duration) ease;
|
|
253
163
|
}
|
|
164
|
+
|
|
254
165
|
.vanillasky-video-chat .pill:hover { background: var(--vs-surface-hover); }
|
|
255
166
|
|
|
256
167
|
.vanillasky-video-chat .stage-area {
|
|
@@ -260,6 +171,7 @@
|
|
|
260
171
|
place-items: center;
|
|
261
172
|
padding: 1.5rem var(--vs-side) 0;
|
|
262
173
|
}
|
|
174
|
+
|
|
263
175
|
.vanillasky-video-chat .stage {
|
|
264
176
|
position: relative;
|
|
265
177
|
aspect-ratio: 16 / 9;
|
|
@@ -268,28 +180,29 @@
|
|
|
268
180
|
border-radius: var(--vs-radius-lg);
|
|
269
181
|
container-type: size;
|
|
270
182
|
}
|
|
183
|
+
|
|
271
184
|
.vanillasky-video-chat[data-orientation="portrait"] { --vs-frame: min(100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 9 / 16); }
|
|
185
|
+
|
|
272
186
|
.vanillasky-video-chat[data-orientation="portrait"] .stage { aspect-ratio: 9 / 16; }
|
|
187
|
+
|
|
273
188
|
@media (min-width: 900px) { .vanillasky-video-chat .stage { border: 1px solid var(--vs-border); } }
|
|
189
|
+
|
|
274
190
|
.vanillasky-video-chat .stage > * { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; }
|
|
191
|
+
|
|
275
192
|
.vanillasky-video-chat .stage :where(video, canvas, img) { max-width: 100%; max-height: 100%; object-fit: contain; }
|
|
193
|
+
|
|
276
194
|
.vanillasky-video-chat .ground {
|
|
277
195
|
position: absolute;
|
|
278
196
|
inset: -30%;
|
|
279
197
|
background: radial-gradient(closest-side, oklch(1 0 0 / 28%), transparent 70%);
|
|
280
198
|
animation: vanillasky-video-chat-drift 9s ease-in-out infinite alternate;
|
|
281
199
|
}
|
|
282
|
-
|
|
283
|
-
position: absolute;
|
|
284
|
-
inset: 0;
|
|
285
|
-
background:
|
|
286
|
-
radial-gradient(circle at center, oklch(0.12 0.04 265 / 8%) 0%, oklch(0.12 0.04 265 / 42%) 100%),
|
|
287
|
-
linear-gradient(0deg, oklch(0.12 0.04 265 / 24%), oklch(0.12 0.04 265 / 24%));
|
|
288
|
-
}
|
|
200
|
+
|
|
289
201
|
@keyframes vanillasky-video-chat-drift {
|
|
290
202
|
from { transform: translate3d(-12%, -8%, 0) scale(1); }
|
|
291
203
|
to { transform: translate3d(14%, 10%, 0) scale(1.25); }
|
|
292
204
|
}
|
|
205
|
+
|
|
293
206
|
.vanillasky-video-chat .asked {
|
|
294
207
|
margin: 0 auto;
|
|
295
208
|
padding: 0 1.5rem;
|
|
@@ -300,6 +213,7 @@
|
|
|
300
213
|
text-align: center;
|
|
301
214
|
color: var(--vs-on-media);
|
|
302
215
|
}
|
|
216
|
+
|
|
303
217
|
.vanillasky-video-chat .asked-prompt {
|
|
304
218
|
margin: 0;
|
|
305
219
|
max-width: 26ch;
|
|
@@ -310,6 +224,7 @@
|
|
|
310
224
|
text-wrap: balance;
|
|
311
225
|
animation: vanillasky-video-chat-step-in 620ms ease both;
|
|
312
226
|
}
|
|
227
|
+
|
|
313
228
|
.vanillasky-video-chat .asked-step {
|
|
314
229
|
margin: 0;
|
|
315
230
|
font-size: var(--vs-text-subhead);
|
|
@@ -323,12 +238,16 @@
|
|
|
323
238
|
color: transparent;
|
|
324
239
|
animation: vanillasky-video-chat-sweep 2.4s linear infinite, vanillasky-video-chat-step-in 520ms ease both;
|
|
325
240
|
}
|
|
241
|
+
|
|
326
242
|
@keyframes vanillasky-video-chat-step-in {
|
|
327
243
|
from { opacity: 0; transform: translateY(6px); }
|
|
328
244
|
to { opacity: 1; transform: none; }
|
|
329
245
|
}
|
|
246
|
+
|
|
330
247
|
.vanillasky-video-chat .welcome { position: absolute; inset: 0; overflow: hidden; }
|
|
248
|
+
|
|
331
249
|
.vanillasky-video-chat .frame-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
250
|
+
|
|
332
251
|
.vanillasky-video-chat .welcome-wash {
|
|
333
252
|
position: absolute;
|
|
334
253
|
inset: 0;
|
|
@@ -348,7 +267,6 @@
|
|
|
348
267
|
color: oklch(1 0 0);
|
|
349
268
|
}
|
|
350
269
|
|
|
351
|
-
|
|
352
270
|
.vanillasky-video-chat .welcome-title {
|
|
353
271
|
margin: 0;
|
|
354
272
|
font-size: clamp(1.6rem, 5.2cqw, 3.4rem);
|
|
@@ -357,8 +275,8 @@
|
|
|
357
275
|
font-weight: 600;
|
|
358
276
|
text-wrap: balance;
|
|
359
277
|
}
|
|
360
|
-
.vanillasky-video-chat .welcome-title em { font-style: normal; color: oklch(0.8 0.11 268); }
|
|
361
278
|
|
|
279
|
+
.vanillasky-video-chat .welcome-title em { font-style: normal; color: oklch(0.8 0.11 268); }
|
|
362
280
|
|
|
363
281
|
.vanillasky-video-chat .cards {
|
|
364
282
|
display: flex;
|
|
@@ -371,8 +289,11 @@
|
|
|
371
289
|
overflow-y: visible;
|
|
372
290
|
scrollbar-width: none;
|
|
373
291
|
}
|
|
292
|
+
|
|
374
293
|
.vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
|
|
294
|
+
|
|
375
295
|
.vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
|
|
296
|
+
|
|
376
297
|
.vanillasky-video-chat .cards button {
|
|
377
298
|
position: relative;
|
|
378
299
|
display: block;
|
|
@@ -393,6 +314,7 @@
|
|
|
393
314
|
transition: transform var(--vs-duration) var(--vs-ease), box-shadow var(--vs-duration) ease,
|
|
394
315
|
outline-color var(--vs-duration) ease;
|
|
395
316
|
}
|
|
317
|
+
|
|
396
318
|
.vanillasky-video-chat .cards button[data-active] {
|
|
397
319
|
outline-color: oklch(0.84 0.1 268);
|
|
398
320
|
box-shadow:
|
|
@@ -400,16 +322,20 @@
|
|
|
400
322
|
0 2px 6px -2px oklch(0 0 0 / 40%),
|
|
401
323
|
0 14px 32px -10px oklch(0 0 0 / 60%);
|
|
402
324
|
}
|
|
325
|
+
|
|
403
326
|
.vanillasky-video-chat .cards button:hover {
|
|
404
327
|
transform: translateY(-3px);
|
|
405
328
|
box-shadow: 0 4px 10px -2px oklch(0 0 0 / 45%), 0 20px 40px -12px oklch(0 0 0 / 65%);
|
|
406
329
|
}
|
|
330
|
+
|
|
407
331
|
.vanillasky-video-chat .cards button:active { transform: translateY(-1px); }
|
|
332
|
+
|
|
408
333
|
.vanillasky-video-chat .card-wash {
|
|
409
334
|
position: absolute;
|
|
410
335
|
inset: 0;
|
|
411
336
|
background: linear-gradient(0deg, oklch(0.12 0.03 280 / 92%) 0%, oklch(0.12 0.03 280 / 30%) 45%, transparent 70%);
|
|
412
337
|
}
|
|
338
|
+
|
|
413
339
|
.vanillasky-video-chat .card-prompt {
|
|
414
340
|
position: absolute;
|
|
415
341
|
inset: auto 0 0;
|
|
@@ -420,7 +346,9 @@
|
|
|
420
346
|
font-weight: 500;
|
|
421
347
|
text-wrap: balance;
|
|
422
348
|
}
|
|
349
|
+
|
|
423
350
|
.vanillasky-video-chat .card-dots { display: flex; gap: 0.15rem; margin-top: 0.6rem; align-self: center; }
|
|
351
|
+
|
|
424
352
|
.vanillasky-video-chat .card-dots button {
|
|
425
353
|
display: grid;
|
|
426
354
|
place-items: center;
|
|
@@ -431,6 +359,7 @@
|
|
|
431
359
|
background: none;
|
|
432
360
|
cursor: pointer;
|
|
433
361
|
}
|
|
362
|
+
|
|
434
363
|
.vanillasky-video-chat .card-dots button::before {
|
|
435
364
|
content: "";
|
|
436
365
|
width: 0.45rem;
|
|
@@ -439,9 +368,10 @@
|
|
|
439
368
|
background: oklch(1 0 0 / 35%);
|
|
440
369
|
transition: width var(--vs-duration) var(--vs-ease), background-color var(--vs-duration) ease;
|
|
441
370
|
}
|
|
371
|
+
|
|
442
372
|
.vanillasky-video-chat .card-dots button:hover::before { background: oklch(1 0 0 / 60%); }
|
|
443
|
-
.vanillasky-video-chat .card-dots button.on::before { width: 1.35rem; background: oklch(0.84 0.1 268); }
|
|
444
373
|
|
|
374
|
+
.vanillasky-video-chat .card-dots button.on::before { width: 1.35rem; background: oklch(0.84 0.1 268); }
|
|
445
375
|
|
|
446
376
|
@media (max-width: 899px) {
|
|
447
377
|
.vanillasky-video-chat .welcome-body { gap: 0.7rem; padding: 1.75rem 1rem 1rem; }
|
|
@@ -449,6 +379,7 @@
|
|
|
449
379
|
.vanillasky-video-chat .cards button { width: clamp(9rem, 42cqw, 11rem); }
|
|
450
380
|
.vanillasky-video-chat .card-prompt { padding: 0.7rem 0.75rem; }
|
|
451
381
|
}
|
|
382
|
+
|
|
452
383
|
.vanillasky-video-chat .ending {
|
|
453
384
|
position: absolute;
|
|
454
385
|
inset: 0;
|
|
@@ -456,15 +387,16 @@
|
|
|
456
387
|
z-index: 1;
|
|
457
388
|
animation: vanillasky-video-chat-fade-in 420ms ease both;
|
|
458
389
|
}
|
|
390
|
+
|
|
459
391
|
.vanillasky-video-chat .ending-wash {
|
|
460
392
|
position: absolute;
|
|
461
393
|
inset: 0;
|
|
462
394
|
background: linear-gradient(0deg,
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
transparent 100%);
|
|
395
|
+
rgb(7 11 23 / 65%) 0%,
|
|
396
|
+
rgb(7 11 23 / 28%) 35%,
|
|
397
|
+
transparent 65%);
|
|
467
398
|
}
|
|
399
|
+
|
|
468
400
|
.vanillasky-video-chat .ending-body {
|
|
469
401
|
position: absolute;
|
|
470
402
|
inset: auto 0 0;
|
|
@@ -475,6 +407,7 @@
|
|
|
475
407
|
padding: 0 clamp(1.25rem, 4cqw, 3.5rem) clamp(1.25rem, 4cqh, 2.5rem);
|
|
476
408
|
color: oklch(1 0 0);
|
|
477
409
|
}
|
|
410
|
+
|
|
478
411
|
.vanillasky-video-chat .ending-label {
|
|
479
412
|
margin: 0;
|
|
480
413
|
font-size: clamp(var(--vs-text-footnote), 1.1cqw, var(--vs-text-subhead));
|
|
@@ -484,66 +417,15 @@
|
|
|
484
417
|
color: oklch(1 0 0 / 78%);
|
|
485
418
|
text-shadow: 0 1px 3px oklch(0.14 0.05 265 / 70%);
|
|
486
419
|
}
|
|
420
|
+
|
|
487
421
|
.vanillasky-video-chat .ending .cards { margin-top: 0; }
|
|
422
|
+
|
|
488
423
|
.vanillasky-video-chat .ending .cards button { width: clamp(8rem, 15.5cqw, 12rem); }
|
|
424
|
+
|
|
489
425
|
.vanillasky-video-chat .ending .card-dots { align-self: flex-start; margin-left: -0.35rem; }
|
|
490
426
|
|
|
491
|
-
.vanillasky-video-chat .sheet-popover {
|
|
492
|
-
position: absolute;
|
|
493
|
-
z-index: 30;
|
|
494
|
-
top: 0.75rem;
|
|
495
|
-
left: 50%;
|
|
496
|
-
transform: translateX(-50%);
|
|
497
|
-
width: min(26rem, calc(100% - 2rem));
|
|
498
|
-
max-height: 70%;
|
|
499
|
-
overflow-y: auto;
|
|
500
|
-
padding: 0.4rem;
|
|
501
|
-
border-radius: var(--vs-radius-lg);
|
|
502
|
-
background: var(--vs-surface-pop);
|
|
503
|
-
color: var(--vs-fg);
|
|
504
|
-
border: 1px solid var(--vs-border);
|
|
505
|
-
backdrop-filter: blur(20px);
|
|
506
|
-
box-shadow: var(--vs-shadow-pop);
|
|
507
|
-
animation: vanillasky-video-chat-rise 180ms ease both;
|
|
508
|
-
}
|
|
509
|
-
.vanillasky-video-chat .history { display: grid; gap: 0.35rem; }
|
|
510
|
-
.vanillasky-video-chat .history button {
|
|
511
|
-
display: grid;
|
|
512
|
-
grid-template-columns: auto 1fr;
|
|
513
|
-
gap: 0.6rem;
|
|
514
|
-
width: 100%;
|
|
515
|
-
padding: 0.65rem 0.75rem;
|
|
516
|
-
border: 0;
|
|
517
|
-
border-radius: var(--vs-radius);
|
|
518
|
-
background: transparent;
|
|
519
|
-
color: inherit;
|
|
520
|
-
font: inherit;
|
|
521
|
-
text-align: left;
|
|
522
|
-
cursor: pointer;
|
|
523
|
-
}
|
|
524
|
-
.vanillasky-video-chat .history button:hover { background: var(--vs-surface-hover); }
|
|
525
|
-
.vanillasky-video-chat .history button.current { background: var(--vs-surface-selected); }
|
|
526
|
-
.vanillasky-video-chat .history button:disabled { opacity: 0.5; cursor: default; }
|
|
527
|
-
.vanillasky-video-chat .history .index { color: var(--vs-fg-muted); font-size: var(--vs-text-caption); line-height: var(--vs-lead-caption); font-variant-numeric: tabular-nums; }
|
|
528
|
-
.vanillasky-video-chat .history .prompt { font-size: var(--vs-text-body); line-height: var(--vs-lead-headline); letter-spacing: var(--vs-track-headline); font-weight: 500; }
|
|
529
|
-
|
|
530
|
-
.vanillasky-video-chat .settings { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 1rem; }
|
|
531
|
-
.vanillasky-video-chat .settings-note { margin: 0; font-size: var(--vs-text-caption); line-height: var(--vs-lead-caption); color: var(--vs-fg-muted); }
|
|
532
|
-
.vanillasky-video-chat .settings fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
|
|
533
|
-
.vanillasky-video-chat .settings legend {
|
|
534
|
-
padding: 0 0 0.45rem;
|
|
535
|
-
font-size: var(--vs-text-footnote);
|
|
536
|
-
line-height: var(--vs-lead-footnote);
|
|
537
|
-
letter-spacing: var(--vs-track-footnote);
|
|
538
|
-
font-weight: 600;
|
|
539
|
-
color: var(--vs-fg-muted);
|
|
540
|
-
}
|
|
541
|
-
.vanillasky-video-chat .settings label { display: flex; align-items: baseline; gap: 0.6rem; cursor: pointer; }
|
|
542
|
-
.vanillasky-video-chat .settings label span { display: grid; gap: 0.1rem; font-size: var(--vs-text-subhead); line-height: var(--vs-lead-subhead); letter-spacing: var(--vs-track-subhead); color: var(--vs-fg-muted); }
|
|
543
|
-
.vanillasky-video-chat .settings label strong { font-weight: 600; font-size: var(--vs-text-body); line-height: var(--vs-lead-headline); letter-spacing: var(--vs-track-headline); color: var(--vs-fg); }
|
|
544
|
-
.vanillasky-video-chat .settings input { accent-color: var(--vs-accent); margin: 0; }
|
|
545
427
|
.vanillasky-video-chat .panel { display: grid; align-items: center; min-height: 0; background: var(--vs-bg); }
|
|
546
|
-
|
|
428
|
+
|
|
547
429
|
.vanillasky-video-chat .panel-inner {
|
|
548
430
|
display: grid;
|
|
549
431
|
gap: 0.5rem;
|
|
@@ -551,11 +433,13 @@
|
|
|
551
433
|
margin: 0 auto;
|
|
552
434
|
padding: 1rem var(--vs-side) max(1rem, env(safe-area-inset-bottom));
|
|
553
435
|
}
|
|
436
|
+
|
|
554
437
|
@media (min-width: 900px) {
|
|
555
438
|
.vanillasky-video-chat { --vs-side: 1.5rem; }
|
|
556
439
|
.vanillasky-video-chat .stage-area { padding: 2.5rem var(--vs-side) 0; }
|
|
557
440
|
.vanillasky-video-chat .panel-inner { padding: 1rem var(--vs-side) 1.25rem; }
|
|
558
441
|
}
|
|
442
|
+
|
|
559
443
|
.vanillasky-video-chat .line-row {
|
|
560
444
|
display: flex;
|
|
561
445
|
align-items: flex-start;
|
|
@@ -563,14 +447,13 @@
|
|
|
563
447
|
min-height: calc(2 * var(--vs-text-body) * var(--vs-lead-body));
|
|
564
448
|
margin-bottom: 0.5rem;
|
|
565
449
|
}
|
|
450
|
+
|
|
566
451
|
.vanillasky-video-chat .line {
|
|
567
452
|
flex: 1 1 auto;
|
|
568
453
|
min-width: 0;
|
|
569
454
|
margin: 0;
|
|
570
|
-
display:
|
|
571
|
-
|
|
572
|
-
-webkit-line-clamp: 2;
|
|
573
|
-
overflow: hidden;
|
|
455
|
+
display: block;
|
|
456
|
+
overflow: visible;
|
|
574
457
|
font-size: var(--vs-text-body);
|
|
575
458
|
line-height: var(--vs-lead-body);
|
|
576
459
|
letter-spacing: var(--vs-track-body);
|
|
@@ -579,26 +462,11 @@
|
|
|
579
462
|
}
|
|
580
463
|
|
|
581
464
|
@keyframes vanillasky-video-chat-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
|
|
465
|
+
|
|
582
466
|
@keyframes vanillasky-video-chat-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
|
467
|
+
|
|
583
468
|
@keyframes vanillasky-video-chat-rise { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
|
|
584
469
|
|
|
585
|
-
.vanillasky-video-chat .full-response {
|
|
586
|
-
flex: 0 0 auto;
|
|
587
|
-
display: inline-flex;
|
|
588
|
-
align-items: center;
|
|
589
|
-
gap: 0.25rem;
|
|
590
|
-
margin-top: 0.1rem;
|
|
591
|
-
border: 0;
|
|
592
|
-
background: none;
|
|
593
|
-
color: var(--vs-fg-muted);
|
|
594
|
-
font: inherit;
|
|
595
|
-
font-size: var(--vs-text-footnote);
|
|
596
|
-
line-height: var(--vs-lead-footnote);
|
|
597
|
-
letter-spacing: var(--vs-track-footnote);
|
|
598
|
-
font-weight: 500;
|
|
599
|
-
cursor: pointer;
|
|
600
|
-
}
|
|
601
|
-
.vanillasky-video-chat .full-response:hover { color: var(--vs-fg); }
|
|
602
470
|
.vanillasky-video-chat .composer {
|
|
603
471
|
display: flex;
|
|
604
472
|
align-items: center;
|
|
@@ -611,11 +479,14 @@
|
|
|
611
479
|
box-shadow: var(--vs-shadow-input);
|
|
612
480
|
transition: border-color var(--vs-duration) ease, box-shadow var(--vs-duration) ease;
|
|
613
481
|
}
|
|
614
|
-
|
|
482
|
+
|
|
483
|
+
.vanillasky-video-chat .composer:has(textarea:focus-visible) {
|
|
615
484
|
border-color: var(--vs-focus);
|
|
616
485
|
box-shadow: 0 0 0 1px var(--vs-focus), var(--vs-shadow-input);
|
|
617
486
|
}
|
|
487
|
+
|
|
618
488
|
.vanillasky-video-chat .composer textarea:focus-visible { outline: none; }
|
|
489
|
+
|
|
619
490
|
.vanillasky-video-chat .composer textarea {
|
|
620
491
|
flex: 1 1 auto;
|
|
621
492
|
min-width: 0;
|
|
@@ -631,7 +502,9 @@
|
|
|
631
502
|
resize: none;
|
|
632
503
|
field-sizing: content;
|
|
633
504
|
}
|
|
505
|
+
|
|
634
506
|
.vanillasky-video-chat .composer textarea:focus { outline: none; }
|
|
507
|
+
|
|
635
508
|
.vanillasky-video-chat .composer textarea::placeholder { color: var(--vs-fg-muted); }
|
|
636
509
|
|
|
637
510
|
.vanillasky-video-chat .ghost {
|
|
@@ -647,10 +520,15 @@
|
|
|
647
520
|
flex: 0 0 auto;
|
|
648
521
|
transition: color var(--vs-duration) ease, transform var(--vs-duration) ease;
|
|
649
522
|
}
|
|
523
|
+
|
|
650
524
|
.vanillasky-video-chat .ghost:hover:not(:disabled) { color: var(--vs-fg); }
|
|
525
|
+
|
|
651
526
|
.vanillasky-video-chat .ghost:active:not(:disabled) { transform: scale(0.95); }
|
|
527
|
+
|
|
652
528
|
.vanillasky-video-chat .ghost:disabled { opacity: 0.35; cursor: default; }
|
|
529
|
+
|
|
653
530
|
.vanillasky-video-chat .composer .ghost + .ghost { margin-left: 0; }
|
|
531
|
+
|
|
654
532
|
.vanillasky-video-chat .composer .ghost + .send { margin-left: 0.95rem; }
|
|
655
533
|
|
|
656
534
|
.vanillasky-video-chat .ghost.listening {
|
|
@@ -670,44 +548,570 @@
|
|
|
670
548
|
cursor: pointer;
|
|
671
549
|
transition: opacity var(--vs-duration) ease, transform var(--vs-duration) ease;
|
|
672
550
|
}
|
|
551
|
+
|
|
673
552
|
.vanillasky-video-chat .send:hover:not(:disabled) { background: var(--vs-accent-deep); }
|
|
553
|
+
|
|
674
554
|
.vanillasky-video-chat .send:active:not(:disabled) { transform: scale(0.95); }
|
|
555
|
+
|
|
675
556
|
.vanillasky-video-chat .send:disabled { background: var(--vs-surface-selected); color: var(--vs-fg-muted); cursor: default; }
|
|
557
|
+
|
|
676
558
|
.vanillasky-video-chat .waveform { display: flex; align-items: center; gap: 3px; height: 1rem; flex: 0 0 auto; }
|
|
559
|
+
|
|
677
560
|
.vanillasky-video-chat .waveform span { width: 2px; height: 100%; border-radius: var(--vs-radius-pill); background: var(--vs-voice); transform: scaleY(0.2); opacity: 0.6; }
|
|
561
|
+
|
|
678
562
|
.vanillasky-video-chat .waveform.on span { opacity: 1; animation-name: vanillasky-video-chat-wave; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
|
|
563
|
+
|
|
679
564
|
@keyframes vanillasky-video-chat-wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
|
|
680
|
-
.vanillasky-video-chat .waveform.hearing span { background: var(--vs-voice); animation-duration: 420ms !important; }
|
|
681
565
|
|
|
682
|
-
.vanillasky-video-chat .
|
|
683
|
-
.vanillasky-video-chat .scrim { position: absolute; inset: 0; width: 100%; border: 0; background: oklch(0.08 0.015 300 / 55%); backdrop-filter: blur(4px); cursor: default; }
|
|
684
|
-
.vanillasky-video-chat .sheet {
|
|
685
|
-
position: absolute;
|
|
686
|
-
inset: auto 0 0;
|
|
687
|
-
width: min(48rem, 100%);
|
|
688
|
-
max-height: 82dvh;
|
|
689
|
-
margin: 0 auto;
|
|
690
|
-
display: flex;
|
|
691
|
-
flex-direction: column;
|
|
692
|
-
overflow: hidden;
|
|
693
|
-
border-top: 1px solid var(--vs-border);
|
|
694
|
-
border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0;
|
|
695
|
-
background: var(--vs-bg);
|
|
696
|
-
animation: vanillasky-video-chat-slide-up var(--vs-duration-slow) var(--vs-ease) both;
|
|
697
|
-
}
|
|
698
|
-
@keyframes vanillasky-video-chat-slide-up { from { transform: translateY(100%); } to { transform: none; } }
|
|
699
|
-
.vanillasky-video-chat .sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.25rem 0; }
|
|
700
|
-
.vanillasky-video-chat .sheet h1 { margin: 0; font-size: var(--vs-text-title3); line-height: var(--vs-lead-title3); letter-spacing: var(--vs-track-title3); font-weight: 600; }
|
|
701
|
-
.vanillasky-video-chat .sheet .round { background: var(--vs-surface-raised); color: var(--vs-fg-muted); flex: 0 0 auto; }
|
|
702
|
-
.vanillasky-video-chat .sheet-body { overflow-y: auto; padding: 0.75rem 1.25rem 2rem; }
|
|
703
|
-
.vanillasky-video-chat .sheet-body p { margin: 0 0 1rem; font-size: var(--vs-text-body); line-height: 1.6; letter-spacing: var(--vs-track-body); color: var(--vs-fg); }
|
|
704
|
-
.vanillasky-video-chat .sheet-body p:first-child { color: var(--vs-fg); }
|
|
566
|
+
.vanillasky-video-chat .waveform.hearing span { background: var(--vs-voice); animation-duration: 420ms !important; }
|
|
705
567
|
|
|
706
568
|
@media (prefers-reduced-motion: reduce) {
|
|
707
|
-
.vanillasky-video-chat, .vanillasky-video-chat *, .vanillasky-video-chat
|
|
569
|
+
.vanillasky-video-chat, .vanillasky-video-chat *, .vanillasky-video-chat *::before, .vanillasky-video-chat *::after {
|
|
708
570
|
animation-duration: 0.01ms !important;
|
|
709
571
|
animation-iteration-count: 1 !important;
|
|
710
572
|
transition-duration: 0.01ms !important;
|
|
711
573
|
}
|
|
712
574
|
.vanillasky-video-chat .asked-step { color: var(--vs-on-media); -webkit-text-fill-color: currentColor; }
|
|
713
575
|
}
|
|
576
|
+
|
|
577
|
+
.vanillasky-video-chat {
|
|
578
|
+
--vs-media-ground: #080b16;
|
|
579
|
+
--vs-media-glass: rgb(18 22 38 / 70%);
|
|
580
|
+
--vs-media-edge: rgb(255 255 255 / 15%);
|
|
581
|
+
--vs-media-text: #f8f8fc;
|
|
582
|
+
--vs-media-muted: #bfc2cf;
|
|
583
|
+
--vs-media-hover: rgb(255 255 255 / 10%);
|
|
584
|
+
--vs-media-selected: rgb(255 255 255 / 17%);
|
|
585
|
+
--vs-media-bottom: max(24px, env(safe-area-inset-bottom));
|
|
586
|
+
--vs-media-gutter: clamp(20px, 3.5vw, 56px);
|
|
587
|
+
position: relative;
|
|
588
|
+
isolation: isolate;
|
|
589
|
+
display: block;
|
|
590
|
+
width: 100%;
|
|
591
|
+
height: 100dvh;
|
|
592
|
+
background: var(--vs-media-ground);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.vanillasky-video-chat .stage-area { position: absolute; inset: 0; padding: 0; }
|
|
596
|
+
|
|
597
|
+
.vanillasky-video-chat .stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
|
|
598
|
+
|
|
599
|
+
.vanillasky-video-chat[data-orientation="portrait"] .stage { aspect-ratio: auto; }
|
|
600
|
+
|
|
601
|
+
.vanillasky-video-chat .chrome {
|
|
602
|
+
position: absolute;
|
|
603
|
+
z-index: 20;
|
|
604
|
+
inset: 0 0 auto;
|
|
605
|
+
width: 100%;
|
|
606
|
+
padding: max(24px, env(safe-area-inset-top)) var(--vs-media-gutter) 44px;
|
|
607
|
+
margin: 0;
|
|
608
|
+
color: var(--vs-media-text);
|
|
609
|
+
background: linear-gradient(180deg, rgb(3 5 12 / 76%), transparent);
|
|
610
|
+
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
|
|
611
|
+
pointer-events: none;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.vanillasky-video-chat .chrome > * { pointer-events: auto; }
|
|
615
|
+
|
|
616
|
+
.vanillasky-video-chat .session-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
|
|
617
|
+
|
|
618
|
+
.vanillasky-video-chat .chrome .group { gap: 10px; flex-shrink: 0; }
|
|
619
|
+
|
|
620
|
+
.vanillasky-video-chat .chrome :is(.round, .pill) {
|
|
621
|
+
background: rgb(20 23 38 / 50%);
|
|
622
|
+
color: var(--vs-media-text);
|
|
623
|
+
border: 1px solid rgb(255 255 255 / 16%);
|
|
624
|
+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 4px 16px rgb(0 0 0 / 12%);
|
|
625
|
+
backdrop-filter: blur(22px) saturate(140%);
|
|
626
|
+
-webkit-backdrop-filter: blur(22px) saturate(140%);
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.vanillasky-video-chat .chrome :is(.round, .pill):hover { background: rgb(56 58 73 / 85%); }
|
|
630
|
+
|
|
631
|
+
.vanillasky-video-chat .panel { --composer-height: 60px; --conversation-gap: 16px; overflow: visible; padding-top: 6px; position: absolute; z-index: 21; inset: auto 0 0; background: transparent; pointer-events: none; display: block; }
|
|
632
|
+
|
|
633
|
+
.vanillasky-video-chat .panel-inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--conversation-gap); padding: 0 20px var(--vs-media-bottom); }
|
|
634
|
+
|
|
635
|
+
.vanillasky-video-chat .line-row {
|
|
636
|
+
width: 100%;
|
|
637
|
+
min-height: 60px;
|
|
638
|
+
margin: 0;
|
|
639
|
+
padding: 10px 18px;
|
|
640
|
+
align-items: center;
|
|
641
|
+
justify-content: center;
|
|
642
|
+
border-radius: 12px;
|
|
643
|
+
color: var(--vs-media-text);
|
|
644
|
+
background: rgb(4 6 13 / 70%);
|
|
645
|
+
backdrop-filter: blur(12px);
|
|
646
|
+
-webkit-backdrop-filter: blur(12px);
|
|
647
|
+
pointer-events: auto;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.vanillasky-video-chat .line { color: var(--vs-media-text); text-align: center; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; line-height: 1.45; text-shadow: 0 1px 6px rgb(0 0 0 / 30%); }
|
|
651
|
+
|
|
652
|
+
.vanillasky-video-chat[data-controls-visible="false"] .chrome { opacity: 0; visibility: hidden; transform: translateY(-8px); }
|
|
653
|
+
|
|
654
|
+
.vanillasky-video-chat .panel .error { pointer-events: auto; width: min(560px, 100%); background: var(--vs-bg); }
|
|
655
|
+
|
|
656
|
+
|
|
657
|
+
.vanillasky-video-chat .welcome { background: var(--vs-media-ground); }
|
|
658
|
+
|
|
659
|
+
.vanillasky-video-chat .welcome .frame-media { max-width: none; max-height: none; object-fit: cover; }
|
|
660
|
+
|
|
661
|
+
.vanillasky-video-chat .welcome-wash { background: linear-gradient(90deg, rgb(7 11 23 / 88%) 0%, rgb(7 11 23 / 47%) 50%, rgb(7 11 23 / 10%) 100%), linear-gradient(0deg, rgb(4 6 13 / 95%) 0%, transparent 68%); }
|
|
662
|
+
|
|
663
|
+
.vanillasky-video-chat .welcome-body { padding: clamp(140px, 20dvh, 220px) var(--vs-media-gutter) 130px; gap: 24px; }
|
|
664
|
+
|
|
665
|
+
.vanillasky-video-chat .welcome-title { font-size: clamp(40px, 5.3vw, 78px); line-height: 1.08; letter-spacing: -.055em; font-weight: 550; max-width: 900px; }
|
|
666
|
+
|
|
667
|
+
.vanillasky-video-chat .welcome-title em { color: #c1c4e5; }
|
|
668
|
+
|
|
669
|
+
.vanillasky-video-chat .cards { gap: 14px; margin: auto -12px 0; width: calc(100% + 24px); max-width: calc(100% + 24px); padding: 12px; }
|
|
670
|
+
|
|
671
|
+
.vanillasky-video-chat .cards button { width: clamp(160px, 18vw, 260px); aspect-ratio: 1.65; border-radius: 14px; box-shadow: 0 8px 30px rgb(0 0 0 / 24%); background: #202438; }
|
|
672
|
+
|
|
673
|
+
.vanillasky-video-chat .card-prompt { font-size: clamp(13px, 1.1vw, 16px); padding: 14px 16px; letter-spacing: -.015em; font-weight: 550; }
|
|
674
|
+
|
|
675
|
+
.vanillasky-video-chat .card-wash { background: linear-gradient(0deg, rgb(4 6 13 / 92%), rgb(4 6 13 / 20%) 90%); }
|
|
676
|
+
|
|
677
|
+
.vanillasky-video-chat .cards button[data-active] { outline-color: #d6d8ef; box-shadow: 0 0 0 4px rgb(198 202 255 / 10%); }
|
|
678
|
+
|
|
679
|
+
.vanillasky-video-chat .card-dots { display: none; }
|
|
680
|
+
|
|
681
|
+
.vanillasky-video-chat .ending-body { padding: 0 var(--vs-media-gutter) 190px; }
|
|
682
|
+
|
|
683
|
+
.vanillasky-video-chat .ending .cards { margin-top: 0; }
|
|
684
|
+
|
|
685
|
+
.vanillasky-video-chat .ending-label { font-size: 15px; margin-bottom: 6px; }
|
|
686
|
+
|
|
687
|
+
@media (max-width: 700px) {
|
|
688
|
+
.vanillasky-video-chat { --vs-media-bottom: max(16px, env(safe-area-inset-bottom)); --vs-media-gutter: 20px; }
|
|
689
|
+
.vanillasky-video-chat .chrome { padding-top: max(18px, env(safe-area-inset-top)); gap: 12px; }
|
|
690
|
+
.vanillasky-video-chat .chrome .group { gap: 6px; }
|
|
691
|
+
.vanillasky-video-chat .chrome .pill { padding: 0 13px; font-size: 12px; }
|
|
692
|
+
.vanillasky-video-chat .panel-inner { padding-left: 12px; padding-right: 12px; gap: 16px; }
|
|
693
|
+
.vanillasky-video-chat .line-row { padding: 8px 12px; }
|
|
694
|
+
.vanillasky-video-chat .welcome-body { padding: max(135px, 17dvh) 20px 118px; gap: 24px; }
|
|
695
|
+
.vanillasky-video-chat .welcome-title { font-size: clamp(36px, 9.6vw, 58px); line-height: 1.12; letter-spacing: -.055em; }
|
|
696
|
+
.vanillasky-video-chat .cards { gap: 12px; width: calc(100% + 20px); max-width: calc(100% + 20px); padding: 12px 20px 12px 12px; }
|
|
697
|
+
.vanillasky-video-chat .cards button { width: 172px; aspect-ratio: .95; }
|
|
698
|
+
.vanillasky-video-chat .card-prompt { font-size: 14px; padding: 14px; }
|
|
699
|
+
.vanillasky-video-chat .ending-body { padding: 0 20px 190px; }
|
|
700
|
+
.vanillasky-video-chat .ending .cards button { width: 165px; aspect-ratio: 1.15; }
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
@media (max-height: 650px) and (min-width: 701px) {
|
|
704
|
+
.vanillasky-video-chat .welcome-body { padding-top: 110px; padding-bottom: 118px; }
|
|
705
|
+
.vanillasky-video-chat .welcome-title { font-size: clamp(32px, 4vw, 54px); }
|
|
706
|
+
.vanillasky-video-chat .cards button { width: 160px; }
|
|
707
|
+
.vanillasky-video-chat .ending-body { padding-bottom: 160px; }
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
@media (max-height: 650px) and (max-width: 700px) {
|
|
711
|
+
.vanillasky-video-chat .welcome-body { padding-top: 98px; }
|
|
712
|
+
.vanillasky-video-chat .welcome-title { font-size: 34px; }
|
|
713
|
+
.vanillasky-video-chat .cards button { width: 145px; aspect-ratio: 1.5; }
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
@media (prefers-reduced-motion: reduce) {
|
|
717
|
+
.vanillasky-video-chat *, .vanillasky-video-chat *::before, .vanillasky-video-chat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
@media (prefers-contrast: more) {
|
|
721
|
+
.vanillasky-video-chat { --vs-media-glass: #121622; --vs-media-edge: rgb(255 255 255 / 65%); --vs-media-muted: #e4e5ef; }
|
|
722
|
+
.vanillasky-video-chat .line-row { background: #080b16; }
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.vanillasky-video-chat .stage > .player-fit { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); height: auto; max-height: 100%; display: block; }
|
|
726
|
+
|
|
727
|
+
.vanillasky-video-chat .line-row { position: relative; }
|
|
728
|
+
|
|
729
|
+
.vanillasky-video-chat .caption-actions { display: flex; flex-shrink: 0; align-self: center; gap: 2px; transition: opacity 180ms ease; }
|
|
730
|
+
|
|
731
|
+
.vanillasky-video-chat .caption-action { display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 5px; border: 0; border-radius: 9px; color: var(--vs-media-muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
|
|
732
|
+
|
|
733
|
+
.vanillasky-video-chat .caption-action:hover { color: var(--vs-media-text); background: var(--vs-media-hover); }
|
|
734
|
+
|
|
735
|
+
.vanillasky-video-chat .caption-action svg { width: 16px; height: 16px; }
|
|
736
|
+
|
|
737
|
+
.vanillasky-video-chat .line-row[data-expanded="true"] { width: 100%; display: flex; align-items: flex-start; padding: 18px 20px; background: rgb(12 16 28 / 94%); border: 1px solid var(--vs-media-edge); box-shadow: 0 16px 50px rgb(0 0 0 / 30%); }
|
|
738
|
+
|
|
739
|
+
.vanillasky-video-chat .expanded-captions { flex: 1; min-width: 0; max-height: min(360px, 52dvh); overflow-y: auto; overscroll-behavior: contain; color: var(--vs-media-text); font-size: 16px; line-height: 1.65; }
|
|
740
|
+
|
|
741
|
+
.vanillasky-video-chat .expanded-captions p { margin: 0 0 14px; }
|
|
742
|
+
|
|
743
|
+
.vanillasky-video-chat .expanded-captions p:last-child { margin: 0; }
|
|
744
|
+
|
|
745
|
+
.vanillasky-video-chat .line-row[data-expanded="true"] .caption-actions { align-self: flex-start; }
|
|
746
|
+
|
|
747
|
+
@media (max-width: 700px) {
|
|
748
|
+
.vanillasky-video-chat .caption-action { min-width: 40px; min-height: 44px; }
|
|
749
|
+
.vanillasky-video-chat .line-row[data-expanded="true"] { padding: 14px; }
|
|
750
|
+
.vanillasky-video-chat .expanded-captions { font-size: 15px; }
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.vanillasky-video-chat .chrome .round:has(.nav-label), .vanillasky-video-chat .chrome .pill:has(.nav-label) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 0 14px; font-size: 12px; font-weight: 500; }
|
|
754
|
+
|
|
755
|
+
.vanillasky-video-chat .chrome .round:has(.nav-label) svg, .vanillasky-video-chat .chrome .pill svg { width: 17px; height: 17px; }
|
|
756
|
+
|
|
757
|
+
.vanillasky-video-chat .caption-actions { order: 2; }
|
|
758
|
+
|
|
759
|
+
.vanillasky-video-chat .caption-action { display: flex; align-items: center; justify-content: center; gap: 5px; }
|
|
760
|
+
|
|
761
|
+
.vanillasky-video-chat .eyebrow { display: block; font-size: 10px; line-height: 1.5; letter-spacing: .12em; font-weight: 600; color: var(--vs-fg-muted); margin-bottom: 8px; }
|
|
762
|
+
|
|
763
|
+
.vanillasky-video-chat .expanded-captions .eyebrow { color: var(--vs-media-muted); }
|
|
764
|
+
|
|
765
|
+
|
|
766
|
+
|
|
767
|
+
.vanillasky-video-chat .dock-hint { position: absolute; inset: auto 0 7px; text-align: center; margin: 0; color: var(--vs-media-muted); font-size: 11px; line-height: 16px; }
|
|
768
|
+
|
|
769
|
+
.vanillasky-video-chat .panel-inner:has(.dock-hint) { padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 20px)); }
|
|
770
|
+
|
|
771
|
+
@media (max-width: 700px) {
|
|
772
|
+
.vanillasky-video-chat .chrome .nav-label { display: none; }
|
|
773
|
+
.vanillasky-video-chat .chrome .round:has(.nav-label), .vanillasky-video-chat .chrome .pill:has(.nav-label) { width: 44px; padding: 0; }
|
|
774
|
+
.vanillasky-video-chat .chrome > .group:first-of-type { margin-left: auto; }
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.vanillasky-video-chat .chrome .session-brand { flex: 1 1 auto; }
|
|
778
|
+
|
|
779
|
+
.vanillasky-video-chat .chrome > .group { flex: 0 0 auto; }
|
|
780
|
+
|
|
781
|
+
.vanillasky-video-chat .conversation-composer {
|
|
782
|
+
width: min(680px, 100%);
|
|
783
|
+
pointer-events: auto;
|
|
784
|
+
margin-bottom: 0;
|
|
785
|
+
transition: margin-bottom 280ms var(--vs-ease), opacity 180ms ease, transform 280ms var(--vs-ease), visibility 280ms;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.vanillasky-video-chat .conversation-composer .composer {
|
|
789
|
+
gap: 3px;
|
|
790
|
+
min-height: 60px;
|
|
791
|
+
padding: 7px;
|
|
792
|
+
border: 1px solid var(--vs-media-edge);
|
|
793
|
+
border-radius: 24px;
|
|
794
|
+
background: var(--vs-media-glass);
|
|
795
|
+
color: var(--vs-media-text);
|
|
796
|
+
box-shadow: 0 16px 48px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 5%);
|
|
797
|
+
backdrop-filter: blur(28px) saturate(130%);
|
|
798
|
+
-webkit-backdrop-filter: blur(28px) saturate(130%);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
.vanillasky-video-chat .conversation-composer .composer:has(textarea:focus-visible) {
|
|
802
|
+
border-color: rgb(199 204 244 / 65%);
|
|
803
|
+
box-shadow: 0 0 0 3px rgb(199 204 244 / 9%), 0 16px 48px rgb(0 0 0 / 30%);
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
.vanillasky-video-chat .conversation-composer textarea {
|
|
807
|
+
padding: 9px 10px;
|
|
808
|
+
min-height: 44px;
|
|
809
|
+
max-height: 120px;
|
|
810
|
+
color: var(--vs-media-text);
|
|
811
|
+
font-size: 16px;
|
|
812
|
+
line-height: 26px;
|
|
813
|
+
letter-spacing: -.015em;
|
|
814
|
+
scrollbar-width: thin;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.vanillasky-video-chat .conversation-composer textarea::placeholder { color: var(--vs-media-muted); }
|
|
818
|
+
|
|
819
|
+
.vanillasky-video-chat .conversation-composer .ghost { width: 44px; height: 44px; color: var(--vs-media-muted); }
|
|
820
|
+
|
|
821
|
+
.vanillasky-video-chat .conversation-composer .ghost:hover:not(:disabled) { color: var(--vs-media-text); background: var(--vs-media-hover); }
|
|
822
|
+
|
|
823
|
+
.vanillasky-video-chat .conversation-composer .ghost.listening { color: white; background: var(--vs-voice); }
|
|
824
|
+
|
|
825
|
+
.vanillasky-video-chat .conversation-composer .send { width: 44px; height: 44px; flex-shrink: 0; background: rgb(191 194 230 / 22%); color: #faf9ff; border: 1px solid rgb(222 224 255 / 20%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); }
|
|
826
|
+
|
|
827
|
+
.vanillasky-video-chat .conversation-composer .send:hover:not(:disabled) { background: rgb(191 194 230 / 35%); }
|
|
828
|
+
|
|
829
|
+
.vanillasky-video-chat .conversation-composer .send:disabled { background: var(--vs-media-selected); color: var(--vs-media-muted); opacity: .45; }
|
|
830
|
+
|
|
831
|
+
.vanillasky-video-chat .conversation-composer .ghost + .send { margin-left: 10px; }
|
|
832
|
+
|
|
833
|
+
.vanillasky-video-chat .conversation-composer .waveform { margin: 0 3px; }
|
|
834
|
+
|
|
835
|
+
.vanillasky-video-chat .conversation-composer .waveform:not(.on) { display: none; }
|
|
836
|
+
|
|
837
|
+
.vanillasky-video-chat .composer-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px; color: var(--vs-media-muted); font-size: 12px; line-height: 1.5; }
|
|
838
|
+
|
|
839
|
+
.vanillasky-video-chat .composer-meta:empty { display: none; }
|
|
840
|
+
|
|
841
|
+
|
|
842
|
+
.vanillasky-video-chat .composer-meta .error { width: auto; }
|
|
843
|
+
|
|
844
|
+
@media (max-width: 700px) {
|
|
845
|
+
.vanillasky-video-chat .conversation-composer .composer { border-radius: 23px; padding: 5px; gap: 0; }
|
|
846
|
+
.vanillasky-video-chat .conversation-composer textarea { padding: 9px 5px; }
|
|
847
|
+
.vanillasky-video-chat .conversation-composer .ghost + .send { margin-left: 10px; }
|
|
848
|
+
.vanillasky-video-chat .composer-meta { gap: 8px; }
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.vanillasky-video-chat .panel[data-input-visible="false"] .conversation-composer {
|
|
852
|
+
margin-bottom: calc(-1 * var(--composer-height) - var(--conversation-gap));
|
|
853
|
+
opacity: 0;
|
|
854
|
+
visibility: hidden;
|
|
855
|
+
pointer-events: none;
|
|
856
|
+
transform: translateY(calc(var(--vs-media-bottom) + 16px));
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.vanillasky-video-chat .caption-actions { opacity: .65; }
|
|
860
|
+
|
|
861
|
+
.vanillasky-video-chat .line-row:hover .caption-actions,
|
|
862
|
+
.vanillasky-video-chat .line-row:focus-within .caption-actions { opacity: 1; }
|
|
863
|
+
|
|
864
|
+
.vanillasky-video-chat .caption-slot {
|
|
865
|
+
display: grid;
|
|
866
|
+
grid-template-rows: 0fr;
|
|
867
|
+
width: min(680px, 100%);
|
|
868
|
+
opacity: 0;
|
|
869
|
+
transition: grid-template-rows 280ms var(--vs-ease), opacity 180ms ease, visibility 280ms;
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.vanillasky-video-chat .caption-slot[data-captions="true"] { grid-template-rows: 1fr; opacity: 1; }
|
|
873
|
+
|
|
874
|
+
.vanillasky-video-chat .caption-clip { min-height: 0; overflow: visible; border-radius: 12px; }
|
|
875
|
+
|
|
876
|
+
.vanillasky-video-chat .caption-slot[data-captions="false"] { pointer-events: none; visibility: hidden; }
|
|
877
|
+
|
|
878
|
+
.vanillasky-video-chat .brand-logo { display: block; width: 144px; height: 36px; object-fit: contain; }
|
|
879
|
+
|
|
880
|
+
@media (max-width: 700px) { .vanillasky-video-chat .brand-logo { width: 120px; height: 30px; } }
|
|
881
|
+
|
|
882
|
+
.vanillasky-video-chat .sheet-popover {
|
|
883
|
+
position: absolute;
|
|
884
|
+
z-index: 30;
|
|
885
|
+
inset: max(82px, calc(env(safe-area-inset-top) + 64px)) var(--vs-media-gutter) auto auto;
|
|
886
|
+
width: min(360px, calc(100% - 32px));
|
|
887
|
+
max-height: min(650px, calc(100dvh - 108px));
|
|
888
|
+
overflow-y: auto;
|
|
889
|
+
overscroll-behavior: contain;
|
|
890
|
+
scrollbar-width: thin;
|
|
891
|
+
scrollbar-color: rgb(224 225 243 / 25%) transparent;
|
|
892
|
+
padding: 18px;
|
|
893
|
+
border: 1px solid rgb(255 255 255 / 18%);
|
|
894
|
+
border-radius: 26px;
|
|
895
|
+
background: var(--vs-surface-pop);
|
|
896
|
+
color: var(--vs-fg);
|
|
897
|
+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 1px 0 0 rgb(255 255 255 / 3%), var(--vs-shadow-pop);
|
|
898
|
+
backdrop-filter: blur(36px) saturate(145%);
|
|
899
|
+
-webkit-backdrop-filter: blur(36px) saturate(145%);
|
|
900
|
+
animation: vanillasky-video-chat-fade-in 180ms ease both;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
.vanillasky-video-chat .popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 14px; }
|
|
904
|
+
|
|
905
|
+
.vanillasky-video-chat .popover-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
|
|
906
|
+
|
|
907
|
+
.vanillasky-video-chat .popover-heading .round { width: 36px; height: 36px; flex-shrink: 0; background: rgb(255 255 255 / 7%); color: var(--vs-fg-muted); }
|
|
908
|
+
|
|
909
|
+
.vanillasky-video-chat .popover-heading .round:hover { color: var(--vs-fg); background: var(--vs-surface-hover); }
|
|
910
|
+
|
|
911
|
+
.vanillasky-video-chat .popover-heading .round svg { width: 17px; height: 17px; }
|
|
912
|
+
|
|
913
|
+
.vanillasky-video-chat .settings { display: grid; gap: 16px; }
|
|
914
|
+
|
|
915
|
+
.vanillasky-video-chat .settings .popover-heading { padding-bottom: 0; }
|
|
916
|
+
|
|
917
|
+
.vanillasky-video-chat .settings fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
|
|
918
|
+
|
|
919
|
+
.vanillasky-video-chat .settings legend, .vanillasky-video-chat .section-label { padding: 0 3px 8px; margin: 0; color: #aeb2c7; font-size: 11px; line-height: 1.4; letter-spacing: .025em; font-weight: 600; }
|
|
920
|
+
|
|
921
|
+
.vanillasky-video-chat .settings label { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
|
922
|
+
|
|
923
|
+
.vanillasky-video-chat .settings label > span { display: grid; gap: 3px; min-width: 0; color: #aeb2c7; font-size: 12px; line-height: 1.4; }
|
|
924
|
+
|
|
925
|
+
.vanillasky-video-chat .settings label strong { color: var(--vs-fg); font-size: 13px; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
|
|
926
|
+
|
|
927
|
+
.vanillasky-video-chat .settings .switch-row { min-height: 48px; padding: 8px 12px; background: rgb(255 255 255 / 4%); border-radius: 12px; }
|
|
928
|
+
|
|
929
|
+
.vanillasky-video-chat .settings .switch-row > span { flex: 1; }
|
|
930
|
+
|
|
931
|
+
.vanillasky-video-chat .settings input { appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; font: inherit; cursor: pointer; }
|
|
932
|
+
|
|
933
|
+
.vanillasky-video-chat .settings input[type="checkbox"] { position: relative; order: 2; width: 38px; height: 23px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 99px; background: rgb(255 255 255 / 12%); transition: background 180ms ease; }
|
|
934
|
+
|
|
935
|
+
.vanillasky-video-chat .settings input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #aeb2c7; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform 180ms var(--vs-ease), background 180ms ease; }
|
|
936
|
+
|
|
937
|
+
.vanillasky-video-chat .settings input[type="checkbox"]:checked { background: rgb(193 196 229 / 70%); border-color: rgb(223 225 255 / 35%); }
|
|
938
|
+
|
|
939
|
+
.vanillasky-video-chat .settings input[type="checkbox"]:checked::after { background: #fafaff; transform: translateX(15px); }
|
|
940
|
+
|
|
941
|
+
.vanillasky-video-chat .settings .visual-options { display: grid; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 16px; background: rgb(0 0 0 / 10%); }
|
|
942
|
+
|
|
943
|
+
.vanillasky-video-chat .settings .choice-row { min-height: 52px; padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; transition: background 150ms ease, border-color 150ms ease; }
|
|
944
|
+
|
|
945
|
+
.vanillasky-video-chat .settings .choice-row:hover { background: rgb(255 255 255 / 4%); }
|
|
946
|
+
|
|
947
|
+
.vanillasky-video-chat .settings .choice-row:has(input:checked) { background: rgb(193 196 229 / 12%); border-color: rgb(210 213 247 / 10%); }
|
|
948
|
+
|
|
949
|
+
.vanillasky-video-chat .settings input[type="radio"] { position: relative; width: 18px; height: 18px; border: 1px solid rgb(216 220 246 / 32%); border-radius: 50%; background: rgb(0 0 0 / 8%); }
|
|
950
|
+
|
|
951
|
+
.vanillasky-video-chat .settings input[type="radio"]:checked { background: #c1c4e5; border-color: #c1c4e5; }
|
|
952
|
+
|
|
953
|
+
.vanillasky-video-chat .settings input[type="radio"]:checked::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #25283d; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
|
|
954
|
+
|
|
955
|
+
.vanillasky-video-chat .settings .style-options { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border-radius: 16px; background: rgb(0 0 0 / 15%); }
|
|
956
|
+
|
|
957
|
+
.vanillasky-video-chat .settings .style-options label { flex: 1 1 70px; min-height: 40px; justify-content: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; }
|
|
958
|
+
|
|
959
|
+
.vanillasky-video-chat .settings .style-options label:has(input:checked) { background: rgb(193 196 229 / 18%); border-color: rgb(226 228 255 / 16%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 2px 5px rgb(0 0 0 / 8%); }
|
|
960
|
+
|
|
961
|
+
.vanillasky-video-chat .settings .style-options label:hover { background: rgb(255 255 255 / 8%); }
|
|
962
|
+
|
|
963
|
+
.vanillasky-video-chat .settings .style-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
|
|
964
|
+
|
|
965
|
+
.vanillasky-video-chat .settings .style-options label:has(input:focus-visible) { outline: 2px solid var(--vs-focus-ring); outline-offset: 2px; }
|
|
966
|
+
|
|
967
|
+
.vanillasky-video-chat .settings .style-options strong { font-size: 12px; }
|
|
968
|
+
|
|
969
|
+
.vanillasky-video-chat .settings-note { margin: 0; padding: 0 3px; color: #aeb2c7; font-size: 11px; line-height: 1.5; }
|
|
970
|
+
|
|
971
|
+
.vanillasky-video-chat .history { display: grid; gap: 4px; }
|
|
972
|
+
|
|
973
|
+
.vanillasky-video-chat .history .section-label { padding-top: 8px; padding-bottom: 5px; }
|
|
974
|
+
|
|
975
|
+
.vanillasky-video-chat .history > p { margin: 0; padding: 12px 3px; font-size: 13px; line-height: 1.5; color: var(--vs-fg-muted); }
|
|
976
|
+
|
|
977
|
+
.vanillasky-video-chat .history-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 11px 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--vs-fg); font: inherit; text-align: left; cursor: pointer; }
|
|
978
|
+
|
|
979
|
+
.vanillasky-video-chat .history-row:hover:not(:disabled) { background: var(--vs-surface-hover); }
|
|
980
|
+
|
|
981
|
+
.vanillasky-video-chat .history-row.current { background: rgb(193 196 229 / 13%); border-color: rgb(221 224 255 / 12%); }
|
|
982
|
+
|
|
983
|
+
.vanillasky-video-chat .history-row:disabled { opacity: .4; cursor: default; }
|
|
984
|
+
|
|
985
|
+
.vanillasky-video-chat .history-row .index, .vanillasky-video-chat .history-row > svg { flex-shrink: 0; width: 18px; font-size: 11px; color: #aeb2c7; font-variant-numeric: tabular-nums; }
|
|
986
|
+
|
|
987
|
+
.vanillasky-video-chat .history-row .prompt { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
|
|
988
|
+
|
|
989
|
+
.vanillasky-video-chat .history-row small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: #aeb2c7; }
|
|
990
|
+
|
|
991
|
+
|
|
992
|
+
@media (max-width: 700px) {
|
|
993
|
+
.vanillasky-video-chat .sheet-popover { right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 102px); padding: 16px; }
|
|
994
|
+
.vanillasky-video-chat .popover-heading .round { width: 44px; height: 44px; }
|
|
995
|
+
.vanillasky-video-chat .settings .style-options label { min-height: 44px; }
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
.vanillasky-video-chat .settings label small { font-size: 11px; line-height: 1.4; }
|
|
999
|
+
|
|
1000
|
+
.vanillasky-video-chat .settings .style-options label > span { font-size: 12px; font-weight: 500; white-space: nowrap; }
|
|
1001
|
+
|
|
1002
|
+
.vanillasky-video-chat .settings .style-options label:has(input:checked) > span { color: var(--vs-fg); }
|
|
1003
|
+
|
|
1004
|
+
.vanillasky-video-chat .history-row.current::after { content: ""; flex: 0 0 5px; width: 5px; height: 9px; margin: 0 4px; border: solid #c1c4e5; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
|
|
1005
|
+
|
|
1006
|
+
/* Host sizing is opt-in; the default experience occupies the viewport. */
|
|
1007
|
+
.vanillasky-video-chat {
|
|
1008
|
+
min-height: var(--vs-chat-min-height, 100dvh);
|
|
1009
|
+
height: var(--vs-chat-height, 100dvh);
|
|
1010
|
+
max-width: 100%;
|
|
1011
|
+
}
|
|
1012
|
+
.vanillasky-video-chat *,
|
|
1013
|
+
.vanillasky-video-chat *::before,
|
|
1014
|
+
.vanillasky-video-chat *::after { box-sizing: border-box; }
|
|
1015
|
+
|
|
1016
|
+
/* Cues normally read in about three lines. Never clamp away spoken words. */
|
|
1017
|
+
.vanillasky-video-chat .line {
|
|
1018
|
+
display: block;
|
|
1019
|
+
overflow: visible;
|
|
1020
|
+
overflow-wrap: anywhere;
|
|
1021
|
+
white-space: normal;
|
|
1022
|
+
text-wrap: pretty;
|
|
1023
|
+
font-size: clamp(16px, 1.3vw, 19px);
|
|
1024
|
+
line-height: 1.5;
|
|
1025
|
+
}
|
|
1026
|
+
.vanillasky-video-chat .caption-clip { overflow: visible; }
|
|
1027
|
+
.vanillasky-video-chat .caption-actions { transition: opacity 180ms ease; }
|
|
1028
|
+
.vanillasky-video-chat .line-row[data-actions-visible="false"] .caption-actions,
|
|
1029
|
+
.vanillasky-video-chat .caption-actions[data-actions-visible="false"] {
|
|
1030
|
+
opacity: 0;
|
|
1031
|
+
pointer-events: none;
|
|
1032
|
+
}
|
|
1033
|
+
.vanillasky-video-chat .line-row:focus-within .caption-actions,
|
|
1034
|
+
.vanillasky-video-chat .caption-actions:focus-within {
|
|
1035
|
+
opacity: 1;
|
|
1036
|
+
pointer-events: auto;
|
|
1037
|
+
}
|
|
1038
|
+
.vanillasky-video-chat .sheet-popover { max-height: min(650px, calc(100% - 108px)); }
|
|
1039
|
+
@media (max-width: 700px) {
|
|
1040
|
+
.vanillasky-video-chat .sheet-popover { max-height: calc(100% - 102px); }
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
/* A still from the current response softly fills unused aspect-ratio space.
|
|
1044
|
+
Frame is mounted paused by the component; only the main player animates. */
|
|
1045
|
+
.vanillasky-video-chat .stage > .ambient-media {
|
|
1046
|
+
inset: -40px;
|
|
1047
|
+
width: calc(100% + 80px);
|
|
1048
|
+
height: calc(100% + 80px);
|
|
1049
|
+
display: block;
|
|
1050
|
+
overflow: hidden;
|
|
1051
|
+
z-index: 0;
|
|
1052
|
+
background: var(--vs-media-ground);
|
|
1053
|
+
opacity: 1;
|
|
1054
|
+
pointer-events: none;
|
|
1055
|
+
}
|
|
1056
|
+
.vanillasky-video-chat .ambient-media .frame-media {
|
|
1057
|
+
max-width: none;
|
|
1058
|
+
max-height: none;
|
|
1059
|
+
object-fit: cover;
|
|
1060
|
+
filter: blur(32px) saturate(.85);
|
|
1061
|
+
opacity: .62;
|
|
1062
|
+
}
|
|
1063
|
+
.vanillasky-video-chat .opening-wash {
|
|
1064
|
+
position: absolute;
|
|
1065
|
+
inset: 0;
|
|
1066
|
+
background: linear-gradient(180deg, rgb(8 11 22 / 12%), rgb(8 11 22 / 42%));
|
|
1067
|
+
pointer-events: none;
|
|
1068
|
+
}
|
|
1069
|
+
.vanillasky-video-chat .ending { pointer-events: none; }
|
|
1070
|
+
.vanillasky-video-chat .ending .cards { pointer-events: auto; }
|
|
1071
|
+
|
|
1072
|
+
/* Respect viewers who prefer solid controls over translucent media surfaces. */
|
|
1073
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
1074
|
+
.vanillasky-video-chat {
|
|
1075
|
+
--vs-media-glass: #121626;
|
|
1076
|
+
--vs-surface-pop: #171a28;
|
|
1077
|
+
--vs-surface-input: #121626;
|
|
1078
|
+
}
|
|
1079
|
+
.vanillasky-video-chat .chrome :is(.round, .pill),
|
|
1080
|
+
.vanillasky-video-chat .sheet-popover,
|
|
1081
|
+
.vanillasky-video-chat .conversation-composer .composer,
|
|
1082
|
+
.vanillasky-video-chat .line-row {
|
|
1083
|
+
background: #171a28;
|
|
1084
|
+
backdrop-filter: none;
|
|
1085
|
+
-webkit-backdrop-filter: none;
|
|
1086
|
+
}
|
|
1087
|
+
.vanillasky-video-chat .stage > .ambient-media { display: none; }
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
@media (pointer: coarse) {
|
|
1091
|
+
.vanillasky-video-chat .caption-action,
|
|
1092
|
+
.vanillasky-video-chat .popover-heading .round,
|
|
1093
|
+
.vanillasky-video-chat .settings .style-options label {
|
|
1094
|
+
min-width: 44px;
|
|
1095
|
+
min-height: 44px;
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
|
|
1100
|
+
/* Caption controls float outside the reading measure, so the complete cue
|
|
1101
|
+
keeps the same width when controls appear or disappear. */
|
|
1102
|
+
.vanillasky-video-chat .caption-actions {
|
|
1103
|
+
position: absolute;
|
|
1104
|
+
bottom: 100%;
|
|
1105
|
+
right: 0;
|
|
1106
|
+
margin-bottom: 6px;
|
|
1107
|
+
padding: 3px;
|
|
1108
|
+
border: 1px solid var(--vs-media-edge);
|
|
1109
|
+
border-radius: 12px;
|
|
1110
|
+
background: var(--vs-media-glass);
|
|
1111
|
+
backdrop-filter: blur(18px);
|
|
1112
|
+
-webkit-backdrop-filter: blur(18px);
|
|
1113
|
+
}
|
|
1114
|
+
.vanillasky-video-chat .stage > .player-fit { z-index: 1; }
|
|
1115
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
1116
|
+
.vanillasky-video-chat .caption-actions { background: #171a28; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
|
1117
|
+
}
|