/* The Pulse — web widget styles. All scoped under .pl-pulse. */ .pl-pulse { position: fixed; /* LEFT side — the right side is where the player's controls live, and the pill was covering them. */ left: 20px; /* Sit ABOVE the fixed footer-menu-bar (var --menu-bar-height, 60px + iOS safe-area) instead of at bottom:22px, where the pill covered the footer's nav links on web. */ bottom: calc(var(--menu-bar-height, 60px) + env(safe-area-inset-bottom, 0px) + 16px); z-index: 99990; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); } .pl-pulse.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* While a music player bar is up, hide the pulse entirely (ALL screen sizes) — it otherwise sits over the player's controls. `pl-player-open` is toggled on by pulse.js (watches #pl-now-playing / #pl-mini-player / #plStPlayerBar). */ body.pl-player-open .pl-pulse { display: none !important; } /* ---- the pill ---- */ .pl-pulse-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 12px 9px 12px; border: 0; border-radius: 999px; background: #7c3aed; color: #f4f4f6; box-shadow: 0 6px 22px rgba(124, 58, 237, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13.5px; line-height: 1.2; transition: transform .15s ease, box-shadow .2s ease; } .pl-pulse-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); } .pl-pulse-icon { font-size: 14px; flex: 0 0 auto; } .pl-pulse-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; transition: opacity .18s ease; } .pl-pulse-pill.is-fading .pl-pulse-text { opacity: 0; } .pl-pulse-n { font-variant-numeric: tabular-nums; } /* live dot */ .pl-pulse-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #34c759; } .pl-pulse-pill.is-live .pl-pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34c759; animation: pl-pulse-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes pl-pulse-ping { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.8); opacity: 0; } } /* minimize button */ .pl-pulse-min { flex: 0 0 auto; margin-left: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #cfcfd6; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pl-pulse-min:hover { background: rgba(255, 255, 255, .22); color: #fff; } /* collapsed → just a dot */ .pl-pulse[data-collapsed="1"] .pl-pulse-icon, .pl-pulse[data-collapsed="1"] .pl-pulse-text, .pl-pulse[data-collapsed="1"] .pl-pulse-min { display: none; } .pl-pulse[data-collapsed="1"] .pl-pulse-pill { padding: 12px; } /* ---- expand card ---- */ .pl-pulse-card { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); background: rgba(22, 22, 27, .98); color: #f4f4f6; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .06) inset; overflow: hidden; opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom left; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .pl-pulse-card.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .pl-pulse-cover { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: #2a2a30; } .pl-pulse-body { padding: 14px 16px 6px; } .pl-pulse-h { font-size: 15px; font-weight: 650; line-height: 1.3; } .pl-pulse-sub { margin-top: 4px; font-size: 12.5px; color: #a9a9b3; } .pl-pulse-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pl-pulse-btn { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } .pl-pulse-play { background: #fff; color: #131316; } .pl-pulse-play:hover { background: #eaeaea; } .pl-pulse-open, .pl-pulse-share { background: rgba(255, 255, 255, .12); color: #f4f4f6; } .pl-pulse-open:hover, .pl-pulse-share:hover { background: rgba(255, 255, 255, .2); } .pl-pulse-off { display: block; width: 100%; border: 0; background: transparent; padding: 10px 16px 12px; color: #7d7d87; font-size: 11.5px; text-align: left; cursor: pointer; } .pl-pulse-off:hover { color: #a9a9b3; } /* ---- light theme ---- */ @media (prefers-color-scheme: light) { .pl-pulse-pill { background: #7c3aed; color: #f4f4f6; box-shadow: 0 6px 22px rgba(124,58,237,.4), 0 0 0 1px rgba(255,255,255,.12) inset; } .pl-pulse-min { background: rgba(0,0,0,.08); color: #55555e; } .pl-pulse-min:hover { background: rgba(0,0,0,.15); color: #000; } .pl-pulse-card { background: #fff; color: #17171b; box-shadow: 0 12px 40px rgba(0,0,0,.20), 0 0 0 1px rgba(0,0,0,.06) inset; } .pl-pulse-sub { color: #6a6a73; } .pl-pulse-play { background: #131316; color: #fff; } .pl-pulse-open, .pl-pulse-share { background: rgba(0,0,0,.08); color: #17171b; } .pl-pulse-off { color: #9a9aa2; } } /* ---- small screens ---- */ @media (max-width: 520px) { .pl-pulse { left: 12px; bottom: calc(var(--menu-bar-height, 60px) + env(safe-area-inset-bottom, 0px) + 12px); } .pl-pulse-text { max-width: 190px; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .pl-pulse, .pl-pulse-pill, .pl-pulse-text, .pl-pulse-card { transition: none; } .pl-pulse-pill.is-live .pl-pulse-dot::after { animation: none; } }