@huskel/sdk 0.4.2 → 0.4.3
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 +1008 -159
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +64 -27
- package/dist/index.d.ts +64 -27
- package/dist/index.js +798 -243
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +786 -234
- 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;
|
|
@@ -1012,7 +1140,7 @@
|
|
|
1012
1140
|
justify-content: center;
|
|
1013
1141
|
width: 32px;
|
|
1014
1142
|
height: 32px;
|
|
1015
|
-
border-radius:
|
|
1143
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1016
1144
|
border: 1px solid var(--hsk-sp-border, rgba(255,106,51,.35));
|
|
1017
1145
|
background: var(--hsk-sp-bg, rgba(255,106,51,.08));
|
|
1018
1146
|
color: var(--hsk-primary);
|
|
@@ -1039,11 +1167,11 @@
|
|
|
1039
1167
|
inset: 0;
|
|
1040
1168
|
z-index: 99998;
|
|
1041
1169
|
display: flex;
|
|
1042
|
-
align-items:
|
|
1170
|
+
align-items: center;
|
|
1043
1171
|
justify-content: center;
|
|
1044
|
-
padding:
|
|
1172
|
+
padding: 24px;
|
|
1045
1173
|
animation: hsk-bd-in .2s ease-out both;
|
|
1046
|
-
|
|
1174
|
+
background: #ffffff !important;
|
|
1047
1175
|
}
|
|
1048
1176
|
@keyframes hsk-bd-in {
|
|
1049
1177
|
from {
|
|
@@ -1057,13 +1185,28 @@
|
|
|
1057
1185
|
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
1058
1186
|
width: 100%;
|
|
1059
1187
|
max-width: 600px;
|
|
1060
|
-
border-radius:
|
|
1188
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1061
1189
|
overflow: hidden;
|
|
1062
1190
|
animation: hsk-card-in .24s cubic-bezier(.34, 1.36, .64, 1) both;
|
|
1063
1191
|
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, .
|
|
1192
|
+
background: var(--hsk-modal-card-bg, #ffffff);
|
|
1193
|
+
border: 1px solid var(--hsk-modal-card-border, #f1f3f4);
|
|
1194
|
+
box-shadow: 0 32px 80px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
|
|
1195
|
+
display: flex;
|
|
1196
|
+
flex-direction: column;
|
|
1197
|
+
}
|
|
1198
|
+
.hsk-sp-card.hsk-sp-fullscreen {
|
|
1199
|
+
max-width: 1000px;
|
|
1200
|
+
width: 90vw;
|
|
1201
|
+
height: 85vh;
|
|
1202
|
+
max-height: 800px;
|
|
1203
|
+
}
|
|
1204
|
+
@media (max-width: 768px) {
|
|
1205
|
+
.hsk-sp-card.hsk-sp-fullscreen {
|
|
1206
|
+
width: 95vw;
|
|
1207
|
+
height: 90vh;
|
|
1208
|
+
max-height: none;
|
|
1209
|
+
}
|
|
1067
1210
|
}
|
|
1068
1211
|
@keyframes hsk-card-in {
|
|
1069
1212
|
from {
|
|
@@ -1080,7 +1223,8 @@
|
|
|
1080
1223
|
align-items: center;
|
|
1081
1224
|
gap: 10px;
|
|
1082
1225
|
padding: 18px 20px 14px;
|
|
1083
|
-
border-bottom: 1px solid var(--hsk-modal-divide,
|
|
1226
|
+
border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1227
|
+
flex-shrink: 0;
|
|
1084
1228
|
}
|
|
1085
1229
|
.hsk-sp-header-icon {
|
|
1086
1230
|
font-size: 18px;
|
|
@@ -1096,23 +1240,23 @@
|
|
|
1096
1240
|
.hsk-sp-header-title {
|
|
1097
1241
|
font-size: 14px;
|
|
1098
1242
|
font-weight: 600;
|
|
1099
|
-
color: var(--hsk-modal-text, #
|
|
1243
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1100
1244
|
white-space: nowrap;
|
|
1101
1245
|
overflow: hidden;
|
|
1102
1246
|
text-overflow: ellipsis;
|
|
1103
1247
|
}
|
|
1104
1248
|
.hsk-sp-header-sub {
|
|
1105
1249
|
font-size: 11px;
|
|
1106
|
-
color: var(--hsk-modal-muted, #
|
|
1250
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1107
1251
|
margin-top: 2px;
|
|
1108
1252
|
}
|
|
1109
1253
|
.hsk-sp-close {
|
|
1110
1254
|
width: 30px;
|
|
1111
1255
|
height: 30px;
|
|
1112
|
-
border-radius:
|
|
1113
|
-
border: 1px solid var(--hsk-modal-divide,
|
|
1256
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1257
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1114
1258
|
background: none;
|
|
1115
|
-
color: var(--hsk-modal-muted, #
|
|
1259
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1116
1260
|
cursor: pointer;
|
|
1117
1261
|
font-size: 18px;
|
|
1118
1262
|
display: flex;
|
|
@@ -1136,6 +1280,7 @@
|
|
|
1136
1280
|
transparent 100%);
|
|
1137
1281
|
background-size: 200% 100%;
|
|
1138
1282
|
animation: hsk-bar .9s linear infinite;
|
|
1283
|
+
flex-shrink: 0;
|
|
1139
1284
|
}
|
|
1140
1285
|
@keyframes hsk-bar {
|
|
1141
1286
|
0% {
|
|
@@ -1145,27 +1290,117 @@
|
|
|
1145
1290
|
background-position: -200% 0;
|
|
1146
1291
|
}
|
|
1147
1292
|
}
|
|
1148
|
-
.hsk-sp-
|
|
1149
|
-
|
|
1293
|
+
.hsk-sp-body {
|
|
1294
|
+
display: flex;
|
|
1295
|
+
flex: 1;
|
|
1296
|
+
overflow: hidden;
|
|
1297
|
+
}
|
|
1298
|
+
.hsk-sp-details-pane {
|
|
1299
|
+
flex: 1;
|
|
1300
|
+
overflow-y: auto;
|
|
1301
|
+
padding: 24px;
|
|
1302
|
+
border-right: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1150
1303
|
display: flex;
|
|
1151
1304
|
flex-direction: column;
|
|
1152
|
-
gap:
|
|
1305
|
+
gap: 20px;
|
|
1306
|
+
}
|
|
1307
|
+
.hsk-sp-chat-pane {
|
|
1308
|
+
flex: 1.2;
|
|
1309
|
+
display: flex;
|
|
1310
|
+
flex-direction: column;
|
|
1311
|
+
background: var(--hsk-chat-bg, #ffffff);
|
|
1312
|
+
}
|
|
1313
|
+
.hsk-sp-product-profile {
|
|
1314
|
+
display: flex;
|
|
1315
|
+
gap: 20px;
|
|
1316
|
+
}
|
|
1317
|
+
@media (max-width: 480px) {
|
|
1318
|
+
.hsk-sp-product-profile {
|
|
1319
|
+
flex-direction: column;
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
.hsk-sp-details-imgwrap {
|
|
1323
|
+
width: 140px;
|
|
1324
|
+
height: 140px;
|
|
1325
|
+
flex-shrink: 0;
|
|
1326
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1327
|
+
background: #ffffff;
|
|
1328
|
+
display: flex;
|
|
1329
|
+
align-items: center;
|
|
1330
|
+
justify-content: center;
|
|
1331
|
+
padding: 8px;
|
|
1332
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1333
|
+
}
|
|
1334
|
+
.hsk-sp-details-imgwrap img {
|
|
1335
|
+
max-width: 100%;
|
|
1336
|
+
max-height: 100%;
|
|
1337
|
+
object-fit: contain;
|
|
1338
|
+
}
|
|
1339
|
+
.hsk-sp-details-meta {
|
|
1340
|
+
flex: 1;
|
|
1341
|
+
display: flex;
|
|
1342
|
+
flex-direction: column;
|
|
1343
|
+
gap: 6px;
|
|
1344
|
+
}
|
|
1345
|
+
.hsk-sp-details-name {
|
|
1346
|
+
font-size: 20px;
|
|
1347
|
+
font-weight: 700;
|
|
1348
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1349
|
+
margin: 0;
|
|
1350
|
+
line-height: 1.3;
|
|
1351
|
+
}
|
|
1352
|
+
.hsk-sp-details-desc {
|
|
1353
|
+
margin-top: 12px;
|
|
1354
|
+
}
|
|
1355
|
+
.hsk-sp-details-desc h4 {
|
|
1356
|
+
font-size: 13px;
|
|
1357
|
+
font-weight: 600;
|
|
1358
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1359
|
+
margin: 0 0 4px 0;
|
|
1360
|
+
}
|
|
1361
|
+
.hsk-sp-details-desc p {
|
|
1362
|
+
font-size: 13px;
|
|
1363
|
+
line-height: 1.5;
|
|
1364
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1365
|
+
margin: 0;
|
|
1366
|
+
}
|
|
1367
|
+
.hsk-sp-similar-section {
|
|
1368
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1369
|
+
padding-top: 20px;
|
|
1370
|
+
}
|
|
1371
|
+
.hsk-sp-similar-section h3 {
|
|
1372
|
+
font-size: 14px;
|
|
1373
|
+
font-weight: 600;
|
|
1374
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1375
|
+
margin: 0 0 12px 0;
|
|
1376
|
+
}
|
|
1377
|
+
.hsk-sp-results {
|
|
1378
|
+
padding: 10px 0;
|
|
1379
|
+
display: flex;
|
|
1380
|
+
flex-direction: row;
|
|
1381
|
+
gap: 12px;
|
|
1382
|
+
overflow-x: auto;
|
|
1383
|
+
scroll-snap-type: x mandatory;
|
|
1384
|
+
padding-bottom: 8px;
|
|
1153
1385
|
}
|
|
1154
1386
|
.hsk-sp-empty {
|
|
1155
1387
|
padding: 40px;
|
|
1156
1388
|
text-align: center;
|
|
1157
1389
|
font-size: 13px;
|
|
1158
|
-
color: var(--hsk-modal-muted, #
|
|
1390
|
+
color: var(--hsk-modal-muted, #999);
|
|
1159
1391
|
}
|
|
1160
1392
|
.hsk-sp-item {
|
|
1161
1393
|
display: flex;
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
border:
|
|
1166
|
-
|
|
1394
|
+
flex-direction: column;
|
|
1395
|
+
gap: 10px;
|
|
1396
|
+
padding: 12px;
|
|
1397
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1398
|
+
border: 1px solid var(--hsk-modal-item-border, #f1f3f4);
|
|
1399
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1167
1400
|
animation: hsk-toast-up .28s cubic-bezier(.22, .68, 0, 1.2) both;
|
|
1168
1401
|
overflow: hidden;
|
|
1402
|
+
flex: 0 0 170px;
|
|
1403
|
+
scroll-snap-align: start;
|
|
1169
1404
|
}
|
|
1170
1405
|
@keyframes hsk-toast-up {
|
|
1171
1406
|
from {
|
|
@@ -1178,11 +1413,11 @@
|
|
|
1178
1413
|
}
|
|
1179
1414
|
}
|
|
1180
1415
|
.hsk-sp-img-wrap {
|
|
1181
|
-
width:
|
|
1182
|
-
height:
|
|
1183
|
-
border-radius:
|
|
1416
|
+
width: 100%;
|
|
1417
|
+
height: 120px;
|
|
1418
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1184
1419
|
background: #fff;
|
|
1185
|
-
border: 1px solid var(--hsk-modal-divide,
|
|
1420
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1186
1421
|
flex-shrink: 0;
|
|
1187
1422
|
overflow: hidden;
|
|
1188
1423
|
display: flex;
|
|
@@ -1203,17 +1438,19 @@
|
|
|
1203
1438
|
min-width: 0;
|
|
1204
1439
|
display: flex;
|
|
1205
1440
|
flex-direction: column;
|
|
1206
|
-
|
|
1441
|
+
justify-content: space-between;
|
|
1442
|
+
gap: 6px;
|
|
1207
1443
|
}
|
|
1208
1444
|
.hsk-sp-item-name {
|
|
1209
|
-
font-size:
|
|
1445
|
+
font-size: 13px;
|
|
1210
1446
|
font-weight: 600;
|
|
1211
|
-
color: var(--hsk-modal-text, #
|
|
1447
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1212
1448
|
line-height: 1.35;
|
|
1213
1449
|
overflow: hidden;
|
|
1214
1450
|
display: -webkit-box;
|
|
1215
1451
|
-webkit-line-clamp: 2;
|
|
1216
1452
|
-webkit-box-orient: vertical;
|
|
1453
|
+
overflow: hidden;
|
|
1217
1454
|
}
|
|
1218
1455
|
.hsk-sp-item-cat {
|
|
1219
1456
|
font-size: 11px;
|
|
@@ -1225,28 +1462,29 @@
|
|
|
1225
1462
|
.hsk-sp-item-price-row {
|
|
1226
1463
|
display: flex;
|
|
1227
1464
|
align-items: baseline;
|
|
1228
|
-
gap:
|
|
1465
|
+
gap: 4px;
|
|
1229
1466
|
margin-top: 2px;
|
|
1467
|
+
flex-wrap: wrap;
|
|
1230
1468
|
}
|
|
1231
1469
|
.hsk-sp-item-price {
|
|
1232
|
-
font-size:
|
|
1470
|
+
font-size: 15px;
|
|
1233
1471
|
font-weight: 700;
|
|
1234
|
-
color: var(--hsk-modal-text, #
|
|
1472
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1235
1473
|
}
|
|
1236
1474
|
.hsk-sp-item-currency {
|
|
1237
|
-
font-size:
|
|
1238
|
-
color: var(--hsk-modal-muted, #
|
|
1475
|
+
font-size: 11px;
|
|
1476
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1239
1477
|
}
|
|
1240
1478
|
.hsk-sp-actions {
|
|
1241
1479
|
display: flex;
|
|
1242
1480
|
gap: 6px;
|
|
1243
|
-
margin-top:
|
|
1481
|
+
margin-top: auto;
|
|
1244
1482
|
}
|
|
1245
1483
|
.hsk-sp-action {
|
|
1246
1484
|
flex: 1;
|
|
1247
|
-
padding:
|
|
1248
|
-
border-radius:
|
|
1249
|
-
font-size:
|
|
1485
|
+
padding: 6px 8px;
|
|
1486
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1487
|
+
font-size: 11px;
|
|
1250
1488
|
font-weight: 600;
|
|
1251
1489
|
cursor: pointer;
|
|
1252
1490
|
border: 1px solid transparent;
|
|
@@ -1263,20 +1501,21 @@
|
|
|
1263
1501
|
opacity: .88;
|
|
1264
1502
|
}
|
|
1265
1503
|
.hsk-sp-action-secondary {
|
|
1266
|
-
background: var(--hsk-action-sec-bg,
|
|
1267
|
-
color: var(--hsk-modal-muted, #
|
|
1268
|
-
border-color: var(--hsk-modal-divide,
|
|
1504
|
+
background: var(--hsk-action-sec-bg, #f1f3f4);
|
|
1505
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1506
|
+
border-color: var(--hsk-modal-divide, #f1f3f4);
|
|
1269
1507
|
}
|
|
1270
1508
|
.hsk-sp-action-secondary:hover {
|
|
1271
|
-
background: var(--hsk-action-sec-bg-hover,
|
|
1272
|
-
color: var(--hsk-modal-text, #
|
|
1509
|
+
background: var(--hsk-action-sec-bg-hover, #e8eaed);
|
|
1510
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1273
1511
|
}
|
|
1274
1512
|
.hsk-sp-footer {
|
|
1275
1513
|
padding: 12px 20px;
|
|
1276
|
-
border-top: 1px solid var(--hsk-modal-divide,
|
|
1514
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1277
1515
|
display: flex;
|
|
1278
1516
|
align-items: center;
|
|
1279
1517
|
gap: 8px;
|
|
1518
|
+
flex-shrink: 0;
|
|
1280
1519
|
}
|
|
1281
1520
|
.hsk-sp-badge {
|
|
1282
1521
|
font-size: 10px;
|
|
@@ -1287,28 +1526,58 @@
|
|
|
1287
1526
|
background: rgba(255, 106, 51, .1);
|
|
1288
1527
|
border: 1px solid rgba(255, 106, 51, .25);
|
|
1289
1528
|
padding: 2px 8px;
|
|
1290
|
-
border-radius:
|
|
1529
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1291
1530
|
}
|
|
1292
1531
|
.hsk-sp-esc {
|
|
1293
1532
|
font-size: 11px;
|
|
1294
|
-
color: var(--hsk-modal-muted, #
|
|
1533
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1295
1534
|
margin-left: auto;
|
|
1296
1535
|
}
|
|
1536
|
+
@media (max-width: 768px) {
|
|
1537
|
+
.hsk-sp-body {
|
|
1538
|
+
flex-direction: column;
|
|
1539
|
+
overflow-y: auto;
|
|
1540
|
+
}
|
|
1541
|
+
.hsk-sp-details-pane {
|
|
1542
|
+
border-right: none;
|
|
1543
|
+
border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1544
|
+
flex: none;
|
|
1545
|
+
}
|
|
1546
|
+
.hsk-sp-chat-pane {
|
|
1547
|
+
flex: none;
|
|
1548
|
+
height: 400px;
|
|
1549
|
+
}
|
|
1550
|
+
}
|
|
1297
1551
|
@media (prefers-color-scheme: dark) {
|
|
1552
|
+
.hsk-sp-backdrop {
|
|
1553
|
+
background: #000000 !important;
|
|
1554
|
+
}
|
|
1298
1555
|
.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:
|
|
1556
|
+
--hsk-modal-card-bg: #0a0a0a;
|
|
1557
|
+
--hsk-modal-card-border: #202124;
|
|
1558
|
+
--hsk-modal-text: #e8eaed;
|
|
1559
|
+
--hsk-modal-muted: #888;
|
|
1560
|
+
--hsk-modal-divide: #202124;
|
|
1304
1561
|
--hsk-modal-item-bg: #1a1a1b;
|
|
1305
|
-
--hsk-modal-item-border:
|
|
1306
|
-
--hsk-action-sec-bg:
|
|
1307
|
-
--hsk-action-sec-bg-hover:
|
|
1562
|
+
--hsk-modal-item-border: #202124;
|
|
1563
|
+
--hsk-action-sec-bg: #202124;
|
|
1564
|
+
--hsk-action-sec-bg-hover: #2d2f34;
|
|
1565
|
+
}
|
|
1566
|
+
.hsk-sp-details-imgwrap {
|
|
1567
|
+
background: #202124;
|
|
1568
|
+
border-color: #202124;
|
|
1308
1569
|
}
|
|
1309
1570
|
.hsk-sp-img-wrap {
|
|
1310
|
-
background: #
|
|
1311
|
-
border-color:
|
|
1571
|
+
background: #202124;
|
|
1572
|
+
border-color: #202124;
|
|
1573
|
+
}
|
|
1574
|
+
.hsk-sp-chat-pane {
|
|
1575
|
+
background: var(--hsk-chat-bg, #0a0a0a);
|
|
1576
|
+
}
|
|
1577
|
+
}
|
|
1578
|
+
@media (prefers-color-scheme: light) {
|
|
1579
|
+
.hsk-sp-backdrop {
|
|
1580
|
+
background: #ffffff !important;
|
|
1312
1581
|
}
|
|
1313
1582
|
}
|
|
1314
1583
|
.hsk-markdown-p {
|
|
@@ -1328,8 +1597,13 @@
|
|
|
1328
1597
|
.hsk-table-wrapper {
|
|
1329
1598
|
overflow-x: auto;
|
|
1330
1599
|
margin: 8px 0;
|
|
1331
|
-
border-radius:
|
|
1332
|
-
border: 1px solid var(--hsk-border, #
|
|
1600
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1601
|
+
border: 1px solid var(--hsk-border, #f1f3f4);
|
|
1602
|
+
}
|
|
1603
|
+
@media (prefers-color-scheme: dark) {
|
|
1604
|
+
.hsk-table-wrapper {
|
|
1605
|
+
border-color: #202124;
|
|
1606
|
+
}
|
|
1333
1607
|
}
|
|
1334
1608
|
.hsk-markdown-table {
|
|
1335
1609
|
width: 100%;
|
|
@@ -1340,7 +1614,13 @@
|
|
|
1340
1614
|
.hsk-markdown-table th,
|
|
1341
1615
|
.hsk-markdown-table td {
|
|
1342
1616
|
padding: 6px 10px;
|
|
1343
|
-
border-bottom: 1px solid var(--hsk-border, #
|
|
1617
|
+
border-bottom: 1px solid var(--hsk-border, #f1f3f4);
|
|
1618
|
+
}
|
|
1619
|
+
@media (prefers-color-scheme: dark) {
|
|
1620
|
+
.hsk-markdown-table th,
|
|
1621
|
+
.hsk-markdown-table td {
|
|
1622
|
+
border-bottom-color: #202124;
|
|
1623
|
+
}
|
|
1344
1624
|
}
|
|
1345
1625
|
.hsk-markdown-table tr:last-child td {
|
|
1346
1626
|
border-bottom: none;
|
|
@@ -1363,8 +1643,577 @@
|
|
|
1363
1643
|
font-size: 0.85em;
|
|
1364
1644
|
background-color: rgba(128, 128, 128, 0.15);
|
|
1365
1645
|
padding: 0.2em 0.4em;
|
|
1366
|
-
border-radius:
|
|
1646
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1367
1647
|
color: inherit;
|
|
1368
1648
|
word-break: break-word;
|
|
1369
1649
|
}
|
|
1650
|
+
.hsk-sp-item-original-price {
|
|
1651
|
+
font-size: 12px;
|
|
1652
|
+
text-decoration: line-through;
|
|
1653
|
+
color: var(--hsk-modal-muted, #888);
|
|
1654
|
+
margin-left: 6px;
|
|
1655
|
+
}
|
|
1656
|
+
.hsk-sp-item-discount {
|
|
1657
|
+
font-size: 11px;
|
|
1658
|
+
font-weight: 600;
|
|
1659
|
+
color: #10b981;
|
|
1660
|
+
margin-left: 6px;
|
|
1661
|
+
}
|
|
1662
|
+
.hsk-sp-item-meta-badges {
|
|
1663
|
+
display: flex;
|
|
1664
|
+
flex-wrap: wrap;
|
|
1665
|
+
gap: 8px;
|
|
1666
|
+
margin-top: 6px;
|
|
1667
|
+
}
|
|
1668
|
+
.hsk-sp-meta-badge {
|
|
1669
|
+
font-size: 11px;
|
|
1670
|
+
font-weight: 500;
|
|
1671
|
+
padding: 3px 8px;
|
|
1672
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1673
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1674
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1675
|
+
color: var(--hsk-modal-muted, #5f6368);
|
|
1676
|
+
}
|
|
1677
|
+
.hsk-sp-meta-badge-rating {
|
|
1678
|
+
color: #f59e0b;
|
|
1679
|
+
background: rgba(245, 158, 11, 0.08);
|
|
1680
|
+
border-color: rgba(245, 158, 11, 0.2);
|
|
1681
|
+
}
|
|
1682
|
+
.hsk-sp-meta-badge-avail.in-stock {
|
|
1683
|
+
color: #10b981;
|
|
1684
|
+
background: rgba(16, 185, 129, 0.08);
|
|
1685
|
+
border-color: rgba(16, 185, 129, 0.2);
|
|
1686
|
+
}
|
|
1687
|
+
.hsk-sp-meta-badge-avail.out-stock {
|
|
1688
|
+
color: #ef4444;
|
|
1689
|
+
background: rgba(239, 68, 68, 0.08);
|
|
1690
|
+
border-color: rgba(239, 68, 68, 0.2);
|
|
1691
|
+
}
|
|
1692
|
+
.hsk-sp-item-brand {
|
|
1693
|
+
font-size: 11px;
|
|
1694
|
+
font-weight: 700;
|
|
1695
|
+
color: var(--hsk-modal-muted, #888);
|
|
1696
|
+
text-transform: uppercase;
|
|
1697
|
+
letter-spacing: .05em;
|
|
1698
|
+
margin-bottom: -2px;
|
|
1699
|
+
}
|
|
1700
|
+
.hsk-sp-details-specs {
|
|
1701
|
+
margin-top: 20px;
|
|
1702
|
+
border-top: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1703
|
+
padding-top: 20px;
|
|
1704
|
+
}
|
|
1705
|
+
.hsk-sp-details-specs h4 {
|
|
1706
|
+
font-size: 13px;
|
|
1707
|
+
font-weight: 600;
|
|
1708
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1709
|
+
margin: 0 0 10px 0;
|
|
1710
|
+
}
|
|
1711
|
+
.hsk-sp-specs-grid {
|
|
1712
|
+
display: grid;
|
|
1713
|
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
1714
|
+
gap: 8px;
|
|
1715
|
+
}
|
|
1716
|
+
.hsk-sp-spec-row {
|
|
1717
|
+
display: flex;
|
|
1718
|
+
justify-content: space-between;
|
|
1719
|
+
align-items: center;
|
|
1720
|
+
padding: 8px 12px;
|
|
1721
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1722
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1723
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1724
|
+
font-size: 12px;
|
|
1725
|
+
gap: 8px;
|
|
1726
|
+
}
|
|
1727
|
+
.hsk-sp-spec-label {
|
|
1728
|
+
font-weight: 500;
|
|
1729
|
+
color: var(--hsk-modal-muted, #888);
|
|
1730
|
+
}
|
|
1731
|
+
.hsk-sp-spec-value {
|
|
1732
|
+
font-weight: 600;
|
|
1733
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1734
|
+
text-align: right;
|
|
1735
|
+
max-width: 60%;
|
|
1736
|
+
white-space: nowrap;
|
|
1737
|
+
overflow: hidden;
|
|
1738
|
+
text-overflow: ellipsis;
|
|
1739
|
+
}
|
|
1740
|
+
@media (prefers-color-scheme: dark) {
|
|
1741
|
+
.hsk-sp-details-specs {
|
|
1742
|
+
border-top-color: #202124;
|
|
1743
|
+
}
|
|
1744
|
+
.hsk-sp-spec-row {
|
|
1745
|
+
background: #1a1a1b;
|
|
1746
|
+
border-color: #202124;
|
|
1747
|
+
}
|
|
1748
|
+
}
|
|
1749
|
+
.hsk-chat-widget ::-webkit-scrollbar,
|
|
1750
|
+
.hsk-sp-card ::-webkit-scrollbar,
|
|
1751
|
+
.hsk-cb-msgs ::-webkit-scrollbar,
|
|
1752
|
+
.hsk-sp-details-pane ::-webkit-scrollbar,
|
|
1753
|
+
.hsk-sp-results ::-webkit-scrollbar,
|
|
1754
|
+
.hsk-chat-messages ::-webkit-scrollbar {
|
|
1755
|
+
width: 4px;
|
|
1756
|
+
height: 4px;
|
|
1757
|
+
}
|
|
1758
|
+
.hsk-chat-widget ::-webkit-scrollbar-track,
|
|
1759
|
+
.hsk-sp-card ::-webkit-scrollbar-track,
|
|
1760
|
+
.hsk-cb-msgs ::-webkit-scrollbar-track,
|
|
1761
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-track,
|
|
1762
|
+
.hsk-sp-results ::-webkit-scrollbar-track,
|
|
1763
|
+
.hsk-chat-messages ::-webkit-scrollbar-track {
|
|
1764
|
+
background: transparent;
|
|
1765
|
+
}
|
|
1766
|
+
.hsk-chat-widget ::-webkit-scrollbar-thumb,
|
|
1767
|
+
.hsk-sp-card ::-webkit-scrollbar-thumb,
|
|
1768
|
+
.hsk-cb-msgs ::-webkit-scrollbar-thumb,
|
|
1769
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-thumb,
|
|
1770
|
+
.hsk-sp-results ::-webkit-scrollbar-thumb,
|
|
1771
|
+
.hsk-chat-messages ::-webkit-scrollbar-thumb {
|
|
1772
|
+
background: rgba(0, 0, 0, 0.08);
|
|
1773
|
+
border-radius: 10px;
|
|
1774
|
+
}
|
|
1775
|
+
@media (prefers-color-scheme: dark) {
|
|
1776
|
+
.hsk-chat-widget ::-webkit-scrollbar-thumb,
|
|
1777
|
+
.hsk-sp-card ::-webkit-scrollbar-thumb,
|
|
1778
|
+
.hsk-cb-msgs ::-webkit-scrollbar-thumb,
|
|
1779
|
+
.hsk-sp-details-pane ::-webkit-scrollbar-thumb,
|
|
1780
|
+
.hsk-sp-results ::-webkit-scrollbar-thumb,
|
|
1781
|
+
.hsk-chat-messages ::-webkit-scrollbar-thumb {
|
|
1782
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1783
|
+
}
|
|
1784
|
+
}
|
|
1785
|
+
.hsk-cb-msgs,
|
|
1786
|
+
.hsk-sp-details-pane,
|
|
1787
|
+
.hsk-sp-results,
|
|
1788
|
+
.hsk-chat-messages {
|
|
1789
|
+
scrollbar-width: thin;
|
|
1790
|
+
scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
|
|
1791
|
+
}
|
|
1792
|
+
@media (prefers-color-scheme: dark) {
|
|
1793
|
+
.hsk-cb-msgs,
|
|
1794
|
+
.hsk-sp-details-pane,
|
|
1795
|
+
.hsk-sp-results,
|
|
1796
|
+
.hsk-chat-messages {
|
|
1797
|
+
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
|
|
1798
|
+
}
|
|
1799
|
+
}
|
|
1800
|
+
.hsk-sp-specs-horizontal {
|
|
1801
|
+
display: flex;
|
|
1802
|
+
flex-wrap: wrap;
|
|
1803
|
+
gap: 8px;
|
|
1804
|
+
margin-top: 12px;
|
|
1805
|
+
}
|
|
1806
|
+
.hsk-sp-spec-item-horizontal {
|
|
1807
|
+
display: inline-flex;
|
|
1808
|
+
align-items: center;
|
|
1809
|
+
gap: 6px;
|
|
1810
|
+
padding: 4px 10px;
|
|
1811
|
+
background: var(--hsk-modal-item-bg, #f8f9fa);
|
|
1812
|
+
border: 1px solid var(--hsk-modal-divide, #f1f3f4);
|
|
1813
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1814
|
+
font-size: 11px;
|
|
1815
|
+
}
|
|
1816
|
+
.hsk-sp-spec-label-horizontal {
|
|
1817
|
+
font-weight: 500;
|
|
1818
|
+
color: var(--hsk-modal-muted, #888);
|
|
1819
|
+
}
|
|
1820
|
+
.hsk-sp-spec-value-horizontal {
|
|
1821
|
+
font-weight: 600;
|
|
1822
|
+
color: var(--hsk-modal-text, #1f1f1f);
|
|
1823
|
+
}
|
|
1824
|
+
@media (prefers-color-scheme: dark) {
|
|
1825
|
+
.hsk-sp-spec-item-horizontal {
|
|
1826
|
+
background: #1a1a1b;
|
|
1827
|
+
border-color: #202124;
|
|
1828
|
+
}
|
|
1829
|
+
}
|
|
1830
|
+
.hsk-cart-backdrop {
|
|
1831
|
+
position: fixed;
|
|
1832
|
+
inset: 0;
|
|
1833
|
+
background: rgba(0, 0, 0, 0.4);
|
|
1834
|
+
backdrop-filter: blur(4px);
|
|
1835
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1836
|
+
z-index: 99999;
|
|
1837
|
+
display: flex;
|
|
1838
|
+
align-items: flex-end;
|
|
1839
|
+
justify-content: center;
|
|
1840
|
+
animation: hskFadeIn 0.3s ease forwards;
|
|
1841
|
+
}
|
|
1842
|
+
.hsk-cart-bottom-sheet {
|
|
1843
|
+
--hsk-bg: var(--bg, var(--background, #ffffff));
|
|
1844
|
+
--hsk-text: var(--text-primary, var(--foreground, #18181b));
|
|
1845
|
+
--hsk-border: var(--border, var(--borders, #f4f4f5));
|
|
1846
|
+
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
1847
|
+
--hsk-primary-color: var(--hsk-primary);
|
|
1848
|
+
--hsk-hover: var(--surface, var(--hsk-border, #f4f4f5));
|
|
1849
|
+
--hsk-muted: var(--text-muted, var(--accent, #71717a));
|
|
1850
|
+
width: 100%;
|
|
1851
|
+
max-width: 600px;
|
|
1852
|
+
background: var(--hsk-bg);
|
|
1853
|
+
color: var(--hsk-text);
|
|
1854
|
+
border-radius: 24px 24px 0 0;
|
|
1855
|
+
padding: 24px;
|
|
1856
|
+
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
|
|
1857
|
+
transform: translateY(100%);
|
|
1858
|
+
animation: hskSlideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
1859
|
+
display: flex;
|
|
1860
|
+
flex-direction: column;
|
|
1861
|
+
max-height: 85vh;
|
|
1862
|
+
z-index: 100000;
|
|
1863
|
+
border-top: 1px solid var(--hsk-border);
|
|
1864
|
+
}
|
|
1865
|
+
@keyframes hskSlideUp {
|
|
1866
|
+
from {
|
|
1867
|
+
transform: translateY(100%);
|
|
1868
|
+
}
|
|
1869
|
+
to {
|
|
1870
|
+
transform: translateY(0);
|
|
1871
|
+
}
|
|
1872
|
+
}
|
|
1873
|
+
@keyframes hskFadeIn {
|
|
1874
|
+
from {
|
|
1875
|
+
opacity: 0;
|
|
1876
|
+
}
|
|
1877
|
+
to {
|
|
1878
|
+
opacity: 1;
|
|
1879
|
+
}
|
|
1880
|
+
}
|
|
1881
|
+
@keyframes hskSlideUpCenter {
|
|
1882
|
+
to {
|
|
1883
|
+
transform: translateY(0) scale(1);
|
|
1884
|
+
opacity: 1;
|
|
1885
|
+
}
|
|
1886
|
+
}
|
|
1887
|
+
.hsk-cart-sheet-handle {
|
|
1888
|
+
display: none;
|
|
1889
|
+
}
|
|
1890
|
+
[data-hsk-theme=dark] .hsk-cart-sheet-handle {
|
|
1891
|
+
display: none;
|
|
1892
|
+
}
|
|
1893
|
+
.hsk-cart-sheet-header {
|
|
1894
|
+
display: flex;
|
|
1895
|
+
justify-content: space-between;
|
|
1896
|
+
align-items: center;
|
|
1897
|
+
margin-bottom: 20px;
|
|
1898
|
+
}
|
|
1899
|
+
.hsk-cart-sheet-header h2 {
|
|
1900
|
+
margin: 0;
|
|
1901
|
+
font-size: 20px;
|
|
1902
|
+
font-weight: 600;
|
|
1903
|
+
}
|
|
1904
|
+
.hsk-close-btn {
|
|
1905
|
+
background: none;
|
|
1906
|
+
border: none;
|
|
1907
|
+
font-size: 24px;
|
|
1908
|
+
cursor: pointer;
|
|
1909
|
+
color: var(--hsk-muted);
|
|
1910
|
+
padding: 0;
|
|
1911
|
+
line-height: 1;
|
|
1912
|
+
}
|
|
1913
|
+
.hsk-cart-sheet-content {
|
|
1914
|
+
flex: 1;
|
|
1915
|
+
overflow-y: auto;
|
|
1916
|
+
margin-bottom: 20px;
|
|
1917
|
+
}
|
|
1918
|
+
.hsk-cart-empty,
|
|
1919
|
+
.hsk-cart-loading {
|
|
1920
|
+
text-align: center;
|
|
1921
|
+
padding: 40px 0;
|
|
1922
|
+
color: #71717a;
|
|
1923
|
+
}
|
|
1924
|
+
.hsk-cart-items {
|
|
1925
|
+
list-style: none;
|
|
1926
|
+
padding: 0;
|
|
1927
|
+
margin: 0;
|
|
1928
|
+
display: flex;
|
|
1929
|
+
flex-direction: column;
|
|
1930
|
+
gap: 16px;
|
|
1931
|
+
}
|
|
1932
|
+
.hsk-cart-item {
|
|
1933
|
+
display: flex;
|
|
1934
|
+
align-items: center;
|
|
1935
|
+
gap: 12px;
|
|
1936
|
+
padding-bottom: 16px;
|
|
1937
|
+
border-bottom: 1px solid var(--hsk-border, #f4f4f5);
|
|
1938
|
+
}
|
|
1939
|
+
.hsk-cart-item-img {
|
|
1940
|
+
width: 56px;
|
|
1941
|
+
height: 56px;
|
|
1942
|
+
border-radius: 8px;
|
|
1943
|
+
object-fit: cover;
|
|
1944
|
+
background: var(--hsk-border, #f4f4f5);
|
|
1945
|
+
}
|
|
1946
|
+
.hsk-cart-item-info {
|
|
1947
|
+
flex: 1;
|
|
1948
|
+
display: flex;
|
|
1949
|
+
flex-direction: column;
|
|
1950
|
+
gap: 4px;
|
|
1951
|
+
}
|
|
1952
|
+
.hsk-cart-item-name {
|
|
1953
|
+
font-weight: 500;
|
|
1954
|
+
font-size: 14px;
|
|
1955
|
+
color: var(--hsk-text, #18181b);
|
|
1956
|
+
}
|
|
1957
|
+
.hsk-cart-item-price {
|
|
1958
|
+
color: var(--hsk-muted, #71717a);
|
|
1959
|
+
font-size: 14px;
|
|
1960
|
+
}
|
|
1961
|
+
.hsk-cart-item-qty {
|
|
1962
|
+
font-weight: 600;
|
|
1963
|
+
font-size: 14px;
|
|
1964
|
+
background: var(--hsk-hover, #f4f4f5);
|
|
1965
|
+
color: var(--hsk-text, #18181b);
|
|
1966
|
+
padding: 4px 10px;
|
|
1967
|
+
border-radius: 12px;
|
|
1968
|
+
}
|
|
1969
|
+
.hsk-cart-sheet-footer {
|
|
1970
|
+
padding-top: 16px;
|
|
1971
|
+
border-top: 1px solid var(--hsk-border, #f4f4f5);
|
|
1972
|
+
display: flex;
|
|
1973
|
+
flex-direction: column;
|
|
1974
|
+
gap: 16px;
|
|
1975
|
+
}
|
|
1976
|
+
.hsk-cart-total {
|
|
1977
|
+
display: flex;
|
|
1978
|
+
justify-content: space-between;
|
|
1979
|
+
align-items: center;
|
|
1980
|
+
font-weight: 700;
|
|
1981
|
+
font-size: 18px;
|
|
1982
|
+
color: var(--hsk-text, #18181b);
|
|
1983
|
+
}
|
|
1984
|
+
.hsk-checkout-btn {
|
|
1985
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
1986
|
+
color: white;
|
|
1987
|
+
border: none;
|
|
1988
|
+
padding: 16px;
|
|
1989
|
+
border-radius: 12px;
|
|
1990
|
+
font-size: 16px;
|
|
1991
|
+
font-weight: 600;
|
|
1992
|
+
cursor: pointer;
|
|
1993
|
+
transition: opacity 0.2s;
|
|
1994
|
+
width: 100%;
|
|
1995
|
+
}
|
|
1996
|
+
.hsk-checkout-btn:hover {
|
|
1997
|
+
opacity: 0.9;
|
|
1998
|
+
}
|
|
1999
|
+
.hsk-cart-trigger {
|
|
2000
|
+
--hsk-bg: var(--bg, var(--background, #ffffff));
|
|
2001
|
+
--hsk-text: var(--text-primary, var(--foreground, #18181b));
|
|
2002
|
+
--hsk-border: var(--border, var(--borders, #e4e4e7));
|
|
2003
|
+
--hsk-primary: var(--chat-primary-color, #ff6a33);
|
|
2004
|
+
--hsk-primary-color: var(--hsk-primary);
|
|
2005
|
+
--hsk-hover: var(--surface, var(--hsk-border, #f4f4f5));
|
|
2006
|
+
background: transparent;
|
|
2007
|
+
border: 1px solid var(--hsk-border);
|
|
2008
|
+
color: var(--hsk-text);
|
|
2009
|
+
border-radius: 20px;
|
|
2010
|
+
font-weight: 500;
|
|
2011
|
+
cursor: pointer;
|
|
2012
|
+
display: inline-flex;
|
|
2013
|
+
align-items: center;
|
|
2014
|
+
justify-content: center;
|
|
2015
|
+
position: relative;
|
|
2016
|
+
}
|
|
2017
|
+
.hsk-cart-trigger-badge {
|
|
2018
|
+
position: absolute;
|
|
2019
|
+
top: -4px;
|
|
2020
|
+
right: -4px;
|
|
2021
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
2022
|
+
color: white;
|
|
2023
|
+
font-size: 10px;
|
|
2024
|
+
width: 18px;
|
|
2025
|
+
height: 18px;
|
|
2026
|
+
display: flex;
|
|
2027
|
+
align-items: center;
|
|
2028
|
+
justify-content: center;
|
|
2029
|
+
border-radius: 9px;
|
|
2030
|
+
font-weight: bold;
|
|
2031
|
+
}
|
|
2032
|
+
.hsk-cart-badge {
|
|
2033
|
+
display: inline-flex;
|
|
2034
|
+
align-items: center;
|
|
2035
|
+
justify-content: center;
|
|
2036
|
+
background: var(--hsk-primary-color, #ff6a33);
|
|
2037
|
+
color: white;
|
|
2038
|
+
font-size: 12px;
|
|
2039
|
+
min-width: 18px;
|
|
2040
|
+
height: 18px;
|
|
2041
|
+
padding: 0 4px;
|
|
2042
|
+
border-radius: 9px;
|
|
2043
|
+
font-weight: 600;
|
|
2044
|
+
}
|
|
2045
|
+
[data-hsk-theme=dark] .hsk-cart-bottom-sheet {
|
|
2046
|
+
--hsk-bg: #0a0a0a;
|
|
2047
|
+
--hsk-text: #fafafa;
|
|
2048
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2049
|
+
--hsk-muted: #888;
|
|
2050
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2051
|
+
}
|
|
2052
|
+
[data-hsk-theme=dark] .hsk-cart-trigger {
|
|
2053
|
+
--hsk-bg: #0a0a0a;
|
|
2054
|
+
--hsk-text: white;
|
|
2055
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2056
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2057
|
+
}
|
|
2058
|
+
@media (prefers-color-scheme: dark) {
|
|
2059
|
+
.hsk-cart-bottom-sheet {
|
|
2060
|
+
--hsk-bg: #0a0a0a;
|
|
2061
|
+
--hsk-text: #e8eaed;
|
|
2062
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2063
|
+
--hsk-muted: #888;
|
|
2064
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2065
|
+
}
|
|
2066
|
+
.hsk-cart-trigger {
|
|
2067
|
+
--hsk-bg: #0a0a0a;
|
|
2068
|
+
--hsk-text: white;
|
|
2069
|
+
--hsk-border: rgba(255, 255, 255, 0.07);
|
|
2070
|
+
--hsk-hover: rgba(255, 255, 255, 0.07);
|
|
2071
|
+
}
|
|
2072
|
+
}
|
|
2073
|
+
@media (prefers-color-scheme: light) {
|
|
2074
|
+
.hsk-cart-bottom-sheet {
|
|
2075
|
+
--hsk-bg: #ffffff;
|
|
2076
|
+
--hsk-text: #18181b;
|
|
2077
|
+
--hsk-border: #f4f4f5;
|
|
2078
|
+
--hsk-muted: #71717a;
|
|
2079
|
+
--hsk-hover: #f4f4f5;
|
|
2080
|
+
}
|
|
2081
|
+
.hsk-cart-trigger {
|
|
2082
|
+
--hsk-bg: #ffffff;
|
|
2083
|
+
--hsk-text: #18181b;
|
|
2084
|
+
--hsk-border: #e4e4e7;
|
|
2085
|
+
--hsk-hover: #f4f4f5;
|
|
2086
|
+
}
|
|
2087
|
+
.hsk-cart-backdrop {
|
|
2088
|
+
background: rgba(255, 255, 255, 0.6);
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
.hsk-checkout-modal {
|
|
2092
|
+
position: relative;
|
|
2093
|
+
width: 90%;
|
|
2094
|
+
max-width: 800px;
|
|
2095
|
+
max-height: 90vh;
|
|
2096
|
+
background: var(--hsk-bg, #ffffff);
|
|
2097
|
+
color: var(--hsk-text, #18181b);
|
|
2098
|
+
border: 1px solid var(--hsk-border, #e4e4e7);
|
|
2099
|
+
border-radius: 12px;
|
|
2100
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
2101
|
+
display: flex;
|
|
2102
|
+
flex-direction: column;
|
|
2103
|
+
overflow: hidden;
|
|
2104
|
+
animation: hskScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
2105
|
+
}
|
|
2106
|
+
.hsk-checkout-header {
|
|
2107
|
+
padding: 16px 20px;
|
|
2108
|
+
border-bottom: 1px solid var(--hsk-border, #e4e4e7);
|
|
2109
|
+
display: flex;
|
|
2110
|
+
justify-content: space-between;
|
|
2111
|
+
align-items: center;
|
|
2112
|
+
}
|
|
2113
|
+
.hsk-checkout-header h2 {
|
|
2114
|
+
margin: 0;
|
|
2115
|
+
font-size: 1.1em;
|
|
2116
|
+
}
|
|
2117
|
+
.hsk-checkout-content {
|
|
2118
|
+
padding: 20px;
|
|
2119
|
+
overflow-y: auto;
|
|
2120
|
+
}
|
|
2121
|
+
.hsk-checkout-split {
|
|
2122
|
+
display: flex;
|
|
2123
|
+
gap: 30px;
|
|
2124
|
+
}
|
|
2125
|
+
@media (max-width: 600px) {
|
|
2126
|
+
.hsk-checkout-split {
|
|
2127
|
+
flex-direction: column;
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
.hsk-checkout-summary,
|
|
2131
|
+
.hsk-checkout-payment {
|
|
2132
|
+
flex: 1;
|
|
2133
|
+
}
|
|
2134
|
+
.hsk-checkout-summary h3,
|
|
2135
|
+
.hsk-checkout-payment h3 {
|
|
2136
|
+
font-size: 1em;
|
|
2137
|
+
margin-top: 0;
|
|
2138
|
+
margin-bottom: 15px;
|
|
2139
|
+
border-bottom: 1px solid var(--hsk-border, #e4e4e7);
|
|
2140
|
+
padding-bottom: 8px;
|
|
2141
|
+
}
|
|
2142
|
+
.hsk-checkout-items {
|
|
2143
|
+
list-style: none;
|
|
2144
|
+
margin: 0;
|
|
2145
|
+
padding: 0;
|
|
2146
|
+
}
|
|
2147
|
+
.hsk-checkout-items li {
|
|
2148
|
+
display: flex;
|
|
2149
|
+
justify-content: space-between;
|
|
2150
|
+
font-size: 0.9em;
|
|
2151
|
+
margin-bottom: 8px;
|
|
2152
|
+
}
|
|
2153
|
+
.hsk-checkout-total {
|
|
2154
|
+
display: flex;
|
|
2155
|
+
justify-content: space-between;
|
|
2156
|
+
font-weight: bold;
|
|
2157
|
+
margin-top: 15px;
|
|
2158
|
+
padding-top: 15px;
|
|
2159
|
+
border-top: 1px solid var(--hsk-border, #e4e4e7);
|
|
2160
|
+
}
|
|
2161
|
+
.hsk-payment-options {
|
|
2162
|
+
display: flex;
|
|
2163
|
+
flex-direction: column;
|
|
2164
|
+
gap: 10px;
|
|
2165
|
+
}
|
|
2166
|
+
.hsk-pay-btn {
|
|
2167
|
+
width: 100%;
|
|
2168
|
+
padding: 12px;
|
|
2169
|
+
border-radius: 8px;
|
|
2170
|
+
font-weight: bold;
|
|
2171
|
+
cursor: pointer;
|
|
2172
|
+
border: none;
|
|
2173
|
+
transition: opacity 0.2s;
|
|
2174
|
+
color: white;
|
|
2175
|
+
}
|
|
2176
|
+
.hsk-pay-btn:disabled {
|
|
2177
|
+
opacity: 0.5;
|
|
2178
|
+
cursor: not-allowed;
|
|
2179
|
+
}
|
|
2180
|
+
.hsk-pay-mpesa {
|
|
2181
|
+
background: #4caf50;
|
|
2182
|
+
}
|
|
2183
|
+
.hsk-pay-equity {
|
|
2184
|
+
background: #8b4513;
|
|
2185
|
+
}
|
|
2186
|
+
.hsk-pay-stripe {
|
|
2187
|
+
background: #6772e5;
|
|
2188
|
+
}
|
|
2189
|
+
.hsk-pay-paypal {
|
|
2190
|
+
background: #003087;
|
|
2191
|
+
}
|
|
2192
|
+
.hsk-checkout-success {
|
|
2193
|
+
text-align: center;
|
|
2194
|
+
padding: 40px 20px;
|
|
2195
|
+
}
|
|
2196
|
+
.hsk-success-icon {
|
|
2197
|
+
width: 64px;
|
|
2198
|
+
height: 64px;
|
|
2199
|
+
color: #4caf50;
|
|
2200
|
+
margin-bottom: 16px;
|
|
2201
|
+
}
|
|
2202
|
+
@keyframes hskScaleIn {
|
|
2203
|
+
0% {
|
|
2204
|
+
transform: scale(0.95);
|
|
2205
|
+
opacity: 0;
|
|
2206
|
+
}
|
|
2207
|
+
100% {
|
|
2208
|
+
transform: scale(1);
|
|
2209
|
+
opacity: 1;
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2212
|
+
@media (prefers-color-scheme: dark) {
|
|
2213
|
+
.hsk-checkout-modal {
|
|
2214
|
+
--hsk-bg: #1a1a1b;
|
|
2215
|
+
--hsk-text: #e8eaed;
|
|
2216
|
+
--hsk-border: #202124;
|
|
2217
|
+
}
|
|
2218
|
+
}
|
|
1370
2219
|
/*# sourceMappingURL=index.css.map */
|