App.css (19958B)
1 .page { 2 max-width: 960px; 3 margin: 0 auto; 4 padding: 2rem 1.25rem 4rem; 5 } 6 7 .header { 8 text-align: center; 9 margin-bottom: 2rem; 10 } 11 12 .logo-link { 13 display: inline-block; 14 } 15 16 .site-nav { 17 margin-top: 1rem; 18 } 19 20 .nav-link { 21 font-weight: 600; 22 color: color-mix(in srgb, var(--accent-cyan) 94%, #fff 6%); 23 text-decoration: none; 24 border-bottom: 1px dashed color-mix(in srgb, var(--accent-cyan) 48%, transparent); 25 } 26 27 .nav-link:hover { 28 color: var(--accent); 29 border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); 30 } 31 32 .logo { 33 max-width: min(360px, 100%); 34 height: auto; 35 filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5)); 36 } 37 38 .tagline { 39 margin: 1rem auto 0; 40 max-width: 36rem; 41 color: var(--muted); 42 font-size: 0.98rem; 43 font-style: italic; 44 line-height: 1.45; 45 } 46 47 .main { 48 display: grid; 49 gap: 1.25rem; 50 } 51 52 .main-home { 53 gap: 1.25rem; 54 } 55 56 .main-sidebar { 57 display: flex; 58 flex-direction: column; 59 gap: 1.25rem; 60 min-width: 0; 61 } 62 63 @media (min-width: 720px) { 64 .main-home { 65 grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); 66 grid-template-areas: 67 "sidebar player" 68 "embed embed"; 69 align-items: stretch; 70 gap: 1.25rem 1.5rem; 71 } 72 73 .main-sidebar { 74 grid-area: sidebar; 75 min-height: 100%; 76 } 77 78 .main-home .now-playing { 79 grid-area: player; 80 display: flex; 81 flex-direction: column; 82 } 83 84 .main-home .main-embed { 85 grid-area: embed; 86 } 87 88 .main-home .history { 89 flex: 1; 90 display: flex; 91 flex-direction: column; 92 min-height: 12rem; 93 } 94 95 .main-home .history-list { 96 flex: 1; 97 max-height: none; 98 min-height: 6rem; 99 overflow-y: auto; 100 } 101 } 102 103 .card { 104 background: var(--panel); 105 border: 2px dashed var(--border-dash); 106 border-radius: 18px 10px 20px 14px; 107 padding: 1.25rem 1.25rem 1.5rem; 108 box-shadow: var(--shadow-card); 109 } 110 111 .card-head { 112 display: flex; 113 flex-wrap: wrap; 114 align-items: center; 115 justify-content: space-between; 116 gap: 0.5rem; 117 margin-bottom: 1rem; 118 } 119 120 .card h2 { 121 margin: 0 0 0.35rem; 122 font-family: var(--font-display); 123 font-size: 1.2rem; 124 font-weight: 600; 125 font-variation-settings: "SOFT" 40; 126 letter-spacing: 0.01em; 127 text-transform: none; 128 color: var(--accent); 129 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); 130 } 131 132 .track-block .artist { 133 font-size: 1.35rem; 134 font-weight: 700; 135 margin: 0 0 0.35rem; 136 color: color-mix(in srgb, var(--accent-sky) 52%, var(--accent-cyan) 48%); 137 } 138 139 .track-block .title { 140 font-size: 1.2rem; 141 font-weight: 600; 142 margin: 0 0 0.75rem; 143 } 144 145 .up-next { 146 margin-top: 1rem; 147 padding: 0.85rem 1rem; 148 border-radius: 12px 14px 10px 12px; 149 border: 1px dashed color-mix(in srgb, var(--accent-cyan) 34%, transparent); 150 background: color-mix(in srgb, var(--panel) 92%, var(--accent-cyan) 8%); 151 } 152 153 .up-next-label { 154 margin: 0 0 0.45rem; 155 font-family: var(--font-display); 156 font-size: 0.88rem; 157 font-weight: 600; 158 color: var(--accent); 159 letter-spacing: 0.02em; 160 } 161 162 .up-next-track { 163 margin: 0; 164 font-size: 0.96rem; 165 line-height: 1.45; 166 } 167 168 .up-next-artist { 169 color: color-mix(in srgb, var(--accent-sky) 58%, var(--accent-cyan) 42%); 170 font-weight: 600; 171 } 172 173 .up-next-title { 174 font-weight: 500; 175 } 176 177 .up-next-sep { 178 color: var(--muted); 179 } 180 181 .up-next-empty { 182 margin: 0; 183 font-size: 0.92rem; 184 } 185 186 .up-next-note { 187 margin: 0.55rem 0 0; 188 font-size: 0.8rem; 189 } 190 191 .meta { 192 margin: 0; 193 } 194 195 .pill { 196 display: inline-block; 197 padding: 0.2rem 0.55rem; 198 border-radius: 999px; 199 font-size: 0.75rem; 200 background: color-mix(in srgb, var(--accent-cyan) 22%, transparent); 201 border: 1px dashed color-mix(in srgb, var(--accent-cyan) 45%, transparent); 202 word-break: break-all; 203 } 204 205 .muted { 206 color: var(--muted); 207 } 208 209 .player-nook { 210 position: relative; 211 margin-top: 1rem; 212 padding: 1.2rem 1.05rem 1.15rem; 213 background: var(--panel-nook); 214 border-radius: 14px 18px 12px 16px; 215 border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent); 216 box-shadow: var(--shadow-inset-nook); 217 } 218 219 .player-nook::before { 220 content: "♪"; 221 position: absolute; 222 top: 0.65rem; 223 right: 0.85rem; 224 font-size: 1.15rem; 225 opacity: 0.22; 226 pointer-events: none; 227 color: var(--accent); 228 } 229 230 /* Native <audio> is screen-reader–backed by CozyAudioBar controls */ 231 .audio-hidden { 232 position: absolute; 233 width: 1px; 234 height: 1px; 235 padding: 0; 236 margin: -1px; 237 overflow: hidden; 238 clip: rect(0, 0, 0, 0); 239 white-space: nowrap; 240 border: 0; 241 } 242 243 .cozy-player { 244 display: flex; 245 align-items: center; 246 gap: 0.65rem; 247 width: 100%; 248 margin-top: 0; 249 padding: 0.6rem 0.75rem; 250 border-radius: 999px; 251 background: color-mix(in srgb, #0a1220 75%, var(--logo-navy) 25%); 252 border: 1px solid color-mix(in srgb, var(--accent-cyan) 25%, transparent); 253 box-shadow: 254 inset 0 2px 8px rgba(0, 0, 0, 0.35), 255 0 1px 0 rgba(255, 255, 255, 0.04); 256 } 257 258 .cozy-player--disabled { 259 opacity: 0.55; 260 pointer-events: none; 261 } 262 263 .cozy-player__play, 264 .cozy-player__mute { 265 flex-shrink: 0; 266 display: inline-flex; 267 align-items: center; 268 justify-content: center; 269 width: 2.5rem; 270 height: 2.5rem; 271 padding: 0; 272 border: none; 273 border-radius: 50%; 274 cursor: pointer; 275 color: #f0f6ff; 276 background: color-mix(in srgb, var(--accent-cyan) 18%, var(--logo-navy-deep) 82%); 277 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); 278 transition: filter 0.12s ease, transform 0.08s ease; 279 } 280 281 .cozy-player__play:hover:not(:disabled), 282 .cozy-player__mute:hover:not(:disabled) { 283 filter: brightness(1.12); 284 } 285 286 .cozy-player__play:active:not(:disabled), 287 .cozy-player__mute:active:not(:disabled) { 288 transform: scale(0.96); 289 } 290 291 .cozy-player__play:focus-visible, 292 .cozy-player__mute:focus-visible { 293 outline: 2px solid var(--accent); 294 outline-offset: 2px; 295 } 296 297 .cozy-player__play:disabled, 298 .cozy-player__mute:disabled { 299 cursor: not-allowed; 300 opacity: 0.6; 301 } 302 303 .cozy-player__icon { 304 width: 1.35rem; 305 height: 1.35rem; 306 } 307 308 .cozy-player__progress-wrap { 309 flex: 1; 310 display: flex; 311 align-items: center; 312 gap: 0.5rem; 313 min-width: 0; 314 } 315 316 .cozy-player__time { 317 flex-shrink: 0; 318 font-size: 0.78rem; 319 font-variant-numeric: tabular-nums; 320 letter-spacing: 0.02em; 321 color: var(--muted); 322 } 323 324 .cozy-player__scrub { 325 flex: 1; 326 min-width: 0; 327 height: 0.45rem; 328 -webkit-appearance: none; 329 appearance: none; 330 background: transparent; 331 border-radius: 999px; 332 cursor: pointer; 333 } 334 335 .cozy-player__scrub::-webkit-slider-runnable-track { 336 height: 0.45rem; 337 background: color-mix(in srgb, var(--muted) 28%, transparent); 338 border-radius: 999px; 339 } 340 341 .cozy-player__scrub:disabled { 342 cursor: not-allowed; 343 opacity: 0.5; 344 } 345 346 .cozy-player__scrub::-webkit-slider-thumb { 347 -webkit-appearance: none; 348 appearance: none; 349 width: 0.9rem; 350 height: 0.9rem; 351 border-radius: 50%; 352 background: linear-gradient(160deg, var(--accent), var(--accent-strong)); 353 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 354 border: 2px solid color-mix(in srgb, #fff 40%, transparent); 355 } 356 357 .cozy-player__scrub::-moz-range-thumb { 358 width: 0.9rem; 359 height: 0.9rem; 360 border-radius: 50%; 361 background: linear-gradient(160deg, var(--accent), var(--accent-strong)); 362 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 363 border: 2px solid color-mix(in srgb, #fff 40%, transparent); 364 } 365 366 .cozy-player__scrub::-moz-range-track { 367 height: 0.45rem; 368 background: color-mix(in srgb, var(--muted) 28%, transparent); 369 border-radius: 999px; 370 } 371 372 .cozy-player__scrub:focus-visible { 373 outline: 2px solid var(--accent-cyan); 374 outline-offset: 2px; 375 } 376 377 .actions { 378 display: flex; 379 flex-wrap: wrap; 380 align-items: center; 381 gap: 1rem; 382 margin-top: 1.15rem; 383 } 384 385 .btn { 386 cursor: pointer; 387 border: none; 388 border-radius: 999px; 389 padding: 0.65rem 1.4rem; 390 font-weight: 700; 391 font-size: 1rem; 392 font-family: inherit; 393 transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease; 394 } 395 396 .btn.primary { 397 background: linear-gradient( 398 175deg, 399 color-mix(in srgb, var(--accent) 96%, #fff 4%), 400 color-mix(in srgb, var(--accent-strong) 88%, #8c2508 12%) 401 ); 402 color: #fff; 403 text-shadow: 0 1px 2px rgba(0, 15, 40, 0.45); 404 box-shadow: 405 0 3px 14px color-mix(in srgb, var(--accent-strong) 42%, transparent), 406 inset 0 1px 0 rgba(255, 255, 255, 0.35); 407 } 408 409 .btn.primary:hover { 410 filter: brightness(1.06); 411 box-shadow: 412 0 4px 18px color-mix(in srgb, var(--accent-strong) 48%, transparent), 413 inset 0 1px 0 rgba(255, 255, 255, 0.4); 414 } 415 416 .btn.primary:active { 417 transform: translateY(1px); 418 } 419 420 .check { 421 display: inline-flex; 422 align-items: center; 423 gap: 0.45rem; 424 font-size: 0.9rem; 425 color: var(--muted); 426 } 427 428 .hint { 429 margin: 0.75rem 0 0; 430 font-size: 0.85rem; 431 color: var(--muted); 432 } 433 434 .history-list { 435 margin: 0; 436 padding-left: 1.1rem; 437 max-height: 14rem; 438 overflow: auto; 439 } 440 441 .main-home .history h2 { 442 margin-bottom: 0.75rem; 443 } 444 445 .history-list li { 446 margin-bottom: 0.45rem; 447 font-size: 0.92rem; 448 } 449 450 .h-artist { 451 color: color-mix(in srgb, var(--accent-sky) 62%, var(--accent-cyan) 38%); 452 font-weight: 600; 453 } 454 455 .sep { 456 margin: 0 0.25rem; 457 color: var(--muted); 458 } 459 460 .h-title { 461 font-weight: 500; 462 } 463 464 .health-banner { 465 margin-bottom: 1.25rem; 466 padding: 1rem 1.1rem; 467 border-radius: 14px 10px 12px 16px; 468 border: 2px dashed color-mix(in srgb, var(--accent-strong) 52%, transparent); 469 background: color-mix(in srgb, var(--accent-strong) 14%, var(--panel)); 470 box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32); 471 } 472 473 .health-banner strong { 474 display: block; 475 margin-bottom: 0.5rem; 476 font-family: var(--font-display); 477 color: var(--accent); 478 font-size: 1rem; 479 font-weight: 600; 480 letter-spacing: 0.02em; 481 text-transform: none; 482 } 483 484 .health-banner p { 485 margin: 0 0 0.65rem; 486 font-size: 0.9rem; 487 line-height: 1.45; 488 word-break: break-word; 489 } 490 491 .health-banner p:last-child { 492 margin-bottom: 0; 493 } 494 495 .health-banner-hint { 496 color: var(--muted); 497 font-size: 0.82rem !important; 498 } 499 500 .health-banner code { 501 font-size: 0.8em; 502 color: var(--accent-cyan); 503 } 504 505 .footer { 506 margin-top: 1.75rem; 507 text-align: center; 508 } 509 510 .page:has(.main-home) .footer { 511 margin-top: 1.5rem; 512 } 513 514 .footer code { 515 font-size: 0.85em; 516 color: color-mix(in srgb, var(--accent-cyan) 78%, var(--accent) 22%); 517 } 518 519 /* About: single-column layout — avoids squeezed half-width card on wide viewports */ 520 .page-about { 521 max-width: min(56rem, 100%); 522 } 523 524 .main-about { 525 grid-template-columns: 1fr; 526 } 527 528 .about-shell { 529 width: 100%; 530 max-width: min(52rem, 100%); 531 margin-inline: auto; 532 } 533 534 .about-card { 535 padding: 1.75rem 1.5rem 2rem; 536 } 537 538 @media (min-width: 640px) { 539 .about-card { 540 padding: 2rem 2rem 2.25rem; 541 } 542 } 543 544 .about-title { 545 margin: 0 0 1.25rem; 546 font-family: var(--font-display); 547 font-size: 1.45rem; 548 font-weight: 600; 549 font-variation-settings: "SOFT" 38; 550 letter-spacing: 0.02em; 551 text-transform: none; 552 line-height: 1.25; 553 color: var(--accent); 554 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); 555 } 556 557 .about-prose p { 558 margin: 0 0 1rem; 559 font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); 560 line-height: 1.7; 561 color: color-mix(in srgb, var(--text) 92%, var(--muted)); 562 } 563 564 .about-prose p:last-child { 565 margin-bottom: 0; 566 } 567 568 .embed-page { 569 min-height: 0; 570 margin: 0; 571 padding: 0.45rem; 572 box-sizing: border-box; 573 color: var(--mm-text, var(--text)); 574 background: var(--mm-bg, transparent); 575 } 576 577 .embed-shell { 578 max-width: 380px; 579 margin: 0 auto; 580 font-family: var(--mm-font-body, inherit); 581 } 582 583 .embed-shell .card { 584 padding: 0.65rem 0.75rem 0.75rem; 585 background: var(--mm-bg-panel, var(--panel)); 586 border-color: var(--mm-border, var(--border-dash)); 587 border-radius: var(--mm-radius, 18px 10px 20px 14px); 588 box-shadow: var(--mm-shadow, var(--shadow-card)); 589 } 590 591 .embed-shell .card-head { 592 margin-bottom: 0.5rem; 593 } 594 595 .embed-shell .card h2 { 596 font-size: 1rem; 597 font-family: var(--mm-font-display, var(--font-display)); 598 color: var(--mm-accent, var(--accent)); 599 } 600 601 .embed-shell .track-block .artist { 602 font-size: 1.08rem; 603 margin: 0 0 0.2rem; 604 color: var(--mm-accent-secondary, color-mix(in srgb, var(--accent-sky) 52%, var(--accent-cyan) 48%)); 605 } 606 607 .embed-shell .track-block .title { 608 font-size: 0.98rem; 609 margin: 0 0 0.35rem; 610 color: var(--mm-text, var(--text)); 611 } 612 613 .embed-shell .up-next { 614 margin-top: 0.45rem; 615 padding: 0.5rem 0.65rem; 616 border-color: var(--mm-border, color-mix(in srgb, var(--accent-cyan) 34%, transparent)); 617 background: color-mix(in srgb, var(--mm-bg-panel, var(--panel)) 92%, var(--mm-accent-secondary, var(--accent-cyan)) 8%); 618 border-radius: var(--mm-radius, 12px); 619 } 620 621 .embed-shell .up-next-label { 622 font-size: 0.78rem; 623 margin: 0 0 0.3rem; 624 font-family: var(--mm-font-display, var(--font-display)); 625 color: var(--mm-accent, var(--accent)); 626 } 627 628 .embed-shell .up-next-track { 629 font-size: 0.84rem; 630 color: var(--mm-text, var(--text)); 631 } 632 633 .embed-shell .up-next-artist { 634 color: var(--mm-accent-secondary, color-mix(in srgb, var(--accent-sky) 58%, var(--accent-cyan) 42%)); 635 } 636 637 .embed-shell .up-next-sep, 638 .embed-shell .up-next-empty, 639 .embed-shell .up-next-note { 640 color: var(--mm-text-muted, var(--muted)); 641 } 642 643 .embed-shell .player-nook { 644 margin-top: 0.45rem; 645 padding: 0.65rem 0.6rem 0.65rem; 646 background: color-mix(in srgb, var(--mm-bg-panel, var(--panel-nook)) 88%, var(--mm-accent-secondary, var(--accent-cyan)) 12%); 647 border-color: var(--mm-border, color-mix(in srgb, var(--accent-cyan) 28%, transparent)); 648 border-radius: var(--mm-radius, 14px); 649 } 650 651 .embed-shell .cozy-player { 652 padding: 0.45rem 0.55rem; 653 gap: 0.45rem; 654 } 655 656 .embed-shell .cozy-player__play, 657 .embed-shell .cozy-player__mute { 658 width: 2.15rem; 659 height: 2.15rem; 660 background: var(--mm-accent, var(--accent)); 661 color: color-mix(in srgb, var(--mm-bg, #000) 85%, var(--mm-text, #fff) 15%); 662 } 663 664 .embed-shell .cozy-player__icon { 665 width: 1.15rem; 666 height: 1.15rem; 667 } 668 669 .embed-shell .cozy-player__time { 670 font-size: 0.72rem; 671 color: var(--mm-text-muted, var(--muted)); 672 } 673 674 .embed-shell .cozy-player__scrub::-webkit-slider-runnable-track { 675 background: color-mix(in srgb, var(--mm-accent-secondary, var(--accent-cyan)) 35%, transparent); 676 } 677 678 .embed-shell .cozy-player__scrub::-webkit-slider-thumb { 679 background: var(--mm-accent, var(--accent)); 680 } 681 682 .embed-shell .cozy-player__scrub::-moz-range-thumb { 683 background: var(--mm-accent, var(--accent)); 684 } 685 686 .embed-shell .actions { 687 margin-top: 0.55rem; 688 gap: 0.45rem; 689 } 690 691 .embed-shell .btn.primary { 692 padding: 0.5rem 1.1rem; 693 font-size: 0.92rem; 694 background: var(--mm-accent, var(--accent)); 695 color: color-mix(in srgb, var(--mm-bg, #000) 88%, var(--mm-text, #fff) 12%); 696 } 697 698 .embed-shell .check { 699 font-size: 0.76rem; 700 color: var(--mm-text-muted, var(--muted)); 701 } 702 703 .embed-shell .hint { 704 margin: 0.45rem 0 0; 705 font-size: 0.78rem; 706 color: var(--mm-text-muted, var(--muted)); 707 } 708 709 .embed-shell .muted { 710 color: var(--mm-text-muted, var(--muted)); 711 } 712 713 .embed-shell .pill { 714 background: color-mix(in srgb, var(--mm-accent-secondary, var(--accent-cyan)) 22%, transparent); 715 border-color: var(--mm-border, color-mix(in srgb, var(--accent-cyan) 45%, transparent)); 716 } 717 718 .embed-shell a { 719 color: var(--mm-accent-secondary, color-mix(in srgb, var(--logo-cyan) 92%, #fff 8%)); 720 } 721 722 .embed-brand { 723 margin-top: 0.5rem; 724 padding-top: 0.45rem; 725 text-align: center; 726 } 727 728 .embed-brand-link { 729 display: inline-block; 730 line-height: 0; 731 opacity: 0.92; 732 transition: opacity 0.15s ease; 733 } 734 735 .embed-brand-link:hover { 736 opacity: 1; 737 } 738 739 .embed-brand-logo { 740 display: block; 741 width: 100%; 742 max-width: 7.5rem; 743 height: auto; 744 } 745 746 .health-banner--embed { 747 margin-bottom: 0.85rem; 748 padding: 0.75rem 0.85rem; 749 } 750 751 .health-banner--embed p:last-child { 752 margin-bottom: 0; 753 } 754 755 .embed-snippet { 756 max-width: min(52rem, 100%); 757 margin: 2rem auto 0; 758 padding: 1.25rem 1.25rem 1.5rem; 759 } 760 761 .main-home .main-embed.embed-snippet { 762 max-width: none; 763 width: 100%; 764 margin: 0.25rem 0 0; 765 padding: 1.15rem 1.25rem 1.35rem; 766 } 767 768 .page-about .embed-snippet { 769 margin-top: 1.75rem; 770 } 771 772 .embed-snippet-title { 773 margin: 0 0 0.5rem; 774 font-family: var(--font-display); 775 font-size: 1.15rem; 776 font-weight: 600; 777 color: var(--accent); 778 } 779 780 .embed-snippet-lead { 781 margin: 0 0 0.85rem; 782 font-size: 0.92rem; 783 } 784 785 .embed-snippet-code { 786 display: block; 787 width: 100%; 788 margin: 0 0 1rem; 789 padding: 0.85rem 1rem; 790 font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, monospace; 791 font-size: 0.78rem; 792 line-height: 1.45; 793 color: var(--text); 794 background: color-mix(in srgb, var(--logo-navy-deep) 65%, var(--panel) 35%); 795 border: 1px dashed color-mix(in srgb, var(--accent-cyan) 35%, transparent); 796 border-radius: 10px; 797 resize: vertical; 798 min-height: 8rem; 799 max-height: 10rem; 800 box-sizing: border-box; 801 } 802 803 .main-home .embed-snippet-code { 804 max-height: 7.5rem; 805 } 806 807 .embed-snippet-copy { 808 margin-top: 0; 809 } 810 811 .btn-share { 812 font-size: 0.85rem; 813 padding: 0.35rem 0.75rem; 814 } 815 816 .player-attribution { 817 margin: 0.75rem 0 0; 818 font-size: 0.8rem; 819 color: var(--muted, #888); 820 } 821 822 .player-attribution--compact { 823 margin-top: 0.5rem; 824 font-size: 0.72rem; 825 } 826 827 .player-attribution a { 828 color: inherit; 829 } 830 831 .player-phase { 832 font-size: 0.9rem; 833 color: var(--accent, #c9a227); 834 margin: 0.5rem 0 0; 835 } 836 837 .player-phase--compact, 838 .hint--compact { 839 font-size: 0.8rem; 840 } 841 842 .player-keys-hint { 843 margin: 0.5rem 0 0; 844 font-size: 0.75rem; 845 } 846 847 .track-search { 848 margin-bottom: 0; 849 } 850 851 .card--search { 852 flex-shrink: 0; 853 } 854 855 .track-search-input { 856 width: 100%; 857 box-sizing: border-box; 858 padding: 0.5rem 0.75rem; 859 margin-top: 0.5rem; 860 border-radius: 8px; 861 border: 1px solid rgba(255, 255, 255, 0.15); 862 background: rgba(0, 0, 0, 0.25); 863 color: inherit; 864 } 865 866 .track-search-results { 867 list-style: none; 868 margin: 0.5rem 0 0; 869 padding: 0; 870 max-height: 12rem; 871 overflow-y: auto; 872 } 873 874 .track-search-hit, 875 .history-hit { 876 width: 100%; 877 text-align: left; 878 background: none; 879 border: none; 880 color: inherit; 881 cursor: pointer; 882 padding: 0.35rem 0; 883 font: inherit; 884 } 885 886 .track-search-hit:hover, 887 .history-hit:hover { 888 text-decoration: underline; 889 } 890 891 .track-search-hint { 892 margin: 0.35rem 0 0; 893 font-size: 0.85rem; 894 } 895 896 .embed-snippet-options { 897 display: flex; 898 flex-direction: column; 899 gap: 0.5rem; 900 margin-bottom: 0.75rem; 901 } 902 903 @media (min-width: 600px) { 904 .embed-snippet-options { 905 display: grid; 906 grid-template-columns: repeat(2, minmax(0, 1fr)); 907 gap: 0.5rem 1rem; 908 } 909 910 .embed-snippet-start { 911 grid-column: 1 / -1; 912 } 913 } 914 915 .embed-snippet-start { 916 display: flex; 917 flex-direction: column; 918 gap: 0.25rem; 919 font-size: 0.9rem; 920 } 921 922 .embed-snippet-start input { 923 padding: 0.4rem 0.6rem; 924 border-radius: 6px; 925 border: 1px solid rgba(255, 255, 255, 0.15); 926 background: rgba(0, 0, 0, 0.25); 927 color: inherit; 928 } 929 930 .embed-snippet-theme-row { 931 grid-column: 1 / -1; 932 display: flex; 933 flex-wrap: wrap; 934 gap: 0.65rem 1rem; 935 align-items: flex-end; 936 } 937 938 .embed-snippet-field { 939 display: flex; 940 flex-direction: column; 941 gap: 0.25rem; 942 font-size: 0.82rem; 943 } 944 945 .embed-snippet-field select, 946 .embed-snippet-field input[type="color"], 947 .embed-snippet-field input[type="number"] { 948 padding: 0.35rem 0.5rem; 949 border-radius: 6px; 950 border: 1px solid rgba(255, 255, 255, 0.15); 951 background: rgba(0, 0, 0, 0.25); 952 color: inherit; 953 min-height: 2rem; 954 } 955 956 .embed-snippet-field input[type="color"] { 957 padding: 0.15rem; 958 width: 3rem; 959 cursor: pointer; 960 } 961 962 .embed-snippet-accent-row { 963 display: flex; 964 align-items: center; 965 gap: 0.45rem; 966 } 967 968 .embed-snippet-preview-wrap { 969 grid-column: 1 / -1; 970 margin: 0 0 1rem; 971 border: 1px dashed color-mix(in srgb, var(--accent-cyan) 35%, transparent); 972 border-radius: 10px; 973 overflow: hidden; 974 background: rgba(0, 0, 0, 0.2); 975 } 976 977 .embed-snippet-preview { 978 display: block; 979 width: 100%; 980 max-width: 380px; 981 min-height: 280px; 982 border: 0; 983 } 984 985 .embed-shell--compact .card { 986 padding: 0.65rem 0.85rem; 987 } 988 989 .embed-shell--compact .track-block .title { 990 font-size: 1rem; 991 } 992 993 .embed-shell--compact .track-block .artist { 994 font-size: 0.85rem; 995 } 996 997 .embed-shell--compact .up-next { 998 margin-top: 0.35rem; 999 } 1000 1001 .embed-shell--compact .embed-brand-logo { 1002 max-height: 48px; 1003 width: auto; 1004 } 1005 1006 .health-banner--embed summary { 1007 cursor: pointer; 1008 font-weight: 600; 1009 }