twist-aplayer 1.0.0 → 1.0.2

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 CHANGED
@@ -1,597 +1 @@
1
- @keyframes rotate {
2
- 0% {
3
- transform: rotate(0);
4
- }
5
- to {
6
- transform: rotate(1turn);
7
- }
8
- }
9
- .twist-aplayer-light {
10
- --tp-background: 0 0% 100%;
11
- --tp-foreground: 240 10% 3.9%;
12
- --tp-card: 0 0% 100%;
13
- --tp-card-foreground: 240 10% 3.9%;
14
- --tp-primary: 240 5.9% 10%;
15
- --tp-primary-foreground: 0 0% 98%;
16
- --tp-secondary: 240 4.8% 95.9%;
17
- --tp-secondary-foreground: 240 5.9% 10%;
18
- --tp-muted: 240 4.8% 95.9%;
19
- --tp-muted-foreground: 240 3.8% 46.1%;
20
- --tp-accent: 240 4.8% 95.9%;
21
- --tp-accent-foreground: 240 5.9% 10%;
22
- --tp-border: 240 5.9% 90%;
23
- }
24
- .twist-aplayer-dark {
25
- --tp-background: 240 10% 3.9%;
26
- --tp-foreground: 0 0% 98%;
27
- --tp-card: 240 10% 3.9%;
28
- --tp-card-foreground: 0 0% 98%;
29
- --tp-primary: 0 0% 98%;
30
- --tp-primary-foreground: 240 5.9% 10%;
31
- --tp-secondary: 240 3.7% 15.9%;
32
- --tp-secondary-foreground: 0 0% 98%;
33
- --tp-muted: 240 3.7% 15.9%;
34
- --tp-muted-foreground: 240 5% 64.9%;
35
- --tp-accent: 240 3.7% 15.9%;
36
- --tp-accent-foreground: 0 0% 98%;
37
- --tp-border: 240 3.7% 15.9%;
38
- }
39
- .twist-aplayer-vars {
40
- --tp-icon-width: 15px;
41
- --tp-icon-height: 15px;
42
- --tp-icon-font-size: 15px;
43
- --tp-icon-transition-function: ease-in-out;
44
- --tp-icon-transition-timing: .2s;
45
- --tp-max-width: 400px;
46
- --tp-zIndex: 99;
47
- --tp-pic-width: 66px;
48
- --tp-pic-height: 66px;
49
- --tp-pic-transition-function: ease;
50
- --tp-pic-transition-timing: .3s;
51
- --tp-button-background: rgba(0, 0, 0, 0.2);
52
- --tp-box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
53
- }
54
- .twist-aplayer {
55
- font-family: Arial, Helvetica, sans-serif;
56
- -webkit-user-select: none;
57
- -moz-user-select: none;
58
- user-select: none;
59
- line-height: normal;
60
- border-radius: 2px;
61
- box-shadow: var(--tp-box-shadow);
62
- overflow: hidden;
63
- border: 1px solid var(--tp-border);
64
- }
65
- .twist-aplayer * {
66
- box-sizing: content-box;
67
- }
68
- .twist-aplayer__body {
69
- background-color: hsl(var(--tp-background));
70
- }
71
- .twist-aplayer-icon {
72
- width: var(--tp-icon-width);
73
- height: var(--tp-icon-width);
74
- border: none;
75
- background-color: transparent;
76
- outline: none;
77
- cursor: pointer;
78
- opacity: 0.8;
79
- vertical-align: middle;
80
- padding: 0;
81
- font-size: var(--tp-icon-font-size);
82
- margin: 0;
83
- display: inline-block;
84
- }
85
- .twist-aplayer-controller__time .twist-aplayer-icon path {
86
- fill: hsl(var(--tp-muted-foreground));
87
- }
88
- .twist-aplayer-controller__time .twist-aplayer-icon:hover path {
89
- fill: hsl(var(--tp-primary));
90
- }
91
- .twist-aplayer-icon path {
92
- transition: all var(--tp-icon-transition-timing) var(--tp-icon-transition-function);
93
- }
94
- .twist-aplayer-icon-lrc-inactivity svg {
95
- opacity: 0.4;
96
- }
97
- .twist-aplayer-icon-loading {
98
- display: none;
99
- }
100
- .twist-aplayer--loading .twist-aplayer-icon-loading {
101
- display: block;
102
- }
103
- .twist-aplayer-icon-loading svg {
104
- position: absolute;
105
- width: 10px;
106
- height: 10px;
107
- animation: rotate 1s linear infinite;
108
- }
109
- .twist-aplayer-icon-loading svg path {
110
- fill: hsl(var(--tp-background));
111
- }
112
- .twist-aplayer-icon-back, .twist-aplayer-icon-forward, .twist-aplayer-icon-lrc, .twist-aplayer-icon-order, .twist-aplayer-icon-play {
113
- display: none;
114
- }
115
- .twist-aplayer.twist-aplayer--fixed {
116
- position: fixed;
117
- bottom: 0;
118
- left: 0;
119
- right: 0;
120
- margin: 0;
121
- z-index: var(--tp-zIndex);
122
- overflow: visible;
123
- max-width: var(--tp-max-width);
124
- box-shadow: none;
125
- }
126
- .twist-aplayer--fixed .twist-aplayer__body {
127
- position: fixed;
128
- bottom: 0;
129
- left: 0;
130
- right: 0;
131
- margin: 0;
132
- z-index: 99;
133
- padding-right: 18px;
134
- transition: all 0.3s ease;
135
- max-width: 400px;
136
- }
137
- .twist-aplayer--fixed .twist-aplayer-list {
138
- margin-bottom: 65px;
139
- border: 1px solid hsl(var(--tp-border));
140
- border-bottom: none;
141
- }
142
- .twist-aplayer--fixed .twist-aplayer__info {
143
- transform: scaleX(1);
144
- transform-origin: 0 0;
145
- transition: all 0.3s ease;
146
- border-bottom: none;
147
- border-top: 1px solid hsl(var(--tp-border));
148
- }
149
- .twist-aplayer--withlist .twist-aplayer__info {
150
- border-bottom: 1px solid hsl(var(--tp-border));
151
- }
152
- .twist-aplayer--withlist .twist-aplayer-list {
153
- display: block;
154
- }
155
- .twist-aplayer--withlist .twist-aplayer-icon-order, .twist-aplayer--withlist .twist-aplayer-icon-menu {
156
- display: inline;
157
- }
158
- .twist-aplayer--fixed .twist-aplayer-icon-back, .twist-aplayer--fixed .twist-aplayer-icon-forward, .twist-aplayer--fixed .twist-aplayer-icon-lrc, .twist-aplayer--fixed .twist-aplayer-icon-play {
159
- display: inline-block;
160
- }
161
- .twist-aplayer--fixed .twist-aplayer-icon-back, .twist-aplayer--fixed .twist-aplayer-icon-forward, .twist-aplayer--fixed .twist-aplayer-icon-menu, .twist-aplayer--fixed .twist-aplayer-icon-play {
162
- position: absolute;
163
- bottom: 27px;
164
- width: 20px;
165
- height: 20px;
166
- }
167
- .twist-aplayer--fixed .twist-aplayer-icon-back, .twist-aplayer--fixed .twist-aplayer-icon-forward, .twist-aplayer--fixed .twist-aplayer-icon-play {
168
- font-size: 20px;
169
- }
170
- .twist-aplayer--fixed .twist-aplayer-icon-back {
171
- right: 75px;
172
- }
173
- .twist-aplayer--fixed .twist-aplayer-icon-play {
174
- right: 50px;
175
- }
176
- .twist-aplayer--fixed .twist-aplayer-icon-forward {
177
- right: 25px;
178
- }
179
- .twist-aplayer--fixed .twist-aplayer-icon-menu {
180
- right: 0%;
181
- }
182
- .twist-aplayer--narrow {
183
- width: 66px;
184
- }
185
- .twist-aplayer--narrow .twist-aplayer__info, .twist-aplayer--narrow .twist-aplayer-list {
186
- display: none;
187
- }
188
- .twist-aplayer--narrow .twist-aplayer__body, .twist-aplayer--narrow .twist-aplayer__pic {
189
- width: 66px !important;
190
- height: 66px !important;
191
- }
192
- .twist-aplayer--fixed .twist-aplayer-lrc {
193
- display: block;
194
- position: fixed;
195
- bottom: 10px;
196
- left: 0;
197
- right: 0;
198
- margin: 0;
199
- z-index: 98;
200
- pointer-events: none;
201
- text-shadow: -1px -1px 0 #fff;
202
- }
203
- .twist-aplayer--fixed .twist-aplayer-lrc::after, .twist-aplayer--fixed .twist-aplayer-lrc::before {
204
- display: none;
205
- }
206
- .twist-aplayer--withlrc .twist-aplayer-lrc {
207
- display: block;
208
- }
209
- .twist-aplayer--withlrc .twist-aplayer__info {
210
- margin-left: 90px;
211
- height: 90px;
212
- padding: 10px 7px 0;
213
- }
214
- .twist-aplayer--withlrc .twist-aplayer__pic {
215
- height: 90px;
216
- width: 90px;
217
- }
218
- .twist-aplayer__pic {
219
- position: relative;
220
- float: left;
221
- width: var(--tp-pic-width);
222
- height: var(--tp-pic-height);
223
- background-size: cover;
224
- background-position: 50%;
225
- transition: all var(--tp-pic-transition-timing) var(--tp-pic-transition-function);
226
- cursor: pointer;
227
- }
228
- .twist-aplayer__button {
229
- position: absolute;
230
- border-radius: 50%;
231
- opacity: 0.8;
232
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
233
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
234
- background: hsl(var(--tp-primary-foreground));
235
- transition: all 0.1s ease;
236
- }
237
- .twist-aplayer--play {
238
- width: 28px;
239
- height: 28px;
240
- bottom: 50%;
241
- right: 50%;
242
- margin: 0 -15px -15px 0;
243
- }
244
- .twist-aplayer--play svg {
245
- position: absolute;
246
- top: 4px;
247
- left: 5px;
248
- height: 20px;
249
- width: 20px;
250
- }
251
- .twist-aplayer--pause {
252
- font-size: 12px;
253
- width: 18px;
254
- height: 18px;
255
- bottom: 4px;
256
- right: 4px;
257
- }
258
- .twist-aplayer--pause svg {
259
- position: absolute;
260
- top: 3px;
261
- left: 3px;
262
- height: 12px;
263
- width: 12px;
264
- }
265
- .twist-aplayer--play path, .twist-aplayer--pause path {
266
- fill: hsl(var(--tp-accent-foreground));
267
- }
268
- .twist-aplayer__info {
269
- margin-left: 66px;
270
- padding: 14px 7px 0 10px;
271
- height: 66px;
272
- box-sizing: border-box;
273
- }
274
- .twist-aplayer__music {
275
- overflow: hidden;
276
- white-space: nowrap;
277
- text-overflow: ellipsis;
278
- margin: 0 0 13px 5px;
279
- -webkit-user-select: text;
280
- -moz-user-select: text;
281
- user-select: text;
282
- cursor: default;
283
- padding-bottom: 2px;
284
- height: 20px;
285
- }
286
- .twist-aplayer__notice {
287
- opacity: 0;
288
- position: absolute;
289
- top: 50%;
290
- left: 50%;
291
- z-index: 100;
292
- transform: translate(-50%, -50%);
293
- font-size: 12px;
294
- border-radius: 4px;
295
- padding: 5px 10px;
296
- transition: all 0.3s ease-in-out;
297
- overflow: hidden;
298
- pointer-events: none;
299
- background-color: hsl(var(--tp-accent));
300
- color: hsl(var(--tp-accent-foreground));
301
- }
302
- .twist-aplayer--fixed .twist-aplayer__miniswitcher {
303
- display: block;
304
- }
305
- .twist-aplayer__miniswitcher {
306
- display: none;
307
- position: absolute;
308
- top: 0;
309
- right: 0;
310
- bottom: 0;
311
- height: 100%;
312
- background: hsl(var(--tp-accent));
313
- width: 18px;
314
- border-radius: 0 2px 2px 0;
315
- }
316
- .twist-aplayer__miniswitcher .twist-aplayer-icon {
317
- height: 100%;
318
- width: 100%;
319
- transform: rotateY(180deg);
320
- transition: all 0.3s ease;
321
- }
322
- .twist-aplayer__miniswitcher .twist-aplayer-icon path {
323
- fill: hsl(var(--tp-muted-foreground));
324
- }
325
- .twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-icon {
326
- transform: rotateY(0);
327
- }
328
- .twist-aplayer__title {
329
- color: hsl(var(--tp-secondary-foreground));
330
- font-size: 14px;
331
- }
332
- .twist-aplayer__author {
333
- font-size: 12px;
334
- color: hsl(var(--tp-muted-foreground));
335
- }
336
- .twist-aplayer__author > a {
337
- color: inherit;
338
- text-decoration: none;
339
- }
340
-
341
- .twist-aplayer-bar {
342
- margin: 0 0 0 5px;
343
- padding: 4px 0;
344
- cursor: pointer !important;
345
- flex: 1;
346
- transition: all 0.2s ease-in-out;
347
- }
348
- .twist-aplayer-bar-vars {
349
- --tp-bar-width: 100%;
350
- --tp-bar-height: 2px;
351
- --tp-bar-background: hsl(var(--tp-primary) / .2);
352
- --tp-bar-played-background: hsl(var(--tp-primary));
353
- --tp-bar-loaded-background: hsl(var(--tp-foreground));
354
- --tp-bar-loaded-transition-timing: .5s;
355
- --tp-bar-loaded-transition-function: ease;
356
- --tp-bar-thumb-width: 10px;
357
- --tp-bar-thumb-height: 10px;
358
- --tp-bar-thumb-margin-top: -4px;
359
- --tp-bar-thumb-margin-right: -10px;
360
- --tp-bar-thumb-transition-function: ease-in-out;
361
- --tp-bar-thumb-transition-timing: .3s;
362
- --tp-bar-thumb-hover-scale: 1;
363
- --tp-bar-thumb-border-radius: 50%;
364
- --tp-bar-thumb-background: hsl(var(--tp-foreground));
365
- }
366
- .twist-aplayer-bar__inner {
367
- position: relative;
368
- width: var(--tp-bar-width);
369
- height: var(--tp-bar-height);
370
- background: var(--tp-bar-background);
371
- }
372
- .twist-aplayer-bar__loaded {
373
- position: absolute;
374
- left: 0;
375
- top: 0;
376
- bottom: 0;
377
- height: var(--tp-bar-height);
378
- background: var(--tp-bar-loaded-background);
379
- transition: all var(--tp-bar-loaded-transition-timing) var(--tp-bar-loaded-transition-function);
380
- }
381
- .twist-aplayer-bar__played {
382
- position: absolute;
383
- left: 0;
384
- top: 0;
385
- bottom: 0;
386
- height: var(--tp-bar-height);
387
- background-color: var(--tp-bar-played-backgroun);
388
- }
389
- .twist-aplayer-bar__thumb {
390
- position: absolute;
391
- top: 0;
392
- right: 5px;
393
- margin-top: var(--tp-bar-thumb-margin-top);
394
- margin-right: var(--tp-bar-thumb-margin-right);
395
- width: var(--tp-bar-thumb-width);
396
- height: var(--tp-bar-thumb-height);
397
- border-radius: var(--tp-bar-thumb-border-radius);
398
- cursor: pointer;
399
- background-color: var(--tp-bar-thumb-background);
400
- transition: all var(--tp-bar-thumb-transition-timing) var(--tp-bar-thumb-transition-function);
401
- transform: scale(0);
402
- -webkit-transform: scale(0);
403
- }
404
- .twist-aplayer-bar:hover .twist-aplayer-bar__thumb {
405
- transform: scale(var(--tp-bar-thumb-hover-scale));
406
- -webkit-transform: scale(var(--tp-bar-thumb-hover-scale));
407
- }
408
-
409
- .twist-aplayer-volumn {
410
- position: relative;
411
- display: inline-block;
412
- margin-left: 3px;
413
- cursor: pointer !important;
414
- }
415
- .twist-aplayer-volumn-vars {
416
- --tp-volume-bar-background: hsl(var(--tp-primary) / .3);
417
- --tp-volume-bar-width: 5px;
418
- --tp-volume-bar-height: 35px;
419
- --tp-volume-bar-border-radius: 2.5px;
420
- --tp-volume-thumb-width: 5px;
421
- --tp-volume-thumb-background: hsl(var(--tp-primary));
422
- --tp-volume-thumb-transition-function: ease;
423
- --tp-volume-bar-wrap-transition-function: ease-in-out;
424
- --tp-volume-bar-wrap-timing: .2s;
425
- --tp-volume-thumb-timing: .1s;
426
- }
427
- .twist-aplayer-volumn__bar-wrap {
428
- position: absolute;
429
- bottom: 15px;
430
- right: -3px;
431
- width: 25px;
432
- height: 0;
433
- z-index: 99;
434
- overflow: hidden;
435
- transition: all var(--tp-volume-bar-wrap-timing) var(--tp-volume-bar-wrap-transition-function);
436
- }
437
- .twist-aplayer-volumn:hover .twist-aplayer-volumn__bar-wrap {
438
- height: 40px;
439
- }
440
- .twist-aplayer-volumn__bar-wrap--active {
441
- height: 40px;
442
- }
443
- .twist-aplayer-volumn__bar {
444
- position: absolute;
445
- bottom: 0;
446
- right: 10px;
447
- width: var(--tp-volume-bar-width);
448
- height: var(--tp-volume-bar-height);
449
- background: var(--tp-volume-bar-background);
450
- border-radius: var(--tp-volume-bar-border-radius);
451
- overflow: hidden;
452
- }
453
- .twist-aplayer-volumn__thumb {
454
- position: absolute;
455
- bottom: 0;
456
- right: 0;
457
- width: var(--tp-volume-thumb-width);
458
- background-color: var(--tp-volume-thumb-background);
459
- transition: all var(--tp-volume-thumb-timing) var(--tp-volume-thumb-transition-function);
460
- }
461
-
462
- .twist-aplayer-controller {
463
- position: relative;
464
- display: flex;
465
- }
466
- .twist-aplayer-controller__time {
467
- position: relative;
468
- right: 0;
469
- bottom: 4px;
470
- height: 17px;
471
- font-size: 11px;
472
- padding-left: 7px;
473
- }
474
- .twist-aplayer-controller__time-inner {
475
- color: hsl(var(--tp-muted-foreground));
476
- vertical-align: middle;
477
- }
478
-
479
- .twist-aplayer-list {
480
- overflow: auto;
481
- transition: all 0.5s ease;
482
- will-change: height;
483
- display: none;
484
- overflow: hidden;
485
- }
486
- .twist-aplayer-list--hide {
487
- max-height: 0 !important;
488
- }
489
- .twist-aplayer-list ol {
490
- list-style-type: none;
491
- margin: 0;
492
- padding: 0;
493
- overflow-y: auto;
494
- }
495
- .twist-aplayer-list ol li {
496
- position: relative;
497
- height: 32px;
498
- line-height: 32px;
499
- padding: 0 15px;
500
- font-size: 12px;
501
- border-top: 1px solid hsl(var(--tp-border));
502
- cursor: pointer;
503
- transition: all 0.2s ease;
504
- overflow: hidden;
505
- margin: 0;
506
- background-color: hsl(var(--tp-background));
507
- }
508
- .twist-aplayer-list ol li.twist-aplayer-list--active {
509
- background-color: hsl(var(--tp-secondary));
510
- }
511
- .twist-aplayer-list ol li:first-child {
512
- border: none;
513
- }
514
- .twist-aplayer-list__cur {
515
- display: none;
516
- width: 3px;
517
- height: 22px;
518
- position: absolute;
519
- left: 0;
520
- top: 5px;
521
- cursor: pointer;
522
- background-color: hsl(var(--tp-accent-foreground));
523
- }
524
- .twist-aplayer-list--active .twist-aplayer-list__cur {
525
- display: inline-block;
526
- }
527
- .twist-aplayer-list__index {
528
- color: hsl(var(--tp-muted-foreground));
529
- margin-right: 12px;
530
- cursor: pointer;
531
- }
532
- .twist-aplayer-list__title {
533
- color: hsl(var(--tp-secondary-foreground));
534
- }
535
- .twist-aplayer-list__author {
536
- color: hsl(var(--tp-muted-foreground));
537
- float: right;
538
- cursor: pointer;
539
- }
540
-
541
- .twist-aplayer-lrc {
542
- display: none;
543
- position: relative;
544
- height: 30px;
545
- text-align: center;
546
- overflow: hidden;
547
- margin: -10px 0 7px;
548
- }
549
- .twist-aplayer-lrc::after, .twist-aplayer-lrc::before {
550
- content: " ";
551
- position: absolute;
552
- z-index: 1;
553
- display: block;
554
- overflow: hidden;
555
- width: 100%;
556
- }
557
- .twist-aplayer-lrc::before {
558
- top: 0;
559
- height: 10%;
560
- background: linear-gradient(180deg, hsl(var(--tp-background)) 0, hsla(0, 0%, 100%, 0));
561
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0);
562
- }
563
- .twist-aplayer-lrc::after {
564
- bottom: 0;
565
- height: 33%;
566
- background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsl(var(--tp-background)));
567
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0);
568
- }
569
- .twist-aplayer-lrc p {
570
- font-size: 12px;
571
- color: hsl(var(--tp-secondary-foreground));
572
- line-height: 16px !important;
573
- height: 16px !important;
574
- padding: 0 !important;
575
- margin: 0 !important;
576
- transition: all 0.5s ease-out;
577
- opacity: 0.4;
578
- overflow: hidden;
579
- text-shadow: none;
580
- }
581
- .twist-aplayer-lrc__contents {
582
- width: 100%;
583
- transition: all 0.5s ease-out;
584
- -webkit-user-select: text;
585
- -moz-user-select: text;
586
- user-select: text;
587
- cursor: default;
588
- }
589
- .twist-aplayer-lrc p.twist-aplayer-lrc__current {
590
- opacity: 1;
591
- overflow: visible;
592
- height: auto !important;
593
- min-height: 16px;
594
- }
595
- .twist-aplayer-lrc.twist-aplayer-lrc--hide {
596
- display: none;
597
- }
1
+ @keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.twist-aplayer-light{--tp-background: 0 0% 100%;--tp-foreground: 240 10% 3.9%;--tp-card: 0 0% 100%;--tp-card-foreground: 240 10% 3.9%;--tp-primary: 240 5.9% 10%;--tp-primary-foreground: 0 0% 98%;--tp-secondary: 240 4.8% 95.9%;--tp-secondary-foreground: 240 5.9% 10%;--tp-muted: 240 4.8% 95.9%;--tp-muted-foreground: 240 3.8% 46.1%;--tp-accent: 240 4.8% 95.9%;--tp-accent-foreground: 240 5.9% 10%;--tp-border: 240 5.9% 90%}.twist-aplayer-dark{--tp-background: 240 10% 3.9%;--tp-foreground: 0 0% 98%;--tp-card: 240 10% 3.9%;--tp-card-foreground: 0 0% 98%;--tp-primary: 0 0% 98%;--tp-primary-foreground: 240 5.9% 10%;--tp-secondary: 240 3.7% 15.9%;--tp-secondary-foreground: 0 0% 98%;--tp-muted: 240 3.7% 15.9%;--tp-muted-foreground: 240 5% 64.9%;--tp-accent: 240 3.7% 15.9%;--tp-accent-foreground: 0 0% 98%;--tp-border: 240 3.7% 15.9%}.twist-aplayer-vars{--tp-icon-width: 15px;--tp-icon-height: 15px;--tp-icon-font-size: 15px;--tp-icon-transition-function: ease-in-out;--tp-icon-transition-timing: .2s;--tp-max-width: 400px;--tp-zIndex: 99;--tp-pic-width: 66px;--tp-pic-height: 66px;--tp-pic-transition-function: ease;--tp-pic-transition-timing: .3s;--tp-button-background: rgba(0, 0, 0, .2);--tp-box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}.twist-aplayer{font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:normal;border-radius:2px;box-shadow:var(--tp-box-shadow);overflow:hidden;border:1px solid var(--tp-border)}.twist-aplayer *{box-sizing:content-box}.twist-aplayer__body{background-color:hsl(var(--tp-background))}.twist-aplayer-icon{width:var(--tp-icon-width);height:var(--tp-icon-width);border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:var(--tp-icon-font-size);margin:0;display:inline-block}.twist-aplayer-controller__time .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-controller__time .twist-aplayer-icon:hover path{fill:hsl(var(--tp-primary))}.twist-aplayer-icon path{transition:all var(--tp-icon-transition-timing) var(--tp-icon-transition-function)}.twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer-icon-loading{display:none}.twist-aplayer--loading .twist-aplayer-icon-loading{display:block}.twist-aplayer-icon-loading svg{position:absolute;width:10px;height:10px;animation:rotate 1s linear infinite}.twist-aplayer-icon-loading svg path{fill:hsl(var(--tp-background))}.twist-aplayer-icon-back,.twist-aplayer-icon-forward,.twist-aplayer-icon-lrc,.twist-aplayer-icon-order,.twist-aplayer-icon-play{display:none}.twist-aplayer.twist-aplayer--fixed{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:var(--tp-zIndex);overflow:visible;max-width:var(--tp-max-width);box-shadow:none}.twist-aplayer--fixed .twist-aplayer__body{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;padding-right:18px;transition:all .3s ease;max-width:400px}.twist-aplayer--fixed .twist-aplayer-list{margin-bottom:65px;border:1px solid hsl(var(--tp-border));border-bottom:none}.twist-aplayer--fixed .twist-aplayer__info{transform:scaleX(1);transform-origin:0 0;transition:all .3s ease;border-bottom:none;border-top:1px solid hsl(var(--tp-border))}.twist-aplayer--withlist .twist-aplayer__info{border-bottom:1px solid hsl(var(--tp-border))}.twist-aplayer--withlist .twist-aplayer-list{display:block}.twist-aplayer--withlist .twist-aplayer-icon-order,.twist-aplayer--withlist .twist-aplayer-icon-menu{display:inline}.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer--fixed .twist-aplayer-icon-lrc,.twist-aplayer--fixed .twist-aplayer-icon-play{display:inline-block}.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer--fixed .twist-aplayer-icon-menu,.twist-aplayer--fixed .twist-aplayer-icon-play{position:absolute;bottom:27px;width:20px;height:20px}.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer--fixed .twist-aplayer-icon-play{font-size:20px}.twist-aplayer--fixed .twist-aplayer-icon-back{right:75px}.twist-aplayer--fixed .twist-aplayer-icon-play{right:50px}.twist-aplayer--fixed .twist-aplayer-icon-forward{right:25px}.twist-aplayer--fixed .twist-aplayer-icon-menu{right:0%}.twist-aplayer--narrow{width:66px}.twist-aplayer--narrow .twist-aplayer__info,.twist-aplayer--narrow .twist-aplayer-list{display:none}.twist-aplayer--narrow .twist-aplayer__body,.twist-aplayer--narrow .twist-aplayer__pic{width:66px!important;height:66px!important}.twist-aplayer--fixed .twist-aplayer-lrc{display:block;position:fixed;bottom:10px;left:0;right:0;margin:0;z-index:98;pointer-events:none;text-shadow:-1px -1px 0 #fff}.twist-aplayer--fixed .twist-aplayer-lrc:after,.twist-aplayer--fixed .twist-aplayer-lrc:before{display:none}.twist-aplayer--withlrc .twist-aplayer-lrc{display:block}.twist-aplayer--withlrc .twist-aplayer__info{margin-left:90px;height:90px;padding:10px 7px 0}.twist-aplayer--withlrc .twist-aplayer__pic{height:90px;width:90px}.twist-aplayer__pic{position:relative;float:left;width:var(--tp-pic-width);height:var(--tp-pic-height);background-size:cover;background-position:50%;transition:all var(--tp-pic-transition-timing) var(--tp-pic-transition-function);cursor:pointer}.twist-aplayer__button{position:absolute;border-radius:50%;opacity:.8;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px #0003;background:hsl(var(--tp-primary-foreground));transition:all .1s ease}.twist-aplayer--play{width:28px;height:28px;bottom:50%;right:50%;margin:0 -15px -15px 0}.twist-aplayer--play svg{position:absolute;top:4px;left:5px;height:20px;width:20px}.twist-aplayer--pause{font-size:12px;width:18px;height:18px;bottom:4px;right:4px}.twist-aplayer--pause svg{position:absolute;top:3px;left:3px;height:12px;width:12px}.twist-aplayer--play path,.twist-aplayer--pause path{fill:hsl(var(--tp-accent-foreground))}.twist-aplayer__info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.twist-aplayer__music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default;padding-bottom:2px;height:20px}.twist-aplayer__notice{opacity:0;position:absolute;top:50%;left:50%;z-index:100;transform:translate(-50%,-50%);font-size:12px;border-radius:4px;padding:5px 10px;transition:all .3s ease-in-out;overflow:hidden;pointer-events:none;background-color:hsl(var(--tp-accent));color:hsl(var(--tp-accent-foreground))}.twist-aplayer--fixed .twist-aplayer__miniswitcher{display:block}.twist-aplayer__miniswitcher{display:none;position:absolute;top:0;right:0;bottom:0;height:100%;background:hsl(var(--tp-accent));width:18px;border-radius:0 2px 2px 0}.twist-aplayer__miniswitcher .twist-aplayer-icon{height:100%;width:100%;transform:rotateY(180deg);transition:all .3s ease}.twist-aplayer__miniswitcher .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-icon{transform:rotateY(0)}.twist-aplayer__title{color:hsl(var(--tp-secondary-foreground));font-size:14px}.twist-aplayer__author{font-size:12px;color:hsl(var(--tp-muted-foreground))}.twist-aplayer__author>a{color:inherit;text-decoration:none}.twist-aplayer-bar{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;flex:1;transition:all .2s ease-in-out}.twist-aplayer-bar-vars{--tp-bar-width: 100%;--tp-bar-height: 2px;--tp-bar-background: hsl(var(--tp-primary) / .2);--tp-bar-played-background: hsl(var(--tp-primary));--tp-bar-loaded-background: hsl(var(--tp-foreground));--tp-bar-loaded-transition-timing: .5s;--tp-bar-loaded-transition-function: ease;--tp-bar-thumb-width: 10px;--tp-bar-thumb-height: 10px;--tp-bar-thumb-margin-top: -4px;--tp-bar-thumb-margin-right: -10px;--tp-bar-thumb-transition-function: ease-in-out;--tp-bar-thumb-transition-timing: .3s;--tp-bar-thumb-hover-scale: 1;--tp-bar-thumb-border-radius: 50%;--tp-bar-thumb-background: hsl(var(--tp-foreground))}.twist-aplayer-bar__inner{position:relative;width:var(--tp-bar-width);height:var(--tp-bar-height);background:var(--tp-bar-background)}.twist-aplayer-bar__loaded{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background:var(--tp-bar-loaded-background);transition:all var(--tp-bar-loaded-transition-timing) var(--tp-bar-loaded-transition-function)}.twist-aplayer-bar__played{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background-color:var(--tp-bar-played-backgroun)}.twist-aplayer-bar__thumb{position:absolute;top:0;right:5px;margin-top:var(--tp-bar-thumb-margin-top);margin-right:var(--tp-bar-thumb-margin-right);width:var(--tp-bar-thumb-width);height:var(--tp-bar-thumb-height);border-radius:var(--tp-bar-thumb-border-radius);cursor:pointer;background-color:var(--tp-bar-thumb-background);transition:all var(--tp-bar-thumb-transition-timing) var(--tp-bar-thumb-transition-function);transform:scale(0);-webkit-transform:scale(0)}.twist-aplayer-bar:hover .twist-aplayer-bar__thumb{transform:scale(var(--tp-bar-thumb-hover-scale));-webkit-transform:scale(var(--tp-bar-thumb-hover-scale))}.twist-aplayer-volumn{position:relative;display:inline-block;margin-left:3px;cursor:pointer!important}.twist-aplayer-volumn-vars{--tp-volume-bar-background: hsl(var(--tp-primary) / .3);--tp-volume-bar-width: 5px;--tp-volume-bar-height: 35px;--tp-volume-bar-border-radius: 2.5px;--tp-volume-thumb-width: 5px;--tp-volume-thumb-background: hsl(var(--tp-primary));--tp-volume-thumb-transition-function: ease;--tp-volume-bar-wrap-transition-function: ease-in-out;--tp-volume-bar-wrap-timing: .2s;--tp-volume-thumb-timing: .1s}.twist-aplayer-volumn__bar-wrap{position:absolute;bottom:15px;right:-3px;width:25px;height:0;z-index:99;overflow:hidden;transition:all var(--tp-volume-bar-wrap-timing) var(--tp-volume-bar-wrap-transition-function)}.twist-aplayer-volumn:hover .twist-aplayer-volumn__bar-wrap,.twist-aplayer-volumn__bar-wrap--active{height:40px}.twist-aplayer-volumn__bar{position:absolute;bottom:0;right:10px;width:var(--tp-volume-bar-width);height:var(--tp-volume-bar-height);background:var(--tp-volume-bar-background);border-radius:var(--tp-volume-bar-border-radius);overflow:hidden}.twist-aplayer-volumn__thumb{position:absolute;bottom:0;right:0;width:var(--tp-volume-thumb-width);background-color:var(--tp-volume-thumb-background);transition:all var(--tp-volume-thumb-timing) var(--tp-volume-thumb-transition-function)}.twist-aplayer-controller{position:relative;display:flex}.twist-aplayer-controller__time{position:relative;right:0;bottom:4px;height:17px;font-size:11px;padding-left:7px}.twist-aplayer-controller__time-inner{color:hsl(var(--tp-muted-foreground));vertical-align:middle}.twist-aplayer-list{overflow:auto;transition:all .5s ease;will-change:height;display:none;overflow:hidden}.twist-aplayer-list--hide{max-height:0!important}.twist-aplayer-list ol{list-style-type:none;margin:0;padding:0;overflow-y:auto}.twist-aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid hsl(var(--tp-border));cursor:pointer;transition:all .2s ease;overflow:hidden;margin:0;background-color:hsl(var(--tp-background))}.twist-aplayer-list ol li.twist-aplayer-list--active{background-color:hsl(var(--tp-secondary))}.twist-aplayer-list ol li:first-child{border:none}.twist-aplayer-list__cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer;background-color:hsl(var(--tp-accent-foreground))}.twist-aplayer-list--active .twist-aplayer-list__cur{display:inline-block}.twist-aplayer-list__index{color:hsl(var(--tp-muted-foreground));margin-right:12px;cursor:pointer}.twist-aplayer-list__title{color:hsl(var(--tp-secondary-foreground))}.twist-aplayer-list__author{color:hsl(var(--tp-muted-foreground));float:right;cursor:pointer}.twist-aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.twist-aplayer-lrc:after,.twist-aplayer-lrc:before{content:" ";position:absolute;z-index:1;display:block;overflow:hidden;width:100%}.twist-aplayer-lrc:before{top:0;height:10%;background:linear-gradient(180deg,hsl(var(--tp-background)) 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.twist-aplayer-lrc:after{bottom:0;height:33%;background:linear-gradient(180deg,#fff0 0,hsl(var(--tp-background)));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.twist-aplayer-lrc p{font-size:12px;color:hsl(var(--tp-secondary-foreground));line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;transition:all .5s ease-out;opacity:.4;overflow:hidden;text-shadow:none}.twist-aplayer-lrc__contents{width:100%;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default}.twist-aplayer-lrc p.twist-aplayer-lrc__current{opacity:1;overflow:visible;height:auto!important;min-height:16px}.twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}
package/dist/index.d.ts CHANGED
@@ -80,6 +80,6 @@ declare type PlaylistLoop = 'all' | 'one' | 'none';
80
80
 
81
81
  declare type PlaylistOrder = 'list' | 'random';
82
82
 
83
- export declare function TwistAPlayer({ audio, appearance, volume, initialLoop, initialOrder, autoPlay, listMaxHeight, mini: _mini, mutex, listFolded, theme }: APlayerProps): JSX_2.Element;
83
+ export declare function TwistAPlayer({ audio, appearance, volume, initialLoop, initialOrder, autoPlay, listMaxHeight, mini: _mini, mutex, listFolded, theme, }: APlayerProps): JSX_2.Element;
84
84
 
85
85
  export { }