@vanduo-oss/framework 1.4.2 → 1.4.4

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/vanduo.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! Vanduo v1.4.2 | Built: 2026-05-23T19:59:36.731Z | git:adbe750 | development */
1
+ /*! Vanduo v1.4.4 | Built: 2026-06-07T19:14:20.877Z | git:781df0d | development */
2
2
  *, :before, :after {
3
3
  box-sizing: border-box;
4
4
  }
@@ -61284,6 +61284,122 @@ body > .vd-theme-customizer-panel.is-open {
61284
61284
  outline-offset: 1px;
61285
61285
  }
61286
61286
 
61287
+ :root {
61288
+ --vd-theme-switcher-menu-bg: var(--vd-color-white);
61289
+ --vd-theme-switcher-menu-border-color: var(--vd-border-color);
61290
+ --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
61291
+ --vd-theme-switcher-option-active-bg: var(--vd-color-primary-alpha-10);
61292
+ --vd-theme-switcher-option-active-color: var(--vd-color-primary);
61293
+ --vd-theme-switcher-z-index: 1000;
61294
+ }
61295
+
61296
+ [data-theme="dark"] {
61297
+ --vd-theme-switcher-menu-bg: var(--vd-bg-primary);
61298
+ --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
61299
+ }
61300
+
61301
+ @media (prefers-color-scheme: dark) {
61302
+ :root:not([data-theme]) {
61303
+ --vd-theme-switcher-menu-bg: var(--vd-bg-primary);
61304
+ --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
61305
+ }
61306
+ }
61307
+
61308
+ .vd-theme-switcher {
61309
+ display: inline-block;
61310
+ position: relative;
61311
+ }
61312
+
61313
+ .vd-theme-switcher-toggle {
61314
+ border: 1px solid var(--vd-border-color);
61315
+ border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));
61316
+ width: 2.375rem;
61317
+ height: 2.375rem;
61318
+ color: var(--vd-text-secondary);
61319
+ cursor: pointer;
61320
+ background: none;
61321
+ justify-content: center;
61322
+ align-items: center;
61323
+ padding: 0;
61324
+ font-size: 1.15rem;
61325
+ line-height: 1;
61326
+ transition: color .2s, border-color .2s, background .2s;
61327
+ display: inline-flex;
61328
+ }
61329
+
61330
+ .vd-theme-switcher-toggle:hover, .vd-theme-switcher-toggle:focus-visible {
61331
+ color: var(--vd-color-primary);
61332
+ border-color: var(--vd-color-primary);
61333
+ background: var(--vd-color-primary-alpha-10);
61334
+ outline: none;
61335
+ }
61336
+
61337
+ .vd-theme-switcher-menu {
61338
+ z-index: var(--vd-theme-switcher-z-index);
61339
+ background: var(--vd-theme-switcher-menu-bg, #fff);
61340
+ border: 1px solid var(--vd-theme-switcher-menu-border-color);
61341
+ border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));
61342
+ min-width: auto;
61343
+ box-shadow: var(--vd-shadow-lg);
61344
+ isolation: isolate;
61345
+ -webkit-backdrop-filter: none;
61346
+ visibility: hidden;
61347
+ pointer-events: none;
61348
+ transition: visibility var(--vd-transition-duration-base, .2s) var(--vd-transition-ease, ease),
61349
+ transform var(--vd-transition-duration-base, .2s) var(--vd-transition-ease, ease);
61350
+ flex-direction: column;
61351
+ gap: .25rem;
61352
+ margin: 0;
61353
+ padding: .375rem;
61354
+ list-style: none;
61355
+ display: none;
61356
+ position: absolute;
61357
+ top: calc(100% + .375rem);
61358
+ left: 0;
61359
+ transform: translateY(-6px);
61360
+ }
61361
+
61362
+ .vd-theme-switcher-menu-end .vd-theme-switcher-menu, .vd-theme-switcher.vd-theme-switcher-menu-end .vd-theme-switcher-menu {
61363
+ left: auto;
61364
+ right: 0;
61365
+ }
61366
+
61367
+ .vd-theme-switcher.is-open .vd-theme-switcher-menu, .vd-theme-switcher-menu.is-open {
61368
+ visibility: visible;
61369
+ pointer-events: auto;
61370
+ display: flex;
61371
+ transform: translateY(0);
61372
+ }
61373
+
61374
+ .vd-theme-switcher-option, .vd-theme-switcher-menu [data-theme-value] {
61375
+ border-radius: var(--vd-btn-border-radius-sm, var(--vd-radius-fib-3));
61376
+ width: 2.375rem;
61377
+ height: 2.375rem;
61378
+ color: var(--vd-text-secondary);
61379
+ cursor: pointer;
61380
+ background: none;
61381
+ border: 1px solid #0000;
61382
+ justify-content: center;
61383
+ align-items: center;
61384
+ padding: 0;
61385
+ font-size: 1.15rem;
61386
+ line-height: 1;
61387
+ transition: color .2s, background .2s, border-color .2s;
61388
+ display: inline-flex;
61389
+ }
61390
+
61391
+ .vd-theme-switcher-option:hover, .vd-theme-switcher-option:focus-visible, .vd-theme-switcher-menu [data-theme-value]:hover, .vd-theme-switcher-menu [data-theme-value]:focus-visible {
61392
+ color: var(--vd-text-primary);
61393
+ background: var(--vd-theme-switcher-option-hover-bg);
61394
+ outline: none;
61395
+ }
61396
+
61397
+ .vd-theme-switcher-option.is-active, .vd-theme-switcher-menu [data-theme-value].is-active {
61398
+ color: var(--vd-theme-switcher-option-active-color);
61399
+ background: var(--vd-theme-switcher-option-active-bg);
61400
+ border-color: var(--vd-color-primary-alpha-20, transparent);
61401
+ }
61402
+
61287
61403
  :root {
61288
61404
  --vd-image-box-backdrop-bg: #000000e6;
61289
61405
  --vd-image-box-backdrop-blur: 8px;
@@ -64179,695 +64295,6 @@ input.vd-doc-search-input {
64179
64295
  border-radius: var(--vd-spotlight-target-radius) !important;
64180
64296
  }
64181
64297
 
64182
- :root {
64183
- --vd-music-player-padding-x: 1.3125rem;
64184
- --vd-music-player-padding-y: .8125rem;
64185
- --vd-music-player-padding-x-sm: .8125rem;
64186
- --vd-music-player-padding-y-sm: .5rem;
64187
- --vd-music-player-padding-x-lg: 2.125rem;
64188
- --vd-music-player-padding-y-lg: 1.3125rem;
64189
- --vd-music-player-gap: .8125rem;
64190
- --vd-music-player-btn-size: 2.125rem;
64191
- --vd-music-player-btn-size-sm: 1.625rem;
64192
- --vd-music-player-btn-size-lg: 2.625rem;
64193
- --vd-music-player-icon-size: 1.125rem;
64194
- --vd-music-player-volume-width: clamp(3.25rem, 16vw, 4.5rem);
64195
- --vd-music-player-volume-width-sm: 3rem;
64196
- --vd-music-player-volume-width-lg: 5.5rem;
64197
- --vd-music-player-border-radius: var(--vd-border-radius, .5rem);
64198
- --vd-music-player-border-width: 1px;
64199
- --vd-music-player-bg: var(--vd-bg-primary);
64200
- --vd-music-player-bg-secondary: var(--vd-bg-secondary);
64201
- --vd-music-player-border: var(--vd-border-color);
64202
- --vd-music-player-text: var(--vd-text-primary);
64203
- --vd-music-player-text-muted: var(--vd-text-muted);
64204
- --vd-music-player-accent: var(--vd-color-primary);
64205
- --vd-music-player-btn-hover-bg: var(--vd-bg-secondary);
64206
- --vd-music-player-btn-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), .1));
64207
- --vd-music-player-track-bg: var(--vd-border-color);
64208
- --vd-music-player-track-fill: var(--vd-color-primary);
64209
- --vd-music-player-playlist-hover: var(--vd-bg-secondary);
64210
- --vd-music-player-playlist-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), .1));
64211
- --vd-music-player-playlist-active-text: var(--vd-color-primary);
64212
- --vd-music-player-transition: .15s ease;
64213
- --vd-music-player-glass-bg: var(--vd-glass-bg-light, #ffffffb8);
64214
- --vd-music-player-glass-border: var(--vd-glass-border-light, #ffffff80);
64215
- --vd-music-player-glass-shadow: var(--vd-glass-shadow, 0 4px 24px #0000001f);
64216
- --vd-music-player-floating-shadow: 0 12px 40px #0000002e;
64217
- --vd-music-player-floating-z: 10050;
64218
- --vd-music-player-floating-offset: 1rem;
64219
- --vd-music-player-toolbar-gap: .375rem;
64220
- --vd-music-player-handle-size: 1.5rem;
64221
- }
64222
-
64223
- [data-theme="dark"] {
64224
- --vd-music-player-bg: var(--vd-bg-primary);
64225
- --vd-music-player-bg-secondary: var(--vd-color-gray-800);
64226
- --vd-music-player-btn-hover-bg: var(--vd-color-gray-700);
64227
- --vd-music-player-playlist-hover: var(--vd-color-gray-700);
64228
- --vd-music-player-glass-bg: var(--vd-glass-bg-dark, #1e1e28b8);
64229
- --vd-music-player-glass-border: var(--vd-glass-border-dark, #ffffff24);
64230
- }
64231
-
64232
- @media (prefers-color-scheme: dark) {
64233
- :root:not([data-theme]) {
64234
- --vd-music-player-bg: var(--vd-bg-primary);
64235
- --vd-music-player-bg-secondary: var(--vd-color-gray-800);
64236
- --vd-music-player-btn-hover-bg: var(--vd-color-gray-700);
64237
- --vd-music-player-playlist-hover: var(--vd-color-gray-700);
64238
- --vd-music-player-glass-bg: var(--vd-glass-bg-dark, #1e1e28b8);
64239
- --vd-music-player-glass-border: var(--vd-glass-border-dark, #ffffff24);
64240
- }
64241
- }
64242
-
64243
- .vd-music-player {
64244
- background-color: var(--vd-music-player-bg);
64245
- border: var(--vd-music-player-border-width) solid var(--vd-music-player-border);
64246
- border-radius: var(--vd-music-player-border-radius);
64247
- padding: var(--vd-music-player-padding-y) var(--vd-music-player-padding-x);
64248
- box-sizing: border-box;
64249
- flex-direction: column;
64250
- gap: 0;
64251
- width: 100%;
64252
- min-width: 16rem;
64253
- max-width: 28rem;
64254
- display: flex;
64255
- }
64256
-
64257
- .vd-music-player-info {
64258
- align-items: center;
64259
- gap: .625rem;
64260
- min-height: 1.5rem;
64261
- margin-bottom: .625rem;
64262
- display: flex;
64263
- }
64264
-
64265
- .vd-music-player-icon {
64266
- color: var(--vd-music-player-accent);
64267
- flex-shrink: 0;
64268
- justify-content: center;
64269
- align-items: center;
64270
- width: 1rem;
64271
- height: 1rem;
64272
- display: flex;
64273
- }
64274
-
64275
- .vd-music-player-track-name {
64276
- font-size: var(--vd-font-size-sm, .875rem);
64277
- color: var(--vd-music-player-text);
64278
- white-space: nowrap;
64279
- text-overflow: ellipsis;
64280
- flex: 1;
64281
- min-width: 0;
64282
- overflow: hidden;
64283
- }
64284
-
64285
- .vd-music-player-track-name.is-idle {
64286
- color: var(--vd-music-player-text-muted);
64287
- font-style: italic;
64288
- }
64289
-
64290
- .vd-music-player-controls {
64291
- flex-wrap: wrap;
64292
- align-items: center;
64293
- gap: .375rem;
64294
- display: flex;
64295
- }
64296
-
64297
- .vd-music-player-btn {
64298
- width: var(--vd-music-player-btn-size);
64299
- height: var(--vd-music-player-btn-size);
64300
- border-radius: var(--vd-music-player-border-radius);
64301
- color: var(--vd-music-player-text);
64302
- cursor: pointer;
64303
- transition: background-color var(--vd-music-player-transition),
64304
- color var(--vd-music-player-transition);
64305
- background: none;
64306
- border: none;
64307
- flex-shrink: 0;
64308
- justify-content: center;
64309
- align-items: center;
64310
- padding: 0;
64311
- display: inline-flex;
64312
- }
64313
-
64314
- .vd-music-player-btn:hover:not(:disabled) {
64315
- background-color: var(--vd-music-player-btn-hover-bg);
64316
- color: var(--vd-music-player-accent);
64317
- }
64318
-
64319
- .vd-music-player-btn:focus-visible {
64320
- outline: 2px solid var(--vd-music-player-accent);
64321
- outline-offset: 1px;
64322
- }
64323
-
64324
- .vd-music-player-btn:disabled {
64325
- opacity: .38;
64326
- cursor: not-allowed;
64327
- }
64328
-
64329
- .vd-music-player-btn.is-active {
64330
- color: var(--vd-music-player-accent);
64331
- background-color: var(--vd-music-player-btn-active-bg);
64332
- }
64333
-
64334
- .vd-music-player-btn-play {
64335
- width: calc(var(--vd-music-player-btn-size) + .25rem);
64336
- height: calc(var(--vd-music-player-btn-size) + .25rem);
64337
- }
64338
-
64339
- .vd-music-player-btn svg, .vd-music-player-btn i {
64340
- width: var(--vd-music-player-icon-size);
64341
- height: var(--vd-music-player-icon-size);
64342
- font-size: var(--vd-music-player-icon-size);
64343
- pointer-events: none;
64344
- }
64345
-
64346
- .vd-music-player-spacer {
64347
- flex: 1.5rem;
64348
- min-width: 0;
64349
- }
64350
-
64351
- .vd-music-player-volume {
64352
- flex: 0 auto;
64353
- align-items: center;
64354
- gap: .3125rem;
64355
- min-width: 0;
64356
- max-width: 100%;
64357
- display: flex;
64358
- }
64359
-
64360
- .vd-music-player-volume-icon {
64361
- color: var(--vd-music-player-text-muted);
64362
- flex-shrink: 0;
64363
- align-items: center;
64364
- width: 1rem;
64365
- height: 1rem;
64366
- font-size: 1rem;
64367
- display: flex;
64368
- }
64369
-
64370
- .vd-music-player-volume-slider {
64371
- -webkit-appearance: none;
64372
- appearance: none;
64373
- width: var(--vd-music-player-volume-width);
64374
- background: var(--vd-music-player-track-bg);
64375
- cursor: pointer;
64376
- flex: 0 1 var(--vd-music-player-volume-width);
64377
- border-radius: 9999px;
64378
- outline: none;
64379
- min-width: 3.25rem;
64380
- max-width: 100%;
64381
- height: 4px;
64382
- }
64383
-
64384
- .vd-music-player-volume-slider:focus-visible {
64385
- outline: 2px solid var(--vd-music-player-accent);
64386
- outline-offset: 2px;
64387
- }
64388
-
64389
- .vd-music-player-volume-slider::-webkit-slider-thumb {
64390
- -webkit-appearance: none;
64391
- appearance: none;
64392
- background: var(--vd-music-player-accent);
64393
- cursor: pointer;
64394
- width: .75rem;
64395
- height: .75rem;
64396
- transition: transform var(--vd-music-player-transition);
64397
- border-radius: 50%;
64398
- }
64399
-
64400
- .vd-music-player-volume-slider::-webkit-slider-thumb:hover {
64401
- transform: scale(1.2);
64402
- }
64403
-
64404
- .vd-music-player-volume-slider::-moz-range-thumb {
64405
- background: var(--vd-music-player-accent);
64406
- cursor: pointer;
64407
- width: .75rem;
64408
- height: .75rem;
64409
- transition: transform var(--vd-music-player-transition);
64410
- border: none;
64411
- border-radius: 50%;
64412
- }
64413
-
64414
- .vd-music-player-volume-slider::-moz-range-thumb:hover {
64415
- transform: scale(1.2);
64416
- }
64417
-
64418
- .vd-music-player-volume-slider::-moz-range-progress {
64419
- background: var(--vd-music-player-track-fill);
64420
- border-radius: 9999px;
64421
- }
64422
-
64423
- .vd-music-player-progress {
64424
- align-items: center;
64425
- gap: .5rem;
64426
- margin-top: .625rem;
64427
- display: none;
64428
- }
64429
-
64430
- .vd-music-player.has-progress .vd-music-player-progress {
64431
- display: flex;
64432
- }
64433
-
64434
- .vd-music-player-progress-bar {
64435
- -webkit-appearance: none;
64436
- appearance: none;
64437
- background: var(--vd-music-player-track-bg);
64438
- cursor: pointer;
64439
- border-radius: 9999px;
64440
- outline: none;
64441
- flex: 1;
64442
- height: 4px;
64443
- }
64444
-
64445
- .vd-music-player-progress-bar:focus-visible {
64446
- outline: 2px solid var(--vd-music-player-accent);
64447
- outline-offset: 2px;
64448
- }
64449
-
64450
- .vd-music-player-progress-bar::-webkit-slider-thumb {
64451
- -webkit-appearance: none;
64452
- appearance: none;
64453
- background: var(--vd-music-player-accent);
64454
- cursor: pointer;
64455
- width: .75rem;
64456
- height: .75rem;
64457
- transition: transform var(--vd-music-player-transition);
64458
- border-radius: 50%;
64459
- }
64460
-
64461
- .vd-music-player-progress-bar::-webkit-slider-thumb:hover {
64462
- transform: scale(1.2);
64463
- }
64464
-
64465
- .vd-music-player-progress-bar::-moz-range-thumb {
64466
- background: var(--vd-music-player-accent);
64467
- cursor: pointer;
64468
- width: .75rem;
64469
- height: .75rem;
64470
- transition: transform var(--vd-music-player-transition);
64471
- border: none;
64472
- border-radius: 50%;
64473
- }
64474
-
64475
- .vd-music-player-progress-bar::-moz-range-progress {
64476
- background: var(--vd-music-player-track-fill);
64477
- border-radius: 9999px;
64478
- }
64479
-
64480
- .vd-music-player-time {
64481
- color: var(--vd-music-player-text-muted);
64482
- white-space: nowrap;
64483
- font-variant-numeric: tabular-nums;
64484
- text-align: right;
64485
- flex-shrink: 0;
64486
- min-width: 2.5rem;
64487
- font-size: .6875rem;
64488
- }
64489
-
64490
- .vd-music-player-time:first-child {
64491
- text-align: left;
64492
- }
64493
-
64494
- .vd-music-player-playlist {
64495
- border-top: var(--vd-music-player-border-width) solid var(--vd-music-player-border);
64496
- scrollbar-width: thin;
64497
- flex-direction: column;
64498
- max-height: 12rem;
64499
- margin-top: .625rem;
64500
- padding-top: .5rem;
64501
- display: none;
64502
- overflow-y: auto;
64503
- }
64504
-
64505
- .vd-music-player.has-playlist .vd-music-player-playlist.is-open {
64506
- display: flex;
64507
- }
64508
-
64509
- .vd-music-player-playlist-item {
64510
- border-radius: calc(var(--vd-music-player-border-radius) * .5);
64511
- cursor: pointer;
64512
- font-size: var(--vd-font-size-sm, .875rem);
64513
- color: var(--vd-music-player-text);
64514
- text-align: left;
64515
- width: 100%;
64516
- transition: background-color var(--vd-music-player-transition),
64517
- color var(--vd-music-player-transition);
64518
- background: none;
64519
- border: none;
64520
- align-items: center;
64521
- gap: .5rem;
64522
- padding: .375rem .5rem;
64523
- display: flex;
64524
- }
64525
-
64526
- .vd-music-player-playlist-item:hover {
64527
- background-color: var(--vd-music-player-playlist-hover);
64528
- }
64529
-
64530
- .vd-music-player-playlist-item:focus-visible {
64531
- outline: 2px solid var(--vd-music-player-accent);
64532
- outline-offset: 1px;
64533
- }
64534
-
64535
- .vd-music-player-playlist-item.is-active {
64536
- background-color: var(--vd-music-player-playlist-active-bg);
64537
- color: var(--vd-music-player-playlist-active-text);
64538
- font-weight: var(--vd-font-weight-medium, 500);
64539
- }
64540
-
64541
- .vd-music-player-playlist-num {
64542
- width: 1.25rem;
64543
- color: var(--vd-music-player-text-muted);
64544
- text-align: right;
64545
- font-variant-numeric: tabular-nums;
64546
- flex-shrink: 0;
64547
- font-size: .6875rem;
64548
- }
64549
-
64550
- .vd-music-player-playlist-item.is-active .vd-music-player-playlist-num {
64551
- color: var(--vd-music-player-accent);
64552
- }
64553
-
64554
- .vd-music-player-playlist-name {
64555
- white-space: nowrap;
64556
- text-overflow: ellipsis;
64557
- flex: 1;
64558
- min-width: 0;
64559
- overflow: hidden;
64560
- }
64561
-
64562
- .vd-music-player-compact {
64563
- flex-direction: row;
64564
- align-items: center;
64565
- gap: .5rem;
64566
- width: auto;
64567
- min-width: auto;
64568
- max-width: none;
64569
- padding: .5rem .8125rem;
64570
- }
64571
-
64572
- .vd-music-player-compact .vd-music-player-info {
64573
- display: none;
64574
- }
64575
-
64576
- .vd-music-player-compact .vd-music-player-controls {
64577
- gap: .125rem;
64578
- }
64579
-
64580
- .vd-music-player-inline {
64581
- padding: .625rem var(--vd-music-player-padding-x);
64582
- flex-flow: wrap;
64583
- align-items: center;
64584
- gap: .625rem;
64585
- min-width: 0;
64586
- max-width: none;
64587
- }
64588
-
64589
- .vd-music-player-inline .vd-music-player-info {
64590
- flex: 1;
64591
- min-width: 8rem;
64592
- margin-bottom: 0;
64593
- }
64594
-
64595
- .vd-music-player-inline .vd-music-player-controls {
64596
- flex: auto;
64597
- justify-content: flex-end;
64598
- min-width: 0;
64599
- }
64600
-
64601
- .vd-music-player-inline .vd-music-player-volume {
64602
- flex: 0 auto;
64603
- }
64604
-
64605
- .vd-music-player-inline .vd-music-player-volume-slider {
64606
- flex-basis: clamp(4rem, 18vw, 5.5rem);
64607
- width: clamp(4rem, 18vw, 5.5rem);
64608
- }
64609
-
64610
- .vd-music-player-inline .vd-music-player-progress {
64611
- flex-basis: 100%;
64612
- margin-top: .375rem;
64613
- }
64614
-
64615
- .vd-music-player-sm {
64616
- padding: var(--vd-music-player-padding-y-sm) var(--vd-music-player-padding-x-sm);
64617
- font-size: var(--vd-font-size-sm, .875rem);
64618
- }
64619
-
64620
- .vd-music-player-sm .vd-music-player-btn {
64621
- width: var(--vd-music-player-btn-size-sm);
64622
- height: var(--vd-music-player-btn-size-sm);
64623
- }
64624
-
64625
- .vd-music-player-sm .vd-music-player-btn-play {
64626
- width: calc(var(--vd-music-player-btn-size-sm) + .125rem);
64627
- height: calc(var(--vd-music-player-btn-size-sm) + .125rem);
64628
- }
64629
-
64630
- .vd-music-player-sm .vd-music-player-btn svg, .vd-music-player-sm .vd-music-player-btn i {
64631
- width: .9375rem;
64632
- height: .9375rem;
64633
- font-size: .9375rem;
64634
- }
64635
-
64636
- .vd-music-player-sm .vd-music-player-volume-slider {
64637
- width: var(--vd-music-player-volume-width-sm);
64638
- min-width: var(--vd-music-player-volume-width-sm);
64639
- flex-basis: var(--vd-music-player-volume-width-sm);
64640
- }
64641
-
64642
- .vd-music-player-lg {
64643
- padding: var(--vd-music-player-padding-y-lg) var(--vd-music-player-padding-x-lg);
64644
- }
64645
-
64646
- .vd-music-player-lg .vd-music-player-btn {
64647
- width: var(--vd-music-player-btn-size-lg);
64648
- height: var(--vd-music-player-btn-size-lg);
64649
- }
64650
-
64651
- .vd-music-player-lg .vd-music-player-btn-play {
64652
- width: calc(var(--vd-music-player-btn-size-lg) + .25rem);
64653
- height: calc(var(--vd-music-player-btn-size-lg) + .25rem);
64654
- }
64655
-
64656
- .vd-music-player-lg .vd-music-player-btn svg, .vd-music-player-lg .vd-music-player-btn i {
64657
- width: 1.25rem;
64658
- height: 1.25rem;
64659
- font-size: 1.25rem;
64660
- }
64661
-
64662
- .vd-music-player-lg .vd-music-player-volume-slider {
64663
- width: var(--vd-music-player-volume-width-lg);
64664
- flex-basis: var(--vd-music-player-volume-width-lg);
64665
- min-width: 4rem;
64666
- }
64667
-
64668
- .vd-music-player-neutral {
64669
- --vd-music-player-accent: var(--vd-text-primary);
64670
- --vd-music-player-track-fill: var(--vd-text-primary);
64671
- --vd-music-player-playlist-active-text: var(--vd-text-primary);
64672
- --vd-music-player-playlist-active-bg: var(--vd-bg-secondary);
64673
- --vd-music-player-btn-active-bg: var(--vd-bg-secondary);
64674
- }
64675
-
64676
- .vd-music-player-glass {
64677
- background: var(--vd-music-player-glass-bg);
64678
- border-color: var(--vd-music-player-glass-border);
64679
- box-shadow: var(--vd-music-player-glass-shadow);
64680
- -webkit-backdrop-filter: blur(var(--vd-glass-blur, 12px)) saturate(var(--vd-glass-saturate, 1.8));
64681
- isolation: isolate;
64682
- position: relative;
64683
- overflow: hidden;
64684
- }
64685
-
64686
- .vd-music-player-glass:before {
64687
- content: "";
64688
- background: linear-gradient(to bottom,
64689
- rgba(255, 255, 255, var(--vd-glass-highlight-alpha, .12)) 0%,
64690
- #fff0 45%);
64691
- pointer-events: none;
64692
- z-index: 0;
64693
- border-radius: inherit;
64694
- position: absolute;
64695
- inset: 0;
64696
- }
64697
-
64698
- .vd-music-player-glass:after {
64699
- content: "";
64700
- opacity: var(--vd-glass-noise-opacity, .12);
64701
- pointer-events: none;
64702
- z-index: 0;
64703
- border-radius: inherit;
64704
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url('components/%23n')' opacity='0.25'/%3E%3C/svg%3E");
64705
- position: absolute;
64706
- inset: 0;
64707
- }
64708
-
64709
- .vd-music-player-glass > * {
64710
- z-index: 1;
64711
- position: relative;
64712
- }
64713
-
64714
- @supports not (backdrop-filter: blur(1px)) {
64715
- .vd-music-player-glass {
64716
- background: var(--vd-music-player-bg);
64717
- }
64718
-
64719
- .vd-music-player-glass:before, .vd-music-player-glass:after {
64720
- display: none;
64721
- }
64722
- }
64723
-
64724
- .vd-music-player.vd-music-player-floating {
64725
- z-index: var(--vd-music-player-floating-z);
64726
- max-width: min(28rem, calc(100vw - 2 * var(--vd-music-player-floating-offset)));
64727
- width: min(28rem, calc(100vw - 2 * var(--vd-music-player-floating-offset)));
64728
- box-shadow: var(--vd-music-player-floating-shadow);
64729
- transition: box-shadow var(--vd-music-player-transition),
64730
- transform var(--vd-music-player-transition);
64731
- margin: 0;
64732
- position: fixed;
64733
- }
64734
-
64735
- .vd-music-player-floating.vd-music-player-floating-bottom-left, .vd-music-player-floating.vd-music-player-floating-bottom-right {
64736
- bottom: var(--vd-music-player-floating-offset);
64737
- top: auto;
64738
- }
64739
-
64740
- .vd-music-player-floating.vd-music-player-floating-bottom-left {
64741
- left: var(--vd-music-player-floating-offset);
64742
- right: auto;
64743
- }
64744
-
64745
- .vd-music-player-floating.vd-music-player-floating-bottom-right {
64746
- right: var(--vd-music-player-floating-offset);
64747
- left: auto;
64748
- }
64749
-
64750
- .vd-music-player-floating:hover {
64751
- box-shadow: var(--vd-glass-float-shadow, 0 14px 42px #0003);
64752
- }
64753
-
64754
- .vd-music-player-floating.is-position-custom {
64755
- top: var(--vd-music-player-floating-top, 1rem) !important;
64756
- left: var(--vd-music-player-floating-left, 1rem) !important;
64757
- bottom: auto !important;
64758
- right: auto !important;
64759
- }
64760
-
64761
- .vd-music-player-toolbar {
64762
- align-items: center;
64763
- gap: var(--vd-music-player-toolbar-gap);
64764
- min-height: var(--vd-music-player-handle-size);
64765
- z-index: 2;
64766
- margin: -.25rem -.25rem .5rem;
64767
- display: flex;
64768
- position: relative;
64769
- }
64770
-
64771
- .vd-music-player-drag-handle {
64772
- width: 2.25rem;
64773
- height: var(--vd-music-player-handle-size);
64774
- border-radius: var(--vd-music-player-border-radius);
64775
- color: var(--vd-music-player-text-muted);
64776
- cursor: grab;
64777
- touch-action: none;
64778
- background: none;
64779
- border: none;
64780
- flex-shrink: 0;
64781
- justify-content: center;
64782
- align-items: center;
64783
- padding: 0;
64784
- display: none;
64785
- }
64786
-
64787
- .vd-music-player-drag-handle:active {
64788
- cursor: grabbing;
64789
- }
64790
-
64791
- .vd-music-player-drag-handle .ph {
64792
- pointer-events: none;
64793
- font-size: 1.125rem;
64794
- }
64795
-
64796
- .vd-music-player-detached.vd-music-player-draggable .vd-music-player-drag-handle {
64797
- display: inline-flex;
64798
- }
64799
-
64800
- .vd-music-player-toolbar-spacer {
64801
- flex: auto;
64802
- min-width: .5rem;
64803
- }
64804
-
64805
- .vd-music-player-btn-attach, .vd-music-player-btn-detach, .vd-music-player-btn-minimize {
64806
- flex-shrink: 0;
64807
- }
64808
-
64809
- .vd-music-player.vd-music-player-detached .vd-music-player-btn-detach, .vd-music-player .vd-music-player-btn-attach {
64810
- display: none;
64811
- }
64812
-
64813
- .vd-music-player.vd-music-player-detached .vd-music-player-btn-attach {
64814
- display: inline-flex;
64815
- }
64816
-
64817
- .vd-music-player-minimized .vd-music-player-info, .vd-music-player-minimized .vd-music-player-progress, .vd-music-player-minimized .vd-music-player-playlist {
64818
- display: none !important;
64819
- }
64820
-
64821
- .vd-music-player-minimized .vd-music-player-btn-shuffle, .vd-music-player-minimized .vd-music-player-btn-playlist {
64822
- display: none;
64823
- }
64824
-
64825
- .vd-music-player-minimized {
64826
- min-width: auto;
64827
- max-width: min(22rem, 100vw);
64828
- }
64829
-
64830
- @media (prefers-reduced-transparency: reduce) {
64831
- .vd-music-player-glass {
64832
- -webkit-backdrop-filter: none;
64833
- background: var(--vd-music-player-bg);
64834
- border-color: var(--vd-music-player-border);
64835
- }
64836
-
64837
- .vd-music-player-glass:before, .vd-music-player-glass:after {
64838
- display: none;
64839
- }
64840
- }
64841
-
64842
- @media (prefers-reduced-motion: reduce) {
64843
- .vd-music-player-btn, .vd-music-player-volume-slider::-webkit-slider-thumb, .vd-music-player-volume-slider::-moz-range-thumb, .vd-music-player-progress-bar::-webkit-slider-thumb, .vd-music-player-progress-bar::-moz-range-thumb, .vd-music-player-playlist-item, .vd-music-player-floating {
64844
- transition: none;
64845
- }
64846
-
64847
- .vd-music-player-floating:hover {
64848
- box-shadow: var(--vd-music-player-floating-shadow);
64849
- }
64850
- }
64851
-
64852
- @media (width <= 640px) {
64853
- .vd-music-player {
64854
- min-width: 0;
64855
- max-width: none;
64856
- }
64857
-
64858
- .vd-music-player-controls {
64859
- row-gap: .5rem;
64860
- }
64861
-
64862
- .vd-music-player-spacer {
64863
- display: none;
64864
- }
64865
-
64866
- .vd-music-player-volume {
64867
- margin-left: auto;
64868
- }
64869
- }
64870
-
64871
64298
  :root {
64872
64299
  --vd-parallax-speed-slow: .5;
64873
64300
  --vd-parallax-speed-medium: 1;