@huskel/sdk 0.4.2 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1045 -159
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +66 -28
- package/dist/index.d.ts +66 -28
- package/dist/index.js +887 -277
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +879 -272
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -1
package/dist/index.css
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/* src/styles.css */
|
|
2
|
+
:root {
|
|
3
|
+
--hsk-border-radius: 0px;
|
|
4
|
+
}
|
|
2
5
|
.hsk-chat-widget {
|
|
3
|
-
--hsk-bg: var(--chat-bg-color, #
|
|
4
|
-
--hsk-text: var(--chat-text-color, #
|
|
6
|
+
--hsk-bg: var(--chat-bg-color, #ffffff);
|
|
7
|
+
--hsk-text: var(--chat-text-color, #1f1f1f);
|
|
5
8
|
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
6
9
|
--hsk-font: var(--chat-font-family, inherit);
|
|
7
10
|
display: flex;
|
|
@@ -10,19 +13,31 @@
|
|
|
10
13
|
min-height: 320px;
|
|
11
14
|
font-family: var(--hsk-font);
|
|
12
15
|
background: var(--hsk-bg);
|
|
13
|
-
border: 1px solid #
|
|
14
|
-
border-radius:
|
|
16
|
+
border: 1px solid #f1f3f4;
|
|
17
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
15
18
|
overflow: hidden;
|
|
16
19
|
}
|
|
20
|
+
@media (prefers-color-scheme: dark) {
|
|
21
|
+
.hsk-chat-widget {
|
|
22
|
+
--hsk-bg: var(--chat-bg-color, #0a0a0a);
|
|
23
|
+
--hsk-text: var(--chat-text-color, #e8eaed);
|
|
24
|
+
border-color: #202124;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
17
27
|
.hsk-chat-header {
|
|
18
28
|
display: flex;
|
|
19
29
|
align-items: center;
|
|
20
30
|
gap: 10px;
|
|
21
31
|
padding: 14px 16px;
|
|
22
|
-
border-bottom: 1px solid #
|
|
23
|
-
background:
|
|
32
|
+
border-bottom: 1px solid #f1f3f4;
|
|
33
|
+
background: var(--hsk-bg);
|
|
24
34
|
flex-shrink: 0;
|
|
25
35
|
}
|
|
36
|
+
@media (prefers-color-scheme: dark) {
|
|
37
|
+
.hsk-chat-header {
|
|
38
|
+
border-bottom-color: #202124;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
26
41
|
.hsk-chat-header-icon {
|
|
27
42
|
color: var(--hsk-primary);
|
|
28
43
|
display: flex;
|
|
@@ -31,7 +46,7 @@
|
|
|
31
46
|
.hsk-chat-title {
|
|
32
47
|
font-size: 14px;
|
|
33
48
|
font-weight: 600;
|
|
34
|
-
color:
|
|
49
|
+
color: var(--hsk-text);
|
|
35
50
|
}
|
|
36
51
|
.hsk-chat-badge {
|
|
37
52
|
font-size: 10px;
|
|
@@ -42,7 +57,7 @@
|
|
|
42
57
|
background: rgba(255, 106, 51, 0.09);
|
|
43
58
|
border: 1px solid rgba(255, 106, 51, 0.18);
|
|
44
59
|
padding: 2px 8px;
|
|
45
|
-
border-radius:
|
|
60
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
46
61
|
}
|
|
47
62
|
.hsk-chat-messages {
|
|
48
63
|
flex: 1;
|
|
@@ -75,7 +90,7 @@
|
|
|
75
90
|
}
|
|
76
91
|
.hsk-chat-empty-suggestions {
|
|
77
92
|
font-size: 12px;
|
|
78
|
-
color: #
|
|
93
|
+
color: #666;
|
|
79
94
|
margin-top: 4px;
|
|
80
95
|
}
|
|
81
96
|
.hsk-msg-row {
|
|
@@ -89,7 +104,7 @@
|
|
|
89
104
|
.hsk-msg-avatar {
|
|
90
105
|
width: 28px;
|
|
91
106
|
height: 28px;
|
|
92
|
-
border-radius:
|
|
107
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
93
108
|
flex-shrink: 0;
|
|
94
109
|
display: flex;
|
|
95
110
|
align-items: center;
|
|
@@ -106,26 +121,35 @@
|
|
|
106
121
|
justify-content: center;
|
|
107
122
|
}
|
|
108
123
|
.hsk-msg-avatar.user {
|
|
109
|
-
background: #
|
|
110
|
-
color: #
|
|
124
|
+
background: #f1f3f4;
|
|
125
|
+
color: #5f6368;
|
|
126
|
+
}
|
|
127
|
+
@media (prefers-color-scheme: dark) {
|
|
128
|
+
.hsk-msg-avatar.user {
|
|
129
|
+
background: #202124;
|
|
130
|
+
color: #888;
|
|
131
|
+
}
|
|
111
132
|
}
|
|
112
133
|
.hsk-msg-bubble {
|
|
113
134
|
max-width: 78%;
|
|
114
135
|
padding: 10px 14px;
|
|
115
|
-
border-radius:
|
|
136
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
116
137
|
font-size: 13px;
|
|
117
138
|
line-height: 1.6;
|
|
118
139
|
}
|
|
119
140
|
.hsk-msg-bubble.ai {
|
|
120
|
-
background:
|
|
121
|
-
border: 1px solid #
|
|
122
|
-
color:
|
|
123
|
-
|
|
141
|
+
background: var(--hsk-bg);
|
|
142
|
+
border: 1px solid #f1f3f4;
|
|
143
|
+
color: var(--hsk-text);
|
|
144
|
+
}
|
|
145
|
+
@media (prefers-color-scheme: dark) {
|
|
146
|
+
.hsk-msg-bubble.ai {
|
|
147
|
+
border-color: #202124;
|
|
148
|
+
}
|
|
124
149
|
}
|
|
125
150
|
.hsk-msg-bubble.user {
|
|
126
151
|
background: var(--hsk-primary);
|
|
127
152
|
color: #fff;
|
|
128
|
-
border-radius: 12px 4px 12px 12px;
|
|
129
153
|
}
|
|
130
154
|
.hsk-sources-container {
|
|
131
155
|
margin-left: 36px;
|
|
@@ -141,12 +165,18 @@
|
|
|
141
165
|
align-items: center;
|
|
142
166
|
gap: 10px;
|
|
143
167
|
padding: 8px 10px;
|
|
144
|
-
background: #
|
|
145
|
-
border: 1px solid #
|
|
146
|
-
border-radius:
|
|
168
|
+
background: #f8f9fa;
|
|
169
|
+
border: 1px solid #f1f3f4;
|
|
170
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
147
171
|
cursor: pointer;
|
|
148
172
|
transition: border-color 0.15s;
|
|
149
173
|
}
|
|
174
|
+
@media (prefers-color-scheme: dark) {
|
|
175
|
+
.hsk-source-card {
|
|
176
|
+
background: #1a1a1b;
|
|
177
|
+
border-color: #202124;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
150
180
|
.hsk-source-card:hover {
|
|
151
181
|
border-color: rgba(255, 106, 51, 0.37);
|
|
152
182
|
}
|
|
@@ -154,13 +184,13 @@
|
|
|
154
184
|
width: 36px;
|
|
155
185
|
height: 36px;
|
|
156
186
|
object-fit: cover;
|
|
157
|
-
border-radius:
|
|
187
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
158
188
|
background: #fff;
|
|
159
189
|
}
|
|
160
190
|
.hsk-source-name {
|
|
161
191
|
font-size: 12px;
|
|
162
192
|
font-weight: 500;
|
|
163
|
-
color:
|
|
193
|
+
color: var(--hsk-text);
|
|
164
194
|
white-space: nowrap;
|
|
165
195
|
overflow: hidden;
|
|
166
196
|
text-overflow: ellipsis;
|
|
@@ -176,11 +206,16 @@
|
|
|
176
206
|
gap: 4px;
|
|
177
207
|
align-items: center;
|
|
178
208
|
padding: 10px 14px;
|
|
179
|
-
background:
|
|
180
|
-
border: 1px solid #
|
|
181
|
-
border-radius:
|
|
209
|
+
background: var(--hsk-bg);
|
|
210
|
+
border: 1px solid #f1f3f4;
|
|
211
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
182
212
|
width: fit-content;
|
|
183
213
|
}
|
|
214
|
+
@media (prefers-color-scheme: dark) {
|
|
215
|
+
.hsk-typing {
|
|
216
|
+
border-color: #202124;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
184
219
|
.hsk-typing-dot {
|
|
185
220
|
width: 6px;
|
|
186
221
|
height: 6px;
|
|
@@ -209,18 +244,23 @@
|
|
|
209
244
|
align-items: center;
|
|
210
245
|
gap: 8px;
|
|
211
246
|
padding: 12px 14px;
|
|
212
|
-
border-top: 1px solid #
|
|
213
|
-
background:
|
|
247
|
+
border-top: 1px solid #f1f3f4;
|
|
248
|
+
background: var(--hsk-bg);
|
|
214
249
|
flex-shrink: 0;
|
|
215
250
|
}
|
|
251
|
+
@media (prefers-color-scheme: dark) {
|
|
252
|
+
.hsk-chat-input-area {
|
|
253
|
+
border-top-color: #202124;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
216
256
|
.hsk-chat-input {
|
|
217
257
|
flex: 1;
|
|
218
|
-
background: #
|
|
219
|
-
border: 1px solid #
|
|
220
|
-
border-radius:
|
|
258
|
+
background: #f1f3f4;
|
|
259
|
+
border: 1px solid #f1f3f4;
|
|
260
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
221
261
|
padding: 9px 14px;
|
|
222
262
|
font-size: 13px;
|
|
223
|
-
color:
|
|
263
|
+
color: var(--hsk-text);
|
|
224
264
|
outline: none;
|
|
225
265
|
font-family: inherit;
|
|
226
266
|
transition: border-color 0.2s;
|
|
@@ -229,8 +269,14 @@
|
|
|
229
269
|
max-height: 120px;
|
|
230
270
|
line-height: 1.5;
|
|
231
271
|
}
|
|
272
|
+
@media (prefers-color-scheme: dark) {
|
|
273
|
+
.hsk-chat-input {
|
|
274
|
+
background: #1a1a1b;
|
|
275
|
+
border-color: #202124;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
232
278
|
.hsk-chat-input::placeholder {
|
|
233
|
-
color: #
|
|
279
|
+
color: #888;
|
|
234
280
|
}
|
|
235
281
|
.hsk-chat-input:focus {
|
|
236
282
|
border-color: var(--hsk-primary);
|
|
@@ -238,7 +284,7 @@
|
|
|
238
284
|
.hsk-chat-send {
|
|
239
285
|
width: 34px;
|
|
240
286
|
height: 34px;
|
|
241
|
-
border-radius:
|
|
287
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
242
288
|
background: var(--hsk-primary);
|
|
243
289
|
border: none;
|
|
244
290
|
color: #fff;
|
|
@@ -285,7 +331,7 @@
|
|
|
285
331
|
align-items: center;
|
|
286
332
|
gap: 7px;
|
|
287
333
|
padding: 8px 16px;
|
|
288
|
-
border-radius:
|
|
334
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
289
335
|
border: 1px solid rgba(255, 106, 51, 0.4);
|
|
290
336
|
background: rgba(255, 106, 51, 0.1);
|
|
291
337
|
color: var(--hsk-primary);
|
|
@@ -322,6 +368,7 @@
|
|
|
322
368
|
display: flex;
|
|
323
369
|
flex-direction: column;
|
|
324
370
|
animation: hsk-overlay-in .2s ease-out both;
|
|
371
|
+
background: #ffffff !important;
|
|
325
372
|
}
|
|
326
373
|
@keyframes hsk-overlay-in {
|
|
327
374
|
from {
|
|
@@ -384,13 +431,13 @@
|
|
|
384
431
|
}
|
|
385
432
|
.hsk-cb-topbar-title {
|
|
386
433
|
font-size: 16px;
|
|
387
|
-
font-weight:
|
|
388
|
-
color: var(--hsk-chat-text, #
|
|
434
|
+
font-weight: 500;
|
|
435
|
+
color: var(--hsk-chat-text, #1f1f1f);
|
|
389
436
|
letter-spacing: -.01em;
|
|
390
437
|
}
|
|
391
438
|
.hsk-cb-topbar-sub {
|
|
392
439
|
font-size: 12px;
|
|
393
|
-
color: var(--hsk-chat-muted, #
|
|
440
|
+
color: var(--hsk-chat-muted, #5f6368);
|
|
394
441
|
margin-top: 2px;
|
|
395
442
|
}
|
|
396
443
|
.hsk-cb-topbar-actions {
|
|
@@ -401,10 +448,10 @@
|
|
|
401
448
|
.hsk-cb-topbar-btn {
|
|
402
449
|
height: 34px;
|
|
403
450
|
padding: 0 14px;
|
|
404
|
-
border-radius:
|
|
451
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
405
452
|
border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
|
|
406
453
|
background: none;
|
|
407
|
-
color: var(--hsk-chat-muted, #
|
|
454
|
+
color: var(--hsk-chat-muted, #5f6368);
|
|
408
455
|
font-size: 12px;
|
|
409
456
|
font-weight: 500;
|
|
410
457
|
cursor: pointer;
|
|
@@ -418,10 +465,10 @@
|
|
|
418
465
|
.hsk-cb-close {
|
|
419
466
|
width: 34px;
|
|
420
467
|
height: 34px;
|
|
421
|
-
border-radius:
|
|
468
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
422
469
|
border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
|
|
423
470
|
background: none;
|
|
424
|
-
color: var(--hsk-chat-muted, #
|
|
471
|
+
color: var(--hsk-chat-muted, #5f6368);
|
|
425
472
|
cursor: pointer;
|
|
426
473
|
font-size: 20px;
|
|
427
474
|
display: flex;
|
|
@@ -456,6 +503,11 @@
|
|
|
456
503
|
gap: 20px;
|
|
457
504
|
padding: 60px 32px;
|
|
458
505
|
text-align: center;
|
|
506
|
+
background:
|
|
507
|
+
radial-gradient(
|
|
508
|
+
circle at center,
|
|
509
|
+
rgba(var(--hsk-primary-rgb, 255, 106, 51), 0.08) 0%,
|
|
510
|
+
transparent 60%);
|
|
459
511
|
}
|
|
460
512
|
.hsk-cb-empty-icon {
|
|
461
513
|
font-size: 48px;
|
|
@@ -466,13 +518,13 @@
|
|
|
466
518
|
}
|
|
467
519
|
.hsk-cb-empty-title {
|
|
468
520
|
font-size: 26px;
|
|
469
|
-
font-weight:
|
|
521
|
+
font-weight: 500;
|
|
470
522
|
color: var(--hsk-chat-text, #111);
|
|
471
523
|
letter-spacing: -.02em;
|
|
472
524
|
}
|
|
473
525
|
.hsk-cb-empty-sub {
|
|
474
526
|
font-size: 14px;
|
|
475
|
-
color: var(--hsk-chat-muted, #
|
|
527
|
+
color: var(--hsk-chat-muted, #5f6368);
|
|
476
528
|
line-height: 1.7;
|
|
477
529
|
max-width: 380px;
|
|
478
530
|
}
|
|
@@ -485,7 +537,7 @@
|
|
|
485
537
|
}
|
|
486
538
|
.hsk-cb-chip {
|
|
487
539
|
padding: 8px 16px;
|
|
488
|
-
border-radius:
|
|
540
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
489
541
|
border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
|
|
490
542
|
background: var(--hsk-chat-source-bg, rgba(0,0,0,.03));
|
|
491
543
|
color: var(--hsk-chat-text, #333);
|
|
@@ -525,10 +577,10 @@
|
|
|
525
577
|
.hsk-cb-user-bubble {
|
|
526
578
|
background: var(--hsk-primary);
|
|
527
579
|
color: #fff;
|
|
528
|
-
padding:
|
|
529
|
-
border-radius:
|
|
530
|
-
font-size:
|
|
531
|
-
line-height: 1.
|
|
580
|
+
padding: 10px 16px;
|
|
581
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
582
|
+
font-size: 13px;
|
|
583
|
+
line-height: 1.55;
|
|
532
584
|
max-width: 72%;
|
|
533
585
|
font-weight: 500;
|
|
534
586
|
}
|
|
@@ -540,7 +592,7 @@
|
|
|
540
592
|
.hsk-cb-ai-icon {
|
|
541
593
|
width: 28px;
|
|
542
594
|
height: 28px;
|
|
543
|
-
border-radius:
|
|
595
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
544
596
|
background: rgba(255, 106, 51, .12);
|
|
545
597
|
border: 1px solid rgba(255, 106, 51, .25);
|
|
546
598
|
color: var(--hsk-primary);
|
|
@@ -556,8 +608,8 @@
|
|
|
556
608
|
min-width: 0;
|
|
557
609
|
}
|
|
558
610
|
.hsk-cb-ai-text {
|
|
559
|
-
font-size:
|
|
560
|
-
line-height: 1.
|
|
611
|
+
font-size: 13px;
|
|
612
|
+
line-height: 1.65;
|
|
561
613
|
color: var(--hsk-chat-text, #111);
|
|
562
614
|
white-space: pre-wrap;
|
|
563
615
|
}
|
|
@@ -593,16 +645,16 @@
|
|
|
593
645
|
transform: translateY(-50%);
|
|
594
646
|
width: 30px;
|
|
595
647
|
height: 30px;
|
|
596
|
-
border-radius:
|
|
648
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
597
649
|
border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
|
|
598
|
-
background: var(--hsk-chat-bg, #
|
|
599
|
-
color: var(--hsk-chat-text, #
|
|
650
|
+
background: var(--hsk-chat-bg, #ffffff);
|
|
651
|
+
color: var(--hsk-chat-text, #333);
|
|
600
652
|
cursor: pointer;
|
|
601
653
|
font-size: 16px;
|
|
602
654
|
display: flex;
|
|
603
655
|
align-items: center;
|
|
604
656
|
justify-content: center;
|
|
605
|
-
box-shadow: 0 2px 12px rgba(0, 0, 0, .
|
|
657
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
|
|
606
658
|
transition: all .15s;
|
|
607
659
|
z-index: 3;
|
|
608
660
|
font-family: inherit;
|
|
@@ -615,7 +667,7 @@
|
|
|
615
667
|
.hsk-cb-source {
|
|
616
668
|
flex: 0 0 188px;
|
|
617
669
|
scroll-snap-align: start;
|
|
618
|
-
border-radius:
|
|
670
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
619
671
|
border: none;
|
|
620
672
|
background: transparent;
|
|
621
673
|
cursor: pointer;
|
|
@@ -641,7 +693,7 @@
|
|
|
641
693
|
width: 188px;
|
|
642
694
|
height: 188px;
|
|
643
695
|
overflow: hidden;
|
|
644
|
-
border-radius:
|
|
696
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
645
697
|
display: block;
|
|
646
698
|
}
|
|
647
699
|
.hsk-cb-src-imgwrap img {
|
|
@@ -657,7 +709,7 @@
|
|
|
657
709
|
.hsk-cb-src-imgwrap-empty {
|
|
658
710
|
width: 188px;
|
|
659
711
|
height: 188px;
|
|
660
|
-
background: var(--hsk-chat-divide, rgba(
|
|
712
|
+
background: var(--hsk-chat-divide, rgba(0,0,0,.06));
|
|
661
713
|
display: flex;
|
|
662
714
|
align-items: center;
|
|
663
715
|
justify-content: center;
|
|
@@ -670,7 +722,7 @@
|
|
|
670
722
|
.hsk-cb-src-name {
|
|
671
723
|
font-size: 13px;
|
|
672
724
|
font-weight: 600;
|
|
673
|
-
color: var(--hsk-chat-text, #
|
|
725
|
+
color: var(--hsk-chat-text, #333);
|
|
674
726
|
line-height: 1.4;
|
|
675
727
|
display: -webkit-box;
|
|
676
728
|
-webkit-line-clamp: 2;
|
|
@@ -689,9 +741,9 @@
|
|
|
689
741
|
gap: 14px;
|
|
690
742
|
margin-top: 16px;
|
|
691
743
|
padding: 14px;
|
|
692
|
-
border: 1px solid var(--hsk-chat-divide, rgba(
|
|
744
|
+
border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.08));
|
|
693
745
|
border-left: 3px solid var(--hsk-primary);
|
|
694
|
-
background: var(--hsk-chat-source-bg, rgba(
|
|
746
|
+
background: var(--hsk-chat-source-bg, rgba(0,0,0,.03));
|
|
695
747
|
cursor: pointer;
|
|
696
748
|
transition: border-color .15s;
|
|
697
749
|
animation: hsk-msg-in .2s ease-out both;
|
|
@@ -712,7 +764,7 @@
|
|
|
712
764
|
.hsk-cb-selected-name {
|
|
713
765
|
font-size: 13px;
|
|
714
766
|
font-weight: 700;
|
|
715
|
-
color: var(--hsk-chat-text, #
|
|
767
|
+
color: var(--hsk-chat-text, #111);
|
|
716
768
|
margin-bottom: 3px;
|
|
717
769
|
}
|
|
718
770
|
.hsk-cb-selected-price {
|
|
@@ -730,6 +782,7 @@
|
|
|
730
782
|
display: flex;
|
|
731
783
|
gap: 5px;
|
|
732
784
|
padding: 14px 18px;
|
|
785
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
733
786
|
}
|
|
734
787
|
.hsk-cb-dot {
|
|
735
788
|
width: 7px;
|
|
@@ -764,7 +817,7 @@
|
|
|
764
817
|
gap: 10px;
|
|
765
818
|
background: var(--hsk-chat-input-bg, rgba(0,0,0,.04));
|
|
766
819
|
border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
|
|
767
|
-
border-radius:
|
|
820
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
768
821
|
padding: 14px 14px 14px 20px;
|
|
769
822
|
transition: border-color .15s, box-shadow .15s;
|
|
770
823
|
}
|
|
@@ -778,11 +831,11 @@
|
|
|
778
831
|
border: none;
|
|
779
832
|
outline: none;
|
|
780
833
|
resize: none;
|
|
781
|
-
font-size:
|
|
834
|
+
font-size: 13px;
|
|
782
835
|
color: var(--hsk-chat-text, #111);
|
|
783
836
|
min-height: 24px;
|
|
784
837
|
max-height: 140px;
|
|
785
|
-
line-height: 1.
|
|
838
|
+
line-height: 1.5;
|
|
786
839
|
font-family: inherit;
|
|
787
840
|
}
|
|
788
841
|
.hsk-cb-textarea::placeholder {
|
|
@@ -791,7 +844,7 @@
|
|
|
791
844
|
.hsk-cb-send {
|
|
792
845
|
width: 38px;
|
|
793
846
|
height: 38px;
|
|
794
|
-
border-radius:
|
|
847
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
795
848
|
background: var(--hsk-primary);
|
|
796
849
|
border: none;
|
|
797
850
|
color: #fff;
|
|
@@ -820,14 +873,14 @@
|
|
|
820
873
|
}
|
|
821
874
|
.hsk-cb-hint {
|
|
822
875
|
text-align: center;
|
|
823
|
-
font-size:
|
|
876
|
+
font-size: 10px;
|
|
824
877
|
color: var(--hsk-chat-muted, #bbb);
|
|
825
878
|
margin-top: 10px;
|
|
826
879
|
}
|
|
827
880
|
.hsk-cb-error {
|
|
828
881
|
margin: 8px 0;
|
|
829
882
|
padding: 10px 14px;
|
|
830
|
-
border-radius:
|
|
883
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
831
884
|
background: rgba(239, 68, 68, .08);
|
|
832
885
|
border: 1px solid rgba(239, 68, 68, .2);
|
|
833
886
|
color: #ef4444;
|
|
@@ -835,39 +888,114 @@
|
|
|
835
888
|
}
|
|
836
889
|
@media (prefers-color-scheme: dark) {
|
|
837
890
|
.hsk-cb-overlay {
|
|
838
|
-
--hsk-chat-bg: #
|
|
891
|
+
--hsk-chat-bg: #0a0a0a;
|
|
839
892
|
--hsk-chat-text: #f0efed;
|
|
840
|
-
--hsk-chat-muted: #
|
|
893
|
+
--hsk-chat-muted: #888;
|
|
841
894
|
--hsk-chat-divide: rgba(255,255,255,.07);
|
|
842
895
|
--hsk-chat-input-bg: rgba(255,255,255,.05);
|
|
843
896
|
--hsk-chat-source-bg: rgba(255,255,255,.04);
|
|
844
|
-
--hsk-fade-bg: #
|
|
897
|
+
--hsk-fade-bg: #0a0a0a;
|
|
898
|
+
background: #000000 !important;
|
|
845
899
|
}
|
|
846
|
-
.hsk-cb-
|
|
847
|
-
|
|
900
|
+
.hsk-cb-topbar-title {
|
|
901
|
+
color: #f0efed;
|
|
902
|
+
}
|
|
903
|
+
.hsk-cb-topbar-sub {
|
|
904
|
+
color: #888;
|
|
905
|
+
}
|
|
906
|
+
.hsk-cb-topbar-btn {
|
|
907
|
+
border-color: rgba(255, 255, 255, .07);
|
|
908
|
+
color: #888;
|
|
909
|
+
}
|
|
910
|
+
.hsk-cb-close {
|
|
911
|
+
border-color: rgba(255, 255, 255, .07);
|
|
912
|
+
color: #888;
|
|
913
|
+
}
|
|
914
|
+
.hsk-cb-empty-title {
|
|
915
|
+
color: #f0efed;
|
|
916
|
+
}
|
|
917
|
+
.hsk-cb-empty-sub {
|
|
918
|
+
color: #888;
|
|
919
|
+
}
|
|
920
|
+
.hsk-cb-chip {
|
|
921
|
+
border-color: rgba(255, 255, 255, .07);
|
|
922
|
+
background: rgba(255, 255, 255, .04);
|
|
923
|
+
color: #f0efed;
|
|
924
|
+
}
|
|
925
|
+
.hsk-cb-chip:hover {
|
|
926
|
+
background: rgba(255, 106, 51, .06);
|
|
927
|
+
}
|
|
928
|
+
.hsk-cb-msg-group {
|
|
929
|
+
border-bottom-color: rgba(255, 255, 255, .05);
|
|
930
|
+
}
|
|
931
|
+
.hsk-cb-user-bubble {
|
|
932
|
+
color: #fff;
|
|
933
|
+
}
|
|
934
|
+
.hsk-cb-ai-icon {
|
|
935
|
+
background: rgba(255, 106, 51, .12);
|
|
936
|
+
border-color: rgba(255, 106, 51, .25);
|
|
937
|
+
}
|
|
938
|
+
.hsk-cb-ai-text {
|
|
939
|
+
color: #f0efed;
|
|
940
|
+
}
|
|
941
|
+
.hsk-cb-sources-next {
|
|
942
|
+
border-color: rgba(255, 255, 255, .12);
|
|
943
|
+
background: #0a0a0a;
|
|
944
|
+
color: #f0efed;
|
|
945
|
+
}
|
|
946
|
+
.hsk-cb-src-imgwrap-empty {
|
|
947
|
+
background: rgba(255, 255, 255, .06);
|
|
948
|
+
color: #555;
|
|
949
|
+
}
|
|
950
|
+
.hsk-cb-src-name {
|
|
951
|
+
color: #f0efed;
|
|
952
|
+
}
|
|
953
|
+
.hsk-cb-selected-product {
|
|
954
|
+
border-color: rgba(255, 255, 255, .08);
|
|
955
|
+
background: rgba(255, 255, 255, .03);
|
|
956
|
+
}
|
|
957
|
+
.hsk-cb-selected-name {
|
|
958
|
+
color: #f0efed;
|
|
959
|
+
}
|
|
960
|
+
.hsk-cb-dot {
|
|
961
|
+
background: #555;
|
|
962
|
+
}
|
|
963
|
+
.hsk-cb-input-box {
|
|
964
|
+
background: rgba(255, 255, 255, .05);
|
|
965
|
+
border-color: rgba(255, 255, 255, .07);
|
|
966
|
+
}
|
|
967
|
+
.hsk-cb-textarea {
|
|
968
|
+
color: #f0efed;
|
|
969
|
+
}
|
|
970
|
+
.hsk-cb-textarea::placeholder {
|
|
971
|
+
color: #555;
|
|
972
|
+
}
|
|
973
|
+
.hsk-cb-send:disabled {
|
|
974
|
+
background: #555;
|
|
975
|
+
}
|
|
976
|
+
.hsk-cb-hint {
|
|
977
|
+
color: #555;
|
|
848
978
|
}
|
|
849
979
|
}
|
|
850
980
|
@media (prefers-color-scheme: light) {
|
|
851
981
|
.hsk-cb-overlay {
|
|
852
|
-
--hsk-chat-bg: #
|
|
853
|
-
--hsk-chat-text: #
|
|
854
|
-
--hsk-chat-muted: #
|
|
855
|
-
--hsk-chat-divide:
|
|
856
|
-
--hsk-chat-input-bg:
|
|
857
|
-
--hsk-chat-source-bg:
|
|
858
|
-
--hsk-fade-bg: #
|
|
859
|
-
|
|
860
|
-
.hsk-cb-overlay {
|
|
861
|
-
background: rgba(240, 240, 244, .88) !important;
|
|
982
|
+
--hsk-chat-bg: #ffffff;
|
|
983
|
+
--hsk-chat-text: #1f1f1f;
|
|
984
|
+
--hsk-chat-muted: #5f6368;
|
|
985
|
+
--hsk-chat-divide: #f1f3f4;
|
|
986
|
+
--hsk-chat-input-bg: #f1f3f4;
|
|
987
|
+
--hsk-chat-source-bg: #f8f9fa;
|
|
988
|
+
--hsk-fade-bg: #ffffff;
|
|
989
|
+
background: #ffffff !important;
|
|
862
990
|
}
|
|
863
991
|
}
|
|
864
992
|
.hsk-sb-wrap {
|
|
865
|
-
--hsk-bg: #
|
|
866
|
-
--hsk-border: #
|
|
867
|
-
--hsk-text: #
|
|
868
|
-
--hsk-muted: #
|
|
869
|
-
--hsk-hover: #
|
|
870
|
-
--hsk-drop-shadow: 0 8px 30px rgba(0,0,0,.
|
|
993
|
+
--hsk-bg: #ffffff;
|
|
994
|
+
--hsk-border: #f1f3f4;
|
|
995
|
+
--hsk-text: #1f1f1f;
|
|
996
|
+
--hsk-muted: #5f6368;
|
|
997
|
+
--hsk-hover: #f8f9fa;
|
|
998
|
+
--hsk-drop-shadow: 0 8px 30px rgba(0,0,0,.06);
|
|
871
999
|
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
872
1000
|
position: relative;
|
|
873
1001
|
width: 100%;
|
|
@@ -875,19 +1003,19 @@
|
|
|
875
1003
|
}
|
|
876
1004
|
@media (prefers-color-scheme: dark) {
|
|
877
1005
|
.hsk-sb-wrap {
|
|
878
|
-
--hsk-bg: #
|
|
879
|
-
--hsk-border: #
|
|
880
|
-
--hsk-text: #
|
|
881
|
-
--hsk-muted: #
|
|
882
|
-
--hsk-hover: #
|
|
883
|
-
--hsk-drop-shadow: 0 12px 40px rgba(0,0,0,.
|
|
1006
|
+
--hsk-bg: #0a0a0a;
|
|
1007
|
+
--hsk-border: #202124;
|
|
1008
|
+
--hsk-text: #e8eaed;
|
|
1009
|
+
--hsk-muted: #888;
|
|
1010
|
+
--hsk-hover: #1a1a1b;
|
|
1011
|
+
--hsk-drop-shadow: 0 12px 40px rgba(0,0,0,.4);
|
|
884
1012
|
}
|
|
885
1013
|
}
|
|
886
1014
|
.hsk-sb-input {
|
|
887
1015
|
width: 100%;
|
|
888
1016
|
padding: 10px 16px 10px 40px;
|
|
889
1017
|
font-size: 14px;
|
|
890
|
-
border-radius:
|
|
1018
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
891
1019
|
border: 1.5px solid var(--hsk-border);
|
|
892
1020
|
outline: none;
|
|
893
1021
|
box-sizing: border-box;
|
|
@@ -920,7 +1048,7 @@
|
|
|
920
1048
|
right: 0;
|
|
921
1049
|
background: var(--hsk-bg);
|
|
922
1050
|
border: 1px solid var(--hsk-border);
|
|
923
|
-
border-radius:
|
|
1051
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
924
1052
|
box-shadow: var(--hsk-drop-shadow);
|
|
925
1053
|
z-index: 9999;
|
|
926
1054
|
overflow: hidden;
|
|
@@ -1005,6 +1133,43 @@
|
|
|
1005
1133
|
transform: none;
|
|
1006
1134
|
}
|
|
1007
1135
|
}
|
|
1136
|
+
.hsk-sb-skeleton-row {
|
|
1137
|
+
display: flex;
|
|
1138
|
+
align-items: center;
|
|
1139
|
+
gap: 12px;
|
|
1140
|
+
padding: 9px 16px;
|
|
1141
|
+
}
|
|
1142
|
+
.hsk-sb-skeleton-icon {
|
|
1143
|
+
width: 15px;
|
|
1144
|
+
height: 15px;
|
|
1145
|
+
background: var(--hsk-hover, rgba(0, 0, 0, 0.05));
|
|
1146
|
+
border-radius: 50%;
|
|
1147
|
+
flex-shrink: 0;
|
|
1148
|
+
animation: hsk-pulse 1.5s ease-in-out infinite;
|
|
1149
|
+
}
|
|
1150
|
+
.hsk-sb-skeleton-text1 {
|
|
1151
|
+
height: 12px;
|
|
1152
|
+
background: var(--hsk-hover, rgba(0, 0, 0, 0.05));
|
|
1153
|
+
border-radius: 3px;
|
|
1154
|
+
width: 60%;
|
|
1155
|
+
animation: hsk-pulse 1.5s ease-in-out infinite;
|
|
1156
|
+
}
|
|
1157
|
+
.hsk-sb-skeleton-text2 {
|
|
1158
|
+
height: 8px;
|
|
1159
|
+
background: var(--hsk-hover, rgba(0, 0, 0, 0.05));
|
|
1160
|
+
border-radius: 2px;
|
|
1161
|
+
width: 35%;
|
|
1162
|
+
margin-top: 5px;
|
|
1163
|
+
animation: hsk-pulse 1.5s ease-in-out infinite;
|
|
1164
|
+
}
|
|
1165
|
+
@keyframes hsk-pulse {
|
|
1166
|
+
0%, 100% {
|
|
1167
|
+
opacity: 0.6;
|
|
1168
|
+
}
|
|
1169
|
+
50% {
|
|
1170
|
+
opacity: 1;
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1008
1173
|
.hsk-sp-btn {
|
|
1009
1174
|
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
1010
1175
|
display: inline-flex;
|
|
@@ -1012,7 +1177,7 @@
|
|
|
1012
1177
|
justify-content: center;
|
|
1013
1178
|
width: 32px;
|
|
1014
1179
|
height: 32px;
|
|
1015
|
-
border-radius:
|
|
1180
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1016
1181
|
border: 1px solid var(--hsk-sp-border, rgba(255,106,51,.35));
|
|
1017
1182
|
background: var(--hsk-sp-bg, rgba(255,106,51,.08));
|
|
1018
1183
|
color: var(--hsk-primary);
|
|
@@ -1039,11 +1204,11 @@
|
|
|
1039
1204
|
inset: 0;
|
|
1040
1205
|
z-index: 99998;
|
|
1041
1206
|
display: flex;
|
|
1042
|
-
align-items:
|
|
1207
|
+
align-items: center;
|
|
1043
1208
|
justify-content: center;
|
|
1044
|
-
padding:
|
|
1209
|
+
padding: 24px;
|
|
1045
1210
|
animation: hsk-bd-in .2s ease-out both;
|
|
1046
|
-
|
|
1211
|
+
background: #ffffff !important;
|
|
1047
1212
|
}
|
|
1048
1213
|
@keyframes hsk-bd-in {
|
|
1049
1214
|
from {
|
|
@@ -1057,13 +1222,28 @@
|
|
|
1057
1222
|
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
1058
1223
|
width: 100%;
|
|
1059
1224
|
max-width: 600px;
|
|
1060
|
-
border-radius:
|
|
1225
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1061
1226
|
overflow: hidden;
|
|
1062
1227
|
animation: hsk-card-in .24s cubic-bezier(.34, 1.36, .64, 1) both;
|
|
1063
1228
|
flex-shrink: 0;
|
|
1064
|
-
background: var(--hsk-modal-card-bg, #
|
|
1065
|
-
border: 1px solid var(--hsk-modal-card-border,
|
|
1066
|
-
box-shadow: 0 32px 80px rgba(0, 0, 0, .
|
|
1229
|
+
background: var(--hsk-modal-card-bg, #ffffff);
|
|
1230
|
+
border: 1px solid var(--hsk-modal-card-border, #f1f3f4);
|
|
1231
|
+
box-shadow: 0 32px 80px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
|
|
1232
|
+
display: flex;
|
|
1233
|
+
flex-direction: column;
|
|
1234
|
+
}
|
|
1235
|
+
.hsk-sp-card.hsk-sp-fullscreen {
|
|
1236
|
+
max-width: 1000px;
|
|
1237
|
+
width: 90vw;
|
|
1238
|
+
height: 85vh;
|
|
1239
|
+
max-height: 800px;
|
|
1240
|
+
}
|
|
1241
|
+
@media (max-width: 768px) {
|
|
1242
|
+
.hsk-sp-card.hsk-sp-fullscreen {
|
|
1243
|
+
width: 95vw;
|
|
1244
|
+
height: 90vh;
|
|
1245
|
+
max-height: none;
|
|
1246
|
+
}
|
|
1067
1247
|
}
|
|
1068
1248
|
@keyframes hsk-card-in {
|
|
1069
1249
|
from {
|
|
@@ -1080,7 +1260,8 @@
|
|
|
1080
1260
|
align-items: center;
|
|
1081
1261
|
gap: 10px;
|
|
1082
1262
|
padding: 18px 20px 14px;
|
|
1083
|
-
border-bottom: 1px solid var(--hsk-modal-divide,
|
|
1263
|
+
border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1264
|
+
flex-shrink: 0;
|
|
1084
1265
|
}
|
|
1085
1266
|
.hsk-sp-header-icon {
|
|
1086
1267
|
font-size: 18px;
|
|
@@ -1096,23 +1277,23 @@
|
|
|
1096
1277
|
.hsk-sp-header-title {
|
|
1097
1278
|
font-size: 14px;
|
|
1098
1279
|
font-weight: 600;
|
|
1099
|
-
color: var(--hsk-modal-text, #
|
|
1280
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1100
1281
|
white-space: nowrap;
|
|
1101
1282
|
overflow: hidden;
|
|
1102
1283
|
text-overflow: ellipsis;
|
|
1103
1284
|
}
|
|
1104
1285
|
.hsk-sp-header-sub {
|
|
1105
1286
|
font-size: 11px;
|
|
1106
|
-
color: var(--hsk-modal-muted, #
|
|
1287
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1107
1288
|
margin-top: 2px;
|
|
1108
1289
|
}
|
|
1109
1290
|
.hsk-sp-close {
|
|
1110
1291
|
width: 30px;
|
|
1111
1292
|
height: 30px;
|
|
1112
|
-
border-radius:
|
|
1113
|
-
border: 1px solid var(--hsk-modal-divide,
|
|
1293
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1294
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1114
1295
|
background: none;
|
|
1115
|
-
color: var(--hsk-modal-muted, #
|
|
1296
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1116
1297
|
cursor: pointer;
|
|
1117
1298
|
font-size: 18px;
|
|
1118
1299
|
display: flex;
|
|
@@ -1136,6 +1317,7 @@
|
|
|
1136
1317
|
transparent 100%);
|
|
1137
1318
|
background-size: 200% 100%;
|
|
1138
1319
|
animation: hsk-bar .9s linear infinite;
|
|
1320
|
+
flex-shrink: 0;
|
|
1139
1321
|
}
|
|
1140
1322
|
@keyframes hsk-bar {
|
|
1141
1323
|
0% {
|
|
@@ -1145,27 +1327,117 @@
|
|
|
1145
1327
|
background-position: -200% 0;
|
|
1146
1328
|
}
|
|
1147
1329
|
}
|
|
1148
|
-
.hsk-sp-
|
|
1149
|
-
|
|
1330
|
+
.hsk-sp-body {
|
|
1331
|
+
display: flex;
|
|
1332
|
+
flex: 1;
|
|
1333
|
+
overflow: hidden;
|
|
1334
|
+
}
|
|
1335
|
+
.hsk-sp-details-pane {
|
|
1336
|
+
flex: 1;
|
|
1337
|
+
overflow-y: auto;
|
|
1338
|
+
padding: 24px;
|
|
1339
|
+
border-right: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1150
1340
|
display: flex;
|
|
1151
1341
|
flex-direction: column;
|
|
1152
|
-
gap:
|
|
1342
|
+
gap: 20px;
|
|
1343
|
+
}
|
|
1344
|
+
.hsk-sp-chat-pane {
|
|
1345
|
+
flex: 1.2;
|
|
1346
|
+
display: flex;
|
|
1347
|
+
flex-direction: column;
|
|
1348
|
+
background: var(--hsk-chat-bg, #ffffff);
|
|
1349
|
+
}
|
|
1350
|
+
.hsk-sp-product-profile {
|
|
1351
|
+
display: flex;
|
|
1352
|
+
gap: 20px;
|
|
1353
|
+
}
|
|
1354
|
+
@media (max-width: 480px) {
|
|
1355
|
+
.hsk-sp-product-profile {
|
|
1356
|
+
flex-direction: column;
|
|
1357
|
+
}
|
|
1358
|
+
}
|
|
1359
|
+
.hsk-sp-details-imgwrap {
|
|
1360
|
+
width: 140px;
|
|
1361
|
+
height: 140px;
|
|
1362
|
+
flex-shrink: 0;
|
|
1363
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1364
|
+
background: #ffffff;
|
|
1365
|
+
display: flex;
|
|
1366
|
+
align-items: center;
|
|
1367
|
+
justify-content: center;
|
|
1368
|
+
padding: 8px;
|
|
1369
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1370
|
+
}
|
|
1371
|
+
.hsk-sp-details-imgwrap img {
|
|
1372
|
+
max-width: 100%;
|
|
1373
|
+
max-height: 100%;
|
|
1374
|
+
object-fit: contain;
|
|
1375
|
+
}
|
|
1376
|
+
.hsk-sp-details-meta {
|
|
1377
|
+
flex: 1;
|
|
1378
|
+
display: flex;
|
|
1379
|
+
flex-direction: column;
|
|
1380
|
+
gap: 6px;
|
|
1381
|
+
}
|
|
1382
|
+
.hsk-sp-details-name {
|
|
1383
|
+
font-size: 20px;
|
|
1384
|
+
font-weight: 700;
|
|
1385
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1386
|
+
margin: 0;
|
|
1387
|
+
line-height: 1.3;
|
|
1388
|
+
}
|
|
1389
|
+
.hsk-sp-details-desc {
|
|
1390
|
+
margin-top: 12px;
|
|
1391
|
+
}
|
|
1392
|
+
.hsk-sp-details-desc h4 {
|
|
1393
|
+
font-size: 13px;
|
|
1394
|
+
font-weight: 600;
|
|
1395
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1396
|
+
margin: 0 0 4px 0;
|
|
1397
|
+
}
|
|
1398
|
+
.hsk-sp-details-desc p {
|
|
1399
|
+
font-size: 13px;
|
|
1400
|
+
line-height: 1.5;
|
|
1401
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1402
|
+
margin: 0;
|
|
1403
|
+
}
|
|
1404
|
+
.hsk-sp-similar-section {
|
|
1405
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1406
|
+
padding-top: 20px;
|
|
1407
|
+
}
|
|
1408
|
+
.hsk-sp-similar-section h3 {
|
|
1409
|
+
font-size: 14px;
|
|
1410
|
+
font-weight: 600;
|
|
1411
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1412
|
+
margin: 0 0 12px 0;
|
|
1413
|
+
}
|
|
1414
|
+
.hsk-sp-results {
|
|
1415
|
+
padding: 10px 0;
|
|
1416
|
+
display: flex;
|
|
1417
|
+
flex-direction: row;
|
|
1418
|
+
gap: 12px;
|
|
1419
|
+
overflow-x: auto;
|
|
1420
|
+
scroll-snap-type: x mandatory;
|
|
1421
|
+
padding-bottom: 8px;
|
|
1153
1422
|
}
|
|
1154
1423
|
.hsk-sp-empty {
|
|
1155
1424
|
padding: 40px;
|
|
1156
1425
|
text-align: center;
|
|
1157
1426
|
font-size: 13px;
|
|
1158
|
-
color: var(--hsk-modal-muted, #
|
|
1427
|
+
color: var(--hsk-modal-muted, #999);
|
|
1159
1428
|
}
|
|
1160
1429
|
.hsk-sp-item {
|
|
1161
1430
|
display: flex;
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
border:
|
|
1166
|
-
|
|
1431
|
+
flex-direction: column;
|
|
1432
|
+
gap: 10px;
|
|
1433
|
+
padding: 12px;
|
|
1434
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1435
|
+
border: 1px solid var(--hsk-modal-item-border, #f1f3f4);
|
|
1436
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1167
1437
|
animation: hsk-toast-up .28s cubic-bezier(.22, .68, 0, 1.2) both;
|
|
1168
1438
|
overflow: hidden;
|
|
1439
|
+
flex: 0 0 170px;
|
|
1440
|
+
scroll-snap-align: start;
|
|
1169
1441
|
}
|
|
1170
1442
|
@keyframes hsk-toast-up {
|
|
1171
1443
|
from {
|
|
@@ -1178,11 +1450,11 @@
|
|
|
1178
1450
|
}
|
|
1179
1451
|
}
|
|
1180
1452
|
.hsk-sp-img-wrap {
|
|
1181
|
-
width:
|
|
1182
|
-
height:
|
|
1183
|
-
border-radius:
|
|
1453
|
+
width: 100%;
|
|
1454
|
+
height: 120px;
|
|
1455
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1184
1456
|
background: #fff;
|
|
1185
|
-
border: 1px solid var(--hsk-modal-divide,
|
|
1457
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1186
1458
|
flex-shrink: 0;
|
|
1187
1459
|
overflow: hidden;
|
|
1188
1460
|
display: flex;
|
|
@@ -1203,17 +1475,19 @@
|
|
|
1203
1475
|
min-width: 0;
|
|
1204
1476
|
display: flex;
|
|
1205
1477
|
flex-direction: column;
|
|
1206
|
-
|
|
1478
|
+
justify-content: space-between;
|
|
1479
|
+
gap: 6px;
|
|
1207
1480
|
}
|
|
1208
1481
|
.hsk-sp-item-name {
|
|
1209
|
-
font-size:
|
|
1482
|
+
font-size: 13px;
|
|
1210
1483
|
font-weight: 600;
|
|
1211
|
-
color: var(--hsk-modal-text, #
|
|
1484
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1212
1485
|
line-height: 1.35;
|
|
1213
1486
|
overflow: hidden;
|
|
1214
1487
|
display: -webkit-box;
|
|
1215
1488
|
-webkit-line-clamp: 2;
|
|
1216
1489
|
-webkit-box-orient: vertical;
|
|
1490
|
+
overflow: hidden;
|
|
1217
1491
|
}
|
|
1218
1492
|
.hsk-sp-item-cat {
|
|
1219
1493
|
font-size: 11px;
|
|
@@ -1225,28 +1499,29 @@
|
|
|
1225
1499
|
.hsk-sp-item-price-row {
|
|
1226
1500
|
display: flex;
|
|
1227
1501
|
align-items: baseline;
|
|
1228
|
-
gap:
|
|
1502
|
+
gap: 4px;
|
|
1229
1503
|
margin-top: 2px;
|
|
1504
|
+
flex-wrap: wrap;
|
|
1230
1505
|
}
|
|
1231
1506
|
.hsk-sp-item-price {
|
|
1232
|
-
font-size:
|
|
1507
|
+
font-size: 15px;
|
|
1233
1508
|
font-weight: 700;
|
|
1234
|
-
color: var(--hsk-modal-text, #
|
|
1509
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1235
1510
|
}
|
|
1236
1511
|
.hsk-sp-item-currency {
|
|
1237
|
-
font-size:
|
|
1238
|
-
color: var(--hsk-modal-muted, #
|
|
1512
|
+
font-size: 11px;
|
|
1513
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1239
1514
|
}
|
|
1240
1515
|
.hsk-sp-actions {
|
|
1241
1516
|
display: flex;
|
|
1242
1517
|
gap: 6px;
|
|
1243
|
-
margin-top:
|
|
1518
|
+
margin-top: auto;
|
|
1244
1519
|
}
|
|
1245
1520
|
.hsk-sp-action {
|
|
1246
1521
|
flex: 1;
|
|
1247
|
-
padding:
|
|
1248
|
-
border-radius:
|
|
1249
|
-
font-size:
|
|
1522
|
+
padding: 6px 8px;
|
|
1523
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1524
|
+
font-size: 11px;
|
|
1250
1525
|
font-weight: 600;
|
|
1251
1526
|
cursor: pointer;
|
|
1252
1527
|
border: 1px solid transparent;
|
|
@@ -1263,20 +1538,21 @@
|
|
|
1263
1538
|
opacity: .88;
|
|
1264
1539
|
}
|
|
1265
1540
|
.hsk-sp-action-secondary {
|
|
1266
|
-
background: var(--hsk-action-sec-bg,
|
|
1267
|
-
color: var(--hsk-modal-muted, #
|
|
1268
|
-
border-color: var(--hsk-modal-divide,
|
|
1541
|
+
background: var(--hsk-action-sec-bg, #f1f3f4);
|
|
1542
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1543
|
+
border-color: var(--hsk-modal-divide, #f1f3f4);
|
|
1269
1544
|
}
|
|
1270
1545
|
.hsk-sp-action-secondary:hover {
|
|
1271
|
-
background: var(--hsk-action-sec-bg-hover,
|
|
1272
|
-
color: var(--hsk-modal-text, #
|
|
1546
|
+
background: var(--hsk-action-sec-bg-hover, #e8eaed);
|
|
1547
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1273
1548
|
}
|
|
1274
1549
|
.hsk-sp-footer {
|
|
1275
1550
|
padding: 12px 20px;
|
|
1276
|
-
border-top: 1px solid var(--hsk-modal-divide,
|
|
1551
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1277
1552
|
display: flex;
|
|
1278
1553
|
align-items: center;
|
|
1279
1554
|
gap: 8px;
|
|
1555
|
+
flex-shrink: 0;
|
|
1280
1556
|
}
|
|
1281
1557
|
.hsk-sp-badge {
|
|
1282
1558
|
font-size: 10px;
|
|
@@ -1287,28 +1563,58 @@
|
|
|
1287
1563
|
background: rgba(255, 106, 51, .1);
|
|
1288
1564
|
border: 1px solid rgba(255, 106, 51, .25);
|
|
1289
1565
|
padding: 2px 8px;
|
|
1290
|
-
border-radius:
|
|
1566
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1291
1567
|
}
|
|
1292
1568
|
.hsk-sp-esc {
|
|
1293
1569
|
font-size: 11px;
|
|
1294
|
-
color: var(--hsk-modal-muted, #
|
|
1570
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1295
1571
|
margin-left: auto;
|
|
1296
1572
|
}
|
|
1573
|
+
@media (max-width: 768px) {
|
|
1574
|
+
.hsk-sp-body {
|
|
1575
|
+
flex-direction: column;
|
|
1576
|
+
overflow-y: auto;
|
|
1577
|
+
}
|
|
1578
|
+
.hsk-sp-details-pane {
|
|
1579
|
+
border-right: none;
|
|
1580
|
+
border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1581
|
+
flex: none;
|
|
1582
|
+
}
|
|
1583
|
+
.hsk-sp-chat-pane {
|
|
1584
|
+
flex: none;
|
|
1585
|
+
height: 400px;
|
|
1586
|
+
}
|
|
1587
|
+
}
|
|
1297
1588
|
@media (prefers-color-scheme: dark) {
|
|
1589
|
+
.hsk-sp-backdrop {
|
|
1590
|
+
background: #000000 !important;
|
|
1591
|
+
}
|
|
1298
1592
|
.hsk-sp-card {
|
|
1299
|
-
--hsk-modal-card-bg: #
|
|
1300
|
-
--hsk-modal-card-border:
|
|
1301
|
-
--hsk-modal-text: #
|
|
1302
|
-
--hsk-modal-muted: #
|
|
1303
|
-
--hsk-modal-divide:
|
|
1593
|
+
--hsk-modal-card-bg: #0a0a0a;
|
|
1594
|
+
--hsk-modal-card-border: #202124;
|
|
1595
|
+
--hsk-modal-text: #e8eaed;
|
|
1596
|
+
--hsk-modal-muted: #888;
|
|
1597
|
+
--hsk-modal-divide: #202124;
|
|
1304
1598
|
--hsk-modal-item-bg: #1a1a1b;
|
|
1305
|
-
--hsk-modal-item-border:
|
|
1306
|
-
--hsk-action-sec-bg:
|
|
1307
|
-
--hsk-action-sec-bg-hover:
|
|
1599
|
+
--hsk-modal-item-border: #202124;
|
|
1600
|
+
--hsk-action-sec-bg: #202124;
|
|
1601
|
+
--hsk-action-sec-bg-hover: #2d2f34;
|
|
1602
|
+
}
|
|
1603
|
+
.hsk-sp-details-imgwrap {
|
|
1604
|
+
background: #202124;
|
|
1605
|
+
border-color: #202124;
|
|
1308
1606
|
}
|
|
1309
1607
|
.hsk-sp-img-wrap {
|
|
1310
|
-
background: #
|
|
1311
|
-
border-color:
|
|
1608
|
+
background: #202124;
|
|
1609
|
+
border-color: #202124;
|
|
1610
|
+
}
|
|
1611
|
+
.hsk-sp-chat-pane {
|
|
1612
|
+
background: var(--hsk-chat-bg, #0a0a0a);
|
|
1613
|
+
}
|
|
1614
|
+
}
|
|
1615
|
+
@media (prefers-color-scheme: light) {
|
|
1616
|
+
.hsk-sp-backdrop {
|
|
1617
|
+
background: #ffffff !important;
|
|
1312
1618
|
}
|
|
1313
1619
|
}
|
|
1314
1620
|
.hsk-markdown-p {
|
|
@@ -1328,8 +1634,13 @@
|
|
|
1328
1634
|
.hsk-table-wrapper {
|
|
1329
1635
|
overflow-x: auto;
|
|
1330
1636
|
margin: 8px 0;
|
|
1331
|
-
border-radius:
|
|
1332
|
-
border: 1px solid var(--hsk-border, #
|
|
1637
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1638
|
+
border: 1px solid var(--hsk-border, #f1f3f4);
|
|
1639
|
+
}
|
|
1640
|
+
@media (prefers-color-scheme: dark) {
|
|
1641
|
+
.hsk-table-wrapper {
|
|
1642
|
+
border-color: #202124;
|
|
1643
|
+
}
|
|
1333
1644
|
}
|
|
1334
1645
|
.hsk-markdown-table {
|
|
1335
1646
|
width: 100%;
|
|
@@ -1340,7 +1651,13 @@
|
|
|
1340
1651
|
.hsk-markdown-table th,
|
|
1341
1652
|
.hsk-markdown-table td {
|
|
1342
1653
|
padding: 6px 10px;
|
|
1343
|
-
border-bottom: 1px solid var(--hsk-border, #
|
|
1654
|
+
border-bottom: 1px solid var(--hsk-border, #f1f3f4);
|
|
1655
|
+
}
|
|
1656
|
+
@media (prefers-color-scheme: dark) {
|
|
1657
|
+
.hsk-markdown-table th,
|
|
1658
|
+
.hsk-markdown-table td {
|
|
1659
|
+
border-bottom-color: #202124;
|
|
1660
|
+
}
|
|
1344
1661
|
}
|
|
1345
1662
|
.hsk-markdown-table tr:last-child td {
|
|
1346
1663
|
border-bottom: none;
|
|
@@ -1363,8 +1680,577 @@
|
|
|
1363
1680
|
font-size: 0.85em;
|
|
1364
1681
|
background-color: rgba(128, 128, 128, 0.15);
|
|
1365
1682
|
padding: 0.2em 0.4em;
|
|
1366
|
-
border-radius:
|
|
1683
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1367
1684
|
color: inherit;
|
|
1368
1685
|
word-break: break-word;
|
|
1369
1686
|
}
|
|
1687
|
+
.hsk-sp-item-original-price {
|
|
1688
|
+
font-size: 12px;
|
|
1689
|
+
text-decoration: line-through;
|
|
1690
|
+
color: var(--hsk-modal-muted, #888);
|
|
1691
|
+
margin-left: 6px;
|
|
1692
|
+
}
|
|
1693
|
+
.hsk-sp-item-discount {
|
|
1694
|
+
font-size: 11px;
|
|
1695
|
+
font-weight: 600;
|
|
1696
|
+
color: #10b981;
|
|
1697
|
+
margin-left: 6px;
|
|
1698
|
+
}
|
|
1699
|
+
.hsk-sp-item-meta-badges {
|
|
1700
|
+
display: flex;
|
|
1701
|
+
flex-wrap: wrap;
|
|
1702
|
+
gap: 8px;
|
|
1703
|
+
margin-top: 6px;
|
|
1704
|
+
}
|
|
1705
|
+
.hsk-sp-meta-badge {
|
|
1706
|
+
font-size: 11px;
|
|
1707
|
+
font-weight: 500;
|
|
1708
|
+
padding: 3px 8px;
|
|
1709
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1710
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1711
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1712
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1713
|
+
}
|
|
1714
|
+
.hsk-sp-meta-badge-rating {
|
|
1715
|
+
color: #f59e0b;
|
|
1716
|
+
background: rgba(245, 158, 11, 0.08);
|
|
1717
|
+
border-color: rgba(245, 158, 11, 0.2);
|
|
1718
|
+
}
|
|
1719
|
+
.hsk-sp-meta-badge-avail.in-stock {
|
|
1720
|
+
color: #10b981;
|
|
1721
|
+
background: rgba(16, 185, 129, 0.08);
|
|
1722
|
+
border-color: rgba(16, 185, 129, 0.2);
|
|
1723
|
+
}
|
|
1724
|
+
.hsk-sp-meta-badge-avail.out-stock {
|
|
1725
|
+
color: #ef4444;
|
|
1726
|
+
background: rgba(239, 68, 68, 0.08);
|
|
1727
|
+
border-color: rgba(239, 68, 68, 0.2);
|
|
1728
|
+
}
|
|
1729
|
+
.hsk-sp-item-brand {
|
|
1730
|
+
font-size: 11px;
|
|
1731
|
+
font-weight: 700;
|
|
1732
|
+
color: var(--hsk-modal-muted, #888);
|
|
1733
|
+
text-transform: uppercase;
|
|
1734
|
+
letter-spacing: .05em;
|
|
1735
|
+
margin-bottom: -2px;
|
|
1736
|
+
}
|
|
1737
|
+
.hsk-sp-details-specs {
|
|
1738
|
+
margin-top: 20px;
|
|
1739
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1740
|
+
padding-top: 20px;
|
|
1741
|
+
}
|
|
1742
|
+
.hsk-sp-details-specs h4 {
|
|
1743
|
+
font-size: 13px;
|
|
1744
|
+
font-weight: 600;
|
|
1745
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1746
|
+
margin: 0 0 10px 0;
|
|
1747
|
+
}
|
|
1748
|
+
.hsk-sp-specs-grid {
|
|
1749
|
+
display: grid;
|
|
1750
|
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
1751
|
+
gap: 8px;
|
|
1752
|
+
}
|
|
1753
|
+
.hsk-sp-spec-row {
|
|
1754
|
+
display: flex;
|
|
1755
|
+
justify-content: space-between;
|
|
1756
|
+
align-items: center;
|
|
1757
|
+
padding: 8px 12px;
|
|
1758
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1759
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1760
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1761
|
+
font-size: 12px;
|
|
1762
|
+
gap: 8px;
|
|
1763
|
+
}
|
|
1764
|
+
.hsk-sp-spec-label {
|
|
1765
|
+
font-weight: 500;
|
|
1766
|
+
color: var(--hsk-modal-muted, #888);
|
|
1767
|
+
}
|
|
1768
|
+
.hsk-sp-spec-value {
|
|
1769
|
+
font-weight: 600;
|
|
1770
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1771
|
+
text-align: right;
|
|
1772
|
+
max-width: 60%;
|
|
1773
|
+
white-space: nowrap;
|
|
1774
|
+
overflow: hidden;
|
|
1775
|
+
text-overflow: ellipsis;
|
|
1776
|
+
}
|
|
1777
|
+
@media (prefers-color-scheme: dark) {
|
|
1778
|
+
.hsk-sp-details-specs {
|
|
1779
|
+
border-top-color: #202124;
|
|
1780
|
+
}
|
|
1781
|
+
.hsk-sp-spec-row {
|
|
1782
|
+
background: #1a1a1b;
|
|
1783
|
+
border-color: #202124;
|
|
1784
|
+
}
|
|
1785
|
+
}
|
|
1786
|
+
.hsk-chat-widget ::-webkit-scrollbar,
|
|
1787
|
+
.hsk-sp-card ::-webkit-scrollbar,
|
|
1788
|
+
.hsk-cb-msgs ::-webkit-scrollbar,
|
|
1789
|
+
.hsk-sp-details-pane ::-webkit-scrollbar,
|
|
1790
|
+
.hsk-sp-results ::-webkit-scrollbar,
|
|
1791
|
+
.hsk-chat-messages ::-webkit-scrollbar {
|
|
1792
|
+
width: 4px;
|
|
1793
|
+
height: 4px;
|
|
1794
|
+
}
|
|
1795
|
+
.hsk-chat-widget ::-webkit-scrollbar-track,
|
|
1796
|
+
.hsk-sp-card ::-webkit-scrollbar-track,
|
|
1797
|
+
.hsk-cb-msgs ::-webkit-scrollbar-track,
|
|
1798
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-track,
|
|
1799
|
+
.hsk-sp-results ::-webkit-scrollbar-track,
|
|
1800
|
+
.hsk-chat-messages ::-webkit-scrollbar-track {
|
|
1801
|
+
background: transparent;
|
|
1802
|
+
}
|
|
1803
|
+
.hsk-chat-widget ::-webkit-scrollbar-thumb,
|
|
1804
|
+
.hsk-sp-card ::-webkit-scrollbar-thumb,
|
|
1805
|
+
.hsk-cb-msgs ::-webkit-scrollbar-thumb,
|
|
1806
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-thumb,
|
|
1807
|
+
.hsk-sp-results ::-webkit-scrollbar-thumb,
|
|
1808
|
+
.hsk-chat-messages ::-webkit-scrollbar-thumb {
|
|
1809
|
+
background: rgba(0, 0, 0, 0.08);
|
|
1810
|
+
border-radius: 10px;
|
|
1811
|
+
}
|
|
1812
|
+
@media (prefers-color-scheme: dark) {
|
|
1813
|
+
.hsk-chat-widget ::-webkit-scrollbar-thumb,
|
|
1814
|
+
.hsk-sp-card ::-webkit-scrollbar-thumb,
|
|
1815
|
+
.hsk-cb-msgs ::-webkit-scrollbar-thumb,
|
|
1816
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-thumb,
|
|
1817
|
+
.hsk-sp-results ::-webkit-scrollbar-thumb,
|
|
1818
|
+
.hsk-chat-messages ::-webkit-scrollbar-thumb {
|
|
1819
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1820
|
+
}
|
|
1821
|
+
}
|
|
1822
|
+
.hsk-cb-msgs,
|
|
1823
|
+
.hsk-sp-details-pane,
|
|
1824
|
+
.hsk-sp-results,
|
|
1825
|
+
.hsk-chat-messages {
|
|
1826
|
+
scrollbar-width: thin;
|
|
1827
|
+
scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
|
|
1828
|
+
}
|
|
1829
|
+
@media (prefers-color-scheme: dark) {
|
|
1830
|
+
.hsk-cb-msgs,
|
|
1831
|
+
.hsk-sp-details-pane,
|
|
1832
|
+
.hsk-sp-results,
|
|
1833
|
+
.hsk-chat-messages {
|
|
1834
|
+
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
|
|
1835
|
+
}
|
|
1836
|
+
}
|
|
1837
|
+
.hsk-sp-specs-horizontal {
|
|
1838
|
+
display: flex;
|
|
1839
|
+
flex-wrap: wrap;
|
|
1840
|
+
gap: 8px;
|
|
1841
|
+
margin-top: 12px;
|
|
1842
|
+
}
|
|
1843
|
+
.hsk-sp-spec-item-horizontal {
|
|
1844
|
+
display: inline-flex;
|
|
1845
|
+
align-items: center;
|
|
1846
|
+
gap: 6px;
|
|
1847
|
+
padding: 4px 10px;
|
|
1848
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1849
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1850
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1851
|
+
font-size: 11px;
|
|
1852
|
+
}
|
|
1853
|
+
.hsk-sp-spec-label-horizontal {
|
|
1854
|
+
font-weight: 500;
|
|
1855
|
+
color: var(--hsk-modal-muted, #888);
|
|
1856
|
+
}
|
|
1857
|
+
.hsk-sp-spec-value-horizontal {
|
|
1858
|
+
font-weight: 600;
|
|
1859
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1860
|
+
}
|
|
1861
|
+
@media (prefers-color-scheme: dark) {
|
|
1862
|
+
.hsk-sp-spec-item-horizontal {
|
|
1863
|
+
background: #1a1a1b;
|
|
1864
|
+
border-color: #202124;
|
|
1865
|
+
}
|
|
1866
|
+
}
|
|
1867
|
+
.hsk-cart-backdrop {
|
|
1868
|
+
position: fixed;
|
|
1869
|
+
inset: 0;
|
|
1870
|
+
background: rgba(0, 0, 0, 0.4);
|
|
1871
|
+
backdrop-filter: blur(4px);
|
|
1872
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1873
|
+
z-index: 99999;
|
|
1874
|
+
display: flex;
|
|
1875
|
+
align-items: flex-end;
|
|
1876
|
+
justify-content: center;
|
|
1877
|
+
animation: hskFadeIn 0.3s ease forwards;
|
|
1878
|
+
}
|
|
1879
|
+
.hsk-cart-bottom-sheet {
|
|
1880
|
+
--hsk-bg: var(--bg, var(--background, #ffffff));
|
|
1881
|
+
--hsk-text: var(--text-primary, var(--foreground, #18181b));
|
|
1882
|
+
--hsk-border: var(--border, var(--borders, #f4f4f5));
|
|
1883
|
+
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
1884
|
+
--hsk-primary-color: var(--hsk-primary);
|
|
1885
|
+
--hsk-hover: var(--surface, var(--hsk-border, #f4f4f5));
|
|
1886
|
+
--hsk-muted: var(--text-muted, var(--accent, #71717a));
|
|
1887
|
+
width: 100%;
|
|
1888
|
+
max-width: 600px;
|
|
1889
|
+
background: var(--hsk-bg);
|
|
1890
|
+
color: var(--hsk-text);
|
|
1891
|
+
border-radius: 24px 24px 0 0;
|
|
1892
|
+
padding: 24px;
|
|
1893
|
+
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
|
|
1894
|
+
transform: translateY(100%);
|
|
1895
|
+
animation: hskSlideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
1896
|
+
display: flex;
|
|
1897
|
+
flex-direction: column;
|
|
1898
|
+
max-height: 85vh;
|
|
1899
|
+
z-index: 100000;
|
|
1900
|
+
border-top: 1px solid var(--hsk-border);
|
|
1901
|
+
}
|
|
1902
|
+
@keyframes hskSlideUp {
|
|
1903
|
+
from {
|
|
1904
|
+
transform: translateY(100%);
|
|
1905
|
+
}
|
|
1906
|
+
to {
|
|
1907
|
+
transform: translateY(0);
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1910
|
+
@keyframes hskFadeIn {
|
|
1911
|
+
from {
|
|
1912
|
+
opacity: 0;
|
|
1913
|
+
}
|
|
1914
|
+
to {
|
|
1915
|
+
opacity: 1;
|
|
1916
|
+
}
|
|
1917
|
+
}
|
|
1918
|
+
@keyframes hskSlideUpCenter {
|
|
1919
|
+
to {
|
|
1920
|
+
transform: translateY(0) scale(1);
|
|
1921
|
+
opacity: 1;
|
|
1922
|
+
}
|
|
1923
|
+
}
|
|
1924
|
+
.hsk-cart-sheet-handle {
|
|
1925
|
+
display: none;
|
|
1926
|
+
}
|
|
1927
|
+
[data-hsk-theme=dark] .hsk-cart-sheet-handle {
|
|
1928
|
+
display: none;
|
|
1929
|
+
}
|
|
1930
|
+
.hsk-cart-sheet-header {
|
|
1931
|
+
display: flex;
|
|
1932
|
+
justify-content: space-between;
|
|
1933
|
+
align-items: center;
|
|
1934
|
+
margin-bottom: 20px;
|
|
1935
|
+
}
|
|
1936
|
+
.hsk-cart-sheet-header h2 {
|
|
1937
|
+
margin: 0;
|
|
1938
|
+
font-size: 20px;
|
|
1939
|
+
font-weight: 600;
|
|
1940
|
+
}
|
|
1941
|
+
.hsk-close-btn {
|
|
1942
|
+
background: none;
|
|
1943
|
+
border: none;
|
|
1944
|
+
font-size: 24px;
|
|
1945
|
+
cursor: pointer;
|
|
1946
|
+
color: var(--hsk-muted);
|
|
1947
|
+
padding: 0;
|
|
1948
|
+
line-height: 1;
|
|
1949
|
+
}
|
|
1950
|
+
.hsk-cart-sheet-content {
|
|
1951
|
+
flex: 1;
|
|
1952
|
+
overflow-y: auto;
|
|
1953
|
+
margin-bottom: 20px;
|
|
1954
|
+
}
|
|
1955
|
+
.hsk-cart-empty,
|
|
1956
|
+
.hsk-cart-loading {
|
|
1957
|
+
text-align: center;
|
|
1958
|
+
padding: 40px 0;
|
|
1959
|
+
color: #71717a;
|
|
1960
|
+
}
|
|
1961
|
+
.hsk-cart-items {
|
|
1962
|
+
list-style: none;
|
|
1963
|
+
padding: 0;
|
|
1964
|
+
margin: 0;
|
|
1965
|
+
display: flex;
|
|
1966
|
+
flex-direction: column;
|
|
1967
|
+
gap: 16px;
|
|
1968
|
+
}
|
|
1969
|
+
.hsk-cart-item {
|
|
1970
|
+
display: flex;
|
|
1971
|
+
align-items: center;
|
|
1972
|
+
gap: 12px;
|
|
1973
|
+
padding-bottom: 16px;
|
|
1974
|
+
border-bottom: 1px solid var(--hsk-border, #f4f4f5);
|
|
1975
|
+
}
|
|
1976
|
+
.hsk-cart-item-img {
|
|
1977
|
+
width: 56px;
|
|
1978
|
+
height: 56px;
|
|
1979
|
+
border-radius: 8px;
|
|
1980
|
+
object-fit: cover;
|
|
1981
|
+
background: var(--hsk-border, #f4f4f5);
|
|
1982
|
+
}
|
|
1983
|
+
.hsk-cart-item-info {
|
|
1984
|
+
flex: 1;
|
|
1985
|
+
display: flex;
|
|
1986
|
+
flex-direction: column;
|
|
1987
|
+
gap: 4px;
|
|
1988
|
+
}
|
|
1989
|
+
.hsk-cart-item-name {
|
|
1990
|
+
font-weight: 500;
|
|
1991
|
+
font-size: 14px;
|
|
1992
|
+
color: var(--hsk-text, #18181b);
|
|
1993
|
+
}
|
|
1994
|
+
.hsk-cart-item-price {
|
|
1995
|
+
color: var(--hsk-muted, #71717a);
|
|
1996
|
+
font-size: 14px;
|
|
1997
|
+
}
|
|
1998
|
+
.hsk-cart-item-qty {
|
|
1999
|
+
font-weight: 600;
|
|
2000
|
+
font-size: 14px;
|
|
2001
|
+
background: var(--hsk-hover, #f4f4f5);
|
|
2002
|
+
color: var(--hsk-text, #18181b);
|
|
2003
|
+
padding: 4px 10px;
|
|
2004
|
+
border-radius: 12px;
|
|
2005
|
+
}
|
|
2006
|
+
.hsk-cart-sheet-footer {
|
|
2007
|
+
padding-top: 16px;
|
|
2008
|
+
border-top: 1px solid var(--hsk-border, #f4f4f5);
|
|
2009
|
+
display: flex;
|
|
2010
|
+
flex-direction: column;
|
|
2011
|
+
gap: 16px;
|
|
2012
|
+
}
|
|
2013
|
+
.hsk-cart-total {
|
|
2014
|
+
display: flex;
|
|
2015
|
+
justify-content: space-between;
|
|
2016
|
+
align-items: center;
|
|
2017
|
+
font-weight: 700;
|
|
2018
|
+
font-size: 18px;
|
|
2019
|
+
color: var(--hsk-text, #18181b);
|
|
2020
|
+
}
|
|
2021
|
+
.hsk-checkout-btn {
|
|
2022
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
2023
|
+
color: white;
|
|
2024
|
+
border: none;
|
|
2025
|
+
padding: 16px;
|
|
2026
|
+
border-radius: 12px;
|
|
2027
|
+
font-size: 16px;
|
|
2028
|
+
font-weight: 600;
|
|
2029
|
+
cursor: pointer;
|
|
2030
|
+
transition: opacity 0.2s;
|
|
2031
|
+
width: 100%;
|
|
2032
|
+
}
|
|
2033
|
+
.hsk-checkout-btn:hover {
|
|
2034
|
+
opacity: 0.9;
|
|
2035
|
+
}
|
|
2036
|
+
.hsk-cart-trigger {
|
|
2037
|
+
--hsk-bg: var(--bg, var(--background, #ffffff));
|
|
2038
|
+
--hsk-text: var(--text-primary, var(--foreground, #18181b));
|
|
2039
|
+
--hsk-border: var(--border, var(--borders, #e4e4e7));
|
|
2040
|
+
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
2041
|
+
--hsk-primary-color: var(--hsk-primary);
|
|
2042
|
+
--hsk-hover: var(--surface, var(--hsk-border, #f4f4f5));
|
|
2043
|
+
background: transparent;
|
|
2044
|
+
border: 1px solid var(--hsk-border);
|
|
2045
|
+
color: var(--hsk-text);
|
|
2046
|
+
border-radius: 20px;
|
|
2047
|
+
font-weight: 500;
|
|
2048
|
+
cursor: pointer;
|
|
2049
|
+
display: inline-flex;
|
|
2050
|
+
align-items: center;
|
|
2051
|
+
justify-content: center;
|
|
2052
|
+
position: relative;
|
|
2053
|
+
}
|
|
2054
|
+
.hsk-cart-trigger-badge {
|
|
2055
|
+
position: absolute;
|
|
2056
|
+
top: -4px;
|
|
2057
|
+
right: -4px;
|
|
2058
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
2059
|
+
color: white;
|
|
2060
|
+
font-size: 10px;
|
|
2061
|
+
width: 18px;
|
|
2062
|
+
height: 18px;
|
|
2063
|
+
display: flex;
|
|
2064
|
+
align-items: center;
|
|
2065
|
+
justify-content: center;
|
|
2066
|
+
border-radius: 9px;
|
|
2067
|
+
font-weight: bold;
|
|
2068
|
+
}
|
|
2069
|
+
.hsk-cart-badge {
|
|
2070
|
+
display: inline-flex;
|
|
2071
|
+
align-items: center;
|
|
2072
|
+
justify-content: center;
|
|
2073
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
2074
|
+
color: white;
|
|
2075
|
+
font-size: 12px;
|
|
2076
|
+
min-width: 18px;
|
|
2077
|
+
height: 18px;
|
|
2078
|
+
padding: 0 4px;
|
|
2079
|
+
border-radius: 9px;
|
|
2080
|
+
font-weight: 600;
|
|
2081
|
+
}
|
|
2082
|
+
[data-hsk-theme=dark] .hsk-cart-bottom-sheet {
|
|
2083
|
+
--hsk-bg: #0a0a0a;
|
|
2084
|
+
--hsk-text: #fafafa;
|
|
2085
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2086
|
+
--hsk-muted: #888;
|
|
2087
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2088
|
+
}
|
|
2089
|
+
[data-hsk-theme=dark] .hsk-cart-trigger {
|
|
2090
|
+
--hsk-bg: #0a0a0a;
|
|
2091
|
+
--hsk-text: white;
|
|
2092
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2093
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2094
|
+
}
|
|
2095
|
+
@media (prefers-color-scheme: dark) {
|
|
2096
|
+
.hsk-cart-bottom-sheet {
|
|
2097
|
+
--hsk-bg: #0a0a0a;
|
|
2098
|
+
--hsk-text: #e8eaed;
|
|
2099
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2100
|
+
--hsk-muted: #888;
|
|
2101
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2102
|
+
}
|
|
2103
|
+
.hsk-cart-trigger {
|
|
2104
|
+
--hsk-bg: #0a0a0a;
|
|
2105
|
+
--hsk-text: white;
|
|
2106
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2107
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
@media (prefers-color-scheme: light) {
|
|
2111
|
+
.hsk-cart-bottom-sheet {
|
|
2112
|
+
--hsk-bg: #ffffff;
|
|
2113
|
+
--hsk-text: #18181b;
|
|
2114
|
+
--hsk-border: #f4f4f5;
|
|
2115
|
+
--hsk-muted: #71717a;
|
|
2116
|
+
--hsk-hover: #f4f4f5;
|
|
2117
|
+
}
|
|
2118
|
+
.hsk-cart-trigger {
|
|
2119
|
+
--hsk-bg: #ffffff;
|
|
2120
|
+
--hsk-text: #18181b;
|
|
2121
|
+
--hsk-border: #e4e4e7;
|
|
2122
|
+
--hsk-hover: #f4f4f5;
|
|
2123
|
+
}
|
|
2124
|
+
.hsk-cart-backdrop {
|
|
2125
|
+
background: rgba(255, 255, 255, 0.6);
|
|
2126
|
+
}
|
|
2127
|
+
}
|
|
2128
|
+
.hsk-checkout-modal {
|
|
2129
|
+
position: relative;
|
|
2130
|
+
width: 90%;
|
|
2131
|
+
max-width: 800px;
|
|
2132
|
+
max-height: 90vh;
|
|
2133
|
+
background: var(--hsk-bg, #ffffff);
|
|
2134
|
+
color: var(--hsk-text, #18181b);
|
|
2135
|
+
border: 1px solid var(--hsk-border, #e4e4e7);
|
|
2136
|
+
border-radius: 12px;
|
|
2137
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
2138
|
+
display: flex;
|
|
2139
|
+
flex-direction: column;
|
|
2140
|
+
overflow: hidden;
|
|
2141
|
+
animation: hskScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
2142
|
+
}
|
|
2143
|
+
.hsk-checkout-header {
|
|
2144
|
+
padding: 16px 20px;
|
|
2145
|
+
border-bottom: 1px solid var(--hsk-border, #e4e4e7);
|
|
2146
|
+
display: flex;
|
|
2147
|
+
justify-content: space-between;
|
|
2148
|
+
align-items: center;
|
|
2149
|
+
}
|
|
2150
|
+
.hsk-checkout-header h2 {
|
|
2151
|
+
margin: 0;
|
|
2152
|
+
font-size: 1.1em;
|
|
2153
|
+
}
|
|
2154
|
+
.hsk-checkout-content {
|
|
2155
|
+
padding: 20px;
|
|
2156
|
+
overflow-y: auto;
|
|
2157
|
+
}
|
|
2158
|
+
.hsk-checkout-split {
|
|
2159
|
+
display: flex;
|
|
2160
|
+
gap: 30px;
|
|
2161
|
+
}
|
|
2162
|
+
@media (max-width: 600px) {
|
|
2163
|
+
.hsk-checkout-split {
|
|
2164
|
+
flex-direction: column;
|
|
2165
|
+
}
|
|
2166
|
+
}
|
|
2167
|
+
.hsk-checkout-summary,
|
|
2168
|
+
.hsk-checkout-payment {
|
|
2169
|
+
flex: 1;
|
|
2170
|
+
}
|
|
2171
|
+
.hsk-checkout-summary h3,
|
|
2172
|
+
.hsk-checkout-payment h3 {
|
|
2173
|
+
font-size: 1em;
|
|
2174
|
+
margin-top: 0;
|
|
2175
|
+
margin-bottom: 15px;
|
|
2176
|
+
border-bottom: 1px solid var(--hsk-border, #e4e4e7);
|
|
2177
|
+
padding-bottom: 8px;
|
|
2178
|
+
}
|
|
2179
|
+
.hsk-checkout-items {
|
|
2180
|
+
list-style: none;
|
|
2181
|
+
margin: 0;
|
|
2182
|
+
padding: 0;
|
|
2183
|
+
}
|
|
2184
|
+
.hsk-checkout-items li {
|
|
2185
|
+
display: flex;
|
|
2186
|
+
justify-content: space-between;
|
|
2187
|
+
font-size: 0.9em;
|
|
2188
|
+
margin-bottom: 8px;
|
|
2189
|
+
}
|
|
2190
|
+
.hsk-checkout-total {
|
|
2191
|
+
display: flex;
|
|
2192
|
+
justify-content: space-between;
|
|
2193
|
+
font-weight: bold;
|
|
2194
|
+
margin-top: 15px;
|
|
2195
|
+
padding-top: 15px;
|
|
2196
|
+
border-top: 1px solid var(--hsk-border, #e4e4e7);
|
|
2197
|
+
}
|
|
2198
|
+
.hsk-payment-options {
|
|
2199
|
+
display: flex;
|
|
2200
|
+
flex-direction: column;
|
|
2201
|
+
gap: 10px;
|
|
2202
|
+
}
|
|
2203
|
+
.hsk-pay-btn {
|
|
2204
|
+
width: 100%;
|
|
2205
|
+
padding: 12px;
|
|
2206
|
+
border-radius: 8px;
|
|
2207
|
+
font-weight: bold;
|
|
2208
|
+
cursor: pointer;
|
|
2209
|
+
border: none;
|
|
2210
|
+
transition: opacity 0.2s;
|
|
2211
|
+
color: white;
|
|
2212
|
+
}
|
|
2213
|
+
.hsk-pay-btn:disabled {
|
|
2214
|
+
opacity: 0.5;
|
|
2215
|
+
cursor: not-allowed;
|
|
2216
|
+
}
|
|
2217
|
+
.hsk-pay-mpesa {
|
|
2218
|
+
background: #4caf50;
|
|
2219
|
+
}
|
|
2220
|
+
.hsk-pay-equity {
|
|
2221
|
+
background: #8b4513;
|
|
2222
|
+
}
|
|
2223
|
+
.hsk-pay-stripe {
|
|
2224
|
+
background: #6772e5;
|
|
2225
|
+
}
|
|
2226
|
+
.hsk-pay-paypal {
|
|
2227
|
+
background: #003087;
|
|
2228
|
+
}
|
|
2229
|
+
.hsk-checkout-success {
|
|
2230
|
+
text-align: center;
|
|
2231
|
+
padding: 40px 20px;
|
|
2232
|
+
}
|
|
2233
|
+
.hsk-success-icon {
|
|
2234
|
+
width: 64px;
|
|
2235
|
+
height: 64px;
|
|
2236
|
+
color: #4caf50;
|
|
2237
|
+
margin-bottom: 16px;
|
|
2238
|
+
}
|
|
2239
|
+
@keyframes hskScaleIn {
|
|
2240
|
+
0% {
|
|
2241
|
+
transform: scale(0.95);
|
|
2242
|
+
opacity: 0;
|
|
2243
|
+
}
|
|
2244
|
+
100% {
|
|
2245
|
+
transform: scale(1);
|
|
2246
|
+
opacity: 1;
|
|
2247
|
+
}
|
|
2248
|
+
}
|
|
2249
|
+
@media (prefers-color-scheme: dark) {
|
|
2250
|
+
.hsk-checkout-modal {
|
|
2251
|
+
--hsk-bg: #1a1a1b;
|
|
2252
|
+
--hsk-text: #e8eaed;
|
|
2253
|
+
--hsk-border: #202124;
|
|
2254
|
+
}
|
|
2255
|
+
}
|
|
1370
2256
|
/*# sourceMappingURL=index.css.map */
|